/*---Fonts---*/
@font-face {
  font-family: 'futura_book';
  src: url("font/futura-book/futura-book.eot");
  src: url("font/futura-book/futura-book-.eot#iefix") format("embedded-opentype"), url("font/futura-book/futura-book.woff") format("woff"), url("font/futura-book/futura-book.ttf") format("truetype"), url("font/futura-book/futura-book.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futura_bold';
  src: url("font/futura-bold/futura-bold.eot");
  src: url("font/futura-bold/futura-bold-.eot#iefix") format("embedded-opentype"), url("font/futura-bold/futura-bold.woff") format("woff"), url("font/futura-bold/futura-bold.ttf") format("truetype"), url("font/futura-bold/futura-bold.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futura_light';
  src: url("font/futura-light/futura-light.eot");
  src: url("font/futura-light/futura-light-.eot#iefix") format("embedded-opentype"), url("font/futura-light/futura-light.woff") format("woff"), url("font/futura-light/futura-light.ttf") format("truetype"), url("font/futura-light/futura-light.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*---end fonts---*/
h1,h2,h3,h4,h5,h6{
	text-transform: uppercase;
	font-family: 'futura_book', Arial, sans-serif, Garuda, FreeSans !important;
	font-weight: normal;
	margin: 0px auto;
}
/* box class */

.transBox{
	background: rgba(200,200,200,0.5); /* transparent color */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#200064FF, endColorstr=#200064FF)"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#200064FF, endColorstr=#200064FF); /* IE5.5-7 */
}
.transBoxBlue{
	background: rgba(25, 141, 217, 0.5); /* transparent color */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80198DD9, endColorstr=#80198DD9)"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80198DD9, endColorstr=#80198DD9); /* IE5.5-7 */	
}
.gradBox{
	background: #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#333333'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#333333)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #000000,  #333333); /* for firefox 3.6+ */
	zoom:1;
}
[class^="box"]{
	border: 0px solid #999;	
	padding: 20px 5px 20px 5px;
	font-family: Arial, "Helvetica", Verdana, sans-serif;
	margin: auto;	
}
.box{
	border: 1px solid #999;	
	text-align:center;
}
.text_box{
	padding: 10px;
	border: 1px solid #999;	
	text-align: left;
}
.boxPaper{
	text-align:left;
	/*padding: 30px;
	border: 0px solid #CCC;	
	-webkit-text-shadow: 0 1px 0 #ff0000;
	-moz-text-shadow: 0 1px 0 #ff0000;
	box-shadow: 0 3px 4px #777;
	-webkit-box-shadow: 0 3px 4px #777;
	-moz-box-shadow: 0 3px 4px #777;*/
	
	border-top: 1px solid #ececec;
}
.boxR5{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;

}
.boxR10{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

}

.button1{
	background: #000;
	color: #FFE28D;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A0C3E2', endColorstr='#198DD9'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#A0C3E2), to(#198DD9)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #A0C3E2,  #198DD9); /* for firefox 3.6+ */
	zoom:1;	
}
.button1:hover{
	background: #000;
	color: #fff;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#198DD9', endColorstr='#A0C3E2'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#198DD9), to(#A0C3E2)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #198DD9,  #A0C3E2); /* for firefox 3.6+ */
	zoom:1;	
}
.button1_active{
	border: 1px solid #1320FF;
	background: #000;
	color: #FFD59E;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#198DD9', endColorstr='#A0C3E2'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#198DD9), to(#A0C3E2)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #198DD9,  #A0C3E2); /* for firefox 3.6+ */
	zoom:1;
}
/* table */
table{
	border-collapse: collapse;
	border-spacing: 0;
}
th{
	text-align: center;
	background-color: #7B4B3A;
	color: #fff;
	font-weight: bolder;
	padding: 3px;
}
td{
	vertical-align: top;
	text-align: left;
}
br.clear {
	clear: both;
}
/* form class */
form {
	text-align: left;
}
form input[type='text'],form input[type='password'],form textarea {
	color: #000;
	border: 1px solid #333;
	font-size: 14px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
form input[type='text']{
	height: 25px;
}
form input[type='text']:focus, form input[type='password']:focus, form textarea:focus {
	background: #E3F4FF;
}
form input[type="checkbox"]{

}
form p {
	color: #300DF7;
	font-weight: bolder;
}
form input[type='submit'], form button[type='submit'], div.submit, .button {
	height: 25px;
	display: block;
	text-align: center;
	border: 1px solid #7B4B3A;
	background-color: #7B4B3A;
	color: #FFF;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
form input[type='submit']:hover,form button[type='submit']:hover, div.submit:hover, .button:hover{ 
	background-color: #935A45;
}
form input[type='submit']:active,form button[type='submit']:active, div.submit:active, .button:active{
	background-color: #A9664E;
}
div.google_ads{
	
	max-width: 1000px;
	margin: 10px auto 10px auto;
}

/*=====================================================
Popup Box
========================================================*/
#uiDialog{
	background: #FEECD0;
	margin: 0;
}
#uiDialog iframe{
	border: 0;
}
#JQPopupCenter{
	border: 4px double #7B4B3A;
	text-align: center;	
	padding-top: 0;
	padding-bottom: 20px;
	margin: auto,auto,10px,auto;
	background-color:#FEECD0;
}
#JQPopupCenter table{
	margin: auto;
}
#JQpopupClose{
	background: #034389;
	cursor: pointer;
	text-align: center;
	color: #FFF;
    height: 30px;
    font-weight: bolder;
    font: Arial;
    font-size: 20px;
	filter: alpha(opacity=80);
	-moz-opacity: 0.9;
	opacity: 0.9;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
#JQcontent{
	padding: 15px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-text-shadow: 0 1px 0 #ff0000;
	-moz-text-shadow: 0 1px 0 #ff0000;
	box-shadow: 0 3px 4px #777;
	-webkit-box-shadow: 0 3px 4px #777;
	-moz-box-shadow: 0 3px 4px #777;
	background: rgba(255,255,255,0.8); /* transparent color */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#200064FF, endColorstr=#200064FF)"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#200064FF, endColorstr=#200064FF); /* IE5.5-7 */
}
#JQtable{
}
/*================================
bubble
=================================*/

