/*
Theme Name:FLAT
Theme URI:http://www.mono-lab.net/demo/flat/
Description:This theme supports widget, threaded-comments, theme-options,and translation is ready. Also including page-navigation and multi level dropdown menu.You can see live demo including more information here http://www.mono-lab.net/demo/flat/
Author:mono-lab
Author URI:http://www.mono-lab.net/
Version:4.3.4
*/

@font-face {
    font-family: 'icomoon-zblog';
    src: url('../font/icomoon-zblog.eot');
    src: url('../font/icomoon-zblog.eot?#iefix') format('embedded-opentype'),
         url('../font/icomoon-zblog.woff') format('woff'),
         url('../font/icomoon-zblog.ttf') format('truetype'),
         url('../font/icomoon-zblog.svg#icomoon-zblog') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ----------------------------------------------------------------------
 reset css
---------------------------------------------------------------------- */
html{overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
a,img { border:none; }
a, a:visited { text-decoration:none; outline:none; }
a:hover{text-decoration:underline; }
p{margin:0 0 1em 0; padding:0; line-height:150%; }
ul{ list-style-type:none; margin:0 0 1em 0; padding:0; line-height:0%; }
ul li{margin:0; padding:0; line-height:normal; zoom:1; }
ol{margin:0 0 1em 19px; padding:0; }
ol li{ padding:0 0 5px 0; line-height:normal; }
dl{list-style-type:none; margin:0 0 1em 0; padding:0; line-height:0%; }
dl dt, dl dd{ margin:0; padding:0; line-height:normal; zoom:1; }
dl dt{font-weight:bold; }
form, table, input,textarea, dl, dt, dd{ margin:0; padding:0; }
table{ border-collapse:collapse; width:100%; border:0; }
cite{text-align:right; display:block; }
object{ display:block; margin:0 auto; }
hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:100%; }
input, textarea { background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); -webkit-appearance: none; border-radius:0; /* Removing the inner shadow, rounded corners on iOS inputs */ }
input[type="checkbox"]{ -webkit-appearance: checkbox; }
input[type="radio"]{ -webkit-appearance: radio; }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }

/* clearfix */
.clearfix:after{content: "."; display:block; clear:both; height:0; font-size:0.1em; line-height:0; visibility:hidden; overflow:hidden; }
.clearfix{display:inline-block;*zoom:1;}
.clear{clear:both; }
.hide{display:none; }
/* exlude MacIE5 \*/
* html .clearfix{height:1% }
.clearfix{display:block;}
/* end MacIE5 */


/* ----------------------------------------------------------------------
 basic setting
---------------------------------------------------------------------- */
body{margin:0;/*body默认有8个margin*/font-family:Arial,Helvetica,sans-serif; color:#666;min-width:1100px;font-size: 14px;
   background-attachment: scroll;background-image: url("../img/background.gif");background-position: left top;background-repeat: repeat;}
