/* undo some default styling of common (X)HTML browsers
* ------------------------------------------------------------------------- */
/* No list-markers by default - must redefine bullets w/ bg graphics */
ul,ol { list-style:none; }
/* Avoid browser default inconsistent heading font-sizes and pre/code */
h1,h2,h3,h4,h5,h6,pre,code,td { font-size:1em; }
/* Remove inconsistent (among browsers) default padding or margin */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }
/* prevent blue linked image borders */
a img,:link img,:visited img,fieldset { border:none; }
/* Global Elements - type selectors
* ------------------------------------------------------------------------- */
body {
background:#c6b69c url("images/bg-body.jpg") left top repeat;
font: 14px/24px "Century Gothic", Arial, Verdana, Helvetica, sans-serif;
text-align: left;
color: #020000;
}
blockquote { margin-left:10px; margin-right:10px; }
h1 { font-size: 18px; color:#373737; font-weight:500; padding:5px 0 5px 18px; }
h2 { font-size: 17px; color:#373737; font-weight:500; padding:5px 0 5px 18px; }
h3 { font-size: 16px; color:#373737; font-weight:500; padding:5px 0 5px 18px; }
a:link,a:visited { color:#1382a2; text-decoration:underline; outline:none; }
a:hover,a:active { color:#1382a2; text-decoration:underline; outline:none; }
/* Global Classes
* ------------------------------------------------------------------------- */
div.clear { clear:both; height:.01em; overflow:hidden; }
p.back-to-top { background:url("images/bullet-back-to-top.jpg") right no-repeat; text-align:right; display:block; padding-right:15px; }
img.img-left { float:left; margin:2px 10px 10px 0; }
img.img-right { float:right; margin:5px 25px 5px 10px; }
.req { font-size:11px;}
div.hr { height:14px; background: url("images/hr-style.jpg") no-repeat scroll center; margin:5px 10px 5px 0; }
div.hr hr { display: none; }
/* Main Framework
* ------------------------------------------------------------------------- */
#wrap { width:951px; margin:0 auto; text-align:left; }
#banner { height:341px; width:951px; }
#flash { float:left; width:951px; height:341px; }
#hr-index { background:url("images/container-divider.jpg") left top no-repeat; width:951px; height:5px; float:left; }
#content { background:url("images/wrap.jpg") left top repeat-y; width:951px; float:left; }
#column-left { width:652px; float:left; }
#column-left p { padding:10px 15px 10px 35px; }
h1#title-index { background:url("images/title-full-service-kitchen.jpg") left top no-repeat; width:603px; height:39px; margin:28px 0 0 35px; }
h1#title-index span { display:none; }
p.free-est { font-size:17px; }
img.dream { padding:10px 0 0 35px; }
#column-right { width:299px; float:left; }
img.index-testimonial { padding:24px 0 0 10px; }
h2#title-why-choose { background:url("images/title-why-choose-us.jpg") left top no-repeat; width:146px; height:35px; margin:5px 0 0 25px; }
h2#title-why-choose span { display:none; }
h3#title-affiliations { background:url("images/title-affiliations.jpg") left top no-repeat; width:146px; height:35px; margin:5px 0 0 25px; }
h3#title-affiliations span { display:none; }
img.index-affiliations { padding:5px 0 0 25px; }
#column-right ul { padding:5px 20px 5px 15px; }
#column-right ul li { background:transparent url("images/list-style.jpg") 0px 6px no-repeat;
padding-left:18px; } /* pushes text to the right to display bg img */
#page-footer { background:url("images/page-footer.jpg") no-repeat; width:951px; height:30px; clear:both; overflow:hidden;}
#sub-banner { height:158px; width:951px; } /* sets height for all subheads */
body#contact #sub-banner { background:url("images/banner-contact.jpg") top left no-repeat; }
body#thank-you #sub-banner { background:url("images/banner-thank-you.jpg") top left no-repeat; }
body#about #sub-banner { background:url("images/banner-about.jpg") top left no-repeat; }
body#bathroom-process #sub-banner { background:url("images/banner-bathroom-process.jpg") top left no-repeat; }
body#testimonial #sub-banner { background:url("images/banner-testimonial.jpg") top left no-repeat; }
body#kitchen-process #sub-banner { background:url("images/banner-kitchen-process.jpg") top left no-repeat; }
body#faqs #sub-banner { background:url("images/banner-faqs.jpg") top left no-repeat; }
body#bathroom-materials #sub-banner { background:url("images/banner-bathroom-materials.jpg") top left no-repeat; }
body#kitchen-materials #sub-banner { background:url("images/banner-kitchen-materials.jpg") top left no-repeat; }
body#meet-the-team #sub-banner { background:url("images/banner-meet-the-team.jpg") top left no-repeat; }
#sub-content { background:url("images/sub-wrap.jpg") left top repeat-y; width:951px; float:left; }
#breadcrumb { font-size:11px; font-style:italic; }
a.bhome:link,a.bhome:visited { color:#020000; text-decoration:none; outline:none; }
a.bhome:hover,a.bhome:active { color:#020000; text-decoration:underline; outline:none; }
#sub-column-left { width:313px; float:left; }
img.contact-left { padding:0 0 0 19px; }
#title-affiliations-lc { background:url("images/title-affiliations-lc.jpg") left top no-repeat; width:130px; height:37px; margin:15px 0 26px 34px; }
h3#title-affiliations-lc span { display:none; }
img.sub-affiliations { padding:5px 0 0 50px; }
#sub-column-right { width:638px; float:left; }
#sub-column-right p { padding:10px 25px 10px 17px; }
#sub-column-right p.sub-hd { color:#6c1d18; font-size:18px; font-weight:bold; }
#contact1 { float:left; width:319px; }
#contact2 { float:left; width:319px; }
#sub-column-right ul { padding:5px 20px 5px 15px; }
#sub-column-right ul li { background:transparent url("images/list-style.jpg") 0px 6px no-repeat;
padding-left:18px; padding-bottom:15px; } /* pushes text to the right to display bg img */
#sub-column-right ul.one { padding:5px 10px 5px 15px; float:left; }
#sub-column-right ul.one li { background:transparent url("images/list-style.jpg") 0px 6px no-repeat;
padding-left:18px; padding-bottom:15px; } /* pushes text to the right to display bg img */
#sub-column-right ul.two { padding:5px 10px 5px 15px; float:left; }
#sub-column-right ul.two li { background:transparent url("images/list-style.jpg") 0px 6px no-repeat;
padding-left:18px; padding-bottom:15px; } /* pushes text to the right to display bg img */
#sub-column-right ul.three { padding:5px 10px 5px 15px; float:left; }
#sub-column-right ul.three li { background:transparent url("images/list-style.jpg") 0px 6px no-repeat;
padding-left:18px; padding-bottom:15px; } /* pushes text to the right to display bg img */
#sub-column-right ul.four { padding:5px 10px 5px 15px; float:left; }
#sub-column-right ul.four li { background:transparent url("images/list-style.jpg") 0px 6px no-repeat;
padding-left:18px; padding-bottom:15px; } /* pushes text to the right to display bg img */
#sub-column-portfolio { width:951px; float:left; }
h1#title-portfolio { background:url("images/title-portfolio.jpg") left top no-repeat; width:119px; height:50px; margin:10px 0 5px 48px; }
h1#title-portfolio span { display:none; }
h1#title-portfolio-bathrooms { background:url("images/title-portfolio-bathrooms.jpg") left top no-repeat; width:138px; height:37px; margin:30px 0 5px 17px; }
h1#title-portfolio-bathrooms span { display:none; }
h1#title-portfolio-kitchens { background:url("images/title-portfolio-kitchens.jpg") left top no-repeat; width:138px; height:37px; margin:30px 0 5px 17px; }
h1#title-portfolio-kitchens span { display:none; }
h1#title-portfolio-cabinets { background:url("images/title-portfolio-cabinets.jpg") left top no-repeat; width:111px; height:37px; margin:30px 0 5px 17px; }
h1#title-portfolio-cabinets span { display:none; }
object#bathrooms { padding:0 0 10px 17px; }
object#kitchens { padding:0 0 10px 17px; }
object#cabinets { padding:0 0 10px 17px; }
#sub-column-portfolio p { padding:5px 26px 5px 48px; }
#portfolio-page-footer { background:url("images/portfolio-page-footer.jpg") no-repeat; width:951px; height:68px; clear:both; overflow:hidden;}
#sub-page-footer { background:url("images/sub-page-footer.jpg") no-repeat; width:951px; height:68px; clear:both; overflow:hidden;}
/* Global Footer
* ------------------------------------------------------------------------- */
#footer { width:951px; text-align:left; margin:0 auto; padding-top:5px; padding-bottom:20px; }
#footer p { font-size:11px; color:#020000; padding:0px 0px 0px 25px; }
#footer a:link, #footer a:visited { text-decoration:none; color:#7b1c21; }
#footer a:hover, #footer a:active { text-decoration:underline; color:#7b1c21; }
#footer ul { font-size:11px; font-family:"Century Gothic", Arial, Helvetica, sans-serif; padding-left:18px; }
#footer li { padding: 0 5px 0 7px; display:inline; border-left: 1px solid #7b1c21; }
#footer li.first { border: none; }
/* Masthead
* ------------------------------------------------------------------------- */
#masthead {
background: url("images/masthead.jpg") left top no-repeat;
width:951px;
height:186px;
margin:25px 0 0 0;
padding:0;
z-index:99;
}
#masthead span { display: none; }
#masthead li, #masthead a { height:186px; display: block; }
#masthead li { float: left; list-style: none; _display: inline; }
#masthead-01 { width: 211px; margin-left:372px;}
#masthead-02 { width: 140px;}
#masthead-03 { width: 165px;}
#masthead-01 a:hover { background: transparent url("images/masthead.jpg") -372px -186px no-repeat; }
#masthead-02 a:hover { }
#masthead-03 a:hover { background: transparent url("images/masthead.jpg") -700px -186px no-repeat; }
/* Main Navigation
* ------------------------------------------------------------------------- */
#nav {
background: url("images/nav.jpg") left top no-repeat;
width:951px;
height:36px;
margin:0;
padding:0px;
z-index:99;
float:right;
}
#nav span { display: none; }
#nav li, #nav a { height:36px; display: block; }
#nav li { float: left; list-style: none; _display: inline; }
#nav-01 { width: 89px; margin-left:13px;}
#nav-02 { width: 106px;}
#nav-03 { width: 132px;}
#nav-04 { width: 175px;}
#nav-05 { width: 65px;}
#nav-06 { width: 109px;}
#nav-07 { width: 143px;}
#nav-08 { width: 103px;}
#nav-01 a:hover {background: transparent url("images/nav.jpg") -13px -36px no-repeat;}
#nav-02 a:hover {background: transparent url("images/nav.jpg") -102px -36px no-repeat;}
#nav-03 a:hover {background: transparent url("images/nav.jpg") -208px -36px no-repeat;}
#nav-04 a:hover {background: transparent url("images/nav.jpg") -340px -36px no-repeat;}
#nav-05 a:hover {background: transparent url("images/nav.jpg") -515px -36px no-repeat;}
#nav-06 a:hover {background: transparent url("images/nav.jpg") -580px -36px no-repeat;}
#nav-07 a:hover {background: transparent url("images/nav.jpg") -689px -36px no-repeat;}
#nav-08 a:hover {background: transparent url("images/nav.jpg") -832px -36px no-repeat;}
body#index #nav-01 { background:url("images/nav.jpg") -13px -36px no-repeat; }
body#about #nav-02, body#meet-the-team #nav-02 { background:url("images/nav.jpg") -102px -36px no-repeat; }
body#process #nav-03, body#bathroom-process #nav-03, body#kitchen-process #nav-03 { background:url("images/nav.jpg") -208px -36px no-repeat; }
body#materials #nav-04, body#bathroom-materials #nav-04, body#kitchen-materials #nav-04 { background:url("images/nav.jpg") -340px -36px no-repeat; }
body#faqs #nav-05 { background:url("images/nav.jpg") -515px -36px no-repeat; }
body#portfolio #nav-06, body#portfolio-bathrooms #nav-06, body#portfolio-kitchens #nav-06, body#portfolio-cabinets #nav-06 { background:url("images/nav.jpg") -580px -36px no-repeat; }
body#testimonials #nav-07 { background:url("images/nav.jpg") -689px -36px no-repeat; }
body#contact #nav-08 { background:url("images/nav.jpg") -832px -36px no-repeat; }
/* --- son of suckerfish: horizontal sprite nav */
#nav li ul {
position:absolute;
left:-9999px;
padding-right:1px; /* Fixes one px spacing for border-right in FF */
background-color:#6a2623; /* Background color of drop down nav - add more styles (i.e. background image) if you want */
margin-left:0;
margin-top:-3px;
z-index: 99;
}
#nav li ul li {
height:28px; /* Height of each drop down nav item */
border-bottom:1px dotted #942829;
border-top:none;
}
#nav li ul li a {
width:100%;
height:28px; /* Height of each drop down nav item, should match above */
line-height:28px; /* Height of each drop down nav item again, should match above */
}
#nav li ul li a span {
display:block;
padding: 0 0 5px 0px;
color:#fff;
text-align:center;
}
#nav li ul li a:hover span, #nav li ul li a:active span {
color:#fff;
}
/* Drop down link styles */
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
font-size:11px;
color:#fff;
text-decoration:none;
}
#nav li:hover ul, #nav li.sfHover ul {
left: auto;
}
#nav li:hover, #nav li.sfHover { /* fixes son of suckerfish bug in IE7 */
position: static;
}
/** Support for the "iehover-fix.js" **/
#nav iframe {
position: absolute;
left: 0;
top: 0;
z-index: -1;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
/* Hover styles for drop down items */
#nav-02 ul a:hover, #nav-03 ul a:hover, #nav-04 ul a:hover, #nav-06 ul a:hover {
background-image:none;
background-color:#792c29;
color:#fff;
text-decoration:none;
}
/* width of drop down nav - choose width that allows items to display on one line */
#nav-02 ul, #nav-02 li { width:106px; }
#nav-03 ul, #nav-03 li { width:132px; }
#nav-04 ul, #nav-04 li { width:175px; }
#nav-06 ul, #nav-06 li { width:109px; }
/* Quick Contact Form
* ------------------------------------------------------------------------- */
#quick-contact { background: url("images/bg-quick-contact.jpg") left top no-repeat; margin-left:19px; }
form { width:200px; padding:193px 0 10px 22px;
font-family:"Times", "Bitstream Vera Sans", Arial, Verdana, Helvetica, sans-serif;
font-size:15px; color:#e2c298; }
form p { font-size:10px; }
form br { line-height:0; /* defaults vertical spacing between fields */}
input, textarea, select {
background-color:#fff !important;
border:1px solid #fff;
color:#000;
width:200px;
height:18px;
margin-bottom:3px; /* sets vertical spacing between fields */
padding-top:4px; /* vertically position text in input/textarea field */
padding-left:4px; /* horizontally position text in input/textarea field */
font-family:"Century Gothic", Arial, Verdana, Helvetica, sans-serif;
font-size:11px;
}
textarea { height:70px; overflow:auto; }
input.submit, input.submit-contact-main {
width:60px;
cursor:pointer;
padding:0;
}
input.submit-contact-main { margin:80px 0 0 170px; }
input.submit-contact-main {
background: url("images/btn-send.jpg");
width:127px;
height:54px;
border:none;
cursor:pointer;
}
input.submit-quick-contact {
background: url("images/btn-quick-contact.jpg");
width:116px;
height:43px;
border:none;
cursor:pointer;
margin-left:50px;
}
/* Main Contact Form
* ------------------------------------------------------------------------- */
#bg-form { background: url("images/bg-contact-form.jpg") left top no-repeat; margin:0 0 0 80px; }
#contact-main { padding:25px 0px 60px 0px; }
#contact-main label {
width:120px;
font-family:"Times", "Bitstream Vera Sans", Arial, Verdana, Helvetica, sans-serif;
font-size:15px;
position:relative;
display:block;
text-align:right;
margin-bottom:1px;
color:#e2c298;
}
#contact-main label input, #contact-main label textarea, #contact-main label select {
width:200px;
position:absolute;
left:110%;
top:-2px;
}
#contact-main label textarea { height:100px; }