/*
Theme Name: My theme
Description: Edited from Wu-Wei
Author: Joseph Sia
Tags: black, white, fixed-width, two-columns, custom-colors, threaded-comments, sticky-post

License: GNU General Public License (GPL) version 3

*/

/*** Reset Styles ************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, acronym, abbr, blockquote, pre, a, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; vertical-align:baseline; background:transparent;}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration: line-through;}
table {border-collapse:collapse; border-spacing:0;}
a img {border:none;}


/*** General *****************************************************************/

body {background-color:#ffffff; background: url(images/background.jpg) repeat-y center; color:#252525; margin:0; padding:0; text-align:center; font-size:11px; line-height:1.5em; font-family: Verdana, Arial, Helvetica, sans-serif;}

p {line-height:1.5em; padding-bottom:18px;}

a:link, a:visited {color:#8b7866; text-decoration:none;}
a:hover {background-color:#ae9b79; color:#fcece8;}
a.nohoverbg:hover { background-color:transparent; }

.page img, .post img { margin-bottom:20px; padding:5px; background-color:#fbeee8; border:1px solid #bba9a1;}

.center-column {width:851px; margin:0px auto; text-align:left;}

.center-column-header { position:relative; width:851px; height:315px; margin:0px auto; text-align:left; background-image:url('images/header.jpg'); }

/** the position:absolute property here works because the parent div .center-column-header has its position assigned as relative **/
a#imgmap { position:absolute; left:50px; top:187px; width:202px; height:61px; }
a#imgmap:hover { background-color: transparent; }

.wp-caption { text-align: center; }
.wp-caption img { padding:5px; margin-bottom:0px; background-color:#fbeee8; border:1px solid #bba9a1; }
.wp-caption p.wp-caption-text { font-size:11px; line-height:15px; color:#5d5a58; padding:0 13px 20px 13px; margin:-3px 0 0 0; }

.alignright {float:right;}
.alignleft {float:left;}
.aligncenter, div.aligncenter {display:block; margin-left:auto; margin-right:auto;}


.clearboth {clear:both;}


.navigation {text-align: center; height:36px; margin:0px; border-top:1px solid #dbc9c1; position:relative;}
.navigation #arrowleft a {
	margin:0px; padding:0px;
	width:32px; height:32px;
	background-image: url(images/arrowleft.gif);
	position:absolute;				/*** absolute works here because the parent class .navigation has pos:relative ***/
	left:325px; top:2px; }  		/*** #pagenum's location - #arrowleft's width - spacing = 392-32-35 ***/
.navigation #arrowleft a:hover { background-image: url(images/arrowleft2.gif); background-color:transparent;}

.navigation #arrowright a {
	margin:0px; padding:0px;
	width:32px; height:32px;
	background-image: url(images/arrowright.gif);
	position:absolute;
	left:494px; top:2px; }			/*** #pagenum's loc + #pagenum's width + spacing = 392+67+35  ***/
.navigation #arrowright a:hover { background-image: url(images/arrowright2.gif); background-color:transparent;}

.navigation #pagenum {
	width:67px; height:33px;
	background-image:url(images/menubg.gif);
	border-bottom:3px solid #7d7a78; 
	position:absolute;
	left:392px; }					/*** (centre-column/2) - (#pagenum's width/2) = (850/2) - (67/2) ***/
.navigation .line1 { position:relative; top:-4px; font-weight: bold; color:#7d7a78;}
.navigation .line2 { font:25px Century Gothic; font-weight:default; color:#6d6a68; position:relative; top:-12px; }



.pagetitle {padding:0.333em 0; font-size:1em; color:#959ea1; position:relative; border-top:1px solid #d1d9dc;}
.pagetitle span {position:absolute; left:240px;}

.search { position:relative; top:3px; }
.search #search-button { position:relative; top:-1px; height:20px; width:20px; background: url(images/searchbutton.gif) no-repeat; vertical-align:middle;}
.search #search-button:hover { background: url(images/searchbutton2.gif) no-repeat; }
.search #search-form { position:relative; top:3px; border:0; padding-left:10px; padding-top:3px; margin:0; width:122px; height:23px; background:url(images/searchform.gif) no-repeat; font-size:11px; color: #5d5a58; vertical-align:middle;}
.search #search-form:focus { background:url(images/searchform2.gif) no-repeat; }


/*** Header ******************************************************************/

ul#menu {margin:0; padding:0; position:relative; width:450px; top:282px; left:298px;}
ul#menu li {font-size:12px; float:left; text-align:center; margin-right:0px; padding:0; display:block; list-style:none;}
ul#menu li a:link, ul#menu li a:visited {display:block; padding:5px 0px 8px 0; width:80px; color:#7d7a78; font-weight:bold; text-decoration:none; border-top:3px solid #fbeee8; text-transform:lowercase;}
ul#menu li a:hover {border-top:3px solid #e4ac73; background-color:transparent; }
ul#menu li a span {font-size:0.833em; color:#d1d9dc; text-transform:lowercase;}
ul#menu li a.selected {border-top:3px solid #7d7a78; background-image:url(images/menubg.gif);}
ul#menu .last {margin-right:0;}

.blog-name {font-size:4em; font-weight:bold; line-height:1em;}
.blog-name a:link, .blog-name a:visited {color:#d1d9dc; text-decoration:none;}
.blog-name a:hover {color:#ff8a00;}

.description {margin-top:0.5em; font-size:1.5em; color:#6a797d;}

#header {padding:2em 0;}


/*** Posts and Pages *********************************************************/

/* styling for dates left to entry title*/
.daystyle {
     position:relative;
     text-align:right;
     font:28px Century Gothic, Helvetica, Segoe UI, Lucida Sans Unicode, Verdana, sans serif;
     line-height:21px;
     color: #bba9a1;
}

.monthstyle {
     text-align:right;
     font:28px Century Gothic, Helvetica, Segoe UI, Lucida Sans Unicode, Verdana, sans serif;
     font-weight:bold;
     line-height:18px;
     color: #bba9a1;
}

.yearstyle {
     position:relative;
     text-align:right;
     font:15px Century Gothic, Helvetica, Segoe UI, Lucida Sans Unicode, Verdana, sans serif;
     line-height:13px;
     color: #bba9a1;
}



.post, .page {border-top:1px solid #dbc9c1; padding-top:20px; padding-bottom:20px;}
* html .post, * html .page {height:1%;} /* Fix for IE6 */

.sticky {border-top:3px solid #d1d9dc;}

h1 {font-size:22px; font-weight:normal; font-family: Calibri, Trebuchet MS, Verdana, Lucida Grande, Century Gothic; padding-bottom:30px; color:#9b8981;}
h1 a:link, h1 a:visited {color:#6d6a68; text-decoration:none; font-weight:bold;}
h1 a:hover {color:#6d6a68; background-color:transparent;}

h4 { font-size:16px; font-weight:normal; padding-bottom:18px; }

.post-info {float:left; text-align:right; color:#9b8881; font-size:11px; width:115px; margin:0 25px 0 0; line-height:1em}

.tagsection { font-size:9px; }
.tagsection a { font-size: 11px; }

.timestamp {float:left; font-size:1.5em; color:#959ea1;}

.comment-bubble {float:right; margin:20px 2px 0 0; font: 15px Century Gothic, Helvetica, Arial; text-align:center;}
.comment-bubble a:link, .comment-bubble a:visited {color:#8d8a88; text-decoration:none; display:block; width:36px; height:32px; background:url(images/comment-bubble.gif) no-repeat; padding-top:2px;}
.comment-bubble a:hover {color:#f8eee8; background:url(images/comment-bubble2.gif) no-repeat;}

.post-content {float:left; width:590px; border:0px solid black; padding-top:3px; padding-bottom:20px; overflow:visible;}

blockquote {background:url(images/blockquote.gif) no-repeat top left; margin-left:30px; padding-left:30px; padding-top:4px;}

.post-content ul, .post-content ol {margin:0 0 1.5em; padding:0; font-size:1.167em;}
.post-content ul li, .post-content ol li {margin-left:3em; padding-left:0em; line-height:1.5em;}
.post-content ul li ul, .post-content ol li ol, .post-content ul li ol, .post-content ol li ul {font-size:1em;}

pre {white-space:pre-wrap; word-wrap:break-word; margin:0 0 1.5em;}

dl {margin:0 0 1.5em;}
dt {font-weight:bold; font-size:1.167em;}
dd {font-size:1.167em; margin-left:8.571em;}

acronym, abbr {border-bottom:1px dotted #333;}

hr {color:#d1d9dc; height:1px; background-color:#d1d9dc; border:0;}

.more-link { margin-top:1.5em; font-weight:bold; }

.post-meta-data {position:relative; margin:0 0 0 10em; height:100%; padding:0.333em 0; border-top:1px solid #d1d9dc;}
.post-meta-data span {position:absolute; left:10em; top:0.333em;}

.gallery {margin:0 0 1.5em 0; padding:0;}
.gallery-item {float:left; margin:10px 0 0 0; text-align:left; padding:0;}
.gallery img, .gallery a img {border:solid 1px #D9D9D9; background:#ffffff; padding:4px; margin:0;}
.gallery a:hover img {border-color:#666666; background:#fff;}
.gallery-caption {margin:0 0 1.5em 0; font-size:0.833em; line-height:1.167em; color:#666;}

table {margin:1.5em 0; padding:0; border-collapse:collapse;}
table th {padding:0.5em; border:1px solid #d1d9dc; background-color:#f8f8f8;}
table tr {margin:0; padding:0;}
table tr td {padding:0.5em; border:1px solid #d1d9dc;}

/*** Comments ****************************************************************/

.comment-wrapper { border-top:1px solid #dbc9c1; padding-top:15px; color:#4d4a48;}

.comment-wrapper p { padding-bottom:9px; }  /** because every comment is enclosed in a <p></p> tag and the large bottom-padding is annoying for single paragraph comments **/

h3 {font-size:20px; padding:10px 0 10px 70px; color:#9b8981; font-weight:normal; font-family:Calibri;}

ol.commentlist { border-bottom:1px dotted #bba9a1; }


/** .commentlist li's margin-left defines the indentation for each children comment.  This is reset in .depth-1's margin-left, because don't want to indent the thread-starters too **/
/** depth-1's padding-left is fixed for the thread starter comments, not in this-single-comment because there's no point to push every comment towards the right **/
/** this-single-comment's padding-right is in this-single-comment because it is constant throughout each comment **/

.commentlist li { list-style:none; margin-left:75px; border-top:1px dotted #bba9a1; } 
.commentlist li.depth-1 { margin-left:0px; padding-left:70px; }
.commentlist li .this-single-comment { padding-right: 70px; padding-top:9px; overflow:hidden; }

.commentlist li.bypostauthor { } 
.commentlist li.comment-author-admin { } 


.commentlist .comment-header { padding-bottom:3px; margin-bottom:0px; overflow:hidden; }

.commentlist .comment .avatar-image { display:inline; float:left; min-height:70px; }
.commentlist .comment .avatar-image img { border:0; padding:0; margin:0; }

.commentlist .comment .comments-right-column { overflow:hidden; padding-left: 15px;}


.commentlist li.comment div.vcard { display:inline; position:relative; margin:0; }
.commentlist li.comment div.vcard cite.fn { font: normal bold 17px Calibri; } 
.commentlist li.comment div.vcard div.says {  }
.commentlist li.comment div.vcard cite.fn a:link, .commentlist li.comment div.vcard cite.fn a:visited { color:#5b4836; }
.commentlist li.comment div.vcard cite.fn a:hover { color:#fcece8 }

.commentlist li.comment div.comment-meta { display:inline; margin:0; } 

.commentlist li.comment .comment-text { }

.thread-even { background-color:#fce7de; }
.thread-odd { background-color: transparent; }


.commentlist .comment .reply { display:inline; position:relative; font-weight:bold; font-size:16px; font-family:Calibri;}

/** #respond under #respond-container (i.e. when not replying to a specific comment) will not show a top border, and has different paddings **/
#respond-container #respond { border:0px; margin:0; padding-top:30px; padding-left:70px; }
#respond-container .cancel-comment-reply { display:none; }

/** note respond has to be id not class in order for thread-replying to work **/
/** #respond's margin-left is defined as avatar-size + .comments-right-column's padding-left for good alignment */
#respond { 
	margin-left:75px;
	padding-top:10px; padding-bottom:20px;
	border-top:1px dotted #bba9a1; }

/** the h3 for #respond is inline so that "cancel reply" can be displayed beside it. Padding is 0 to reset the one defined by the first h3 after comment-wrapper **/
#respond h3 { display:inline; padding:0; }
.cancel-comment-reply { display:inline; font-weight:bold; font-size:16px; font-family:Calibri; }

#respond p { width: 500px; padding:15px 0 15px 0; }
#commentform { width:500px; padding-top:10px; overflow:hidden;}

.nocomments {border-top:1px solid #d1d9dc; padding:1em 0 0 8.571em;}

.form-field { font-weight: bold; padding-bottom:6px; text-align:right; }

.form-field label { position:relative; vertical-align:top; top:3px; color:#7d7a78; }
.form-field span { padding-left:12px; border:0px solid black;}

.form-field #author, .form-field #email, .form-field #url { background-color:#fefaf8; border:2px solid #edbfa9; padding:3px; font-size:11px; line-height:1.5em; font-family: Verdana; color:#4d4a48; width:400px;}
.form-field #author:focus, .form-field #email:focus, .form-field #url:focus { border:2px solid #cd9f89; }

.form-field span textarea#comment { background-color:#fefaf8; border:2px solid #edbfa9; width:400px; height:160px; font-size:11px; line-height:1.5em; font-family: Verdana; padding:3px; color:#4d4a48;}
.form-field span textarea#comment:focus { border:2px solid #cd9f89; }

.submit-button { }


/*** Sidebar + Widgets *******************************************************/

#bottom-section {
border-top:2px solid black; background: url(images/bottomgrad.jpg) bottom center no-repeat; }


.center-column-sidebar {width:665px; margin:0px auto; padding-top:30px; text-align:left; overflow:hidden; font-family:Verdana; border:0px solid black;}


#sidebar li {display:inline; width:195px; margin:0 13px; overflow:hidden; float:left; list-style:none; font-size:12px; border:0px solid black; }
#sidebar li h2 {font-size:22px; color:#ab9991; padding:8px 0; font-family:Arial, Trebuchet MS; display:none;}

#sidebar #tag_cloud { text-align:center; padding-top:21px; line-height:1.9em; }
#sidebar #tag_cloud a { font-family: Arial; color:#c28546; letter-spacing: 2px; }
#sidebar #tag_cloud a:hover { background-color:#e2a566; color:#f8e3c6; }
#sidebar #tag_cloud a:hover { background-color:transparent; color:#805034; }
#sidebar #tag_cloud .wp-tag-cloud li { list-style:none; margin:0px; }

#sidebar #link_love { padding-top:18px;}
#sidebar #link_love img {margin:1px 0; padding:0px;}
#sidebar #link_love a:hover { background-color: transparent; }

#sidebar #custom_text { font-family: Verdana; line-height:1.35; text-align:right; padding-top:0px;}
#sidebar #custom_text #linestyle1 { font-size:11.5pt; color: #ab9991; }
#sidebar #custom_text #linestyle2 { font-size:9.5pt; color: #9b8981; }
#sidebar #custom_text #linestyle3 { font-size:8.5pt; color: #8b7971; }
#sidebar #custom_text #linestyle4 { font-size:8pt; color: #7b6961; }
#sidebar #custom_text #linestyle5 { font-size:8pt; color: #6b5951; }



/*** Footer ******************************************************************/

#footer {padding-top:30px; text-align:center; line-height:normal; font-size:9px; border-bottom:1px solid black;}

.preloadthis { display:none; }