#PopupBubble {
  position: absolute;
  background-color:#7B4B3A;
  color: #fff;
  margin: 0;
  padding:10px;
  text-align:center;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
#PopupBubble:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: #333 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  bottom:-19px;
  left:1em;
}
#PopupBubble_close{
	float: right; 
	margin-top: -3px;
	margin-bottom: +3px; 
	cursor: pointer;
}
#PopupBubble_close:hover{
	color: red;
}
/*=========================================================
// Slider
//=======================================================*/
#sb-site{width:100%;position:relative;z-index:1;}
.sb-slidebar{height:100%;overflow-y:auto;position:fixed;top:0;z-index:0;visibility:hidden;background-color:#222}
.sb-left{left:0}
.sb-right{right:0}
html.sb-static .sb-slidebar,.sb-slidebar.sb-static{position:absolute}
.sb-slidebar.sb-active{visibility:visible}
.sb-slidebar.sb-style-overlay{z-index:9999}
.sb-slidebar{width:30%}
.sb-width-thin{width:15%}
.sb-width-wide{width:45%}
.sb-slide,#sb-site,.sb-slidebar{
	-webkit-transition:-webkit-transform 400ms ease;
	-moz-transition:-moz-transform 400ms ease;
	-o-transition:-o-transform 400ms ease;
	transition:transform 400ms ease;
	-webkit-transition-property:-webkit-transform,left,right;
	-webkit-backface-visibility:hidden
	}
