/*
Title: Epic Valet Global Styling
Copyright: (c) 2008
Author: Phil Renaud
Description: Global and General Styling and Aesthetics for epicvalet.com
*/

/*----------------------------------------------------------
=Reset
Corrects cross-browser styling disparities. Heavily based
upon the Yahoo! UI Library CSS Reset:
http://developer.yahoo.com/yui/reset/
--------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
   margin:0;
   padding:0;
   }
table {
   border-collapse:collapse;
   border-spacing:0;
   }
fieldset,img { 
   border:0;
   }
address,caption,cite,code,dfn,em,strong,th,var {
   font-style:normal;
   font-weight:normal;
   }
ol,ul {
   list-style:none;
   }
caption,th {
   text-align:left;
   }
h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
   }
q:before, blockquote span:before {
   content:'“';
   font-size: 120%;
   font-family: Georgia;
   font-style: italic;
   font-weight: bold;
   }

q:after, blockquote span:after {
   content:'”';
   font-size: 120%;
   font-weight: bold;
   font-family: Georgia;
   font-style: italic;
   }

blockquote cite:before {
content: '- ';
color: #000;
}

abbr,acronym { border:0;}

html { font-size:100.01%; }   /* the font-size: 100.01% corrects disparities in default font size for Internet Explorer and font resizing in Safari */

strong { font-weight: bold; }


/*----------------------------------------------------------
=Universals
Basic elemental aesthetic definitions.
--------------------------------------------------------- */

body {
   background: #012 url(../images/bg.png) top left repeat-x;
   font-family: Helvetica, Arial, sans-serif;
   }

a {
   color: #0f83ab;
   text-decoration: none;
   }

a:hover {
color: #000;
}

h1 {
text-indent: -9999px;
background: transparent url(../images/logo.png) top left no-repeat;
height: 130px;
width: 240px;
float: left;
margin-left: 65px;
margin-top: 28px;
position: relative;
z-index: 3000;
display: inline;
}

h2 {
font-family: Futura, Helvetica, Arial, sans-serif;
text-transform: uppercase;
margin-bottom: 5px;
height: 35px;
}

h2 a {
text-decoration: none;
position: relative;
top: 5px;
}

h3 {
text-indent: -9999px;
background: transparent url(../images/tagline.png) top left no-repeat;
height: 50px;
width: 800px;
margin: auto;
position: relative;
top: 100px;
}

h4 {
margin-top: 60px;
margin-bottom: 10px;
font-family: Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 130%;
color: #000;
clear: both;
float: left;
width: 100%;
}

/* ---------------------------------------------------
=Titles
H2 elements and their image replacements.
--------------------------------------------------- */

h2 {
background-color: transparent;
background-position: top left;
background-repeat: no-repeat;
height: 40px;
margin: 10px 0px;
width: 100%;
text-indent: -9999px;
}

div.seul h2 {
margin: 10px 250px;
}

h2.epicvaletservice { background-image: url(../images/h2epicvaletservice.png); }
h2.epicsedanservice { background-image: url(../images/h2epicsedanservice.png); }
h2.ourvaletservices { background-image: url(../images/h2ourvaletservices.png); }
h2.prices { background-image: url(../images/h2prices.png); }
h2.testimonials { background-image: url(../images/h2testimonials.png); }
h2.requestaquote { background-image: url(../images/h2requestaquote.png); }
h2.apply { background-image: url(../images/h2apply.png); }
h2.contactus { background-image: url(../images/h2contactus.png); }
h2.idle { background-image: url(../images/h2idle.png); height: 140px; margin: 0px !important; background-position: top center; }

/* ---------------------------------------------------
=Clearfix
Clears floats within a container.
--------------------------------------------------- */

.clearfix:after {
   content: ".";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
   }

/*----------------------------------------------------------
=Containers
Surrounding and containing named elemental aesthetic,
layout, and structure.
--------------------------------------------------------- */

#worldcontainer {
margin: auto;
width: 1000px;
}

