@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: Neuropolitical Rg; /* regular font */
  src: url("../fonts/neuropolitical.ttf") format("ttf"), url("../fonts/neuropolitical.woff") format("woff");
  font-weight: normal; font-style: normal;
}
@font-face {
	font-family: Aldrich; /* regular font */
 	src: url("../fonts/aldrich.ttf") format("ttf"), url("../fonts/aldrich.woff") format("woff");
  	font-weight: normal; font-style: normal;
}
@font-face {
	font-family: Galga; /* regular font */
 	src: url("../fonts/galga.ttf") format("ttf"), url("../fonts/galga.woff") format("woff");
  	font-weight: normal; font-style: normal;
}
@font-face {
	font-family: Telemarines; /* regular font */
 	src: url("../fonts/telev2.ttf") format("ttf"), url("../fonts/telev2.woff") format("woff");
  	font-weight: normal; font-style: normal;
}
@font-face {
	font-family: Telemarines Bold; /* regular font */
 	src: url("../fonts/telev2b.ttf") format("ttf"), url("../fonts/telev2b.woff") format("woff");
  	font-weight: normal; font-style: normal;
}

.left{
  text-align: left;
}

.center{
  text-align: center;
}

.center-vert{
	display: flex;
	align-items: center;
}

.right{
  text-align: right;
}

.backgroundgrid{
	background: rgba(0,0,0,0.5);
}

.img_down{
	display: block;
	margin: auto;
}

