html * {
margin: 0;
padding: 0;
}
body {
font: 71%/140% "Lucida Grande","Lucida Sans Unicode", Trebuchet MS, Verdana, Tahoma, sans-serif;
background: #fff url(../img/top-bg.jpg) repeat-x;
padding: 0 0 10px 0;
color: #214a59;
}
/* Global
------------------------------ */
a {
font-weight: bold;
color: #1c404d;
text-decoration: none;
}
a:hover {
color: #b39e72;
}
p {
padding: 0 0 10px 0;
}
#container {
background: #e0f0f2 url(../img/top-bg.jpg) 0px -105px repeat-x;
}
img.floatright {
float: right;
margin: 0 0 10px 10px;
}
img { border: 0; }
/* Header
------------------------------ */
#header {
height: 105px;
width: 789px;
margin: 0 auto;
}
#header ul#secondarynav {
text-align: right;
height: 39px;
list-style: none;
line-height: 39px;
padding: 0 6px 0 0;
}
#header ul#secondarynav li {
display: inline;
margin: 0 0 0 10px;
}
#header h1#sitetitle { line-height: 66px; }
#header h1#sitetitle a {
background: url(../img/guardianfence_logo.jpg) no-repeat;
width: 324px;
height: 66px;
display: block;
text-decoration: none;
text-indent: -999em;
float: left;
/* For IE6 */
margin: 0 -3px 0 0;
}
#header ul#topnav {
/* For IE6 */
margin: 0 0 0 324px;
list-style: none;
}
/* For Other Browsers */
html>body #header ul#topnav { margin: 0 0 0 324px; }
html>body #header h1#sitetitle a { margin: 0; }
#header ul#topnav li {
float: left;
}
#header ul#topnav li a {
float: left;
display: block;
height: 66px;
text-decoration: none;
text-indent: -999em;
}
#header ul#topnav li#residential a {
width: 153px;
background: url(../img/residential_link.jpg) no-repeat;
}
#header ul#topnav li#commercial a {
width: 163px;
background: url(../img/commercial_link.jpg) no-repeat;
}
#header ul#topnav li#wholesale a {
width: 149px;
background: url(../img/wholesale_link.jpg) no-repeat;
}
#header ul#topnav li#residential a:hover, #header ul#topnav li#commercial a:hover, #header ul#topnav li#wholesale a:hover,
#header ul#topnav li#residential a.active, #header ul#topnav li#commercial a.active, #header ul#topnav li#wholesale a.active {
background-position: 0px -66px;
}
/* Home Intro
------------------------------ */
#homeintro {
height: 270px;
width: 789px;
margin: 0 auto;
}
#homeintro-col1 {
width: 275px;
height: 242px;
float: left;
margin: 0 -3px 0 0;
padding: 14px;
}
#homeintro-col1 ul {
padding: 10px 10px 10px 18px;
line-height: 15px;
}
#homeintro-col2 {
width: 469px;
height: 246px;
margin: 0 0 0 300px;
background: url(../img/home-photo-bg.jpg) no-repeat;
padding: 24px 0 0 17px;
}
html>body #homeintro-col1 { margin: 0; }
html>body #homeintro-col2 { margin: 0 0 0 303px; }
/* Home Features
------------------------------ */
#homefeaturescontainer {
background: #214a59 url(../img/dkblue_top.jpg) repeat-x;
color: #fff;
}
#homefeatures {
width: 769px;
margin: 0 auto;
background: url(../img/home-photo-bg-bottom.jpg) right top no-repeat;
padding: 33px 20px 10px 0;
}
#homefeatures ul { list-style: none; }
#homefeatures ul li.features {
border-top: solid 1px #476b77;
background: url(../img/featuredlist-bg.jpg) repeat-x;
padding: 7px 12px 14px 7px;
clear: both;
min-height: 110px;
}
* #homefeatures ul li.features { height: 110px; }
#homefeatures ul li div.featurescol1 {
width: 278px;
float: left;
margin: 0 -3px 0 0;
}
#homefeatures ul li img {
float: left;
width: 140px;
margin: 0 -3px 0 0;
}
#homefeatures ul li h2 {
line-height: 50px;
}
#homefeatures ul li h2 a {
display: block;
width: 138px;
height: 50px;
text-indent: -999em;
margin: 0 0 0 137px;
}
html>body #homefeatures ul li img { margin: 0 0 10px 0; }
html>body #homefeatures ul li h2 a { margin: 0 0 0 140px; }
#homefeatures ul li h2#residential-featured a { background: url(../img/residential_featured_link.gif) no-repeat; }
#homefeatures ul li h2#commercial-featured a { background: url(../img/commercial_featured_link.gif) no-repeat; }
#homefeatures ul li h2#wholesale-featured a { background: url(../img/wholesale_featured_link.gif) no-repeat; }
#homefeatures ul li div.featurecontent {
margin: 0 0 0 280px;
font-size: .9em;
}
html>body #homefeatures ul li div.featurescol1 { margin: 0; }
html>body #homefeatures ul li div.featurecontent { margin: 0 0 0 280px; }
#homefeatures ul li div.featurecontent p.featuretext {
float: left;
width: 250px;
padding: 2px 0 10px 10px;
}
#homefeatures ul li div.featurecontent p.wholesale {
width: 450px;
}
#homefeatures ul li div.featurecontent ul.featureslinks {
padding: 2px 0 10px 0;
width: 200px;
float: right;
}
#homefeatures ul li div.featurecontent ul.featureslinks li {
padding: 0;
background: none;
clear: none;
border: none;
padding: 0 0 4px 16px;
}
#homefeatures ul li div.featurecontent ul.featureslinks li a {
display: block;
color: #00adee;
font-size: 1.1em;
text-decoration: underline;
}
#homefeatures ul li div.featurecontent ul.featureslinks li a:hover {
color: #fff;
}
/* Int Content
------------------------------ */
#intcontainer {
background: #214a59 url(../img/dkblue_top_int.jpg) repeat-x;
color: #fff;
}
#int {
width: 773px;
margin: 0 auto;
padding: 12px 12px 14px 4px;
}
#intcol1 {
width: 190px;
float: left;
}
#intcol2 {
width: 559px;
margin: 0 0 0 190px;
padding: 0 0 0 20px;
}
#intcontent ul, #intcontent ul li, #intcontent ol, #intcontent ol li {
margin: 10px;
}
#intcontent a {
text-decoration: underline;
color: #b39e72;
}
#intcontent a:hover { color: #fff; }
#intcontent h2#pagetitle {
font-size: 2.5em;
color: #b39e72;
padding: 0 0 14px 0;
}
#intcontent img {
padding: 8px;
background: #fff;
}
p#purchase-button {
padding: 0;
float: right;
}
p#purchase-button a {
border: none;
text-decoration: none;
}
p#purchase-button img {
padding: 0;
border: none;
background: none;
width: 130px;
}
/* breadcrumb
------------------------------ */
ul#breadcrumb {
list-style: none;
padding: 0 0 12px 0;
margin: 0 0 12px 0;
border-bottom: solid 3px #476b77;
}
ul#breadcrumb li {
display: inline;
}
ul#breadcrumb li a {
color: #fff;
background: url(../img/r_arrow.gif) 100% 50% no-repeat;
padding: 0 16px 0 0;
margin: 0 4px 0 0;
font-size: .9em;
}
ul#breadcrumb li a:hover { color: #b39e72; }
ul#breadcrumb li a.active {
font-weight: normal;
background: none;
}
/* subnav
------------------------------ */
ul#subnav, ul#subnav ul {
list-style: none;
width: 184px;
}
ul#subnav li a {
padding: 2px 0 2px 4px;
display: block;
color: #00adee;
font-size: .9em;
float: left;
width: 180px;
}
ul#subnav li {
clear: both;
width: 184px;
}
ul#subnav li ul li {
width: 174px;
}
ul#subnav li a:hover, ul#subnav li a.active {
color: #fff;
background: #32677b;
}
ul#subnav li a.active {
border-bottom: solid 1px #fff;
margin: 0 0 4px 0;
}
ul#subnav ul li {
padding: 0 0 0 10px;
}
ul#subnav ul li a {
color: #fff;
width: 160px;
}
/* Contact Form
------------------------------ */
#int-content form {
width: 370px;
}
#int-content form p, #int-content form div.formr {
padding: 6px 0 6px 0;
font-weight: bold;
}
#int-content form input.forminput, #int-content form textarea {
padding: 4px;
width: 350px;
font-weight: normal;
}
#int-content form textarea {
font-family: "Lucida Grande","Lucida Sans Unicode", Trebuchet MS, Verdana, Tahoma, sans-serif;
font-size: 1.1em;
height: 200px;
}
#int-content form span.required {
color: #ac7900;
font-weight: bold;
}
#int-content form span.error {
display: block;
color: #ac7900;
font-weight: bold;
}
#int-content form input.submit {
padding: 3px;
margin: 10px 0 0 0;
}
/* Footer
------------------------------ */
#footercontainer {
background: #fff url(../img/footer-bg.jpg) repeat-x;
clear: both;
}
#footer {
width: 779px;
margin: 0 auto;
padding: 30px 0 20px 10px;
}
#footer p#footernav {
float: right;
padding: 0 14px 0 0;
font-size: .9em;
}
#footer p#footernav a {
margin: 0 0 0 8px;
}
#footer h4 {
font-size: 1.1em;
}
#footer #footeraddress {
float: left;
padding: 0 40px 20px 0;
}
/* from http://www.positioniseverything.net/easyclearing.html --------------------- */
.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 */