/* Russ Dyer russdyer@gmail.com http://www.ourlittlemonkeyboy.com */ @import "style/css/reset.css"; @import "style/css/typography.css"; /* -- STRUCTURE -- */ /* Header */ h1 { font-family: Georgia, serif; font-size: 2.4em; font-weight: normal; color: #000000; } h1#header { width: 962px; height: 254px; background: url(style/images/header.jpg) no-repeat center center; text-indent: -9999px; } /* Page Wrap */ #page-wrap { width: 962px; margin: 0 auto; background: url(style/images/page-wrap.jpg) repeat-y; } /* Blog Page - 2 Column */ #top-spacer { height: 100px; } #date-stamp { float: left; width: 55px; } #article-area { width: 585px; margin: 0 0 100px 70px; text-align: justify; } #article-header { float: left; width: 585px; height: 60px; position: relative; top: -7px; background: url(style/images/article-header.png) no-repeat; } #article-title { float: left; width: 405px; position: relative; left: 55px; top: 12px; } #article-comments { float: right; width: 109px; position: relative; right: -7px; font-size: 1.6em; text-align: center; } #article-post { margin: 0 30px; min-height: 200px; } #sidebar-area { float: right; width: 302px; } #sidebar-header { height: 55px; background: url(style/images/sidebar-header.png) no-repeat; font-size: 1.8em; font-weight: bold; padding: 3px 0 0 45px; } #sidebar-content { text-align: justify; padding: 0 15px 0 15px; } .search-form input { width: 150px; } /* Single Page - 1 Column */ #single-area { width: 880px; margin: 0 0 30px 70px; text-align: justify; } #single-header { float: left; width: 897px; height: 58px; position: relative; top: -5px; right: 15px; background: url(style/images/single-header.png) no-repeat; } #single-title { width: 775px; float: left; position: relative; left: 56px; top: 10px; } #single-comments { width: 109px; float: right; position: relative; right: 315px; top: 2px; font-size: 1.6em; text-align: center; } #single-post { margin: 0 20px 0 10px; min-height: 300px; } /* Media in Post */ #photos-header { width: 344px; height: 116px; margin: 55px 254px 25px 254px; background: url(style/images/photos-header.png) no-repeat; text-indent: -9999px; } #videos-header { width: 344px; height: 116px; margin: 55px 254px 25px 254px; background: url(style/images/videos-header.png) no-repeat; text-indent: -9999px; } .wordtube { text-align: center; } a#more {display:block; width: 118px; height: 33px; background: url(style/images/more.png) no-repeat; text-indent: -9999px; float: left; } /* Archive Page */ #archive-header { padding: 0 0 25px 80px; } /* Comments */ #comments-fb-tip { margin: 0 20px 0 10px; } #comments-area { float: left; } #comment-header { background: url(style/images/comment-header.png) no-repeat; width: 310px; height: 62px; text-indent: -9999px; margin: 0 0 25px 46px; } #comment-gravatar { float: left; position: relative; left: 4px; } #comment-tip { float: left; width: 18px; height: 28px; position: relative; top: 13px; left: 9px; background: url(style/images/comment-arrow.png) no-repeat; text-indent: -9999px; } #comment-bubble { width: 860px; margin-left: 75px; } #comment-details { text-transform: uppercase; width: 860px; margin-left: 5px; margin-bottom: 25px; } #comment-form { width: 860px; margin-left: 75px; } ol.commentlist { list-style: none; } ol.commentlist li p { font-size: 1.0em; } .comment-bubble { background: #a6cede; color: black; padding: 10px; border:solid 2px #000000; min-height: 50px; -moz-border-radius: 5px; /* Mozilla Radius */ -webkit-border-radius: 5px; /* Safari & Google Chrome Radius */ border-radius: 5px; } /* Future IE Radius */ /* Alternating Comments (alt. styling for ODD comments) */ .alt #comment-tip { float: left; width: 18px; height: 28px; position: relative; top: 13px; left: 9px; background: url(style/images/comment-arrow-alt.png) no-repeat; text-indent: -9999px; } .alt .comment-bubble { background: #545b0b; color: white; padding: 10px; border:solid 2px #000000; min-height: 50px; -moz-border-radius: 5px; /* Mozilla Radius */ -webkit-border-radius: 5px; /* Safari & Google Chrome Radius */ border-radius: 5px; } /* Future IE Radius */ /* Comment Posts */ #comment-bubble-post { width: 585px; margin-left: 75px; } #comment-post-header { background: url(style/images/comment-post-header.png) no-repeat; width: 310px; height: 64px; text-indent: -9999px; margin: 0 0 25px 46px; } #gravatar-missing { float: left; background: url(style/images/gravatar-missing.png) no-repeat; width: 55px; height: 75px; text-indent: -9999px; } #comment-post-tip { float: left; width: 19px; height: 23px; position: relative; top: 15px; left: 11px; background: url(style/images/comment-post-tip.png) no-repeat; text-indent: -9999px; z-index: 1; } #comment-post-tip-alt { float: left; width: 18px; height: 24px; position: relative; top: 20px; left: 4px; background: url(style/images/comment-post-arrow.png) no-repeat; text-indent: -9999px; } .comment-post-bubble { background: #F9F9F1; color: black; padding: 10px; border:solid 2px #000000; min-height: 50px; -moz-border-radius: 5px; /* Mozilla Radius */ -webkit-border-radius: 5px; /* Safari & Google Chrome Radius */ border-radius: 5px; } /* Future IE Radius */ /* -- COMMENT FORM -- */ #comment-form { margin: 1em 0; padding-top: 10px; } #comment-form fieldset { margin: 0; padding: 0; border: none; float: left; display: inline; width: 260px; margin-left: 25px; } #comment-form legend { display: none; } #comment-form p { margin: .5em 0; } #comment-form label { display: block; } #comment-form input, #comment-form textarea { border: 2px solid #000; padding: 10px; background: #FFF; font-family: Georgia,"Times New Roman",Times,serif; font-size: 1.1em; font-weight: normal; } #comment-form textarea { width: 450px; overflow: auto; -moz-border-radius: 5px; z-index: 0; position: relative; top: -26px; left: -18px; } #comment-form p.submit { clear: both; padding: 0 25px 20px 315px; margin: 0; text-align: left; } #comment-form p.submit2 { clear: both; padding: 0 25px 20px 25px; margin: 0; text-align: left; } #comment-form button { width: 95px; height: 36px; border: none; cursor: pointer; position: relative; top: -25px; left: 425px; background: url(style/images/form_button.gif) no-repeat 0 0; } #comment-seperator { float: left; background: url(style/images/comment-seperator.png) no-repeat 0 0; width: 250px; height: 51px; text-indent: -9999px; margin-top: 15px; } /* -- BLOG ENTRIES -- */ .post h2 { } .datebox { width: 44px; height: 109px; float: left; padding: 0 5px 0 5px; background: url(style/images/date-stamp.png) no-repeat; color: white; text-align: center; } .day { font-size: 3.2em; font-weight: bold; margin-top: -15px; } .month { font-size: 1.4em; text-transform: uppercase; margin-top: -57px; } .time { font-size: 1.4em; margin: 8px; } /* -- NAVIGATION -- */ ul#nav { list-style: none; } ul#nav li { display: inline; } ul#nav li a { text-indent: -9999px; display: block; height: 78px; float: left; } /* Inactive State */ ul#nav li a.blog { background: url(style/images/blog.jpg) no-repeat bottom center; width: 128px; } ul#nav li a.photos { background: url(style/images/photos.jpg) no-repeat bottom center; width: 87px; } ul#nav li a.videos { background: url(style/images/videos.jpg) no-repeat bottom center; width: 517px; } ul#nav li a.biggest-loser { background: url(style/images/biggestloser.jpg) no-repeat bottom center; width: 230px; } /* Rollover State */ ul#nav li a.blog:hover, ul#nav li a.blog:active, ul#nav li a.photos:hover, ul#nav li a.photos:active, ul#nav li a.videos:hover, ul#nav li a.videos:active, ul#nav li a.biggest-loser:hover, ul#nav li a.biggest-loser:active { background-position: center center; } /* Active State */ body#blog ul#nav li a.blog, body#photos ul#nav li a.photos, body#videos ul#nav li a.videos, body#biggest-loser ul#nav li a.biggest-loser { background-position: top center; } /* Footer */ #footer { min-height: 359px; background: url(style/images/footer.jpg) no-repeat; } /* Custom Code = Facebook Connect plugin (Used as a spacer to offset the Facebook Connect button */ .fbc_connect_button { float: left; margin-left: 60px; } /* Custom Code - Facebook Connect plugin (Used to move "to leave a comment" text) */ .fbc_connect_text { float: right; margin-left: 112px; margin-top: -23px; }