/* General CSS file */
/* Additional file exists for IE 7 */
* {
 margin: 0;
 padding: 0;
}

html { 
 min-width: 1000px;
}

body {
 width: 1000px;
 margin: 0 auto;
 text-align: center;
 background-color: white;
 font-family: "Trebuchet MS", Verdana, sans-serif;
}

/** HEADER **/
/* The header is at the top of every page, and includes the navigation */
#header  {
 width: 1000px;
 min-height: 295px;
 text-align: left;
}
#name { /* Company name & tagline positioning */
 padding: 70px 0 0 20px;
 float: left;
 margin-right: 25px;
 font-weight: bold;
}
#headerimage { /* Picture of sheds */
 float: left;
 width: 400px;
 height: 205px;
}
#address { /* Company address styling */
 padding: 20px 10px 0 0;
 float: right;
 font-size: 0.95em;
 font-weight: bold;
 overflow: hidden;
}
#quicklinklist { /* Links to non-product pages, positioning */
 clear: both;
 margin: 0 0 5px 0;
 padding-left: 10px;
}
#quicklinklist li { /* Links to non-product pages, list styling */
 display: inline;
 list-style-type: none;
 padding-right: 20px;
}
#quicklinklist li a{ /* Links to non-product pages, text styling */
 text-decoration: none;
 color: #004202;
 font-size: 1.1em;
 font-weight: bold;
}
#quicklinklist li a:hover{ /* Change link color on hover */
 color: #d54300;
}
#navlist { /* Main navigation, positioning */
 clear: both;
 background: #fff;
 border-top: 3px solid #004202;
 border-bottom: 4px solid #004202;
 text-align: center;
}
#navlist ul {
 padding: 6px 0 8px 0;
}
#navlist li { /* Main navigation, styling */
 display: inline;
 list-style-type: none;
 padding: 5px 10px;
 margin: 0 1px 0 0;
 border: 2px solid #004202;
 background-image: url('../images/graphics/navlist-bg.gif');
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
#navlist li a{ /* Main navigation, text styling */
 text-decoration: none;
 color: #000;
 font-weight: bold;
 font-size: 1.5em;
}
#navlist li a:hover{ /* Change link color on hover */
  color: #d54300;
}


/** PAGE CONTENT **/
/** Styling of content for pages **/
#pagecontent {
 width:1000px;
 clear: both;
 font-size: 1.0em;
 text-align: left;
}

/** Home page **/
/* Styling and layout for home page */
.home #leftside { /* Left hand side div.  Contains welcome box and range view */
 width: 740px;
 float: left;
}
.home #welcomebox { /* Welcome box.  Contains 'Welcome' message and photo */
 border: 2px solid #bebebe;
 padding: 10px;
 margin-bottom: 10px;
 font-size: 1.0em;
}
.home #welcomebox h2{
 font-size: 1.1em;
}
 /* Range view. Contains header and 4 boxes showing range of sheds */
.home #rangeview #rangeheader { /* Header with orange background */
 background: url('../images/graphics/orange-bg.gif') repeat-x;
 min-height: 54px;
 padding-left: 10px;
 margin-bottom: 10px;
}
.home #rangeview #rangeheader span.text{ /* Header with orange background */
 color: #fff;
 padding-top: 14px;
 font-size: 1.5em;
 float: left;
}

.home #rangeview .flash{
  padding: 0;
  float: right;
  height: 54px;
  width: 80px;
  padding-right: 10px;
}
.home #rangeview .box { /* Boxes showing range of sheds - size & position */
 min-height: 130px;
 width: 356px;
 float: left;
 margin: 0 0 10px 10px;
 padding: 0 0 0 5px;
 font-size: 1.05em;
}
.home #rangeview .box h2{
 padding-top: 10px;
}
.home #rangeview .box img{ /* Images in boxes */
 float: right;
 width: 170px;
 height: 130px;
}
.home #rangeview .newline {
 margin: 0;
}

.home #rightside { /* Right hand side.  Contains a number of boxes and images */
 width: 250px;
 float: left;
 margin-left: 10px;
}
.home #rightside div.box { /* Boxes for delivery details etc. - size and position */
 margin-bottom: 10px;
 padding: 5px;
 height: 150px;
}
.home #rightside div.box p {
 margin-bottom: -0.2em;
} 
.home #rightside div.box img.illustrate { /* Images of lorry and tape measure in boxes */
 float: right;
 padding: 5px 0 0 5px;
}
.home #rightside div.location { /* Location box */
 background: url('../images/graphics/location.gif') no-repeat;
 margin-bottom: 5px;
 width: 235px;
 height: 46px;
 padding: 70px 0 0 10px;
}
.home  .location h1{ /* Header in location box */
 font-size: 1.5em;
}
.home #rightside div.rs_image { /* Images on right hand side, e.g. GMC logo & PayPal */
 text-align: center;
 padding-top: 10px;
}

