@charset "UTF-8";

/* CSS Tools: Reset CSS
Merci Eric Meyer!
http://meyerweb.com/eric/tools/css/reset/

v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent; }
	
body {
	line-height: 1; }
	
ol, ul {
	list-style: none; }
	
blockquote, q {
	quotes: none; }
	
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }

/* remember to define focus styles! */
:focus {
	outline: 0; }

/* remember to highlight inserts somehow! */

ins {
	text-decoration: none; }
del {
	text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */

table {
	border-collapse: collapse;
	border-spacing: 0; }


/* Structure 
=====================================================================*/


html { 
	text-align: left; 
}

body {  
	width: 100%;
	background-color: #000; 
	text-align: left;
	font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
	color: silver;
	font-weight: normal; 
}
	
body.accueil{
	background: #000 url(images/img_content.jpg) no-repeat 144px 430px;
}

body.contact_img{
	background: #000 url(images/002.jpg) no-repeat 430px 340px;
}
	
div#branding {
	position: relative;
	width: 100%;
	height: 150px;
	border-top: #ffd600 solid 22px;
	background: transparent url(images/brand_bottom2.gif) bottom repeat-x;
	margin-bottom: 20px; 
}
	
div#content_wrapper {
	width:960px; 
}

div#menu {
	position:relative;
	text-align:left; 
	float:left; 
	width: 290px;
	margin-top:13px; 
}	
	
div#content { 
    float:right;
	width: 670px; 
	min-height:480px;
	padding-top:10px;
}

#content img {
	margin:0 0 18px 0;
}

#content a img {
	border: 1px solid silver;
}

#content a:hover img {
	border: 1px solid #ffd600;
}
	
* html div#content {
  padding-bottom: 300px; 
}

div#site_info {
	clear:both; 
	width: 100%;
	border-top: #333 solid 1px;
	color:silver;
	margin:0 0 40px 0; 
}



		
		
/* typographie 
====================================================================*/


h1 {
	position: absolute;
	display:block;
	top:  30px;
	left: 271px;
	width: 310px;
	height: 74px;
	background: url(images/logo.jpg) no-repeat;
	text-indent: -8888px; 
}

h2 {
	font-size: 20px; 
	line-height: 24px; 
	margin-bottom: 10px; 
	color: #ffd600;
	letter-spacing: 0.07em; 
}

h3 {
	font-size: 16px; line-height: 18px; 
	margin-bottom: 10px; 
	letter-spacing :0.07em; }

p {
	font: 13px/20px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
	margin:10px 116px 0 0; }
	
p a {
	font: 13px/20px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
	color: silver;
}

p a:hover {
	text-decoration:none;
	color: #ffd600;
}


em {
	font-weight: normal;
	font-style: normal;
	color: #ffd600; 
}

#text_produits {
	margin:10px 116px 20px 0;
}

#last_marques{
	margin-top:30px;
}



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


div#menu li {
	margin-bottom: 1px;
	font-size:100%; 
}

#menu #listeproduits .sous_produit a {
     margin: 0 2px;
     width: 140px; 
     height: 20px;
     display: block;
     text-align: left;
     text-decoration: none;
     color: #000;
     background: #ffd600;
	 padding: 3px 3px 3px 20px; 
}
	 
#menu #listeproduits .sous_produit a:hover {
 	background: #fff; 
	color: #000;
}
	
#accueil a  { 
     background: url(images/menu_bg_haut.gif) no-repeat left bottom;
}
	 
#accueil a:hover {
     background: url(images/menu_haut_hover.gif) no-repeat left bottom;
	 color:#ffd600; 
}
	 
#contact a  { 
     background: url(images/menu_bg_bas.gif) no-repeat left bottom; 
}
	 
#contact a:hover{
     background: url(images/menu_bas_hover.gif) no-repeat left bottom;
	 color:#ffd600; 
}

