﻿body{
	font-family:'Arial Narrow','ArialNarrow','Trebuchet MS', Helvetica, sans-serif;
}
*{
  padding:0px;
  margin:0px;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#Navi-Frame{	pointer-events: none;  /* 顶层透明层不触发链接 */
		        /*display:none;*/
                position:fixed;
                width:960px;
                height:170px;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;                
          }
          
#sidebar {
		  float: left;
		  width:120px; 
		  font-size: 30px;
		  pointer-events: auto;/* 恢复触发链接 */
		  }
		  
#Content-Frame {
		        /*display:none;*/
                position:absolute;
                width:960px;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
          }    


#Content-Middle-Frame {
	width:840px; 
	height:100%; 
	display:table;
	float: right;
	padding-top: 35px;
	padding-bottom: 35px;
	}

#Blog {display:table-cell;
vertical-align:middle;
line-height:200%;
}

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

h1{	font-size: 30px;
	text-align: center;
	line-height:200%;
}
p{font-size: 20px;}
p.footer{
		font-size: 20px;
}
span.footer_left{
	text-align: right;
	float: left;
}
span.footer_right{
	text-align: left;
	float: right;
}
/************************************************************************************
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) {
	#Navi-Frame {
		display: none;
	}

	#nav{
		display: inline;
	}
	
 	#Content-Frame{
 		width:100%;
 	}
 		
	#Content-Middle-Frame {
		width:90%;
		float:left;
		margin-left: 5%;
		padding-bottom: 50px;
	}

	h1{font-size: 30px;
	text-align: center;}
	p{font-size: 20px;}
}