.img_up{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.log_img span{
	position:absolute;
	top: 0;
	left: 0;
  height: 70px;
  width: 100%;
  line-height: 70px;
  text-align: center;
  color: rgb(255,0,0);
}

body {
	background-image:url(../images/background.png);
	text-align:center;
	color: rgb(255,102,0);
}

html, body, .container {
    height:100%;
}

.container {
	font-family: Aldrich;
	font-size: 80%;
	-webkit-text-size-adjust: auto;
}

/*.row{
	color: rgb(255,102,0);
}*/

.float{
	position: relative;
	float: left	;
}

.menusrow {
    height: 80%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.login {
    height: 5%;
}
.menuindex {
    height: 5%;
}
.footer {
    height: 3%;
}
.menusrow .row1{
    height: 18%;
	margin-bottom: 3%;
}

.menusrow .row2{
    height: 79%;
}

.menusrow .rowlogin{
    height: 25%;
}

.menusrow .rowmenu{
    height: 75%;
}

.frame {
    text-align: center;
    height: 100%;
}

.leftmenu {
    text-align: center;
    height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(204,51,0,0.5);
	-moz-box-shadow: 0px 0px 10px 5px rgba(204,51,0,0.5);
	box-shadow: 0px 0px 10px 5px rgba(204,51,0,0.5);
}

.middleframe {
    text-align: center;
    height: 100%;
	padding-left: 3.5%;
	padding-right: 3.5%;
}

.middleframe_xs {
  text-align: center;
	padding-left: 3.5%;
	padding-right: 3.5%;
}

.rightmenu {
    text-align: center;
    height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,153,255,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,153,255,0.4);
	box-shadow: 0px 0px 10px 5px rgba(0,153,255,0.4);
}

.header_index {
	background-image:url(../images/banner.jpg);
	background-size: cover;
    text-align: left;
    height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
}

.header {
  text-align: left;
  height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
}

.header_login {
  text-align: left;
  height: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
}

.content {
	color: #E9E9E9;
    text-align: left;
    height: 100%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	overflow: auto;
}

.newstitle {
	height: 35px;
	text-align: left;
	font-size: 24px;
	color: #E9E9E9;
	margin-top: 5px;
	background: rgb(254,204,177);
	background: -moz-linear-gradient(top,  rgba(254,204,177,0.7) 0%, rgba(241,116,50,0.7) 50%, rgba(234,85,7,0.7) 51%, rgba(251,149,94,0.7) 100%);
	background: -webkit-linear-gradient(top,  rgba(254,204,177,0.7) 0%,rgba(241,116,50,0.7) 50%,rgba(234,85,7,0.7) 51%,rgba(251,149,94,0.7) 100%);
	background: linear-gradient(to bottom,  rgba(254,204,177,0.7) 0%,rgba(241,116,50,0.7) 50%,rgba(234,85,7,0.7) 51%,rgba(251,149,94,0.7) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
}

.newstext {
	text-align: left;
	background: rgba(0,0,0,0.8);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.pagetitle {
	font-family: Telemarines Bold;
	vertical-align: central;
	height: 45px;
	text-align: center;
	color: #E9E9E9;
	margin-top: 5px;
	background: rgb(254,204,177);
	background: -moz-linear-gradient(top,  rgba(254,204,177,0.7) 0%, rgba(241,116,50,0.7) 50%, rgba(234,85,7,0.7) 51%, rgba(251,149,94,0.7) 100%);
	background: -webkit-linear-gradient(top,  rgba(254,204,177,0.7) 0%,rgba(241,116,50,0.7) 50%,rgba(234,85,7,0.7) 51%,rgba(251,149,94,0.7) 100%);
	background: linear-gradient(to bottom,  rgba(254,204,177,0.7) 0%,rgba(241,116,50,0.7) 50%,rgba(234,85,7,0.7) 51%,rgba(251,149,94,0.7) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 10px 5px rgba(102,102,102,0.4);
}

.inventory {
	margin: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	display: flex;
	align-items: center;
}

.blau{
	border: 1px solid rgb(0, 35, 174);
	background: rgba(15, 15, 122, 0.2);
}

.gruen{
	border: 1px solid rgb(24, 116, 22);
	background: rgba(5, 74, 8, 0.2);
}

.rot{
	border: 1px solid rgb(141, 16, 16);
	background: rgba(153, 14, 14, 0.2);
}

.schwarz{
	border: 1px solid rgb(51,51,51);
	background: rgba(0, 0, 0, 0.2);
}

.violett{
	border: 1px solid rgb(121, 0, 174);
	background: rgba(101, 1, 138, 0.2);
}

.orange{
	border: 1px solid rgb(255,213,66);
	background: rgba(255,128,0, 0.1);
}

span.credits{
	background: rgb(0,0,0);
	color: rgb(50,168,82);
	padding: 1px 7px;
	border: 1px solid rgb(50,168,82);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(50,168,82,0.4), inset 0px 0px 5px 2px rgba(50,168,82,0.4);
	-moz-box-shadow: 0px 0px 10px 2px rgba(50,168,82,0.4, inset 0px 0px 5px 2px rgba(50,168,82,0.4));
	box-shadow: 0px 0px 10px 2px rgba(50,168,82,0.4), inset 0px 0px 5px 2px rgba(50,168,82,0.4);
}

span.credits a{
	color: rgb(50, 168, 82);
}

span.xp{
	background: rgb(0,0,0);
	color: rgb(255,153,0);
	padding: 1px 7px;
	border: 1px solid rgb(255,153,0);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(255,153,0,0.4), inset 0px 0px 5px 2px rgba(255,153,0,0.4);
	-moz-box-shadow: 0px 0px 10px 2px rgba(255,153,0,0.4, inset 0px 0px 5px 2px rgba(255,153,0,0.4));
	box-shadow: 0px 0px 10px 2px rgba(255,153,0,0.4), inset 0px 0px 5px 2px rgba(255,153,0,0.4);
}

span.xp a{
	color: rgb(255,153,0);
}

span.tp{
	background: rgb(0,0,0);
	color: rgb(255,153,0);
	padding: 1px 7px;
	border: 1px solid rgb(255,153,0);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(255,153,0,0.4), inset 0px 0px 5px 2px rgba(255,153,0,0.4);
	-moz-box-shadow: 0px 0px 10px 2px rgba(255,153,0,0.4, inset 0px 0px 5px 2px rgba(255,153,0,0.4));
	box-shadow: 0px 0px 10px 2px rgba(255,153,0,0.4), inset 0px 0px 5px 2px rgba(255,153,0,0.4);
}

span.tp a{
	color: rgb(255,153,0);
}

span.pve_energy{
	background: rgb(0,0,0);
	color: rgb(0,153,255);
	padding: 1px 7px;
	border: 1px solid rgb(0,153,255);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(0,153,255,0.4), inset 0px 0px 5px 2px rgba(0,153,255,0.4);
	-moz-box-shadow: 0px 0px 10px 2px rgba(0,153,255,0.4, inset 0px 0px 5px 2px rgba(0,153,255,0.4));
	box-shadow: 0px 0px 10px 2px rgba(0,153,255,0.4), inset 0px 0px 5px 2px rgba(0,153,255,0.4);
}

span.pve_energy a{
	color: rgb(0,153,255);
}

span.pvp_energy{
	background: rgb(0,0,0);
	color: rgb(255,0,0);
	padding: 1px 7px;
	border: 1px solid rgb(255,0,0);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(255,0,0,0.4), inset 0px 0px 5px 2px rgba(255,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px 2px rgba(255,0,0,0.4, inset 0px 0px 5px 2px rgba(255,0,0,0.4));
	box-shadow: 0px 0px 10px 2px rgba(255,0,0,0.4), inset 0px 0px 5px 2px rgba(255,0,0,0.4);
}

span.pvp_energy a{
	color: rgb(255,0,0);
}

table#agb {
	text-align: left;
	background-color: rgba(0,0,0,0.7);
	overflow: scroll;
}

#mech{
	position: absolute;
	width: 330px;
	top: 50%;
	height: 458px;
	left: 12.5%;
}

#soldier {
	position: absolute;
	width: 250px;
	left: 75%;
	height: 345px;
}

h1, h2, h3 {
	font-family: Neuropolitical Rg;
}

body a {
	color:rgb(255,102,0);
	text-decoration:none;
}

body a:hover {
	color: rgb(255,255,255);
	text-decoration: none;
}

.main {
	margin: 0 auto; width: 740px; color:#AAA;
}

.main a {
	color:#C3D4DE;
}

.row_0 {
	background-color: rgb(50,74,82);
}
.row_1 {
	background-color: rgb(44,44,44);
}

input[type="text"]  {
	width: 80%;
	color: #ffffff;
	border: 1px solid rgb(255,102,0);
	background-color: rgba(0,0,0,0.5);
	padding: 3px;
}

textarea  {
	color: #ffffff;
	border: 1px solid rgb(255,102,0);
	background-color: rgba(0,0,0,0.5);
	padding: 3px;
}

input[type="password"]  {
	color: #ffffff;
	border: 1px solid rgb(255,102,0);
	background-color: rgba(0,0,0,0.5);
	padding: 3px;
}

input[type="image"]  {
	width: 100%;
	height: auto;
}

.drop {
		border: 0 !important;  /*Removes border*/
		-webkit-appearance: none;  /*Removes default chrome and safari style*/
		-moz-appearance: none; /* Removes Default Firefox style*/
		background: rgba(0,153,255, 0.7);
		text-indent: 0.01px; /* Removes default arrow from firefox*/
		text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
		color: #FFF;
		border-radius: 5px;
		padding: 5px;
		box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
	}
.drop .balck {
		background-color: #000;
	}

.drop .option3 {
		border-radius: 10px 0;
	}
#card_menu {
	float:left;
}

#message_menu {
	width: 20%;
	float:left;

}

