*{
    -webkit-tap-highlight-color: transparent;
	box-sizing:border-box;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

body
{
	background-color:#ccc;
    overflow:hidden;
    -webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	touch-action: manipulation;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	position: relative;
}

h2,h3
{
	margin: 0px;
	font-family: 'Caveat Brush', cursive;
	clear:both;
}

.hidden
{
	display:none;
}

.shop_details_text
{
	position:absolute;
	bottom:10px;
	left:10px;
	right:10px;
	text-align:center;
	font-family: 'Caveat Brush', cursive;
	clear:both;
	font-size:24px;
}

button:focus
{
	outline: none;
}

.main_window
{
	margin:auto;
	width:1000px;
	height:100vh;
	max-width:100%;
	max-height:1000px;
	/*border:2px solid #555;
	border-radius:5px;*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
	background-color:#888;
	position:relative;
	left:0px;
	overflow:hidden;
	-ms-transform-origin: top center; /* IE 9 */
    -webkit-transform-origin: top center; /* Chrome, Safari, Opera */
    transform-origin: top center;
}

@media only screen and (max-width:1024px) {
  body {
    background-color: #000;
    padding:0px;
	margin:0px;
  }
  .main_window
  {
  	position: absolute;
  	margin:0px;
  	border-radius:0px;
  	border:none;
  	box-shadow: none;
  	max-height:none;
  }
}

.page_container
{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	display:none;
}


.page_container.active
{
	display:block;
		overflow-x:hidden;
	overflow-y: auto;
}

.scrollable
{
	overflow-x:hidden;
	overflow-y: auto;
}

.home_devider
{
	
	width:96%;
	position:relative;
	margin-left:2%;
	border-bottom:2px solid #000;
	clear:both;
	font-family: 'Caveat Brush', cursive;
	font-size:24px;
	clear:both;
}






.page_section
{
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
}

.page_section1
{
	background-image: url('../img/1.png');
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
   

}
.page_section2
{
	background-image: url('../img/old-953394_6401.jpg');
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
}
.page_section3
{

	border:2px solid #000;
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
	background:  rgba(50,100,200,0.5);       
}
.page_section4
{
	border:2px solid #000;
	background-image: url('../img/2.png');	  
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
}
.page_section5
{
	background-image: url('../img/3.png');	
	border:2px solid #000;
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
	
}
.page_section6
{
	background-image: url('../img/4.png');	
	border:2px solid #000;
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
	
}

.page_section7
{
	background-image: url('../img/5.png');	
	border:2px solid #000;
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
	
}
.page_section8
{
	background-image: url('../img/7.png');	
	border:2px solid #000;
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	box-sizing:border-box;
	
}

.paper_bg
{
	background-image: url('../img/old-953394_6401.jpg');
	background-position: center center;
	background-size: cover;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0.1;
	z-index:0;
}

button
{
	float:left;
	margin-right:10px;
	margin:bottom:10px;
	width:180px;
	height:55px;
	cursor:pointer;
	border-radius:5px;
	font-family: 'Caveat Brush', cursive;
	font-size:24px;
	border:2px solid rgba(0,0,0,0.6);
	background-color:rgba(100,150,100,0.5);
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
	font-size:30px;
	color:#fff;
	box-shadow:inset 0px 33px 0px -10px rgba(255,255,255,0.2), inset 0px -10px 15px -10px rgba(0,0,0,0.5);
}
button1
{
	float:left;
	margin-right:10px;
	margin:bottom:10px;
	width:250px;
	height:55px;
	cursor:pointer;
	border-radius:5px;
	font-family: 'Caveat Brush', cursive;
	font-size:24px;
	border:2px solid rgba(0,0,0,0.6);
	background-color:rgba(100,150,100,0.5);
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
	font-size:20px;
	color:#fff;
	box-shadow:inset 0px 33px 0px -10px rgba(255,255,255,0.2), inset 0px -10px 15px -10px rgba(0,0,0,0.5);
}





/*button:hover
{
	box-shadow:inset 5px 10px 10px rgba(0,0,0,0.2);
	color:#aaa;
}*/

.menu_button
{
	float: none;
	outline: none;
	display:inline-block;
	margin-right:10px;
	margin-bottom:0px;
	width:180px;
	max-width:45%;
	height:105px;
	cursor:pointer;
	border-radius:5px;
	font-family: 'Caveat Brush', cursive;
	font-size:24px;
	border:2px solid rgba(0,0,0,0.6);
	background-color:rgba(100,150,100,0.5);
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
	font-size:30px;
	color:#fff;
	box-shadow:inset 0px 60px 0px -10px rgba(255,255,255,0.2), inset 0px -10px 15px -10px rgba(0,0,0,0.5);
}

.menu_button span,
.shop_buy_button span
{
	display:block;
	font-size:20px;
	margin-top:-5px;
	opacity:0.8;
}

.menu_button.slim
{
	height:55px;
	box-shadow:inset 0px 33px 0px -10px rgba(255,255,255,0.2), inset 0px -10px 15px -10px rgba(0,0,0,0.5);
}

@media only screen and (max-width:800px) {
	.menu_button
	{
		margin-left:1%;
		margin-right:1%;
	}
}


button.danger
{
	background-color:rgba(150,100,100,0.5);
}

button.cool
{
	background-color:rgba(100,100,150,0.5);
}

button.gold
{
	background-color:rgba(150,150,100,0.5);
}

/*.menu_button:hover
{
	box-shadow:inset 5px 10px 10px rgba(0,0,0,0.2);
	color:#aaa;
}*/

.breaker
{
	clear:both;
}

.detail_overlay
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background-color:rgba(0,0,0,0.8);
	display:none;
	z-index:10000000000;
}

