/* Global and General Layout */



body {

	margin: 0px;

	padding: 0px;

	font-family: Verdana, Arial, Helvetica, Sans Serif;

	font-size: 11px;

	background-color: #0C100A;

	background-image: url("../images/background.gif");

  background-repeat: repeat-x;

}



#container {

	width: 770px;

	margin-left: 10px;

	background-color: #678B5B;

	margin-top: 10px;

  padding: 3px;

}



#leftSide { width: 500px; float: left;}

#leftSide .upper { height: 235px; }





/* Main Header */



#header {

	width: 770px;

	margin-top: 5px;

	margin-left: 10px; color: white;

}



#header h1 {

	font-size: 32px;

	font-weight: bold;

	padding: 0;

	margin: 0;

}



#header h2 {

	font-size: 16px;

	font-weight: bold;

	padding: 0;

	margin: 0;

}



#headerAd {

	float: right;

	background-color: white;

	border: 6px solid #678B5B;

	padding: 8px 5px 8px 5px;

	height: 25px;

	color: black;

	font-size: 18px;

	margin-top: -45px;

}



/* Main Navigation */



#leftSide .upper .navigation { width: 160px; padding: 0; font-size: 10px; float: left; }

#leftSide .upper .navigation ul { list-style: none; padding: 5px; margin: 0; }

#leftSide .upper .navigation ul li { padding: 5px; background-color: #9C93B8; border-left: 1px solid white;

  border-right: 1px solid white; border-top: 1px solid white; }

#leftSide .upper .navigation ul li.topLi { border-top: 1px solid white; }

#leftSide .upper .navigation ul li.bottomLi { border-bottom: 1px solid white; }

#leftSide .upper .navigation ul li a { background-color: #665B8A; color: white; padding: 4px; width: 100%; text-decoration: none;}

#leftSide .upper .navigation ul li a.selected { background-color: #39334D; }

#leftSide .upper .navigation ul li a:HOVER { background-color: #39334D; }



/* Center Image Frame */



#leftSide .upper .image { padding: 0; margin-top: 5px; border: 1px solid white; float: right; }





/* Right Side Content Area */



#rightSide {

	width: 253px;

	float: left;

	margin: 0;

	margin-left: 7px;

	margin-top: 5px;

}



#rightSide .contentArea {

	background-color: white;

	padding: 1px;

	height: 394px;

}



#rightSide .contentArea .header {

	width: 100%;

	font-size: 16px;

	font-weight: bold;

	color: white;

	background-color: #39334D;

	padding: 5px;

	margin: 0;

}







#rightSide .contentArea .details {

	padding: 2px;

	margin-top: 5px;

}



#rightSide .contentArea .details p {

	padding: 3px 5px 3px 5px;

	margin: 0px;

}



#rightSide .contentArea .details h1 {

	font-size: 14px;

	text-align: left;

	padding: 5px 5px 5px 5px;

	margin: 0px;

}



#rightSide .contentArea .details h2 {

	font-size: 11px;

	text-align: left;

	padding: 3px 5px 3px 5px;

	margin: 0px;

}



#rightSide .contentArea .details h3 {

	font-size: 11px;

	text-align: left;

	font-style: italic;

	padding: 3px 5px 3px 5px;

	margin: 0px;

}





#rightSide .contentArea div { padding: 2px; padding-top: 0; }

#rightSide .contentArea div td { padding: 2px 0px 2px 0px; font-weight: bold; }



/* What We Do Botton Content Area */


#leftside .wedobottomContentArea {

	clear: both;

	width: 495px;

	background-color: black;

	margin-top: 5px;

	padding: 1px;

  margin-left: 5px;

  height: 130px;

}

#leftSide .wedobottomContentArea .header {

	width: 493px;

	font-size: 16px;

	font-weight: bold;

	color: white;

	background-color: #39334D;

	padding: 5px;

	margin: 0;

	margin-bottom: 5px;

}


#leftSide .wedobottomContentArea p {

	padding: 3px 5px 3px 5px;

	margin: 0px;

}


#leftSide .wedobottomContentArea h1 {

	font-size: 14px;

	text-align: left;

	padding: 5px 5px 5px 5px;

	margin: 0px;

}


#leftSide .wedobottomContentArea h2 {

	font-size: 11px;

	text-align: left;

	padding: 3px 5px 3px 5px;

	margin: 0px;

}

#leftSide .wedobottomContentArea h3 {

	font-size: 11px;

	text-align: left;

	font-style: italic;

	padding: 3px 5px 3px 5px;

	margin: 0px;

}



#leftSide .wedobottomContentArea .imageLink {

	border: none;

}



/* Bottom Content Area */

#leftSide .bottomContentArea {

	clear: both;

	width: 495px;

	background-color: white;

	margin-top: 5px;

	padding: 1px;

  margin-left: 5px;

  height: 130px;

}



#leftSide .bottomContentArea .header {

	width: 493px;

	font-size: 16px;

	font-weight: bold;

	color: white;

	background-color: #39334D;

	padding: 5px;

	margin: 0;

	margin-bottom: 5px;

}



#leftSide .bottomContentArea p {

	padding: 3px 5px 3px 5px;

	margin: 0px;

}



#leftSide .bottomContentArea h1 {

	font-size: 14px;

	text-align: left;

	padding: 5px 5px 5px 5px;

	margin: 0px;

}



#leftSide .bottomContentArea h2 {

	font-size: 11px;

	text-align: left;

	padding: 3px 5px 3px 5px;

	margin: 0px;

}



#leftSide .bottomContentArea h3 {

	font-size: 11px;

	text-align: left;

	font-style: italic;

	padding: 3px 5px 3px 5px;

	margin: 0px;

}



#leftSide .bottomContentArea .imageLink {

	border: none;

}



/* Main Footer */





#leftSide .featuredProjects div { padding: 3px; padding-bottom: 5px; text-align: left; }

#leftSide .featuredProjects div img { margin: 1px; }

#leftSide .featuredProjects p { margin: 10px; }









#footer { clear: both; width: 755px; background-color: white; margin-top: 10px; margin-left: 5px; padding-top: 10px;

  padding-bottom: 10px; margin-bottom: 5px; }

#footer img { float: left; padding: 0; margin: 0; }

#footer p { margin: 10px 10px 10px 10px; }





#modalContainer { background-color: #678B5B; width: 380px; }

#modalContainer .data { padding: 4px; }

#modalContainer .data h1 { font-size: 14px; font-weight: bold; padding: 0; margin: 0;}

#modalContainer .images { clear: both; }

#modalContainer .images .wrapper { text-align: center; }

#modalContainer .images .wrapper img { border: none; }

/* Testimonials */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.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 on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}