/*
Titre:      CSS : http://www.mdtrading.fr
Auteur:     Remy Grauwin - contact@arsiteo.com
*/


/* --- RESET --- */

* {
	margin: 0;
	padding: 0;
	}


p   {
	margin: 0;
	padding: 0
	}

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

li       {
	list-style: none;
	margin: 0;
	padding: 0;
	}

/* --- STRUCTURE --- */

body   {
	color: #000;
	font-size: 12px;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	line-height: 14px;
	background: #b21212 url("images/structure/lame-fond.jpg") repeat-x center top
	}



#metacontainer  {
	margin: 0 auto;
	width: 978px;
	height: auto
	}


	
#container  {
	position: relative;
	width: 978px;
	height: auto
	}


#entete   {
	background-repeat: no-repeat;
	background-position: left bottom;
	position: relative;
	width: 978px;
	height: 268px
	}



#logo   {
	background-image: url("images/structure/logo.png");
	background-repeat: no-repeat;
	background-position: left top;
	position: relative;
	width: 978px;
	height: 109px
	}



#contenu    {
	background-image: url("images/structure/fond-contenu.png");
	background-repeat: repeat-y;
	background-attachment: scroll;
	background-position: left top;
	position: relative;
	width: 978px;
	height: auto
	}




#pied   {
	color: #fff;
	font-size: 12px;
	background-image: url("images/structure/fond-pied.png");
	background-position: left top;
	position: relative;
	width: 978px;
	height: 179px
	}



#copyright-electris   {
	color: #ccc;
	font-size: 11px;
	text-align: left;
	margin-top: 12px;
	margin-left: 30px;
	width: 400px;
	height: 20px;
	float: left
	}



#mentions   {
	color: #ccc;
	font-size: 11px;
	text-align: right;
	margin-top: 12px;
	margin-right: 30px;
	width: 400px;
	height: 20px;
	float: right
	}


/* --- LOGO retour Accueil --- */
h1   {
	padding: 0;
	text-indent: -9999px;
	width: 460px;
	height: 108px
	}

h1 a {
	text-decoration: none;
	display: block;
	width: 460px;
	height: 108px
	}
	
/* --- rollover retour Accueil --- */	
h1 a span      {
	display: none;
	width: 23px;
	height: 23px
	}

		
h1 a:hover  span      {
	background-image: url("images/structure/home.gif");
	background-repeat: no-repeat;
	display: block;
	position: relative;
	z-index: 10;
	top: 66px;
	left: 0;
	width: 23px;
	height: 23px
	}




/* --- CONTACT --- */
#contact              {
	color: #000;
	font-size: 13px;
	font-weight: bold;
	text-align: right;
	position: absolute;
	top: 70px;
	right: 22px;
	width: 180px;
	height: 20px
	}


#contact  a, #contact a:visited   {
	color: #000;
	text-decoration: none
	}



#contact a:hover     {
	color: #fff;
	text-decoration: none
	}



	
/* --- MENU --- */

/* --- MENU HAUT --- */
#menu-haut           {
	width: 978px;
	height: 85px
	}

#menu-haut li       {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 85px
	}
	
#menu-haut a     {
	float: left;
	text-indent: -9999px
	}


/* --- Nouveautés --- */
#menu-nouveautes a   {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 201px;
	height: 85px
	}

#menu-nouveautes a:hover, #menu-nouveautes a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: 0 -159px;
	width: 201px;
	height: 85px
	}
	
	
/* --- Surveillances et Protection --- */
#menu-surveillance a    {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -201px 0;
	width: 192px;
	height: 85px
	}

#menu-surveillance a:hover, #menu-surveillance a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -201px -159px;
	width: 192px;
	height: 85px
	}


/* --- Ecalirage à économie d'énergie --- */
#menu-eclairage-eco a    {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -393px 0;
	width: 192px;
	height: 85px
	}

#menu-eclairage-eco a:hover, #menu-eclairage-eco a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -393px -159px;
	width: 192px;
	height: 85px
	}

	