#message_show{
	margin-left: 20%;

}

#output {
	margin-left: 25%;
	margin-right: 25%;
	padding: 10px;
	border: 1px solid grey;
	font-weight: bold;
	color: rgb(255,102,0);
  	margin:auto;
  	text-align:center;
}

#Countdown {
	font-size: 12px;
}

div#bild_name {
	position: relative;
	width: auto;
	height: auto;
	float:left;
	text-align:left;
	margin: 1%;
}


#card_img {
	position: absolute;
	top: 1%;
	left: 1%;
	width: auto;
	height: auto;
	float:left;
	text-align:left;
}
.card_text {
	position: relative;
	width: auto;
	height: auto;
	float:left;
	text-align:center;
	margin: 1%;
	font-weight:bold;
}
.card_name p {
position: absolute;
top: 1%;
left: 5%;
width: 240px;
color:rgb(255,255,255);
filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
}
.card_type p{
position: absolute;
top: 53%;
left: 60px;
width: 120px;
color:rgb(0,0,0);
font-weight:bold;
background-color: rgba(153,153,153,0.5);
}

.card_specials p{
position: absolute;
top: 62%;
left: 5%;
background-color: rgba(0,0,0, 0.5);
color:rgb(255,255,255);
filter:alpha(opacity=80);
	-moz-opacity:.80;
	opacity:.80;
}

.card_atk p{
position: absolute;
width: 30%;
top: 85%;
left: 15%;
background-color: rgba(0,0,0, 0.5);
color:rgba(255,255,255,0.8);
}

.card_def p{
position: absolute;
width: 30%;
top: 85%;
left: 55%;
background-color: rgba(0,0,0, 0.5);
color:rgba(255,255,255,0.8);
}

div#bild_name span {
	display: block;
	text-decoration: none;
	text-align: left;
	font-weight:bold;
	position: absolute;
	top: 5px;
	left: 0;
	width: 275px;
	padding: 5px;
	margin: 5px;
	z-index: 100;
	color: white;
	border: 0;
	filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
}

