body{background-color: #ccc; margin:auto; background-image:url(../images/autoart/bg.jpg); background-position:top; background-repeat:repeat-x; }
*{ font-family:Verdana, Arial, Helvetica, sans-serif; outline:none}
.left{ float:left;}
.right{ float:right}
.clearboth{ clear:both}
#mainContainer{ width:978px; margin:0 auto;}
#topmenu{padding:18px 0 0 270px;}
#topmenu a{ color:#000000; font-size:11px; text-decoration:none; float:left; margin:5px 3px 0 3px ; padding:0px 5px 0 0px; border:1px solid #8b8b8b; border-width:0 1px 0 0}

h1{background-image:url(../images/autoart/h1_bg.gif); background-position:center; padding:6px 10px 0 10px; margin:0; color:#FFFFFF; font-size:14px; height:33px; text-align:center;}
h2{}
h3{ font-size:100%; padding:5px 8px 0 8px; margin:0; font-weight:bold; color:#952D00}
h3 a{ font-size:100%; margin:0; font-weight:bold; text-decoration:underline; color:#000000; font-size:16px; }
.f16{ font-size:16px; }
.f14{ font-size:14px; }

#logo{ position:absolute; float:left}

#flashContainer{ clear:both; float:left; }
#howWorks{ float:left;background-image:url(../images/autoart/howitworks.png); width:203px; height:259px; _height:246px;  padding:42px 0 0 0; _padding:55px 0 0 0}

#howWorks ul{ font-size:12px; margin:14px 0 0 45px; _margin:14px 0 0 85px; }
#howWorks ul li{ list-style:none; color:#FFFFFF; font-size:10px; width:110px; font-weight:bold}
#howWorks ul li a{color:#FFFFFF; font-size:10px; width:110px; font-weight:bold; text-decoration:none}

#howWorksInner{ float:left; background-image:url(../images/autoart/howitworks.png); background-position:left bottom; width:203px; height:258px; padding:0px; margin:0px; background-color:white;}
#howWorksInner ul{ font-size:12px; margin:0px; padding:14px 0px 0px 85px; }
#howWorksInner ul li{ list-style:none; color:#FFFFFF; font-size:10px; width:110px; font-weight:bold}
#howWorksInner ul li a{color:#FFFFFF; font-size:10px; width:110px; font-weight:bold; text-decoration:none}

.worksinner{ float:left; margin:0px; padding:0px; border:0px; padding:20px 0px 0px 20px; width:68%; font-size:11px; line-height:140%; }

#contentsContainer{ clear:both; width:978px;}

#leftMainContainer{ float:left; clear:both; margin:0px 0 0 0; width:775px; background-color:white; }

#packagesContainer{ clear:both; float:left; width:100%; background-image:url(../images/autoart/pointer.gif); background-position:left top; background-repeat:no-repeat; padding:6px 0 0 0}
#package{ float:left; width:152px; height:250px; color:#FFFFFF; font-size:12px; padding:7px 0 0 0; background-image:url(../images/autoart/packages_bg.png); background-repeat:no-repeat}
.packagePaddingLeft{ margin:0 0 0 3px}
#package h1{  color:#FFFFFF; padding:4px 0 0 0!important; margin:0!important; text-align:center; font-size:12px; height:auto; background:none}
#package h1 a{ color:#FFFFFF; font-size:12px; text-decoration:none;}
#package p{ padding:0px; text-align:left; font-size:11px; margin:5px; height:118px; _height:117px;}
#package img{ clear:both; padding:15px 0 0 6px; text-align:center}
*:first-child+html  #package p{ padding:0px 0 0 0;  height:128px; margin-top:12px}
#package p a{ text-decoration:none; color:#efefef}
#package p a:hover{ text-decoration:none; color:#ffffff}

a.readmore{ display:block; width:68px; height:19px; float:right; margin-right:10px; _margin-right:5px; text-indent:-999em;background-image:url(../images/autoart/readmore.png); background-repeat:repeat-x; }
a.readmore:hover{background-image:url(../images/autoart/readmore-hover.png);} 

#rmenu{ float:left; width:179px; margin:5px 0 0 4px; }
#contact{ border:10px solid #b4b4b4; width:100%;  background-color:#eef7ff}
#contact p{ padding:5px 10px; margin:0; font-size:14px}
#contact span, #contact span a{ font-size:12px; color:#993300; font-weight:bold; text-decoration:none; font-style:italic}
#contact ul{ padding:0; margin:0}
#contact ul li{padding:3px 5px 3px 15px; margin:0; list-style:none; font-size:11px; border:1px solid #afd8fc; border-width:0 0 1px; background-image:url(../images/autoart/arrow.gif); background-repeat:no-repeat; background-position:5px 6px;} 

#highlight{ float:left; background-color:#FFFFFF; border:1px solid #b4b4b4; clear:both;width:750px; padding:10px; margin:10px 0 0 0}
#highlight p{ padding:5px; font-size:12px; margin:0}


#footer_top{ background-image:url(../images/autoart/footer_line.gif); background-position:left top; background-repeat:repeat-x; clear:both; height:38px; margin:10px 0; text-align:right; padding:5px 0px 0 0; font-size:18px; font-weight:bold; font-style:italic}
#footer_bottom{ background-image:url(../images/autoart/footer_bottom.gif); background-position:left top; height:53px; color:#666666; padding:5px 0 0px 10px;  font-size:11px; background-repeat:repeat-x}
#footer_bottom a{ color:#FFFFFF; font-size:11px; text-decoration:none;}
#footer_bottom a:hover{ text-decoration:underline}
#copyright{ font-size:11px; text-align:right; float:right; padding:15px 10px 0 0; }

/**InnerPages**/
.peb{ width:100%; background-image:url(../images/autoart/peb_bg.gif); background-repeat:repeat-x; background-position:left top; font-size:10px; padding:0px 0; border:1px solid #c0c0c0; border-width:0 0 0 1px; height:23px;}
.peb a{ text-decoration:none; color:#000000; font-size-adjust:10px} 
.current{ font-weight:bold; color:#787878}
#path{ padding:5px 0 0 0; width:600px}
.separator{  background-image:url(../images/autoart/separator.gif); background-repeat:repeat-x; width:100%; clear:both; height:2px; margin:5px 0 0 0}
#mainHeaderContainer{background-image:url(../images/autoart/topBorder.gif); background-position:left 31px; background-repeat:no-repeat; display:inline-tablet}
#mainHeader{ width:100%;background-image:url(../images/autoart/mainHeading_bg.gif); background-repeat:repeat-x; background-position:left top; height:40px; margin:5px 0 0 0 }
#mainHeader h1{_float:left}
.caption{ font-size:12px; font-style:italic; color:#FFFFFF; font-weight:bold}

#autoArtContents{ background-color:#FFFFFF; border:1px solid #ababab; border-width:0 1px 1px 1px; font-size:12px; padding:0 0 10px 0}
.img{ display:inline-table; padding:10px 5px}
#autoArtContents p {padding:4px; font-size:11px; margin:0}

/* Forms
******************************************************************/
.regForm{ clear:both; padding:10px 10px;}
.regForm h4{ padding:5px 0; margin:0;font-weight:bold}
.font14{ font-size:14px}
.cssform p{
width: 500px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.selectMenu{width: 200px; padding:5px 0;}

.cssform label{
font-weight: normal;
float: left;
 
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 200px; padding:5px 0;
}

.cssform input[type="password"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 200px; padding:5px 0;
}

/*.cssform textarea{
width: 400px;
height: 80px;
}*/

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}
.mandatory{ color:#FF0000; font-weight:bold; font-size:16px}
.red{ color:#FF0000; font-weight:bold; font-size:12px}
.note{ color:#999999; font-size:11px}
/**/

.productTable{ border:1px solid #CCCCCC; font-size:11px}
.productTable td{background-image:url(../images/autoart/tr-gradient.png); background-repeat:repeat-x; background-position:left top }
.productTable td a{ color:#000000; text-decoration:none}
.productTable td a:hover{ text-decoration:underline} 

ul.works{ padding:10px; margin: 0 0 0 15px; }
ul.works h3{ font-size:14px; font-weight:bold; padding:0!important; margin:0!important}
ul.works li{ list-style:disc;  padding:3px 0 3px 0;  font-size:11px; margin:0 0 0 15px;}
 
.priceTable{border-collapse: collapse; margin:10px; font-size:12px}
.priceTable th{background: #636466; color:#FFFFFF;}
.tborder{border: 1px dashed rgb(127, 124, 117);}
.price{color:#FFFFFF; font-weight:bold}

.brdr{ border:1px solid #cccccc; border-width:0 1px 0 0 }

/**/
#bottomPackages{ width:100%;background-image:url(../images/autoart/bottomPackage_bg.gif); background-repeat:repeat-x; background-position:top; border:1px solid #a2a2a2; display:inline-table; margin:20px 0 10px 0; height:110px; }

img {border:none;}
 #page-carousel {
width:966px;
z-index:200;
margin-top:0px;  height:150px; position:relative; left:8px
}

#page-carousel-padding {
height:60px;
display:none;
}

#page-carousel .carousel-spacer {
float:left;
height:50px;
width:10px;

}

#page-carousel .carousel-item {
height:50px;
float:left;
width:234px;
overflow:hidden;
}

#page-carousel .carousel-item .carousel-content {
height:50px;
float:left;
width:234px;
overflow:hidden;

}

.section-slider {
cursor:pointer;
}
/**/

.tellaFriend{ font-size:12px; border:1px solid #cccccc;}
.tellaFriend h3{font-size:100%; padding:5px 8px 0 0px; margin:0; font-weight:bold; color:#952D00}
.tellaFriend p{ font-size:11px}
.btnav{background-color: #eeeeee; border: 1px #cccccc solid;}

.sage_pay_but{background-image:url(../images/autoart/sepayl100_50.gif);
width:80px;
height:40px;
border:0px;
}