/* Theme Name: wrg_theme, Theme URI: http://wrgradio.com, Description: 1st draft, Author: Brandon Brown, Version: 1, */ /* Colors Dark Grey: #333333 Regular Grey: #222222 Light Grey: #777777 Special Grey #f5f5f5 Orangish Red #CC3300 Dark Orangish Red: #660000 */ /* RESET AND BASICS ----------------------------------------- */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 13px/1.4 Verdana, "Lucida Grande", Arial, Helvetica, Sans-Serif; } a { text-decoration: none; outline: none; color: #3680a1; } a:hover { color: #333333; } a:active { outline: 0; position: relative; top: 1px; } a img { border: 0; background: none; } img { vertical-align: middle; } .floatLeft {float: left;} .floatRight {float: right;} .clear { clear: both; } br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ /* CLEAR FIX*/ .clearfix:after {content: " "; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ ::selection { background: #ffcc89; color: #222; } ::-moz-selection { background: #ffcc89; color: #222; } .button { background: #555 url(/images/button-bg.png) top left repeat-x !important; color: white !important; font-weight: bold; font-size: 12px; -moz-border-radius: 6px !important; -webkit-border-radius: 4px !important; border: 0 !important; letter-spacing: -1px; padding: 4px 8px 3px 8px !important; } .button:hover { background: #333333 !important; cursor: pointer; } .last { margin-right: 0 !important; } .screen-reader-text { position: absolute; left: -9999px; top: -9999px; } ul {list-style: none;} div, ul, li { position:relative } /* This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */ /* GENERAL TYPOGRAPHY ----------------------------------------- */ body { font: 13px/1.2 Georgia,"Times New Roman",Times,Serif; color: #666; text-align: left;} img { border : 1px solid #111; } a { text-decoration : none; color : #cc3300; } a:hover { text-decoration : none; color : #660000; } b, strong { font-weight : bold; letter-spacing : 0.035em; } h1, h2, h3, h4, h5 { font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif; letter-spacing: -0.5px; line-height: 1.2; font-weight: normal; margin: 0 0 10px 0;color : #333333; } h2 { font-size: 30px; } h2 a, h2 a:visited { color: #333333; } h2 a:hover { color: #660000; } h3 { font-size: 20px; } h4 { font-size: 18px; font-style: italic; } h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.065em; border-bottom: 1px solid black; margin: 0 0 12px 0; } .subtitle { color: #999; border-color: #999; } p, li, dd { color: #333; } p, dd { margin: 0 0 12px 0; } li { margin: 0 0 5px 0; } td, th { font: 11px/19px Georgia,"Times New Roman",Times,Serif; text-align: left; } blockquote { padding: 0 0 0 12px; margin: 0 0 12px 12px; border-left: 2px solid #ccc; } blockquote, blockquote p { font: italic 12px/18px Georgia,"Times New Roman",Times,Serif; } .alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes.*/ .single-post-desc {font-size: xx-small;} #footer, #footer p, #footer a, #footer a:visited, #footer h1, #footer h2, #footer h3, #footer h4 { color: #f2f2f2; } #footer a:hover { color: #f5f5f5; } /* LAYOUT ----------------------------------------- */ html body { margin : 0; padding : 0; } #body-background{ margin : -58px 0 0 0; padding : 0; background: transparent url(/images/boombox.png) no-repeat center top; padding-top: 200px; } #logo { padding-top: 5px; } #logo a { float: left; text-indent: -9999px; width: 600px; height: 60px; display: block; overflow : hidden; background : url(/images/wrg_logo.gif) no-repeat top left; } #header { height: 60px; margin-bottom: 10px; } #searchform { float: right;} #tag-list { width: 90px; float: left; text-align: right; padding-right: 20px;} #tag-list ul li a { font-size: 11px; color: #777; background-color: #eee; } #tag-list ul li a:hover, #tag-list ul li a:active { color: #660000; background-color: #ccc; } #page-wrap { width: 1150px; margin: 0px auto -150px; min-height: 100%; height: auto !important; height: 100%;} /* the bottom margin is the negative value of the sticky footer's height */ #footer, #push { height: 150px; /* for sticky footer .push must be the same height as .footer */ } #leaderboard { height: 125px; width: 100%; background: transparent url("/images/leaderboard_bg.gif") repeat-x 0 0; } #content-area { padding: 10px; float: left; width: 700px; background-color: #ddd; text-align: center; } .pagebar { float: left;} #next-posts-link { float: left;} #sidebar { float: right; width: 290px; overflow: visible; padding-left: 10px;} #footer { background: url(/images/boombox.gif) no-repeat bottom center; } #footer-wrap { width: 1000px; margin: 0 auto; padding-top: 20px; } #post-wrap { float: left; width: 645px; } /* MENU STYLES */ ul#menu {display: inline; margin: 0; padding: 0;} ul#menu li { display: inline; position : relative; margin : 0; padding-right : 5px; list-style: none; } ul#menu a { margin : 0 20px 0 0; padding : 0; font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif; font-size : 16px; line-height : 20px; font-weight : normal; } ul#menu li a:hover { color : #cc3300; } ul#menu li a.active, ul#menu li a.active:hover { color : #cc3300; } #tag-nav { clear:both; font-family:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif; font-size:14px; padding:10px 0 10px 10px; text-transform:lowercase; } /*CUSTOM HEADERS*/ div .conditional-header {float: left;display: block; width: 645px;height: 135px; margin-bottom: 20px;} div #SA-2010 { background: transparent url(/images/SA_2010_header.jpg) no-repeat top left;} /* POST STYLES */ .post { float: left; width: 680px; padding: 10px; margin: 0 auto 10px; background-color: #eee; text-align: left;} .datebox { display: inline; height : 35px; width : 29px; padding: 3px 3px;color: #777777; font-weight: bold; line-height: 0.15em; } .datebox .day {font-size: 14px;} .datebox .month {font-size: 11px; text-transform: uppercase; line-height: 0.09em;} .post-title h2 {line-height: 30px; font-weight: bold; } .post-info {padding-bottom: 10px; text-transform: lowercase; } .post img {padding: 10px;} .post p{ font-size:14px; line-height:170%;margin-bottom:1.2em;} .post-category { font-size: 14px; text-transform: lowercase; } .tags { clear:both; font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif; font-size: 14px; text-transform: lowercase; } .tags strong { color: #777;} /* SIDEBAR STYLES*/ #sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5 { font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif; text-transform: lowercase; font-weight:300; letter-spacing: -0.5px; } #sidebar h2 { border-top:3px solid #DEDEDE; clear:both; font-size:20px; line-height:20px; margin:0 0 12px; padding:6px 0 0; } .sidebar-box { margin-bottom:50px; } .sidebar-box li { border-top:1px solid #DEDEDE; display:block; font-size:13px; line-height:1; padding:8px 6px 6px 5px; margin: 0; } .sidebar-box li:hover, #wrg-everywhere li:hover {background-color: #EFEFEF; } .sidebar-box p { font-size:13px; line-height:1; padding:8px 6px 6px 5px; margin: 0; display: none;} #wrg-everywhere li {padding-left: 25px;} #sidebar-fb-link { background: transparent url(/images/icons/fb20x20_bw.png) no-repeat center left; } #sidebar-twit-link { background: transparent url(/images/icons/twit20x20_bw.png) no-repeat center left; } #sidebar-rss-link { background: transparent url(/images/icons/rss20x20_bw.png) no-repeat center left; } /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */ .aligncenter { display:block; margin:0 auto } .alignleft { float:left } .alignright { float:right } .wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px } /* Font stack options The following represents a list of font stacks, as recommended by Nathan Ford in http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ I've added inverted commas around the relevant family names to ensure compatibility. p = balanced for paragraphs or body copy t = balanced for headlines or titles - - - - Arial, "Helvetica Neue", Helvetica, sans-serif - p, t Baskerville, "Times New Roman", Times, serif - p Baskerville, "Times, Times New Roman", serif - t Cambria, Georgia, Times, "Times New Roman", serif - p, t "Century Gothic", "Apple Gothic", sans-serif - p, t Consolas, "Lucida Console", Monaco, monospace - p, t "Copperplate Light", "Copperplate Gothic Light", serif - p, t "Courier New", Courier, monospace - p, t "Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif - p, t Futura, "Century Gothic", "Apple Gothic", sans-serif - p, t Garamond, "Hoefler Text", "Times New Roman", Times, serif - p Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif - t Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif - p Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - t Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif - p Georgia, Times, "Times New Roman", serif - t GillSans, Calibri, Trebuchet, sans-serif - p GillSans, Trebuchet, Calibri, sans-serif - t "Helvetica Neue", Arial, Helvetica, sans-serif - p Helvetica, "Helvetica Neue", Arial, sans-serif - t Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif - p, t "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - p, t Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif - p Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif - t "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif Tahoma, Geneva, Verdana - p Tahoma, Verdana, Geneva - t Times, "Times New Roman", Georgia, serif - p, t Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif - p Trebuchet, Tahoma, Arial, sans-serif - t Verdana, Geneva, Tahoma, sans-serif - p Verdana, Tahoma, Geneva, sans-serif - t */