html, body{ 
 margin:0; 
 padding:0; 
 text-align:center;
 background:url(../imgs/body-html-bg.gif) repeat-x; 
 font: normal 13px/22px  Arial, Helvetica, sans-serif;
	color:#2A2D34;
} 
 


/*** LINK STYLES ****/
a
{
	outline:none;
	color:#A20000;
}


a:visited
{
	color:#777;
}

a:hover
{
	color:#898A86;
}


a img
{
	border:0;
}

/***HEADLINES *****/

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Verdana, sans-serif;
	font-weight: bold;
	line-height: 1em;
	padding:10px 0;
}


#content h2 {
	font-size: 35px;
	padding: 17px 0 17px 0;
	color:#A20000;

}

#content h3 {
	font-size: 25px;
	padding:17px 0 17px 0;
	color:#333;
	margin:0 0 -20px 0;

}

h4, h5, h6 {
	padding:10px 0 10px 3px;
	line-height:140%;

}

h4 {
	font-size: 16px;
}

h1.headerstyle { /**** THIS H I D E S The Headline that we want the search engines to see ****/
width:1px;
height:1px;
overflow:hidden;
display:block;
padding:0;
float:left;
}

/**** GENERAL HTML RESTYLES ****/

* {
padding:0; /* removing all default padding from styles	*/
margin:0;
} 

ul, ol {position:relative;}	/* For disappearing bullets in IE 6.0	*/

p
{
	padding:10px 0 10px 3px;
	 font: normal 13px/22px  Arial, Helvetica, sans-serif;


}

ul, ol
{
	margin: 10px 40px 20px 80px;
	padding: 0 5px;
	clear:both; /* this is so that the lists don't wrap around images */
}


ul ul, ul ol,  ol ol
{
	margin: 10px 40px 5px 30px;
	padding: 0 5px;	
}

#content ul li, #content ol ul li 
{
	margin: 0;
	list-style-type:none;
	padding: 0 20px 2px 15px;
	background:url(../imgs/bullet.gif) 0% 5px no-repeat;
}

form, input, textarea
{
	font-family:Arial, Helvetica, sans-serif;
}


/* IMAGES */

img.f-right
{
	float:right;
	margin:10px 30px 10px 15px;
}

img.f-left
{
	float:left;
	margin:10px 15px 10px 30px;

}

p img.f-right
{
	float:right;
	margin:5px 0 10px 15px;
}

p img.f-left
{
	float:left;
	margin:5px 15px 10px 0;

}

img.f-left, img.f-right {
border:1px solid #ddd;
padding:4px;
background:#fff;
}

img.noborder {
border:0px;
padding:0;
}

img.img-no-float {
border:1px solid #ddd;
padding:4px;
margin:10px auto;
}

/* Photos with captions, you have to know the size and it has to be OUTSIDE a paragraph tag */

div.r-photocaption  /* float right photo with caption */
{
	float:right;
	padding:0 0 20px 0;
}


div.l-photocaption  /* float right photo with caption */
{
	float:left;
	padding:0px 0 20px 0;
	
}

div.twofifty-oneeightseven  /* photo with caption */
{
	width:273px; /* added 4 pix per side to accomodate border padding */
	height:230px;  /* added 28 px to accomodate caption and padding, width height + extra for caption */	

}

div.l-photocaption img
{
border:1px solid #ddd;
padding:4px;
clear:both;	
margin:10px 15px 0 0;


}

div.r-photocaption img 
{
border:1px solid #ddd;
padding:4px;
clear:both;	
margin:10px 0 0 15px;


}


div.l-photocaption p {
padding:5px 19px 0;
	font-size:11px;

}

div.r-photocaption p 
{
padding:0 0 0 19px;
	font-size:11px;

}


 /******************* LOGO *********************/ 

#logo
{
	background:url(../imgs/ralph-perez-logo.gif) no-repeat;
	position:relative;
	width:264px;
	height:164px;
	display:inline;
	overflow:hidden;
	padding:0;
}

body.home #logowrap
{
	position:absolute;
	top:0;
	left:0px;
	width:264px;
	height:164px;
	z-index:10000;
}

#logo a
{
	float:left;
	overflow:hidden;
	padding:164px 0 0;
	width:264px;
	height:0 !important;
	background:url(../imgs/ralph-perez-logo.gif) no-repeat;
	color:#fff;
}

#logowrap
{
	position:relative;
	width:264px;
	height:164px;
}

 /******************* LAYOUT *********************/ 

body.home #pagewrapper{ 
background:#fff url(../imgs/home-content-bg-repeat.jpg) repeat-x;

} 

#pagewrapper{ 
 width:990px; 
 text-align:left;  
margin:0 auto;
border:1px solid #cbc9c9;
border-top:0px;
background-image:none;
background-color:#fff;

} 

body.home #bodywrapper {
width:100%;
height:473px;
position:relative;
background:url(../imgs/body-repair-mercedes.jpg) 264px 25px no-repeat;
}

#bodywrapper {
position:relative;
background:url(../imgs/subpagebg.jpg) 100% 100% no-repeat;
}

body.testimonials #bodywrapper {
}
 
body.home #leftcol, #leftcol{ 
 width:264px; 
 float:left; 
 position:relative; 
 }
 
#content{  
 float: right; 
 display:block; 
 padding:15px 30px 30px 0;
 position: relative; 
 width:620px; 
 }
 
body.portfolio #content, body.contact #content, body.testimonials #content {
 padding:15px 30px 30px 0;
  width:670px; 

}
 
#content { /** SUB CONTENT ONLY ***/ 
padding:25px 115px 80px 0;
width:565px; 

}
 
body.home #content {  /** HOME CONTENT ONLY ***/ 

	position:absolute;
	top:410px;
	left:0px;
	height:50px;
	width:100%;
	padding:0;
	text-align:center;
}

 /******************* HOME BLENDING FADING *********************/ 


body.home #blendme {
	position:relative;
	text-align:center;
	width:942px;
	height:50px;
	margin:0 auto;
	overflow:hidden;
}
 
body.home #blendme h1, body.home #blendme p {
display:block;float:left;width:1px;height:1px;overflow:hidden;
} 
.blend img {
opacity: 0;
-moz-opacity: 0;
-khtml-opacity:0;
filter: alpha(opacity=0);
}

 /******************* FOOTERS *********************/ 

 
#footer{
 clear:both;
 height:1%;
 position:relative;
 } 
 
#creditfooter
{width:990px;text-align:right;margin:0 auto;clear:both;}

#creditfooter p {
font-size:10px;padding:5px 0 0 0;
color:#777;
}

#creditfooter a {
text-decoration:none;
color:#777;
}

#creditfooter a:hover {
background:#ddd;
color:#333;
}

 /******************* MISC DESIGN STYLES *********************/ 

 
body.home img.homephone {
	position:absolute;
	top:73px;
	right:16px;
	z-index:10000;
 }
 
 body.home img.phone {
	position:absolute;
	top:73px;
	right:16px;
	z-index:10000;
 }
 
img.phone {
	position:relative;
	margin:0 0 20px 30px;
 }
 
 img.viewourport {
 margin:0 0 0 30px;
 }
 
 
 /******************* NAVIGATION *********************/ 

 
 a#homebt, a#portfoliobt, a#aboutusbt, a#faqbt, a#servicesbt, a#testimonialsbt, a#contactbt {
 height:30px;
 background-repeat:no-repeat;
 background-position: 0 0;
 text-indent:-3000px;
 padding:0 15px 0 0;
 margin:0;
 display:block;
 }
 
 a#homebt {
 width:40px;
 background-image:url(../imgs/s-homebt.gif);
 }
 
  
a#homebt:hover, a#portfoliobt:hover, a#aboutusbt:hover, a#faqbt:hover, a#servicesbt:hover, a#testimonialsbt:hover, a#contactbt:hover {
 background-position: 0 -30px;
 
 }

 
/****** BODY CLASSES *****/ 



body.home a#homebt, body.portfolio a#portfoliobt, body.aboutus a#aboutusbt, body.faq a#faqbt, body.services a#servicesbt, body.testimonials a#testimonialsbt, body.contact a#contactbt {
 background-position: 0 -30px;
 
 }
 
body.meetralph a.meetralph, body.theteam a.theteam, body.facilities a.facilities, body.qualifications a.qualifications, 
body.autopaint a.autopaint, body.collision a.collision, body.headlight-restore a.headlight-restore,
body.cosmetic a.cosmetic, body.wheel a.wheel {
color: #A20000;
background: #f8f8f8;
}



 /****** LEFT NAVIGATION *****/ 

a#aboutusbt {
width:66px;
 background-image:url(../imgs/s-aboutus-bt.gif);
}

 a#portfoliobt {
 width:60px;
 background-image:url(../imgs/s-portfolio-bt.gif);
 }
 
 a#faqbt {
width:32px;
 background-image:url(../imgs/s-faq-bt.gif);
}
 
  a#servicesbt {
width:60px;
 background-image:url(../imgs/s-service-bt.gif);
}
 

a#testimonialsbt {
width:84px;
 background-image:url(../imgs/s-testimonials-bt.gif);
}

a#contactbt {
width:77px;
background-image:url(../imgs/s-contact-us-bt.gif);
}

 /****** HOME BOTTOM NAVIGATION *****/ 

 
body.home a#homebt {
 width:40px;
 background-image:url(../imgs/h-homebt.gif);
 }
 
  
body.home a#aboutusbt {
width:66px;
 background-image:url(../imgs/h-aboutus-bt.gif);
}

body.home a#portfoliobt {
 width:60px;
 background-image:url(../imgs/h-portfolio-bt.gif);
 }
 
body.home a#faqbt {
width:32px;
 background-image:url(../imgs/h-faq-bt.gif);
}
 
body.home a#servicesbt {
width:60px;
 background-image:url(../imgs/h-service-bt.gif);
}
 