.sb-hide{display:none}
@media(min-width:1200px){
	.sb-slidebar{width:20%}
	.sb-width-thin{width:5%}
	.sb-width-wide{width:35%}
}
/*=========================================================
Image
//=======================================================*/
div.image{
	float: left;
    padding: 2px;
}
div.image img{
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	display: block;
}
/*=========================================
Likes
//========================================*/
div.comments-likes,.love-it-wrapper {
	margin-left: 5px;
	display: inline-block;
	font-weight: bold;
	color: #7B4B3A;
	cursor: pointer;
}
.comments-likes:hover, .love-it-wrapper:hover{
	color: #999;
}
.wish_list_box .wish-wrapper{
	cursor: pointer;
	margin-left: 5px;
	display: inline-block;
	font-weight: bold;
	color: #7B4B3A;
}
.wish_list_box .wish-wrapper i {
	font-size: 20px;
	
}
.wish_list_box .wish-wrapper:hover {
	color: #999;
}
/*====================================================
// Paginate
//====================================================*/
.paginate{
	border: 0px solid red;
}
.paginate table.data{
	margin: 0;
}
.paginate table.pages{
	border: 0px solid red;
	margin-top:40px;
	margin-bottom:20px;
	text-align:center;
}
.paginate table.pages td{
	margin: 0;
	padding: 0;
}
.paginate table.pages a{
	text-decoration: none;
	color: #000;
	margin: 0;
	padding: 1px;
}
.paginate table.pages a:hover{
	color: #ec12a7;
}
/*.paginate .page_first, .paginate .page_back, .paginate .page_next, .paginate .page_last, .paginate table.pages .page_numbers span{*/
.paginate table.pages span {
	display: inline-block;
	zoom: 1;
	*display: inline;
	margin: 0px;
	cursor: pointer;
	padding: 1px;
	border-left: 0px solid #CCC;
	text-align: center;

}
.paginate table.pages span:hover{
	/*background: #fff;*/
}
.paginate table.pages span.page_numbers{
	padding: 0;
	filter: none;
	background: none;
}
.paginate table.pages span.disabled{
	color: #999;
}

.page_first, .page_back, .page_next, .page_last {text-indent: -9999px; }

.paginate .page_first, .paginate .page_back, .paginate .page_next, .paginate .page_last {
	width: 30px; padding:2px;	
}

.page_first{ background: url("/images/page_first-2.png") no-repeat scroll 0 0 #000000; height:24px; width:24px; border-radius: 30px;}
.page_back { background: url("/images/first-2.png") no-repeat scroll 0 0 #000000; height:24px; width:24px; border-radius: 30px;}

.page_next { background: url("/images/next_page-2.png") no-repeat scroll 0 0 #000000; height:24px; width:24px; border-radius: 30px;}

.page_last { background: url("/images/page_last-2.png") no-repeat scroll 0 0 #000000; height:24px; width:24px; border-radius: 30px;}




.page_current{color: #ec12a7;}


.paginate table.pages .page_numbers span{
	width: 30px;
}
.paginate table.pages .page_numbers span.page_current{
	border: 0px solid #054099;
}
/*===============================================
// debug
//==============================================*/
div#debug_mode{
	margin: 20px auto 0 auto;
	background-color: #FEFEFE;
	padding: 10px;
}
div#debug_mode pre{
	font-size: 11px;
}
/*=====================================================
// User Login
//====================================================*/
div.user_page{
	margin-top: 100px;
}
div.user_page #login_wrap {
	width: 60%;
	min-width: 300px;
	border: 1px solid #7B4B3A;
	padding: 20px;
}
#login_wrap {
	width: 250px;
	padding: 0px;
	text-align: center;
}
#login_wrap form {
	width: 100%;
}
#login_wrap form input, textarea{
	width: 100%;
	height: 30px;
	font-size: 16px;
}
#login_wrap form input[type='checkbox'] {
	width: 15px;
	height: 15px;
	margin-top: 20px;
	border: 1px solid #777;
}
#login_wrap a{
	font-size: 14px;
	color: #777;
}
#register,#forgot {
	float: left;
	width: 49%;
	font-size: 12px;
	color: #7B4B3A;
}
#register {	
}
#forgot {
	text-align: right;
}
#regist {
	width: 500px;
}
#regist form {
	width: 95%;
}
#regist form input, textarea{
	width: 200px;
}
#admin_bar{	
	font-size: 10px;
	width: 100%;
	background-color: #FFF;
	text-align: center;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	border-bottom: 2px solid #095CA2;
	text-align: center;
}
#admin_bar table.adminBar{
	margin: auto;
}
div#edit_area{
	padding: 0 50px 0 50px;
	text-align: center;
}
div#edit_area table.data,div#edit_area form.form {
	margin: auto;
}