#content {
background: #fff url(../images/containerbottom.png) bottom left no-repeat;
margin-top: 105px;
color: #333;
font-size: 90%;
line-height: 140%;
float: left;
padding-bottom: 125px;
}

#upper {
position: absolute;
top: 0px;
width: 1000px;
z-index: 10000;
left: 50%;
margin-left: -500px;
}

#contentupper {
background: transparent url(../images/photo2.png) top left no-repeat;
height: 323px;
position: relative;
top: -14px;
margin-bottom: -130px;
}

#prices #contentupper {
	background-image: url(../images/photo3.png);
	}
#services #contentupper {
	background-image: url(../images/photo4.png);
	}
#references #contentupper {
	background-image: url(../images/photo5.png);
	}
#apply #contentupper {
	background-image: url(../images/photo6.png);
	}
#requestaquote #contentupper {
	background-image: url(../images/photo1.png);
	}

#footer {
background: transparent url(../images/worldfooter.png) top left no-repeat;
padding-top: 22px;
margin: auto;
width: 1000px;
float: left;
clear: both;
position: relative;
height: 100px;
}

/*----------------------------------------------------------
=Menu

--------------------------------------------------------- */

ul#nav {
float: left;
position: relative;
top: 55px;
left: -40px;
}

ul#nav li {
height: 36px;
float: left;
}

ul#nav li a {
display: block;
height: 36px;
text-indent: -9999px;
}

ul#nav li.un a { width: 110px;  background: transparent url(../images/menuhome.png) top left no-repeat; }
ul#nav li.deux a {  width: 86px;   background: transparent url(../images/menuservices.png) top left no-repeat;   }
ul#nav li.trois a { width: 152px;  background: transparent url(../images/menurequest.png) top left no-repeat; }
ul#nav li.quatre a {   width: 70px;   background: transparent url(../images/menuprices.png) top left no-repeat;  }
ul#nav li.cinq a {  width: 65px;   background: transparent url(../images/menuapply.png) top left no-repeat;   }
ul#nav li.six a {   width: 98px;   background: transparent url(../images/menureference.png) top left no-repeat;  }
ul#nav li.sept a {  width: 87px;   background: transparent url(../images/menucontact.png) top left no-repeat; }

ul#nav li.un a:hover, body#home li.un a {background-image: url(../images/menuhomehover.png);}
ul#nav li.deux a:hover, body#services li.deux a {background-image: url(../images/menuserviceshover.png);}
ul#nav li.trois a:hover, body#requestaquote li.trois a {background-image: url(../images/menurequesthover.png);}
ul#nav li.quatre a:hover, body#prices li.quatre a {background-image: url(../images/menupriceshover.png);}
ul#nav li.cinq a:hover, body#apply li.cinq a {background-image: url(../images/menuapplyhover.png);}
ul#nav li.six a:hover, body#references li.six a {background-image: url(../images/menureferencehover.png);}
ul#nav li.sept a:hover, body#contact li.sept a {background-image: url(../images/menucontacthover.png);}

body div#footer li.un a, body div#footer li.deux a { background-image: none !important; }


/*----------------------------------------------------------
=Content

--------------------------------------------------------- */

div#content div.un, 
div#content div.deux,
div#content div.seul {
background: transparent url(../images/contentbg.png) top left repeat-x;
float: left;
width: 430px;
margin: 0px 20px;
padding: 0px 15px;
position: relative;
z-index: 200;
overflow: hidden;
display: inline;
}

div#content div.seul {
width: 930px;
}

div#content div ul {
clear: both;
float: left;
width: 100%;
}

div#content div ul li {
float: left;
margin-right: 10px;
width: 133px;
margin-bottom: 5px;
}

body#home div ul#columns li {
width: 440px;
}

body#home div ul#columns.deux li.firstcolumn {
	width: 580px !important;
	}

body#home div ul#columns.deux li.secondcolumn {
	width: 300px !important;
	}

body#home div ul#columns li ul li {
width: 182px !important;
}

div#content div ul.contactlist {
width: 930px;
margin-bottom: 50px;
}

div#content div ul.contactlist li {
width: 300px;
}

div#content div blockquote {
margin-bottom: 25px;
}

div#content div blockquote span {
font-style: italic;
}

div#content div blockquote cite {
display: block;
color: #000;
font-weight: bold;
}

div#content div p {
margin: 10px 0px;
}


div#content div.seul ul#columns.deux li {
width: 440px;
}

div#content div.seul ul#columns.deux li.firstcolumn { margin-right: 10px; }
div#content div.seul ul#columns.deux li.secondcolumn { margin-left: 10px; }

div#content div.seul ul#columns.trois li {
width: 300px;
}

div#content div.seul ul#columns.trois li.firstcolumn { margin-right: 10px; }
div#content div.seul ul#columns.trois li.secondcolumn { margin-left: 5px; margin-right: 5px; }
div#content div.seul ul#columns.trois li.thirdcolumn { margin-left: 10px; margin-right: 0px; }


/*----------------------------------------------------------
=Prices

--------------------------------------------------------- */

table.pricestable {
   width: 100%;
   margin-bottom: 20px;
   }

table.pricestable th {
   padding: 7px;
   border-bottom: 4px solid #333;
   font-weight: bold;
   font-size: 120%;
   color: #000;
   }

table.pricestable td {
   padding: 7px;
   border-bottom: 1px solid #ccc;
   border-right: 1px dotted #ccc;
   font-size: 120%;
   color: #000;
   }


/*----------------------------------------------------------
=Form

--------------------------------------------------------- */

form label {
clear: both;
display: block;
}

form ul li {
width: 300px !important;
margin-right: 10px;
margin-bottom: 15px !important;
}

form ul li.location {
float: left;
}

form ul li.location ul li {
width: 100px !important;
margin: 0px !important;
}

form ul li.location ul li input, form ul li.abletoattend ul li input {
width: 20px !important;
margin: 0px !important;
}

form ul li.location ul li label {
display: inline !important;
float: left !important;
}

form ul li.closer {
clear: both;
margin-top: 20px;
width: 910px !important;
}

form ul li.closer input {
width: 100px;
float: right;
margin: 0px 0px 0px 20px;
}

form ul li.fourslot {
width: 220px !important;
}

form ul li.fourslot input {
width: 200px;
}

form ul li input {
width: 280px;
}

form ul li.abletoattend {
width: 930px !important;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}

form ul li.abletoattend h4 {
margin-bottom: 0px;
}

form.apply ul li.location {
width: 930px !important;
border-bottom: 1px solid #ccc;
}

form.requestaquote li.location {
clear: both;
width: 620px !important;
margin: 20px auto !important;
}

form.requestaquote li.closer {
width: 600px !important;
}

form ul li.hoursslot {
width: 930px !important;
}

form ul li.hoursslot table {
width: 930px !important;
}

form ul li.hoursslot table tr th, form ul li.hoursslot table tr td {
padding-bottom: 20px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 10px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

form ul li.hoursslot table tr td input {
width: auto !important;
}

form ul li.abletoattend textarea {
width: 930px;
height: 200px;
}

ul.stufftobring {
list-style-type: disc;
width: 400px !important;
}

ul.stufftobring li {
margin: 0px !important;
width: 400px !important;
margin-bottom: 15px !important;
}


form.contact ul li textarea {
width: 300px;
height: 200px;
}


form.requestaquote ul {
width: 620px !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}

body#requestaquote h4 {
margin-left: 153px !important;
}

/*----------------------------------------------------------
=Footer

--------------------------------------------------------- */

#footer {
color: #fff;
font-size: 85%;
clear: both;
}

#footer a:hover {
color: #00ccff
}

#footer ul {
float: left;
width: 100%;
padding-bottom: 50px;
line-height: 50px;
background: transparent url(../images/footerbg.png) 80% 0% no-repeat;
}

#footer ul li {
float: left;
margin: 0px 20px;
}

#footer ul li.deux {
float: right;
}