/* NOTE: any * > selector rules are for standards-compliant browsers. The rule before will have a style that works in IE6. */ /* Table of Contents Non-displaying Elements Layout Page Specific Layout Typography and Inline Elements Page Specific Typography Navigation Specific Nav Button Styling Forms */ /* Non-displaying Elements*/ /* *************************************************************************************** */ #branding-logo img {display:none;} #nav-main a {text-indent:-9999px; overflow:hidden} /* moves text inside menu anchors off screen. Remove if not using graphics for menu links. */ /* Layout */ /* *************************************************************************************** */ html { background: url(../images/layout/bg.png) repeat; } body { font-size:0.875em; /* makes font a specific size... must find it... */ text-align:center; background: url(../images/layout/top_tile_bg.png) repeat-x scroll center top; } #container { height:auto; margin:0 auto; position:relative; text-align:left; width: 918px; } #branding { background: url(../images/layout/branding.png); height: 225px; width: 908px; float:left; position:relative; clear:both; margin-left:5px } #content { background: url(../images/layout/content_bg.png); margin-top: 40px; padding: 40px 60px 60px; position:relative; float:left; clear:both; width:798px } #content-main {width:60%; float:left;} #content-sidebar { width:35%; float:right; padding-left: 2.5%; border-left: 1px dotted #8896A3; } #footer { background: url(../images/layout/footer_bg.png) no-repeat center bottom; height: 30px; margin-bottom: 60px; padding: 70px 60px 0; font-size: 0.8em; float:left; clear:both; width:798px } .column {width:48%} /* Page Specific Layout */ /* use a class on the body to change specific parts of the layout based on portions of the website (e.g. user vs. admin) */ .equipment {clear:both; margin-left:-30px; overflow:hidden;} .equipment .item {width:244px;float:left; padding:10px 0 0; margin: 0 0 0 30px; border-top:solid 1px #E7E7EA; border-bottom:solid 1px #E7E7EA;} .equipment .item img{display:inline-block; background:silver;} .equipment .item span {width:244px; height:168px; overflow:hidden;display:block;} .equipment .item span img {width:100%} .equipment h3 a {text-decoration:none;} .equipment a {display:block; margin-bottom:10px;} .equipment p { margin:0; height: 3.75em; overflow:hidden } .equipment .item:hover {background-color:#E7E7EA} .item + .item + .item + .item {border-top:none;} #product_photos {clear:both; margin-left:-30px; overflow:hidden;margin-left:-3%} #product_photos img {display:inline-block; padding:0; margin: 10px 0 0 30px; margin-left:3%} .business_location { clear: both; float: right; margin-bottom: 1em; width: 100%; padding-bottom: 1em; border-bottom: 1px dotted #CCC; } .business_location iframe { width: 399px; height: 200px; margin-left:1em; float: right; clear:both; border: 1px solid #CCC; } /* Typography and Inline Elements */ /* *************************************************************************************** */ #content-sidebar:last-child, #content-sidebar ul:last-child {margin-bottom:0;} img.right { margin-right:-39px; } /* Page Specific Typography */ /* use a class on the to change specific typographic elements (e.g.

backgrounds) / .layout-home h1 {} / Navigation / / placement of navigation / / *************************************************************************************** / #nav-main { position: absolute; height: 32px; top: 225px; width:913px; background: url(../images/layout/content_top.png) no-repeat left bottom; padding-bottom: 8px; padding-left:5px; overflow: hidden; margin:0; left:0; } #nav-main ul, #nav-main li {/ fix IE6 and IE7 List bug / display: inline; } / Specific Nav Button Styling / / used if buttons use images instead of text or combined with text / #nav-main a { background-image:url(../images/layout/nav-main.png); background-repeat:no-repeat; height:32px; display:block; float:left; margin-left:3px} a#btn-home {background-position:0px top; width:62px;} a#btn-transport_services {background-position:-674px top; width:166px;} a#btn-employment {background-position:-65px top; width:115px} a#btn-about {background-position:-183px top; width:99px} a#btn-for_sale {background-position:-285px top; width:167px} a#btn-contact_info {background-position:-455px top; width:118px} a#btn-locations {background-position:-576px top; width:95px} a#btn-home:hover {background-position:0px bottom;} a#btn-transport_services:hover {background-position:-674px bottom;} a#btn-employment:hover {background-position:-65px bottom;} a#btn-about:hover {background-position:-183px bottom;} a#btn-for_sale:hover {background-position:-285px bottom;} a#btn-contact_info:hover {background-position:-455px bottom;} a#btn-locations:hover {background-position:-576px bottom; width:95px} #nav-secondary { float:left; list-style:none; overflow:hidden; margin-left:-30px; font-size: 0.9em; line-height: 1.4em; } #nav-secondary li {width:244px; height:180px; float:left; padding:0 0 0; margin: 0 0 0 30px; border-top:solid 1px #E7E7EA; border-bottom:solid 1px #E7E7EA;} #nav-secondary li:hover {background-color:#E7E7EA} #nav-secondary h2 { margin:.125em 0 .25em; font-size: 1.4em; } #nav-secondary a {text-decoration:none; color:#333} #nav-secondary li img {width:244px; height: 100px; display:block; background-color:#EDEDED} / TEMP / / Forms / / some of these classes and styles are applied during validation. .validation_error gets applied by the JavaScript validation or by the PHP validation. / / *************************************************************************************** */ form {width:auto;margin: 0 0 1em 0;} form .row {clear:both;} #content form .row {margin:0 0 .5em; padding:0} label {display:block;} textarea, input {width:100%} textarea, input, select {margin:0 .25em 0 0; border:solid 1px #D6D6D6; padding:0.25em;} form div.buttons { text-align:left; display:block; float:none; clear:both; } form div.buttons input { background-color:#EDEDED; color:#0055A6; cursor:pointer; font-size:0.9em; height:auto; line-height:normal; text-transform:lowercase; width:auto; padding: .25em 2em; border:solid 1px #0055A6 } form div.buttons input:hover, form div.buttons input:active, form div.buttons input:focus { background-color:#0055A6; color:#fff; border:solid 1px #0055A6; } form .row .note {display:block;} p.validation_error {text-align:center;color:#EE2E24;} form .row .validation_error { display:block; color:#EE2E24; font-size:.9em; padding-left: 20px; background: url(../images/layout/validationErrorArrow.png) no-repeat 0 10px; } form .row label .note {display:inline; padding:0}