a{color:#333; }
a:hover{color: #009dc4;}

/*************** header *********/
#header{background: url("../img/background_header.gif") repeat-x scroll left bottom #fff;border-bottom: 1px solid #ccc;height: 230px;position: absolute; right: 0;top: 0;width: 86%;z-index: 5;}
#header a:hover{text-decoration: none;}
#logo{font-family: "Century Gothic";font-size: 40px;font-weight: normal;line-height: 100%;margin: 62px 0 5px 4%;}
#logo a{color: #009dc4;}
#tagline{border-top: 1px solid #bbbbbb;color: #888;border-top: 1px solid #bbb;display: block;font-size: 14px;font-weight: normal;margin: 0 4%;padding: 5px 0 0 10px;}


/***************  menu  ***************/
#menu{background:#fff;border-bottom: 1px solid #ccc;height: 35px;width: 100%;}
#menu ul{float:right;list-style:none;margin:0 20px 0 0;}
#menu ul ul{float:none;display:none;position:absolute; top:36px; right:0px;margin:0;}
#menu ul li{float:left; font-size:10px; position:relative; }
#menu ul ul li{float:none; height:auto;text-align:left; }

#menu ul li a{font-size:10px; padding:0 20px; text-align:center; color:#888; display:inline-block; height:35px; line-height:36px; overflow:hidden; }
#menu ul ul li a{font-size:11px; background:#fff; border:1px solid #ccc; border-width:0 1px 1px 1px;
   display:block;position:relative;width:180px; text-align:left; }
#menu ul li:hover > a{background:#eee; color:#333;}
#menu ul li:hover ul{display: block;}

#content{min-height: 100%;position: absolute;top: 0;width: 100%;}
#post_mask{box-shadow:-1px 0px 3px 0px #888; position:absolute; top:0; right:0; width:86%; height:100%; background:#fff url(../img/right_bg.gif) repeat-y right top; z-index:2;}

#left_col{float: left;margin: 230px -340px 0 0;width: 100%;}
#archive_headline{float: right;position: relative;width: 86%;z-index: 3;}
#archive_headline h2{font-size: 14px;margin: 0 340px 0 0;padding: 45px 4%;}
#archive_headline h2 span{color: #00a19e;}

.post_wrap{clear: right;}
.post{float: right;position: relative;width: 86%;z-index: 3;}
.post .title{font-size: 20px;font-weight: normal;line-height: 140%;margin: 0 0 0 -5px;
    background-image:url("../img/title.gif");background-color: transparent;background-position:left 45px;background-attachment: scroll;background-repeat: no-repeat;}
.post .title a, .post .title span{display: block;margin: 0 340px 0 5px;padding: 39px 4% 0;text-decoration: none;}
.post .title a{border-top: 1px solid #ccc;}
.post_content{margin: 0 340px 0 0;min-height: 50px;padding: 25px 4%;}
.post_content p.excerpt{text-indent: 1.5em;}
/* read more link */
.post a.more_link{background-color:#f2f2f2;border-radius: 3px;color: #666;display: inline-block;font-size: 12px;height: 35px;line-height: 35px;padding: 0 36px;text-decoration: none;}
.post a.more_link:hover{color:#fff;background-color:#009dc4;}   
.post p.back{text-align: center;}
.post p.back a:before{content: "\e60a";font-family: "icomoon-zblog";padding-right: 5px;}


#archive_headline h2,
.post .title a, .post .title span, .post_content, .post .post_tags, .page,
#comment_header, #comments{border-right: 1px solid #ccc;}
#right_col{border-left: 1px solid #ccc;margin-left: -1px;}

/* --- Preset for post style --------------------------- */

/* headline */
.post h1,.post h2, .post h3, .post h4, .post h5, .post h6{line-height:130%; margin:0 0 10px 0; }
.post_content a{text-decoration: underline;color:#00a19e;}
/* image */
.post img{height:auto; max-width:100%; width:auto;}
.post img.centered, div.centered{display:block; margin:15px auto;}
/* table */
.post table { margin:0 0 1em 0; }
.post td, .post th{ border:1px solid #ccc; padding:15px; }
.post th{background:#eee; font-weight:normal;}
/* block quote */
.post blockquote{margin:0 0 1em 0; padding:50px 50px 40px; background:#fefefe; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative; border:1px solid #ccc; }
.post blockquote:before{content: '"'; font-style:italic; font-size:40px; font-weight:bold; line-height:40px; width:30px; height:30px; position:absolute; top:20px; left:20px; color:#aaa; }
.post blockquote:after{content: '"'; font-style:italic; font-size:40px; font-weight:bold; text-align:left; line-height:60px; width:30px; height:30px; position:absolute; bottom:20px; right:20px; color:#aaa; }
/* list */
.post li, .post dt, .post dd{margin:0; line-height:150%;}
.post ul li{background:url(../img/bullet.png) no-repeat left 0.9em; padding:0 0 0 9px;}
.post ul, .post ol{padding: 0 0 0 1em;}
.post ul ul, .post ol ol{ margin:0 0 0 1em;}
/* etc */
.post address{border-left:3px solid #ccc; padding:5px 0 5px 10px; line-height:150%; margin:0 0 1em 0; background:#fafafa; }
.post pre{border:1px solid #ccc; background:#fafafa; padding:10px 20px; margin:0 0 1em 0; line-height:150%;_word-wrap:break-word; overflow:auto;border-radius:5px; }
.post embed, .post iframe, .post object{max-width:100%; margin:0 auto; display:block;}


/* bread crumb */
#bread_crumb{position:relative; z-index:3; width:86%; float:right;}
#bread_crumb ul{margin:0 340px 0 0; padding:13px 4% 11px; font-size:10px;background-color: #f5f5f5;}
#bread_crumb ul li{float:left; display:inline; margin:0 10px 0 0; padding:0 15px 0 0; color:#777; background:url(../img/arrow2.gif) no-repeat right 3px; line-height:150%; }
#bread_crumb ul li.last{ margin:0; padding:0; background:none; }
#bread_crumb ul li a{color:#777;}


/******** left side of post meta ***********/
.meta{width:14%; border-top:1px solid #aaa; float:left; text-align:right; min-height:2px; }
.meta ul{margin:46px 16% 30px; list-style: none;}
.meta li{font-size:11px; margin:0 0 15px 0; color:#777; }
.meta li a{color:#777; }
.meta li a:hover{color:#333; }
.meta li:after{font-family: "icomoon-zblog";font-size: 13px;color:rgba(102, 102, 102);vertical-align: middle;padding-left: 5px;}
.meta li.post_date{margin:-12px 0 30px 0; }
.meta li span.date{font-size:40px; float:right; display:block; line-height:40px; margin:0 0 0 5px; }
.meta li span.month{text-transform:uppercase; padding:13px 0 0px 0; display:block; font-size:10px; }
.meta li span.year{display:block; font-size:10px; }
.meta li.post_read:after{content: "\e613";}
.meta li.post_author:after{content: "\e609";}
.meta li.post_category:after{content: "\e608";}
.meta li.post_comment:after{content: "\e606";}

.post_tags{background: url("../img/meta_bg.gif") repeat scroll 0 0 rgb(0, 0, 0);font-size: 11px;margin: 0 340px 0 0;padding: 9px 3% 8px 4%;_margin-right:342px;}
.post_tags ul{float: right; margin: 0;}
.post_tags ul li{float: left;background: none;}
.post_tags ul li:first-child:before{content: "\e607";font-family: "icomoon-zblog";font-size: 13px;display: inline;}

/***********  pager **********/
#page_nav{float: right;padding: 0;position: relative;width: 86%;z-index: 3;}
#page_nav .page{border-top: 1px solid #ccc; margin: 0 340px 0 0;padding: 30px 5%;}
#page_nav ul{ margin:0; }
#page_nav li{ float:left;margin-right: 5px;}
#page_nav a, #page_nav a:hover, #page_nav span{text-decoration:none; color:#666; font-size:11px; padding:13px 15px; line-height:100%; margin:0 4px 4px 0; background:#eee; display:block; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#page_nav a:hover{color:#fff; text-decoration:none;background-color:#009dc4;}
#page_nav span.dots{background:none; color:#333; }
#page_nav span.current{color:#fff; background:#aaaeaf; }


/****************   comments  ****************/
#comments_wrapper{float: right;font-size: 12px;position: relative;width: 86%;z-index: 3;}
#comments_wrapper a{color: #888;}
#comments_wrapper a:hover{color: #00a19e;}
#comment_header{border-bottom: 1px solid #ccc;font-size: 11px;margin: 0 340px 0 0;min-width: 200px;padding: 0 4%;position: relative;}
#comment_header span.comments_right{float:right; position:relative; bottom:-1px; padding:5px 10px; background:#fff;border:1px solid #ccc;border-bottom-width: 0;}
#comments{margin: 0 340px 0 0;padding: 20px 4% 15px 4%;}

#comment_area{margin:15px 0 20px;}
.commentlist{list-style-type:none; margin:0; padding:0; }
.comment{border:1px solid #ccc; color:#666; margin:0 0 15px; padding:15px 20px 3px; border-radius:4px;}
.even_comment{ background:#f7f7f7; }
.odd_comment{background:#fefefe;}

/************ comment-meta *************/
.comment-meta{height:56px; position:relative;}
.comment-meta .comment-reply{position: absolute;right: 0px;top:7px;}
.avatar{border:1px solid #ccc; background:#fff; width:37px; height:37px; padding:2px; display:inline; float:left; margin:0 10px 0 0; }
ul.comment-name-date{padding:6px 0 0 0; float:left;}
ul.comment-name-date li{padding: 0 0 5px;}


/*********** comment-content ***********/
.comment-content{padding:0; clear:both; margin:0; }
.comment-content p{line-height: 250%;}
* html .comment-content{padding:5px 0 0 0; }
.comment-note{background: none repeat scroll 0 0 #d6f4f0;border: 1px solid #94ddd4;color: #33a8e5;display: block;font-size: 11px;margin: 0 0 1em;padding: 10px 15px;}
.comment-content a, .comment-content a:visited{text-decoration:underline; }


/************  comment-form ************/
.comment_form_wrapper{background: #fff;border: 1px solid #ccc;border-radius: 4px;box-shadow: 0 0 2px 1px #ddd;padding: 15px;font-size: 12px;margin-bottom: 15px;}
#cancel_comment_reply{background:url(../img/arrow2.gif) no-repeat left center; margin:0 0 1em 0; padding:0 0 0 11px;display: none;}
#guest_info{padding:0; width:100%; }
#guest_info div{margin:0 0 12px 0; text-align:left; }
#guest_info input{margin:0; padding:5px 0; border:1px solid #ccc; width:100%; background:#fff; color:#666; }
#guest_info input:focus{border: 1px solid #009dc4;}
#guest_info label{display:block; margin:0 0 5px 0; padding:0; font-size:11px; color:#888;}
#guest_info span{color:#666; margin:0 10px 0 0; }

#comment_textarea textarea{margin-top:10px;width:100%; height:120px; border:1px solid #ccc;background:#fff; color:#666; font-size:11px; overflow:auto;resize:none; }
#comment_textarea textarea:FOCUS{border: 1px solid #009dc4;}

#submit_comment_wrapper{text-align:center; }
#submit_comment{margin:15px auto 0; display:block; width:150px; background:#ccc; color:#fff; border:none; padding:10px 20px; cursor:pointer; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
#submit_comment:hover{color:#fff;background: #009dc4; }


#previous_next_post{float: right;position: relative;width: 86%;z-index: 3;}
#previous_next_post div{margin: 0 340px 0 0;padding: 30px 4%;border-right: 1px solid #ccc;border-top: 1px solid #ccc;}
#prev_post, #next_post{line-height: 140%;width: 49%;margin: 0;font-size: 12px;}
#prev_post{float: left;}
#prev_post a{background: url("../img/left_arrow.png") no-repeat scroll left top;display: block;padding: 11px 0 11px 45px;}
#next_post{float: right;text-align: right;}
#next_post a{background: url("../img/right_arrow.png") no-repeat scroll right top;display: block;padding: 11px 45px 11px 0;;}

/************* right ************/
#right_col ol,#right_col ul{margin: 0;}

#right_col{font-size:11px; padding:267px 20px 100px 20px; width:300px;float:right; position:relative; z-index:4;}
/* list */
#right_col li{margin:0 0 1em 0; line-height:160%; }
#right_col li li{padding:0 0 0 1em; margin:5px 0; }
#right_col li a{text-decoration:underline; }

#right_col .side_widget{color: #888;font-size: 11px;margin: 0 0 50px;}
.side_widget .headline{font-family: 'Wire One',Arial,sans-serif;font-size: 14px;color:#666;text-transform: uppercase;margin: 0 0 10px;padding: 12px 0;}
.side_widget p {line-height: 2;margin: 0;}


/*social_link*/
#introduction_widget{position: relative;}
#social_link{padding: 0;position: absolute;right: 0;top: 5px;}
#social_link li{float: left;margin: 0 5px 0 0;}
#social_link li a{display: block;width: 20px;height: 20px;text-decoration: none;}
#social_link li a:after{color: #aaa;display: inline-block;font-family: "icomoon-zblog";font-size: 18px;}
#social_link li.rss_button a:after{content:"\e603"; }
#social_link li.github_button a:after{content:"\e604"; }
#social_link li.rss_button a:hover:after{color:#ffcc00;}
#social_link li.github_button a:hover:after{color:#16b9dc;}

/***********  search_area *************/
#search_area{background-color:#eee;border-radius: 20px;height: 33px;position: relative;width: 100%;margin-top: 20px;}
#search_area .search_input input{background-color:transparent;float: left;border: medium none;font-size: 12px;color: #6d7478;
  height: 33px;margin: 0 0 0 5%;padding: 0;width: 70%;*margin-top:10px;*margin-top:10px;*margin-left:3%;*height:23px;}
#search_area .search_button input{border: medium none;border-radius: 20px;display: block;height: 31px;line-height: 31px;overflow: hidden;cursor:pointer;
    position: absolute;right: 1px;top: 1px;text-indent: 200%;white-space: nowrap;width: 15%;
    background-image:url("../img/search.png");background-repeat: no-repeat;background-position: center;background-attachment: scroll;background-size:15px auto;background-color: #fff;
    background-color:rgb(187, 187, 187)\9;background-image:url("../img/search_ie.png")\9;}
#search_area .search_button input:hover{background-color: #009dc4;}

/*********** tagclound ************/
#tagcloud a{color:#00a19e;}

/*****************  friendlink  *************/
#friendlink ul li, #archive ul li{float: left;line-height: 160%;}
#archive ul li{margin: 10px 40px 10px 20px;}
#friendlink ul li{margin: 10px 25px;}


/***********  footer  ************/
#footer{position:relative; float:right; z-index:3; width:86%; background:#fff; border-top:1px solid #ccc; height:80px;font-size: 11px;text-align: center;}
/* copyright */
#copyright{line-height:100%; padding:6px 0; margin:30px 0 0 0; position:relative;}
.icp{ margin:0 0 0 12px; padding:0 0 0 10px; border-left:1px solid #ccc;}

/* return top */
#return_top{position:fixed; bottom:15px; right:20px; display:block;_display:none;text-indent:100%;white-space:nowrap; width:45px; height:45px; margin:0; padding:0; 
  background:url(../img/return_top2.gif) no-repeat center center #555;overflow:hidden;border-radius:4px; opacity:0.5;
}
#return_top:hover{opacity:1;background-color: #009dc4; } 