/*
Theme Name: BatikFolio
Theme URI: http://gunawanrudy.com/
Description: WordPress + Work-a-Holic + Gunawan Rudy
Version: 1.0
Author: Gunawan Rudy
Author URI: http://gunawanrudy.com/
Tags: minimalistic, clean, fixed width, batik, ethnic, three column, two column, separate blog, portfolio, grid, indonesia, wayang
*/

/* load 960 framework */
@import url("library/960/reset.css");
@import url("library/960/text.css");
@import url("library/960/960.css");

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; } 
blockquote, q { quotes: "" ""; }

/* global styles */
body { background: url(images/bg.jpg) repeat; margin: 20px 0; color: #666; }
h1,h2,h3,h4,h5 { color: #555; font-family: 'Arial Narrow',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; letter-spacing:-0.5px; }
a { text-decoration: none; border-bottom: 1px solid #DFDFDF; color: #21759B; }
a:hover { border-bottom: 1px solid #D54E21; color: #D54E21; }
abbr, acronym { border-bottom: 1px dotted #888; cursor: help; }
h4 { font-size: 18px; margin: 0; padding: 0; color:#666; text-transform: uppercase; }
small { font-size: 10px; color: #999; text-transform: uppercase; }
strike { color: #888; }
blockquote { margin: 10px 20px; padding: 5px 10px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, Serif; color: #888; }
blockquote.left { width: 160px; margin: 0 10px 5px 0; font: 1.5em/1.5em Georgia, 'Times New Roman', Times, Serif;	text-align: left; color: #888; padding: 0 !important; float: left; }
blockquote.right { width: 160px; margin: 0 0 5px 10px; font: 1.5em/1.5em Georgia, 'Times New Roman', Times, Serif;	text-align: right; color: #888; padding: 0 !important; float: right; }

/* commands */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.blue { color: #21759B; }
.orange { color: #D54E21; }
.hidden { display: none; }

/* headers */
#header { margin-top: 0px; margin-bottom: 15px; }
#header #logo { float: left; }
#header h1 { margin:0 ;text-transform: uppercase; font-size: 27px; padding: 0; line-height: 1; font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; font-weight: bold; letter-spacing: -1px; }
#header h1 a, #header h1 a:hover { background:url(images/header.png) no-repeat bottom left; text-indent: -999em; width:400px; height:100px; display: block; color: #444; border: none; }
#header .description  { color:#949494; font-family: Georgia, Times; font-style: italic; font-size: 16px; display: none; }

/* intro text */
#introduction h2 { font-weight: normal; font-size:30px; font-family: Georgia, Times; margin: 0; padding:0; }
#introduction h3 { font-weight: normal; line-height: 1.3; color: #888; font-size: 18px; font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; margin: 0; letter-spacing: 0px; }
#introduction img { padding:7px; background: #FFF; border: 1px solid #EEE; margin: 8px 6px 0 0; }

/* twitter */
#twitter { background:url(images/twitter.gif) bottom left no-repeat; font-size: 12px; color: #888888; padding: 4px 0 2px 36px; margin: 5px 0 15px 0; }
#twitter abbr { font-style: italic; font-size: 11px; border-bottom: none; }

/* navigation */
.menu { text-transform: uppercase; margin: 84px 0 0 0; padding:0; list-style: none; font-size: 1em; text-align: left; }
.menu a { margin-bottom: 2px; display: block; position: relative; padding: 0; text-decoration: none; border: none; font-size: 12px; font-weight: bold; color: #666; }
.menu a:hover { margin-bottom: 0px; border-bottom: 2px solid #666; color: #666; }
.menu { line-height: 1.0; float: right; margin-bottom: 1em; font-size: 11px; }
.menu ul { position: absolute; top: -999em; width: 10em; }
.menu ul li { width: 100%; }
.menu li { float: left; position: relative; border: none; margin-left: 15px; }
.feed { padding-right: 11px; height: 12px; background:url(images/feed.png) right center no-repeat; }
.feed:hover { margin-bottom: 0px; border-bottom: 2px solid #666; color: #666; }
.menu .feed a:hover { border: none; }
li.alert a { color: #D54E21; }
.menu li.alert a:hover { margin-bottom: 0px; border-bottom: 2px solid #D54E21; color: #D54E21; }

/* journals */
#journal, .journal { text-align: justify; }
#journal img, .journal img { padding: 7px; background: #FFF; border: 1px solid #EEE; margin: 3px 2px 4px 0; }
#journal h3, .journal h3 { margin: 10px 0 0 0; font-weight: normal; line-height: 1.1; font-size: 22px; letter-spacing: 0px; text-transform: uppercase; font-family: 'Calibri','Arial Narrow',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; }
#journal h3 a, .journal h3 a { border: none; }
#journal .subtitle { margin: 2px 0 2px 0; font-weight: bold; letter-spacing:-0.5px; font-size: 14px; font-family: 'Arial narrow',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; text-transform: uppercase; color: #707070; }
#journal .subtitle p { margin: 0; }
.plus { color: #999; text-align: right; margin: 0 10px 0 2px; text-transform: uppercase; font-weight: bold; display: block; font-size: 11px; font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; }
.more-journal { margin: 10px 10px 15px 5px; text-align: right; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.more-journal a, .more-gallery a { padding: 2px 4px 2px 4px; margin: 2px; border: 1px solid #EEE; color: #888888; background-color: #FFF; }
.more-journal a:hover, .more-gallery a:hover { border: 1px solid #DFDFDF; color: #FFF; background-color: #D54E21; }
.more-gallery { margin: 0px 0px 15px 5px; text-align: right; font-size: 12px; font-weight: bold; text-transform: uppercase; }
#journal ul { margin: 40px 0 0 0; }
#journal ul li { font-size: 13px; color: #777; display: block; list-style: none; border-bottom: 1px solid #DDD; margin:0 0 8px 0;padding: 0 0 8px 0; font-weight: bold; font-family: 'Arial Narrow',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; }
#journal ul li a { border: none; margin: 0 0 0 5px; }
.journal { margin: 20px 0; }

/* portfolio gallery */
#gallery { padding: 9px; background: #FFF; border: 1px solid #EEE; margin-top: 15px; }
#gallery img { padding: 0; background: none; border: none; margin: 0; }
#gallery-nav { margin: 2px 0 25px 0; padding: 0; list-style: none; }
#gallery-nav li { display: inline; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #eee; color: #888888; background-color: #FFF; }
#gallery-nav li.current { padding: 2px 4px 2px 4px; margin: 2px;text-decoration: none;border: 1px solid #DFDFDF; color: #FFF; background-color: #21759B; }
#gallery-nav li.current a { color: #FFF; }
#gallery-nav li a { color: #888888; font-weight: bold; border: none; padding:5px; }
#gallery-nav li a:hover  { color: #FFF; }
#gallery-nav li:hover { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #DFDFDF; color: #FFF; background-color: #D54E21; }
#gallery-nav li:hover a { color: #FFF; }

/* content */
#content h2 { text-transform: uppercase; font-size: 20px; margin-bottom: 15px; font-weight: bold; }
#content div.portfolio{ background: #FFF url(images/thumb-bg.jpg) 8px 8px no-repeat; margin-bottom: 22px; }
#content div.portfolio  a.thumb { display: block; position: relative; overflow: hidden; height: 134px; padding: 15px; color: #333;border: none; line-height: 1.2; border: 1px solid #EEE; }
#content div.portfolio h4 { position: relative; }
#content div.portfolio a:focus, #content div.portfolio a:hover { text-decoration: none; }
#content div.portfolio img { position: absolute; top: 7px; left: 7px; width: 284px; height: 150px; border: 0; z-index: 3; }
#content div.portfolio span.title { position: absolute; bottom: 0; left: 0; padding:20px 20px 38px 25px; }
#content div.portfolio span.client { position: absolute; bottom: 0; left: 0; margin: 0 20px 20px 25px; font-size: 12px; color:#6A6A6A; }
#content div.portfolio span.client a { font-size: 12px; border: none; color: #6A6A6A; }

/* widgets */
h3.sub { margin-bottom: 7px; font-weight: bold; text-transform: uppercase; }
.item ul li { display: block; list-style: none; border-bottom: 1px solid #DDD; margin: 0 0 8px 0; padding: 0 0 8px 0; }
.item ul li a { border: none; font-weight: bold; }
.item dt { font-weight: bold; float: left; width: 22px; margin: 1px 0; clear: left; }
.item dd { margin: 3px 0; }
.portfolio p { margin: 0; padding: 0; line-height: 1.2; font-style: italic; font-size: 12px; }
.item h4 { color: #666; margin-bottom: 10px; }
.textwidget { margin-bottom: 15px; font-size: 12px; }
.item .comment-name { font-weight: bold; margin: 0px; line-height: 1em; padding: 4px 0 0 0; display: block; }
.item .comment-excerpt { font-size: 0.9em; font-style: italic; }

/* content area */
.entry { margin: 15px 0; }
h2.entry-title { margin: 10px 0 0 0; font-weight: normal; line-height: 1.1; font-size: 26px; letter-spacing: 0px; }
.entry-plus { color: #999; text-transform: uppercase; font-weight: bold; display: block; font-size: 11px; font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; }
.entry img { padding: 7px; background: #FFF; border: 1px solid #EEE; margin: 4px; }
.postmetadata { font-size: 12px; }
hr.dotted { border: none; border-bottom: 1px dotted #CCC; margin: 15px 0 10px 0; }
.pagetitle, .post h2 { margin-top: 10px; }
.post h3 a{ font-weight: bold; } 
.tag-info { margin-top: 30px; font-size: 11px; text-transform: uppercase; }
.credit { font-size: 11px; color: #888; font-style: italic; margin-top: 25px; }

/* form elements */
textarea { border: 1px solid #DDD; padding:6px; background: url(images/comment-bg.png); color: #666; }
textarea#comment { width: 605px; }
input#author, input#email, input#url, input#keycode, input#s { border: 1px solid #DDD; padding:6px; background: url(images/comment-bg.png); color: #666; }
input#submit  { font-size: 12px; text-transform: uppercase; font-weight: bold; letter-spacing: 3px; padding: 2px 4px 2px 4px; text-decoration: none; border: 1px solid #eee; color: #FFF; background-color: #21759B; font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; }
input#submit:hover { text-decoration: none; border: 1px solid #DFDFDF; color: #FFF; background-color: #D54E21; }
.input-submit { float: right; }
.subscribe-to-comments { float: left; }
.subscribe-to-comments small { font-size: 12px; color: #999; text-transform: uppercase; }
#searchform { margin-bottom: 20px; }

/* footers */
.copyright { text-transform: uppercase; font-size: 11px; color: #707070; } 
.unique { text-align: right; }
.branding { font-size: 12px; font-family: Georgia,Times; font-weight: bold; text-transform: uppercase; color:#21759B; }
.gravatar { padding: 7px; background: #FFF; border: 1px solid #EEE; margin: 0 4px 0 0; }
.flickr { text-align: center; margin: 0 0 15px 0; }
.flickr img { height: 75px; width: 75px; padding: 7px; background: #FFF; border: 1px solid #EEE; margin: 0 3px 0 0; }
.flickr a, .socials a { border: none; }
.socials { text-transform: uppercase; font-size: 22px; font-family: 'Arial Narrow',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; letter-spacing: -0.5px; }

/* comments */
#respond h3, h3#comments  { border-bottom: 1px solid #DDD; padding-bottom: 7px; text-transform: uppercase; }
#respond { margin: 20px 0 0 0; }
.commentlist { padding: 0; margin: 0; }
.commentlist li { margin: 20px 0 0px; padding: 10px 0; list-style: none; border-bottom: 1px solid #DDD; }
.commentlist li ul { padding: 0;margin: 0; }
.commentlist li ul li { margin-right: 0px; margin-left: 0px; }
.commentlist li .avatar { float: left; border: 1px solid #EEE; padding: 7px; background: #FFF; margin-right: 5px; }
.commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; }
.commentmetadata { font-size: 11px; }
.children { padding: 0; }
.commentmetadata { margin: 0 0 10px 0; display: block; }
.commentnumber { color: #D7D7D7; font-size: 50px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; letter-spacing: -1.5px; float: right; line-height: 0.7; }
.commentname, .commentname a { letter-spacing:-1px; font-size: 24px; text-decoration: none; font-weight: bold; border: none; line-height: 1.2 }
.comment-plus { color: #999; text-transform: uppercase; font-weight: bold; display: block; font-size: 11px; font-family: Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; }
.comment-plus a { color: #999; border: none; }
.comment-plus a:hover { color: #D54E21; border: none; }
.commentcontent { display: block; margin: 15px 0 0 0; }

/* page navigation */
.wp-pagenavi { margin-bottom: 20px; text-transform: uppercase; text-align: right; font-size: 12px; font-weight: bold; }
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited  { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #eee; color: #888888; background-color: #FFF; }
.wp-pagenavi a:hover { padding: 2px 4px 2px 4px; margin: 2px;text-decoration: none;border: 1px solid #DFDFDF; color: #FFF; background-color: #D54E21; }
.wp-pagenavi .on { padding: 2px 4px 2px 4px; margin: 2px;text-decoration: none;border: 1px solid #DFDFDF;color: #FFF; background-color: #21759B; }

/* socials */
#socials { text-align: center; font-size: 0.9em; color: #999; text-transform: uppercase; margin: 15px 0; }
#socials a { border: none; }
#socials a:hover { text-decoration: none; border: none; }
.btnfacebook { background: url(images/facebook.gif) 0 2px no-repeat;  padding-left: 12px; }
.btngoogle { background: url(images/google.gif) 0 2px no-repeat; padding-left: 12px; }
.btndelicious { background: url(images/delicious.gif) 0 2px no-repeat; padding-left: 12px; }
.btndigg { background: url(images/digg.gif) 0 2px no-repeat; padding-left: 12px; }
.btnreddit { background: url(images/reddit.gif) 0 2px no-repeat; padding-left: 12px; }
.btntechnorati { background: url(images/technorati.gif) 0 2px no-repeat; padding-left: 12px; }
.btnstumble { background: url(images/stumble.gif) 0 2px no-repeat; padding-left: 12px; }
.btnplurk { background: url(images/plurk.gif) 0 2px no-repeat; padding-left: 12px; }
.btnlintasberita { background: url(images/lintasberita.gif) 0 2px no-repeat; padding-left: 12px; }
.btntwitter { background: url(images/retweet.gif) 0 2px no-repeat; padding-left: 12px; }

/* misc */
img.browsericon { vertical-align: -15%; border: none; background: none; }
img.flag { vertical-align: -10%; border: none; background: none; }
img.wp-smiley { vertical-align: -25%;  border: none; background: none; padding: 0; margin: 0; }
img#wpstats { display: none; }
.adrotate { margin: 0 10px 10px 0; }