#admin_bar table.adminBar td{
	font-size: 12px;
}
#admin_bar table.adminBar span{
	font-size: 12px;
	float: right;
	border: 1px solid #999;
	width: 90px;
	margin: 0px 1px 0px 1px;
	text-align: center;
	cursor: pointer;
}
#admin_bar table.adminBar span:hover{
   border: 1px solid #900709;
   cursor: pointer;
   color: #900709;
   background-color: #FBE2E5;
}
#admin_bar table.adminBar a{
	color: #999;
	padding: 1px 5px 1px 5px;
	text-decoration: none;
	cursor: pointer;
}
#admin_bar table.adminBar a:hover {
	color: #ed1fab;
}
#profile_info{
	width:350px;
}
/*category path*/
div.cate_path{
	margin-top: -5px;
	margin-bottom: 5px;
	font-size 12px;
}
div.cate_path a{
	font-size: 12px;
	text-decoration: none;
	color: #000;
}
div.cate_path a:hover{
	color:#ed1fab;
}
div.cate_path span.path_arrow{
	width: 12px;
	*display: inline;
	display: inline-block;
	text-indent: -999999px;
	text-transform:capitalize;
	
	background: url('images/ui-icons_2e83ff_256x240.png') no-repeat;
	background-position: -35px -30px;	
}
/*=======================
Page Header
=========================*/
.top_bar{
	border-bottom: 0px solid #FAFAFA;
	padding: 5px 20px 0 20px;
}
.h_social{
	float: left;
}
.account{
	
	float: right;
}
.logo h2{
	text-align: center;
	margin: auto;
}


.logo img {
    padding-top: 10px;
    padding-bottom: 0px;
}

.logo img, .logo img.retina {
	margin: auto;
}
.logo.logo-center img{margin: 0 auto;}
.logo a {height: auto; overflow: hidden; display: block;}

.logo img{display: block;
max-width: 100%;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;}

.main_middle .title{ 
	text-align: center;
	background-color: #7B4B3A;
	color: #fff;
	padding: 5px;
}
.title a{
	text-decoration: none;
	color: #fff;
}
.sub_tt {
	margin-top: 10px;
	padding: 5px;
	text-align:center;
	color: #7B4B3A;
}
.sub_tt span{
	font-size: 20px;
	font-weight: bolder;
	margin-left: 5px;
	margin-right: 5px;
	
}
.sub_tt a {
	text-decoration: none;
	color: #CA4032;
}
.sub_tt a span{
	font-size: 14px;
}
.boxPaper p{ line-height:25px;}
ul#menu-topmenu{
padding-left: 160px;
}
/*======================
a2a_kit
========================*/
.a2a_kit a{
	text-decoration: none;
}
.a2a_kit i{
	font-size: 30px;
}
.a2a_kit i:hover{
	color: #999;
}
.a2a_button_facebook i:hover, 
.a2a_button_twitter i:hover,
.a2a_button_pinterest i:hover,
.a2a_button_google_plus i:hover
{
	color: #7B4B3A;
}

.a2a_button_facebook i{
	color: #3b5998;	
}
.a2a_button_twitter i{
	color: #4099FF;
}
.a2a_button_pinterest i{
	color: #C92228;
}
.a2a_button_google_plus i{
	color: #D34836;
}

/*=======================
Left Box
=======================*/
.left_box{
	margin-top: 30px;
	border-top: 1px solid #7B4B3A;
	width: 100%;

}

.left_box h5{ font-size: 14px;}


.left_box .left-heading{
	text-align: center;
}
.left_box .left-heading h4{
	font-size: 16px;
	margin: -10px 0 0 0 ;
	
}
.left_box .left-heading h4 span{
	background: #7B4B3A;
	color: #fff;
	padding: 0 10px 0 10px;
	text-transform: uppercase;
}

.left_box UL, .left_box UL li{
	padding: 0;
	list-style: none;
}
.left_box UL li{
	border-bottom: 1px dotted #BE918F;
}

.left_box UL li a{
	display: block;
	text-decoration: none;
	vertical-align: bottom;
	line-height: 30px;
	width: 100%;
	color:#444;
	font-size:14px;
}
.left_box UL li a:hover{
	color: #7B4B3A;
}
/*=======================
Footer Box
=======================*/
span.footer_text{float: left; margin:10px;}


