/* Name: MICRO.DEPTH 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: "" "";} /*-------------------------------------------------------------------------------------------*/ /*- SETUP STD CLASSES -----------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ body{margin: 0px; padding: 0px; background: #1D1E3C url(http://cdn.byronrode.co.za/tumblr/micro-depth/color-styles/blue/layout/bg.jpg) top fixed no-repeat; font-family: "Myriad Pro", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 14px; color: #ccc; -webkit-text-stroke: 1px transparent; } h1, h2, h3, h4, h5, h6{margin: 0px 0px 5px; padding: 0px 0px 5px; color: #fff; font-weight: lighter; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.90);} h1{font-size: 35px; line-height: 37px;} h2{font-size: 30px; line-height: 32px;} h3{font-size: 20px; line-height: 18px;} h4{font-size: 14px; line-height: 16px;} h5{font-size: 12px; line-height: 15px;} h6{font-size: 10px; line-height: 13px;} p{font-size: 14px; line-height: 22px; margin-bottom: 12px;} blockquote, blockquote p{} form{} label{} textarea, input{font-family: "Myriad Pro", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 13px; color: #555;} input[type=radio]{} input[type=checkbox]{} input[type=image]{} input[type=button]{} /*-------------------------------------------------------------------------------------------*/ /*- GLOBAL CLASSES --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--- Links ---*/ /*--- Links ---*/ a.std_link, a{color: #fff; text-decoration: none;} a.std_link:hover, a:hover{color: #fff; text-shadow: 0px 0px 3pt rgba(255, 255, 255, 0.60);} a:active{text-decoration: underline;} /*--- Layouts ---*/ .no_bg{background-image: none;} .clearboth{clear: both} .floatleft{float: left;} .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;} .aligncenter{text-align: center;} u{text-decoration: underline;} strong{font-weight: bold;} em{font-style: italic;} /*-------------------------------------------------------------------------------------------*/ /*- GENERAL LAYOUT --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ #container{width: 890px; margin: auto;} #header{clear: both; margin-bottom: 20px; padding: 40px 0px 0px 60px;} #left-column{float: left; width: 620px;} #right-column{float: right; width: 240px;} #footer{} /*-------------------------------------------------------------------------------------------*/ /*- HEADER ----------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*--------------------------*/ /*- HEADER ROW -------------*/ .logo{float: left;} .logo h1{ margin: 0px; padding: 0px;} p.intro-text{text-align: center; color: #555; font-style: italic;} /*-------------------------------------------------------------------------------------------*/ /*- LEFT COLUMN -----------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .post-container{margin-bottom: 40px;} .date-container{float: left; margin-right: 10px;} .post{float: right; width: 520px; min-height: 70px; padding: 20px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; -moz-border-radius: 8px; -webkit-border-radius: 8px;} /*-------------------------*/ /*- ICONS -----------------*/ .icon-note, .icon-quote, .icon-chat, .icon-video, .icon-image, .icon-sound, .icon-link {display: block; padding: 0px; margin: 0px 0px 10px; width: 50px; height: 50px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/icons.png) no-repeat; overflow: hidden; text-indent: -9999px;} .icon-note {background-position: -0px -0px;} .icon-link {background-position: -0px -240px;} .icon-chat {background-position: -0px -400px;} .icon-video {background-position: -0px -320px;} .icon-sound {background-position: -0px -80px;} .icon-image {background-position: -0px -480px;} .icon-quote {background-position: -0px -160px;} /*- HOVER ------------------*/ .icon-note:hover {background-position: -52px -0px;} .icon-link:hover {background-position: -52px -240px;} .icon-chat:hover {background-position: -52px -400px;} .icon-video:hover {background-position: -52px -320px;} .icon-sound:hover {background-position: -52px -80px;} .icon-image:hover {background-position: -52px -480px;} .icon-quote:hover {background-position: -52px -160px;} /*-------------------------*/ /*- DATE ------------------*/ .date{display: block; padding: 0px; margin: 0px 0px 10px; width: 50px; height: 50px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/icons.png) 0px -640px no-repeat; text-align: center; color: #ccc; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.90);} .date .day{display: block; padding: 6px 0px; font-size: 18px; font-weight: bold; text-align: center;} .date .month{display: block; font-size: 11px; text-transform: uppercase;} .date:hover {background-position: -52px -640px; color: #43518E;} /*-------------------------*/ /*- NOTES BUBBLE ----------*/ .notes-bubble{display: block; padding: 0px; margin: 0px 5px 10px; width: 40px; height: 40px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/icons.png) -5px -725px no-repeat; text-align: center; color: #ccc;} .notes-bubble .note-count{display: block; padding: 6px 0px; font-size: 15px; font-weight: bold; text-align: center;} .notes-bubble .note-title{display: block; font-size: 10px; text-transform: uppercase;} .hidden-notes{display: none;} .sound-item, .video-item, .post img{display: block; padding: 10px; margin-bottom: 20px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; border: 1px solid rgba(255, 255, 255, 0.10);} /*-------------------------*/ /*- QUOTE -----------------*/ blockquote{padding: 0px 0px 0px 20px; border-left: 10px solid rgba(0, 0, 0, 0.40); font-size: 30px; font-style: italic; line-height: 44px;} p.quote-source{float: right;} /*-------------------------*/ /*- CHAT ------------------*/ ul.chat-item{line-height: 22px; width: 560px; margin-left: -20px;} ul.chat-item li{padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.10); border-bottom: 1px solid rgba(0, 0, 0, 0.10);} ul.chat-item li strong{display: inline-block; margin-right: 15px; width: 120px; float: left; color: #fff; font-size: 12px; text-transform: uppercase; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.90);} ul.chat-item li span{display: inline-block; width: 380px; float: right; font-style: italic;} ul.chat-item li.odd strong{color: #555;} ul.chat-item li.odd span{color: #000;} ul.chat-item li:first-child{border-top: none;} ul.chat-item li:last-child{border-bottom: none;} /* ------------------------*/ /*- ANSWER ----------------*/ iframe #answer_button{float: right; display: block; margin: 0px; padding: 4px 3px; background: none; border: none; color: #fff; text-transform: uppercase; font-size: 10px; line-height: normal; background: #000; text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px;} /*-------------------------*/ /*- NEXT PREVIOUS BUTTONS -*/ .next-prev{} .next-prev a{display: inline-block; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/pagination.png) no-repeat;} a.next-page{float: right;} a.prev-page{float: left;} a.next-page:hover{} a.prev-page:hover{} /*--------------------------*/ /*- PAGINATION -------------*/ .pagination-container{padding: 10px; margin: 0px 0px 60px 60px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; text-transform: uppercase; color: #ccc; font-size: 11px; letter-spacing: 1px; -webkit-border-radius: 8px; -moz-border-radius: 8px;} ul.page_button_content{} ul.page_button_content li{float: left; margin-right: 10px;} ul.page_button_content li a{display: block; padding: 8px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; text-transform: uppercase; color: #ccc; font-size: 11px; letter-spacing: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px;} ul.page_button_content li a:hover{color: #fff; text-shadow: 0px 0px 3pt rgba(255, 255, 255, 0.60);} ul.page_button_content li a.selected-page{margin-top: -1px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/color-styles/blue/layout/action-link.jpg) center repeat-x; border: 1px solid #7E9BC7; font-weight: bold; color: #fff;} ul.page_button_content li a.selected-page:hover{background-position: top;} /*-------------------------------------------------------------------------------------------*/ /*- DISQUS CLASSES ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .comment-container{clear: both; width: 560px; margin: 20px 0px 0px 60px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; -moz-border-radius: 8px; -webkit-border-radius: 8px;} .comments{min-height: 70px; padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.10); -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px;} h4.add-comment{color: #fff; font-weight: bold; padding: 10px; margin-bottom: 0px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; border-bottom: 1px solid rgba(0, 0, 0, 0.50); -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px;} /*-------------------------------------------------------------------------------------------*/ /*- NOTES CLASSES ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .notes-container{clear: both; margin: 10px 0px 0px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; width: 70px; float: right; -moz-border-radius: 4px; -webkit-border-radius: 4px;} .notes-container h4{font-size: 13px;} .notes-container h4.notes-title{padding: 10px; font-weight: bold; color: #fff; margin: 0px;} .notes-container h4.border{border-bottom: 1px solid rgba(0, 0, 0, 0.50);} .notes-container h4.notes-title a.hide-notes{float: right; cursor: pointer; padding: 3px 8px; margin-top: -2px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg-dark.png) repeat; color: #fff; font-size: 10px; font-weight: lighter; text-transform: uppercase; display: none; -webkit-border-radius: 6px; -moz-border-radius: 6px;} .notes-container ol li{padding: 10px; font-size: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.50); border-top: 1px solid rgba(255, 255, 255, 0.10);} .notes-container ol li a{float: left; display: inline-block; padding: 3px; margin-right: 10px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; border: 1px solid rgba(255, 255, 255, 0.20); -webkit-border-radius: 3px; -moz-border-radius: 3px;} .notes-container ol li a:hover{border: 1px solid rgba(255, 255, 255, 0.40);} .notes-container ol li a.tumblelog, .notes-container ol li a.source_tumblelog{float: none; padding: 5px 0px 0px; margin: 0px; background: none; border: none; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px;} .notes-container ol li a.source_tumblelog:hover, .notes-container ol li a.tumblelog:hover{ border: none;} .notes-container ol li:last-child{border-bottom: none;} /*-------------------------------------------------------------------------------------------*/ /*- RIGHT COLUMN ----------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ .content-area{margin-bottom: 30px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; -moz-border-radius: 8px; -webkit-border-radius: 8px;} .content{padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.10); -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px;} #right-column h4{color: #fff; font-weight: bold; padding: 10px; margin-bottom: 0px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.90); border-bottom: 1px solid rgba(0, 0, 0, 0.50); -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px;} #right-column p{font-size: 12px; margin-bottom: 0px; line-height: 20px;} .site-author{float: right; width: 35px; padding: 5px; margin: 0px -20px 10px 10px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; -moz-border-radius: 4px; -webkit-border-radius: 4px;} /*-------------------------*/ /*- META DATA -------------*/ ul.meta{margin-bottom: 30px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; -moz-border-radius: 8px; -webkit-border-radius: 8px;} ul.meta li{padding: 10px; line-height: 16px; font-size: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.50); border-top: 1px solid rgba(255, 255, 255, 0.10);} ul.meta li.meta-title{background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; font-size: 14px; font-weight: bold; color: #fff; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.90); -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px;} ul.meta li .tags a{display: block; float: left; display: block; padding: 3px 8px; margin: 0px 5px 5px 0px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/transparent-bg.png) repeat; text-transform: uppercase; color: #ccc; font-size: 9px; letter-spacing: 1px; text-shadow: 0px 1px 0pt rgba(0, 0, 0, 0.90); -webkit-border-radius: 6px; -moz-border-radius: 6px;} ul.meta li .tags a:hover{color: #fff; text-shadow: 0px 0px 2pt rgba(255, 255, 255, 0.90);} ul.meta li:first-child{border-top: none;} ul.meta li:last-child{border-bottom: none;} /*--------------------------------------------*/ /*- SEARCH -----------------------------------*/ .search-content{padding: 10px;} .search-bar{background: #fff; padding: 6px 6px; height: 22px; -moz-border-radius: 4px; -webkit-border-radius: 4px;} .search-form input.search{float: left; width: 150px; margin: 0px; padding: 2px 0px; background: none; border: none; line-height: normal;} .search-form input.search_button{float: right; display: block; margin: 0px; padding: 4px 3px; background: none; border: none; color: #fff; text-transform: uppercase; font-size: 10px; line-height: normal; background: #000; text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px;} /*--------------------------------------------*/ /*- TWITTER -----------------------------------*/ #tweets a{display: block; padding: 10px; font-size: 12px; line-height: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.50); border-top: 1px solid rgba(255, 255, 255, 0.10);} #tweets a:last-child{border-bottom: none;} /*--------------------------------------------*/ /*- SOCIAL BOOKMARKS -------------------------*/ ul.social-bookmarks{margin-top: 5px;} ul.social-bookmarks li{float: left; margin: 0px 10px 10px 0px !important; padding: 0px !important; border: none !important; list-style: none !important;} ul.social-bookmarks li a{display: block; width: 16px; height: 16px; background: url(http://cdn.byronrode.co.za/tumblr/micro-depth/images/layout/social-icons/social-set.png) no-repeat; text-indent: -9999px; overflow: hidden;} ul.social-bookmarks li a.rss {background-position: -0px -26px;} ul.social-bookmarks li a.cargo {background-position: -24px -26px;} ul.social-bookmarks li a.behance {background-position: -48px -26px;} ul.social-bookmarks li a.twitter {background-position: -72px -26px;} ul.social-bookmarks li a.facebook {background-position: -96px -26px;} ul.social-bookmarks li a.redux {background-position: -120px -26px;} ul.social-bookmarks li a.delicious {background-position: -144px -26px;} ul.social-bookmarks li a.magnolia {background-position: -168px -26px;} ul.social-bookmarks li a.tumblr {background-position: -192px -26px;} ul.social-bookmarks li a.posterous {background-position: -216px -26px;} ul.social-bookmarks li a.flickr {background-position: -240px -26px;} ul.social-bookmarks li a.yahoo {background-position: -264px -26px;} ul.social-bookmarks li a.stumble {background-position: -288px -26px;} ul.social-bookmarks li a.reddit {background-position: -312px -26px;} ul.social-bookmarks li a.linkedin {background-position: -336px -26px;} ul.social-bookmarks li a.friendfeed {background-position: -360px -26px;} ul.social-bookmarks li a.lastfm {background-position: -384px -26px;} ul.social-bookmarks li a.wave {background-position: -408px -26px;} ul.social-bookmarks li a.evernote {background-position: -432px -26px;} ul.social-bookmarks li a.backtype {background-position: -456px -26px;} ul.social-bookmarks li a.dropular {background-position: -480px -26px;} ul.social-bookmarks li a.ffffound {background-position: -504px -26px;} /*-------------------------*/ /*- HOVER -----------------*/ ul.social-bookmarks li a.rss:hover {background-position: -0px -0px;} ul.social-bookmarks li a.cargo:hover {background-position: -24px -0px;} ul.social-bookmarks li a.behance:hover {background-position: -48px -0px;} ul.social-bookmarks li a.twitter:hover {background-position: -72px -0px;} ul.social-bookmarks li a.facebook:hover {background-position: -96px -0px;} ul.social-bookmarks li a.redux:hover {background-position: -120px -0px;} ul.social-bookmarks li a.delicious:hover {background-position: -144px -0px;} ul.social-bookmarks li a.magnolia:hover {background-position: -168px -0px;} ul.social-bookmarks li a.tumblr:hover {background-position: -192px -0px;} ul.social-bookmarks li a.posterous:hover {background-position: -216px -0px;} ul.social-bookmarks li a.flickr:hover {background-position: -240px -0px;} ul.social-bookmarks li a.yahoo:hover {background-position: -264px -0px;} ul.social-bookmarks li a.stumble:hover {background-position: -288px -0px;} ul.social-bookmarks li a.reddit:hover {background-position: -312px -0px;} ul.social-bookmarks li a.linkedin:hover {background-position: -336px -0px;} ul.social-bookmarks li a.friendfeed:hover {background-position: -360px -0px;} ul.social-bookmarks li a.lastfm:hover {background-position: -384px -0px;} ul.social-bookmarks li a.wave:hover {background-position: -408px -0px;} ul.social-bookmarks li a.evernote:hover {background-position: -432px -0px;} ul.social-bookmarks li a.backtype:hover {background-position: -456px -0px;} ul.social-bookmarks li a.dropular:hover {background-position: -480px -0px;} ul.social-bookmarks li a.ffffound:hover {background-position: -504px -0px;} /*-------------------------------------------------------------------------------------------*/ /*- POSTS CLASSES ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /*- RESET SOME CLASSES FOR THE COPY AFTER CLEARING EVERYTHING AT THE TOP OF THE CSS -*/ .post .copy p{clear: none;} .post .copy ol, .post .copy ul{list-style: disc; margin: 0px 0px 10px 30px;} .post .copy ol li, .post .copy ul li{line-height: 22px; padding-bottom: 10px;} .post .copy ol{list-style: decimal;} .post .copy code, .post .copy pre{} .post .copy img{} .post .copy h2{line-height: 35px; margin-top: 20px;} .post .copy h3{margin-top: 20px;} .post .copy blockquote{border-left: 3px solid #e0e0e0; padding: 0px 20px 0px; margin: 15px 0px; font-style: italic; font-size: 13px;} /*-----------------------------------------------------------------------------------------------------------------------------------*/ /*- 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;}