#slots {
	margin-left: 260px;
	text-align:left;
}

div#info{
	position: relative;
	height:auto;
}

#options{
	margin-left: 260px;
	width: 240px;
}

#planet_info {
	position: relative;
	width: auto;
	height: auto;
	float:left;
	text-align:left;
	margin-left: 20%;
}

#planet_mission{
	margin-left: 40%;
	margin-top: 10%;
	width: 300px;
}

div#slot_1, div#slot_2, div#slot_3, div#slot_4, div#slot_5, div#slot_6 {
    margin: 20px;
	float: left;
}
#slot_7 {
	float: left;
	width: 100%;
}

.submit {
		outline: 0;
		padding: 1px 7px;
		display: inline;
		color: rgb(255,102,0);
		font-weight: normal;
		font: 12px Aldrich;
		text-shadow: 1px 1px #1f272b;
		border: 1px solid #1c252b;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		background: rgb(204,0,0); /* old browsers */
		background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, rgb(204,0,0) 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,rgb(204,0,0))); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
		box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
	}
	.submit:hover {
		color: #fff;
		background: #4C5A64; /* old browsers */
		background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
	}
	.submit:active {
		background-position: 0 top;
		position: relative;
		top: 1px;
		color: #fff;
		padding: 1px 7px;
		background: #20282D; /* old browsers */
		background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
		-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
		-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
		box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
	}

.column { float:left; padding:0 20px;}

.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}

.flip {
    height: 336px;
    width: 240px;
    margin: 5px auto;
	float: left;
}
.flip img {
    width: 240px;
    height: auto;
}
.flip .back {
    color: #fff;
    text-align: center;
	font-weight:bold;
}
.flipcontainer {
    width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.card div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
    background: blue;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

#box1 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 150px;
  left: 175px;
}

#box2 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 175px;
  left: 365px;
}

#box3 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 50px;
  left: 265px;
}

#box4 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 87px;
  left: 453px;
}

#box5 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 257px;
  left: 123px;
}

#box6 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 440px;
  left: 460px;
}

#box7 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 425px;
  left: 146px;
}

#box8 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 114px;
  left: 295px;
}

#box9 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 392px;
  left: 337px;
}

#box10 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 203px;
  left: 245px;
}

#box11 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 342px;
  left: 480px;
}

#box12 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 309px;
  left: 80px;
}

#box13 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 475px;
  left: 285px;
}

#box14 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 85px;
  left: 190px;
}

#box15 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 190px;
  left: 25px;
}

#box16 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 390px;
  left: 195px;
}

#box17 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 325px;
  left: 386px;
}

#box18 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 275px;
  left: 235px;
}

#box19 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 205px;
  left: 425px;
}

#box20 {
  background-color: white;
  opacity: 0.7;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 260px;
  left: 390px;
}
.imageContainer {
	position: relative;
    width:640px;
    height:500px;
	margin:0 auto;
    background-image: url(../images/planets/galaxy.jpg);
	background-size: contain;
 }

.graph {
width: 20%; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
height: 30px;
border: 1px solid #888;
margin-left: 40%;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
}
#bar {
height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
background: rgb(255,197,120);
background: -moz-linear-gradient(top, rgba(255,197,120,1) 0%, rgba(244,128,38,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(244,128,38,1)));
background: -webkit-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
background: -o-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
background: -ms-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
background: linear-gradient(top, rgba(255,197,120,1) 0%,rgba(244,128,38,1) 100%);
border-top: 1px solid #fceabb;
}
#bar p {
	position: absolute;
	text-align: center;
	width: 100%;
	margin: 0;
	line-height: 30px;
	color: black;
}
.error {
/* These styles are arbitrary */
background-color: #fceabb;
padding: 1em;
font-weight: bold;
color: red;
border: 1px solid red;
            }
.navigation {
 position: absolute;
 font-size:1em;
 width:80%;
 left: 10%;
 top: 21%;

}

.navigation ul {
 margin:0px;
 padding:0px;
}

.navigation li {
 list-style: none;
}

.navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}

.navigation a:hover{

}

.navigation li:hover {
 background: #f90;
 position: relative;
}

ul.top-level {
 background: rgba(0,0,0,0.4);
}

ul.top-level li {
 border-bottom: rgb(0,255,255) solid;
 border-top: #000 solid;
 border-width: 1px;
}

