body{
	text-align: center;
	background: #f3f3f3;
	overflow: hidden;
}
/*头部 navbar*/
header
{
	position:fixed;
	z-index: 100;
	top:0;
	left:0;
	height:50px;
	width:100%;
	background:#fff;
	border-bottom: 1px solid #ddd;
}
	#main_wrapper.show_left {
	-webkit-transform: translateX(200px);.
	   -moz-transform: translateX(200px);
		 -o-transform: translateX(200px);
			transform: translateX(200px);
	}
	#main_wrapper.show_right {
	-webkit-transform: translateX(-200px);
	   -moz-transform: translateX(-200px);
		 -o-transform: translateX(-200px);
			transform: translateX(-200px);
	}

	header .roundNav{
		position:absolute; 
		z-index:3; 
		top:4px; 
		left:15px;
		width:40px;
		height:40px; 				
		-webkit-transition: all ease .5s; 
		   -moz-transition: all ease .5s; 
			 -o-transition: all ease .5s;
				transition: all ease .5s; 
		cursor: pointer;
	}
		header .roundNav .navIcon{
			position: absolute; 
			top:19px;
			left:10px;
			height:2px; 
			width:18px;	
			background: #999; 			
		}
		header .roundNav .navIcon:before,
		header .roundNav .navIcon:after{		
			position:absolute;
			top:0;
			right:0;
			width:100%;
			height:100%; 
			background: #999;	
			content:""; 
			-webkit-transition: all ease .5s; 
			   -moz-transition: all ease .5s; 
				 -o-transition: all ease .5s;
					transition: all ease .5s; 	
			-webkit-transform: translateY(5px); 
			   -moz-transform: translateY(5px); 
				 -o-transform: translateY(5px); 
					transform: translateY(5px); 		 
			}
		header .roundNav .navIcon:before{
			 
			-webkit-transform:translateY(-5px); 
			   -moz-transform:translateY(-5px);
				 -o-transform:translateY(-5px); 
					transform:translateY(-5px);
			}
	
		header .open.roundNav .navIcon{		
			background:#fff; 
		}
		header .open.roundNav .navIcon:before {
			-webkit-transform:rotate(-45deg) translateY(0px); 
			   -moz-transform:rotate(-45deg) translateY(0px);
				 -o-transform:rotate(-45deg) translateY(0px);
					transform:rotate(-45deg) translateY(0px); 
			background: #DE5879;

		}
		.open.roundNav .navIcon:after{
			-webkit-transform:rotate(45deg) translateY(0px); 
			   -moz-transform:rotate(45deg) translateY(0px);
				 -o-transform:rotate(45deg) translateY(0px);
					transform:rotate(45deg) translateY(0px); 
			background: #DE5879;
		}
	
	header #logo
	{
		position: absolute;
		left:50%;
		top:8px;
		width:103px;
		
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		   	 -o-transform: translateX(-50%);
		   	 	transform: translateX(-50%);
	}
	header .user_panel{
		position:absolute;
		top:4px;
		right:15px;
		width:40px;
		height:40px;
		line-height: 40px;	
	}
	header #user_btn{
		cursor:pointer;
	}
	header #user_btn:active{
		background: rgba(255,255,255,0.1);
	}
	header #user_btn.open .iconfont{
		color:#DE5879;
	}
	header .iconfont
	{
		font-size: 23px;
		color:#999;
	}

