/* ------------------------------------------------------------ Master Style Sheet Web Site: Offroading Home (NEW) Author: Robert R. Jarrett Date: 11 Aug 2009 Modified: 4 Nov 2009 ------------------------------------------------------------ */ /* ------------------------------------------------------------ Reset Styles (from meyerweb.com) ------------------------------------------------------------ */ 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; } /* ------------------------------------------------------------ General Styles ------------------------------------------------------------ */ body {font-family: "trebuchet MS", Arial; font-size: 63.5%; text-align: center; margin:0 auto; background: #4e4115 url(images/body_bg.jpg) repeat } h1 {padding-bottom: 6px; font-size: 1.9em; font-weight: normal; text-transform: none; } h2, h3, h4, h5, h6 {color:#991A05; font-weight: normal; } p {font-size: 14pt; margin-bottom: 5px; } em {font-type: italic; font-weight: bold; } .title {color:#4f0100; } /* ------------------------------------------------------------ General "Fixes" ------------------------------------------------------------ */ .clearfix :after {content: "."; height:0; width:0; visibility: hidden; display: none; clear: both; } .clearfix {display: inline-block; clear:both; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%; display: block; } /* End hide from IE-mac */ /* ------------------------------------------------------------ Top Bar Division (top navigation) Inserted as web component ------------------------------------------------------------ */ #topBar {height: 34px; padding: 0 30px; background: url('images/topBar_bg.jpg') repeat-x; border-bottom:8px solid #4F0100; } #primaryNav ul {width: 970px; text-align:center; margin:0 auto; } #primaryNav li {float: left; display: block; list-style: none; } #primaryNav li a {display: block; padding: 8px 9px; text-transform: uppercase; font: bold 9pt "trebuchet MS"; color: #bc8c31; text-decoration: none; } #primaryNav li a:hover, #home .home, #about .about, #resource .resource, #arizona .arizona, #utah .utah, #colorado .colorado, #california .california, #nevada .nevada, #offroad .allElse {background: url('images/topNav_hover_bg.jpg') repeat-x; } #utilityNav {float:right; color:#bc8c31; } #utilityNav li {list-style:none; float:left; display:block; width: 6em; margin:0; padding: 0; } #utilityNav li a {display:block; text-align: center; padding: 6px 0; color: #dacca5; text-decoration:none; font: bold 10pt "trebuchet MS"; } #utilityNav li a:hover {color: #bc8c31; } /* ------------------------------------------------------------ Page Division ------------------------------------------------------------ */ #page {position:relative; margin:0 auto; background: #4f4319 url('images/page_bg.jpg') repeat-y center; text-align: left; max-width: 1020px; height: 100%; } /* -------------------------------------------------------------- Content division Body class controls background image (low = room for callout, high = heading only) -------------------------------------------------------------- */ #content {position: relative; padding: 0 20px; } .low #content {background: url('images/content_bg.jpg') transparent top center no-repeat; } .high #content {background: url('images/contentLeft_bg.jpg') transparent top center no-repeat; } #resource #content {background: url('images/contentLeft_NProk_bg.jpg') transparent top center no-repeat; } #arizona #content {background: url('images/contentState_clivesDad_bg.jpg') transparent top center no-repeat; } #utah #content {background: url('images/contentState_amFkDad_bg.jpg') transparent top center no-repeat; } #nevada #content {background: url('images/contentState_oasisDad_bg.jpg') transparent top center no-repeat; } #california #content {background: url('images/contentState_ToqCab_bg.jpg') transparent top center no-repeat; } #colorado #content {background: url('images/contentState_Zions_bg.jpg') transparent top center no-repeat; } #offroad #content {background: url('images/contentState_Npaper_bg.jpg') transparent top center no-repeat; } /* ------------------------------------------------------------ Content: Heading division Includes "Slogan" subdivision ------------------------------------------------------------ */ #heading { padding: 15px 0 5px 40px; } /* There are two types of h2's in the heading division depending on which page type, the #slogan h2 below is more specific so overides if last */ #home #heading h1 {font-size: 36pt; font-weight: bold; color:#4f0100; font-family: Verdana, sans-serif; } #resource #heading h2, #about #heading h2, .state #heading h2 {font-size: 36pt; font-weight: bold; color:#4f0100; font-family: Verdana, sans-serif; } #heading h2 {margin:0.15em; padding:0; font-size: 4.5em; font-weight: bold; color:#4F0100; font-family:Verdana,sans-serif; } #slogan {text-align:left; background: url('images/blank.gif') transparent repeat; width:800px; } #home #slogan {height: 28px; /* cause "cycle plugin" needs a height */ } #slogan h2 {margin-left: 12px; font-family: "Times New Roman"; font-size: 17pt; color: #01015a; font-style: italic; font-weight: bold; width: 800px; } #slogan h1 {padding:0; margin:0 0 0 1em; font-family: "Times New Roman"; font-size: 26pt; color: #01015a; font-style: italic; font-weight: bold; } #slogan h1 span {font-size:18pt; } .state #slogan h1 {color: #dacca5 ; } /* ------------------------------------------------------------ Content: Main (left) division ------------------------------------------------------------ */ #main {clear:left; margin:230px 0 50px; padding-right: 325px; } .high #main {clear:left; margin:65px 45px 50px 25px; padding-right: 325px; } #main h2 {color: #991a05; margin-top: 10px; font-size: 14pt; padding-bottom:4px; font-weight:bold; background: url('images/headingTag_bg.gif') no-repeat scroll left bottom; } #main p {font-size: 12pt; } #about p {margin-bottom: 1.5em; } /* ------------------------------------------------------------- Boxlist styles ------------------------------------------------------------- */ #boxlist {padding: 1em; margin: 1em 20px 1em 20px; } #boxlist ol {text-align: left; font-size: 10pt; padding: 0 1em 1em; list-style-type: disc; font-weight:normal; margin: 0; } #boxlist ol li {margin-bottom: 0.25em; padding: 0; } #boxlist ol li a { } #boxlist ol li a:hover {color: #800000; text-decoration: none; } #boxlist li.heading {text-align: center; color: #01015a; margin: 0.5em 0; font-size: 1.4em; list-style-type: none; } #boxlist ol h5 {text-align:left; color:#991A05; font-weight: bold; font-size:10pt; margin:1em 0 0 0; padding:0; line-height:1em; } /* ------------------------------------------------------------ Content: Sidebar (right) division ------------------------------------------------------------ */ #sidebar {position:absolute; top: 150px; right: 20px; width:300px; background: url('images/Sidebar_bg.gif') no-repeat center top; padding: 0 8px 0 8px; z-index:100; } #sidebar h2 {text-align: center; color: #991a05; font-size: 14pt; margin-top: 15px; } #sidebar h3 {text-align: center; color: #000080; font-size: 12pt; } #sidebar p {text-align:left; color:black; padding: 0 10px 0 20px; } /* ------------------------------------------------------------ Content: Sidebar: Sidebox class division ------------------------------------------------------------ */ #sidebar div.sidebox {position: relative; margin: 0 -10px ; padding: 10px 15px 0 20px; text-align:left; } #sidebar div.sidebox img {float:left; width: 50px; margin: 0 5px; } #sidebar div.sidebox h3 { color: #fff; font-size: 13pt; margin: 0 0; } #sidebar div.sidebox p {color: #fff; padding-top: 5px; font-size: 8pt line-height: 0.9em; } #bottombar {position: absolute; bottom: 25px; left: 30px; } #bottombar em {padding-right: 8px; color:#bc8c31; font-weight:bold: } #bottombar a {text-decoration: none; color: #dacca5; font-size: 8pt; font-style: italic; } #bottombar a:hover {font-weight:bold; } /* -------------- Secondary classes of sidebox divisions for background purposes --------- */ div.red {background: url('images/red_bg.jpg') transparent top center no-repeat; height: 105px; } div.green {background: url('images/green_bg.jpg') no-repeat top center; height: 105px } div.salmon {background: url('images/salmon_bg.jpg') transparent top center no-repeat; height: 105px; } div.brown {background: url('images/brown_bg.jpg') transparent top center no-repeat; height: 105px; } /* ------------------------------------------------------------ Content: Sidebar: Blogposts - styling for ajax call for recent blog posts ------------------------------------------------------------ */ ul.itg, ul.doing { overflow: hidden; padding: 0 5px 5px; list-style-type: disc; list-style-position: inside; } ul.itg li, ul.doing li { padding: 0 10px 0 25px; margin-bottom: 5px; font-size: 9pt; font-style: italic; overflow: hidden; clear: both; } ul.itg li a, ul.doing li a { color: #1A1709; text-decoration: none; font-weight: bold; } ul.itg li a:hover, ul.doing li a:hover { color:#4d4629; text-decoration: underline; } ul.itg li a img.recent-image { float: left; margin: 0 5px 0 0; padding: 2px; border: 1px solid #ccc; background: #E9E9E9; -moz-border-radius: 2px; -webkit-border-radius: 2px; } /* ------------------------------------------------------------ Content: callout division ------------------------------------------------------------ */ #callout {position:absolute; top:115px; left: 0; width: 571px; /* 60% */ height: 191px; z-index:50; overflow: hidden; } /* #callout.dad {background: url('images/callout_dad.png') transparent no-repeat; } #callout.flattop {background: url('images/callout_flattop.png') transparent no-repeat; } #callout.gordon {background: url('images/callout_gordon.png') transparent no-repeat; } */ /* ------------------------------------------------------------ Google Ads: ------------------------------------------------------------ */ p.GoogleAds {margin: -20px 0 20px; text-align:center; padding: 1em; } div.sideads {text-align:center; padding: 1em; } /* ------------------------------------------------------------ ------------------------------------------------------------ */ /* ------------------------------------------------------------ Footer Division ------------------------------------------------------------ */ #footer {clear:both; width: 100%; background: #1A160A url('images/footer_bg.jpg') repeat-x top center; border-top: 6px solid #1A1709; color:#8f6b26; text-align:center; font-style:normal; font-variant:normal; font-weight:normal; font-size:8pt; font-family:trebuchet MS; padding:0 0 20px 0; } #footer div {border-top: 1px solid #dacca5; width: 90%; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; text-align: center; } #footer a {padding: 5px; color: #8f6b26; text-transform: uppercase; text-decoration: none; } #footer a:hover {text-decoration: underline; color: #dacca5 } #footer em {display: block; padding: 5px; margin-top: 10px; } #footer img#logo { float: left; margin-left: 20px; margin-right: 40px; } /* ------------------------------------------------------------ ------------------------------------------------------------ */