ul.sub-level {
    display: none;
}

li:hover .sub-level {
    background: #999;
    border: #000 solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}

ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}

* {margin: 0; padding: 0;}

#accordian {

	text-align: left;
	background: rgba(0,0,0,0.5);
	width: 100%;
	color: white;
	/*Some cool shadow and glow effect*/
	box-shadow:
		0 0 10px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
/*heading styles*/

#accordian h3 {
	font-family: Aldrich;
	font-size: 12px;
	line-height: 25px;
	padding: 0 10px;
	cursor: pointer;
	/*fallback for browsers not supporting gradients*/
	background: #003040;
	background: linear-gradient(rgba(0,0,0,0.6),rgba(51,51,51,0.8));
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 5px 3px rgba(102,102,102,0.4);
	-moz-box-shadow: 0px 0px 5px 3px rgba(102,102,102,0.4);
	box-shadow: 0px 0px 5px 3px rgba(102,102,102,0.4);
}

#accordian a {
	color: white;
}

/*heading hover effect*/
#accordian h3:hover {
	text-shadow: 0px 0px 1px rgba(0,204,255,1);
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,153,255,0.4);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,153,255,0.4);
	box-shadow: 0px 0px 5px 5px rgba(0,153,255,0.4);
}
/*iconfont styles*/
#accordian h3 span {
	font-size: 16px;
	/*margin-right: 10px;*/
}

/*list items*/
#accordian li {
	list-style-type: none;
}

/*links*/
#accordian ul ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 25px;
	display: block;
	padding: 0 15px;
	transition: all 0.15s;
}

/*hover effect on links*/
#accordian ul ul li a:hover {
	background: rgba(51,51,51,0.8);
	border-left: 5px solid rgba(0,204,255,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/*Lets hide the non active LIs by default*/
#accordian ul ul {
	display: none;
}

#accordian li.active ul {
	display: block;
}

.progress_header {
    overflow: hidden;
    height: 7px;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    background-color: #f5f5f5;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
    float: left;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    text-align: center;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
.pull-right {
    right: 0;
    left: auto;
}
.pull-left{float:left}
.pull-right{float:right}
.media-name{margin:10px 20px 10px 0;}

[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: relative; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 10px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 11px;
    margin-left: 50px;
}

/*links*/
.sidenav ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 25px;
	display: block;
	padding: 0 15px;
	transition: all 0.15s;
}

/*hover effect on links*/
.sidenav ul li a:hover {
	background: rgba(51,51,51,0.8);
	border-left: 5px solid rgba(0,204,255,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.sidenav h3 {
	color: rgb(255,255,255);
}

.modal-dialog {width:600px;}

.thumbnail {margin-bottom:6px;}

/* Style the tab */
.tab {
 overflow: hidden;
 border: none;
 background-color: rgba(234,85,7,0.7);
}

/* Style the buttons that are used to open the tab content */
.tab button {
 background-color: inherit;
 float: left;
 border: none;
 outline: none;
 cursor: pointer;
 padding: 14px 16px;
 transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
 background-color: #008da4;
}

/* Create an active/current tablink class */
.tab button.active {
 background-color: #008da4;
}

/* Style the tab content */
.tabcontent {
 display: none;
 padding: 6px 12px;
 border: none;
 border-top: none;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

@media (max-width : 1200px)
{
  body
  {
    font-size: small;

  }
  #frame{
  width: 1150px;
  }
  #mech{
    position: absolute;
    width: 220px;
    top: 40%;
    height: 305px;
  }

  #soldier {
    position: absolute;
    top: 62%;
    width: 166.5px;
    left: 77%;
    height: 230px;

  }
}

@media (max-width : 992px)
{
  body
  {
	  font-size: smaller;
  }
  .middleframe{
    height: auto;
  }
  #frame{
	width: 920px;
  }
  #mech{
  	position: absolute;
  	width: 220px;
  	top: 40%;
  	height: 305px;
  }

  #soldier {
  	position: absolute;
  	top: 62%;
  	width: 166.5px;
  	left: 77%;
  	height: 230px;
  }
}

@media (max-width: 768px)
{
  body
  {

  }
  .middleframe{
    height: auto;
  }
  .header{
    height: auto;
  }
  #mech {
  	position: absolute;
  	width: 110px;
  	top: 10%;
  	height: 152px;
  }

  #soldier {
    	position: absolute;
    	top: 62%;
    	width: 84px;
    	left: 77%;
    	height: 115px;
  }
}