/* CSS Document */
html {overflow-y:scroll;}

body {color:#666;font:normal 11px arial,sans-serif;text-align:center}
strong {font:bold 11px arial,sans-serif;}

a {text-decoration:none;color:#666}
a:hover {text-decoration:underline;color:#999}


#main{width:768px;margin:20px auto 0  auto;border:1px solid #ccc; text-align:left}


/*----- header -----*/
#top{height:70px;padding:20px 35px; width:695px; overflow:hidden}
#top h1 span{width:150px;height:50px;background:url("../gfx/ruby-logo.gif") no-repeat;text-indent:-9999px;font:Bold 14px arial, sans-serif;color:#7A2120; float:left}
#top h2 span {width:165px;height:50px;background:url("../gfx/icasque-logo.gif") no-repeat;text-indent:-9999px;font:Bold 14px arial, sans-serif;color:#7A2120; float : right}

#menu{margin-left:30px}
#menu ul{width:100%;overflow:hidden}
#menu li{display:block;float:left;background:#FFF;margin-right:60px;margin-left:10px;}
#menu a{text-decoration:none; border:none}


/*----- footer -----*/
#footer{background:#888; margin:50px 1px 1px 1px; text-align:center;height:30px;line-height:30px}
#footer a{margin:1em 3em;font:Bold 10px arial, sans-serif;color:#FFF}
#footer a:hover{color:#CCC}
#powered{width:768px;margin:0 auto;border:1px solid #FFF;text-align:right;font:normal 9px arial, sans-serif;padding-top:2px;padding-bottom:10px }
#powered a{color:#888}
#powered a:hover{color:#666}

/*----- classes generales -----*/
.content{margin:20px 40px}
.content h1{font:bold 16px arial, sans-serif;color:#888;margin-bottom:20px;height:20px;text-indent:-9999px;}
.content h2, .boxy-content h2 {font:bold 14px arial, sans-serif;color:#791f1f}
.content h3{font:bold 12px arial, sans-serif;color:#7A2120;margin-bottom:2px}
.fright {float:right}
.fleft {float:right}
.clear {clear: both;}
.center {margin:0 auto; width:70%}
.tcenter {text-align:center}
.tright{text-align:right}
.w100 {width:100%}
.retrait {overflow:auto;width:650px;float:right;margin-bottom:10px}
.tableStd {width:100%;border:none;padding:0;margin-bottom:1em}
.mr10 {margin-right:10px}
.mr20 {margin-right:20px}
.ml10 {margin-left:10px}
.mt20 {margin-top:20px}
.bordo {color:#7A2120}



/*----- boutons -----*/
.btn{display:block;width:130px;text-align:center;border:none;font:normal 10px/20px arial,sans-serif;text-transform:uppercase;background-color:#000;color:#FFF;height:18px;line-height:18px}
.btn:hover{text-decoration:none;background-color:#791F1F;color:#FFF}

.btnForm{height:20px;line-height:20px}

.btnLight{background-color:#DDD;color:#333}
.btnLight:hover{background-color:#791F1F;color:#FFF}

.btnReverse{background-color:#791F1F;color:#FFF}
.btnReverse:hover{background-color:#000;color:#FFF}

.btnDisabled{background-color:#EEE;color:#CCC}
.btnDisabled:hover{background-color:#EEE;color:#DDD;}


/*---- erreurs OSC -----*/
/*
.messageStackSuccess  {padding:15px 10px 15px 70px;margin:20px 0;color:#000;font: bold 11px/20px verdana, sans-serif;background:#FFF url('../../gfx/messages/icon_check.gif') no-repeat 10px 10px;border:5px solid lime;}
.messageStackError    {padding:15px 10px 15px 70px;margin:20px 0;color:#000;font: bold 11px/20px verdana, sans-serif;background:#FFF url('../../gfx/messages/icon_yeild.gif') no-repeat 10px 10px;border:5px solid red;}
.messageStackWarning  {padding:15px 10px 15px 70px;margin:20px 0;color:#000;font: bold 11px/20px verdana, sans-serif;background:#FFF url('../../gfx/messages/icon_check.gif') no-repeat 10px 10px;border:5px solid gold;}
*/
.messageStackSuccess  {padding:2px;margin:30px 0;color:green;font: bold 11px/20px verdana, sans-serif;border-bottom:2px solid green;}
.messageStackError    {padding:2px;margin:30px 0;color:red;font: bold 11px/20px verdana, sans-serif;border-bottom:2px solid red;}
.messageStackWarning  {padding:2px;margin:30px 0;color:orange;font: bold 11px/20px verdana, sans-serif;border-bottom:2px solid orange;}


                    
/*---- validation formulaires -----*/
.vanadium-valid {color:#666; outline:1px solid #FFF}
.vanadium-invalid {color:#7A2120;  outline:1px solid #7A2120}
.vanadium-message-value {font-weight:bold}
.vanadium-advice {margin-left:5px;padding:0 2px;font: normal 10px arial,verdana, sans-serif;outline:0}

/*----- formulaires -----*/
form.cmxform fieldset{margin-bottom:20px;  border:1px solid #CCC}
form.cmxform legend{padding:0 2px;  font-weight:bold;}
form.cmxform label{display:inline-block;  line-height:1.8;  vertical-align:top; }
form.cmxform fieldset ol{margin:0;  padding:0;}
form.cmxform fieldset li{list-style:none;  padding:5px;  margin:0;}
form.cmxform fieldset fieldset{border:none;  margin:3px 0 0;}
form.cmxform fieldset fieldset legend{padding:0 0 5px;  font-weight:normal;}
form.cmxform fieldset fieldset label{display:block;  width:auto;}
form.cmxform em{  font-style:normal;  color:#7A2120;}
form.cmxform label{width:150px;/* Width of labels */}
form.cmxform fieldset fieldset label{margin-left:153px;/* Width plus 3 (html space) */}
form.cmxform input[type=text]:focus, form.cmxform input[type=password]:focus, form.cmxform textarea:focus{background-color:#EEE}


/*------ INDEX ------*/
#splash{width:682px;margin:10px auto 60px auto;text-align:justify;}
#splash img{margin-bottom:1em;}
#splash cite{display:block;    text-align:right;color:#8A8B8C;}
.prodTitle{height:17px;width:682px;margin:0 0 20px 40px;clear:both;background:url(../gfx/line.gif) no-repeat bottom right;}
.prod{width:710px;margin:0 0 20px 40px;overflow:hidden;list-style-type:none;padding:0;}
.prod li{width:96px;margin:0 10px 0 11px;float:left;text-align:center}
.prodCasque{height:130px;width:76px;margin:0 25px 20px 0;float:left;}
.prodCasqueText{height:45px;width:76px;margin:10px 0 0 0;float:left;text-align:center;}
.carousel{float:left;margin-bottom:25px;}
.next,.prev{cursor:pointer;}
.dispo_0 {background:#DDD}

#cadrePhoto{height:336px;width:336px;margin:30px 30px 30px 40px;text-align:center;float:left;}
#description{width:316px;margin:30px 30px 30px 0;text-align:justify;float:left;}
#description p{margin:8px 0;}
ul#tailles{margin:0;list-style-type:none;padding:0;}
ul#tailles li{font-size:12px;margin-right:5px;text-align:center;padding:5px;height:15px;width:20px;border:1px solid #ccc;float:left;cursor:pointer;}
ul#tailles li.on{background-color:#000;color:#fff;}

a.assistant{text-decoration:underline !important;padding-left:8px;background:transparent url(../gfx/arrow-gris.gif) no-repeat 0 1px;position:relative;top:8px;}

#popupAssistantTaille {width:350px; display: none;}
#popupAssistantTaille p {margin:1em 0; text-align:justify}
#popupAssistantTaille b {color:#791F1F}
#popupAssistantTaille table {margin-bottom:1em}
#popupAssistantTaille td{text-align:center; padding:5px}

#prodPhoto{height:336px;width:336px;margin:30px 30px 60px 40px;text-align:center;float:left;}
#prodPhoto img.main{display:block;width:300px;height:300px;margin-bottom:10px;}
#prodPhoto img.thumb{border:1px solid #CCC;cursor:pointer;margin:0 5px;}
#prodPhotoZoom{border:1px solid #ccc;cursor:move;padding:5px;background-color:#FFF;position:absolute;z-index:950;display:none;width:610px;height:610px;}
#prodPhotoZoom a{display:block;float:right;padding-left:10px;background:transparent url(/gfx/pictos/arrow-2-right.png) no-repeat left;}
#prodPhoto ul{list-style-type:none;margin:25px 0 0 0;padding:0;width:100%;}
#prodPhoto li{padding:0 12px 0 8px;background:transparent url(/gfx/pictos/arrow-2-right.png) no-repeat left;float:left;}


#description2 ul {margin-left:20px}
#description2 li {list-style-type: square;margin-bottom:0.5em}





/*----- ACCOUNT -----*/
#account div{padding:10px 0 30px 0px;min-height:50px}
#account ul{list-style-image:url("../gfx/arrow-bordo.gif");margin:0;padding:0 20px}
#account li{margin:2px 0;padding:0}
#account table{width:100%;border:none;padding:0;margin-bottom:1em}
#account thead{display:none}
#account th{background:#5A637C;color:#FFF;margin:0;border-bottom:1px solid #CCC;padding:2px 5px}
#account table .dot{background:transparent url("../gfx/rondRed.gif") no-repeat 5px center;padding-left:20px}
#account td{margin:0;padding:2px 5px;border:none}
#account ul a{color:#8A8B8C;text-decoration:none}
#account ul a:hover{color:#333;text-decoration:underline}

/*--- ADDRESS BOOK -----*/
#addressBook .adresseBloc{border-left:1px dashed #CCC;margin:5px 25px 30px -5px;width:200px;float:left;padding:0 0 0 5px; }
#addressBook .adresseTxt{height:140px}
#primaryAddress h2 {padding-left:15px;background: transparent url("../gfx/arrow-bordo.gif") no-repeat left center }
#addressBook .adresseTitre {float:left; width:170px;margin:5px 50px 30px 5px;}
.tooltip{ position: absolute; top: 0; left: 0; z-index: 3; display: none; width:200px;background:#EEE;color:#333;border:1px solid #CCC;padding:1em}

/*-- CONTACT --*/
#contact textarea {width:400px}

/*-- PANIER --*/
#panier  th{background-color:#888; color:#FFF; height:20px; line-height:20px; text-align:center}
#panier  td{vertical-align:middle;padding:10px}
#panier table{margin:0 0 30px 0}
.cellCenter {text-align:center}
.cellRight  {text-align:right}
.cellBorder {border-right:1px solid #CCC}
.cellSepar {height:30px}
.cellSepar hr {color:#CCC; background-color:#CCC;height:1px; border:none}
.cellSmallpadding {padding:2px}


/*-- PANIER --*/
#paiement  td{vertical-align:middle;padding:10px}
#paiement table{margin:0 0 30px 0}
#paiement table a {color:#900}
#paiement table a:hover {text-decoration:underline}

/*-- LOGIN --*/
#backLogin {width:682px;height:311px;background:url(../gfx/fond_compte.jpg) no-repeat bottom right;text-align:justify;color:#999;}
#backLogin strong {color:#FFF; line-height:1.5em}
.backLoginBlock {padding:20px}

/*----  ----*/
#progressbar  {margin:0 0 20px 0;padding:0}
#progressbar  a, #progressbar a:hover{color:#FFF}
#progressbar li {display:block;width:20px;height:20px; line-height:20px;text-align:center;float:left;margin-right:5px;background-color:#8A8B8C}
#progressbar li span {visibility:hidden}
#progressbar {width:100%; overflow:hidden; color:#FFF}
#progressbar .selected {background-color:#791F1F}

/*--- Titres des pages ---*/
#panier h1{width:158px;background:url("../gfx/headers/mon_panier.gif");}
#livraison h1{width:130px;background:url("../gfx/headers/livraison.gif");} 
#paiement h1{width:119px;background:url("../gfx/headers/paiement.gif");}
#contact h1{width:118px;background:url("../gfx/headers/contact.gif");}
#confirmation h1{width:192px;background:url("../gfx/headers/confirmation.gif");}
#account h1{width:170px;background:url("../gfx/headers/compte.gif");}
#accountEdit h1{width:242px;background:url("../gfx/headers/mes_coordonnees.gif");}
#addressBook h1{width:310px;background:url("../gfx/headers/mon_carnet_adresses.gif");}
#accountPassword h1{width:171px;background:url("../gfx/headers/mot_passe.gif");}
#login h1{width:170px;background:url("../gfx/headers/compte.gif");}
#ateliers h1{width:224px;background:url("../gfx/headers/ateliers_ruby.gif");}

/*--- Success ---*/
#success{width:682px;margin:10px auto 20px auto;text-align:justify;}

/*-- TODO
#logoff deconnexion 
*/

 /*----- les ateliers ruby -----*/