/* Theme Name: Theme URI: Description: This is the main theme for Version: Author: Author URL: http:// Tags: */ /************************************************************************ CSS RESET ************************************************************************/ 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;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}:focus {outline: 0;}ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;} /************************************************************************ COMMON DEFINITION ************************************************************************/ html,body{ background: #4c5151 url(images/blog-bkg-body.jpg) top center repeat-x ;} html,body,#wrapper{ height: 100%;} .clearme:after{ content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0.1em; line-height: 0;} a{ text-decoration: none; } body > #wrapper{ height: auto; min-height: 100%;} #wrapper{ width: 100%; background: url(images/bkg-landing-blog.jpg) top center no-repeat;} /************************************************************************ HEADER ************************************************************************/ #blog #wrapper-header{ background: url(images/bkg-blog-ttl.jpg) top center no-repeat;} #landing #wrapper-header{ background: url(images/bkg-landing-ttl.jpg) top center no-repeat;} #cz4-badge{ position: absolute; top: 30px; left: 405px; width: 122px; height: 122px;} #header{ position: relative; width: 974px; height: 235px; margin: auto;} h1{ position: absolute; top: 67px; left: 24px; width: 336px; height: 64px; text-indent: -9999px; overflow: hidden;} h1 a{ display: block; width: 336px; height: 64px; background: url(images/blog-logo.png) 0 0 no-repeat;} /************************************************************************ HEADER NAVIGATION ************************************************************************/ #nav-header{ position: absolute; top: 69px; left: 395px; width: 580px; height: 60px; background: #fff; -khtml-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #nav-header li{ float: left; height: 28px; padding: 16px 0;} #nav-header li a{ display: block; height: 26px; border-right: 1px solid #ecede7; padding: 2px 14px 0; color: #66a6bb; font: 24px/28px Helvetica, Verdana, Arial, sans-serif; } #nav-header li a:hover{ color: #7f7d73;} #nav-header li a[rel=last]{ border: 0;}/*TEMP*/ li#item01 a{ color: #7f7d73;} /************************************************************************ CONTENT ************************************************************************/ #content{ position: relative; width: 974px; margin: auto; padding-bottom: 100px; } /************************************************************************ CONTENT FIRST POST ************************************************************************/ #wrapper-home-post{ width: 942px; margin: 0 auto 10px;} /************************************************************************ CONTENT FIRST POST TOP ************************************************************************/ #home-post-top{ padding: 0 0 20px; color: #bb9166; font: 30px/32px Helvetica, Verdana, Arial, sans-serif; background: url(images/blog-arrow-home-post.png) bottom left no-repeat; text-shadow: 0 1px 0 #fff;} #home-post-top a{ color: #bb9166;} #home-post-top a:hover{ color: #927150;} #landing #home-post-top a{ color: #363b3b;} /************************************************************************ CONTENT FIRST POST CONTAIN ************************************************************************/ #home-post{ position: relative; width: 882px; padding: 30px 30px 15px; background: #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; min-height: 200px; height: auto !important; height: 200px;} #home-post-date{ width: 250px; text-align: right; height: 12px; overflow: hidden; position: absolute; top: -13px; left: 650px; color: #66a6bb; font: 16px/16px Helvetica, Verdana, Arial, sans-serif; display: block;} #home-post h2{ width: 100%; color: #333731; font: 28px/32px Helvetica, Verdana, Arial, sans-serif; margin: 0 0 15px;} #home-post-content{ color: #666; font: 16px/24px Helvetica, Verdana, Arial, sans-serif;} #home-post-content p{ margin: 0 0 15px;} #home-post-content p img{ border: 1px solid #efefef; padding: 10px; margin: 20px;} #home-post-content a{ color: #666;} #home-post-content a:hover{ color: #333;} #home-post-content-tbl{ float: left; margin: 0 10px 15px 0; width: 165px; height: 165px; padding: 12px; border: 1px solid #efefef;} #home-post-meta{ height: 35px; color: #666; font: 13px/35px Helvetica, Verdana, Arial, sans-serif; text-align: right; background: url(images/blog-shadow-home-post.png) top center no-repeat; padding: 0 15px 0 0; text-shadow: 0 -1px 0 #333;} #home-post-content-tbl2{ float: left; margin: 0 10px 15px 0; width: 130px; height: 130px; padding: 12px; border: 1px solid #efefef;} #home-post-meta a{ color: #8f8f8f;} #home-post-meta a:hover{ text-decoration: underline;} /************************************************************************ CONTEN OLDER POST ************************************************************************/ ul#home-older-post{ padding: 0 0 0 3px;} ul#home-older-post li{ float: left; margin: 0 0 45px;} .post-box{ position: relative; width: 408px; padding: 15px 15px 5px; margin: 0 22px 0 23px; background: #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.8); -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.8); box-shadow: 0 1px 6px rgba(0,0,0,0.8);} .home-older-post-date{ height: 12px; overflow: hidden; position: absolute; top: -13px; left: 15px; color: #66a6bb; font: 16px/16px Helvetica, Verdana, Arial, sans-serif; display: block; text-shadow: 0 -1px 0 #333;} #home-older-post h3{ width: 100%; color: #333731; font: 20px/25px Helvetica, Verdana, Arial, sans-serif; margin: 0 0 5px;} #home-older-post h3 a{ color: #333731;} #home-older-post h3 a:hover{ color: #666;} #home-older-post-content{ color: #999; font: 13px/20px Helvetica, Verdana, Arial, sans-serif;} #home-older-post-content a{ display: block; color: #999;} #home-older-post-content a:hover{ color: #666;} #home-older-post-content-tbl{ float: left; margin: 0 10px 10px 0; width: 130px; height: 130px; padding: 12px; border: 1px solid #efefef;} #home-older-post-content p{ margin: 0 0 10px;} .home-older-post-meta{ height: 22px; color: #666; font: 12px/22px Helvetica, Verdana, Arial, sans-serif; text-align: right; padding: 0 35px 0 0; text-shadow: 0 -1px 0 #333;} .home-older-post-meta a{ color: #8f8f8f;} .home-older-post-meta a:hover{ text-decoration: underline;} /************************************************************************ CONTENT SINGLE ************************************************************************/ .box-link{ position: absolute; top: -40px; left: 0; padding: 7px 5px 5px; margin: 0 0 20px 26px; width: 50px; height: 16px; background: #fff; text-align: center; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;} .box-link a{ color: #66a6bb; font: 14px/16px Helvetica, Verdana, Arial, sans-serif;} .box-link-bottom{ padding: 7px 5px 5px; margin: 0 0 30px 26px; width: 50px; height: 16px; background: #fff; text-align: center; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;} .box-link-bottom a{ color: #66a6bb; font: 14px/16px Helvetica, Verdana, Arial, sans-serif;} .author{ font: 14px/14px Helvetica, Verdana, Arial, sans-serif; color: #bb9166; text-align: right; padding: 0 15px 0 0;} #home-post-content ul{ margin: 0 20px 15px; list-style: disc; padding: 10px 0 0;} #landing #home-post-content ul{ list-style: none;} /* COMMENTS */ ol.commentlist{ margin: 10px 0 10px; clear: both;} li.comment{ background: #fff; border: 1px solid #e5e5e5; margin: 0 0 10px; padding: 10px; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } li.comment img.avatar{ float: right; border: 1px solid #e5e5e5;} span.says{ display: none;} .fn,.fn a{ float: left; font: 18px/28px Helvetica, Verdana, Arial, sans-serif; color: #66a6bb; 0 0;} .fn a:hover{color: #7f7d73;} .comment-meta{ float: left; margin: 2px 0 0 15px;} .comment-meta a{font: 12px/24px Helvetica, Verdana, Arial, sans-serif; color: #ccc;} li.comment p{ clear: both; font: 14px/20px Helvetica, Verdana, Arial, sans-serif; color: #383d3d;} li.comment p a{ color: #66a6bb;} .loggedas{ font: 14px/20px Helvetica, Verdana, Arial, sans-serif; color: #383d3d;} .loggedas a{ color: #66a6bb;} .loggedas a:hover{ color: #7f7d73;} .postnav a{ color: #66a6bb; font: 14px/16px Helvetica, Verdana, Arial, sans-serif;} #home-post-comments{ background: #f7f7f7; padding: 10px 20px 20px; margin: 30px 0 20px; -khtml-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #respond{ margin: 10px 0 0;} #respond h3,h3#comments{ color: #bb9166; font: 18px/22px Helvetica, Verdana, Arial, sans-serif; text-shadow: 0 1px 0 #fff;} h3#comments{ margin: 10px 0 0;} #commentform label{ color: #666; font: 14px/26px Helvetica, Verdana, Arial, sans-serif; } #commentform p{ margin: 0 0 10px;} #author,#email,#url{ background: #d3dddc; color: #383d3d; border: 1px solid #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font: 14px/22px Helvetica, Verdana, Arial, sans-serif; height: 24px; width: 250px; padding: 3px 10px 0; } #comment{ background: #d3dddc; color: #383d3d; border: 1px solid #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding: 10px; margin: 0 0 10px; font: 14px/16px Helvetica, Verdana, Arial, sans-serif; } #submit{ color: #fff; font: 18px/32px Helvetica, Verdana, Arial, sans-serif; border: 0; width: 140px; height: 32px; background: #383d3d; -khtml-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: pointer; } .navigation a{ color: #66a6bb; font: 14px/14px Helvetica, Verdana, Arial, sans-serif;} /************************************************************************ CONTENT LANDING PAGE ************************************************************************/ #nav-landing{ width: 882px; margin: auto; padding: 0 0 10px;} #nav-landing li{ float: left; width: 230px; height: 290px; text-align: justify;} #nav-landing li a{ display: block; width: 230px; height: 80px; padding: 210px 0 0; font: 12px/16px Helvetica, Verdana, Arial, sans-serif; color: #ccc;} #nav-landing li a:hover{ color: #333;} /************************************************************************ CONTENT LANDING PAGE - COMICZEAL ************************************************************************/ li#nav-landing-cz{ padding: 0 35px 0 25px;} li#nav-landing-cz a{ background: url(images/landing-sprite.jpg) 0 0 no-repeat;} li#nav-landing-cz a:hover{ background: url(images/landing-sprite.jpg) -690px 0 no-repeat;} /************************************************************************ CONTENT LANDING PAGE - TWIKU ************************************************************************/ li#nav-landing-tk{ padding: 0 35px;} li#nav-landing-tk{ border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea;} li#nav-landing-tk a{ background: url(images/landing-sprite.jpg) -230px 0 no-repeat;} li#nav-landing-tk a:hover{ background: url(images/landing-sprite.jpg) -920px 0 no-repeat;} /************************************************************************ CONTENT LANDING PAGE - BLOG ************************************************************************/ li#nav-landing-bg{ padding: 0 25px 0 35px;} li#nav-landing-bg a{ background: url(images/landing-sprite.jpg) -460px 0 no-repeat;} li#nav-landing-bg a:hover{ background: url(images/landing-sprite.jpg) -1150px 0 no-repeat;} /************************************************************************ FOOTER (STICKY FOOTER) ************************************************************************/ #wrapper-footer{ position: relative; margin-top: -100px; height: 100px; clear: both; background: #343838 url(images/blog-bkg-wrapper-footer.jpg) top center repeat-x;} #footer{ height: 90px; margin: auto; text-align: center; background: url(images/blog-bkg-footer.jpg) top center no-repeat; color: #5b6060; font: 12px/90px Helvetica, Verdana, Arial, sans-serif; text-shadow: 0 -1px 0 #000; letter-spacing: 0.03em;} #nav-footer{ background: red; width: 920px; margin: auto; padding: 20px 0 0;} #nav-footer li{ float: left;}