/*Intercity Auto Wrecking*/

/*The following was needed to prevent shifting to the left if the content of the page 
was longer than about 600 px*/

html, body { min-height:101%; margin-bottom:1px; }


/*NOTE:For IE 5 (& 6?), it won't accept the horizontal centering method below w/out
the "text-align:center" attribute.  (This is actually a shortcoming of the browser.
See bluerobot.com/web/css/center1.html for an example.)
*/

	
body{
	text-align:center;
	font-size:1em;
	font-family:arial,verdana,helvetica;
	z-index:1;
	background-color:#000000;
	background-image:url(../images/Gradient.jpg);
	background-repeat:repeat-x;
	margin-top:0px;
	margin-bottom:0px;

}

#wrapper{
	z-index:2;
	margin-left:auto;
	margin-right:auto;
	width:760px;
	text-align:left;
	padding:10px 10px 0px 10px;
	height: auto;

}

a{
	color:#A01F23;
}
a:hover {
	color:#A01F23;
	text-decoration:none;
	}
a img{
	border:none;
}
	
h1{
	padding:0px;
	margin:0;
	font-size:1.8em;
	color:#A01F23;
	padding-left:10px;}
	
#intro h1{
	padding-left:5px;
	font-size:0.8em;
	color:black;
	font-weight:bolder;}


	
h2{
	padding:0px;
	margin-left:5px;
	margin-bottom:5px;
	font-size:1.3em;
	padding-left:10px;}
	
h3{
	padding:0px;
	margin:0;
	margin-left:10px;
	margin-bottom:5px;
	font-size:.8em;}
	
p{
	padding:0px 0px 0px 15px;
	font-size:.8em;
	margin-top:5px;
	margin-right:5px;
	line-height:1.5;
	text-align:left;}
	
table td{
	padding:0px 0px 0px 15px;
	font-size:1em;
	margin-top:0px;
	margin-right:0px;
	line-height:1.5;
	text-align:left;
	color:#A01F23;
	}


/*NOTE: I had to set a 1px border set to the color of the background because for some reason,
Firefox has a hard time interpreting the header height without it.
*/

#header {
	background-image:url(../images/ICHeading.jpg);
	background-repeat:no-repeat;
	position:relative;
	width:760px;
	height:92px;
}



#headerLink{
 	position:absolute;
	top:5px;
	left:67px;
	width:64px;
	height:78px;
	z-index:7;
}
#headerLink a{width:100%;height:100%;display:block;}	



/*NOTE:Firefox will not render the bottom border of the twoCols div if you don't do one of the
following: a)set the height of the div, (making it static), or b) setting overflow:auto .  
*/

#twoCols{
	z-index:3;
	overflow: hidden;
	position:relative;
	padding:0;
	padding-bottom:0px;
	width:100%;
	/*margin:0;/*use for white background*/
	margin:10px 0 10px 0;/*use for gray margins*/
	/*background:white;/*use for white background*/
	/*background: url(../images/bg.gif) repeat-y;/* use for gray margins*/
	/*border-left:1px solid #999999;/*use for white background*/
}
	

#sideNav{
	z-index:4;
	position:relative;
	float:left;
	width:162px;
	padding-bottom:0px;
	/*border-top:1px solid #999999;/*use for gray margins*/
}

#bottomBorder{
	position: absolute;
	bottom: -3px !important; 
	left: 0;
	/*display:none;/*use for white background*/
}

	
#sideNav ul{
	margin:0;
	padding:0;
	font-size:.8em;
	line-height:1.5;
	margin:0px 5px 5px 0px !important;
	margin:0px 0px 5px 0px;
	float:left;

}


	
#sideNav li{
	width:145px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:7px;
	padding-right:0px;
	margin-bottom:6px;
	list-style-type:none;
	border:1px solid #000000;
	background:#FFFFFF url(../images/linkBG.jpg) repeat-y;
	text-align:left;
}
	
#sideNav a{
	text-decoration:none;
	color:#333333;
}
	
#sideNav li a:hover{
	color:#A01F23;}


/*NOTE: In order for the dynamic className change to work in JavaScript, the link must be pointed to very 
specifically, as it is below.
*/
#sideNav li.highlighted{
	z-index:5;
	width:148px !important;
	width:146px;
	padding-right:8px !important;
	padding-right:0px;
	padding-left:7px;
	margin-bottom:6px;
	list-style-type:none;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	border-right:none !important;
	border-right:1px solid #000000;
	background:url(../images/linkBG.jpg) repeat-y; !important;
	background:#FFFFFF url(../images/linkBGSelectedIE6.jpg) no-repeat;

	}

#sideNav table{
	float:left;
	margin:0px;
	margin-top:-8px;
	margin-bottom:-5px;
	padding:0px;

	}
#sideNav td{
	margin:0px;
	padding:0px;
}
#sideNav img{
	margin:0px;
	margin-top:10px;
	}		


#sideNav li.highlighted a{
	font-weight:bold;
}
	
