/* CSS Document */ * { margin:0; padding:0; } body { font: normal 12px verdana, arial, helvetica, sans-serif; color: #333; background:#964924 url(images/rubbish-removals.jpg) no-repeat scroll left top; } /* force HTML content to the edges */ html { margin: 0; padding: 0; } /* centralise content within a wrapper */ #wrapper { width: 750px; border: 1px solid #000; margin: 0 auto; background:#FFF url(images/homepage-bg.jpg) no-repeat scroll left 135px; } /* The method we use to centre the content is based on the fact that when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. In this case the width of #wrapper will be subtracted from the width of the browser window. To avoid problems that can occur in some browsers when the window is narrower than #wrapper we set the element’s min-width to the same value as the width of #wrapper. */ body { min-width:750px } /* Insert Header Content*/ #header { height: 108px; color: #603e23; } /* Insert Navigation Content - remember liberal use of margin values set to zero will help avoid annoying visual discrepencies */ #nav { background:#3f422f url(images/nav-bg2.gif) no-repeat scroll left top; padding:0px 10px; color: #FFF; height: 27px; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { margin:0; padding:10px; display:inline; line-height:26px; } #nav a:link, #nav a:visited { color: #FFF; text-decoration: none; } #nav a:hover { color: #e4ecb2; text-decoration: underline; } #rightCol { margin:0; padding:0; } /* Insert Left Column Content*/ #leftCol h2, #leftCol h3, #leftCol p { padding:10px 10px 10px 10px; } #leftCol { float: left; width: 400px; padding: 0px 0px 0px 30px; } /* Insert Right Column Content*/ #rightCol { float: right; width: 300px; padding: 450px 0px 0px 0px; } #rightCol h3, #rightCol p { padding:20px 20px 10px 20px; } /*- Menu --------------------------- */ ul { list-style: none; margin: 0; padding: 0; } img { border: none; } #menu { width: 200px; margin: 0px; border-style: solid solid none solid; border-color: #889944; border-width: 1px; } #menu li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #889944; display: block; background: url(images/menu11.gif); padding: 8px 0 0 25px; } #menu li a:hover, #menu li #current { color: #889944; background: url(images/menu11.gif) 0 -32px; padding: 8px 0 0 27px; } --> /* Insert Footer Content - The footer doesn’t get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow and doesn’t push elements that follow it down. In this case #footer will start right below #rightCol. To avoid this we use the clear property to tell the footer that it can’t have any elements next to it.*/ #footer { background-color: #727659; color:#FFF; clear:both; } #footer p { padding:5px; margin: 0; } /* begin header image backgrounds */ .homepage { background:#964924 url(images/banner-home.jpg) no-repeat scroll left top; height: 108px; } .general { background:#964924 url(images/banner-information.jpg) no-repeat scroll left top; height: 108px; } .contact { background:#964924 url(images/banner-contact.jpg) no-repeat scroll left top; height: 108px; } .environment { background:#964924 url(images/banner-environment.jpg) no-repeat scroll left top; height: 108px; } .services { background:#964924 url(images/banner-services.jpg) no-repeat scroll left top; height: 108px; } .locations { background:#964924 url(images/banner-locations.jpg) no-repeat scroll left top; height: 108px; } /* begin main image backgrounds */ #wrapper-services { width: 750px; border: 1px solid #000; margin: 0 auto; background:#FFF url(images/grunge-bg4.jpg) no-repeat scroll left 135px; } #wrapper-contact { width: 750px; border: 1px solid #000; margin: 0 auto; background:#FFF url(images/grunge-bg6.jpg) no-repeat scroll left 135px; } #wrapper-information { width: 750px; border: 1px solid #000; margin: 0 auto; background:#FFF url(images/grunge-bg8.jpg) no-repeat scroll left 135px; } #wrapper-environment { width: 750px; border: 1px solid #000; margin: 0 auto; background:#FFF url(images/grunge-bg9.jpg) no-repeat scroll left 135px; } #wrapper-locations { width: 750px; border: 1px solid #000; margin: 0 auto; background:#FFF url(images/grunge-bg10.jpg) no-repeat scroll left 135px; } /* begin styles */ .red { color:#d65012; font-weight:bold; } .green { color: #c7c74d; text-decoration:none; font-size:11px; } .white { color: #FFF; font-size:11px; } .spaced { font-family: arial, verdana, sans-serif; font-size: 11px; color: #86a294; text-transform: uppercase; letter-spacing: 5px; border: solid #86a294 1px; background-color: #f6f6f6; padding-left:10px; } .smallCaps { color: #c35b22; font-variant: small-caps; } h1 { line-height:30px; margin:0; padding:1em; font: normal 12px arial, helvetica, sans-serif; } h2 { line-height:11px; font: bold 12px verdana, arial, helvetica, sans-serif; } h3 { line-height:11px; font: bold 12px verdana, arial, helvetica, sans-serif; } .rubbish-removals h1{ text-transform:uppercase; color:#FF6600; font-size:14px; font-family:Arial, Helvetica, sans-serif; letter-spacing:3px; font-weight:bold; background-color:#FFFFFF; border:dotted 2px #ebebeb; }