ul.bottom_menu{
	margin: 10px 50px 0px 0px;
	list-style: none;
	float:right;
}
ul.bottom_menu li{
	display: inline-block;
	margin: 0 5px 0 5px;
}
/*=======================
topics.htm Box
=======================*/
.ratioBox{
	background: url('book_bg_close2.png') no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
	margin: 5px;
	position: relative;
	width: 100%;		/* desired width */
}
.ratioBox:before{
	content: "";
	display: block;
	padding-top: 135%; 	/* initial ratio of 1:1*/
}
.ratioBox .content{
	padding: 10px;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
div#book{
	background: url('/images/zhuyin/book_bg_close2.png') no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
	margin: 5px;
	width: 100%;
	position: relative;
}
div#book:before{
	content: "";
	display: block;
	padding-top: 135%;
}
div#book .content{
	padding: 10px;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
div#book:hover{
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);;
}
div#book img{
	margin-bottom: 10px;
}
div#book div.comments-likes{
	margin: 10px;
}
td#book_t{
	width: 50%;
	padding: 20px;
	font-size: 18px;
	color: #000;
}
td#book_w{
	width: 50%;
	color: #ddd;
	padding: 20px;
}
table.buttons{
	margin: auto;
}
table.buttons td{
	padding: 0 5px 0 5px;
}
/*================
	posts.htm
==================*/
div.row {
	min-height: 400px;
}
div#post{
	background: url('/images/zhuyin/book_background.png') no-repeat; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
	margin: 5px;
	width: 100%;
	position: relative;
}
div#post:before{
	content: "";
	display: block;
	padding-top: 58%;
}
div#post .content{
	padding: 10px;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
div#post img{
	margin-bottom: 10px;
}
div#post div.comments-likes{
	margin: 10px;
}
div.wish_list_box{
	float:right;
	margin: 5px 40px 5px 5px;
}
div.post_t{
	display: inline-block;
	float: left;
	text-align: left;
	width: 50%;
	padding: 20px;
	font-size: 12px;
	font-weight: bold;
	color: #7B4B3A;
	text-align: center;
}
div.post_w{
	display: inline-block;
	float: right;
	text-align: left;
	width: 50%;
	height: 90%;
	font-size: 10px;
	padding: 20px;
	overflow: hidden;
	
}
div.comments{
	padding: 5px;
	height: 260px;
	overflow: auto;
	text-align: left;
	border: 1px solid #7B4B3A;
}
div#comm{
	margin-top: 10px;
}
span.add_comm{
	margin-left: 60%;
}
span.add_comm span{
	color: #fff;
	font-size: 20px;
}
div.comments span.date{
	font-size: 10px;
	color: #7B4B3A;
}
div.comments span.name{
	font-size: 12px;
	font-weight: bolder;
	text-transform: uppercase;
}
div.comments span.comm{
	font-size: 12px;
	color: #444;
	margin-left: 30px;
}

/*================
posts_detaqil.htm
==================*/
div#print{
	padding: 20px;
	min-height: 600px;
}
tr.zhi td{
	font-size: 20px;
}
#pinyin tr.yin td {
	font-size: 12px;
}
#zhuyin tr.yin td {
font-size: 10px;	
}
#zhuyin td, #pinyin td{
	text-align: center;
}
span.kai{
	display: inline-block;
	width: 40px;
	height: 40px;
}
span.kai div{
	text-align: center;
}	
span.kai div:nth-child(n+2){
	font-size: 20px;
}
div.bookpage{
	min-height: 100px;
}
div.txt p{
	font-size: 20px;
}
div.zybox span, div.pybox span{
	display: inline-block;
	width: 38px;
	height: 38px;
}
div.zybox span div, div.pybox span div{
	text-align: center;
}
div.zybox span div:nth-child(n+1){
	font-size: 10px;
}	
div.zybox span div:nth-child(n+2), div.pybox span div:nth-child(n+2){
	font-size: 20px;
}

div.cate_path{
	margin-top: 30px;
}
div.mb_error{
	height: 90px;
}