.zoom
{
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	transform-origin:center center;
	transform:scale(1.2);
	z-index:100;
}

.unzoom
{
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	transform-origin:center center;
	transform:scale(0.8);
	z-index:100;
}

@keyframes shake {
    0%   {
    	margin-left:0px;
    	margin-right:0px;
    }
    20%   {
    	margin-left:-8px;
    	margin-right:-8px;
    }
    40%   {
    	margin-left:7px;
    	margin-right:7px;
    }
    60%   {
    	margin-left:-6px;
    	margin-right:-6px;
    }
    80%   {
    	margin-left:5px;
    	margin-right:5px;
    }
    100%   {
    	margin-left:0px;
    	margin-right:0px;
    }
}

.shake
{
	margin:0px;
	animation-name: shake;
    animation-duration: 0.5s;
    -ms-transform-origin: center center; /* IE 9 */
    -webkit-transform-origin: center center; /* Chrome, Safari, Opera */
    transform-origin: center center;
    z-index:100;
}

.no_margin_top
{
	margin-top:0px;
}

#content_options
{
	font-family: 'Caveat Brush', cursive;
	font-size:24px;
	color:#fff;
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
}



.options_container
{
	position: absolute;
	top:75px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow:auto;
}

#content_options button
{
	display:inline-block;
	float:none;
	color:#fff;
}

#content_loading
{
	top:200px;
	font-family: 'Caveat Brush', cursive;
	font-size:24px;
	color:#fff;
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
}

.战绩界面
{
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
}
.科技等级列表单界面
{
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
}


.科技进度
{
	position:absolute;
	bottom:0px;
	left:0px;
	height:20px;
	width:50%;
	background-color:rgba(0,201,255,0.6);
	box-shadow:inset 0px 15px 0px -5px rgba(255,255,255,0.2), inset -25px 0px 20px -20px rgba(255,255,255,0.5), inset 0px -10px 5px -10px rgba(0,0,0,0.8),10px 0px 10px 0px rgba(0,0,0,0.5);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
}

.巨构进度
{
	position:absolute;
	bottom:0px;
	left:0px;
	height:20px;
	width:50%;
	background-color:rgba(255,226,0,0.5);
	box-shadow:inset 0px 15px 0px -5px rgba(255,255,255,0.2), inset -25px 0px 20px -20px rgba(255,255,255,0.5), inset 0px -10px 5px -10px rgba(0,0,0,0.8),10px 0px 10px 0px rgba(0,0,0,0.5);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
	
}


.巨构进度建造
{
	position: absolute;
	right:3px;
	top:0px;
	font-family: arial;
	font-weight: bold;
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
	font-size:14px;
	color:#fff;
	z-index:1;
	color:rgba(255,226,0,1);
}

.科学进度建造
{
	position: absolute;
	right:3px;
	top:0px;
	font-family: arial;
	font-weight: bold;
	text-shadow:1px 1px 0px rgba(0,0,0,1),1px -1px 0px rgba(0,0,0,1),-1px 1px 0px rgba(0,0,0,1),-1px -1px 0px rgba(0,0,0,1),1px 1px 3px rgba(0,0,0,1);
	font-size:14px;
	color:#fff;
	z-index:1;
	color:rgba(0,201,255,0.6);
}



#星区1
{
	color: #ffffff;
	text-shadow: 0px 0px 10px #ffffff;
}
#星区2
{
	color: rgba(255,247,0,1);
	text-shadow: 0px 0px 10px rgba(255,247,0,1);
}
#星系首都仓库2
{
	color: rgba(20,11,11,1);
	text-shadow: 0px 0px 10px rgba(20,11,11,1);
}

