/* -------------------------------------------------- {$company_name} - Screen base styles Author: James Hill, SonicIQ - [soniciq.com] -------------------------------------------------- */ /* = Clearfix -------------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ body { margin: 0; padding: 0; font: small Verdana, sans-serif; text-align: center; color: #666; line-height: 1.4em; } #wrapper { font-size: 85%; background-repeat: repeat-x; } #w2 { width: 760px; margin: 0 auto; padding-left: 5px; text-align: left; position: relative; background-color: #fff; background-repeat: repeat-y; backgroung-position: 0 0; } #w3 { padding-right: 6px; background-color: #fff; background-repeat: repeat-y; background-position: 100% 0; } /* Fluid Layout -------------------------------------------------- */ body.fluid { background-position: 0 0; } .fluid #wrapper { padding: 20px 24px 0; background-position: 0 0; } .fluid #w2 { width: auto; } /* Fixed Layout -------------------------------------------------- */ body.fixed { background-position: 50% 0; } .fixed #wrapper { padding: 20px 0 0; background-position: 50% 0; text-align: center; } .fixed #w2 { /* 768 - 5 due to negative margins */ width: 763px; text-align: left; } /* = Column arrangement classes -------------------------------------------------- */ .c-ms #wrapper { } .c-sm #wrapper { } /* = Links -------------------------------------------------- */ a { color: #469; text-decoration: none; border-bottom: 1px dotted #bbb; } a:visited { color: #89c; text-decoration: none; border-bottom: 1px dotted #bbb; } a:hover { color: #036; border-bottom-style: solid; } a img { border-width: 0; } /* = Misc -------------------------------------------------- */ p, form, h1, h2, h3, h4, h5, h6 { font-weight: normal; padding: 0; margin: 0; } p { margin-bottom: 1.5em; } h1 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 200%; } h1.pageTitle{ padding-bottom: 15px; } h2 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 150%; margin-bottom: 1em; } h3 { font-family: "Trebuchet MS", Verdana, sans-serif; padding-bottom: .2em; margin: 1.2em 0 1em; font-size: 130%; color: #666; border-bottom: 1px solid #eaeaea; } h3 a:link, h3 a:visited { font-size: 130%; text-decoration: none; border-bottom: none; } h3 a:hover { color: #036; } h4, h5, h6 { font-family: "Trebuchet MS", Verdana, sans-serif; margin: 1em 0; color: #333; } h4 { font-size: 120%; } h5 { font-size: 110%; } h6 { font-size: 105%; } blockquote { margin: 1.5em; padding: 1.3em 1.6em .5em; background: #f5f5f5; border: 1px solid #ddd; } blockquote cite { font-style: normal; } code { color: #8ac; font-size: 130%; line-height: 1.2em; text-align: left; } code strong { color: #469; } abbr, acronym { font-style: normal; border-bottom: 1px dotted #aaa; cursor: help; } a abbr { border: none; } em { font-style: italic; } strong { font-weight: bold; } del { text-decoration: line-through; color: #999; } ins { text-decoration: none; font-style: italic; } address { margin: 0; padding: 0; font-style: normal; } /* = Header -------------------------------------------------- */ #header { position: relative; background-position: 0 0; background-repeat: repeat-x; } #header h1 { margin-bottom: .2em; } #header h1 a { border-bottom: none; } #header h2 { color: #666; font-size: 125%; margin-bottom: 0; } #logo { float: left; position: relative; left: -5px; padding: 30px 30px 24px; background-position: 0 0; background-repeat: no-repeat; } /* = Search -------------------------------------------------- */ #search { position: relative; width: 29%; float: right; padding: 38px 16px 30px 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; margin-right: -6px; } #search-results { position: absolute; z-index: 100; width: 100%; height: auto; text-align: left; } #search-panel { position: relative; margin: 0 16px 0 2px; } #search-panel ul { margin: 0; padding: 0; list-style: none; } #search-panel ul li { margin: 0; padding: 0; display: block; } #search-panel ul li a { display: block; padding: 2px 6px; border-width: 0; } #search-panel ul li a:hover { background: #e5e5e5; } /* Rules for the top corners and border */ #search-panel .bt { background: url(../images/bg_search_results.png) no-repeat 100% 0; margin: 0 0 0 16px; height: 10px; } #search-panel .bt div { height: 10px; width: 16px; position: relative; left: -16px; background: url(../images/bg_search_results.png) no-repeat 0 0; } /* Rules for the bottom corners and border */ #search-panel .bb { background: url(../images/bg_search_results.png) no-repeat 100% 100%; margin: 0 0 0 16px; height: 16px; } #search-panel .bb div { height: 16px; width: 16px; position: relative; left: -16px; background: url(../images/bg_search_results.png) no-repeat 0 100%; } /* Insert the left border */ #s1 { padding: 0 0 0 16px; background: url(../images/bg_search_results_left.png) repeat-y 0 0; } /* Insert the right border */ #s2 { padding: 0 16px 0 0; background: url(../images/bg_search_results_right.png) repeat-y 100% 0; } /* Content */ #s3 { background: url(../images/bg_search_results_fill.png); } #search-close { display: block; position: absolute; height: 13px; width: 13px; overflow: hidden; text-indent: -5000px; margin-top: 8px; right: 26px; z-index: 200; background: url(../images/bg_close.gif) no-repeat 0 0; border-width: 0; } #search_spinner { position: absolute; padding: 2px; } /* Hide the search label as it's dealt with in javascript */ #sform { margin-left: 10px; position: relative; } #sform label { display: none; } #q_proxy_safari { width: 70%; } #q_proxy { font-size: 100%; width: 70%; color: #999; border: 1px solid #ddd; border-top-color: #aaa; border-left-color: #aaa; padding: 3px 5px 3px 20px; background: url(../images/bg_magnify.gif) no-repeat 4px 50%; } #q_proxy.active { color: #000; border: 2px solid #bec8d3; padding: 2px 4px 2px 19px; background-position: 3px 50%; } /* = Preferences -------------------------------------------------- */ #preferences { position: absolute; display: block; list-style: none; margin: 0; padding: 0; height: 13px; top: 12px; right: 2px; width: 55px; } #preferences li { display: block; float: left; margin: 0; padding: 0 4px 0 0; } #preferences li a { display: block; width: 13px; height: 13px; border-width: 0; text-indent: -5000px; overflow: hidden; } #preferences #layout-options { background: #ddd url(../images/bg_options.gif) no-repeat 0 0; margin-right: 4px; } #preferences #layout-fixed { background: #ddd url(../images/bg_fixed.gif) no-repeat 0 0; } #preferences #layout-fluid { background: #ddd url(../images/bg_fluid.gif) no-repeat 0 0; } #theme-panel { position: absolute; top: 12px; right: 57px; width: 57px; height: 13px; } #theme-panel ul { margin: 0; padding: 0; list-style: none; width: 57px; height: 13px; } #theme-panel ul li { display: block; float: left; margin: 0; padding: 0 0 0 2px; } #theme-panel li a { display: block; width: 15px; height: 13px; border-width: 0; text-indent: -5000px; overflow: hidden; } #theme-panel #cs0_swatch { background: #ddd url(../images/cs0_swatch.gif) no-repeat 0 0; } #theme-panel #cs1_swatch { background: #ddd url(../images/cs1_swatch.gif) no-repeat 0 0; } #theme-panel #cs2_swatch { background: #ddd url(../images/cs2_swatch.gif) no-repeat 0 0; } /* = Structure -------------------------------------------------- */ #w3, { clear: both; } #content { overflow: hidden; background-repeat: repeat-y; background-position: 100% 0; margin-right: 10px; } * html #content { float: left; } #maincol { float: left; width: 71%; } #mc2 { margin: 0 12px; } #subcol { float: right; width: 29%; line-height: 1.4em; background-repeat: repeat-y; background-position: 0 0; padding-bottom: 32767px !important; margin-bottom: -32767px !important; overflow: hidden; } #sc2 { margin: 0 8px; padding: 2px; background-repeat: repeat-y; background-position: 0 0; padding-bottom: 32767px !important; margin-bottom: -32767px !important; } /* Top border */ #subcol .bt { background-repeat: no-repeat; background-position: 100% 0; margin: 0 0 0 8px; height: 8px; } #subcol .bt div { background-repeat: no-repeat; background-position: 0 0; position: relative; left: -8px; height: 8px; width: 8px; } /* Bottom border */ #subfoot { clear: both; margin-right: 10px; } #subfoot .bb { width: 29%; float: right; background-repeat: no-repeat; background-position: 100% 100%; height: 8px; margin-bottom: 10px; } #subfoot .bb div { background-repeat: no-repeat; background-position: 0 100%; height: 8px; width: 8px; } /* Sidebar nodes */ #subcol .sidebar-node { background-color: #eee; margin-bottom: 10px; } #subcol .sidebar-node h3 { font-size: 100%; border-width: 0; background-repeat: no-repeat; background-position: 0 0; background-color: #ddd; margin: 0; padding: 12px 8px 4px 24px; } #subcol .sidebar-node ul { margin: 0; padding: 8px 0 10px; font-size: 95%; list-style: none; background-repeat: no-repeat; background-position: 100% 100%; } #subcol .sidebar-node ul li { margin: 0; padding: 2px 11px 2px 24px; background-repeat: no-repeat; background-position: 13px 50%; } #subcol .sidebar-node ul li a { border-width: 0; } #subcol .sidebar-node ul li em { color: #666; } /* = Footer -------------------------------------------------- */ #footer { clear: both; padding-top: 0; border-bottom: 1px solid #fff; } #footer p { background-color: #f5f5f5; margin: 0; padding: 10px 20px; border-top: 1px solid #ddd; color: #777; } /* Fix IE-Win but hide from IE5-Mac \*/ * html #footer p { height:1%; } /* Resume IE5-Mac */ #footer a, #footer a:visited { color: #666; border-color: #444; } #footer a:hover { color: #933; border-color: #b55; } /* Tables -------------------------------------------------- */ table { margin: 0 0 1.4em 0; border: 1px solid #ccc; color: #666; } table caption { text-align: left; font-weight: bold; padding-bottom: .5em; } th, td { padding: 3px 5px; padding: 3px 5px; } th { border-bottom: 1px solid #ccc; padding: 5px; border-left: 1px dotted #ccc; text-align: left; background: #f5f5f5; } th:first-child { border-left:none; } td { text-align: left; border-left: 1px dotted #ccc; border-bottom: 1px dotted #ccc; } /* Posts -------------------------------------------------- */ .post { position: relative; padding-bottom: 16px; } /* For some bizarre reason IE Win needs a width to be able to position absolute inside relative */ * html .post { width: 100%; } .post .post-title { color: #fff; background-repeat: no-repeat; background-position: 100% 100%; background-color: #999; margin: 0 0 0 26px; padding-bottom: 5px; } .post .post-title h1 { display: block; font-size: 125%; color: #fff; background-repeat: no-repeat; background-position: 100% 0; background-color: #aaa; padding: 5px 36px 0; } * html .post .post-title h1 { height: 1%; } .post .post-title h1 a { color: #fff; border-width: 0; } .post .auth { display: block; color: #888; margin: 0; padding: 5px 0 0; text-align: right; font-size: 95%; line-height: 1.2em; } .post .auth em, .post .auth em span { display: block; width: 52px; color: #666; text-align: center; font-family: "Trebuchet MS", Verdana, sans-serif; font-style: normal; line-height: 1.3em; } .post .auth em { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: 0 0; background-color: #fff; padding: 7px 0 0; text-transform: uppercase; } .post .auth em span { background-repeat: no-repeat; background-position: 0 100%; background-color: #eee; padding: 1px 0 4px; font-size: 150%; } .post-body { clear: both; padding: 16px 16px 10px; line-height: 1.6em; } .post .meta { margin: 4px 16px 10px; padding: 6px 10px; background: #f5f5f5; border: 1px solid #ddd; } .post .meta strong { font-weight: normal; }