body {
background-color: #DDE6A5;
background-image: url(../images/hatter.png);
background-repeat: repeat-x;
color: #336600;
color: #365A07;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
margin: 0px 0 20px 0;
padding: 0;
}

#masthead {
background-image: url(../images/graf-masthead.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#default #masthead, body#deck-railing #masthead {
background-image: url(../images/graf-masthead.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#decking-options #masthead,
body#deck-lighting #masthead,
body#decking-paths #masthead {
background-image: url(../images/graf-masthead-decking-options.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#timbertech #masthead,
body#timbertech-brochure #masthead,
body#timbertech-brochure-thankyou #masthead,
body#timbertech-floorizon-decking #masthead,
body#timbertech-earthwood-decking #masthead,
body#timbertech-twinfinish-decking #masthead,
body#timbertech-140x25mm-decking #masthead,
body#timbertech-2x6-decking #masthead {
background-image: url(../images/graf-masthead-timbertech.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#faq #masthead {
background-image: url(../images/graf-masthead-faqs.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#contact-us #masthead {
background-image: url(../images/graf-masthead-contact-us.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#disabled-options #masthead {
background-image: url(../images/graf-masthead-disabled-options.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#why-elmswood-decking #masthead, body#pergolas #masthead {
background-image: url(../images/graf-masthead-why-us.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#timber-decking-in-aberdeen #masthead {
background-image: url(../images/graf-masthead-areas.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#hottubs #masthead {
background-image: url(../images/graf-masthead-hot-tub.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#split-level-timber-decking #masthead {
background-image: url(../images/graf-masthead-split-level.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#elevated-timber-decking #masthead {
background-image: url(../images/graf-masthead-elevated.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#timber-decking-steps #masthead {
background-image: url(../images/graf-masthead-steps.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#deck-seating #masthead {
background-image: url(../images/graf-masthead-seating.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#care-and-maintenance #masthead {
background-image: url(../images/graf-masthead-care.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#accessories #masthead {
background-image: url(../images/graf-masthead-accessories.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#decking-material #masthead {
background-image: url(../images/graf-masthead-material.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#decking-material #masthead {
background-image: url(../images/graf-masthead-material.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#blog #masthead {
background-image: url(../images/graf-masthead-blog.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

body#faq #masthead {
background-image: url(../images/graf-masthead-faq.jpg);
background-repeat: no-repeat;
height: 299px;
height: 336px;
background-color: #DDE6A5;
}

#logo {
background-image: url(../images/graf_integrated_logo.gif);
background-repeat: no-repeat;
height: 135px;
position: relative;
top: -30px;
left: 20px;
}

/********LAYOUT WRAPPER**********/

#layout {
width: 766px;
margin: 3px auto 0 auto;
background-color: #FFFFFF;
background-image: url(../images/graf-shadow.jpg);
background-repeat: repeat-y;
}

/********COLUMN WRAPPER**********/

#columnwrapper {
margin: 0 auto;
width: 750px;
padding: 2em 0 0 0;
/*background-image: url(../images/graf_integrated_grunge.jpg);
background-repeat: no-repeat;
background-position: right top;*/
}

/*MAIN and SIDEBAR COLUMNS

Width of both must equal width of columnwrapper

540 + 210 = 750 */

#mainbox {
float: right;
width: 540px;
}

#sidebox {
float: left;
width: 210px;
}

/********CONTENT CONTAINERS*********/

/*Main Content*/

#maincontent {
padding: 0 30px 20px 20px;
font-size: 0.8em;
background-image: url(../images/graf-vrule.gif);
background-repeat: repeat-y;
background-position: left top;
}

#maincontent p {
line-height: 1.5em;
margin: 8px 30px 12px 0;
}

#maincontent img {
float: left;
padding: 0 10px 0 0;
}

#maincontent ul, #maincontent li {
margin: 0;
Padding: 0;
line-height: 1.5em;
}

#maincontent li {
margin-left: 17px;
}

#maincontent blockquote {
color: #336600;
text-indent: 30px;
font-size: 0.85em;
margin: 0;
padding: 0;
}

/*Sidebar*/

#sidecontent {
font-size: 0.7em;
padding: 30px 20px 20px 24px;
padding: 0px 0px 20px 44px;
margin: 0 0 0 0;
}

#sidecontent p {
line-height: 1.5em;
margin: 12px 0;
}

#sidecontent ul, #sidecontent li {
margin: 0;
Padding: 0;
line-height: 1.5em;
}

/********HEADINGS*******/

h1 {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 20px;
color: #FFFFFF;
}

h2, h3, h4 {
line-height: normal;
font-family: Arial, Helvetica, sans-serif;
}

h2 {
margin: 1.5em 0 0 0;
font-size: 1.2em;
color: #995205;
color: #741F09;
color: #365A07;
}

h3 {
margin: 1.5em 0 0 0;
font-size: 1em;
color: #995205;
}

/*CLEARING the LAYOUT FLOATS*/

.clearit {
font-size: 0;
line-height: 0;
height: 0;
clear: both;
}

/********BOTTOM SHADOW GRAPHIC**********/

#bottom {
background-image: url(../images/graf-footer.jpg);
background-repeat: no-repeat;
height: 96px;
background-position: left bottom;
}

/***********HEADER************/

/*Header Container*/

#headerbox {
width: 750px;
margin: 0 auto 0 auto;
font-size: 0.7em;
color: #FFFFFF;
}

/*Header Content*/

#header {
padding: 15px 0 0 170px;
}

/***********FOOTER************/

/*Footer Container*/

#footerbox {
width: 750px;
margin: 0 auto;
font-size: 0.7em;
color: #336600;
}

