/************************************************************************************************************* ************************************************************************************************************** Title: CSS Author: Hiram Hibbard, Diamond Valley Web Design Date: 1/23/2009 ************************************************************************************************************** 1. Global Reset 2. HTML 3. Layout 3.1 Header 3.2 Content 3.3 Footer 4. Classes 5. Page-Specific ************************************************************************************************************** **************************************************************************************************************/ /* 1. Global Reset ************************************************************************************************************** **************************************************************************************************************/ 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, dd,dl,dt,fieldset,form,label,legend, table,caption,strong,tbody,tfoot,thead,tr,th,td {margin:0 auto; padding:0; border:0; font-size:100%; line-height:1; font-family:inherit; text-align:left;} table {border-collapse:collapse; border-spacing:0;} caption, th, td {text-align:left; font-weight:normal;} h1, h2, h3, h4, h5, h6 {font-weight:normal;} /* 2. HTML ************************************************************************************************************** **************************************************************************************************************/ body {background:url(images/background_top.jpg) top center no-repeat #83B5E8; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:center; color:#682A1B;} a, a:visited {color:#2B891C; text-decoration:underline; font-weight:bold;} a:hover {color:#ADBD03;} p {line-height:18px; margin:0 auto; padding:10px 0;} h2, h3, h4 {font-weight:bold; margin:0 auto; padding:0;} h2 {font-size:26px;} h3 {font-size:20px;} h4 {font-size:16px; padding:10px 0;} ul {margin:0 auto; padding:0;} /* 3. Layout ************************************************************************************************************** **************************************************************************************************************/ #wrap {background:url(images/background_bottom.png) bottom no-repeat; width:100%; padding-top:74px; height:auto;} /* 3.1 Header **************************************************************************************************************/ #banner {background:url(images/top.png); width:872px; height:355px; overflow:hidden;} h1#logo {width:278px; height:264px; padding:0; margin:0 auto; float:left;} h1#logo a {width:278px; height:0; padding-top:264px; overflow:hidden; display:block; clear:both;} #flashBox {background:url(images/toppic.png); width:550px; height:276px; float:right; display:inline; margin:26px 30px 0 auto;} ul#navigation {width:838px; height:15px; display:block; text-align:center; margin:0 auto; padding:8px 0 0 35px; clear:both; font-size:16px; font-weight:bold; clear:both;} ul#navigation li {display:block; float:left; overflow:hidden; list-style:none; margin:0 auto; padding:0;} ul#navigation li a {display:block; float:left; height:15px; text-indent:-9999px; overflow:hidden;} #homeButton, #homeButton a {background:url(images/home_button.gif); width:68px;} #homeButton a:hover {background:url(images/home_button_active.gif);} #lifestyleButton, #lifestyleButton a {background:url(images/lifestyle_button.gif); width:153px;} #lifestyleButton a:hover {background:url(images/lifestyle_button_active.gif);} #ranchButton, #ranchButton a {background:url(images/ranch_button.gif); width:209px;} #ranchButton a:hover {background:url(images/ranch_button_active.gif);} #agistingButton, #agistingButton a {background:url(images/agisting_button.gif); width:112px;} #agistingButton a:hover {background:url(images/agisting_button_active.gif);} #servicesButton, #servicesButton a {background:url(images/services_button.gif); width:156px;} #servicesButton a:hover {background:url(images/services_button_active.gif);} #contactButton, #contactButton a {background:url(images/contact_button.gif); width:106px;} #contactButton a:hover {background:url(images/contact_button_active.gif);} /* 3.2 Content **************************************************************************************************************/ #content {background:url(images/texture.png) repeat-y; width:872px; clear:both; overflow:hidden;} #content ul {margin:0 10px; padding:0 30px;} #content ul li {padding:5px 0; line-height:18px;} #leftCol {width:600px; float:left; display:inline; margin:10px 0 0 35px;} #leftCol p {padding-right:10px;} #leftCol h2 {border:2px dashed #9E7D57; display:block; width:560px; height:35px; margin:0 auto 10px; padding:10px 10px 0 15px; float:left;} #rightCol {background:#fff; border:2px solid #A47D54; width:198px; float:right; display:inline; margin-right:35px; margin-top:10px;} #rightCol p {padding:10px;} /* 3.3 Footer **************************************************************************************************************/ #footer {background:url(images/hills_front.png) no-repeat; width:872px; height:325px; clear:both; overflow:hidden;} #footer p {float:left; display:inline;} .footerLeft {margin:20px 70px 0 50px;} .footerMiddle {width:132px; height:80px; text-indent:-9999px; display:block;} .footerMiddle a {width:132px; height:80px; text-indent:-9999px; display:block;} p.footerRight {margin:20px 0 0 70px;} /* 4. Classes ************************************************************************************************************** **************************************************************************************************************/ .clear {clear:both;} .clearLeft {clear:left;} .clearRight {clear:right;} .alignLeft {text-align:left;} .alignCenter {text-align:center;} .alignRight {text-align:right;} .floatLeft {float:left; display:inline;} .floatRight {float:right; display:inline;} .listImagePad {margin-right:10px;} .sidebarPic {padding:10px 10px 0 10px !important; margin:0 auto;} .borderPic {border:2px solid #A47D54;} /* 5. Page Specific ************************************************************************************************************** **************************************************************************************************************/ #index #homeButton a {background:url(images/home_button_active.gif);} #lifestyle #lifestyleButton a {background:url(images/lifestyle_button_active.gif);} #ranch #ranchButton a {background:url(images/ranch_button_active.gif);} #agisting #agistingButton a {background:url(images/agisting_button_active.gif);} #services #servicesButton a {background:url(images/services_button_active.gif);} #contact #contactButton a {background:url(images/contact_button_active.gif);} #services #content ul {margin:0 10px; padding:0 30px;} #services #content li {padding:10px 0; line-height:18px;} #lifestyle #flashBox {background:url(images/top_lifestyle.png);} #ranch #flashBox {background:url(images/ranchtop.png);} #agisting #flashBox {background:url(images/top_agisting.png);} #services #flashBox {background:url(images/top_services.png);} #contact #flashBox {background:url(images/top_hello.png);}