/*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:12px;
	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:960px;
	text-align:left;
	padding:5px 5px 5px 5px;
	height: auto;
}

a{
	color:#A01F23;
}
a:hover {
	color:#A01F23;
	text-decoration:none;
	}
a img{
	border:none;
}
	
h1{
	padding:0px;
	margin:0;
	font-size:1.4em;
	color:#A01F23;
}
	
h2{
	padding:0px;
	margin-bottom:5px;
	font-size:1.2em;
}
	
h3{
	padding:0px;
	margin:0;
	margin-bottom:5px;
	font-size:1.0em;}
	
h4{
	padding:0px 0px 5px 0px;
	margin:0px;
	font-size:1.0em;
	color:#A01F23;
	font-weight:bold;
}
	
p{
	padding:0px 0px 0px 0px;
	font-size:1em;
	margin-top:5px;
	line-height:1.5;
	text-align:left;
}
	
img{
	border:1px solid #999999;
}
	
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-958.jpg);
	background-repeat:no-repeat;
	position:relative;
	width:958px;
	height:111px;
	border:1px solid #000000;
}

#headerLink{
 	position:absolute;
	top:5px;
	left:83px;
	width:82px;
	height:100px;
	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:5px 5px 5px 5px;
	width:948px;
	/*margin:0;/*use for white background*/
	margin:5px 0 5px 0;/*use for gray margins*/
	background:white;/*use for white background*/
	/*background: url(../images/bg.gif) repeat-y;/* use for gray margins*/
	border:1px solid #000000;/*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;
	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 #999999;
	background:#FFFFFF url(../images/linkBG.jpg) repeat-y;
	text-align:left;
}
	
#sideNav a{
	text-decoration:none;
	color:#333333;
	font-weight:bold;
}
	
#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 #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
	border-right:none !important;
	border-right:1px solid #999999;
	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;
	border:none;
	}		

#sideNav li.highlighted a{
	font-weight:bold;
	color:#A01F23;
}
	
#sideNav li.highlighted a:hover{
	color:#A01F23;}

.sideImages { 
	width:145px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:7px;
	padding-right:0px;
	text-align:center;
	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;
	width:758px !important;
	height: expression( this.scrollHeight < 416 ? "415px" : "auto" ); /* sets min-height for IE */
	min-height:450px;
	padding:10px 10px 10px 15px;
	border:1px solid #999999;/*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:0px 0px 0px 10px;
}
	
/*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:1.0em;
	margin:0;
	padding-left:35px;
	width:75%;
}
#mainContent ol{
	font-size:1.0em;
	line-height:1.5;
}

.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:762px;
	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:1em;}
	
#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:960px;
	margin:0 auto;
	padding:0px 0px 5px 5px;
	font-size:.8em;
	color:white;
	text-align:left;}
	
.copyright a{
	color:white;
	text-decoration:none;
}
	
.copyright a:hover{
	text-decoration:underline;
}

#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;}

/* START Home Page Layout Declarations */

#home_intro{
	width:248px;
	height:auto;
	float:left;
	clear:left;
	padding:0px 10px 0px 0px;
	background:transparent;
}

#home_intro h1{
	padding:5px 0px 10px 0px;
	font-size:1.1em;
	line-height:1.5em;
	color:black;
	font-weight:normal;
}
	
#home_intro img{
	float:left;
	margin:20px 0px 0px 23px;
	border:none;
}
	
#contact{
	padding:40px 0px 0px 0px;
	font-size:1.2em;
}

#contact img{
	border:none;
	float:left;
	margin-left:70px;
	margin-top:5px;
}
#contact h2{
	color:#A01F23;
}

#callus{
	color:#A01F23;
	font-size:1.2em;
	text-align:center;
	line-height:1.5em;
}

#content_main_home h1{
	padding: 0px 0px 10px 0px;
	line-height:1.5em;
}

#content_main_home h2{
	padding: 0px 0px 10px 0px;
	line-height:1.5em;
}

#home_col_1
{
	float: right;
	width: 500px;
	height: auto;
	min-height:420px;
	padding: 0px 0px 0px 0px;
	display: inline;
	background:transparent;
	border:0px solid #333333;
}

#homeTopLeft{
    float:left;
	clear:left;
    width:233px;
	height:210px;
	background:#DFDFDF url(../images/section-header-wrench.gif) no-repeat;
	padding: 5px 5px 5px 5px;
	margin: 0px 5px 5px 0px;
	border:1px solid #999999;
}

#homeTopRight{
    float:right;
	clear:right;
    width:233px;
	height:210px;
	background:#DFDFDF url(../images/section-header-search.gif) no-repeat;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 5px 5px;
	border:1px solid #999999;
	text-align:center;
}

#homeTopRight img{
	float:none;
	margin:42px 0px 0px 0px;
	border:1px solid #999999;
}
	
#homeTopRight p{
	padding:0px 0px 0px 0px;
	font-size:1em;
	line-height:1.2;
	text-align:center;
}
	
#homeBottom{
    float:left;
	clear:left;
    width:488px;
	height:210px;
	background:#DFDFDF url(../images/section-header-recycle.gif) no-repeat;
	padding: 5px 5px 5px 5px;
	margin: 5px 0px 0px 0px;
	border:1px solid #999999;
}

#homeBottom p{
	padding:50px 0px 0px 0px;
	font-size:1em;
	line-height:1.5;
	text-align:left;
}
	
#homeBottom img{
	float:none;
	margin:10px 0px 0px 8px;
	border:none;
}
	
/* END Home Page Layout Declarations */

.green-video {
	float:right;
	margin:10px 0px 10px 10px;
	border:1px solid #999999;
}
