/***************************************************
	REDEFINITION DE BALISES
***************************************************/

* {
	margin: 0;
	padding: 0;
}

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 18px;
}

body { 
	background: url(images/fond.gif) #3a3e3f repeat-x center top; 
	margin: 0 auto;
	width: 1000px;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #454545;
	outline: none;
}

:focus {
	-moz-outline-style: none;
}

p a { 
	color: #9e1f1f; 
}

a:hover {
	color: #ff6600;
}

img {
	border: 0;
}

p {
	margin-bottom: 5px;
	text-align: justify;
}

ul {
	list-style: none;
}

p span, li span {
	color: #FFCC00;
}

h4 {
	font-weight: bold;
	font-family: verdana;
	font-size: 10px;
	margin-top: 10px;
}

/***************************************************
	CONTENEURS
***************************************************/

div#conteneur { 
	position: absolute;
	width: 1000px;
	height: 595px;
	top: 15px;
	background: url(images/fond_site.gif) no-repeat center 35px;
}

div#centre {
	position: absolute;
	width: 970px;
	height: 480px;
	left: 15px;
	top: 50px;
}

div#header a {
	display: block;
	position: absolute;
	width: 124px;
	height: 26px;
	left: 52px;
	top: 1px;
	text-indent: -3000px;
	background: url(images/logo.gif) no-repeat 0 -26px;
}
div#header a:hover { background-position: 0 0; }

div#coordonnees {
	position: absolute;
	width: 459px;
	height: 31px;
	left: 36px;
	top: 550px;
	font-size: 0;
	text-indent: -3000px;
}

ul#adresse {
	width: 362px;
	height: 31px;
	float: left;
	background: url(images/adresse.gif);
	font-size: 0;
	text-indent: -3000px;
}

ul#adresse li, a#stan span {
	display: none;
}

a#contactCredits {
	display: block;
	float: left;
	width: 96px;
	height: 31px;
	text-indent: -3000px;
	color: #3a3e3f;
	font-size: 0;
	background: url(images/contact.gif) no-repeat top left;
}
a#contactCredits:hover { background-position: 0 -31px; color: #3a3e3f; }

a#stan {
	display: block;
	position: absolute;
	width: 125px;
	height: 13px;
	left: 839px;
	top: 550px;
	text-indent: -3000px;
	background: url(images/stanley-leroux.gif) no-repeat top left;
}
a#stan:hover { background-position: 0 -13px; }

/***************************************************
	MENU
***************************************************/

ul#menu {
	position: absolute;
	width: 378px;
	height: 17px;
	top: 10px;
	left: 587px;
	text-indent: -3000px;
}

ul#menu li { 
	float: left; 
}

ul#menu li a {	
	display: block;
	height: 17px;
	text-indent: -3000px;
}

li#m1 { width: 46px; background: url(images/menu.gif) 0 0; }
li#m2 { width: 70px; background: url(images/menu.gif) -46px 0; }
li#m3 { width: 73px; background: url(images/menu.gif) -116px 0; }
li#m4 { width: 64px; background: url(images/menu.gif) -189px 0; }
li#m6 { width: 66px; background: url(images/menu.gif) -255px 0; }
li#m7 { width: 59px; background: url(images/menu.gif) -320px 0; }

li#m1 a:hover { background: url(images/menu.gif) 0 -17px; }
li#m2 a:hover { background: url(images/menu.gif) -46px -17px; }
li#m3 a:hover { background: url(images/menu.gif) -116px -17px; }
li#m4 a:hover { background: url(images/menu.gif) -189px -17px; }
li#m6 a:hover { background: url(images/menu.gif) -255px -17px; }
li#m7 a:hover { background: url(images/menu.gif) -320px -17px; }

li#m1on { width: 46px; background: url(images/menu.gif) 0 -17px; }
li#m2on { width: 70px; background: url(images/menu.gif) -46px -17px; }
li#m3on { width: 73px; background: url(images/menu.gif) -116px -17px; }
li#m4on { width: 64px; background: url(images/menu.gif) -189px -17px; }
li#m6on { width: 66px; background: url(images/menu.gif) -255px -17px; }
li#m7on { width: 59px; background: url(images/menu.gif) -320px -17px; }

/***************************************************
	SOUS-MENU
***************************************************/

ul#smenu {
	position: absolute;
	width: 770px;
	height: 33px;
	left: 200px;
	top: 0;
	background: url(images/haut.png);
	text-align: right;
}

ul#smenu li {
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 34px;
	padding: 0 5px 0 5px;
	border-right: 1px solid #FFFFFF;
}

ul#smenu li.on a { 
	color: #FF7200; 
}

ul#smenu li.last { 
	border-right: 0; 
	padding-right: 28px;
}

ul#smenu li a {
	color: #FFFFFF;
}

ul#smenu li a:hover {
	color: #FF7200;
}

/***************************************************
	SOUS-MENU DU BAS DE PAGE
***************************************************/

ul#smenuBas {
	padding-top: 30px;
}

ul#smenuBas li {
	display: inline;
	padding: 0 5px 0 5px;
	font-weight: bold;
	border-left: 1px solid #454545;
}

ul#smenuBas li.first { 
	padding-left: 0;
	border-left: 0;
}

ul#smenuBas li a {
	color: #454545;
}

ul#smenuBas li a:hover {
	color: #ff6600;
}

/***************************************************
	CONTENU COMMUN A TOUTES LES PAGES
***************************************************/

div#centre h1 {
	position: absolute;
	width: 200px;
	height: 33px;
	left: 0;
	top: 0;
	text-indent: -3000px;
}

div#gauche {
	position: absolute;
	width: 485px;
	height: 447px;
	left: 0;
	top: 33px;
	color: #FFFFFF;
}

div#droite {
	position: absolute;
	width: 485px;
	height: 447px;
	left: 485px;
	top: 33px;
}

div#centre h2 {
	display: none;
}

/***************************************************
	GESTION DU ZOOM PHOTO
***************************************************/

div#bigPhoto {
	display: none;
}

div#bigPhoto div#photoBig {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

div#bigPhoto img {
	padding: 11px;
	background: #FFFFFF;
	margin-top: 15px;
}

div#bigPhoto div#noir {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	filter:alpha(opacity=65);
	opacity: 0.65;
	-moz-opacity: 0.65;
	-khtml-opacity: 0.65;
}

/***************************************************
	PEINTURE SUR CASQUE
***************************************************/

div#centre.peinture h1 {
	background: url(images/titre_peinture.png);
}

div#centre.peinture #gauche {
	background: url(images/milieu_peinture.jpg);
}

div#centre.peinture #droite {
	background: url(images/milieu_peinture.png);
}

div#centre.peinture h3 {
	width: 390px;
	height: 15px;
	text-indent: -3000px;
	background-repeat: no-repeat;
	background-position: bottom left;
	padding-top: 25px;
}

div#centre.peinture h3#pasCasque {
	background-image: url(images/stitre_pas_casque.gif);
}

div#centre.peinture h3#dejaCasque {
	background-image: url(images/stitre_deja_casque.gif);
}

div#centre.peinture #gauche p {
	position: absolute;
	width: 345px;
	height: 120px;
	left: 97px;
	top: 280px;
}

div#centre.peinture #droite div {
	width: 390px;
	height: 290px;
	margin: 105px 0 0 56px;
}

div#centre.peinture li#boutonFiches {
	border: 0;
}

div#centre.peinture li#boutonFiches a {
	display: block;
	position: absolute;
	width: 190px;
	height: 95px;
	right: 0;
	bottom: 0;
	text-indent: -3000px;
	background: url(images/bouton_fiches.jpg) no-repeat top right;
}

div#centre.peinture li#boutonFiches a:hover {
	background-position: 0 -95px;
}

/***************************************************
	TARIFS
***************************************************/

div#centre.tarifs h1 {
	background: url(images/titre_peinture.png);
}

div#centre.tarifs #gauche {
	background: url(images/milieu_tarifs.jpg);
}

div#centre.tarifs #droite {
	background: url(images/milieu_tarifs.png);
}

div#centre.tarifs #gauche p {
	position: absolute;
	width: 390px;
	height: 120px;
	left: 75px;
	top: 285px;
}

div#centre.tarifs #droite div {
	width: 390px;
	height: 290px;
	margin: 75px 0 0 56px;
}

div#centre.tarifs #droite p {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
}

div#centre.tarifs #droite span {
	color: #ff7200;
	font-weight: normal;
}

div#centre.tarifs #droite strong {
	color: #ff7200;
	font-weight: bold;
}

div#centre.tarifs #smenuBas {
	padding: 20px 0 0 65px;
}

/***************************************************
	MAKING OF
***************************************************/