/*主内容区域*/
#main,
#details,
#web_viewer,
#tags_wrapper,
#detail_wrapper,
#main_wrapper,
#all_tags_wrapper,
#single_tag_wrapper,
#login_wrapper,
#welcome_wrapper,
#tag_list{
	position: absolute;
	z-index:10;
	top:0px;
	width:100%;
	height:100%;
	background: #f3f3f3;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	  	 -o-transition: all 0.5s ease;
			transition: all 0.5s ease;
}
#main_wrapper{
	z-index: 100;
	box-shadow: 0px  8px 15px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 8px 15px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px  8px 15px rgba(0,0,0,0.2);
	-o-box-shadow: 0px  8px 15px rgba(0,0,0,0.2);
}
#detail_wrapper{
	z-index:130;
}
#all_tags_wrapper {
	z-index: 110;
	display: none;
}
#single_tag_wrapper{
	z-index: 120;
	display: none;
}
#main{
	z-index:80;
}
	#overlay{
		position: fixed;
		top:0;
		right:0;
		z-index:90;
		display:none;
		width:100%;
		height:100%;
		background: rgba(0,0,0,0);
		-webkit-transition: all 0.5s ease;
		   -moz-transition: all 0.5s ease;
		  	 -o-transition: all 0.5s ease;
				transition: all 0.5s ease;
	}

	.list_panel{
		margin-top:50px;
	}
	#overlay.shown{
		display: block;
	}

#main_wrapper.showDetail{
	-webkit-transform: translateX(-100%);
	   -moz-transform: translateX(-100%);
		 -o-transform: translateX(-100%);
			transform: translateX(-100%);
}
#main_wrapper.hidden{
	display: none;
}

/*内容列表*/	
.content_list {
	
}
	.list_panel li{
		clear:both;
		text-align: center;
		max-height: 250px;
		overflow: hidden;
		position: relative;
	}
	.list_panel li:active{
		background: #e6e6e6;
		box-shadow: 0px 3px 10px rgba(0,0,0,0.3) inset;
		-moz-box-shadow: 0px 3px 10px rgba(0,0,0,0.3) inset;
		-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.2) inset;
		-o-box-shadow: 0px 3px 10px rgba(0,0,0,0.3) inset;
	}
	.list_panel .imgBox{
		height:auto;
  		overflow: hidden;
	}
		.list_panel .imgBox img{
			width:100%;
			height:auto;
		}
	.list_panel h3{
		font-size:18px;
		position: absolute;
		bottom: 20px;
		text-align: center;
	    left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-0-transform: translateX(-50%);
		background: rgba(0,0,0,0.7);
		color: #fff;
	}
	.listMeta{
		font-size: 14px;
		color:#ccc;
		display:none;
	}
	.listMeta span{
		padding:0px 5px;
	}

/*详情页*/
#detail_wrapper{
	display: none;
	-webkit-transform: translateX(100%);
	   -moz-transform: translateX(100%);
		 -o-transform: translateX(100%);
			transform: translateX(100%);
}
#detail_wrapper.showDetail{
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
		 -o-transform: translateX(0);
			transform: translateX(0);
}
#detail_wrapper.shown{
	display: block;
}

#details .listMeta{margin:15px 0px;}
#tags{
	margin:10px 3%;
}
	#tags a{
		display: inline-block;
		margin:5px 5px;
		padding:3px 12px;
		background: #dfdfdf;
		color:#666;
		border-radius: 15px;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
	}

#details img,
#details iframe{
	display: block;
	max-width: 100%;
	height:auto;
	margin:0 auto; 
	margin-bottom:15px;
}
	#details .aCover img{
		width: 100%;
		max-width: 100%;
		margin:15px auto;
		margin-top:-20px;
	}
	#details .aCover{
		position: relative;
	}
	#detail_co{
		margin-top: 56px;
	}
	#details .aCover:after {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  background: rgba(0,0,0,0.7);
	  /* z-index: 1000; */
	  content: '';
	  left: 0;
	  top: 0;
	}
	#details .aCover h4{
		position: absolute;
		z-index: 100;
	  top: 40%;
	  width: 80%;
	  left: 10%;
	  text-align: center;
	  font-size: 26px;
	  line-height: 1.4em;
	  color: #fff;
	  font-weight: normal;
	}
	#details .aCover h4 #author{
		font-size: 14px;
		color:#ccc;
	}