#sideNav li.highlighted a:hover{
	color:#A01F23;}

/* '!important' is used by all browsers as the default css property except for IE6.  It is used to work
around formating issues that IE6 has.  IE6 does not reckognize !important, so it proceeds to the property
below it, while all other browsers use !important.*/

#mainContent{
	z-index:4;
	float:right;
	margin:0;
	background-color:white;
	width:77% !important;
	height: expression( this.scrollHeight < 416 ? "415px" : "auto" ); /* sets min-height for IE */
	min-height:500px;
	padding:5px 5px 5px 5px;
	border:1px solid #000000;/*use for gray margins*/
	/*border-left:1px solid #999999;/*use for white background*/
	/*border-right:1px solid #999999;/*use for white background*/

}

/*#mainContent img{
	float:right;
	margin-right:-2px;
	margin-left:0px;

}*/
	
	
/*NOTE: Because of differences in IE and Firefox, first set the margin to 0, and
then position the ul using padding.  (For example, as below, "padding-left:45px".)
*/
#mainContent ul{
	font-size:.8em;
	margin:0;
	padding-left:35px;
	width:75%;
}
#mainContent ol{
	font-size:.8em;
	line-height:1.5;
}

#intro{
	width:310px;
	float:left;
	clear:left;
	margin-right:0px;
}

#contact{
	margin-top:20px;
}
#contact img{
	border:none;
	float:left;
	margin-left:70px;
	margin-top:5px;
}
#contact h2{
	color:#A01F23;
}

#topRightSectionHeader{
	padding:0px;
	margin:0px;
}
#bottomRightSectionHeader{
	padding:0px;
	margin:0px;
}
#topRightSectionHeader img{
	margin:0px;
	border:none;
	}
#bottomRightSectionHeader img{
	margin:0px;
		border:none;
	}


#bottomRightSection, #topRightSection{
	
	float:right;
	background-color:#F5F5F5;
	width:260px;
	height:215px;
	padding-bottom:10px;
	position:relative;
	margin-right:-1px;
	margin-top:-3px;
	

	}
	
#bottomRightSection p, #topRightSection p{
	margin:0px;
	text-align:center;	
}	
#bottomRightSectionContent img{
	float:left;
	margin:4px 0px 5px 23px;
	border:none;
}
#topRightSectionContent img{
	float:left;
	margin:4px 0px 5px 24px;
}
#topRightSectionContent, #bottomRightSectionContent{
	position:absolute;
	top:60px;
	left:15px;
	width:240px;

	}
#topRightSectionContent p, #bottomRightSectionContent p{


}
#bottomRightSection{

	background-image:url(../images/RecycleAuto.jpg);
	margin-bottom:-5px;
	margin-top:-5px;
}

#topRightSection{
	background-image:url(../images/SearchInventory.jpg);
}
.button{
	margin:0px 25px 0px 75px;
}

#logos{
	margin-left:50px;
	clear:right;
	}
#logos img{
	float:left;
	margin-right:50px;
	border:none;
}
#creditCards img{
	margin-top:15px;
	}

#callToday{
	text-align:center;
}

#partners img{
	float:left;
	clear:right;
}

#contact iframe{
	width:425px;
	height:350px;
	margin-left:20px; 

}
#partners img{
	padding-top:5px;
	}


#inventory iframe{
	width:572px;
	height:400px;
	border:0;
}
.emailLink a{
	color:#000000;}
	
.emailLink a:hover{
	text-decoration:none;}
		
#footer{
	background-color:white;
	clear:both;
	color:black;
	text-align:center;
	border: 1px solid #000000;
	}
	
#ulFooter{
	margin:0;
	padding:0;
	padding-bottom:10px;
	padding-top:10px;
	font-size:.75em;}
	
#ulFooter li{
	display:inline;}
	
#ulFooter a{
	color:black;}
	
#ulFooter a:hover{
	text-decoration:none;
	color:#A01F23;}

.paddingDiv {
	height:150px;}

/*NOTE:Because the element with the "copyright" class is outside of the main "wrapper", it must
be styled as such.  (For example, the margin must be set as the wrapper is to center it.)  
*/
.copyright {
	width:760px;
	margin:0 auto;
	padding:5px;
	font-size:.65em;
	color:white;
	text-align:left;}
	
.copyright a{
	color:white;
	font-weight:bold;}
	
.copyright a:hover{
	text-decoration:none;}

#bottomWrapper{
	height:10px;
	padding:none;
	margin:none;
}

#topLinks{
position:absolute;
	float:right;
	width:auto;
	right: 5px;
	top: 5px;
	font-size:.65em;
	color:#1B3359;
	text-align:right;}
#topLinks a{
	color:#000000;
	font-weight:bold;}
	
#topLinks a:hover{
	text-decoration:none;}

#callus{
	margin-left:15px;
	color:#A01F23;
	}
#bottomRow{
	margin-top:5px;
	margin-left:65px;
	}