@charset "UTF-8";
/* CSS Document for Eagle Ridge Mechanical - V1.0 - Manuel Valdez - September 15, 2008 */
/*<style type="text/css">*/


/***************************************************************************************/
/***************************************************************************************/
/*css flyout main menu*/
#mainMenu{
	width: 846px;
	padding-top: 115px;
	padding-left: 50px;
	position: absolute;
}

#mainMenu ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#mainMenu ul li{
	display: inline;
	margin-right: 100px;
}
#mainMenu ul li a{
	color: black;
	text-decoration: none;
	font-size: 15px;
}
#mainMenu li{
	position: relative;
}
#mainMenu ul ul{
	position: absolute;
	top: 15px;
	left: 0;
	width: 150px;
}

#mainMenu li ul{
	display: none;
}
#mainMenu ul li:hover ul,
#mainMenu ul li.sfhover ul,
#mainMenu ul li ul.active{
	display: block;
}
#mainMenu ul ul li{
	display: block;
	margin: 0;
	margin-bottom: 5px;
}
#mainMenu ul ul li a{
	color: #0062A0;
	font-size: 13px;
}
#mainMenu ul li.firstRootLi{
}
#mainMenu ul li.lastRootLi{
	margin-right: 0;
}
#mainMenu ul ul li.firstChildLi{
	padding-top: 15px;
}
#mainMenu ul ul li.lastChildLi{
}
/**************************************************************************************/
#mainContainer{
	width:1030px;
	vertical-align:top;
}
body { 
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 2px solid #000;/*created the border for the whole webpage*/
	width: 1022px;
	height: 766px;
}
#header {/*this is the top logo of the page*/
	background: url(../images/header.jpg) no-repeat;
	width: 846px;
	height: 198px;
}
#sideBar {/*this is the side logo of the site*/
	float: left;
	margin: 0;/*this will remove the tiny margin that the image comes with and will make it fit perfectly on the page*/
	padding: 0;/*this will remove the tiny padding that the image comes with and will make it fit perfectly on the page*/
}
#topNav { /* the unordered list for the top navigation, to edit the top navigation as a whole */
	margin: 0;
	padding-top: 112px;
	padding-left: 21px;
}

#topNav li {/*this alters only the list in the div topNav*/
	display: inline;/*this makes the list appear horizontaly*/
	list-style: none;/*this removes the bullets in the list*/
	font-size:14px;
	padding:2em;/*this creates the spacing between the words*/
	padding-top:100px;
	letter-spacing: 3px;
}
/*#topnav li.first { /*to remove the left padding because we want to line it up with the image, we created a class that only affects the word HOME <li class="first">HOME</li> 
	padding-left: 0;
}*/
#topNav li a {
	text-decoration: none;
}
#topNav li a:visited {
	color: #000000;
}
#content {/*this includes the paragraph and the image*/
	margin: 30px 0 0 55px;/*here so we dont have to write: margin top,right,bottom,left, we only use: margin and we write the measurements in that order*/
}

#contentClient {/*this includes the paragraph and the image*/
	margin: 30px 0 0 40px;/*here so we dont have to write: margin top,right,bottom,left, we only use: margin and we write the measurements in that order*/
}

#contentClient p {/*this alters only the paragraphs in the content*/
	font-size: 12px;
	line-height: 165%;
	padding-right: 10px;
}

#contentClient ul {
	font-size: 12px;
	line-height: 14pt;
}

#content p {/*this alters only the paragraphs in the content*/
	font-size: 12px;
	line-height: 165%;
	padding-right: 10px;
}
#content ul {
	font-size: 12px;
	line-height: 14pt;
}
.bigCap {/*In the PSD file the first letter of the paragraph was bigger than the rest and also a different color, to deal with that you create a class and in this case we named it bigCap*/
	color: #008fd4;
	font-size: 18pt;
	font-weight: bold;
	line-height: 22pt;
}
.imgRight {/* is used as a template for all websites that have images in the content to deal with the image only <img src="images/van.jpg" class="imgRight" style="padding-top: 65px;" /> and also in this case we dealt with the padding of the image in the html instead of the CSS to make things easier. */
	float: right;
	margin-left: 22px;
	padding-right: 8px;
	
	
}
.imgRightHistory {/* is used as a template for all websites that have images in the content to deal with the image only <img src="images/van.jpg" class="imgRight" style="padding-top: 65px;" /> and also in this case we dealt with the padding of the image in the html instead of the CSS to make things easier. */
	float: right;
	margin-left: 10px;
	padding-right: 10px;
}
.imgLeft {/* is used as a template for all websites that have images in the content to deal with the image only */
	float: left;
	margin-right: 20px;
}
#contentContainer {
	margin-left:176px;
}
#index #footer {
	width: 800px;
	height: 70px;
	background-repeat:no-repeat;	
	background-image: url(../images/bottom-welcome.jpg);
	top: 696px;
	position: absolute;
	z-index:-1;
}
#history #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;	
	background-image: url(../images/bottom-history.jpg);
	top: 696px;
	position: absolute;
	z-index:-1;
}	
#services #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;	
	background-image: url(../images/bottom-services.jpg);
	top: 696px;
	position: absolute;
	z-index: -1;
}
#clients #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;	
	background-image: url(../images/bottom-clients.jpg);
	top: 696px;
	position: absolute;
	z-index:-1;
}
#clients2 #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;	
	background-image: url(../images/bottom-clients.jpg);
	top: 696px;
	position: absolute;
	z-index:-1;
}
#case-studies #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;	
	background-image: url(../images/bottom-clients.jpg);
	top: 696px;
	position: absolute;
	z-index:-1;
}
#testimonials #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;
	background-image: url(../images/bottom-clients.jpg);
	top: 696px;
	position: absolute;
	z-index:-1;
	}
	
#contact #footer{
	width: 1027px;
	height: 70px;
	background-repeat:no-repeat;		
	background-image: url(../images/bottom-contact-new.jpg);
	top: 696px;
	position: absolute;	
	z-index:-1;
}

#clientThumbnails{
	/*margin-top: 0px;*/
	text-align: center;
	font-style: italic;
}
#clients #content{
	width:420px;
	height:350px;
	float:left;
	margin-top:15px;
	vertical-align:top;
	padding-right:25px;
}
#clients2 #content{
	height:455px;
	margin-top:15px;
	vertical-align:top;
}
#case-studies #content{
	width:380px;
	height:350px;
	float:left;
	margin-top:15px;
	vertical-align:top;
	padding-right:40px;
}
/*#contact #content{
	width:100%;height:450px;
	margin-top:15px;
	vertical-align:top;
}*/
#history #content{
	height:450px;
	margin-top:15px;
	vertical-align:top;
}
#services #content{
	height:455px;
	margin-top:15px;
	vertical-align:top;
}
#index #content{
	height:450px;
	margin-top:15px;
	vertical-align:top;
}

/*</style>*/