/* Name: Selecta Design Studio: Obox Design http://www.obox-design.com/ Version: 1.0 Author: Obox Design Author URI: http://www.obox-design.com/ */ /*--------------------------------------------------------------------------------------------------------------------------*/ /*- RESET - Courtesy of Eric Meyer's CSS Reset Awesomeness: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ---*/ /*--------------------------------------------------------------------------------------------------------------------------*/ 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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus {outline: 0;} body {line-height: 1; color: black; background: white;} ol, ul {list-style: none;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: separate;border-spacing: 0;} caption, th, td {text-align: left;font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} /*--*********************************************************************************--------*/ /*- 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; } .no_ie h1{font-size: 22px; color: #a60000;} .no_ie p{margin: 0px; padding: 0px;} .no_ie a{color: #a60000; text-decoration: underline;} .no_ie a:hover{color: #000;} /*-------------------------------------------------------------------------------------------*/ /*- SETUP STD CLASSES -----------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ body{font-size: 15px; font-family: Arial, Helvetica, sans-serif;} h1{margin: 0px; padding: 1px 0px 10px 0px;} h2{margin: 0px; padding: 1px 0px 10px 0px;} h3{margin: 0px; padding: 1px 0px 10px 0px;} h4{margin: 0px; padding: 1px 0px 10px 0px;} h5{margin: 0px; padding: 1px 0px 10px 0px;} h6{margin: 0px; padding: 1px 0px 10px 0px;} p{line-height: 24px; margin: 0px 0px 15px;} blockquote, blockquote p{line-height: 24px; margin: 0px 0px 15px;} form{} label{} textarea, input{} input[type=radio]{} input[type=checkbox]{} input[type=image]{} input[type=button]{} /*-------------------------------------------------------------------------------------------*/ /*- GLOBAL CLASSES --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--- Links ---*/ a.std_link, a{text-decoration: none;} a:active{} a:hover{} /*--- Layouts ---*/ .no_bg{background-image: none;} .clearboth{clear: both} .floatleft{float: left; margin-right:15px;} /*.floatright{float: right;}*/ /*.floatright{float:right;}*/ .no_display{display: none;} .alignleft{float: left; margin: 0px 20px 10px 0px;} .alignright{float: right; margin: 0px 0px 10px 20px;} /*-------------------------------------------------------------------------------------------*/ /*- GENERAL LAYOUT --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ #feature-post-container{padding: 60px 0px 30px; margin: 0px 0px -30px; position: relative; top: -60px; position: relative; z-index: 1;} #feature-post{width: 980px; margin: 0px auto;} #feature-post {margin: 0px;} #content-container{width: 980px; margin: auto; padding-top:50px;} .post-slider{padding: 0px 0px 20px; margin: 0px 0px 30px;} #content{float: right; width: 500px; margin-right:50px !important;} #sub { float: right; width: 890px; margin-right:50px !important; overflow:hidden; } #footer-container{clear: both; padding: 30px 0px 0px; margin: 30px 0px 30px;} #footer{width: 980px; margin: auto;} /*-------------------------------------------------------------------------------------------*/ /*- HEADER ----------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--------------------------*/ /*- MENU -------------------*/ ul#menu{float: right; margin-top: 4px;} ul#menu li.parent-item{float: left; margin: 0px 10px; padding: 4px 10px; position: relative;} ul#menu li.parent-item:last-child{ margin: 0px;} ul#menu li.parent-item a.parent-link{font-weight: bold;} ul#menu li.parent-item a.parent-link:hover{} ul#menu li.parent-item a.parent-link-sub-menu{} ul#menu li.parent-item a.parent-link-sub-menu:hover{} ul#menu li.menu-rss{} ul#menu li.menu-rss a{} ul#menu li.menu-rss a:hover{} /*--------------------------*/ /*- SUB MENU ---------------*/ .sub-menu-container{width: 150px; position: absolute; top: 46px; z-index: 100; left: -20px;} ul.sub-menu{width: 150px; padding: 64px 0px 0px;} ul.sub-menu li{clear: both;} ul.sub-menu li a{ display: block; padding: 10px 10px; font-size: 10pt;} ul.sub-menu li a:hover{} ul.sub-menu li:first-child a{padding-top: 1px;} ul.sub-menu li:last-child a{ border-bottom: none; padding-bottom: 1px;} .sub-menu-footer{clear: both; width: 150px; height: 20px; padding: 0px; margin: 0px;} /*-------------------------------------------------------------------------------------------*/ /*- ROUNDED CORNERS - Before we do anything, let's set the rounded corners ------------------*/ /*-------------------------------------------------------------------------------------------*/ /*- ------------------------------------------------------------------------------------------- NOTE: There are two color references in the div description The first is the containers background color "LIGHT" refers to the light containing div (eg. the copy containers) "DARK" refers to the darker containing div (eg. side-bar containers) The second reference is the background that the container sits it "NORMAL" refers to the body background color "DARK" refers to the darker containing div background color (eg. the 'feature post' container) ------------------------------------------------------------------------------------------ -*/ .container-light{padding: 2px 20px;} .container-dark{padding: 2px 20px;} /*- LIGHT -*/ .container-header-light-dark{clear: both; height: 20px; overflow: hidden;} .container-header-light-dark span{display: block; width: 20px; height: 20px; overflow: hidden;} .container-footer-light-dark{height: 20px;} .container-footer-light-dark span{float: right; display: block; width: 20px; height: 20px; overflow: hidden;} .container-header-light-normal{clear: both; height: 20px; overflow: hidden;} .container-header-light-normal span{display: block; width: 20px; height: 20px; overflow: hidden;} .container-footer-light-normal{height: 20px;} .container-footer-light-normal span{float: right; display: block; width: 20px; height: 20px; overflow: hidden;} /*- DARK -*/ .container-header-dark-dark{clear: both; height: 20px; overflow: hidden;} .container-header-dark-dark span{display: block; width: 20px; height: 20px; overflow: hidden;} .container-footer-dark-dark{height: 20px;} .container-footer-dark-dark span{float: right; display: block; width: 20px; height: 20px; overflow: hidden;} .container-header-dark-normal{clear: both; height: 20px; overflow: hidden;} .container-header-dark-normal span{display: block; width: 20px; height: 20px; overflow: hidden;} .container-footer-dark-normal{height: 20px;} .container-footer-dark-normal span{float: right; display: block; width: 20px; height: 20px; overflow: hidden;} /*-------------------------------------------------------------------------------------------*/ /*- HOME PAGE LAYOUT ------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------*/ /*- POST SLIDER ------------------------------------------*/ .post-slider h2{float: left; font-size: 30px; font-weight: bold; margin: 0px 0px 15px; padding: 0px;} .post-slider ul{clear: both;} .post-slider ul li{float: left; width: 230px; margin: 0px 20px 0px 0px;} .post-slider ul li .container-light{height: 110px; overflow: hidden;} .post-slider ul li .content{padding: 20px; margin: 0px; -moz-border-radius: 15px; -webkit-border-radius: 15px;} .post-slider ul li div.thumbnail{width: 190px; height: 110px; overflow: hidden;} .post-slider ul li h3{padding: 10px 10px 0px;} .post-slider ul li h3 a{margin: 0px; font-weight: bold; font-size: 15px; line-height: 20px;} .post-slider ul li h3 a:hover{} .post-slider ul li:last-child, .post-slider ul li.last{margin: 0px;} /*--------------------------------------------------------*/ /*- PAGINATION -------------------------------------------*/ ul.page_button_content{margin-bottom: 30px;} ul.page_button_content li{float: left; margin: 0px 10px 0px 0px;} ul.page_button_content li a{display: block; width: 35px; height: 25px; overflow: hidden; text-indent: -9999px;} ul.page_button_content li.previous-page a{background-position: 0px -14px;} ul.page_button_content li.previous-page a:hover{background-position: 0px -67px;} ul.page_button_content li a.selected-page{background-position: -45px -1px; width: 47px; height: 30px; padding: 17px 0px 0px; margin: -12px 0px 0px; text-indent: inherit; text-align: center; font-weight: bold; font-size: 15px; text-indent: 0px;} ul.page_button_content li a.other-page{background-position: -102px -14px; padding: 5px 0px 0px; height: 20px; text-indent: inherit; text-align: center; font-weight: bold; font-size: 15px; text-indent: 0px;} ul.page_button_content li a.other-page:hover{background-position: -102px -67px;} ul.page_button_content li.next-page a{background-position: -147px -14px;} ul.page_button_content li.next-page a:hover{background-position: -147px -67px;} /*-------------------------------------------------------------------------------------------*/ /*- PROMOTE POST ----------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .promote-post{margin-bottom: 30px;} .promote-post h2{font-size: 18pt; margin: 0px 0px 10px; padding: 0px;} .enjoy-copy{font-size: 14pt; font-style: italic; margin: 0px;} .promote-post ul li{ list-style: none; float: left; padding: 10px 0px 0px; margin-right: 15px;} .promote-post ul li.tweet{padding-top: 29px;} .promote-post ul li.moo{padding-top: 29px;} .promote-post ul li.bump{padding-top: 19px;} .promote-post ul li.digg{padding-top: 11px;} /*-------------------------------------------------------------------------------------------*/ /*- COMMENTS --------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ #comments{clear: both; margin: 30px 0px;} .comment{margin: 0px 0px 0px;} .comment h3{display: block; margin-bottom: 10px; font-weight: bold; font-size: 14px;} .comment h3 a{} .comment h3 a:hover{} .comment h3 .comment-date{float: right; padding: 3px 0px 0px; font-weight: lighter; font-size: 10px;} .user{float: left; width: 78px;} .user img{width: 40px; padding: 10px; margin-right: 10px;} .user a.reply-link{display: block; width: 60px; height: 18px; padding: 7px 0px 0px; margin: 10px 0px 0px; overflow: hidden; text-align: center; font-size: 11px; font-weight: bold;} .user a.reply-link:hover{background-position: bottom;} .comment-post{float: right; width: 522px; margin-bottom: 20px;} .comment-content{ padding: 1px 20px; font-size: 13px;} .comment-odd{} /*--------------------------------------------------------*/ /*- THREADED COMMENTS - ITS TIME TO THREAD THIS BEAST ----*/ .threaded-comments{width: 522px; margin-left: 78px; clear: both; margin-top: 20px;} .threaded-comments .thread-comment{clear: both; } .threaded-comments .last{} .threaded-comments .user{} .threaded-comments .comment-post{ width: 444px; margin-bottom: 20px;} .threaded-comments .comment-post blockquote{} /*-------------------------------------------------------------------------------------------*/ /*- POST A COMMENT --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .comment-form-content{clear: both; margin: 30px 0px;} .comment-form-content h2{margin: 0px 0px 20px;} .comment-form-content .comment_form label{float: left; display: block; width: 130px; height: 50px; margin: 15px 0px 5px; font-size: 20px; font-weight: bold; text-align: right;} .comment-input{float: right; width: 462px; height: 50px; margin-bottom: 20px; overflow: hidden;} .comment-input input{width: 430px; height: 24px; padding: 3px 0px; position: relative; top: 9px; left: 20px; background: none; border: none; font-size: 18px;} .comment-texarea{float: right; width: 462px; height: 220px; margin-bottom: 20px; overflow: hidden;} .comment-texarea textarea{width: 430px; height: 190px; padding: 3px 0px; position: relative; top: 9px; left: 20px; background: none; border: none; font-size: 18px; font-family: Arial, Helvetica, sans-serif;} .checkbox{clear: both; margin: 0px 0px 20px 150px; font-size: 15px; font-style: italic;} input.submit_button{clear: both; margin: 0px 0px 0px 150px;} /*-------------------------------------------------------------------------------------------*/ /*- SPRITES ---------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*- ARCHIVES --------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ a.archive-date{float: left; width: 120px; display: block; margin: 10px 20px 10px 0px; font-weight: bold;} a.archive-date:hover{} /*--------------------------------------------*/ /*- SEARCH -----------------------------------*/ .search-bar{} .search-form input.search{} .search-form input.search_button{} /*-------------------------------------------------------------------------------------------*/ /*- FOOTER ----------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ ul.footer-columns{} ul.footer-columns h3{font-weight: bold; font-size: 16px;} ul.footer-columns p{font-size: 12px; line-height: 20px;} ul.footer-columns li.column-one, ul.footer-columns li.column-two, ul.footer-columns li.column-three{float: left; margin-right: 20px; width: 300px;} ul.footer-columns li.column-three{margin: 0px 0px;} ul.footer-columns ul li{font-size: 12px; line-height: 18px; padding: 5px 0px;} ul.footer-columns a{} ul.footer-columns a:hover{} ul.footer-columns ul li:first-child{} ul.footer-columns ul li:last-child{ border-bottom: none;} /*- ------------------------------*/ /*- SOCIAL ICONS -----------------*/ a.twitter, a.facebook, a.flickr, a.friendfeed, a.delicious, a.digg, a.lastfm, a.youtube, a.feed{background: url(images/icons/sprite.gif) no-repeat; overflow: hidden; text-indent: 30px; padding: 2px 0px;} a.twitter{background-position: 0px -630px;} a.facebook{background-position: 0px -108px;} a.flickr{background-position: 0px -182px;} a.friendfeed{background-position: 0px -220px;} a.delicious{background-position: 0px -33px;} a.digg{background-position: 0px -70px;} a.lastfm{background-position: 0px -369px;} a.youtube{background-position: 0px -780px;} a.feed{background-position: 0px -145px;} /*-------------------------------------------------------------------------------------------*/ /*- SOME STANDARD WORDPRESS PLUGIN/WIDGET STYLES --------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--------------------------------------------*/ /*- FLICKR -----------------------------------*/ #flickr_badge_wrapper{} #flickr_badge_wrapper .flickr_badge_image a{display: block; float: left; padding: 10px; margin: 0px 5px 10px;} #flickr_badge_wrapper .flickr_badge_image a:hover{background-position: bottom;} /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*- 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;}