/*Footer Content*/

#footer {
padding: 0 0 0 30px;
}

/*********PAGE LINK STYLES********/

#columnwrapper a:hover #footer a:hover, #footer a:active, #footer a:focus {
color: #000000;
text-decoration: none;
}

/******NAVBAR STYLES********/

#navcontainer {
padding: 0;
height: 23px;
font: 12px Verdana, sans-serif;
border-bottom: 1px solid #996633;
border-bottom: 1px solid #68A639;
list-style-type: none;
background: #fff;
margin: 10px auto 0px auto;
width: 575px;
width: 625px;
}

#navcontainer ul {
margin: 0;
padding: 0
}

#navlist li {
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}

#navlist li a, #navlist li a:link {
background: #fff;
color: #68A639;
text-decoration: none;
padding: 3px 11px 3px 11px;
padding: 3px 15px 3px 15px;
display: block;
font-weight: bold;
}

#navlist li a:hover {
color: #68A639;
border-bottom: 3px solid #68A639;
cursor: pointer;
background: #fff;
}

#navlist li a.current, #navlist li a.current:link {
color: #68A639;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #68A639;
}

#navlist li a.current:hover {
border-bottom: 3px solid #68A639;
background: #fff;
}

/********SUB NAVIGATION*********/

#navcontainer-side ul {
list-style-type: none;
text-align: left;
font-size: 1em;
font-weight: normal;
}

#navcontainer-side ul li  {
padding: 0 0 7px 20px;
line-height: 1.2em;
}

#navcontainer-side ul li a {
/*background: transparent url(../images/list-off.gif) left center no-repeat;*/
text-align: left;
font-family: verdana, lucida, sans-serif;
text-decoration: none;
color: #68A639;
}

#navcontainer-side ul li a:hover {
/*background: transparent url(../images/list-on.gif) left center no-repeat;*/
color: #68A639;
position: relative;
top: -1px;
left: -1px;
font-weight: bold;
}

#navcontainer-side ul li a#current {
/*background: transparent url(../images/list-active.gif) left center no-repeat;*/
color: #68A639;
}

#navlist-side li a.current, #navlist-side li a.current:link {
color: #996633;
font-weight: normal;
/*background: transparent url(../images/list-active.gif) left center no-repeat;*/
position: relative;
top: -1px;
left: -1px;
font-weight: bold;
}

/* Images */

#lightbox {
width: 385px;
}

#lightbox a img {
padding: 5px;
border: 1px solid #ccc;
margin: 5px;
}

#lightbox a img:hover {
border-color: #06c !important;
}

/******FORM********/

fieldset {
padding: 12px;
margin-bottom: 25px;
border: 1px solid #e4dfdc;
}

fieldset legend {
font-size: 11px;
font-weight: normal;
color: #323232;
padding: 0 5px;
}

fieldset input {
padding: 3px;
margin-bottom: 4px;
}

.zemRequired {
font-weight: bold;
}

.zemError {
color: #ff0000;
font-size: 11px;
}

#brochure {
padding: 10px;
background-color: #ffffcc;
margin-bottom: 15px;
border: 1px solid #bc8947;
}

#brochure p {
padding: 5px 0 0 0;
margin: 0 0 0 0;
}

#send {
padding: 5px;
background-color: #ffffcc;
margin-bottom: 15px;
}

/******BLOG********/

.closer {
font-size: .88em;
color: #888;
text-align: right;
border-top: 1px solid #E3DBBE;
}

h6 {
margin: 3px 0 14px 0;
font-size: .88em;
font-weight: normal;
}

h6 strong {
margin-right: 1.2em !important;
margin-right: .5em;
/

* hack for IE */
}

h6 b {
margin-left: 1.2em !important;
margin-left: .5em;
/

* hack for IE */
}

.small {
font-size: .8em;
}

.blog {
float: right !important;
padding: 0 32px 5px 15px !important;
}