/* General Home Page elements */
.home .box { /* Boxes showing range of sheds */
 border: 2px solid #004202;
 color: #004202;
}
.home .box p{ /* Text in boxes */
 color: #004202;
 font-size: 0.9em;
}
.home .box h2{ /* Headers in boxes */
 color: #004202;
 font-size: 1.0em;
 padding-bottom: 5px;
}

.home .button{ /* Orange buttons for Home Page boxes */
 float: left;
 margin: 10px 0 0 45px;
}
.home .button a{ /* Link text in orange boxes */
 background: url('../images/graphics/button_bg.gif');
 height: 22px;
 color: #fff;
 border: 2px solid #ab3000;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 padding: 2px 5px;
 text-decoration: none;
 font-weight: bold;
 font-size: 0.95em;
}
.home .button a:hover{ /* Link text in orange boxes, on hover */
 background: #fff;
 color: #ab3000;
}
 
/** Product pages **/
.product { /* Layout product page */
 margin-left: 10px;
 width: 980px;
 text-align: left;
}
.product h1 {
 font-size: 1.5em;
}
.product .intro { /* Puts horizontal line under intro paragraph */
 font-size: 1.0em;
 padding-bottom: 15px;
 border-bottom: 2px solid #004202;
 margin-bottom: 15px;
}
.product div.item { /* Block for individual item */
 clear: both;
 font-size: 1.0em;
}
.product div.item div.description {
  width: 640px;
  float: left;
}
.product div.item div.rightpics {
  width: 330px;
  float: left;
  margin-left: 10px;
}
.product div.item div.rightpics img{
  margin-bottom: 20px;
}
.product div.item div.lowerpics {
  clear: both;
}
.product table { /* Tables */
  font-size: 1.0em;
}
.product table.price { /* Pricing tables */
  text-align: center;
}
.product table.price td, th{ /* Pricing tables */
  padding: 5px 15px 5px 5px;
}
.product table.options td, th{ /* Optional extra tables */
  padding: 5px 15px 5px 5px;
}
.product div.divider { /* Divider placed between items - provides link to top and bottom border */
 clear: both;
 padding-bottom: 10px;
 border-bottom: 2px solid #004202;
 margin-bottom: 10px;
 text-align: right;
}
.product div.final { /* Final divider - no line below */
 border: none;
 margin-bottom: 0;
}

/** Info pages **/
/* Applies to contact us, delivery and location pages */
.info { /* Layout info page */
 margin-left: 10px;
 width: 980px;
 text-align: left;
}
.info fieldset{
 width: 600px;
 margin: 0 auto;
 padding: 10px;
 margin-bottom: 10px;
}
.info fieldset legend{
 font-weight: bold;
}
.info fieldset label{
 clear: both;
 display: block;
 font-weight: bold;
 width: 100px;
 float: left;
 text-align: right;
 line-height: 1.5;
 padding-right: 10px;
}
.info fieldset input{
 padding: 5px;
 margin-bottom: 10px;
}
.info .submit {
 clear: both;
 text-align: center;
 margin-top: 10px;
}

#sizeInfo {
 clear: both;
 text-align: center;
 font-size: 0.8em;
 padding: 10px 0;
}

/** Footer **/
#footer {
  clear: both;
  background: url('../images/graphics/footer.gif') repeat-x;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 1.0em;
  height: 80px;
  padding-top: 20px;
}
#footer a {
 color: #fff;
 font-size: 0.95em;
}
#footer a:visited {
 color: #ea6e35;
}
#footer a:hover {
 color: #ab3000;
}
#belowfooter {
 text-align: center;
 color: #333;
 font-size: 0.9em;
}


/** Other general styling **/
/* Images */
.floatright {
  float: right;
  margin-left: 5px;
}
.floatleft {
  float: left;
  margin-right: 5px;
}
/* Map */
.map {
 text-align: center;
}

/* Links in pages */
.linktotop a{
 background: url('../images/graphics/up_arrow.gif') no-repeat;
 font-size: 0.95em;
 color: #004202;
 margin-right: 10px;
 padding-left: 15px;
}

/* Miscellaneous margins */
.lmargin10 {
 margin-left: 10px;
}
.lmargin20 {
 margin-left: 20px;
}
.lmargin40 {
 margin-left: 40px;
}
.bmargin20 {
 margin-bottom: 20px;
}


.error {
 font-weight: bold;
 color: red;
}