#post_content{
	
}
	#post_content.shareArticle{
		text-align: left;
		padding:10px 10px 100px 10px;
		font-size: 16px;
		line-height: 1.8em;
		color:#444;
	}
	#post_content.shareArticle p{
		margin-bottom:0.8em;
	}
	#post_content.shareArticle img{
		margin:0.8em auto;
	}
	#post_content.shareArticle h2{
		font-size: 2em;
		line-height: 1.2em;
  		margin: 0.6em 0px;
	}
	#post_content.shareArticle h3{
		font-size:1.8em;
		line-height: 1.2em;
  		margin: 0.6em 0px;
	}
	#post_content.shareArticle h4{
		font-size: 1.5em;
		line-height: 1.2em;
 		margin: 0.6em 0px;
	}


#detail_wrapper header,
#all_tags_wrapper header{
	font-size: 20px;
	color:#666;
	z-index: 150;
}
	 .header_btn{
		position:absolute;
		top:3px;
		right:15px;
		width:40px;
		height:40px;
		line-height: 40px;	
		
	}
	 .header_btn .iconfont{
		font-size:20px;
	}
	.header_btn:active{
		background: rgba(255,255,255,0.1);
	}

	header #detail_title,
	header #tags_title{
		padding:0px 90px;
		height:56px;
		overflow: hidden;
		text-align: center;
		font-size: 18px;
		line-height: 56px;;
	}

/**/
#detail_toolbar{
	position:fixed;
	z-index: 100;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	overflow: hidden;
	background:#f6f6f6;
	border-top:1px solid #dfdfdf;
	line-height: 50px;
	
	-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		  -o-transition: all 0.5s ease;
			 transition: all 0.5s ease;
	-webkit-transform: translateY(56px);
	   -moz-transform: translateY(56px);
		 -o-transform: translateY(56px);
			transform: translateY(56px);
}
	#detail_toolbar.showDetail{
		-webkit-transform: translateY(0px);
	   	   -moz-transform: translateY(0px);
		 	 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	#detail_toolbar a{
		display: block;
		float:left;
		width:33%;
		height:50px;
		border-right:1px solid #dfdfdf;
		text-align: center;
		font-size:16px;
		color:#999;
		text-decoration: none;
	}
	#detail_toolbar a.hidden{
		display: none;
	}
	#detail_toolbar a:active{
		background: #ccc;
	}
	#detail_toolbar a.harfWidth{
		width:49.5%;
	}
	#detail_toolbar a#comment_btn{
		border:0;
	}
	#detail_toolbar .iconfont{
		color:#aaa;
		padding-right:8px;
		font-size: 20px;
	}
	#detail_toolbar a.current .iconfont{
		color:#DE5879;
	}

/*隐藏的边栏*/
.sider_content{
	position: fixed;
	z-index: 60;
	top:0;
	display: none;
	width:200px;
	height:100%;
	background:#dfdfdf;	
}
	.sider_content.shown{
		display: block;
	}

#right_side {
	right:0;
	padding-top:10%;
}
	
	#login input{
		height: 40px;
	 	width: 70%;
		line-height: 40px;
		border: 1px solid #d0d0d0;
		font-size: 14px;
		padding: 0px 5%;
		color: #666;
		margin: 10px 10%;
		background: #fff;
	}
	#login label{
		float: left;
		margin-left: 10%;
		color: #999;
		line-height: 1em;
		font-size: 14px;
	}
	#login #login_btn{
		text-align: center;
		background:#999;
		color:#fff;
		border:0;
		width:80%;
	}
	#login #error{
		width: 70%;
		margin: 20px 10%;
		background: rgba(255,0,0,0.2);
		padding: 10px 5%;
		color: #333;
		border: 1px solid rgba(255,0,0,0.3);
	}

	#user_nav.hidden,
	#login #error.hidden,
	#login.hidden{
		display: none;
	}
	#user_nav a{
		display: block;
		height:50px;
		padding:0px 15px 0px 25px;
		line-height: 50px;
		font-size: 18px;
		color:#666;
		text-align: left;
		text-decoration: none;
		border-bottom:1px solid #d0d0d0;
		transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-webkit-transition:all 0.5s ease;
	}
	#user_nav a.current{
		border-left:8px solid #DE5879;
		background:#fff;
		border-bottom: 0px;
	}
	#user_nav a:hover{
		background: #d0d0d0;
	}
	#user_nav .iconfont{
		font-size: 24px;
		padding-right:10px;
		font-weight: 100;
		color: #999;
	}
	#user_nav a.current .iconfont{
		color:#DE5879;
	}

	#user_nav img{
		width:70px;
		height:70px;
		border-radius: 10px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;
		margin-bottom:10px;
	}

	#user_nav h4{
		font-size: 20px;
		color:#666;
		margin-bottom: 20px;
	}


