@charset "utf-8";
body  {
font: 12px/1.5 "Segoe UI", Helvetica, Arial, sans-serif;
background: #C2C5BC;
margin: 0;
padding: 0;
text-align: center;
color: #222021;
}
img {
border: none;
}
a {
text-decoration: underline;
color: #222021;
}
a:hover {
text-decoration: underline;
color: #222021;
}
#container { 
position: relative;
width: 812px;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center top;
margin: 0 auto;
text-align: left;
}
#header {
background-image: url(images/head.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 102px 20px 36px 0;
} 
#header h1 {
margin: 0;
}
#header h1 span {
display: none;
}
#navigation a {
display: block;
float: left;
color: #FFF;
font-weight: bold;
background: url(images/grey-tab.jpg) left top no-repeat;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
width: 80px;
}
#navigation a:hover {
color: #000;
font-weight: bold;
background: url(images/white-tab.jpg) left top no-repeat;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
width: 80px;
}
body#home a.home, body#services a.services, body#extensions a.extensions, body#estimate a.estimate, body#resources a.resources, body#questions a.questions {
color: #000;
font-weight: bold;
background: url(images/white-tab.jpg) left top no-repeat;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
width: 80px;
}
#navigation ul {
list-style: none;
padding: 0;
margin: 0 10px 0 0;
}
#navigation li {
float: right;
margin: 0;
}
#sidebar1 {
position: absolute;
top: 125px;
left: 2px;
}
#sidebar1 ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#sidebar1 li {
background-image: url(images/sm-tab.jpg);
background-repeat: no-repeat;
padding: 6px 8px 6px 12px;
}
#right {
position: absolute;
top: 139px;
right: 26px;
width: 230px; 
}
#sidebar2 {
background-color: #C2C5BC;
background-image: url(images/bottom.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#sidebar2 h1 {
margin: 0 0 -10px 0;
width: 230px;
height: 40px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#sidebar2 h1 span {
display: none;
}
#sidebar2 p {
padding: 0 5px 0 5px;
}
#sidebar3 {
text-align: center;
}
#main { 
margin: 1px 262px 0 50px;
}
#main h1 {
font: 18px "Segoe UI", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #222021;
margin: 10px 0 10px 0;
}
#main h2 {
font: 16px "Segoe UI", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #222021;
margin: 5px 0 5px 0;
text-align: center;
}
#main h3 {
font: 16px "Segoe UI", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #222021;
margin: 5px 0 5px 0;
text-align: left;
}
ul#default {
list-style: url(images/bullet.gif);
}
ul#gallery {
list-style-type: none;
margin: 0 10px 0 10px;
padding: 0;
text-align: center;
}
ul#gallery li {
float: left;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 5px;
}
ul#gallery img {
display: block;
background-color: #FFFFFF;
border: 1px solid #ABABAB;
padding: 2px;
}
#footer { 
padding: 16px 0 22px 0;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
color: #C1B2BC;
}
#footer a {
text-decoration: none;
color: #C1B2BC;
}
#footer a:hover {
text-decoration: none;
color: #FFF;
}
#copyright {
padding: 0 0 5px 38px;
background: #C2C5BC;
text-align: center;
}
#photos {
padding: 10px 10px 20px 10px;
background-color: #FFFFFF;
}
.contact {
font: 12px/1.5 "Segoe UI", Helvetica, Arial, sans-serif;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}