/*
Theme Name: Fiteration
Theme URI: http://jmo.me/theme
Description: 5th gen layout for jmo.me.
Author: JMO
Version: 1.0
Tags: blue, white, two-column
*/

/* Reset default browser CSS. Based on work by Eric Meyer: 
http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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,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; }
body { line-height:1; }
h1,h2,h3,h4,h5,h6 { font-weight:normal; clear:both; }
ol,ul { list-style:none; }
blockquote { quotes:none; }
blockquote:before,blockquote:after { content:''; content:none; }
del { text-decoration:line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse:collapse; border-spacing:0; }
a img { border:none; }
aside,header,nav,section,article,footer { display:block; }
body { font-family:Helvetica, Arial, sans-serif; font-size:14px; background-color: #fff; }
a,a:hover,a:active,a:visited,a:link { text-decoration:none; font-weight:normal; }
a,a:link,a:visited { color:#06f; }
a:hover { color:#0e3; }
a:active { color:#0b3; }
p { font-size:14px; line-height:20px; margin-bottom:12px; }
h1 { font-size:32px; margin-bottom:16px; }
h2 { font-size:26px; margin-bottom:12px; padding-top:10px; }
h3 { font-size:22px; margin-bottom:6px; }
h4 { font-size:16px; font-weight:bold; margin-bottom:6px; padding-top: 10px; }
h1 small {font-size: 14px; float: right;}
blockquote {margin-left: 20px; padding-left: 16px; border-left: 3px solid #111; margin-bottom: 10px; line-height: 20px;}
ol li {list-style-type: decimal;}
code {line-height: 20px; color: #535;}
pre {margin:0 0 10px 20px;}
/* Header */
#header-wrap { padding:0; background-color:#444; margin-bottom:24px; padding-bottom:6px; }
header { padding-top:8px; font-size:32px; width:900px; margin:0 auto; }
header #site-title { width:600px; float:left; font-size:40px; margin-bottom:4px; }
header #site-title h1 { margin-bottom:0; }
header #search-box { width:270px; float:right; }
header #search-box input#s { width:180px; height:20px; color:#666; border:1px solid #ddd; }
header #search-box input#search-button { padding:5px; border:1px solid #ccc; background-color:#eee; }
header #search-box input#search-button:hover,header #search-box input#search-button:active { background-color:#aaa; border-color:#666; }
header #search-box input#search-button:active { background-color:#777; }
#main { width:840px; margin:0 auto 20px; padding:0 20px; }
#main .post-body a:visited,#main .post-title a:visited { color:#999; }
#main #archive-meta p { font-style:italic; font-size:18px; margin-bottom:30px; }
#main article { margin-bottom:30px; }
#main section { width:540px; float:left; }
#main aside { width:220px; float:right; }
#main aside section { width:240px; }
.friend-ads {float: left; width: 220px; margin:0 40px 20px 0;}
#friend-ad span, .friend-ads span { display:block; text-align:center; font-size:12px; color:#aaa; }
#friend-ad img, .friend-ads img { padding:1px; border:1px solid #999; width:216px; height:56px; overflow:hidden; }
.archive #archive-title { float:left; width:540px; }
.archive .special-box { display:none; }
.archive aside span { display:block; margin-bottom:5px; }
#main aside ul,#main aside ul li { display:inline; }
.archive aside .post-date { width:50px; text-align:center; font-weight:bold; border:2px solid #333; float:left; }
.archive aside .post-date span { margin:0; padding:2px; }
.post-date .post-month { background-color:#eee; font-size:20px;}
.post-date .post-day { background-color:#eee; font-size:24px; }
.archive aside .post-date .post-year { background-color:#333; padding-top:4px; }
.archive aside .post-cat,.archive aside .post-tag,.archive aside .post-author,.archive aside .post-edit { float:left; margin-left:14px; font-size:14px; line-height:18px; font-weight:bold; margin-bottom:10px; width:150px; }
.archive aside .post-author {font-weight: normal;}
.archive .post-body img {max-width: 520px; overflow: hidden;}
.post-title {width: 530px; }
h3.post-title {font-size: 18px; line-height: 22px;}
#main aside h3 { padding-bottom:6px; border-bottom:2px solid #111; font-size:24px; }
#main aside ul#menu-pages { display:block; margin-left:10px; }
#main aside ul#menu-pages li { line-height:22px; display:block; font-size:16px; }
#main aside ul#menu-pages li.current-menu-item a { color:#999; }
#main article p,#main article li { font-family:"Lucida Grande", sans-serif; }
#main article .post-body ol,#main article .post-body ul { margin:5px 0 5px 25px; }
#main article .post-body li { list-style-type:square; line-height:18px; margin-bottom:6px; }
#main article .post-body ol li {list-style-type: decimal;}
#main article .post-body .half li {line-height:14px;}
#main article .post-body img {max-width: 530px; overflow: hidden;}
#main article .post-body h2 { border-bottom:2px solid #333; padding-bottom:6px; }
#sidebar #post-meta-box, #sidebar .page-menu { margin-bottom:30px; }
#yarpp { margin-bottom: 20px; }
#yarpp p { margin-bottom:4px; }
#yarpp a img {margin-left: 30px; padding:1px; border:1px solid #999; }
#main aside #yarpp ol, #main aside #yarpp ul { margin:5px 0 5px 25px; display:block; }
#main aside #yarpp li { list-style-type:square; line-height:16px; margin-bottom:6px; display:list-item; }
footer { width:960px; margin:0 auto; }
footer p.nav-top { background-color:#fff; border-bottom:6px solid #444; margin-bottom:0; }
footer a#nav-button { display:block; width:100px; background-color:#444; padding:5px 10px; font-size:16px; }
footer nav { padding:10px; border:6px solid #444; background-color:#e3e3e3;}
footer nav div { float:left; width:160px; margin-bottom: 6px;}
footer nav div.clear { width:100%; clear:both; float:none; }
footer nav div.tags,
footer nav div.pages,
footer nav div.post-types {float:right;}
footer nav div.tags { width:320px; }
footer nav div.years {width: 120px;}
footer nav div.years li {width: 110px;}
footer nav div li { float:left; margin-right:10px; width:140px; font-size:13px; line-height:16px; }
footer nav #nav-search-box { width:280px; }
footer nav #nav-search-box input#sf { width:200px; height:20px; color:#666; border:1px solid #333; }
footer nav #nav-search-box input#nav-search-button { padding:5px; border:1px solid #666; background-color:#999; }
footer nav #nav-search-box input#nav-search-button:hover,footer nav #nav-search-box input#nav-search-button:active { background-color:#aaa; border-color:#666; }
footer nav #nav-search-box input#nav-search-button:active { background-color:#777; }
footer #site-info { margin-bottom:10px; padding-top:10px; text-align:center; }

/* Comments */
#comments {float: left; clear: both; width: 540px;}
#comments ol li {margin-left: 30px; font-size:20px;}
#comments ol li .comment-body {font-size: 16px; line-heigth: 20px;}
#comments .comment-author, #comments .comment-meta {display: inline;}
#comments textarea ,#comments code, #comments label, #comments input, #comments .form-allowed-tags {display: block; float: left;}
#comments label {width: 80px; clear: left;}
#comments .form-submit {clear: both;}
#comments .nocomments {height:0; display:none;}

/* Home */
#main article#about-jmo { width:440px; float:left; margin-bottom:0; }
#main article#about-jmo h2 { text-align:left; border:none; }
#main article#about-jmo h3 { padding-bottom:6px; border-bottom:2px solid #111; font-size:20px; }
#jmo-pic { width:415px; float:right; z-index:900; margin-bottom:-22px; margin-right:-30px; position: relative;}
.half { width:190px; margin-right:30px; float:left; margin-bottom:20px; }

/* Special */
#main .post-title a.sticky:visited, a.sticky { color:#f33; font-size:30px; }
a.sticky:hover,a.sticky:visited,a.sticky:active { color:#b00; }
.post-edit a, .post-edit a:visited  { font-size:14px; color:#f00; }
.special-box { padding:10px 10px 0; border:4px solid #9cf; margin:0 auto 10px; width:500px; }
.clear { clear:both; height:0; }
a.rss, a.rss:visited {color: #f40;} 
a.special {width: 30px; height:20px; bottom: 390px; left: 240px; position: absolute; text-indent: -9999px;}
a.special:hover, a.special:active {background-image: url(imgs/closed-eye.png); bottom: 685px; left: 145px; background-repeat: no-repeat;}


/* iPhone */
@media only screen and (max-device-width: 480px) {
.home p {font-size: 10px; line-height: 14px; }
}