div#centre.making h1 {
	background: url(images/titre_peinture.png);
}

div#centre.making #gauche {
	background: url(images/milieu_makingof.jpg);
}
div#centre.making .making2#gauche {
	background: url(images/milieu_makingof2.jpg);
}
div#centre.making .making3#gauche {
	background: url(images/milieu_makingof3.jpg);
}

div#centre.making #droite {
	background: url(images/milieu_makingof.png);
}

.makingofCasque {
	position: absolute;
	width: 440px;
	height: 310px;
	right: 0;
	top: 0;
}

div#centre.making #casque1 {
	display: block;
}

.makingofCasque p {
	width: 402px;
	height: 60px;
	color: #686868;
	line-height: 14px;
	margin: 6px 0 0 5px;
}

ul#makingofVignettes {
	position: absolute;
	left: 43px;
	top: 388px;
}

ul#makingofVignettes li {
	float: left;
}

/***************************************************
	ACTUALITE
***************************************************/

div#centre.actu h1 {
	background: url(images/titre_actu.png);
}

div#centre.actu #droite {
	background: url(images/milieu_actu.jpg);
}

div.box h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ac5500;
	display: inline;
	margin-right: 3px;
}

div.box h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	font-style: italic;
	color: #666666;
	display: inline;
}

/*div#centre.actu div#news {
	width: 265px;
	height: 300px;
	margin: 103px 0 0 185px;
}*/

div.box {
	clear: both;
	width: 780px;
	margin: 30px auto;
}

div.box div#image {
/*	position: absolute;*/
	width: 167px;
/*	top: 110px;
	left: 0;
	background: url(images/actu_photo.png);
	text-align: right;*/
	float: left;
}

div.box p {
	margin-top: 5px;
	padding-left: 167px;
}

div.box img {
	padding: 7px;
	border: 1px solid #9b8860;
	background: #efead9;
	margin: 8px;
}

div#centre.actu ul#smenuBas {
	padding: 20px 0;
	text-align: center;
}

/***************************************************
	GABARIT FULL PAGE
***************************************************/

.full {
	overflow: auto;
	height: 447px;
	top: 33px;
}

.full#actu {
	background: url(images/fond_actu.png) no-repeat fixed center 98px;	
}

.full#boutique {
	background: url(images/fond_shop.png) no-repeat fixed center 98px;
}

/***************************************************
	NEW SHOP
***************************************************/

div.cats {
	width: 804px;
	margin: 20px auto;
	overflow: auto;
}

div.cats div.box {
	margin-top: 0px;
	overflow: auto;
	margin-bottom: 20px;
}

div.cats div.box img {
	float: left;
	text-align: left;
}

div.cat {
	width: 200px;
	height: 200px;
	float: left;
	text-align: center;
	background: white;
	border-right: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;	
}

	/* Image */
	.cat table {
		padding: 0;
		border-spacing: 0px;
		border-collapse: collapse;
		width: 100%;
		height: 170px;
	}
	
	.cat td {
		padding: 0;
		height: 170px;
		line-height: normal;
		text-align: center;
		vertical-align: middle;
		margin-top: 0px;
		border-top: 0px;
		background: white;
	}
	
	/* Texte */

	.cat h4 {
		font-size: 11px;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}
	
div#boutique .box {
	background: white;
	padding: 15px;
	margin: 2px auto 0 auto;
	overflow: auto;	
}

div#boutique .box h3 {
	color: #333;
	font-size: 11px;
	line-height: 25px;
}

div#boutique .box h4 {
	font-style: normal;
	font-weight: normal;
	color: #C00;	
	font-size: 11px;
}

div#boutique h3#titreCat {
	font-size: 22px;
	font-weight: normal;
	color: #C00;
	width: 800px;
	margin: 30px auto 10px auto;
	line-height: 25px;
}

#accueilShop {
	display: block;
	width: 870px;
	text-align: right;	
	margin-bottom: 5px;
	font-weight: normal;
}

/***************************************************
	FICHES PEINTURE
***************************************************/

div#centre.fiches h1 {
	background: url(images/titre_fiches.png);
}

div#centre.fiches #gauche {
	background: url(images/milieu_fiches.jpg);
}

div#centre.fiches #droite {
	background: url(images/milieu_fiches.png);
}

div#centre.fiches #droite div {
	position: absolute;
	left: 54px;
	top: 117px;
}

div#centre.fiches dl {
	float: left;
	margin-right: 5px;
}

div#centre.fiches dl dt a {
	display: block;
	padding: 5px;
	height: 170px;
	width: 120px;
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
}

div#centre.fiches dl dt a:hover {
	background: #ffa73c;
	border: 1px solid #ffa73c;
}

div#centre.fiches dl dd {
	width: 130px;
	margin-top: 4px;
	text-align: center;
}

/***************************************************
	SHOP
***************************************************/

div#centre.shop h1 {
	background: url(images/titre_shop.png);
}

div#centre.shop img {
	/*margin-top: 33px;*/
}

div#centre.shop div#texte {
	display: none;
}

/***************************************************
	CONTACT
***************************************************/

div#centre.contact h1 {
	background: url(images/titre_contact.png);
}

div#centre.contact #contenu {
	position: absolute;
	width: 970px;
	height: 447px;
	top: 33px;
	background: url(images/milieu_contact.jpg);
}

div#centre.contact #texte {
	display: none;
}

div#centre.contact h3#credits a {
	position: absolute;
	width: 190px;
	height: 50px;
	left: 200px;
	top: 330px;
	text-indent: -3000px;
}

fieldset  { 
	border: none;
}

legend { 
	display: none;
}

input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 2px;
}

form#contactForm {
	position: absolute;
	left: 545px;
	top: 125px;
	width: 308px;
}

form#contactForm label {
 	float: left;
	width: 85px;
	text-align: right;
	margin-right: 5px;
	line-height: 23px;
	color: #FFFFFF;
}

form#contactForm label#message-label {
	display: none;
}

form#contactForm input, form#contactForm select, form#contactForm textarea {
	background: #6f0f10;
	border: 1px solid #d72204;
	color: #DDDDDD;
	margin: 1px 0;
}

form#contactForm input { 
	width: 130px; 
	height: 14px; 
}

form#contactForm select {
	width: 200px;
	height: 20px;
}

form#contactForm textarea {
	width: 345px;
	height: 120px;
	margin-top: 15px;
	padding: 5px;
    scrollbar-face-color: #6f0f10;
    scrollbar-shadow-color: #3d0a09;
    scrollbar-highlight-color: #3d0a09;
    scrollbar-3dlight-color: #6f0f10;
    scrollbar-darkshadow-color: #6f0f10;
    scrollbar-track-color: #6f0f10;
    scrollbar-arrow-color: #3d0a09;
}

form#contactForm input:focus, form#contactForm select:focus, form#contactForm textarea:focus, form#contactForm .focus {
	background-color: #3d0a09;
}

form#contactForm input#valid {
	width: 65px;
	height: 23px;
	margin-left: 140px;
}

/***************************************************
	INTRO
***************************************************/

div#centre.intro {
	background: url(images/milieu_intro2011.jpg);
}

div#centre.intro h1, div#centre.intro h2, div#centre.intro p {
	display: none;
}

a#entrer {
	display: block;
	position: absolute;
	width: 136px;
	height: 23px;
	left: 783px;
	top: 219px;
	text-indent: -3000px;
	background: url(images/entrer.gif) no-repeat top left;
}
a#entrer:hover { background-position: 0 -23px; }

/***************************************************
	GALERIES PHOTOS
***************************************************/

div#centre.galeries h1 {
	background: url(images/titre_photos.png);
}

div#centre.galeries img {
	margin-top: 33px;
}

div#centre.galeries div#contenu {
	width: 970px;
	height: 447px;
	background: url(images/milieu_galeries2011.jpg) no-repeat 0 33px;
}

div#centre.galeries div#image {
	position: absolute;
	width: 970px;
	height: 447px;
	bottom: 0;
	background: url(images/milieu_galeries2011.png) no-repeat bottom left;
}

div#centre.galeries ul#liens {
	position: absolute;
	width: 970px;
	height: 447px;
	top: 33px;
	left: 0;
}

div#centre.galeries ul#liens li {
	float: left;
}
div#centre.galeries ul#liens li a {
	display: block;
	width: 243px;
	height: 447px;
	text-indent: -3000px;
}
div#centre.galeries ul#liens li.moins a { width: 242px; }

div#centre.galeries ul#liens li a:hover {
	background: #FFFFFF;
	filter:alpha(opacity=20);
	opacity: 0.2;
	-moz-opacity: 0.2;
	-khtml-opacity: 0.2;
}

div#centre.galeries ul#liens li#making a {
	display: block;
	width: 20px;
	height: 20px;
	float: left;
	background: #f56b00;
	border: 1px solid #be4646;
	text-align: center;
	color: white;
	font-size: 15px;
	font-weight: bold;
	margin-right: 5px;
	text-indent: 0;
}

div#centre.galeries ul#liens li#making p {
margin: 375px 0 0 147px;
}

/***************************************************
	GALERIE
***************************************************/

div#centre.galerie h1 {
	background: url(images/titre_photos.png) no-repeat top left;
}

div#centre.galerie div#droite {
	background: url(images/milieu_casques.png) no-repeat top left;
}

ul.fleches {
	margin-left: 43px;
	margin-top: 3px;
	width: 400px;
	height: 4px;
	font-size: 0;
}

ul.fleches li {
	float: left;
	width: 80px;
	height: 4px;
	text-align: center;
	line-height: 1px;
}

div#centre.galerie ul.casques {
	margin-left: 43px;
	margin-top: 16px;
	width: 400px;
	height: 50px;
}
div#centre.galerie ul#ligne1 { margin-top: 44px; }

ul.casques li {
	float: left;
	width: 80px;
	height: 50px;
	text-align: center;
}

.fleches img {
	display: none;
}

/***************************************************
	CASQUE
***************************************************/

div#centre.casque h1 {
	background: url(images/titre_photos.png) no-repeat top left;
}

div#centre.casque div#droite {
	background: url(images/milieu_casque.png) no-repeat top left;
}

div#centre.casque div#droite div#effetLivre {
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 447px;
	background: url(images/page_droite-trans.png) no-repeat top left;
}

div#centre.casque li#lienIndex {
	position: absolute;
	top: 11px;
	right: 505px;
	line-height: 10px;
	border: 0;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: none;
}

div#centre.casque div.bigcasque {
	position:absolute;
	width: 475px;
	height: 285px;
	text-align: center;
	top: 45px;
	left: 10px;
	background: #FFFFFF;
}

div#centre.casque ul#vignettes {
	position: absolute;
	right: 50px;
	top: 372px;
	width: 250px;
	height: 65px;
}

div#centre.casque div#droite h2 {
	position: absolute;
	left: 85px;
	top: 391px;
	width: 140px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}

ul#vignettes li {
	float: right;
	height: 57px;
	display: block;
}

div#centre.casque a#prec {
	display: block;
	position: absolute;
	top: 383px;
	left: 48px;
	width: 17px;
	height: 34px;
	text-indent: -3000px;
	background: url(images/fleche_gauche.gif) no-repeat center center;
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
}

div#centre.casque a#prec:hover {
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
}

div#centre.casque a#suiv {
	display: block;
	position: absolute;
	top: 383px;
	left: 455px;
	width: 17px;
	height: 34px;
	text-indent: -3000px;
	background: url(images/fleche_droite.gif) no-repeat center center;
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
}

div#centre.casque a#suiv:hover {
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
	-khtml-opacity: 1;
}

ul#vignettes li a img {
	margin: 0 0 0 5px;
}

ul#vignettes li a {
	height: 50px;
}

/***************************************************
	INDEX
***************************************************/

div#listeIndexFond {
	position: absolute;
	left: 0;
	top: 33px;
	width: 970px;
	height: 447px;
	background: url(images/milieu_index.gif) no-repeat top left;
}

div#listeIndex {
	position: absolute;
	left: 145px;
	top: 33px;
	width: 680px;
	height: 360px;
	background:  #f6f6f6 ;
}

div#centre.casque ul.casques {
	margin-left: 10px;
	width: 650px;
	height: 66px;
	padding-left: 10px;
}
div#centre.casque ul#ligne1 { margin-top: 35px; }

/*div#centre.casque ul.pair { background: #DEDEDE; }*/

div#centre.casque ul.casques li {
	margin-top: 10px;
}

div#centre.casque ul.fleches {
	margin: 0 0 0 10px;
	padding: 0 0 3px 10px;
	width: 650px;
	height: 4px;
	font-size: 0;
}

a#fermer {
	position: absolute;
	width: 55px;
	height: 13px;
	right: 10px;
	bottom: 8px;
	background: url(images/fermer.gif) no-repeat top left;
	text-indent: -3000px;
	font-size: 0;
}
a#fermer:hover { background-position: 0 -13px; }

.cache { display: none; }