/* Name: Brendan Jack Design Studio: Obox Design http://www.obox-design.com/ Version: 1.0 Author: David Perel Author URI: http://www.obox-design.com/ */ /*TABLE OF CONTENTS Search these titles to jump to their relevant sections ------------------------------------------------------ 00 - CSS RESET 01 - IE6 WARNING 02 - SETUP STD CLASSES 03 - GLOBAL CLASSES 04 - CLEARFIX ---------------------------------------------------*/ /*-----------------------------------------------------------------------------------------*/ /*- RESET ---------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, 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; vertical-align: baseline; background: transparent; } table { border-spacing: 0; border-collapse: collapse; } caption, th, td { text-align: left; font-weight: normal; } blockquote, q { quotes: none; } :focus { outline: 0; } /*--*********************************************************************************--------*/ /*- IE6 WARNING - BEFORE WE DO ANYTHING!! WE NEED TO TELL EVERYONE TO GET RID OF IE 6 -------*/ /*-------------------------------------------------------------------------------------------*/ .no_ie{clear:both; border-bottom: 2px solid #a60000; background: #ffcece; color: #000; font-weight: bold; padding: 10px; text-align:center; width: 100%;} .no_ie h1{font-size: 25px;} .no_ie p{margin: 0px; padding: 0px;} .no_ie a{color: #a60000; text-decoration: underline;} .no_ie a:hover{color: #000;} /*-------------------------------------------------------------------------------------------*/ /*- SETUP STD CLASSES -----------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ html{margin: 0px; padding: 0px} body{background: #425954 url(images/layout/body_bg.jpg) top repeat-x; margin: 0px; padding: 0px; font-size: 13px; color: #000; font-family: Arial, Helvetica, sans-serif; width: 100%;} body, h1, h2, h3, h4, h5{font-family: Georgia, "Times New Roman", Times, serif;} p, li{font-family: Arial, Helvetica, sans-serif;} p{color: #303030; padding: 0px 0px 0px 0px; margin: 0px 0px 18px 0px; line-height: 20px; font-size: 13px;} h1{color: #1c2422; font-size: 30px; letter-spacing: -1px; margin: 0px 0px 10px; padding: 0px 0px 0px 0px;} h2{color: #333; font-weight: bold; font-size: 16pt; margin: 0px; padding: 0px 0px 10px;} h3{color: #333; font-weight: bold; font-size: 15pt; margin: 0px; padding: 0px 0px 10px;} h4{color: #333; font-size: 10pt; font-weight: bold; margin: 0px; padding: 4px 0px 10px 0px;} h5{color: #333; font-size: 8pt; font-weight: bold; margin: 0px; padding: 4px 0px 10px 0px;} h6{color: #333; font-size: 7pt; font-weight: bold; margin: 0px; padding: 4px 0px 10px 0px;} /*ul,ol{list-style: disc; margin: 0px 20px 10px; padding: 0px 10px 0px;}*/ ol{list-style: decimal;} /*li{line-height: 23px;}*/ /*-------------------------------------------------------------------------------------------*/ /*- GLOBAL CLASSES --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--- Links ---*/ a.std_link, a{color: #7fb7c6; text-decoration: none; font-weight: bold; outline: none;} a.light_link{color: #7fb7c6; text-decoration: none; font-weight: lighter;} a.std_link:hover, a:hover{color: #000; text-decoration: underline;} /*--- Layouts ---*/ .no_bg{background-image: none;} .clearboth{clear: both} .floatleft{float:left;} .floatright{float:right;} .image-left{float:left; padding: 0px 10px 10px 0px;} .image-right{float:right; padding: 0px 0px 10px 10px;} /*--- Text ---*/ .t_justify{text-align:justify;} .t_center{text-align: center;} .t_right{text-align: right;} .bold{font-weight: bold;} .pink{color: #f36;} a.rss{color: #F60; float: right; height: 16px; width: auto; padding-top: 0px; position: relative; top: -30px; right: 20px; text-indent: 20px; text-transform: none; background: url(images/rss.gif) 0px -2px no-repeat; font-size: 12px; z-index: 100;} a.rss:hover{color: #FC0; text-decoration: none; background: url(images/rss.gif) 0px -38px no-repeat;} /*--- Forms ---*/ textarea, input{font-family: Arial, Helvetica, sans-serif; font-size: 9pt; padding: 4px;} .txt{color: #fff; font-weight:bold; float: left; width: 80px; text-align:left; padding: 4px; margin-right: 10px;} .note{border: 1px solid #e2c822; background:#fff9d7; color: #000; font-weight: bold; padding: 5px; text-align:center; width: 90%; margin: auto; margin-bottom: 15px;} .note a{color: #f60; text-decoration:none;} .success{border-bottom: 1px solid #060; border-top: 1px solid #060; background-color: #d6f5c2; color: #060; font-weight: bold; padding: 5px; text-align:center;} .no_display{display: none;} /*-------------------------------------------------------------------------------------------*/ /*- GENERAL LAYOUT --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ #container{width: 970px; margin: auto; background: url(images/layout/water_mark.gif) no-repeat; padding: 40px 0px 0px} .content{padding: 20px; position: relative;} #header{} #left_column{clear: left; float: left; width:590px; margin-top: 4px;} .content_container{clear: both; margin-bottom: 30px;} .leftcol_header{clear: both; background: url(images/layout/leftcol_header.gif) no-repeat; width: 590px; height: 18px;} .leftcol_content{clear: both; background: url(images/layout/leftcol_content.gif) repeat-y; width: 590px;} .leftcol_footer{clear: both; background: url(images/layout/leftcol_footer.gif) no-repeat; width: 590px; height: 3px;} #right_column{float: right; width: 340px;} #right_column .content{padding: 15px;} .sidebar_header{clear: both; background: url(images/layout/sidebar_header.png) no-repeat; width: 336px; height: 15px;} .sidebar_content{clear: both; background: url(images/layout/sidebar_content.png) repeat-y; width: 336px;} .sidebar_footer{clear: both; background: url(images/layout/sidebar_footer.png) no-repeat; width: 336px; height: 15px;} /*-------------------------------------------------------------------------------------------*/ /*- HEADER ----------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ #logo{float: left; width: 352px; height: 172px; position: relative; top: 4px; left: 2px; background: url(images/logo.gif) no-repeat; text-indent: -9999px; overflow: hidden;} #logo a{width: 352px; height: 172px; display: block;} /*------------------------------------------------------*/ /*- MENUS ----------------------------------------------*/ ul#menu{list-style: none; padding: 0px; margin: 0px; position: relative; top: 125px; float: right;} ul#menu li{margin-right: 10px; float: left;} ul#menu li a{display: block; text-indent: -9999px; overflow: hidden; height: 31px; background: url(images/layout/menu.gif) no-repeat;} ul#menu li a.home{background-position: 0px 0px; width: 82px;} ul#menu li a.about{background-position: -91px 0px; width: 137px;} ul#menu li a.videos{background-position: -238px 0px; width: 100px;} ul#menu li a.blog{background-position: -347px 0px; width: 75px;} ul#menu li a.podcast{background-position: -433px 0px; width: 135px;} /*- HOVER -*/ ul#menu li a.home:hover{background-position: 0px -31px;} ul#menu li a.about:hover{background-position: -91px -31px;} ul#menu li a.videos:hover{background-position: -238px -31px;} ul#menu li a.blog:hover{background-position: -347px -31px;} ul#menu li a.podcast:hover{background-position: -433px -31px;} /*-------------------------------------------------------------------------------------------*/ /*- CONTENT ---------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*------------------------------------------------------*/ /*- INDEX MAIN ARTICLE ---------------------------------*/ .feature_article{clear: both; background: url(images/layout/index_main_bg.gif) no-repeat; width: 968px; height: 348px;} .feature_image{float: left; width: 400px; height: 300px; overflow: hidden; border: 5px solid #D6B68F;} .feature_content{float: left; width: 480px; height: 300px; margin-left: 30px; position: relative;} .feature_content h1 a{color: #1c2422; text-decoration: none;} .feature_content h1 a:hover{text-decoration: underline;} .date{color: #62130e; font-size: 8pt;} a.read-on-white{display:block; height: 25px; width: 82px; overflow: hidden; background: url(images/layout/sprite.gif) -21px -24px no-repeat; text-indent: -9999px;} a.read-on-white:hover{background-position: -104px -24px;} /*------------------------------------------------------*/ /*- SUB CONTENT ----------------------------------------*/ .sub_content{clear:both; margin: 20px 0px; position: relative; left: 4px;} .sub_content_header{clear: both; background: url(images/layout/sub_content_header.gif) no-repeat; width: 960px; height: 15px;} .sub_content_content{clear: both; background: url(images/layout/sub_content_content.gif) repeat-y; width: 960px;} .sub_content_footer{clear: both; background: url(images/layout/sub_content_footer.gif) no-repeat; width: 960px; height: 15px;} .sub_content h2 a{color: #c00; font-size: 13pt; text-decoration: none;} .sub_content h2 a:hover{text-decoration: underline;} .sub_content p{color: #ccc; font-size: 11px; line-height: 19px;} .site_item{width: 430px; float: left; margin: 0px 40px 40px 0px;} .sub_content .right{margin-right: 0px;} .site_item .image{margin-bottom: 10px;} /*--------------------------*/ /*- BUTTONS ----------------*/ a.view-em, a.listen-in, a.check-it, a.read-on{display:block; height: 25px; width: 82px; overflow: hidden; background: url(images/layout/sprite.gif) no-repeat; text-indent: -9999px;} a.view-em{background-position: -21px -91px;} a.listen-in{background-position: -21px -146px;} a.check-it{background-position: -21px -202px;} a.read-on{background-position: -21px -258px;} /*- HOVER -*/ a.view-em:hover{background-position: -104px -91px;} a.listen-in:hover{background-position: -104px -146px;} a.check-it:hover{background-position: -104px -202px;} a.read-on:hover{background-position: -104px -258px;} /*-------------------------------------------------------------------------------------------*/ /*- POST PAGE -------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .post_image{width: 540px; max-height: 320px; overflow: hidden; overflow: hidden; border: 5px solid #D6B68F; margin-bottom: 20px;} /*------------------------------------------------------*/ /*- PROMOTE POST ---------------------------------------*/ .promote_content{padding: 0px; background: url(images/layout/promote_post_bg.jpg) repeat-y; border: 1px solid #c00; padding: 10px;} .promote_links{float: left; width: 375px; padding-top: 16px;} .promote_buttons{float: right; width: 150px;} .promote_content h4{color: #333; margin: 0px 0px 0px; padding: 0px 0px 5px; text-transform: capitalize; font-size: 10pt; font-weight: bold;} .promote_content p{color: #c00; margin-bottom: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-style: italic; font-size: 8pt;} .promote_content ul{margin: 0px; padding: 0px; list-style: none; font-size: 8pt;} .promote_content ul li{float: left; margin-right: 20px;} .promote_content ul li a{color: #333; font-size: 11px; font-weight: bold;} .promote_content ul li a:hover{color: #000; text-decoration: underline;} .promote_content .digg_show, .promote_content .tweetmeme{margin: 0px 10px 0px 0px; padding:8px; float: left; height: 80px; width: 51px; background-color: #fff; border: 1px solid #93b9a4;} .promote_content .tweetmeme{float: left; margin: 0px;} /*------------------------------------------------------*/ /*- COMMENTS SECTION -----------------------------------*/ .comment_header{clear: both; background: url(images/layout/comment_header.gif) no-repeat; width: 590px; height: 13px;} .comment_content{clear: both; background: url(images/layout/comment_content.gif) repeat-y; width: 590px;} .comment_footer{clear: both; background: url(images/layout/comment_footer.gif) no-repeat; width: 590px; height: 15px;} ul.the_reader_comments{list-style: none; margin: 0px 0px 30px; padding: 0px;} ul.children{list-style: none; margin: 0px; padding: 0px;} ul.children li{padding: 0px 0px 0px 30px;} .parent_comment{clear: both; padding: 10px; margin-bottom: 30px;} .comment_container{clear: both; padding: 10px; margin: 0px 0px 20px; background: url(images/layout/comm_sep.gif) bottom no-repeat;} .comment_gravatar{float: left; width: 80px; height: 80px; margin: 0px 20px 20px 0px;} .comment_gravatar img{border: 1px solid #425954;} .comment_message{float: right; width: 78%;} .comment_message h3, .comment_message h3 a{font-size: 10pt; color: #93b9a4; text-decoration: none; margin: 0px 0px 8px; padding: 0px;} .comment_message h3 a:hover{color: #fff;} .comment_message h4{font-size: 8pt; color: #c00; margin: 0px 0px 8px; padding: 0px;} .comment_message p{clear: both; color: #999;} ul.children li.child .comment_gravatar{clear: both; margin: 0px 0px 20px 0px; width: 500px; height: 40px;} ul.children li.child .comment_gravatar img{height: 40px; width: 40px; float: left; margin-right: 20px;} ul.children li.child .comment_gravatar h3, ul.children li.child .comment_gravatar h3 a{font-size: 10pt; color: #93b9a4; text-decoration: none; margin: 0px 0px 4px; padding: 0px;} ul.children li.child .comment_gravatar h3 a:hover{color: #fff;} ul.children li.child .comment_gravatar h4{font-size: 8pt; color: #c00; margin: 0px; padding: 0px;} ul.children li.child .comment_message{clear: both; width: 100%;} /*--------------------------*/ /*- SPRITES ----------------*/ h2.reader_comments, h2.leave_a_comment{background: url(images/layout/sprite.gif) no-repeat; overflow: hidden; text-indent: -9999px; margin: 0px 0px 10px;} h2.reader_comments{height: 14px; width: 233px; background-position: -25px -296px;} h2.leave_a_comment{height: 14px; width: 233px; background-position: -25px -329px;} /*--------------------------*/ /*- COMMENT FORM -----------*/ .comment_form .form_label{color: #999; float: left; width: 80px; margin: 6px 10px 0px 0px; font-weight: bold; font-size: 15px;} .comment_form label{display: block; width: 500px; margin-bottom: 10px;} .comment_form label input.comment, .comment_form label textarea.comment{color: #c4d2cf; margin: 0px; padding: 7px 8px 7px 8px; border: 1px solid #81A099; background-color: #425954; font-size: 12px;} .comment_form label input.comment{width: 236px; } .comment_form label textarea.comment{width: 305px; height: 170px;} .comment_form .contact_button{clear: both; padding: 0px; margin: 0px;} /*-------------------------------------------------------------------------------------------*/ /*- RIGHT COLUMN CONTNET --------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--------------------------*/ /*- SPRITES ----------------*/ h2.jacks_world, h2.popular_posts, h2.recent_videos, h2.side_recent_comments{width: 313px; height: 32px; background: url(images/layout/sprite.gif) no-repeat; overflow: hidden; text-indent: -9999px; margin: 0px 0px 0px;} h2.jacks_world{background-position: -307px -15px;} h2.popular_posts{background-position: -307px -63px;} h2.side_recent_comments{background-position: -307px -110px;} h2.recent_videos{background-position: -307px -159px;} ul.right_column_list{list-style: none; padding: 0px; margin: 0px 0px 20px;} ul.right_column_list li{border-bottom: 1px solid #81a099;} ul.right_column_list li:last-child{border: none;} ul.right_column_list li a{color:#f4f1e2; display: block; padding: 8px 4px; font-weight: lighter; font-size: 10pt;} ul.right_column_list li a:hover{color: #fff; text-decoration: none;} span.username{display: block; color: #333; font-weight: bold;} /*-------------------------------------------------------------------------------------------*/ /*- FOOTER ----------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ #footer_container{clear: both; background: url(images/layout/footer_bg.gif) top repeat-x; padding: 60px 0px 40px; } .footer{background: #0d1110; border-top: 5px solid #314137; border-bottom: 5px solid #314137; padding: 20px 0px;} .footer_content{width: 960px; margin:auto;} .footer_content h3{color: #93B9A2;} .footer_content p{color: #999;} .about_me, .flickr, .twitter{width: 280px; padding: 0px 20px; float: left;} /*- FLICKR ------------------------------------------------------------------*/ #flickr_badge_wrapper{margin: 0px; padding: 0px; list-style: none;} #flickr_badge_wrapper .flickr_badge_image{float: left; height: 80px; width: 80px; margin: 0px 0px 5px 0px; overflow: hidden; text-align: center;} #flickr_badge_wrapper .flickr_badge_image img{margin: 5px 0px 0px 0px;} /*- TWITTER -----------------------------------------------------------------*/ h3.bird{background: url(images/layout/raven.gif) 0px 1px no-repeat; text-indent: 40px;} h3.bird a{text-decoration: none; color: #93B9A2;} ul#twitter_update_list{list-style: none;} ul#twitter_update_list li{line-height: 23px; color: #999; font-size: 8pt;} ul#twitter_update_list li a{color: #c00; display: inline;} /*- SOCIAL ICONS -----------------------------------------------------------*/ .social-icons{margin-top: 20px;} .social-icons a{float: left; display: block; width: 32px; height: 32px; margin-right: 15px; background: url(images/layout/social-icons.png) no-repeat; text-indent: -9999px; overflow: hidden;} .social-icons a.icon-twitter {background-position: -3px -4px;} .social-icons a.icon-facebook {background-position: -3px -96px;} .social-icons a.icon-friendfeed {background-position: -3px -188px;} .social-icons a.icon-posterous {background-position: -3px -280px;} /*--- HOVER ---*/ .social-icons a.icon-twitter:hover {background-position: -72px -4px;} .social-icons a.icon-facebook:hover {background-position: -72px -96px;} .social-icons a.icon-friendfeed:hover {background-position: -72px -188px;} .social-icons a.icon-posterous:hover {background-position: -72px -280px;} .podcast-icons{position: absolute; bottom: 0px; right: 0px; z-index: 1000;} .podcast-icons a{float: left; display: block; width: 32px; height: 32px; margin-left: 15px; background: url(images/layout/social-icons.png) no-repeat; text-indent: -9999px; overflow: hidden;} .podcast-icons a.icon-rss {background-position: -0px -482px; margin-top: 18px;} .podcast-icons a.icon-times {background-position: -0px -372px; width: 53px; height: 50px;} /*--- HOVER ---*/ .podcast-icons a.icon-rss:hover {background-position: -69px -482px;} .podcast-icons a.icon-times:hover {background-position: -69px -372px;} /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*- CLEARFIX --- * I prefer not to touch this code, I don't recommend you do so either, it works... so don't fix whats working ;) * -*/ /*-----------------------------------------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0;} /* http://www.positioniseverything.net/easyclearing.html */ .clearfix:after{clear: both; content: '.'; display: block; visibility: hidden; height: 0;} .clearfix{display: inline-block;} * html .clearfix{height: 1%;} .clearfix{display: block;}