html {width:100%; } body {background:#223500 url('../images/body-bg.jpg') repeat-x 0 0; margin:0; padding:0; font-family:"Trebuchet MS", Verdana, Arial, "Times New Roman", serif; font-size:80%; color:#000000; width:100%; } p {padding:0 0 15px 0; margin:0; line-height:140%; } h1 {margin:0; padding:0; font-size:130%; font-weight:normal; } h2 {margin:0; padding:0 0 20px 0; font-size:140%; font-weight:normal; } /*link styling*/ a {color:#000000; text-decoration:underline; } a:hover {text-decoration:none; } #footer a {color:#637076; } /*structural elements*/ .section {text-align:center; width:100%; border-bottom:1px solid #637076 } #header {background:#1A2900; margin:0 auto; text-align:left; padding:15px 20px 15px 20px; width:790px; border-left:1px solid #637076; border-right:1px solid #637076; } #container {margin:0 auto; text-align:left; padding:0 20px 20px 20px; width:790px; border-left:1px solid #637076; border-right:1px solid #637076; } h1#logo {background:#E8EDF7 url('../images/logo.jpg') no-repeat center bottom; float:left; height:126px; width:200px; border:1px solid #FFFFFF; text-align:center; min-height:24px; } #pictureRail {text-align:center; } #news {background:#E8EDF7; float:left; width:200px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; } #subMenu {background:#E8EDF7; float:left; width:130px; padding:10px 10px 5px 10px; border:1px solid #FFFFFF; } #menu {background:#1a2900; margin:0 0 0 260px; border:1px solid #FFFFFF; padding:10px; color:#FFFFFF; text-align:center; } #content {background:#E8EDF7; margin:20px 0 0 260px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; } #content2 {background:#E8EDF7; margin:20px 0 0 170px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; } #content3 {background:#E8EDF7; min-height:400px; margin:20px 0 0 170px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; text-align:center; } #fullcontent {background:#E8EDF7; margin:20px 0 0 0px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; } #links {background:#E8EDF7; margin:20px 0 0 0px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; } #product {background:#E8EDF7; min-height:400px; margin:20px 0 0 170px; padding:20px 20px 5px 20px; border:1px solid #FFFFFF; } #footer {margin:0 auto; text-align:left; padding:12px 20px 10px 20px; width:790px; border-left:1px solid #637076; border-right:1px solid #637076; } #footer p {background:#1a2900; padding:10px; font-size:90%; color:#637076; border:1px solid #637076; text-align:right; } #priceBox {background:#CC0000; float: right; vertical-align: text-bottom; text-align:right; margin:0 45px 0 0; padding:5px 5px 5px 5px; border:2px solid #000000; font-size:large; color:#000000;} /*section dependant style over-rides*/ #news h3 {margin:0; padding:0 0 20px 0; color:#000000; font-size:120%; font-weight:bold; } #subMenu h3 {margin:0; padding:0 0 20px 0; color:#000000; font-size:120%; font-weight:bold; } #content h2 {text-align:left; } #news p {padding:10px 0; border-top:1px solid #000000; } #subMenu p {padding:10px 0; border-top:1px solid #000000; } #header p {text-align:center; font-size:170%; color:#E8EDF7; padding:45px 0 0 0; } ul#menu { } ul#menu li {margin:0; padding:0; list-style:none; display:inline; } ul#menu a {color:#FFFFFF; text-decoration:none; padding:10px 10px; } #pictureRail img {margin:20px 10px;border:1px solid #FFFFFF; } #content img {border:0px solid #000000; float:right; margin:0 0 20px 20px; } #content2 img {border:2px solid #000000; float:center; margin:0 10px 10px 10px; } #content3 img {border:2px solid #000000; float:center; } #fullcontent img {border:0px solid #000000; float:right; margin:0 0 20px 20px; } #links img {border:0px solid #000000; float:center; margin:0 0 20px 20px; } #product img {border:2px solid #000000; float:left; margin:0 25px 10px 10px; } /*This adds a little arrow under the menu item of the page you are on. (handy for navigation and usability) To modify, edit the tag by changing the id. e.g, if the page you are on is the contact page, change: to */ #Home #homeLink, #Brochure #servicesLink, #Order #contactLink, #ContactUs #contactUs, #AboutUs #aboutLink, #linkspage #Linkspage {background:url('../images/menu-a-bg.gif') no-repeat center bottom; } /* Round Border for Catalogue .roundtop { background-image: url(rounded-top.jpg); width: 325px; height: 335px; } .roundside { background-image: url(rounded-sides.jpg); background-repeat: repeat-y; width: 325px; text-align: center; } .roundbottom { background-image: url(rounded-bottom.jpg); width: 325px; height: 325px; } /*just makes sure the content doesn't spill out the boxes, see http://www.positioniseverything.net/easyclearing.html for details*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */