/*  STRUCTURAL CSS  

Projet   : Sport tuning
Societe  : LOD Design
Auteur   : Elodie Migeon

Version  : V 1
Date     : 31 03 2009

*/



/* ---------------------
	    DEFAUT
--------------------- */


/*  Réinitialiser   */ 


*{
margin:0;
padding:0;
}


body{
color:#292929;
font-family:Arial, Helvetica, sans-serif;
font-size: 76%; 
background:#507986 url(images/body.png) 0 0 repeat-x;}


img{
border:0;
margin:0;
padding:0;
}

ul, li, dl, dt, dd{
list-style:none;
}

ol li{
list-style:decimal inside;
}


/*  éléments communs   */ 
#side .bt{float:none; margin:5px auto; }
#side .bt a{float:none;}
.panier{
background:url(images/panier.png) 0 0 no-repeat;
padding-left:28px;
height:20px;}


.clear{clear:both;}
.hide{display:none!important; }

.italique{font-style:italic;}
.high, .highlink a {font-size:1.2em;font-weight:bold; color:#4c585b;}
.mini, .minilink a{font-size:0.9em;}

.color1{color:#006080;}
.color2{color:#c24b4b;}
strong{color:#c81211;}

.textcenter{text-align:center;}
.textright{text-align:right;}

.right{float:right;}
.right img, .right #video_installation, .right #anim_boxpwr {margin-left:10px;}


.left{float:left;}
.left img, .left #video_installation, .left #anim_boxpwr  {margin-right:10px;}






hr{
color: #fcfdfc;
background-color:#fcfdfc;
height: 1px;
border: 0;
margin: 25px 0 0 0!important;
margin:12px 0 0 0;
}

a {color:#0b8495;}
a:hover {color:#7bb2b4;}

/*  titres   */ 

h1 { font-size: 1.6em;  color:#010101;  }
h2 { font-size: 1.2em;  color:#2e4d58; margin-bottom:6px; text-decoration:none;  }
h3 { font-size: 1em; margin-bottom:3px;}
h4 { font-size: 1em;color:#8ca2ab; }
h5 { font-size:0.9em; margin-bottom:4px;}
h6 { font-size: 0.8em; }



td h2 a, .column h2 a{color:#6c6c6c;  font-size: 0.9em; }
td h2 a:hover, .column h2 a:hover{color:#8c8c8c;}
.fiche h2 {font-size: 1.3em;}
/* ---------------------
	STRUCTURE
--------------------- */

#global {
min-width:770px!important;
max-width:970px!important;
width:auto!important; width:970px;
margin:10px auto 0 auto;
position:relative;
overflow:hidden;
}

#header {
background:#000;
min-height:272px!important;
height:auto!important; height:270px;
position:relative;}



#contenu {
background:url(images/contenu.png) 0 0 repeat-y;
position:relative;
min-height:300px!important;
height:auto!important; height:300px;}

#side {
width:161px;
position:absolute;
top:0; 
left:0;
color:#e2e2e2;
}

#content {
min-width:469px!important;
max-width:679px!important;
width:auto!important; width:679px;
padding:40px 65px 30px 226px;
min-height:680px!important;
height:auto!important; height:680px;}


#footer {
clear:both;
background:#505050 url(images/footer.png) 0 0 repeat-x;
padding:8px 20px;
color:#eaeaea;text-align:right;font-size:0.9em;
}




/* ---------------------
	HEADER
--------------------- */

#logo {
position:absolute;
top:35px; 
left:20px;}


/* BANNER */

#banner {
position:absolute; 
top:0; right:0;
width:520px;
height:232px;
text-align:right;
background:url(phototheque/bandeau.jpg) right 0 no-repeat;
}


#slogan {
position:absolute;
bottom:0; 
right:0;
width:348px;
padding:6px 16px;
line-height:1.3em;
text-align:right;
background:url(images/slogan.png) 0 0 repeat-y !important;
background:url(images/ie6/slogan.jpg) 0 bottom no-repeat;
z-index:5;
color:#212121;
font-weight:bold;
font-style:italic;
font-size:1.2em;}

#cache {
position:absolute;
z-index:10;
top:0; height:232px;
left:0;width:217px;
background-image:url(images/cache.png)!important;
background-image:url(images/ie6/cache.gif);
background-position: 0 0;background-repeat: no-repeat;}

#cache h1{position:absolute;
top:155px; 
left:-245px;
padding: 68px 0 0 0;
height: 0px !important;
height /**/:68px;
overflow:hidden;
display:block;
width:360px;
background-image:url(images/boitier_additionnel_electronique.png)!important;
background-image:url(images/ie6/boitier_additionnel_electronique.gif);
background-position: 0 0;background-repeat: no-repeat;}

/* Menu1 */
#menu1 {color:#d1d1d1;
position:absolute;
top:1px; 
left:-425px;
width:490px;
text-align:right;
z-index:15;


}

.icone_infos {
clear:both;
margin-top:5px;text-align:right;
font-size:1.2em;font-style:italic;
padding-right:5px;}

#menu1 li{
display:inline;
margin-left:10px;
}

#menu1 a{border-left:solid 1px #d1d1d1;

color:#d1d1d1;
text-decoration:none;
padding-left:10px;
}
#menu1 a:hover, #menu1 .active a{
color:#ec0b09;}

#menu1 .sans a{
border:none;
}


/* Menu2 */
#menu2 {
width:100%;
position:absolute;
bottom:0;
left:0;
height:35px;
z-index:15;
}

#menu2 a{line-height:32px;
text-align:center;
display:block;
font-weight:bold;overflow:hidden;
text-decoration:none;
text-transform:uppercase;
}

#menu2 p a{
background-image:url(images/onglet.png);
background-position:0  0 ;
background-repeat: no-repeat;
width:161px;color:#dcdcdc;
font-size:1.1em;
height:35px;margin-right:4px;
position:absolute;
top:0;
bottom:0;
}

#menu2 ul{padding-left:167px;}

#menu2 li{
background-image:url(images/menu_right.png);
background-position:right  0 ;
background-repeat: no-repeat;
padding-right:3px;
margin-right:5px;
float:left;
white-space:nowrap;
}

#menu2 li a{color:#f4f4f4;
min-width:58px!important;float:left;
width:auto!important; width:auto;
height:35px;padding:0 5px 0 8px;
background-image:url(images/menu.png);
background-position: 0 0;
background-repeat: no-repeat;}

#menu2 li:hover,  #menu2 li.active{
background-position: right  -35px ;}

#menu2 a:hover,  #menu2 .active a{
background-position: 0  -35px ;color:#fff;}




/* ---------------------
	SIDE
--------------------- */

/* boxside */
.boxside {
margin:0 auto 15px auto; width:136px;
background:url(images/boxside_top.png) 0 0 no-repeat;
padding-top:6px;
}

.boxside .boxcontent {
padding:4px 10px 10px 10px;
background:url(images/boxside.png) 0 bottom no-repeat;
min-height:100px!important;
height:auto!important; height:100px;}

.boxactive {background:#c24d4d url(images/boxactive.png) 0 bottom repeat-x; padding-bottom:4px;margin-bottom:6px;}
.boxactive .boxside{background:#c24d4d url(images/boxactive.png) 0 bottom repeat-x; margin:0 auto 5px auto;}

.blocside {margin:0 auto 15px auto;
width:136px;}

#side .high{color:#cecece;
margin-bottom:8px;}

#paiement_securise {
background:url(images/paiementsecurise_bottom.png) 0 bottom no-repeat!important;
background:url(images/ie6/paiementsecurise_bottom.gif) 0 bottom no-repeat;
width:136px;
padding-bottom:58px;
font-weight:bold;
margin-bottom:15px;
}

#paiement_securise p{
background:url(images/paiementsecurise.png) 0 0 no-repeat!important;
background:url(images/ie6/paiementsecurise.gif) 0 0 no-repeat;
display:block;
color:#e2e2e2;
padding:7px 0 0 22px;
margin:0!important;
min-height:10px!important;
height:auto!important; height:10px;}



.bt_side a{
background:url(images/bt_side.png);
display:block;
width:136px;
height:31px;
overflow:hidden;
text-align:center;
font-weight:bold;
color:#dffcff;
line-height:30px;
text-transform:uppercase;
text-decoration:none;
}
#side .minilink {
text-align:center;}

#side .minilink a{
color:#d47777;
}

/* ---------------------
	CONTENT
--------------------- */


/*  bloc   */ 

.bloc{margin-top:30px;}
.bloc p{margin-bottom:8px;}

.bloc2{
background:#e2e2e2;
padding:10px;
min-height:50px!important;
height:auto!important; height:50px;}

