.tail-top{ background:url(images/bg-home.png) top repeat-x #fff}
.tail-bottom{background:url(images/bot.gif) bottom repeat-x  }


.col-1, .col-2, .col-3, .col-4{ float:left}
/*======= width =======*/
.main{margin:0 auto; text-align:left; width:992px; }

/*======= static header =======*/
#header {
	height: 150px;
}

#content a{
	color: #37b2d1;
}

#content p{
	margin-bottom: 20px;
}

#content .line-divider{
	clear: both;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* PROJECT-GALLERY -----------------------------------------------*/

.project-column .project-gallery{
	display: block;
	overflow: hidden;
	width: 468px;
}

.project-column .project-gallery li{
	display: block;
	float: left;
	overflow: hidden;
	background: url(../img/plus-sign.png) center center no-repeat;
	width: 204;
	height: 148px;
	margin-right: 30px;
	margin-top: 30px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

/* PROJECT-RELATED -----------------------------------------------*/

.related-title{
	margin-left: 30px;
}

.related-projects{
	display: block;
	overflow: hidden;
}

.related-projects li{
	display: block;
	float: left;
	overflow: hidden;
	width: 204px;
	height: 280px;
	margin-left: 30px;
	margin-top: 30px;
}

.related-projects li strong{
	display: block;
}

.related-projects li a.box{
	display: block;
	overflow: hidden;
	width: 204px;
	height: 148px;
	margin-bottom: 30px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.related-projects li a.box img{
	opacity: 0.7;
}

.related-projects li:hover a.box img{
	opacity: 1;
}

#content .related-projects li a{
	text-decoration: none;
	color: #999;
}

/* GALLERY -----------------------------------------------*/

#content .gallery{
	display: block;
	overflow: hidden;
}

#content .gallery li{
	display: block;
	float: left;
	overflow: hidden;
	background: url(../img/plus-sign.png) center center no-repeat;
	width: 204px;
	height: 148px;
	margin-left: 30px;
	margin-bottom: 30px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#content .gallery.three-cols li{
	width: 282px;
	height: 267px;
}

#content .gallery.two-cols li{
	width: 438px;
	height: 267px;
}

#content .gallery li a{
	display: block;
}


/*======= index.html =======*/
#page1 #content .col-1{ width:317px; margin-right:41px}
#page1 #content .col-2{ width:612px}
#page1 #content .col-3{
	width: 285px;
	margin-right: 60px
}
#page1 #content .col-4{ width:265px}
/*======= index-1.html =======*/
#page2 #content .col-1{ width:320px; margin-right:38px}
#page2 #content .col-2{ width:612px}
#page2 #content .col-3{ width:270px; margin-right:73px}
#page2 #content .col-4{ width:260px}
/*======= index-2.html =======*/
#page3 #content .col-1{ width:320px; margin-right:38px}
#page3 #content .col-2{ width:612px}
#page3 #content .col-3{ width:270px; margin-right:70px}
#page3 #content .col-4{ width:272px}
/*======= index-3.html =======*/
#page4 #content .col-1{ width:320px; margin-right:38px}
#page4 #content .col-2{ width:612px}
#page4 #content .col-3{ width:300px; margin-right:30px}
#page4 #content .col-4{ width:280px}
/*======= index-4.html =======*/
#page5 #content .col-1{ width:317px; margin-right:41px}
#page5 #content .col-2{ width:612px}
#page5 #content .col-3{ width:245px; margin-right:89px}
#page5 #content .col-4{ width:275px}


<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

/*======= index-5.html =======*/
#page6 #content .col-1{ width:320px; margin-right:38px}
#page6 #content .col-2{ width:612px}
#page6 #content .col-3{ width:300px; margin-right:40px}
#page6 #content .col-4{ width:270px}
/*======= index-6.html =======*/
#page7 #content .col-1{ width:320px; margin-right:38px}
#page7 #content .col-2{ width:612px}
#page7 #content .col-3{ width:300px; margin-right:30px}
#page7 #content .col-4{ width:280px}
/*======= index-7.html =======*/
#page8 #content .col-1{ width:320px; margin-right:38px}
#page8 #content .col-2{ width:612px}
#page8 #content .col-3{ width:288px; margin-right:0}
#page8 #content .col-4{ width:323px}

/*======= footer =======*/
#footer { height:112px; }