/*
Theme Name: New Web Zen
Theme URI: http://newwebzen.com/
Description: The personal WordPress theme by <a href="http://twitter.com/newwebzen/">Jesse</a>.
Version: 1.0
Author: Jesse Ying
Author URI: http://newwebzen.com/
Tags: fixed width, two columns, widgets

	NWZ v1.0
	http://newwebzen.com/

	This theme was designed and built by Jesse Ying,
	you can follow me on my twitter http://twitter.com/newwebzen/
	whose blog you will find at http://blog.newwebzen.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* - CSS Reset - */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;}
:focus {outline: 0;}
body {line-height: 1;color: #2b2b2b;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a{text-decoration:none;color:#7f4a16;}
a:hover{text-decoration:underline;}
img {vertical-align:middle;}

/* - Global - */

body{background:#ecd89b url(images/global-bg.jpg) center top no-repeat;font:normal 14px/2em Arial, Helvetica, sans-serif, SimSun;}
.hidden {display:none;}
.left{float:left;}
.right{float:right;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.split, .post .opt .download a, .post .opt .download a:hover, .post .opt .demo a, .post .opt .demo a:hover, .post .opt .view a, .post .opt .view a:hover, .post ul li, .cms, .more-link a, .more-link a:hover, .facebook, .delicious, .tweet, .sina, .qweibo, .qzone, .douban, .renren, .kaixin, .buzz, .feed, .nav .left em, .nav .right em, .relate h3 img, .relate h3 strong, .relate ul li, #comments h3 img, #comments h3 strong, #comments h3 em, #comments .comment .reply a, #respond h3 img, #respond h3 strong, #respond form input.commentsubmit, #respond form .author, #respond form .website, #respond form .email, .search label img, .tagscloud h4 img, .tagscloud h4 strong, .subscribe h4 img, .subscribe h4 strong, .subscribe ul li .rsssub, .subscribe ul li .mailsub, .recommend h4 img, .recommend h4 strong, .popular h4 img, .popular h4 strong, .twitter h4 img, .twitter h4 strong, .twitter ul li, .wpcf7  form input.messagesubmit, em .cf7author, em .cf7email, em .cf7subject, #menu ul .index a, #menu ul .index a:hover{background: url("images/sprite-x-a.png") no-repeat;}
.page-body, .container, .tagscloud, .subscribe, .recommend, .popular, .twitter{background: url(images/sprite-w.jpg) repeat-y}

.page-body{position:relative;background-position: -964px 0;margin:0 auto;width:964px;padding-bottom:50px;}
.container{background-position:0 0;background-repeat:no-repeat;}
.split{background-repeat:repeat-x;background-position:0 -193px;clear:both;height:1px;overflow:hidden;margin-bottom:15px;}
#octopus{position:absolute;top:68px;right:2px;background: url(images/octopus.png) center top no-repeat;width:56px;height:200px;}
#header{margin:0 auto;width:964px;height:250px;}
#header h1{text-indent:-999em;}
#header h1 a{display:block;width:320px;height:50px;position:relative;margin:0 auto;left:15px;top:45px;}
#header .description{width:320px;height:30px;position:relative;margin:0 auto;left:10px;top:55px;text-indent:-999em;}
#content{float:left;position:relative;width:572px;padding-left:42px;}
#footer{background: url(images/main-bt-bg.jpg) center top no-repeat;margin:0 auto;width:100%;height:240px;}
#sidebar div:hover, .share:hover, .nav:hover, .pagetitle:hover, .post p img:hover, .attachment p img:hover{-moz-box-shadow:0 0px 5px #bbb;-webkit-box-shadow:0 0px 5px #ccc;box-shadow:0 0px 5px #bbb;}
/* - Menu - */

#menu{height:80px;}
#menu ul li{float:left;text-indent:-999em;}
#menu ul li a{display:block;margin-top:21px;margin-right:23px;width:90px;height:39px;}
#menu ul li a:hover{margin-top:18px;height:42px;}
#menu ul .index a{background-position: 0 0;}
#menu ul .index a:hover{background-position: 0 -39px}
#menu ul .cat-item-1 a{background: url(images/inspiration.png) 0px 0;}
#menu ul .cat-item-1 a:hover{background: url(images/inspiration.png) 0px -39px}
#menu ul .cat-item-4 a{background: url(images/resource.png) 0px 0;}
#menu ul .cat-item-4 a:hover{background: url(images/resource.png) 0px -39px}
#menu ul .cat-item-3 a{background: url(images/tutorial.png) 0px 0;}
#menu ul .cat-item-3 a:hover{background: url(images/tutorial.png) 0px -39px}
#menu ul .page-item-2 a{background: url(images/about.png) 0px 0;}
#menu ul .page-item-2 a:hover{background: url(images/about.png) 0px -39px}
#menu ul .cur a, #menu ul .current-cat a, #menu ul .current_page_item a{background-position: 0 -81px;}
#menu ul .cur a:hover, #menu ul .current-cat a:hover, #menu ul .current_page_item a:hover{background-position: 0 -120px;}

/* - Post - */

.post h2{font:24px/1.5em \5FAE\8F6F\96C5\9ED1,\5B8B\4F53 }
.post h3{font:bold 20px/2em Arial,Helvetica,sans-serif,\5B8B\4F53;color:#7F4A16;margin-bottom:0px}
.post h4{font:bold 16px/2em Arial,Helvetica,sans-serif,\5B8B\4F53;color:#333;margin-bottom:15px}
.post, .attachment{padding-bottom:10px;/*overflow:hidden;*/}
.post p img, .attachment p img {background: #fff;border:1px solid #ddd;padding:5px;text-indent:0;margin:10px 0 10px 0;}
.post p.f-img{text-indent:0;float:left;margin:0 20px 0 0;}
.post p.f-img img{margin:0;}
.post p .f-img{text-indent:0;margin:0 20px 0 0;float:left;}
.post p .f-img img{margin:0;}
.post p.entry{margin:10px 0 10px 0;text-indent:2em;}
.post .opt{margin:15px 0 20px;overflow:hidden;}
.post .opt span a{height:35px;text-indent:-999em;margin-left:2em;}
.post .opt .download a{background-position: -99px -194px;display:block;width:157px;}
.post .opt .download a:hover{background-position: -99px -229px;}
.post .opt .demo a{background-position: -256px -194px;display:block;width:97px;}
.post .opt .demo a:hover{background-position: -256px -229px;}
.post .opt .view a{background-position: -353px -194px;display:block;width:97px;}
.post .opt .view a:hover{background-position: -353px -229px;}
.post .opt span{float:left;}
.post ul{margin:10px 0;color:#666;}
.post ul li{background-repeat: no-repeat;background-position: -458px -280px;line-height:2em;margin-left:2em;padding-left:20px;}
.cms{background-position: -400px -266px;width:50px;height:29px;position:absolute;right:9px;top:-32px;padding-top:3px;color:#7f4a16;font:22px/1em Georgia,"Times New Roman",Times,serif;text-align:center;}
.date{background: url(images/date.png);width:54px;height:50px;position:absolute;left:-50px;padding:7px 16px 0 0;font:normal 16px/0.7em Georgia,"Times New Roman",Times,serif;text-align:center;}
.date span{display:block;font-size:26px;line-height:1.2em;}
.metadata{position:relative;font:12px/2em Arial,Helvetica,sans-serif;margin-bottom:15px;}
.more-link a{background-position: 0 -200px;height:28px;width:99px;display:block;}
.more-link a:hover{background-position: 0 -233px;}
.more-link{height:28px;overflow:hidden;clear:both;margin-bottom:5px}
.pagetitle{background:#f9fafb;border:1px solid #dfe6ee;color:#8b531d;width:570px;height:50px;margin-bottom:20px;text-align:center;font:normal 24px/48px Georgia,"Times New Roman",Times,serif;}
.share, .nav{float:left;clear:both;width:530px;margin:0 0 20px 0;padding:18px 20px;border:1px solid #ddd;display:inline;}
.share a{float:left;display:block;width:32px;height:32px;margin-right:18px;-moz-border-radius:5px;cursor: pointer;}
.share a img{width:32px; height:32px;display:block;-moz-border-radius:5px}
.facebook{background-position:0 -264px;}
.tweet{background-position:-32px -264px;}
.sina{background-position:-64px -264px;}
.qweibo{background-position:-96px -264px;}
.qzone{background-position:-128px -264px;}
.douban{background-position:-160px -264px;}
.renren{background-position:-192px -264px;}
.kaixin{background-position:-224px -264px;}
.nav{padding:15px 20px 12px 20px;}
.nav a{width:250px;display:block;}
.nav .right {text-align:right;}
.nav .left em{background-position: -257px -170px;display:block;width:92px;height:18px;text-indent:-999em;overflow:hidden;}
.nav .right em{background-position: -355px -170px;display:block;width:92px;height:18px;text-indent:9999em;overflow:hidden;margin-left:157px;}

/* - Discussion - */

.relate, #comments, #respond{float:left;width:570px;margin:0 0 20px 0;border-bottom:1px solid #ddd;display:block;}
.relate h3, #comments h3 , #respond h3{color:#7F4A16;font-weight:normal;padding:0 0 15px 20px;height:26px;}
.relate h3 img{background-position: -140px -4px;width:34px;height:26px;float:left;}
.relate h3 strong{background-position: -96px -38px;float:left;margin-left:20px;width:92px;text-indent:-999em;display:block;}
.relate ul li{background-position: -457px -199px;padding-left:20px;width:250px;float:left;}
.relate ul{padding-left:20px;margin-bottom:15px;float:left;}
.related_post_title{display:none;}

#comments h3 img{background-position: -99px -6px;width:34px;height:26px;float:left;}
#comments h3 strong{background-position: -96px -67px;float:left;margin-left:20px;width:92px;text-indent:-999em;display:block;}
#comments h3 em{background-position: -193px -67px;float:left;width:20px;text-indent:-999em;display:block;}
#comments h3 span{float:left;margin:0 10px;font:20px/1.2em Georgia,"Times New Roman",Times,serif;color:#7f4a16;}
#comments .comment {float:left;}
#comments ol.commentlist{float:left;margin:0;}
#comments ol.commentlist li{margin-bottom:0px;border-bottom:1px solid #ddd;padding:20px 0 15px 0;}
#comments .comment .avatar{border:1px solid #ddd;float:left;margin:0 20px 10px 0;padding:5px;}
#comments .comment cite {color:#7f4a16;font:bold 14px/1em Georgia,Serif,\5B8B\4F53;position:relative;top:-3px;}
#comments .comment span{display:none;}
#comments .comment .comment-meta {float:right;font:12px \5B8B\4F53,Georgia,Serif;margin:-22px 10px 0 0;}
#comments .comment p {float:right;font:12px/2em \5B8B\4F53,Georgia,Serif;width:460px;padding-right:10px;}
#comments .comment-body{float:left;margin-bottom:0px;padding:0 0 0 20px;}
#comments .comment .reply a{background-position: -450px -144px;clear:both;display:block;float:right;font:12px/2em \5B8B\4F53,Georgia,Serif;margin:0 10px 0 0;padding:0 0 0 25px;}
#comments ol.commentlist ul{float:left;margin-top:15px;}
#comments ol.commentlist ul.children li{border-bottom:none;border-top:1px solid #ddd;padding-top:20px;padding-bottom:10px;}
#comments ol.commentlist ul.children li .comment-body {margin-left:60px;width:490px;display:inline;}
#comments ol.commentlist ul.children li .comment-body p{padding-right:10px;width:400px;}
.depth-1{overflow:hidden;}
.navigation{float:left;text-align:right;width:570px;}
.navigation a, .navigation span{padding:5px;}
.rptips{margin:5px 0 20px 90px;}

#comments, #respond{border:none;}
#respond h3 img{background-position: -180px -5px;width:34px;height:28px;float:left;}
#respond h3 strong{background-position: -93px -96px;float:left;margin-left:20px;width:120px;text-indent:-999em;display:block;}
#respond form label {clear:left;color:#707070;float:left;margin:6px 10px 0 0;text-align:right;width:70px;}
#respond form input {border:1px solid #ddd;color:#333;float:left;font:14px Helvetica,Arial,Sans-Serif;height:16px;margin:0 20px 10px 0;padding:5px 10px;width:250px;}
#respond form textarea {border:1px solid #ddd;color:#333;float:left;font:14px/24px Helvetica,Arial,Sans-Serif;height:120px;margin:0 0 10px;padding:5px 10px;width:390px;}
#respond form input.commentsubmit {background-position: -92px -130px;border:1px solid #ddd;clear:both;cursor:pointer;height:33px;margin:0 0 0 80px;padding:0 0 0 126px;text-indent:-9999px;width:125px;}
#respond form .author{background-position: -3px -168px; width:54px;height:20px;text-indent:-999em;}
#respond form .website{background-position: -129px -168px; width:54px;height:20px;text-indent:-999em;}
#respond form .email{background-position: -67px -168px; width:54px;height:20px;text-indent:-999em;}

/* - Siderbar - */
#sidebar{float:right;width:312px;margin-top:40px;}
#sidebar h4 img{width:32px;height:28px;float:left; padding-right:18px;}
#sidebar h4 strong{width:180px;height:28px;float:left;text-indent:-9999em;}
.search form{margin:0;padding:0;height:30px;overflow:hidden;}
.search{background:#fbfcff;width:268px;height:28px;border:1px solid #cae5f8;padding:12px 0 13px 20px}
.search label img{background-position: -220px 0px;width:32px;height:28px;padding-right:15px;}
.search label span{display:none;}
.search .txt{background:fff;border:1px solid #ddd;height:20px;padding:3px 5px;vertical-align:bottom;width:140px;}
.search .submit{color:#7f4a16;position:relative;z-index:8888;font:14px/20px Georgia,"Times New Roman",Times,serif;height:28px;letter-spacing:1px;padding:3px 10px;vertical-align:bottom;width:50px;cursor:pointer;background:none;border:1px solid #ddd;}
.re-search label{text-transform:uppercase; font:18px/18px Georgia, Times;}
.re-search input#s{font:20px/20px Times;background:fff;border:1px solid #ddd;height:22px;padding:3px 5px;vertical-align:bottom;width:250px;}
.re-search input#searchsubmit{text-transform:uppercase;font:20px/22px Times;}

.tagscloud, .subscribe, .recommend, .popular, .twitter{background-position: -1928px 0;border:1px solid #cae5f8;margin-top:20px;width:288px;padding-bottom:15px;}
.tagscloud h4, .subscribe h4, .recommend h4, .popular h4, .twitter h4{height:32px;padding:10px 0 0 20px;/*border:1px solid #edf4f9;*/background:#fbfcff;}
.tagscloud h4 img{background-position: -220px -56px;}
.tagscloud h4 strong{background-position: -270px -56px;}
.tagscloud p{padding:10px 20px 0}

.subscribe h4 img{background-position:-220px -28px;}
.subscribe h4 strong{background-position:-270px -28px;}
.subscribe ul, .recommend ul, .popular ul, .twitter ul {padding:10px 20px 0;}
.subscribe ul li{line-height:2em;heigth:2em;}
.subscribe ul li .rsssub{background-position: -304px -7px;width:20px;height:14px;position:relative;top:-2px;margin:8px 0;}
.subscribe ul li .mailsub{background-position: -271px -7px;width:20px;height:14px;position:relative;top:-2px;margin:8px 0;}
	p.help{font-size:12px;text-align:right;margin-right:10px;}

.recommend h4 img{background-position: -220px -84px;}
.recommend h4 strong{background-position: -270px -84px;}
.recommend, .popular{padding-bottom:10px;}
.recommend ul, .popular ul{padding-top:0;}
.recommend ul li, .popular ul li{margin:10px 0;}
.recommend ul li img, .popular ul li img{background:#fff;float:left;width:32px;height:32px;padding:4px;border:1px solid #ddd;margin:4px 20px 0 0}
.recommend ul li span.wpp-post-title, .popular ul li span.wpp-post-title{display:block;font:14px/2em Arial;}
.recommend ul li span, .popular ul li span{color:#999;display:block;font:12px/1em Arial;}

.popular h4 img{background-position: -220px -112px;}
.popular h4 strong{background-position: -270px -112px;}
.twitter h4 img{background-position: -220px -140px;}
.twitter h4 strong{background-position: -270px -140px;}
.twitter h4 a{display:block;position:absolute;text-indent:-999em;right:78px;width:75px;height:22px;}
.twitter h4 a:hover{border-bottom:1px solid #7F4A16;}
.twitter ul li, .twitter ul li a{word-wrap:break-word;}
.twitter ul li{background-position: -450px -4px;text-indent:20px;font:12px/2em Arial;margin:5px 0;}
.twitter ul li span{color:#807667;display:block;font:italic 100% Georgia,"Times New Roman",Times,serif;text-align:right;margin: 7px;}

/* - Footer - */
#footer p{margin:0 auto;position:relative;top:60px;width:340px;font-size:12px;color:#6c66;}
#footer p a{color:#6c66;}

/* - Contact Form 7 - */
div.wpcf7 {	margin: 20px 0;padding: 0 0 0 25px;}
.wpcf7  form input.messagesubmit {background-position: -319px -265px ;border:1px solid #ddd;clear:both;cursor:pointer;height:33px;padding:0 0 0 80px;margin:0 0 0 70px;text-indent:-9999px;width:80px;}
.wpcf7 textarea  {border:1px solid #ddd;color:#333333;float:left;font:14px/24px Helvetica,Arial,Sans-Serif;height:120px;margin:0 0 10px;padding:5px 10px;width:390px;}
.wpcf7 form input {border:1px solid #ddd;color:#333333;float:left;font:14px Helvetica,Arial,Sans-Serif;height:16px;margin:0 20px 10px 0;padding:5px 10px;width:250px;}
.wpcf7 form em {clear:left;color:#707070;float:left;font:17px "Graublau",Georgia,Serif;margin:6px 10px 0 0;width:60px;}
em .cf7author{display:block;background-position: -3px -168px; width:54px;height:20px;text-indent:-999em;}
em .cf7email{display:block;background-position: -67px -168px; width:54px;height:20px;text-indent:-999em;}
em .cf7subject{display:block;background-position: -191px -168px; width:54px;height:20px;text-indent:-999em;}
em .cf7message{display:block;width:54px;height:20px;text-indent:-999em;}
div.wpcf7-response-output {margin:10px 0 0 70px;padding:0.2em 0.8em;font-size:12px;}
.wpcf7-not-valid-tip-no-ajax{height:16px;margin:0 20px 10px 0;padding:5px 10px;display:none;}
div.wpcf7-mail-sent-ok {border: 1px solid #398f14;}
div.wpcf7-mail-sent-ng {border: 1px solid #ff0000;}
div.wpcf7-spam-blocked {border: 1px solid #ffa500;}
div.wpcf7-validation-errors {border: 1px solid #f7e700;}
span.wpcf7-form-control-wrap {position: relative;}
span.wpcf7-not-valid-tip {position: absolute;top: 20%;left: 20%;z-index: 100;background: #fff;border: 1px solid #ff0000;font-size: 10pt;width: 280px;padding: 2px;}
span.wpcf7-not-valid-tip-no-ajax {color: #f00;font-size: 10pt;}
span.wpcf7-list-item {margin-left: 0.5em;}
.wpcf7-display-none {display: none;}
img.ajax-loader {float:left;padding:9px 10px;border: none;vertical-align: middle;}

/* - PageNavi - */

.wp-pagenavi {clear: both;text-align:center;}
.wp-pagenavi a, .wp-pagenavi span {text-decoration: none;border: 1px solid #ecd89b;background:#ecd89b;padding: 4px 8px;margin: 2px;color:#7F4A16;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.wp-pagenavi a:hover, .wp-pagenavi span.current {border-color: #c97d3a;background:#c97d3a;color:#fff;}
.wp-pagenavi span.current {font-weight: bold;}


/* - ClearFix - */

/* clearfix */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */