body{
	font-family:'Arial Narrow','ArialNarrow','Trebuchet MS', Helvetica, sans-serif;
}
*{
  padding:0px;
  margin:0px;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#container {
		        /*display:none;*/
                position:absolute;
                width:960px;
                height:170px;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
          }
          

#sidebar {
		  float: left;
		  width:120px; 
		  font-size: 30px;
		  }
		  
		  
#Less {display:none;
		width: 90%;
		font-size: 170px;
		line-height:170px;
		height: 30%-35px;
		padding-left: 10%;
}
	  
#ess {
		float: left;
		width:240px; 
		font-size: 190px;
		line-height:190px;
	}
	
#is {
		float: left;
		width:200px; 
		font-size: 190px;
		line-height:190px;
		text-align: center;
	}
#lessismore {
		display:none;
		float:none;
		font-size: 100px;
		line-height:100px;
		text-align: center;    
		width: 100%;
		margin-top: 35px;
}

#more {
		float: left;
		width:360px; 
		font-size: 190px;
		line-height:190px;
	}
#EmptyForNav {
		float: left;
		height: 35px;
		width: 100%;
		display:none;
	}	
		

a { text-decoration: none; color:black;} 

/************************************************************************************
the nav bar for small page
*************************************************************************************/


#nav{
  display: none;
  width:100%;
  position:fixed;/*固定作用*/
  z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
  top: 0px;
}

.menu{
  width:25%;
  height:35px;
  font-size: 25px;
  text-align:center;
  background-color:white;
  color:#999999;
  overflow-y:hidden;
  display:inline;
  list-style:none;
  float:left;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 960px or less */
@media screen and (max-width: 960px) {
	#sidebar {
		display: none;
	}

	#ess {
		display: none;
	}
	#Less {
		display: block;
	}
	#is {
		width: auto;
		float: none;
		font-size: 170px;
		height:30%-35px;
		}
	#more {
		width: 90%;
		float: none;
		text-align: right;
		font-size:170px;
		height:30%-35px;
		padding-right:10%;
		}
	#nav{
		display: inline;
	}
 	#container {
	padding:0px 0px 35px 0px;
	width:100%; 
    height:550px;
	}
	#EmptyForNav{display: inline;}
}


@media screen and (max-width: 960px) and  (max-height: 560px) {
	#Less {
		font-size: 130px;
		line-height:130px;
	}
	#is {
		font-size: 130px;
		line-height:130px;
		}
	#more {	
		font-size: 130px;
		line-height:130px;
		}
	 
	#container {
    padding:0px 0px 30px 0px;
    height:400px;
	}

}



@media screen and (max-width: 960px) and  (max-height: 380px) {
	#Less {
		font-size: 100px;
		line-height:100px;
	}
	#is {
		font-size: 100px;
		line-height:100px;
		}
	#more {	
		font-size: 100px;
		line-height:100px;
		}

	#container {
    padding:0px 0px 35px 0px;
    height:310px;
	}
	
}


@media screen and (max-width: 960px) and  (max-height: 320px) {
	#Less {display: none;
		}
	#is {
		display: none;
		}
	#more {	
		display: none;
		}
	#lessismore { display: block;}
 
 
 	#container {
    height:100px;
	}
	
	#EmptyForNav{display: none;
	}

}