body.home a#testimonialsbt {
width:84px;
 background-image:url(../imgs/h-testimonials-bt.gif);
}

body.home a#contactbt {
width:77px;
background-image:url(../imgs/h-contact-us-bt.gif);
}

body.home a#homebt {
 background-position: 0 -30px;

}

/**********SUB PAGE MENU ***********/

.subpagemenu{
width: 190px;
margin:30px 0 30px 33px;
position:relative;
clear:both;
}


.subpagemenu .headerbar{
font: bold 13px Verdana;
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding:0!important;
}


.subpagemenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.subpagemenu ul{
list-style-type: none;
margin: 0;
position:relative!important;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.subpagemenu ul li{
padding-bottom: 0px; /*bottom spacing between menu items*/
border-bottom:1px solid #fff;

}

.subpagemenu ul li a{
font: normal 12px Arial;
color: #2A2D34;
display:block;
padding: 2px 0 2px 8px;
line-height: 15px;
text-decoration: none;
border-bottom:1px solid #fff;
}


.subpagemenu ul li a:hover{ /*hover state CSS*/
color: #A20000;
background: #f8f8f8;
}
 
 
/************* Global Forms ****************/


div.form{
	width:650px;
	margin:20px 0;
}

p.required {
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	padding:0;
}

span.required {
	color:#A20000;
}

div.form-row {
  clear: both;
  padding-top: 10px;
  }



div.form-row span.formw {
  float: right;
  width: 435px;
  text-align: left;
  } 


div.form input.text, div.form .textarea
{
	width:543px;
}

div.form div.form-row span.formw {
  display:block;
  float:none;
  text-align: left;
  clear:both;
  }


div.form div.form-row span.label {
  display:block;
  float:none;
  text-align: left;
  clear:both;
  font-weight:700;
  }
  
  
/* textinput */
input.text, .textarea
{
	font-weight:400;
	border:1px solid #ddd;
	border-bottom-width:2px;
	border-right-width:2px;
	color:#333;
	background:#fff url(../imgs/formbg.gif) !important;
	padding:4px 3px;
}

input.text:hover, .textarea:hover
{
	border:1px solid #ccc;
	border-top-width:2px;
	border-left-width:2px;
}

input.button
{
	background:#A20000;
	color:#fff;
	font-weight:700;
	font-size:14px;
	padding:5px 7px;
	border:0px;

}

a.button
{
	background:#A20000;
	color:#fff!important; /* IE 6 has issues */
	font-weight:700;
	text-decoration:none;
	font-size:14px;
	margin:15px 0 0;
	font-family:Arial, Helvetica, sans-serif;
	padding:9px 8px;
}

input:hover
{
	background:#677080;
}

a.button:hover
{
	background:#677080;
	color:#fff!important;  /* IE 6 has issues */
}

 
 /* Testimonials / Blockquotes */
 
#content blockquote.introstatement {
	font-size:16px;
		font-family:Georgia, "Times New Roman", Times, serif;
		margin: 10px 30px;
		border-left:3px solid #677080;
		padding-left:12px;
		clear:both;
		color:#677080;
} 
 
body.qualifications #content blockquote.introstatement {
display:block;
}

 
#bodywrapper #content div.blockquotewrap blockquote
{
	background:transparent url(../imgs/quote-left.gif) 0 0 no-repeat;
	margin:20px 0;
}

#content div.blockquotewrap blockquote div p
{
	font-size:14px;
		font-family:Georgia, "Times New Roman", Times, serif;

}

#content blockquote div
{
	text-align:left;
	font-size:14px;
	background:transparent url(../imgs/quote-right.gif) 100% 0 no-repeat;
	padding:0 40px 0 48px;
	border-bottom:1px solid #ccc;
}

#content .blockquotewrap
{
	position:relative;
	margin:20px 40px 20px 30px;
}

#content .blockquotewrap p {
	padding:0 0 15px 0;
	margin:0;
}

 #content div.blockquotewrap blockquote div p.attrib
{
	font-size:11px;
	font-style:italic;
	text-align:right;
	padding:0 0 15px 0;
	font-family:arial, helvetica, sans-serif;
}

 
 
 /* FAQ */
 
 #content p.q {
 padding:10px 0 0 0;
font-size:15px;
 }

 #content p.a {
 padding:10px 0 0 30px;
font-size:12px;
 }
 
 #content p.q strong {
color:#A20000;
font-size:18px;
 }
 
  #content p.a em {
font-size:16px;
border:1px solid #ddd;
background:#f8f8f8;
padding:0 3px;
font-style:normal;
font-weight:700;
 }
 
 #content div.tripartanswer p.q {
 padding-bottom:0px;
 }
 
  #content div.tripartanswer ol {
 margin-top:10px;
  margin-bottom:10px;

 }
 
 #content div.tripartanswer ol li {
 border:1px solid #ddd;
 background:#f8f8f8;
 margin:0 0 5px 0;
 height:1%; /*IE AND ITS STUPID BUG FIX */
 }
 
 /* *** Float containers fix: *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#content{width:100%; float:none;}
}