/*
Theme Name: Happy Kiddo Theme
Theme URI: http://skyscraper.com
Description: Elbert's Blog theme by Johnimbong Design. Follow me on twitter:<a href="http://twitter.com/johnimbong">johnimbong.</a>
Version: v1.0
Author: John Imbong
Author URI: http://johnimbong.com
Tags: Comics, Fixed width, Twitter feed, Category navigation, 2 columns, widget-ready, kick-ass
*/

/* .......................................................
===== reset.css =========================================== */
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, code, 
del, dfn, em, img, q, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background:transparent;}
body{line-height:1.5}
table{border-collapse:separate; border-spacing:0}
caption, th, td{text-align:left; font-weight:normal}
table, td, th{vertical-align:middle}
blockquote:before, blockquote:after, q:before, q:after{content:""}
blockquote, q {quotes:""""}

/* I added these myself */
a img {border:none; margin:0; padding:0;}
textarea {overflow:auto;}
ol, ul {list-style:none;}
html {overflow-y:scroll; background-color:#FFF;}
* html body {behavior:url("code/csshover3.htc");}
input, textarea {outline-style:none;} /*remove safari's form outline*/
p {margin:0 0 10px;padding:0; line-height:1.15em;}
/*a {white-space:nowrap;}*/



/* .......................................................
===== typography.css (partial + edited) ================== */
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
table {width:100%;}
.small {font-size:0.83em;}
.hide {display:none;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

/* _global */ 
html {font-family:Arial, Helvetica, sans-serif; font-size:0.81em; color:#333;}
#wrapper {width:800px; margin:0 auto;}
#body {width:608px; float:left; margin-bottom:50px;}
#header, #content, #footer {clear:both;}
h1, h2.h1 {font-family:Helvetica, Arial, sans-serif; color:#ff811c; text-transform:uppercase; font-size:1.85em; font-weight:bold; letter-spacing:-0.02em;}
em {font-style:italic;}
a, a:visited {color:#ff811c; text-decoration:none; font-weight:bold;}
a:hover {color:red;}
.authorstyle {background-color:#ffffe5!important;} 

/* GLOBAL:Sidebar */ 
#sidebar {width:162px; float:left; margin-right:30px;}
#sidebar .primary {background:url(media/sprite-main.gif) center bottom no-repeat #ff811c; padding:20px 0; margin-bottom:20px;}

#navi ul {width:136px; margin:50px auto 40px;}
#navi ul li {border:1px solid #ffaf6e; border-width:0 0 2px;}
#navi ul li.border {border:1px solid #ffaf6e; border-width:2px 0;}
#navi ul li a, #navi ul li a:visited {display:block; width:136px; height:33px; background:url(media/sprite-navi.gif) 0 0 no-repeat;}
#navi ul li.blog a {background-position:0 0;}
#navi ul li.blog a:hover {background-position:0 -33px;}
#navi ul li.books a {background-position:-136px 0;}
#navi ul li.books a:hover {background-position:-136px -33px;}
#navi ul li.comics a {background-position:-272px 0;}
#navi ul li.comics a:hover {background-position:-272px -33px;}
#navi ul li.portfolio a {background-position:-408px 0;}
#navi ul li.portfolio a:hover {background-position:-408px -33px;}
#navi ul li.workshops a {background-position:-544px 0;}
#navi ul li.workshops a:hover {background-position:-544px -33px;}
#navi ul li.contact a {background-position:-680px 0;}
#navi ul li.contact a:hover {background-position:-680px -33px;}
#tweets {width:136px; margin:0 auto; text-align:center;}

#sidebar .secondary {}
#social ul li {float:left; margin-right:3px;}
#social ul li a {display:block; width:16px; height:16px;}
#social ul li a.twitter {background:url(media/ico_twitter.png) 0 0 no-repeat;}
#social ul li a.facebook {background:url(media/ico_facebook.png) 0 0 no-repeat;}
#social ul li a.rss {background:url(media/ico_rss.png) 0 0 no-repeat;}

/* GLOBAL:Header */ 
#header {font-weight:bold; font-family:Helvetica, Arial, sans-serif; margin:-40px 0 40px;}
#header span.letter {display:block; font-size:13.08em; margin-left:-12px; color:#ffa154;}
#header span.text {display:block; text-transform:uppercase; font-size:4.62em; font-weight:bold; margin:-80px 0 0 -4px; color:#ff811c; letter-spacing:-0.07em;}

/* GLOBAL: Portfolio navi*/ 
#portfolio_navi {list-style:none; font-family:Helvetica, Arial, sans-serif; text-transform:uppercase; font-size:1.54em; font-weight:bold; letter-spacing:-0.02em;}
#portfolio_navi ul {float:left; margin:-50px 1px 50px 1px; height:1em; line-height:1em;}
#portfolio_navi .left {border:2px double #ff811c; border-width:0 0 0 2px;}
#portfolio_navi .right {border:2px double #ff811c; border-width:0 2px 0 0;}
#portfolio_navi .leftright {border:2px double #ff811c; border-width:0 2px;}
#portfolio_navi ul._1 {color:#666666; margin-right:-5px;}
#portfolio_navi ul li a {padding:0 10px;}

/* GLOBAL:Post */ 
/*--shortcuts--*/
#content .post {clear:both; padding-bottom:30px; margin-bottom:20px; border:1px dashed #ff811c; border-width:0 0 1px;}
#content .single_blog .post {border:none;}
#content .header p {color:#ff811c; font-family:Helvetica, Arial, sans-serif; font-weight:bold; margin-top:-3px; color:#999;}
#content .post .body {margin-bottom:30px;}
#content .post .footer {position:relative; left:-10px; overflow:auto;}
* html #content .post .footer {height:1%;}
#content .post .footer ul li {float:left; padding:0 10px; height:15px; line-height:1em;}
#content .post .footer ul li span {color:#ff811c;}
#content .post .footer ul li.comments {border:1px solid #666666; border-width:0 1px 0 0;}
#content .post .footer ul li a {text-decoration:none; font-weight:normal;}
#content .post .footer ul li.cat a {font-style:italic;}

#nextprev a {float:left; padding:5px 10px; background:#CCC; color:#FFF; margin-right:10px; -moz-border-radius:.25em; -webkit-border-radius:.2em;}
#nextprev a:hover {background:#ff811c;}

/* GLOBAL:Comments */ 
#comments {border-top:1px solid #ccc; padding-top:10px;}
#comment_list {background:#f1f1f1; border:1px solid #CCC; padding:10px 0; -moz-border-radius:.5em; -webkit-border-radius:.6em;}
#comment_list h3 {color:#666666; font-size:1.38em; padding:0 0 5px 10px;}
#comment_list p.nocomments {margin:0 0 0 10px;}
#comment_list ul li {padding:10px; background:url(media/bg-comment_highlight.gif) center top repeat-x; border:1px solid #CCC; border-width:1px 0; overflow:auto; margin-top:-1px;}
* html #comment_list ul li {height:1%;}
#comment_list ul li.alt {}
#comment_list ul li .gravatar {width:60px; float:left;}
#comment_list ul li .info {float:left; width:508px; clear:right; margin-left:10px;}
#comment_list ul li .info .header {color:#666666;}

#comment_form  {background:#f1f1f1; margin-top:10px; padding:10px 0 20px 10px; -moz-border-radius:.5em; -webkit-border-radius:.6em; list-style:none; overflow:auto;}
#comment_form h4 {font-size:1.38em; color:#666666; margin-bottom:10px;}
#comment_form ul {margin-left:20px; overflow:auto;}
* html #comment_form ul {height:1%;}
#comment_form ul li {margin:8px 0;}
#comment_form label span.label {display:block; float:left; width:80px; font-weight:bold;}
#comment_form label input, #comment_form label textarea {border:1px solid #CCC; background:#FFF; margin:1px; padding:5px 3px;}
#comment_form label input:hover, #comment_form label textarea:hover {margin:0; border:2px solid #ff811c;}
#comment_form label input {width:200px;}
#comment_form label textarea {width:400px; height:100px;}

#comment_form li.sendform {margin:7px 0 0 318px;}
* html #comment_form li.sendform {margin-left:320px;}
#comment_form li.sendform input {width:80px; height:24px; background:url(media/sprite_btn.gif) 0 0 repeat-x; color:#FFF; font-weight:bold; margin-left:5px; padding:0; cursor:pointer;}
#comment_form li.sendform input.reset {background-position:center -24px; border:1px solid #999;}
#comment_form li.sendform input.submit {background-position:center top; border:1px solid #bf6215;}
#comment_form li.sendform input:hover {background-position:center -47px; border:1px solid #b30000;}

/* GLOBAL:Footer */ 
#footer {padding:20px 0 50px; text-align:right; overflow:auto;}
* html #footer {height:1%;}
#footer ul li {float:left; padding:0 10px; height:15px; line-height:1em;}
#footer ul li.border {border:1px solid #999; border-width:0 1px 0 0;}
#footer .copyright {font-size:0.77em; color:#999; float:right;}
#footer a, #footer a:visited {color:#999;}
#footer a:hover {color:#ff811c;}