/*couleurs :
orange => #c60;
orange texte : #f27900;
gris => #6a6a6b; 
bordure grise : #9c9c9c;
*/

body {
	color: #bbb;
	background: #6a6a6b;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/* --- Liens ------------------------------- */

a:visited {
	color : #fff;
	}

a  {
	color: #fff;
	text-decoration : none;
	border-bottom : 1px solid #6a6a6b;
	font-weight : bold;
}

#footer a {border : 0px solid #000; text-decoration : underline;}
td.ref a {color : #000;}

a.img {
	border : 0px solid #000;
}

a:hover, a:focus, a:active {
	color: #f27900;	
	border-bottom : 1px solid #fff;	
}

h2 a:visited, h2 a {
	border : 0px solid #fff;
	}
	

/* --- Balises ------------------------------- */

ul {
	list-style-type : square;
}



/* --- Titres ------------------------------- */

h1 {font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;}

h2 {	
	font-size : 1.3em;
	color : #fff;
	border-bottom : 1px solid #6a6a6b;
	
	
}

#content h2 {
	margin : 1em 0 0.5em;
	height : 30px;
	line-height : 30px;
	padding-left : 5px;
	background : url(img/piece.png) no-repeat 99% bottom;
}

h3 {	
	background : #6a6a6b; 
	text-indent : 1em;
	color : #fff;
	border : 1px solid #9c9c9c;
}

h4 {color : #f27900;}

#navigation h2 {
	margin : 0;
	padding : 0 10px;
	background : #6a6a6b;
	border-bottom : 0px solid #c60;
	font-size : 1.1em;
}
	
/* --- Layout -------------------------------- */

#page {
	position : relative;
	width: 973px;
	margin : 0 auto 20px;
	background : #000 url(img/page.png) repeat-y left;	
}

#main  {
	float : right;
	width : 734px;
	background : transparent url(img/main.jpg) no-repeat left 54px;	
	padding-bottom : 20px;
}

#content {padding : 20px;}

#navigation {
	margin-right : 734px;
	background : transparent url(img/navigation.jpg) no-repeat top left;
}

#footer {
	clear : both;
	height : 74px;
	background : #6a6a6b url(img/footer.jpg) no-repeat top left;
	text-align : center;
	color: #fff;
	font-size : 0.85em;
}

#footer p {
	margin : 0;
	padding-top : 30px;
}

#footer img {
	vertical-align : middle;
}

/*--- #access -------------------------------- */

#access {
	width : 100%;
	height : 20px;
	background : #6a6a6b;
}

#access ul {
	float : right;
	font-size : 0.8em;
}

#access ul a:visited, #access ul a {
	padding : 0 1em;
	line-height : 20px;
	color : #bbb;
	text-decoration : none;
}

#access ul a:hover, #access ul a:active, #access ul a:focus {color : #fff;}



/*--- #top ------------------------------------ */

#top {
	width : 100%;
	height : 190px;
	position : relative;
	background : transparent url(img/top.jpg) no-repeat top left;	
}

#top h1 {
	float : left;
	width : 228px;
	margin : 0;
	padding : 0;
	text-align : center;
}

#top h1 img {padding-top : 15px;}

#recherche {
	position : absolute;
	width : 210px;
	left: 20px;
	top : 120px;
	margin : 0;
}


#top p { 
	margin : 0;
	padding : 0;
}

#top1 {
	margin : 0 10px 0 233px;
	padding-top : 25px;
	text-align : right;
}

#top1 p#slogan {
	margin : 20px 1em 0;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-size : 2em;
	color : #fff;
}

/*--- ul#menu ----------------------------------*/

ul#menu {
	clear : both;
	height : 60px;
	background : #6a6a6b;
	margin : 0;
	padding : 0 0 0 20px;
}

#menu li a {
	width : 137px;
	height : 41px;
	background : #000 url(img/menu.png) no-repeat top left;
	margin : 8px 0 0;
	padding : 0;
	line-height : 41px;
	font-weight : bold;
	text-align : center;
	text-decoration : none;
	color : #fff;
	font-size : 0.9em;
}

#menu li.on a, #menu li a:hover, #menu li a:active, #menu li a:focus, a.on {
	color : #f27900;
	border : 0px solid #fff;
	}
.menu a.on {text-align : right;}

/*--- #main ------------------------------------------- */

/*--- #ariane ------------------ */
p#ariane {
	clear : both;
	margin : 0;
	padding : 0;
	font-size : 0.9em;
}

p#ariane span {
	font-weight : bold;
	color : #f27900;
}

/* ---#content ------------------ */
.content {margin : 1em;}


#accueil {
	min-height : 400px;
	padding-right : 210px;
	background : transparent url(img/accueil.jpg) no-repeat right top;
}

#compte {
	background : transparent url(img/euro.png) no-repeat 90% bottom;
	padding-bottom : 180px;
}


#info img {
	margin : 0 5px;
	border : 1px solid #fff;
	vertical-align : top;
}

#info dl {
	clear : both;
	overflow : hidden;
	margin : 0;
	background : #fff;
	padding-bottom : 20px;
}

#info dt {
	background : #6a6a6b; 
	margin-left : 290px;
	padding :0 0.5em;
	text-align : right;
	font-weight : bold;
	font-size : 1.2em;
	color : #fff;
}

#info dd{
	margin : 0 0 0 290px;
	padding : 20px;
	background : #fff url(img/coin.png) no-repeat top left;
	color : #6a6a6b;
}

#info dd.photo {
	float : left;
	width : 290px;
	margin : 0;
	padding : 5px 0;
	background : #6a6a6b url(img/coin_bas.png) no-repeat bottom right; 
}

#port table{font-size : 0.9em;}

#garantie a, #mentions a {color : #f27900;}
#garantie h3, #mentions h3, #info h3  {
	margin : 0;
	border : 0px solid #fff;
}

#garantie ol, #garantie p, #mentions dl, #mentions p, #info p  {
	background :#fff url(img/coin.png) no-repeat top left;
	margin : 0;
	padding : 1em;
	list-style-position : inside;
}

#garantie ol li, #garantie p, #mentions dl, #mentions p, #info p {color : #6a6a6b;}

#garantie div, #mentions div, #info div {
	background : #6a6a6b;
	border : 1px solid #fff;
	color : #fff;
	margin : 3% 4% 0 3%;
}

#garantie .column2, #mentions .column2 {
	width : 43%;
	margin : 3%;
	background : #6a6a6b;
	border : 1px solid #fff;
}

#produits .column2 {
	width : 46%;
	margin : 2%;
}
#produits .column2 h3 {
	background : transparent url(img/cat.png) no-repeat left bottom;
	border : 0px solid #000; 
	border-bottom : 1px solid #6a6a6b;
	margin : 1em 0; 
	padding : 0 0 0 20px; 
	text-indent : 0;
}
#produits .column2 h3 a {
	border : 0px solid #000;
}
#produits ul { 
	float : right ;
	font-size : 0.9em;
	margin : 0;
	padding : 0;
}
#produits ul {list-style-type : none;}



#garantie ul.logo {
	/*background : #6a6a6b;*/
	background: white;
	border : 1px solid #fff;
	margin : 3% 4% 0 3%;
	padding : 0 3px;
	list-style-type : none;
	overflow : hidden;
}

#garantie ul.logo li  {
	background : #fff;
	line-height : 90px;
	float : left;
	margin : 2px 1px 2px 2px;
	padding : 0 2px;
}

#garantie ul.logo img {vertical-align : middle;}


#contact {
	background : #6a6a6b url(img/hotesse.jpg) no-repeat left 59px;
	border : 1px solid #fff;
	color : #fff;
	overflow: hidden;
}

#contact p.intro {
	margin : 20px;
	font-weight : bold;
	text-align : center;
}

#contact a {color : #f27900;}

#contact #coord {
	background : #fff;
	margin-left : 318px;
	padding : 20px 0;
	font-size : 1.2em;
	color : #6a6a6b;
}

#contact strong, #garantie strong, #mentions strong {color : #f27900;}

#contact #coord p {padding : 0 20px;}

#contact #maps {
	float : right;
	width : 348px;
	padding : 20px 0;
	background : #fff; 
	text-align : center;
	color : #6a6a6b;
}

#contact fieldset {
	margin-top : 20px;
	}

#contact iframe {
	width : 320px;
	height : 320px;
	border : 2px solid #9c9c9c;
}

#contact label {
	float : none;
	text-align : left;
}

#contact .text {
	width : 90%;
}

/* ---#navigation ------------------- */

#navigation div  {
	margin : 0 20px 20px 20px;
}

#cat {
	position : relative;
	height : 293px;
	font-size : 0.85em;
}

#cat ul {
	margin : 0;
	padding : 0;
}

#cat li  {
	background : none;
	margin : 0;
	padding : 0;
	display : inline;
}

#cat li a {
	display : block;
	text-decoration : none;
	font-weight : bold;
	margin : 0;
	padding : 10px 0 0 20px;
	background : transparent url(img/cat.png) no-repeat left bottom;
	border-bottom : 1px solid #6a6a6b;
	color : #fff;
}	

#cat li ul li {
	display : block;
	color : #9c9c9c;
}

#cat ul ul{
	margin-top : 2px;
	padding : 5px 5px 5px 20px;
	background : #6a6a6b;
	border : 1px solid #9c9c9c;
}

#cat li ul a {
	display : inline;
	background : none;
	padding : 0;
	border : 0px solid #000;
	color : #fff; 
}

#cat li ul a:hover, #cat li ul a:focus, #cat li ul a:active {
	background : none;
	padding : 0;
	border : 0px solid #000;
	text-align : left;
	color : #f27900;
}

#cat li a:hover, #cat li a:active, #cat li a:focus, #cat li.on  a {
	border-bottom : 1px solid #fff;
	padding : 10px 20px 0 0;
	color : #fff;
	background : transparent url(img/cat.png) no-repeat right bottom;
}

#form_login p.menu {
	display : inline;
	font-size : 0.9em;
}
#form_login p.menu  a{
	display : block;
	text-decoration : none;
	font-weight : bold;
	margin : 0;
	padding : 10px 0 0 0;
	border-bottom : 1px solid #6a6a6b;
	}

#form_login p.menu  a:hover, #form_login p.menu  a:active, #form_login p.menu  a:focus {border-bottom-color : #fff;}
#compte fieldset , #compte div {margin : 1em 5% 50px;}
#compte fieldset fieldset {margin-bottom : 1em;}

	
#panier {
	height : 80px;
	background : #fff url(img/panier.png) no-repeat right bottom;
	border : 1px solid #fff; 
	color : #6a6a6b;
}

#panier a {
	color : #6a6a6b;
}

#panier p {
	margin : 5px 25px 5px 5px;
	padding : 0;
}


/* --- balises ----------------------------------------- */