/*左边栏*/

#left_side{}
	#left_side .main_menu a{
		display: block;
		height:50px;
		padding:0px 15px 0px 25px;
		line-height: 50px;
		font-size: 18px;
		color:#666;
		text-align: left;
		text-decoration: none;
		border-bottom:1px solid #d0d0d0;
		transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-webkit-transition:all 0.5s ease;
	}
		#left_side .main_menu a.current{
			border-left:8px solid #DE5879;
			background:#fff;
			border-bottom: 0px;
		}
		#left_side .main_menu a:hover{
			background: #d0d0d0;
		}
		#left_side .main_menu .iconfont{
			font-size: 24px;
			padding-right:10px;
			font-weight: 100;
			color: #999;
		}
		#left_side .main_menu a.current .iconfont{
			color:#DE5879;
		}
	#left_side #main_icon{
		width:100%;
		height:50px;
		font-size:20px;
		margin-bottom:20px;
		background:#fff;
	}
		#left_side #main_icon a{
			display: block;
			float:left;
			width:49.5%;
			height:50px;
			overflow: hidden;
			text-align: center;
			font-size: 14px;
			color:#666;
			line-height: 50px;
			text-decoration: none;
			-webkit-tap-highlight-color:transparent;
		}
		#left_side #main_icon a:active{
			background: #efefef;
		}
		#left_side #main_icon a#search_btn{
			border:0;
		}
		#left_side #main_icon .iconfont{
			font-size: 22px;
			padding-right: 10px;
			color:#999;
		}

/*外部网页浏览其 webview*/
#web_viewer{
	z-index: 200;
	overflow: hidden;
	display:none;
	-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		  -o-transition: all 0.5s ease;
			 transition: all 0.5s ease;
	-webkit-transform: translateY(100%);
	   -moz-transform: translateY(100%);
		 -o-transform: translateY(100%);
			transform: translateY(100%);

}
	#web_viewer.shown{
	-webkit-transform: translateY(0);
	   -moz-transform: translateY(0);
		 -o-transform: translateY(0);
			transform: translateY(0);
	}
	#web_viewer iframe{
		width:100%;
		height:100%;
		overflow-y:auto;
		-webkit-overflow-scroll:touch;
		border:0;
		margin-top: 50px;
	}
	#web_viewer #close_btn{
		position: fixed;
		z-index: 210;
		top:0;
		left:0;
		width:100%;
		height:50px;
		text-align: center;
		line-height: 50px;
		color:#999;
		background: #efefef;
	}
	#web_viewer #close_btn:active{
	background: #ccc;
	}
	#web_viewer #close_btn .iconfont{
		font-size: 40px;
	}


/*标签*/

#tags_wrapper{
	z-index: 110;	
	text-align: left;
	
}
#all_tags_wrapper header{
	z-index: 120;
}
	.tags_back_btn{
		left:15px;
	}
	#tags_title{
		font-size: 20px;
		font-weight: bold;
	}