/* --- Eclairage à LEDS --- */
#menu-eclairage-leds a     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -585px 0;
	width: 192px;
	height: 85px
	}

#menu-eclairage-leds a:hover, #menu-eclairage-leds a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -585px -159px;
	width: 192px;
	height: 85px
	}
	
	
/* --- Eclairage décoratif et extérieur --- */
#menu-eclairage-deco a     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -777px 0;
	width: 201px;
	height: 85px
	}

#menu-eclairage-deco a:hover, #menu-eclairage-deco a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -777px -159px;
	width: 201px;
	height: 85px
	}
	


/* --- MENU BAS --- */
#menu-bas          {
	width: 978px;
	height: 74px
	}

#menu-bas li       {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 74px
	}
	
#menu-bas a     {
	float: left;
	text-indent: -9999px
	}
	

/* --- Outillage --- */
#menu-outillage a    {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: 0 -85px;
	width: 201px;
	height: 74px
	}

#menu-outillage a:hover, #menu-outillage a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: 0 -244px;
	width: 201px;
	height: 74px
	}
	
	
/* --- Accessoires automobile --- */
#menu-accessoires a    {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -201px -85px;
	width: 192px;
	height: 74px
	}

#menu-accessoires a:hover, #menu-accessoires a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -201px -244px;
	width: 192px;
	height: 74px
	}


/* --- Produits solaires et d'alimentation --- */
#menu-solaire-alim a     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -393px -85px;
	width: 192px;
	height: 74px
	}

#menu-solaire-alim a:hover, #menu-solaire-alim a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -393px -244px;
	width: 192px;
	height: 74px
	}
	
	
/* --- Confort de la maison --- */
#menu-confort a     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -585px -85px;
	width: 192px;
	height: 74px
	}

#menu-confort a:hover, #menu-confort a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -585px -244px;
	width: 192px;
	height: 74px
	}


/* --- Multiprises --- */
#menu-multiprises a    {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -777px -85px;
	width: 201px;
	height: 74px
	}

#menu-multiprises a:hover, #menu-multiprises a.active     {
	background-image: url("images/structure/menu.png");
	background-repeat: no-repeat;
	background-position: -777px -244px;
	width: 201px;
	height: 74px
	}	
	
/* --- CONTENU --- */

	
	
#haut-contenu           {
	background: url("images/structure/haut-contenu.png") repeat-y left top;
	position: relative;
	width: 978px;
	height: 40px
	}





#editorial       {
	background-image: url("images/editorial/logo-npdc.gif");
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 35px;
	position: relative;
	width: 916px;
	height: auto
	}
	
	
#editorial-mentions        {
	font-size: 12px;
	line-height: 16px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 35px;
	position: relative;
	width: 916px;
	height: auto
	}



h2       {
	color: #000;
	font-size: 22px;
	margin-bottom: 20px
	}

h3       {
	color: #000;
	font-size: 14px;
	margin-top: 20px
	}


#editorial dt         {
	color: #b21212;
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 6px;
	}



#editorial dd       {
	font-size: 14px;
	line-height: 18px;
	}


#entrepot        {
	margin-bottom: 60px;
	margin-left: 12px;
	float: right
	}



#editorial a         {
	color: #b21212;
	text-decoration: none
	}



#editorial a:hover, #editorial a.active           {
	color: #000;
	text-decoration: none
	}

	



/* --- titre nouveautés --- */
.titre-rub-nouveautes     {
	color: #000;
	font-size: 24px;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	margin-bottom: 18px;
	margin-left: 32px;
	}
	
	
.titre-rub-nouveautes a       {
	color: #000;
	text-decoration: none
	}


	
.titre-rub-nouveautes a:hover,.titre-rub-nouveautes a.active         {
	color: #8cbc40;
	text-decoration: none
	}	

	
/* --- Linéaires --- */
.lineaire       {
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 35px;
	position: relative;
	width: 960px;
	height: 260px
	}



.presentoir-gauche          {
	background-image: url("images/structure/fond-presentoir.png");
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	left: 23px;
	width: 458px;
	height: 260px
	}



.presentoir-droit          {
	background-image: url("images/structure/fond-presentoir.png");
	background-repeat: no-repeat;
	background-position: left top;
	margin-left: 488px;
	position: relative;
	width: 458px;
	height: 260px
	}



div.presentoir-gauche img,   div.presentoir-droit img          {
	display: block;
	position: relative;
	top: 22px;
	left: 32px;
	width: 385px;
	height: 175px;
	}
	

/* --- Présentoir large --- */	
div.presentoir-large          {
	background-image: url("images/structure/fond-presentoir-large.png");
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	left: 23px;
	width: 922px;
	height: 260px
	}
	
	
div.presentoir-large img         {
	display: block;
	position: relative;
	top: 22px;
	left: 32px;
	width: 800px;
	height: 175px;
	}

div.presentoir-large ul.description           {
	position: relative;
	top: 48px;
	left: 10px;
	width: 905px;
	height: 22px
	}


/* --- Ligne de description produit + pdf --- */
ul.description           {
	position: relative;
	top: 48px;
	left: 10px;
	width: 440px;
	height: 22px
	}



ul.description li     {
	display: inline;
	height: 22px
	}

li.ref          {
	width: 300px;
	height: 22px
	}



li.ref span           {
	color: #06c
	}


li.ref span.separateur          {
	color: #ccc
	}

	


li.pdf              {
	color: #999;
	position: absolute;
	top: 0;
	right: 10px;
	width: 22px;
	height: 22px
	}





li.pdf a      {
	text-decoration: none;
	background-image: url("images/structure/icone-pdf.gif");
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	display: block;
	width: 22px;
	height: 22px
	}







/* --- PIED --- */

#pied a      {
	color: #fff;
	text-decoration: none;
	margin-right: 15px
	}


#pied a:hover, #pied a.active           {
	color: #e7e7e7;
	text-decoration: none;
	margin-right: 15px
	}



#pied-haut, #pied-bas               {
	margin: 0 auto;
	padding-top: 25px;
	width: 910px;
	height: 30px;
	border-bottom: 1px solid #caba93
	}


#pied-haut li, #pied-bas li          {
	background-color: #663;
	list-style: none;
	display: inline;
	margin: 0;
	padding: 0;
	height: 85px;
	}
	
	
#pied-haut a, #pied-bas a      {
	background-image: url("images/structure/pastille-haut.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 22px;
	float: left;
	}
	
	
#pied-bas               {
	padding-top: 20px;
	border-bottom: 1px solid #e6dbc0
	}



/* --- MENTIONS --- */

#mentions a, #mentions a:visited      {
	color: #d6d5d5;
	text-decoration: none
	}


#mentions a:hover   {
	color: #fff;
	text-decoration: none
	}





/* --- Sticker CGV --- */
#cgv               {
	margin-top: 16px;
	margin-left: 32px;
	width: 206px;
	height: 31px
	}


#cgv a     {
	background-image: url("images/structure/cgv.gif");
	background-repeat: no-repeat;
	background-position: left top;
	text-decoration: none;
	text-indent: -9999px;
	display: block;
	width: 206px;
	height: 31px
	}




/* --- BANDEAU de DISPONIBILITE DES PRODUITS --- */
.dispo             {
	font-size: 11px;
	background-color: #ff0;
	padding: 2px;
	position: absolute;
	top: 200px;
	left: 10px;
	border: solid 1px #999
	}



/* --- PAGINATION --- */
.pagination         {
	color: #000;
	font-size: 14px;
	text-align: right;
	margin-right: 26px;
	padding-bottom: 12px;
	position: relative
	}




.pagination a           {
	color: #000;
	text-decoration: none;
	margin-right: 5px;
	padding: 1px 2px;
	border: solid 1px
	}






.pagination a:hover, .pagination a.encours          {
	color: #fff;
	text-decoration: none;
	background-color: #000;
	border: solid 1px #000
	}