strong {color : #fff;}

/* ---Classes ----------------------------------------- */
.video {
	background : #fff;
	border : 5px solid #9c9c9c;
	padding : 1px;
	text-align : center;
}

.color , strong.color {color : #f27900;}

.error {
	color :#f27900;
	border-left : 3px solid #fff;
	padding : 10px 20px;
}

.c_error {
	display : block;
	font-size : 0.9em;
	font-weight : bold;
	color : #f60;
}

.pagination  {text-align : right;}	
.column2 {
	float : left;
	width : 45%;
	margin : 0 5% 5% 0;
}

.clear {clear : both;}


/* --- Classes catalogue -------------------------------- */

dl.catalogue , dl.fiche  {
	overflow : hidden;
	margin : 20px 0 0;
	padding : 0;
	background : #fff; 
	border : 1px solid #fff;	
	color : #6a6a6b;
}

dl.catalogue a, dl.fiche a {color : #f27900;}
dd.ref a {color : #fff;}
dd.ref a:hover, dd.ref a:active, dd.ref a:focus {color : #f27900;}

dl.catalogue dd , dl.fiche dd {
	margin : 0 0 0 340px;
	padding : 1em 20px 0.5em;
	background : #fff;
}

dl.fiche dt.ref, dl.catalogue dd.ref {
	padding : 0.5em 20px;
	background : #6a6a6b; 
	font-weight : bold;
	font-size : 1.3em;
	text-align : right;
	color : #fff;
}

dl.catalogue dt, dl.fiche dt {
	padding : 0 0.5em;
	color : #6a6a6b;
	background : #eee;
	font-weight : bold;
	font-size : 1.5em;
}

.ref h3 {
	margin: 0; 
	padding : 0;
	background : none;
	border : 0px solid #fff;
	font-size : 1em;
}

dl.catalogue dd.photo, dl.fiche dd.spec {
	float : left;
	width : 340px;
}

dl.fiche dd.spec {padding : 0;}

dl.catalogue dd.photo, dl.fiche p.photo {
	background : #6a6a6b url(img/coin_bas.png) no-repeat bottom right; 
	margin : 0px;
	padding : 20px 0;
	text-align : center;
	color : #fff;
}

.photo img {cursor : pointer;}
dd.spec p {margin : 1em;}
dd.spec h3 {margin-right : 0.5em;}

dl.catalogue dd.description , dl.fiche dd.description {	
	background : #fff url(img/coin.png) no-repeat top left;
	padding-top : 1em;
}

dd.options {
	clear : both;
	margin : 0 20px;
	padding : 0;
	border-top : 1px dotted #9c9c9c;
}

dl.catalogue dd.clear  {
	margin : 0;
	padding : 20px 0;
	text-align : center;
}

dl.catalogue .video {
	width : 400px;
	margin : 0px auto;
}

dl.catalogue label, dl.fiche label {
	float : none;
	display : inline;
	color : #f27900;
}

dl.catalogue p.navigation {
	text-align : right;
	margin-top : 1em;
}

dl.catalogue dd.options, dl.fiche dd.options, dl.catalogue  dd.pv, dl.fiche  dd.pv, dl.fiche dd.spec {margin : 0;}
dl.catalogue  dd.pv, dl.fiche  dd.pv {clear : both;}

dl.catalogue  dd.pv, dl.fiche  dd.pv, dd.options p.pv  {
	font-weight : bold;
	text-align : right;
}
	
dl.catalogue  dd.pv, dl.fiche  dd.pv {
	font-size : 1.3em;
	color : #f27900;
}

dd.options p.pv {
	color : #f27900;
	font-size : 1.1em;
}

.pv span {
	font-size : 0.95em;
	font-variant : small-caps;
}

p.panier {
	text-align : right;
	margin : 0;
	padding : 0;
}

p.panier  input.submit {
	height : 43px;
	padding-right : 35px;
	background : #c60 url(img/panier.png) no-repeat right center;
	border-color : #fff;
}

p.panier  input.submit:hover, p.panier  input.submit:focus, p.panier  input.submit:active {
	background-color : #fff;
	border-color : #6a6a6b; 
	color : #6a6a6b;
}

dd.photo a, p.photo a {color : #fff; border : 0px solid #fff;}

/* --- Detail Panier -------------------------------------- */

caption {background : #c60; color : #fff;}
th {border : 1px solid #fff;}
.ligne1, .ligne1 input {background : #bbb; color : #000;}
.ligne2, .ligne2 input {background : #fff; color : #000;}
tr.tht {background : #6a6a6b; color : #fff;}
tr.ttc {background : #c60; color : #fff;}

/* --- Formulaires -------------------------------------- */

input.text:focus, textarea:focus, #recherche input.text:focus {
	background : #fff;
	color : #6a6a6b;
	
}

#recherche label {
	float : none;
	margin : 0.2em 0;
	text-align : left;
	font-weight : bold;
	font-style : italic;
	color : #9c9c9c;
}
#recherche input.text {
	padding-left : 25px;
	width : 60%;
	background : #6a6a6b url(img/rechercher.png) no-repeat top left;
	color : #9c9c9c;
}

#form_login legend {margin-top : 1em;}
#form_login label {float : left;}
#form_login fieldset p {
	margin : 0;
	padding : 5px 0;
}
#form_login fieldset p.field {border-top : 1px solid #6a6a6b;}
#form_login p.button, #form_login p.field {text-align : right;}

#contact p.field label {width : 23%;}


.content fieldset {	border : 1px solid #6a6a6b;	color : #fff;}
.content fieldset fieldset {border : 1px dotted #6a6a6b;}

legend {
	color : #bbb;
	font-weight : bold;
	font-style : italic;
}

label {color : #fff;}

input.text, select, textarea {
	background : #6a6a6b; 
	border : 1px solid #9c9c9c;
	color : #fff;
}

input.submit , p.button a{
	background : #6a6a6b;
	border : 1px solid #9c9c9c;
	color : #fff;
}

input.submit:hover, input.submit:active, input.submit:focus, p.button a:hover, p.button a:active, p.button a:focus {
	background : #c60;
	border : 1px solid #fff;
	color : #fff;
}

span.note {color : #f27900;}