/**
*	Style JCL Lighting
*	Didier Ciochetto - Technimédia
*/

html
{
	background: black url('html.png') no-repeat center 30px;
	font-family: Arial, sans-serif;
	font-size: 9pt;
	color: black;
	padding-top: 10px;
}

body
{
	width: 800px;
	margin: 0 auto 20px;
	background: #E5E5E5 url('body.png') repeat-y 25px top;
	padding: 214px 25px 0;
	position: relative;
}

p, ul
{
	margin: 5px 25px;
	padding: 5px;
	text-align: justify;
}

h1
{
	background: url('h1.png') no-repeat;
	width: 783px;
	_width: 782px;
	height: 24px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 14pt;
	color: white;
	padding: 10px;
	margin: 0 -1px;
}

h2
{
	background: url('h2.png') no-repeat;
	width: 782px;
	height: 26px;
	font-size: 10pt;
	padding: 9px;
	margin: 0;
}

h3
{
	height: 29px;
	padding: 10px 0 0;
	margin: 0 0 -5px;
	font-size: 10pt;
}

a
{
	color: #808080;
}
a:hover
{
	color: white;
}

a img
{
	border: none;
}

hr
{
	clear: both;
	margin: 0 1em;
}


/**
 *	Positionnement du menu et des élements de déco.
 */

table.menu
{
	position: absolute;
	top: 167px;
	left: 25px;
	width: 800px;
	background: url('menu.png') ;
	font-size: 1em;
}
table.menu td a
{
	display: block;
	width: 133px;
	height: 23px;
	text-align: center;
	padding-top: 8px;
	color: black;
	text-decoration: none;
	background: none; /* Pour IE6, mais je le met pour tous. */
}
table.menu td a:hover
{
	background-image: url('menu-hover.png');
	color: white;
}
table.menu td a.actif, table.menu td a.actif:hover
{
	background-image: url('menu-actif.png');
	color: black;
}

div.déco-haut
{
	position: absolute;
	top: 0;
	left: 0;
	width: 850px;
	height: 214px;
	background: #ccc url('haut.png') no-repeat top;
}

/* Logo */
p.jcl
{
	position: absolute;
	top: 30px;
	left: 25px;
	margin: 0;
	padding: 0;
}

p.accès
{
	position: absolute;
	top: 30px;
	right: 25px;
	margin: 0;
	padding: 0;
}

p.accès a, p.accès a span
{
	display: block;
	width: 120px;
}
p.accès a
{
	color: #3CD200;
	padding: 6px 0 0 40px;
	text-decoration: none;
}
p.accès a span
{
	color: #808080;
}
p.accès a.client
{
	background: url('lien-client.png') no-repeat top left;
}
p.accès a.actu
{
	background: url('lien-actu.png') no-repeat top left;	
}

/* Fin du cadre du contenu principal. */
p.déco-bas
{
	clear: both;
	position: relative;
	left: -25px;
	width: 850px;
	height: 20px;
	background: black url('bas.png') no-repeat top;
	color: #8C8C8C;
	text-align: center;
	font-size: 8pt;
	margin: 0 0 20px;
	padding: 26px 0 0;
}
p.déco-bas a
{
	color: #8C8C8C;
	text-decoration: none;
}
p.déco-bas a:hover
{
	text-decoration: underline;
}


/**
 *	Produit
 */

div.detail
{
	margin: 0 0 0 2px;
	background: url('detail.png') repeat-x top;
}

.detail h3
{
	float: left;
	width: 250px;
	height: 33px;
	padding: 10px 0 0 80px;
	margin: 0;
}

.detail h2
{
	float: left;
	width: 295px;
	height: 19px;
	background: url('detail-nom.png') no-repeat;
	padding: 8px 0;
	color: white;
	text-align: center;
}

.detail .description
{
	background: white url('detail-description.png') repeat-x bottom;
	margin: -5px 0 0;
	min-height: 370px;
	width: 330px;
}

.detail .description p
{
	margin-left: 15px;
	margin-right: 15px;
}

.detail a
{
	color: black;
}
.detail a:hover
{
	color: white;
}


table.p, p.p /* table changé pour p. */
{
	position:absolute;
	right: 25px;
	top: 293px;
	width: 458px;
	height: 341px;
	margin: 0;
	background: url('detail-images.png') no-repeat;
	z-index: 3;
}
/*
table.p td.p1
{
	width: 206px;
	padding-left: 36px;
}
table.p td.p2
{
	width: 132px;
	height: 150px;
	padding-top: 38px;
}
table.p td.p3
{
	padding-top: 6px;
}
*/

p.p img.p1
{
	position: absolute;
	top: 38px;
	left: 36px;
}
p.p img.p2
{
	position: absolute;
	top: 37px;
	right: 32px;
}
p.p img.p3
{
	position: absolute;
	bottom: 49px;
	right: 32px;
}

img.lreal
{
	position:absolute;
	right:40px;
	z-index: 2;
}


/**
 *	Gamme
 */

body.gamme h3
{
	width: 330px;
	height: 34px;
	padding: 5px 1px 1px;
	margin: 2px 10px;
}
body.gamme h3 a
{
	display: block;
	width: 291px;
	height: 28px;
	padding: 10px 1px 1px 40px;
	color: #8C8C8C;
	background-repeat: no-repeat;
	text-decoration: none;
}
body.gamme h3 a:hover
{
	background-position: -332px 0;
	color: #ccc;
	padding-left: 65px;
	width: 266px;
}

table.h2
{
	background: url('h2.png') no-repeat;
	width: 100%;
	height: 41px;
}
table.h2 td
{
	width: 118px;
	vertical-align: top;
}
table.h2 td a
{
	display: block;
	width: 118px;
	height: 23px;
	text-align: center;
	padding-top: 8px;
	color: black;
	text-decoration: none;
}
table.h2 td a:hover
{
	background: url('gamme-menu-hover.png');
	color: white;
}

table.h2 td a.actif
{
	background: url('gamme-menu-actif.png');
	color: black;
}


table.gammes-choix
{
	margin: auto;
}

table.gamme-choix td
{
	text-align: center;
}


/* La liste des produits avec les miniatures. */
.liste-produits
{
	float: right;
	width: 431px;
	margin: 5px;
	margin-top: -51px;
}
.liste-produits h2
{
	background: url('gamme-titre.png') no-repeat 1px top;
	text-align: center;
	color: white;
	height: 34px;
	width: 100%;
	padding: 20px 0 0;
	margin: 0;
}
.liste-produits table
{
	background: #E6E6E6 url('gamme-fond.png') repeat-y;
	padding: 15px;
	margin: 0;
	width: 100%;
}
.liste-produits table td
{
	text-align: center;
	vertical-align: bottom;
	width: 33%; /* Sans largeur le :hover en gras fait décaler. */
}

.liste-produits .bas
{
	background: url('gamme-bas.png') no-repeat 1px top;
	height: 54px;
}

.liste-produits a
{
	text-decoration: none;
}
.liste-produits a:hover
{
	color: black;
	font-weight: bold;
}

.liste-produits a span.cache
{
	display:block;
	position: relative;
	z-index: 2;
	background-color:#666;
	opacity: 0.5;
	width: 91px;
	height: 91px;
	margin-top: -115px;
	margin-left: 19px;
	visibility: visible;
}
.liste-produits a:hover span.cache
{
	visibility: hidden;
}



/**
 *	Réalisations
 */

div.g
{
	width: 298px;
	background-color: black;
	color: #ccc;
	margin: 10px;
}
div.g .haut
{
	background: url('real-g-haut.png') no-repeat;
	width: 298px;
	height: 30px;
}
div.g .bas
{
	background: url('real-g-bas.png') no-repeat bottom;
	width: 298px;
	height: 20px;
}

div.g select
{
	width: 166px;
}

div.g ul
{
	margin-left: 45px;
}

div.d
{
	float: right;
	width: 466px;
	background-color: black;
	color: #ccc;
	margin: 10px;
}
div.d .haut
{
	background: url('real-d-haut.png') no-repeat;
	width: 466px;
	height: 30px;
}
div.d .bas
{
	background: url('real-d-bas.png') no-repeat bottom;
	width: 466px;
	height: 20px;
}
div.d p#real
{
	text-align: center;
	margin: 5px;
}
div.d p#real img
{
	width: 430px;
	height: 322px;
}
div.d p#mini
{
	margin: 0 0 0 -6px;
}
div.d p#mini img
{
	margin: 5px 0 5px 19px;
	cursor: pointer;
}

/* Liste de produits sous les listes déroulantes. */
ul.g
{
	display: none;
	/* Avant fait en Javasript, mais fait apparaitre les listes une petite seconde.
	Donc je les cache direct, mais du coup plus accessible. */
}


/**
 *	Services
 */

div.services-d
{
	float:right;
	background: black url('services-haut.png') no-repeat top;
	margin: 0 25px;
	width:267px;
	text-align: center;
	color: white;
}
div.services-d h3
{
	color: white;
	font-weight: normal;
}
div.services-d table
{
	margin: 5px auto;
	text-align: left;
}
div.services-d button, form.identification button, form.fiche button
{
	border: none;
	background: none;
}


/**
 *	Identification
 */

form.identification p
{
	width: 400px;
	margin: auto;
	text-align: right;
	line-height: 3em;
}
form.fiche fieldset
{
	margin: 2px 3%;
}
form.fiche fieldset p
{
	text-align: right;
}


/**
 *	Contact
 */

p.contact
{
	background: url('contact-large.png') no-repeat center top;
	color: white;
	text-align: center;
	padding-top: 10px;
}

table.contact
{
	margin: auto;
}
table.contact td
{
	background: #999 url('contact-haut.png') no-repeat top;
	width: 175px;
	text-align: center;
	color: white;
	padding-top: 10px;
	vertical-align: top;
}
table.contact td a
{
	color: #ccc;
	text-decoration: none;
}
table.contact td a:hover
{
	color: #3CD200;
}
table.contact td a span
{
	display:block;
	background-color:#333;
	padding: 5px;
}

a.contact-formulaire
{
	display : block;
	background: url('contact-formulaire.png') no-repeat 35px 30px;
}
a.contact-formulaire:hover
{
	background: url('contact-formulaire-hover.png') no-repeat 35px 30px;
}
a.contact-1
{
	display : block;
	background: url('contact-1.png') no-repeat 35px 30px;
}
a.contact-1:hover
{
	background: url('contact-1-hover.png') no-repeat 35px 30px;
}
a.contact-2
{
	display : block;
	background: url('contact-2.png') no-repeat 35px 30px;
}
a.contact-2:hover
{
	background: url('contact-2-hover.png') no-repeat 35px 30px;
}
a.contact-3
{
	display : block;
	background: url('contact-3.png') no-repeat 35px 30px;
}
a.contact-3:hover
{
	background: url('contact-3-hover.png') no-repeat 35px 30px;
}
a.contact-export
{
	display : block;
	background: url('contact-export.png') no-repeat 35px 30px;
}
a.contact-export:hover
{
	background: url('contact-export-hover.png') no-repeat 35px 30px;
}

/**
 *	Autres
 */

a.cgv
{
	display: block;
	padding: 7px 0 0 210px;
	height: 32px;
	background: url('cgv.png') no-repeat;
	text-decoration: none;
}
a.cgv:hover
{
	background: url('cgv-hover.png') no-repeat;
}