@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	background-color: #5c626e;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#top{  /*This is the  part of your website with the hero image and the black box*/
width: 984px;
height: 158px;
text-align: left; 
float: left;
background-image:url(../images/topbg.jpg);
}
#logo{  /*This is the  part of your website with the hero image and the black box*/
width: 693px;
height: 130px;
text-align: left; 
float: left;
}
#nav{ /*This is the container for your navigation bar*/
width: 984px;
height: 29px;
text-align: left; 
float: left;
}

.navbar {
	padding-top: 4px;
    }

.navbar ul { /*This is the container for the navbar with the tabs*/
	margin: 0;
	padding: 0;
    list-style-type: none;
    text-align: left;
    }

.navbar ul li {   /*This is the part that makes you navigation bar horizontal in stead of vertical*/
display: inline;
	    }

.navbar ul li a { /*This is the part that creates the formatting and the distance between the items*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#ffffff;
    text-decoration: none;
    padding: .2em 1em;
    }
.navbar li #active /*This is the container for the navbar */
{
    color: #000;
}	
	#home #nav-home a, #about #nav-about a, #services #nav-services a, #sale #nav-sale a, #restoration #nav-restoration a, #info #nav-info a, #contact #nav-contact a, #gallery #nav-gallery a /*This is the part that makes a tab show up when a page is active. In the body tag, you'll see an ID with a page name, this is linked to this so the correct tab is shown at the correct page*/
	{
    color: #000;
}	

.navbar ul li a:hover { /*This is the part that makes the tabs show up when you hover*/
    color: #000;
		background-image:url(../images/tab.png);
		background-position:center;
		background-repeat:no-repeat;
    } 


#container{
width: 984px; /*The width of your layout*/
margin-left: auto;/*Margin left and right set to auto center your layout*/
margin-right: auto;
text-align: left; /*Resets the text alignment*/
}
#hero{  /*This is the Top part of your website with the logo, the navigation and the yellow line*/
width: 984px;
height: 265px;
text-align: left; 
float: left;
}

#heroimage{ /*This is the container for the header image*/
width: 643px;
height: 265px;
text-align: left; 
float: left;
}

#blackbox{ /*This is the container for the black box*/
width: 341px;
height: 265px;
text-align: left; 
float: right;
}


#middle{  /*This is the Middle Part of your website with the Orange bar*/
width: 984px;
height: 110px;
text-align: left;
float: left;
}
#bottom{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottomservices{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_alternative1.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottomsale{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_clean.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottomabout{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_alternative2.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottomcontact{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_alternative7.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottomrestoration{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_alternative4.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottominfo{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_alternative5.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}
#bottomgallery{  /*This is the Middle Part of your website with the content*/
width: 984px;
height: auto;
text-align: left; 
background-image:url(../images/contentbg_alternative6.jpg);
background-repeat:no-repeat;
background-color:#f0f0f0;
float: left;
}

#content{ /*This is the container for the content*/
width: 442px;
height: auto;
text-align: left; 
float: left;
padding: 25px;
}

#contentsale{ /*This is the container for the content*/
width: 934px;
height: auto;
text-align: left; 
float: left;
padding: 25px;
}

#legal{ /*This is the container for the footer with the site map*/
width: 984px;
height: 22px;
text-align: center; 
background-color: #000000;
float: left;
padding-top: 10px;
color:#ffffff;
}

.header{ /*This is the font formatting for the header text*/
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
color:#000000;
}
.headersmall{ /*This is the font formatting for the header text*/
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#000000;
}

.text{ /*This is the font formatting for the main text*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height: 17px;
color:#000000;
}

div.galleryrow{ /*This is the container for the row of thumbnails*/
width: 442px;
height: 163px;
float: left;
}
div.gallerythumb{ /*This is the container for the thumbnails on the gallery page*/
width: 200px;
height: 163px;
text-align: left; 
float: left;
}
div.salerow{ /*This is the container for the row of thumbnails*/
width: 934px;
height: auto;
float: left;
padding-bottom: 10px;
}
div.saletext{ /*This is the container for the thumbnails on the gallery page*/
width: 500px;
height: auto;
text-align: left; 
float: left;
}
div.saleimage{ /*This is the container for the thumbnails on the gallery page*/
width: 400px;
height: auto;
text-align: left; 
float: right;
}

.imageleft{ /*This is a stylesheet that helps create a padding when you align an image to the left*/
padding-right: 10px;
padding-bottom: 10px;
}
.imageright{  /*This is a stylesheet that helps create a padding when you align an image to the right*/
	padding-left: 10px;

}