#tags_wrapper .tags_list{
	width:100%;
	background: #fff;
	padding-bottom:10px;
}
#tags_wrapper .tags_list.first{
	margin-top: 55px;
}
	.tags_list .title{
		margin-bottom: 12px;
		font-size:18px;
		padding:10px 15px;
		background: #f3f3f3;
	}
	.tags_list .sutTitle{
		margin:9px 15px;
		line-height: 28px;
		color:#999;
		text-align: center;
	}
	.tags_list ul{
		margin:0px 15px 5px 15px;
	}
	.tags_list ul li{
		display: inline-block;
		margin:5px 5px 5px 0px;
		background:#f3f3f3;
		line-height: 36px;
		padding:3px 18px;
		font-size: 16px;
		color:#333;
		border-radius: 18px;
		-webkit-border-radius: 21px;
		-moz-border-radius: 21px;
		-o-border-radius: 21px;
	}
	.tags_list ul li:active,
	.tags_list ul li:hover{
		background:#dfdfdf;
	}
	.tags_list ul li a{
		color:#333;
		text-decoration: none;
		outline: none;
		background: none;
	}

#tag_name{
	width:60%;
	height:50px;
	z-index: 120;
	position: absolute;
	left:20%;
	top:0;
	line-height: 50px;
	font-size: 18px;
	color:#444;
	text-align: center;
	background:#fff;
}
/*加载动画*/
.loading {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  margin: 60px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

.loading.hidden{
	display: none;
}

/*登录*/
#login_wrapper{
	z-index: 200;
	background: #fff ;
	background-size: cover;
	text-align: center;
}
#login_wrapper #bigLogo{
	margin:0 auto;
	width:20%;
	max-width: 150px;
	height:auto;
	margin-top:30%;
	-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		  -o-transition: all 0.5s ease;
			 transition: all 0.5s ease;
}
#login_wrapper #bigLogo.top{
	margin-top: 15%;
}
#reg_panel{
	top:100%;
	display: none;
}
.note_info{
	height:40px;
	margin-top: 20px;
	color:#c00;
	line-height: 40px;
	font-size: 16px;
}
 .form_wrap{
 	width:80%;
 	margin-left:10%;
 	margin-top: 15%;
 	font-size:18px;
 	color:#ccc;
 }

 .form_wrap .form_item{
 	width:100%;
 	height:50px;
 	margin-top: 20px;
 	border-bottom:1px solid #ccc;
 	text-align: left;
 	line-height: 50px;
 }
 .form_wrap input{
 	float: left;
 	padding-left:15px;
	line-height: 20px;
	color: #333;
	height:50px;
	background: none;
	margin:0;
	border:0;
 }
 .form_wrap .iconfont{
 	font-size: 26px;
 	padding-left:5%;
 	color:#999;
 	float: left;
 }
 a.primary_btn{
 	display: block;
 	width:100%;
 	height:50px;
 	text-align: center;
 	line-height: 50px;
 	margin-top: 20px;
 	background:#ed5a7f;
 	color:#fff;
 	text-decoration: none;
 	border-radius: 5px;
 	-webkit-border-radius:5px;
 }
 .toggle_btn{
 	position: absolute;
 	right: 20px;
 	top:30px;
 	width:70px;
 	height:30px;
 	line-height: 30px;
 	text-align: center;
 	font-size: 14px;
 	color:#666;
 	border:1px solid #ccc;
 	border-radius: 5px;
 	-webkit-border-radius:5px;
 }
 .toggle_btn .iconfont{
 	display: block;
 	padding:0;
 	color: #fff;
 }
 /*启动界面*/
 #welcome_wrapper{
 	background: #fff;
 	z-index: 210;
 	-webkit-transition: all 0.5s ease ;
		-moz-transition: all 0.5s ease ;
		  -o-transition: all 0.5s ease ;
			 transition: all 0.5s ease ;
 }
 #welcome_wrapper span{
 	display: block;
 	margin-top: 40px;
 	text-align: center;
 	font-size: 20px;
 	color:#999;
 }
 #welcome_wrapper #welLogo{
	margin:0 auto;
	width:20%;
	max-width: 150px;
	height:auto;
	margin-top:30%;
}

#welcome_wrapper.hidden{
	opacity:0;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
 
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}