#首都资源项目1_2
{
	background-color:rgba(255,191,0,0.8)
}

#首都资源项目2_2
{
	background-color:rgba(0,104,255,1)
}
#首都资源项目3_2
{
	background-color:rgba(20,11,11,0.8)
}
#首都资源项目4_2
{
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, #607ded, #00c4ff, #ff2100);
  background-image: -moz-linear-gradient(left, #607ded, #00c4ff, #ff2100);
  background-image: -o-linear-gradient(left, #607ded, #00c4ff, #ff2100);
}


#星系舰队1_2
{
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, #FF3030,#FF1493,	#FF00FF,#FF0000);
  background-image: -moz-linear-gradient(left, #FF3030,#FF1493,	#FF00FF,#FF0000);
  background-image: -o-linear-gradient(left, #FF3030,#FF1493,	#FF00FF,#FF0000);
}
#星区1_5   
{
	background-color:	rgba(239,13,11,0.8)
}
#星区1_1   
{
	background-color:	rgba(38,255,0,0.5)
}

#巨构项目1_1 
{
	background-color:	rgba(239,13,11,0.8)
}
#星区管理1 
{
	    color: rgba(255,255,255,1);
	    text-shadow: 0px 0px 10px rgba(255,255,255,1);	
}


#行星
{
    margin: 2px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;	  
    background-size: auto 106px;
    background-position: center;
    transform-origin: center;	
}
	
	
.星区管理2
{
	 background-image: url(../img/7.png); 
        font-size:90%;
		width:15%;
		word-spacing:0px;	
		
}	
#剧毒等级
{
	    color: rgba(48,255,0,1);
	    text-shadow: 0px 0px 10px rgba(48,255,0,1);		
}	
#熔岩等级
{
	    color: rgba(255,79,0,1);
	    text-shadow: 0px 0px 10px rgba(255,79,0,1);	
}		
#寒冰等级
{
	    color: rgba(0,181,255,1);	
	    text-shadow: 0px 0px 10px rgba(0,181,255,1);	
}		
	
.星区管理3
{
	background-image: url(../img/xq/43.png); 	
	color: rgba(8,8,8,1);
	text-shadow: 0px 0px 10px rgba(8,8,8,1);
    font-size:100%;
    margin: 2px;
    width: 100px;
    height: 100px;
    border-radius: 50px;  
    background-size: auto 106px;
    background-position: center;
	
}		
#星核等级1
{
   color: rgba(255,255,255,1);
   text-shadow: 0px 0px 10px rgba(255,255,255,1);		
   border: 2px solid rgba(79,255,0,0.5)
}			
#星核等级2
{
   background-image: url(../img/xq/1.png); 
   background-color:red 
}
#星核等级3
{
   background-image: url(../img/xq/2.png); 	
}	
#星核等级4
{
   background-image: url(../img/xq/3.png); 			
}	
#星核等级5
{
   background-image: url(../img/xq/4.png); 	
}	
#星核等级6
{
   background-image: url(../img/xq/5.png); 	
}	
#星核等级7
{
   background-image: url(../img/xq/6.png); 			
}	
#星核等级8
{
   background-image: url(../img/xq/7.png); 	
}	
#星核等级9
{
   color: rgba(255,255,255,1);
   text-shadow: 0px 0px 10px rgba(255,255,255,1);		
   background-image: url(../img/xq/8.png);	
}	

		
	
	
#星球
{
	 background-image: url(../img/7.png); 
        height: 100px;	 
        font-size:70%;
		width:15%;
		word-spacing:0px;
	    color: rgba(255,255,255,1);
	    text-shadow: 0px 0px 10px rgba(255,255,255,1);	
		float:right;
		position:absolute;
		right:0;
		bottom:0;				
}


#星球消息
{
	 background-image: url(../img/7.png); 
        height: 100px;			
        font-size:90%;
		width:70%;
	    color: rgba(255,255,255,1);
	    text-shadow: 0px 0px 10px rgba(255,255,255,1);	
		float:left;
		position:absolute;	
		bottom:0;	
        left:110px;	
	    text-align: left;			
}


	
#群星
{
	background-image: url('../img/7.png');	
	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	text-align:center;
	box-sizing:border-box;
    display: inline-block;
}

#群星2
{
	background-image: url('../img/7.png');	

	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;

}



#星区管理按钮 
{
    display:inline-block;
	
}

.群星3
{
	background-image: url('../img/7.png');	

	float:left;
	width:96%;
	margin-left:2%;
	position:relative;
	margin-top:10px;
	text-align:center;
	   
}