@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: 45px;

}

#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: 845px;

	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;

}





#contact-main{

	margin-left: 50px;

}



#construction {

	float: left;

}



	#construction ul li{

	list-style-type: none;

	position: relative;

	right: 38px;

	}



#service-department {

	float: left;

}



	#service-department ul li{

	list-style-type: none;

	position: relative;

	right: 38px;

	}











#thermostat{

	float: right;

	position:relative;

	bottom:63px;

	right:20px;

}



#email-browser{

	float: left;

}



#jobs ul li{

	list-style-type: none;

	position: relative;

	right: 38px;

}

/*</style>*/