/** CSS - Superior Cabinets
==============================================================================*/



/** Body
==============================================================================*/

html, body {
font-family:  Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
margin: 0 auto;
background: #2d1d0e;
background-image: url(images/body_bg.jpg);
background-repeat: repeat-x;
}

* { /* removes defaults from all elements */
	margin: 0;
	padding: 0;
	}

/** Main Container
==============================================================================*/

#container {
width: 760px;
margin: 0 auto;
}

/** Top Contact Information
==============================================================================*/

#topinfo {
float: left;
width: 760px;
padding-top: 2px;
margin-top: 8px;
background-color: #a28868;
color: #ffffff;
font-weight: bold;
font-size: 10px;
}

p.left {
float: left;
padding-left: 20px;
margin-bottom: 4px;
}

p.right {
float: right;
padding-right: 20px;
margin-bottom: 4px;
}

span.tab {
padding-left: 15px;
}


/** Logo
==============================================================================*/

#logocontainer {
text-align: center;
width: 760px;
}

img#logo {
margin-top: 9px;
}

a img {
border: none;
}

.clear {
clear: both;
}

img, #logo {
behavior: url("pngbehavior.htc");
}

/** Slogan
==============================================================================*/

h2#slogan {
float: right;
margin-top: 20px;
text-align: right;
color: #cdad85;
font-size: 24px;
line-height: 24px;
margin-right: 10px;
}

/** Header Images
==============================================================================*/

#header-images {
float: left;
height: 210px;
width: 760px;
margin-left: 0px;
margin-top: 0px;
background-image: url(images/header_image_bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#images {
height: 202px;
width: 760px;
}

ul#installations {
list-style-type: none;
padding: 0px;
margin: 0px;
}

/** Nav
==============================================================================*/

ul#nav {
float: left;
list-style-type: none;
margin-top: -8px;
margin-left: -5px;
padding: 0px;
width: 765px;
height: 30px;
overflow: hidden;
background-color: #a28868;
}

ul#nav li {
display: block;
float: left;
height: 35px;
}

li#home a {
display: block;
float: left;
height: 35px;
width: 87px;
overflow: hidden;
background-image: url(images/nav/nav_home.gif);
background-position: 0 0;
background-repeat: no-repeat;
}

li#home a:hover {
background-position: 0 -43px;
}

li#home a#current {
background-position: 0 -86px;
}

li#home a span {
display: none;
}

li#gallery a {
display: block;
float: left;
height: 35px;
width: 95px;
overflow: hidden;
background-image: url(images/nav/nav_gallery.gif);
background-position: 0 0;
background-repeat: no-repeat;
}

li#gallery a:hover {
background-position: 0 -43px;
}

li#gallery a#current {
background-position: 0 -86px;
}

li#gallery a span {
display: none;
}

li#about a {
display: block;
float: left;
height: 35px;
width: 83px;
overflow: hidden;
background-image: url(images/nav/nav_about.gif);
background-position: 0 0;
background-repeat: no-repeat;
}

li#about a:hover {
background-position: 0 -43px;
}

li#about a#current {
background-position: 0 -86px;
}

li#about a span {
display: none;
}

li#references a {
display: block;
float: left;
height: 35px;
width: 129px;
overflow: hidden;
background-image: url(images/nav/nav_ref.gif);
background-position: 0 0;
background-repeat: no-repeat;
}

li#references a:hover {
background-position: 0 -43px;
}

li#references a#current {
background-position: 0 -86px;
}

li#references a span {
display: none;
}

li#contact a {
display: block;
float: left;
height: 35px;
width: 99px;
overflow: hidden;
background-image: url(images/nav/nav_contact.gif);
background-position: 0 0;
background-repeat: no-repeat;
}

li#contact a:hover {
background-position: 0 -43px;
}

li#contact a#current {
background-position: 0 -86px;
}

li#contact a span {
display: none;
}

/** Content
==============================================================================*/

#content {
float: left;
width: 760px;
margin-top: 30px;
color: #ffffce;
}

#content p {
text-align: justify;
}

#leftcol, #leftcol-secondary  {
float: left;
width: 510px;
}

#leftcol-gallery {
float: left;
width: 760px;
}

#ssp {
border: 1px solid #333333;
}

#rightcol {
float: right;
width: 180px;
padding: 20px;
background-color: #3b2613;
}

.image {
border: 1px solid #ffffff;
padding: 2px;
}

#leftcol p, #leftcol-secondary p {
color: #ffffce;
font-size: 14px;
margin-bottom: 25px;
line-height: 22px;
}

.list-left {
float: left;
width: 140px;
}

.list-right {
float: left;
width: 100px;
}

#reflist-left {
float: left;
width: 240px;
margin-right: 30px;
}

#reflist-right {
float: left;
width: 240px;
}

ul.services, ul.clients {
list-style-type: none;
padding: 0px;
margin: 0px;
line-height: 20px;
}

ul.services li, ul.clients li {
padding-left: 25px;
background-image: url(images/icons/tick.gif);
background-repeat: no-repeat;
background-position: 0 3px;
}

#services {
float: left;
width: 240px;
margin-right: 30px;
}

#clientlist {
float: left;
width: 240px;
}

ul#points {
padding: 0px;
margin: 0px;
list-style-type: none;
}

ul#points li {
padding-left: 30px;
background-image: url(images/icons/tick_light.gif);
background-repeat: no-repeat;
background-position: 0 0px;
margin-bottom: 15px;
}

p.testimonial {
margin-top: 15px;
font-size: 12px;
font-style: oblique;
}

p.name {
font-size: 14px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}

p.title {
font-size: 11px;
margin-top: 0px;
font-style: oblique;
}

p.contact {
margin-bottom: 15px;
}

#map {
height: 180px;
width: 176px;
border: 1px solid #ffffff;
padding: 2px;
overflow: hidden;
}

/** Contact Form
==============================================================================*/

label{
float: left;
width: 390px;
font-weight: bold;
}

input, textarea{
width: 400px;
margin-bottom: 5px;

}

textarea{
width: 400px;
height: 150px;
}

.boxes{
width: 100px;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}

input:focus, textarea:focus, input.sffocus, textarea.sffocus {
background: #ffffde;
}

#submitbutton{
margin-left: 305px;
margin-top: 0px;
width: 100px;
}

/** Footer
==============================================================================*/

#footer-wrapper {
margin: 0 auto;
background-image: url(images/footer_bg.gif);
background-repeat: repeat-x;
height: 121px;
margin-top: 30px;
}

#footer-content {
margin: 0 auto;
width: 760px;
}

#footer-content p {
margin-top: 10px;
padding-top: 5px;
color: #a28868;
}

#footer-content p#siteby {
margin-top: 0px;
}

p#siteby a { 
color: #a28868;
text-decoration: none;
} 

ul#footer-nav {
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;
}

ul#footer-nav li {
display: block;
float: left;
}

ul#footer-nav li a {
display: block;
float: left;
padding-right: 15px;
padding-left: 15px;
border-right: 1px solid #a28868;
color: #a28868;
text-decoration: none;
} 

ul#footer-nav li a#first {
padding-left: 0px;
}

ul#footer-nav li a#last {
padding-right: 0px;
border-right: none;
}