#accueil a,
#produits a, 
#contact a {
     margin: 0 2px;
     width: 140px; 
     height: 20px;
     display: block;
     text-align: left;
     text-decoration: none;
     color: silver;
	 padding: 3px 3px 3px 20px;
}
	 
#produits a {
	background: #333; 
}
	 
#produits a:hover {
	background: #444;
	color:#ffd600; 
}
	 
#menu li.current a,
#menu li.current a:hover,
#menu li.current a:focus {
	color : #ffd600; 
}


/* Menu secondaire 
====================================================================*/

	 
.current_menu_sec{

	text-decoration: none;
	background: transparent url(images/brand_menu_over.gif) repeat-x;
}

#menu_sec ul {
	position:relative;
	top:131px;
	margin-left:587px;
	width: 260px;
	height:30px;
	font-size: 80%
}

#menu_sec ul li {
	display: inline;
}

#menu_sec ul li a {
	float: left;
	color: #000;
	padding: 2px 12px;
	text-decoration: none;
	font-weight:bold;
	border-left:solid #000 1px;
}

#last {	
    border-right:solid #000 1px;
}

#menu_sec ul li a:hover {
	color: #cc0000;
	text-decoration: none;
	background: url(images/brand_menu_over.gif) repeat-x;
}

/* Menu listes des marques 
====================================================================*/

#listemarques li.currentmarques a{
    text-decoration: none;
    color: #ffd600;
}

#listemarques {
	position: relative;
	font-size: 100%;
	margin:20px 0 20px 0;
	font-size: 110%
}

#listemarques li {
	display: inline;
}

#listemarques li a {
	color: silver;
	text-decoration: underline;
	padding: 2px 8px;
	font-weight:bold;
	border-left:solid #222 1px;
}

#last {	
    border-right:solid #222 1px;
}

#listemarques li a:hover {
	
	color: #ffd600;
	text-decoration: none;

}	 

/* contact
====================================================================*/


#adresse, #tel, #courriel {
	margin : 30px 0 20px 0;
	font: 13px/20px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
}
	
 #courriel a{ 
	color : silver;
	text-decoration : underline;
}
	
 #courriel a:hover{ 
	color : #ffd600;
	text-decoration: none; 
}
	
	
/* site_info
====================================================================*/



div#site_info ul {
	margin: 20px 0 0 290px;
	padding: 0 0 30px 0;
}
	
div#site_info a {
	color:silver; 
}

div#site_info a:hover {
	text-decoration: none;
	color: #ffd600; 
}


li.retour a {
	position:relative;
	display:block;
	margin-left:857px;
	top:-100px;
	width:80px;
	height:20px;
	padding : 5px 12px;
	background :  #999;
	text-decoration : none;
	list-style: none;
	color : #fff; 
}
	
li.retour a:hover {
	text-decoration : none;
	list-style: none;
	color : #000;
	background : #ffd600; 
}

a.lien_tapioca {
	position: relative;
	top: 10px;
	left: 290px;
	display: block;
	width: 120px; 
    height: 54px;
	background-image: url(images/tapioca.png);
	background-repeat: no-repeat; 
}

a.lien_tapioca:hover {
	background-image: url(images/tapioca.png);
	background-repeat: no-repeat; 
}

p#tapioca{
	position: relative;
	top: 10px;
	left: 290px;
	display: block;
	width: 120px; 
    height: 12px;
	font: 10px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
	color: #555;
	
}

	
/* tableaux php
====================================================================*/

	
table {
	margin : 0 0 40px 0;
	border-collapse : collapse; 
}
	
td {
	text-align : left;
	border : #222 solid 1px;
	border-bottom :#333 solid 2px;
	padding : 4px 8px;
	vertical-align : top;
}
	
.titre{
	text-align:left;
	color : #ffd600;
	letter-spacing: 1px;
	padding : 12px 0 12px 0;
	margin:10px  0 10px 0;
	border-top :#ffd600 solid 1px;
	border-bottom :#ffd600 solid 1px;
}	
	
	
	
	









/* FIN CSS 
====================================================================*/