/*
** ***************************************************************
** global reset
** ***************************************************************
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
/*
** ***************************************************************
** clearing floats without markup
** ***************************************************************
*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
/*
** ***************************************************************
** general classes and global id's
** ***************************************************************
*/
body {
background:#f7f5eb url('../images/grassbg.jpg') -10px 0 repeat-x;
font:14px Georgia, Times, "Times New Roman", serif;
color:#000;
text-align:center;
}
#skip {
display:none;
}
#wrapper {
width:980px;
margin:0 auto;
text-align:left;
}
/*
** ***************************************************************
** masthead
** ***************************************************************
*/
#masthead {
width:980px;
height:172px;
}
#logo {
width:274px;
float:left;
height:111px;
padding:53px 37px 0 24px;
}
#logo a {
display:block;
position:relative;
width:274px;
height:111px;
color:#6eb43f;
font:bold 16px Helvetica, Arial, Verdana, sans-serif;
}
#logo a span {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background:url('../images/olLogo.jpg') 0 0 no-repeat;
}
/*
** ***************************************************************
** top green nav bar - about/support/news/contact
** ***************************************************************
*/
#navWrapper {
float:left;
width:633px;
height:71px;
padding:0 12px 22px 0;
position:relative;
background:transparent url('../images/navWrapperBg.gif') 0 0;
}
#topNav {
width:383px;
height:37px;
padding:0 0 0 250px;
background:transparent url('../images/topnav.jpg') 250px 0 no-repeat;
}
#topNav li {
float:left;
height:37px;
}
#topNav li a {
display:block;
height:37px;
background:url('../images/topnav.jpg') 0px 0px no-repeat;
color:#fff;
text-decoration:none;
}
#topNav li#about {
width:77px;
}
#topNav li#about a {
background-position:0 0;
width:77px;
text-indent:5px;
}
#topNav li#about a:hover,
#topNav li#about.active a {
background-position:0 -37px;
}
#topNav li#support {
width:73px;
}
#topNav li#support a {
background-position:-77px 0;
width:73px;
}
#topNav li#support a:hover,
#topNav li#support.active a {
background-position:-77px -37px;
}
#topNav li#news {
width:63px;
}
#topNav li#news a {
background-position:-150px 0;
width:63px;
}
#topNav li#news a:hover,
#topNav li#news.active a {
background-position:-150px -37px;
}
#topNav li#careers {
width:85px;
}
#topNav li#careers a {
background-position:-213px 0;
width:85px;
text-indent:-5px;
}
#topNav li#careers a:hover,
#topNav li#careers.active a {
background-position:-213px -37px;
}
#topNav li#contact {
width:85px;
}
#topNav li#contact a {
background-position:-298px 0;
width:85px;
text-indent:-5px;
}
#topNav li#contact a:hover,
#topNav li#contact.active a {
background-position:-298px -37px;
}
#topNav li a span {
font:normal 12px/30px Helvetica, Arial, Verdana, sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
display:block;
width:100%;
height:100%;
}
#topNav li a:hover,
#topNav li a:hover span {
color:#fff !important;
}
#topNav li.active a,
#topNav li.active a span,
#topNav li.active a:hover,
#topNav li.active a:hover span {
color:#f7b901 !important;
}
/*
** ***************************************************************
** secondary nav in mast head - fences, lawn and garden, sheds,
** and railings
** ***************************************************************
*/
#productNav {
width:633px;
height:56px;
}
#productNav li {
float:left;
height:56px;
}
#productNav li a {
display:block;
height:56px;
font:bold 14px/56px Helvetica, Arial, Verdana, sans-serif;
text-align:center;
color:#333;
text-decoration:none;
text-transform:uppercase;
background-image:url('../images/mainNav.gif');
}
#productNav li a:hover {
color:#2c6b20;
}
#productNav li#product-fences a {
width:155px;
background-position:0px 0px;
}
#productNav li#product-fences a:hover,
#productNav li#product-fences.active a {
background-position:0px -56px;
}
#productNav li#product-lawn-garden a {
width:160px;
background-position:-155px 0px;
}
#productNav li#product-lawn-garden a:hover,
#productNav li#product-lawn-garden.active a {
background-position:-155px -56px;
}
#productNav li#product-sheds a {
width:160px;
background-position:-315px 0px;
}
#productNav li#product-sheds a:hover,
#productNav li#product-sheds.active a {
background-position:-315px -56px;
}
#productNav li#product-railings a {
width:158px;
background-position:-475px 0px;
}
#productNav li#product-railings a:hover,
#productNav li#product-railings.active a {
background-position:-475px -56px;
}
#productNav ul ul {
display:none;
}
/*
** ***************************************************************
** text blurb underneath the product nav
** ***************************************************************
*/
#pageSlug {
width:633px;
height:57px;
padding:22px 12px 0px 0;
float:left;
position:relative;
}
#pageSlug h1 {
width:633px;
height:57px;
position:relative;
display:block;
font:bold 14px Helvetica, Arial, Verdana, sans-serif;
color:#e0a800;
}
#pageSlug h1 em {
font:italic normal 14px Georgia, Times, "Times New Roman", serif;
}
#pageSlug h1 span {
display:block;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:url('../images/olSlug.gif') 0 0 no-repeat;
}
#pageSlug h2 {
display:block;
position:absolute;
top:22px;
left:230px;
width:385px;
height:57px;
font:normal 17px/26px Georgia, Times, "Times New Roman", serif;
color:#aba487;
}
/*
** ***************************************************************
** left sidebar on subpages
** ***************************************************************
*/
#sidebar {
width:282px;
padding:30px 0 0 14px;
float:left;
background:#f7f5eb;
min-height:300px;
}
#sidebar h3 {
color:#514b38;
text-transform:uppercase;
font:normal 14px/20px Georgia, Times, "Times New Roman", serif;
background:url('../images/sidebarDivider.gif') 0 100% no-repeat;
display:block;
padding:0 0 5px 0;
margin:0 0 10px 0;
}
/*
** ***************************************************************
** sidebar navigation with green rounded rectangle background
** ***************************************************************
*/
#sidebar ul {
margin:0 0 50px 0;
}
#sidebar .categories li {
display:inline;
font:normal 11px/21px Helvetica, Arial, Verdana, sans-serif;
}
#sidebar .categories li a {
display:block;
margin:3px 0;
text-decoration:none;
text-indent:16px;
color:#2c6b20;
background-image:none;
background-repeat:no-repeat;
background-position:0px 0px;
}
#sidebar .categories li a:hover,
#sidebar .categories li.active a,
#sidebar .categories li.over a {
color:#fff;
background-image:url('../images/subNavLinkBg.gif');
background-position:0px 0px;
}
.sidebarad p {
font:normal 11px/21px Helvetica, Arial, Verdana, sans-serif;
padding:10px 0 0 105px;
height:133px;
background:url('../images/sidebarad.jpg') -5px 0 no-repeat;
}
.sidebarad p a {
position:relative;
left:-5px;
}
#sidebar h4 {
display:inline;
font:normal 11px/21px Helvetica, Arial, Verdana, sans-serif;
}
#sidebar h4 a,
#sidebar h4.active a {
display:block;
margin:3px 0;
text-decoration:none;
text-indent:16px;
color:#2c6b20;
background-image:none;
background-repeat:no-repeat;
background-position:0px 0px;
}
#sidebar h4.active a,
#sidebar h4 a:hover {
color:#fff;
background-image:url('../images/subNavLinkBg.gif');
background-position:0px 0px;
}
/*
** ***************************************************************
** sidebar support section - hammer, screwdriver and badge
** ***************************************************************
*/
#sidebar #supportNav li {
padding:93px 0 0 0;
background:url('../images/supportBadge.jpg') 16px 4px no-repeat;
}
#sidebar #supportNav li p {
font:normal 11px/14px Helvetica, Arial, Verdana, sans-serif;
color:#333;
padding:10px 80px 0 16px;
}
/*
** ***************************************************************
** the green, read-more buttons and rollover states
** ***************************************************************
*/
#sidebar p a.button {
background: transparent url('../images/subButtonCap.jpg') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: normal 11px arial, sans-serif;
height: 30px;
margin-right: 6px;
padding-right: 24px; /* sliding doors padding */
text-decoration: none;
}
#sidebar p a.button:hover {
background: transparent url('../images/subButtonCap.jpg') no-repeat scroll bottom right;
}
#sidebar p a.button span {
background: transparent url('../images/subButtonBg.jpg') no-repeat top left;
display: block;
line-height: 25px;
padding: 2px 20px 3px 16px;
}
#sidebar p a.button:hover span{
background: transparent url('../images/subButtonBg.jpg') no-repeat bottom left;
}
#sidebar .categories li ul {
margin:6px 0 0 0;
}
#sidebar .categories li.parent a {
background:none !important;
color:#2c6b20 !important;
text-indent:24px;
}
#sidebar .categories li.parent.active a,
#sidebar .categories li.parent a:hover {
color:#724e14 !important;
background:none !important;
}
#sidebar .categories ul li ul {
margin:0 0 0 24px;
}
#sidebar .categories li.child a {
color:#787878 !important;
background:none !important;
text-indent:24px;
}
#sidebar .categories li.child.active a,
#sidebar .categories li.child a:hover {
color:#724e14 !important;
background:none !important;
}
/*
** ***************************************************************
** sidebar news post sections
** ***************************************************************
*/
#sidebar #whatsNewNav li,
#sidebar #toolsNav li {
padding:0 0 20px 16px;
background:url('../images/sidebarDivider.gif') 16px 100% no-repeat;
margin:0 0 20px 0;
}
#sidebar #whatsNewNav li.last,
#sidebar #toolsNav li.last {
background:#f7f5eb;
}
#sidebar #whatsNewNav li h4 ,
#sidebar #toolsNav li h4 {
font:bold 14px/20px Georgia, Times, "Times New Roman", serif;
color:#2c6b20;
margin:6px 0;
}
#sidebar #whatsNewNav li p,
#sidebar #toolsNav li p {
font:normal 11px/14px Helvetica, Arial, Verdana, sans-serif;
color:#333;
padding:6px 80px 6px 0;
}
/*
** ***************************************************************
** main content sections
** ***************************************************************
*/
#content {
width:667px;
padding:0 17px 0 0;
float:left;
}
#home #content {
width:980px;
margin:30px 0 0 0;
clear:left;
}
#contentWrapper {
clear:both;
width:980px;
min-height:200px;
}
/*
** ***************************************************************
** these are the styles for the product splash nav on the home
** page - the plan is to convert these to sprite fade transitions
** ***************************************************************
*/
#contentNav {
width:980px;
margin:30px 0;
clear:both;
}
#contentNav ul {
margin:0 0 0 16px;
}
#contentNav li {
float:left;
padding:3px 3px 10px 3px;
width:223px;
margin:0 10px 0 0;
background:#fff;
position:relative;
min-height:429px;
border:1px solid #DBD8C6;
}
#contentNav li:hover,
#contentNav li.over {
background-color:#6cb33e;
}
#contentNav li h2 {
display:block;
width:223px;
height:34px;
padding:12px 0 0 0;
margin:0 0 0 0;
text-indent:15px;
color:#514b38;
font:normal 14px Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
background-image:url('../images/productSplash.jpg');
background-repeat:no-repeat;
background-position:0 0;
background-color:#fff;
}
#contentNav li#content-fences h2 {
background-position:0px -46px;
}
#contentNav li#content-fences:hover h2,
#contentNav li#content-fences.over h2 {
background-position:0 0px;
color:#fff;
}
#contentNav li#content-lawn-garden h2 {
background-position:-223px -46px;
}
#contentNav li#content-lawn-garden:hover h2,
#contentNav li#content-lawn-garden.over h2 {
background-position:-223px 0;
color:#fff;
}
#contentNav li#content-sheds h2 {
background-position:-446px -46px;
}
#contentNav li#content-sheds:hover h2,
#contentNav li#content-sheds.over h2 {
background-position:-446px 0;
color:#fff;
}
#contentNav li#content-railings h2 {
background-position:-669px -46px;
}
#contentNav li#content-railings:hover h2,
#contentNav li#content-railings.over h2 {
background-position:-669px 0;
color:#fff;
}
#contentNav li h2 a {
color:#514b38;
display:block;
width:100%;
height:100%;
text-decoration:none;
}
#contentNav li:hover h2 a,
#contentNav li.over h2 a,
#contentNav li:hover h2 a:hover,
#contentNav li.over h2 a:hover {
color:#fff;
text-decoration:none;
}
#contentNav li p {
width:223px;
margin:0 0 0 0px;
display:block;
color:#333;
background-image:url('../images/productSplash.jpg');
background-repeat:no-repeat;
background-position:0 0;
font:12px/20px Helvetica, Arial, Verdana, sans-serif;
}
#contentNav li#content-fences p {
background-position:0 -92px;
}
#contentNav li#content-lawn-garden p {
background-position:-223px -92px;
}
#contentNav li#content-sheds p {
background-position:-446px -92px;
}
#contentNav li#content-railings p {
background-position:-669px -92px;
}
#contentNav li p a {
color:#333;
display:block;
padding:272px 10px 10px 10px;
text-decoration:none;
}
#contentNav li p a span {
color:#2c6b20;
text-decoration:underline;
}
#contentNav li:hover p,
#contentNav li.over p,
#contentNav li.over p a,
#contentNav li p a:hover {
color:#fff;
}
#contentNav li p a:hover span {
color:#2c6b20;
text-decoration:none;
}
/*
** ***************************************************************
** this is a divider bar on the home page
** ***************************************************************
*/
#contentNav .hr {
width:980px;
height:1px;
clear:both;
display:block;
background:url('../images/splashBot.gif') 0 0 no-repeat;
}
#contentNav .hr hr {
display:none;
}
/*
** ***************************************************************
** main text blurb on the home page
** ***************************************************************
*/
#content #homeSlug {
display:block;
width:850px;
padding:10px 45px 30px 45px;
color:#6b4a1f;
font:italic normal 20px/24px Georgia, Times, "Times New Roman", serif;
}
#content #homeSlug strong {
font-weight:normal;
color:#e0a800;
}
/*
** ***************************************************************
** these are the two subsection on the home page - about and support
** ***************************************************************
*/
#content #homeContent {
width:980px;
margin:0 0 30px 0;
background:url('../images/homeContentBg.gif') 0 0 repeat-y;
}
#content #homeContent li {
float:left;
min-height:150px;
}
#content #homeContent li#homeAbout {
background:url('../images/homeAbout.jpg') 251px 10px no-repeat;
padding:10px 254px 10px 25px;
margin:0 2px 0 0;
width:210px;
}
#content #homeContent li#homeSupport {
background:url('../images/homeSupport.jpg') 264px 10px no-repeat;
padding:10px 254px 10px 25px;
margin:0 0 0 0;
width:210px;
}
#content #homeContent li h3 {
font:normal 14px/24px Georgia, Times, "Times New Roman", serif;
color:#2C6B20;
margin:0 0 14px 0;
text-transform:uppercase;
}
#content #homeContent li p {
font:12px/16px Helvetica, Arial, Verdana, sans-serif;
color:#333;
}
/*
** ***************************************************************
** this is the brown button with rollover states for the content sections
** ***************************************************************
*/
#content p a.button {
background: transparent url('../images/buttonCap.jpg') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: normal 11px arial, sans-serif;
height: 31px;
margin-right: 6px;
padding-right: 31px; /* sliding doors padding */
text-decoration: none;
}
#content p a.button:hover {
background: transparent url('../images/buttonCap.jpg') no-repeat scroll bottom right;
}
#content p a.button span {
background: transparent url('../images/buttonBg.jpg') no-repeat;
display: block;
line-height: 23px;
padding: 5px 20px 3px 16px;
}
#content p a.button:hover span {
background: transparent url('../images/buttonBg.jpg') no-repeat bottom left;
}
/*
** ***************************************************************
** below are the styles for the product gallery and product tour slider
** it's a little tag soupy, but probably the best solution for
** multiple galleries on the page.
** ***************************************************************
*/
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
margin: 0px 0;
position: relative;
width: 435px;
}
.csw {width: 100%; height: 94px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
.stripViewer {
position: relative;
overflow: hidden;
width: 380px;
height: 100px;
clear: both;
margin:0 0 0 28px;
}
.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.stripViewer .panelContainer .panel {
float:left;
height: 100%;
position: relative;
width: 460px;
}
.stripNavL, .stripNavR {
position: absolute;
top: 30px;
text-indent: -9000em;
}
.stripNavL a {
display: block;
height: 24px;
width: 24px;
background: url("../images/galleryArrows.gif") no-repeat top left;
}
.stripNavR a {
display: block;
height: 24px;
width: 24px;
background: url("../images/galleryArrows.gif") no-repeat top right;
}
.stripNavL a:hover {
background: url("../images/galleryArrows.gif") no-repeat bottom left;
}
.stripNavR a:hover {
background: url("../images/galleryArrows.gif") no-repeat bottom right;
}
.stripNavL {
left: 0;
}
.stripNavR {
right: 0;
}
.panel li {
width:80px;
margin:0 0 0 0;
float:left;
}
.panel li.last {
margin:0 0 0 0;
}
.panel li a img {
width:75px;
height:75px;
}
.panel li a {
display:block;
width:75px;
height:75px;
border:1px solid #ada68a;
}
.panel li a:hover {
border:1px solid #5d3d13;
}
/*
** ***************************************************************
** lightbox
** ***************************************************************
*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:6px 10px 0;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:6px 10px 0;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
z-index:103;
top: 50%;
left: 50%;
background-color: #E8E8E8;
border: 4px solid #525252;
margin: -45px 0pt 0pt -125px;
padding: 40px 15px 15px;
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
_margin-bottom:1px;
}
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #5d3d13;
background-color: #eee;
padding: 5px;
opacity: 0.85;
width:350px;
text-align:left;
color:#514b38;
font:normal 12px/18px Helvetica, Arial, Verdana, sans-serif;
}
#tooltip h3, #tooltip div { margin: 0; }
/*
** ***************************************************************
** the main page headers (the large photos)
** ***************************************************************
*/
#content h1 {
display:block;
width:653px;
overflow:hidden;
height:330px;
padding:42px 0 0 14px;
color:#aba487;
font:italic normal 20px Georgia, Times, "Times New Roman", serif;
}
#about #content h1 {
background:#5d3d13 url('../images/pageHeaders/about.jpg') 0 0 no-repeat;
}
#content h1.wood-fencing {
background:#5d3d13 url('../images/pageHeaders/woodfencing.jpg') 0 0 no-repeat;
}
#content h1.aluminum-fences {
background:#5d3d13 url('../images/pageHeaders/aluminumfencing_new.jpg') 0 0 no-repeat;
height:34px;
padding:338px 0 0 14px;
}
#content h1.vinyl-fences {
background:#5d3d13 url('../images/pageHeaders/vinylfencing.jpg') 0 0 no-repeat;
}
#content h1.lattice {
background:#5d3d13 url('../images/pageHeaders/lattice.jpg') 0 0 no-repeat;
}
#content h1.accents {
background:#5d3d13 url('../images/pageHeaders/accents.jpg') 0 0 no-repeat;
}
#content h1.arbors {
background:#5d3d13 url('../images/pageHeaders/arbors2.jpg') 0 0 no-repeat;
}
#content h1.sheds {
background:#5d3d13 url('../images/pageHeaders/sheds.jpg') 0 0 no-repeat;
}
#content h1.vinyl-railings {
background:#5d3d13 url('../images/pageHeaders/vinylrailing.jpg') 0 0 no-repeat;
}
#content h1.aluminum-railings {
background:#5d3d13 url('../images/pageHeaders/aluminumrailing.jpg') 0 0 no-repeat;
}
#content h1.composite-railings {
background:#5d3d13 url('../images/pageHeaders/compositerailing.jpg') 0 0 no-repeat;
}
#content h1.wood-railings {
background:#5d3d13 url('../images/pageHeaders/woodrailing.jpg') 0 0 no-repeat;
}
/*
** ***************************************************************
** these headers are just text (no images)
** ***************************************************************
*/
#news #content h1,
#support #content h1,
#privacy #content h1,
#productLanding #content h1,
#contact #content h1,
#page-404 #content h1,
#careers #content h1 {
height:auto;
background:#5d3d13;
padding:0 0 0 0;
line-height:46px;
text-indent:10px;
margin:35px 0 0 0;
width:100%;
}
/*
** ***************************************************************
** here are the main styles for content
** productInfo exists only on the product pages - holds all left
** floated content to allow the our brands box to show
** ***************************************************************
*/
#productInfo {
width:481px;
padding:0 0 30px 0;
float:left;
}
#content h2 {
font:italic normal 18px/24px Georgia, Times, "Times New Roman", serif;
color:#6b4a1f;
margin:15px 0px 20px 0;
}
#content #productInfo h2 {
margin:15px 50px 20px 0;
}
#productInfo h3,
#about .gallery h3 {
text-transform:uppercase;
font:normal 14px/36px Georgia, Times, "Times New Roman", serif;
color:#5d3d13;
}
#content p {
font:12px/16px Helvetica, Arial, Verdana, sans-serif;
color:#333;
margin:0 0 20px 0;
}
#content #productInfo p {
margin:0 50px 20px 0;
}
#productInfo p .warrantyBadge {
padding:0 0 0 0;
margin:0 0 20px 20px;
float:right;
}
#news #content .postImage {
float:right;
margin:0 0 20px 20px;
}
#news #content .entry {
margin:20px 0 30px 0;
padding:10px 0 20px 0;
background:url('../images/contentDivider.gif') 0 100% repeat-x;
}
#news #content .entry.last {
background:none;
}
#news #content .entry h2 {
font:italic normal 20px/24px Georgia, Times, "Times New Roman", serif;
margin:0px 0 5px 0;
}
#news #content .entry h2 a {
color:#5d3d13;
text-decoration:underline;
}
#news #content .entry h2 a:hover {
color:#5d3d13;
text-decoration:none;
}
#news #content .meta a,
#news #content p a,
#careers #content p a,
#contact #content p a,
#news #content .posted a {
color:#2c6b20;
}
#news #content .meta a:hover,
#news #content p a:hover,
#careers #content p a:hover,
#contact #content p a:hover,
#news #content .posted a:hover {
text-decoration:none;
}
#news #content .entry ul {
margin:10px 0 10px 50px;
}
#news #content .entry ol {
margin:10px 0 10px 55px;
}
#news #content .entry ul li {
list-style-type: disc;
font:12px/16px Helvetica, Arial, Verdana, sans-serif;
color:#333;
}
#news #content .entry ol li {
list-style-type: decimal;
font:12px/16px Helvetica, Arial, Verdana, sans-serif;
color:#333;
}
.gallery {
padding:20px 0 0 0;
}
#page-404 #content li {
font:12px/18px Helvetica, Arial, Verdana, sans-serif;
color:#333;
margin:0 0 10px 20px;
list-style:disc !important;
}
#page-404 #content li ul {
margin:10px 0 0 0;
}
#page-404 #content li a {
color:#2c6b20;
text-decoration:underline;
}
#page-404 #content li a:hover {
color:#6cb33e;
text-decoration:none;
}
/*
** ***************************************************************
** product page our brands box
** ***************************************************************
*/
#ourBrands {
width:178px;
margin:20px 0 0 0;
border:1px solid #dbd8c6;
padding:3px;
background:#fff;
float:left;
}
#ourBrands h4 {
display:block;
border:1px solid #f3f2ec;
font:14px/39px Georgia, Times, "Times New Roman", serif;
text-indent:8px;
background:#d8d4cb;
color:#514b38;
text-transform:uppercase;
}
#ourBrands ul {
margin:30px 0 0 0;
}
#ourBrands ul li {
padding:0 0 70px 0;
font:10px/14px Helvetica, Arial, Verdana, sans-serif;
}
#ourBrands ul li a {
color:#000;
text-decoration:none;
display:block;
text-align:center;
padding:0 10px;
}
#ourBrands ul li a strong {
font-weight:normal;
color:#2c6b20;
text-decoration:underline;
}
#ourBrands ul li a:hover strong {
text-decoration:none;
color:#000;
}
#ourBrands ul li img {
display:block;
margin:0 auto 15px auto;
}
#ourBrands ul li a img,
#ourBrands ul li a:hover img {
border:none;
text-decoration:none;
}
#content #supportList li h2 {
font-size:20px;
margin:20px 0 0 0;
}
#content #supportList li h3 {
font:normal normal 15px/31px Helvetica, Arial, Verdana, sans-serif;
display:block;
text-transform:uppercase;
width:100%;
padding:0 0 0px 0;
margin:20px 0 0 0;
background:url('../images/contentDivider.gif') 0 100% repeat-x;
text-align:left;
color:#2C6B20;
}
#content #supportList li h4 {
font:normal bold 13px/24px Helvetica, Arial, Verdana, sans-serif;
display:block;
text-align:left;
color:#373632;
margin:20px 0 0 0;
}
#content #supportList .supportPosts {
margin:0 0 40px 0;
}
#content #supportList .supportPosts h6 {
font:normal normal 12px/24px Helvetica, Arial, Verdana, sans-serif;
display:block;
text-align:left;
color:#373632;
}
#content #supportList .supportPosts li a {
padding:2px 30px 2px 10px;
text-decoration:none;
color:#2C6B20;
}
#content #supportList .supportPosts li a.pdf {
background:url('../images/icons/acrobat.gif') 100% 0px no-repeat;
}
#content #supportList .supportPosts li a.swf {
background:url('../images/icons/flash.gif') 100% 0px no-repeat;
}
#content #supportList .supportPosts li a.doc {
background:url('../images/icons/word.gif') 100% 0px no-repeat;
}
#content #supportList .supportPosts li a.xls {
background:url('../images/icons/excel.gif') 100% 0px no-repeat;
}
#content #supportList .supportPosts li a.qt {
background:url('../images/icons/quicktime.gif') 100% 0px no-repeat;
}
#content #supportList .supportPosts li a span {
text-decoration:underline;
}
#content #supportList .supportPosts li a:hover span {
text-decoration:none;
}
#content .paginate {
display:block;
padding:0 10px;
text-align:right;
}
#content .paginate strong,
#content .paginate a {
padding:0 4px;
}
#content fieldset li {
padding:4px 0;
}
#content fieldset legend {
font:normal normal 16px/31px Helvetica, Arial, Verdana, sans-serif;
display:block;
color:#2C6B20;
width:510px;
padding:0 0 10px 0;
margin:0 0 10px 0;
text-transform:uppercase;
background:url('../images/contentDivider.gif') 0 100% repeat-x;
}
#content fieldset label {
font:normal normal 13px/31px Helvetica, Arial, Verdana, sans-serif;
display:block;
text-transform:uppercase;
padding:0 0 0px 0;
margin:0 0 0 0;
text-align:left;
color:#373632;
}
#content fieldset input,
#content fieldset textarea {
font:normal normal 13px/18px Helvetica, Arial, Verdana, sans-serif;
padding:3px;
width:500px;
}
#content fieldset input.check {
width:auto;
margin-right:10px;
}
#content fieldset input.submit_button {
width:auto;
margin:20px 0 0 0;
}
/*
Comments