style.css

/* ------------------------------------
 * Silence
 *
 * @author	ShingChi
 * @link	http://lcz.me
 * @update	2012-06-01 11:38
 * --------------------------------- */


/* = import google fonts */
@import url(css/fonts.css);


/* ------------------
 * Reset css
 * --------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, hgroup, nav, section { display: block; }
nav ul, nav ol { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; outline: none; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #e2e2e2; margin: 0; padding: 0; }
input, select { vertical-align: middle; }


/* -------------------------------------
 * Basic text and heading style
 * ---------------------------------- */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #686868; line-height: 1.5em; margin:15px 0; font-weight: 100; font-family: "Droid Sans", Verdana, Geneva, sans-serif; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #454545; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }
p { margin: 15px 0; }
ol { margin-left: 35px; }
ul { margin-left: 30px; }
strong { font-weight: bold; }
em { font-style: italic; }
small { font-size: 12px; }


/* ------------------
 * Basic
 * --------------- */
body { background: #f0ece3 url("images/patterns/pattern.png"); color: #999; font-size: 13px; line-height: 1.7em; font-family: "Droid Sans", Verdana, Geneva, sans-serif; }/* 1 */
.container { position: relative; width: 980px; margin: 0 auto; }
#main { -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); background: #fff; }/* 1 */


/* ------------------
 * Header
 * --------------- */
header[role="banner"] { position: relative; width: 930px; min-height: 38px; margin-bottom: 25px; padding: 15px 25px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); background:#d74a38; color: #fff; } /* 1 */
#logo { float: left; margin-right:25px; overflow: hidden; }
#logo a { display: block; float: left; width: 116px; height: 36px; background: url(images/logo.png) no-repeat; text-indent: -999999em; }
nav[role="navigation"] { display: block; float: right; margin-top: 13px; text-align: right; }
.menu { margin-left: 0; }
.menu li { display: inline; }
.menu li a { height: 10px; padding-left: 25px; color: #fff; font: normal 14px "Droid Sans", Verdana, Geneva, sans-serif; text-transform: uppercase; letter-spacing:1px; }
.menu li a:hover { text-decoration: none; opacity: 0.9; }
.menu li.current a { opacity: 0.9; }


/* ------------------
 * Main
 * --------------- */
#content-container { width: 898px; min-height: 300px; padding: 40px 40px 70px; overflow: hidden; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.05) inset; -webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.05) inset; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05) inset; border: 1px solid #fff; background: url(images/sw.png) no-repeat bottom center; }
#content { float: left; width: 900px; min-height: 200px; }
.layout-full #content { width: 900px; }
.layout-left #content, .layout-right #content { width: 580px; }
.layout-left #content { float: right; }
.layout-left #sidebar { float: left; margin-left: 0px; margin-right: 40px; }
.layout-full .post img { max-width: 758px; }
.layout-left .post img, .layout-right .post img { max-width: 572px; }
h1.page-heading { margin-top: -3px; font-size: 16px; margin-bottom: 10px; }

/** the padding of post under full width */
.layout-full .post, .layout-full #comments { padding: 0 67px; }
.layout-full .post header { padding-left: 0; }
.layout-full .post .post-date { top: 5px; left: -67px; }

/* post */
.post { margin-bottom: 35px; }
.post header { position: relative; padding-left: 67px; }
.post-title { margin: 0; font-style: normal; font-size: 24px; }
.post-title a:hover { color: #939393; text-decoration: none; }
.post-info { margin: 0; color: #b5b5b5; font-size: 11px; letter-spacing: 1px; }
.post-info a { text-transform: uppercase; }
.post .post-date { position: absolute; top: 5px; left: 0; width: 51px; height:51px; background: url(images/date-bg.png) no-repeat; text-align: center; }
.post .post-date span { display: block; margin-top: 5px; margin-left: 4px; color: #b4b4b4; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; }
.post .post-date > span + span { margin: 0px; color: #7C7C7C; font: bold 20px/17px "Times New Roman", Times, serif; }
.post > section { height: auto; overflow: hidden; }
.post img { padding: 4px; background: #F4F4F4; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.post img:hover { opacity: 0.9; }
.post footer { width: 100%; height: 1px; border-top: 1px solid #EBEBEB; border-bottom: 1px solid whiteSmoke; font-size: 1px; }

/* aside */
aside { width: 270px; min-height: 200px; float: right; margin-right: 0px; }
aside > section { margin-bottom: 25px; overflow: hidden; }
aside > section:last-child { margin-bottom:0px; }
aside > section h3 { margin: 0 0 3px; padding-bottom: 9px; font-style: normal; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
aside > section .double-line { margin-bottom: 20px; }
aside > section ul { list-style: none; margin-top: -12px; margin-left: 0px; }
aside > section ul li a { display: block; width: 253px; padding: 6px; padding-left:17px; border-bottom: 1px solid #f3f3f3; background: url(images/sidebar-arrow.png) no-repeat center; background-position: 6px; color: #989898; }
aside > section ul li a:hover { background-color: #fafaf7; text-decoration: none; }
.cat-number, .post-time, .arc-number { float:right; margin-top:-30px; }

/** recent comments */
.recent-comments ul { margin: 0px 0 -10px -10px; }
.recent-comments ul li { display: inline; float: left; padding: 0 0 10px 10px; border-bottom: 0px; }
.recent-comments ul li a { display: inline; width: auto; padding: 0px; border-bottom: none; background: none; background-position: 0; }
.recent-comments ul li a:hover { text-decoration: none; background: none; }
.comments-img { padding: 4px; background: #F4F4F4; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.comments-img:hover { opacity: 0.6; }

/** searchform */
.searchform { margin-top: 20px; }
#sidebar .search-wrapper { position: relative; width: 270px; }
#sidebar .search-input { float: left; width: 262px; height: 23px; color: #b7b7b7; }
#sidebar .search-button, #footer .search-button { display: block; position: absolute; top:0px; width:26px; height:27px; margin-top: 1px; border: 0px; background: #FAFAF7 url(images/search-arrow.png) no-repeat center; font-size: 0px; }
#sidebar .search-button { left: 242px; }
#footer .search-button { left: 168px; }
#footer .search-wrapper { position: relative; width: 220px; }
#footer .search-input { float: left; width: 188px; height: 23px; color: #b7b7b7; }
.search-button:hover { cursor: pointer; }

/* pagination */
#pagination { margin-top: 15px; text-align: center; }
.page-navigator { margin-left: 0; }
.page-navigator li { display: inline-block; }
.page-navigator li a { margin: 3px; padding: 5px 9px; font-style: italic; font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; text-decoration: none; }
.page-navigator li a:hover, .page-navigator li.current a { background: #FAFAF7; }
.page-navigator li.current a { color: #999; font-weight: bold; }


/* ------------------
 * Comments
 * --------------- */
#comments h3 { font-size: 17px; }
#comments ol { list-style: none; margin: 0; }
#comments ol li { margin-top: 10px; padding-top: 10px; padding-left: 45px; border-top: 1px dotted #E2E2E2; }
#comments > ol > li { padding-left: 65px; }
#comments > ol > li:first-child { margin-top: 0;  border-top: none; }
#comments ol li .comment-author { position: relative; line-height: 1; }
#comments ol li .avatar { position: absolute; top: 0px; left: -45px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#comments > ol > li > .comment-body > .comment-author .avatar { left: -65px; }
#comments ol li .comment-author .fn { font-style: normal; }
#comments ol li .comment-author .vip { display: inline-block; width: 16px; height: 16px; margin-left: 2px; overflow: hidden; background: url(images/vip.png) no-repeat; vertical-align: text-top; }
#comments ol li .comment-author b.user { background-position: -16px 0; }
#comments ol li .comment-body p { margin: 8px 0 0; }
#comments ol li .comment-footer a { color: #777; opacity: 0.5; transition: opacity 0.15s linear; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; }
#comments ol li .comment-footer a:hover { color: #777; opacity: 1; text-decoration: none; }
#comments ol li .comment-footer .reply a { padding-left: 18px; background: url(images/reply.png) no-repeat; }

/** #comment_form */
#comment_form > p { position: relative; }
#comment_form > p > label { position: absolute; top: 1px; left: 1px; width: 40px; height: 27px; padding: 2px 0 2px 7px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: #FAFAF7; -webkit-box-shadow: 0px 0px 5px rgba(234, 231, 226, 0.1); -moz-box-shadow: 0px 0px 5px rgba(234, 231, 226, 0.1) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) inset; line-height: 27px; }
#comment_form input[type="text"], #comment_form input[type="email"], #comment_form input[type="url"], #comment_form textarea { display: block; width: 42%; }
#comment_form input[type="text"], #comment_form input[type="email"], #comment_form input[type="url"] { padding-left: 50px; }
#comment_form textarea { width: 97%; resize: vertical; }

/** comments-page-nav */
#comments ol.page-navigator { margin: 20px 0; }
#comments ol.page-navigator li { margin-top: 0; padding: 0; border-top: none; }


/* ------------------
 * Footer
 * --------------- */
#footer { overflow: hidden; background: #515151; }
#ancillary { position: relative; width: 900px; margin: 0 auto; padding: 40px 39px; overflow: hidden; border: 1px solid #fff; border-top: 1px solid #E8E8E8; background: #fafaf7; }
.four-columns { float: left; width: 195px; margin-right: 40px; }
.four-columns:last-child { margin: 0; }
#footer h3, #footer h3 a { margin: 0; padding-bottom: 7px; font-style: normal; font-size: 13px; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }
#footer ul { list-style: none; margin-left: 0px; text-decoration: none; }
.blog-posts ul li a, .blog-categories ul li a, .blog-misc ul li a { display: block; width: 195px; padding: 6px; border-bottom: 1px dotted #E2E2E2; color: #989898; text-decoration: none; }
.blog-comments ul li { position: relative; padding: 6px 6px 6px 38px; border-bottom: 1px dotted #E2E2E2; }
.blog-comments ul li img { position: absolute; top: 12px; left: 0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.blog-comments ul li img:hover { opacity: 0.6; }
.blog-comments .ds-time { margin-left: 5px; color: #ABABAB; font-size: 10px; }
.tagcloud { padding-top: 12px; }
.size-5 { font-size: 12pt; }
.size-10 { font-size: 16pt; }
.size-20 { font-size: 20pt; }
.size-30 { font-size: 24pt; }
#copyright p { margin: 21px auto; color: #999; font: 10px "microsoft yahei"; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
#copyright a { color: #828282; }


/* ------------------
 * Other
 * --------------- */
.alignleft { float: left; margin-right: 10px; margin-bottom: 15px; }
.alignright { float: right; margin-bottom: 15px; margin-left: 10px; }
.aligncenter { text-align: center; }
.clear { clear: both; }
.double-line { display: block; width: 100%; height: 1px; border-top: 1px solid #ebebeb; border-bottom: 1px solid #f5f5f5; font-size: 1px; }
.post ul.imglist li { list-style: none; margin: 7px 0; padding-left: 25px; background: transparent url(images/arrow.png) no-repeat 0 .2em; line-height: 18px; }

/* Elements */
input[type="text"], input[type="email"], input[type="url"] { width: 300px; height: 27px; padding: 2px 0 2px 5px; border: 1px solid #e2e2e2; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #777; font-size: 12px; line-height: 23px; }
textarea { width: 290px; height: 150px; padding: 7px; border: 1px solid #e2e2e2; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #777; font-size: 12px; font-family: Arial; }
input, textarea { -moz-box-shadow: 0px 0px 5px rgba(234, 231, 226, 0.1) inset; -webkit-box-shadow: 0px 0px 5px rgba(234, 231, 226, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) inset; }
input:focus, textarea:focus { border-color: rgba(82, 168, 236, 0.8); box-shadow: none; }
blockquote { padding: 13px 20px; background: url(images/quote.png) no-repeat scroll top left; color: #656565; font: italic 17px "Droid Serif", Georgia, "Times New Roman", Times, serif; }
blockquote p { margin: 0px; margin-left: 20px; padding:15px; padding-top: 0px; border-left: 1px solid #f0f0f0; line-height:1.7em; }
pre, code { font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "Courier New", monospace, serif; }
pre { margin: 15px 0; max-height: 500px; padding: 1em; overflow: auto; border: 1px dashed #FFC463; background: #FFEFC6; line-height: 1.5; }
code { padding: 0 3px; border-bottom: 1px dashed #FFC463; background: #FFEFC6; }
.highlight1 { padding: 1px 3px; background: #FDF8AD; color: #777; }
.highlight2 { padding: 1px 3px; background: #909090; color: #FFF; }
.info-box, .note-box, .tip-box, .error-box, tip-box { margin: 20px 0px; padding: 12px 15px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: #eee; font-size: 12px; }
.info-box { border: 1px solid #8ed9f6; background: #ddf3fc; color: #2e6093; }
.note-box { border: 1px solid #ffeb70; background: #fff8cb; color: #985d00; }
.error-box { border: 1px solid #ff8c8c; background: #ffdede; color: #cd0a0a; }
.tip-box { border: 1px solid #b7db58; background: #ecffb9; color: #5d791b; }

/* Buttons */
.button, #submit { display: inline-block; padding: 9px 22px; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px rgba(0, 0, 0, .1); background: url(images/button_bg.png) repeat-x top; opacity: 1; color: #fff; font: 13px/ 100% Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); cursor: pointer; }
.button:hover, #submit:hover { text-decoration: none; opacity: 0.9; }
.button:active, #submit:active { position: relative; top: 1px; opacity: 1; }
input.button { padding: 4px 20px; border-width: 0px; line-height: 20px; }
#submit { padding: 7px 20px; box-shadow: none; }

/* Table */
table { width:100%; margin: 20px 0; border-collapse: collapse; }
table th { padding: 8px; border-bottom: 2px solid #939393; background: #FAFAF7; color: #686868; font-weight: normal; font-size: 13px; text-align: center; }
table td { padding: 9px; border-bottom: 1px solid #D8D8D8; }
table td:hover { background: #faf9f7; }
table th:hover { border-color:#D74A38; }
tfoot td { border-bottom: 0px; }

/** shangxia */
#shangxia { display: block; position: absolute; top: 55%; right: 51%; margin-right: -535px; }
#shang, #comt, #xia{ position: relative; width: 29px; height: 25px; margin: 10px 0 0; background: url(images/slide.png) no-repeat; cursor: pointer; }
#comt { height: 32px; background-position: center -30px; }
#xia { background-position: center -68px; }