.bloc2 p{font-size:0.9em;}
.bloc2 strong{color:#000000;}
.bloc3{
margin-top:10px;
background:#e2e2e2;
padding:8px;
min-height:30px!important;
height:auto!important; height:20px;}


/*  liste   */ 

.bloc ul li, dt{ background:url(images/pucelist.png) 0 4px no-repeat!important; 
background:url(images/ie6/pucelist.gif) 0 4px no-repeat; 
padding-left:14px;}

.bloc .listlink li, .bloc p.listlink { background:url(images/pucelink.png) 0 4px no-repeat!important;
background:url(images/ie6/pucelink.gif) 0 4px no-repeat;
padding-left:14px;display:block;
font-weight:bold;}

.bloc .listvalide li, .bloc p.listvalide { background:url(images/pucevalide.png) 0 0 no-repeat!important;
 background:url(images/ie6/pucevalide.gif) 0 0 no-repeat;
padding-left:20px;display:block;}

.bloc ul li, .bloc  ol li{ margin-bottom:6px; }

.bloc dl, .bloc ul, .bloc ol {float:left;
white-space:nowrap; margin-bottom:8px;
}
.bloc .listcolumn  {
width:100%;
}

.bloc .listcolumn  li {
width:40%; float:left;
padding:0 2%;
}



dt {font-weight:bold;}
dd{padding-left:24px;}


/*  formulaire  */

.formulaire ul{
}
 
.formulaire li{
margin-bottom:10px;
background:none;
padding:0; }

label{
display:block;
color:#bababa;}

#content label {color:#767676;}

input, textarea, select{ 
background:#bababa;
width:100%;} 


input[type=image]{
	width : auto;
}

.miniselect select {width:60px!important;}
.miniinput input {width:40px!important; }
.miniinput2 input {width:100px!important; }


.mainform label{color:#fff;}
.mainform input, .mainform select{background:#fff;}

.ligne input, .ligne select,  .ligne textarea {width:auto; float:left;} 
.ligne label{ float:left; margin-right:10px;} 

.check label{font-size:0.9em;float:left; margin-right:5px;} 
.check input{float:left; width:12px; margin-right:5px;
background:none;} 


textarea{ height:80px;}  

 .bigform {
width:80%;
margin:15px 0 0 0;
background:#e2e2e2;
padding:10px;}


.bigform li{float:left;width:46%; margin-right:3%!important;margin-right:2%; margin-bottom:10px; font-size:0.9em;}
.bigform .form_saut {clear:both; float:none;}
.bigform .form_ligne, .formulaire .form_ligne select{width:auto;}
.bigform .area, .bigform .check  {width:95%;}
.bigform .check label{font-size:1em;} 

fieldset{margin-bottom:15px; padding:10px; border:solid 1px #abc4cc;   -moz-border-radius:5px; }
legend{color:#709ca9; font-weight:bold; margin:0 0 5px 0; padding:0 5px; font-size:0.9em;}

 
.bt_form, .bt_form2, .bt_formnoir, .bt_formnoir2 {float:right; margin:5px ;}
 
.bt_form input, .bt_form2 input, .bt_formnoir input, .bt_formnoir2 input{
font-size:0.9em;
font-family:Arial, Helvetica, sans-serif;
height:21px;
line-height:19px;
width:91px;
background:url(images/bt_form.png) 0 0 no-repeat!important; 
background:url(images/ie6/bt_form.gif) 0 0 no-repeat; 
color:#fff;
text-align:center;
font-weight:bold;
font-weight:bold;
border:none;
cursor:pointer;} 

.bt_left{float:left; }

.bt_formnoir input{background:url(images/bt_formnoir.png) 0 0 no-repeat!important; 
background:url(images/ie6/bt_formnoir.gif) 0 0 no-repeat; }

.bt_form2 input{width:140px;background:url(images/bt_form3.png) 0 0 no-repeat!important; 
background:url(images/ie6/bt_form3.gif) 0 0 no-repeat; }

.bt_formnoir2 input{width:140px;background:url(images/bt_formnoir3.png) 0 0 no-repeat!important; 
background:url(images/ie6/bt_formnoir3.gif) 0 0 no-repeat; }

#side .bt_form{float:none; text-align:center;}



.fiche .bt_form{float:left;}
.fiche .bt_form input, .confirm .bt_form input {width:112px; 
background:url(images/bt_form2.png) 0 0 no-repeat!important;
background:url(images/ie6/bt_form2.gif) 0 0 no-repeat;
height:26px;
line-height:24px; }

.confirm .bt_form {
white-space:nowrap;}


.mention {
color:#bf201f; font-size:0.9em; text-align:right; font-style:italic;}


/*  TABLE  */

table{
width:100%;
margin:0 auto;
border-collapse:collapse;
text-align:left;
}

td.sans, th.sans {background:none;}

td, th {padding:5px 12px; height:15px;vertical-align:top;}

.table a img{
border:solid 4px #455660;
}

.table a:hover img{
border:solid 4px #36c4ec;
}


th {
color:#cecece;
background:#767676;
border-bottom:solid 1px #3a484c;}


td{
background:#e2e2e2;
border-top:solid 10px #cecece;}

.imp {background:#be5050;
color:#FFFFFF;}
.imp2 {background:#d1a6a6;}
.imp3 {background:#a9bdc4;}

caption{display:none;
}

tfoot {text-align:right;}




.minitable{
width:280px;
font-weight:bold;
margin:10px 0 0 0;
}
/*  bouton  */

.bt{
background-image:url(images/bt_right.png)!important;
background-image:url(images/ie6/bt_right.gif);
background-position:right  0 ;
background-repeat: no-repeat;
padding-right:6px;
float:right;
white-space:nowrap;
margin:5px ;
}

.bt a{color:#f4f4f4;
font-size:0.9em;
min-width:58px!important;float:left;
width:auto!important; width:auto;
height:21px;padding:0 0 0 6px;
background-image:url(images/bt.png)!important;
background-image:url(images/ie6/bt.gif);
background-position: 0 0;
background-repeat: no-repeat;
line-height:20px;
text-align:center;
display:block;
font-weight:bold;
text-decoration:none;}

.mail_ami a{
background:url(images/icone_ami.png) 0 0 no-repeat;
padding-left:17px;
float:right;
white-space:nowrap;
margin-right:10px;
}


/* ---------------------
	BOUTIQUE
--------------------- */
/*  new   */
.fil_ariane {
font-size:0.9em;}

.fil_ariane a {color:#000000;}
.fil_ariane a:hover {color:#626262;}

.logo_voiture {
position:absolute; top:20px; right:70px;}


/*  page1   */


.column{
width:46%;
margin:1%;
padding:1%;
float:left;
background:#e2e2e2;
}

.price {
padding-left:20px;
float:left;}




/*  liens navig   */

.navig ul{float:right; margin-top:5px;}
.navig li {float:left; margin-right:8px;}
.navig li a {
font-weight:bold;
font-size:1.1em;
color:#fff;
}

.navig li a:hover, .navig .active a {
color:#df0908;
text-decoration:none;}

#back a, #next a, #first a, #end a {
padding: 16px 0 0 0;
height: 0px !important;
height /**/:16px;
overflow:hidden;
display:block;
width:13px;
background-image:url(images/icone_back.png)!important;
background-image:url(images/ie6/icone_back.gif);
background-position: 0 0; background-repeat: no-repeat;
}

#back a:hover, #next a:hover, #first a:hover, #end a:hover {
background-position: 0 -16px;
}

#next a{background-image:url(images/icone_next.png)!important;
background-image:url(images/ie6/icone_next.gif);}
#first a{background-image:url(images/icone_first.png)!important;
background-image:url(images/ie6/icone_first.gif);}
#end a{background-image:url(images/icone_end.png)!important;
background-image:url(images/ie6/icone_end.gif);}


/*  cadre boutique   */

.cadre_boutique {
border:solid 1px #ffffff;
position:relative;
margin-top:40px;
padding-bottom:5px;
width:100%;}

.ongletboutique  {
position:absolute;
top:-26px; 
left:-1px;
}

.ongletboutique li {
background-image:url(images/ongletboutique_right.png);
background-position: right 0;
background-repeat: no-repeat; 
padding-right:6px;
display:block;
float:left;
margin-right:10px;}

.ongletboutique li a{
background-image:url(images/ongletboutique.png);
background-position: 0 0;
background-repeat: no-repeat;
display:block;
padding:0 0 0 6px;
height:26px;
color:#252525;
text-decoration:none;
min-width:100px!important;float:left;
width:auto!important; width:auto;
line-height:26px;
font-weight:bold;
font-size:0.9em;

}

.ongletboutique .active, .ongletboutique li:hover{background-position:right -26px;}
.ongletboutique .active a, .ongletboutique a:hover{background-position:0 -26px; color:#636363}

.etat_boutique{
width:90%;
margin:0 auto;
padding:10px 0;}

/*  fiche   */

.fiche {
background:#e2e2e2;
padding:15px 25px 15px 25px;
margin:0;
min-height:270px!important;
height:auto!important; height:270px;}


.fiche .price {
float:right;
text-align:left;
padding:0;
margin-right:20px;
font-size:1.2em;
white-space:nowrap;}



/* ---------------------
	FOOTER
--------------------- */
#footer ul {
margin-bottom:5px;
}
#footer li {
display:inline; margin-left:10px;}

#footer a {
color:#d4d4d4;
text-decoration:none;}
#footer .minilink  {
padding-top:5px;
border-top:solid 1px #a0bcc5;}
#footer .minilink a {
color:#a0bcc5;
border:none;}


#map{

width:420px;
height:400px;
}