/* CSS Document */

body { text-align: center;
background-color: #b6ccb6;

/*margin-left:50%;*/}


.center {
text-align: left;
width: 800px; 
margin-left: auto; 
margin-right: auto;
position:relative;

}

a img { border: 0px; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

#content h1, #content ul, #content ol, #content li, #content p{
	margin-left:20px;
	margin-right:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
#content li {
	margin-top:2px;
}

#content h1{
	margin-left:20px;
	margin-right:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
}
.accentColor{color: #336600;font-weight: bold;}
.accentStyle {font-weight: bold; color: #336600; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; }
.title{text-decoration:underline;}
.headerSection {
	font-weight: bold; color: #336600; 
}
#menuBar a:link, #menuBar a:visited,
#menubar a:hover, #menubar a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #4c5716;
	text-decoration: none;
}
#menuBar a:hover {
	color:  #990033;
}

.pageBackground {
	background-color: #FFFFFF;
}


/* The containing box for the gallery. */
#photoGallery {
    position:relative; 
    width:770px;  
	height:400px;
    margin:20px auto 0 auto; 
    border:1px solid #aaa; 
    background:#fff url(../images/process.jpg) 75px 10px no-repeat;

    }
	


/* Removing the list bullets and indentation for gallery display*/
#photoGallery ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }
	
/* Remove the images and text from sight */
#photoGallery a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
    }
	
/* Adding the thumbnail images */
#photoGallery a.gallery, #photoGallery a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
	
#photoGallery a.slidea {
	background-image:url(../images/buildingGallery/sitePrepMini.jpg);
    height:58px; 
    width:93px;
    }
#photoGallery a.slideb {
	background-image:url(../images/buildingGallery/movingMini.jpg);
    height:58px; 
    width:93px;
    }

#photoGallery a.slidec {
    background-image:url(../images/buildingGallery/frame1Mini.jpg); 
    height:96px; 
    width:60px;
    }
#photoGallery a.slided {
	background-image:url(../images/buildingGallery/framingPeterMini.jpg);
    height:96px; 
    width:60px;
    }
#photoGallery a.slidee {
	background-image:url(../images/buildingGallery/sidingTeamMini.jpg);
    height:96px; 
    width:60px;
    }
#photoGallery a.slidef {
	background-image:url(../images/buildingGallery/colinWorkMini.jpg);
    height:96px; 
    width:60px;
	}
	
#photoGallery a.slideg {
	background-image:url(../images/buildingGallery/doorOnMini.jpg);
    height:96px; 
    width:60px;
    }
#photoGallery a.slideh {
	background-image:url(../images/buildingGallery/interiorMini.jpg);
    height:96px; 
    width:60px;
    }

#photoGallery a.slidei {
	background-image:url(../images/buildingGallery/frame2Mini.jpg); 
    height:58px; 
    width:93px;
    }
#photoGallery a.slidej{
	background-image:url(../images/buildingGallery/roofingMini.jpg);
    height:58px; 
    width:93px;
    }


#photoGallery a.slidek {
	background-image:url(../images/buildingGallery/almostDoneMini.jpg);
    height:58px; 
    width:93px;
    }
	
#photoGallery a.slidel {
	background-image:url(../images/buildingGallery/penWorkMini.jpg);
    height:58px; 
    width:93px;
    }
	
/* set the size of the unordered list to neatly house the thumbnails */
#photoGallery ul {
    width:198px; 
    height:386px;
    }
#photoGallery li {
    float:left;
    }
	
/* move the thumbnails into the correct position */
#photoGallery ul {
    margin:5px; 
	padding-top:5px;
    float:right;
    }

/* change the thumbnail border color */
#photoGallery a.gallery:hover {
    border:1px solid #ffffff; 
    }
	
/* styling the :hover span */
#photoGallery a.gallery:hover span {
    position:absolute; 
    width:372px; 
    height:372px; 
	top:10px;
    left:75px; 
    color:#000; 
    background:#fff;
    }
	
#photoGallery a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }