/********** Structure générale **********/
* { margin:0; padding: 0; }
HTML { height: 100%; }
BODY { height: 100%; font: 13px Arial, sans-serif; color: #373536; background: #230310 url(../pics/charte/bg-body.png) left top repeat-x; }
#global { position: relative; left: 50%; width: 780px; height: 100%; margin-left: -390px; background: url(../pics/charte/bg-global.png) left top repeat-y; }
*>#global { height: auto; min-height: 100%; }
#bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../pics/charte/bg-content.png) left top no-repeat; }
*>#bg { height: auto; min-height: 100%; }
DIV.home { width: 480px !important; margin-left: -240px !important; background-image: url(../pics/charte/bg-global-home.png) !important; }
#content { position: relative; padding: 0 51px 90px; }
DIV.home #bg { background-image: url(../pics/charte/bg-content-home.png) !important; }
A { text-decoration: none; }
A:hover { text-decoration: underline; }

/********** En-Tête **********/
#fr, #en { position: absolute; top: 5px; right: 35px; display: block; width: 15px; height: 15px; text-indent: -9000px; font-size: 0; background: url(../pics/charte/btn-fr.png) left top no-repeat; outline: none; }
#en { right: 15px !important; background-image: url(../pics/charte/btn-en.png) !important; }
#header { position: relative; height: 24px; margin: 0 51px 1px; padding-top: 140px; background: url(../pics/charte/bg-header.png) left top repeat-x; }
#header MENU { overflow: hidden; height: 24px; padding-left: 150px; list-style: none; background: url(../pics/charte/bg-menu.png) left top repeat-x; }
DIV.home #header MENU { padding-left: 0; }
#header MENU LI { float: left; width: 90px; height: 24px; border-right: 1px solid #FFF; }
#header MENU LI.prods { width: 105px; }
#header MENU LI.contact { border: none !important; }
#header MENU A { display: block; width: 100%; height: 24px; line-height: 24px; font-size: 12px; text-decoration: none; text-align: center; color: #FFF; background: url(../pics/charte/bg-menu.png) left top repeat-x; }
#header MENU A:hover { text-decoration: none; background-position: 0-24px; }
H1 { position: absolute; top: -135px; left: 0; width: 100%; height: 92px; background: url(../pics/charte/logo.gif) center top no-repeat; }
H1 A { display: block; width: 100%; height: 100%; text-indent: -9000px; font-size: 0; outline: none; }

/********** Contenu **********/
#content H2 { height: 25px; margin-bottom: 15px; padding: 0 5px 0 25px; line-height: 25px; font-size: 13px; font-weight: normal; color: #FFF; background: #4B0B2B url(../pics/charte/puce-h2.gif) 10px 11px no-repeat; }
#content H3 { margin: 10px 0 5px 0; padding: 0 10px; color: #4B0B2B; }
#content H4 { margin: 10px 0; text-decoration: underline; }
#content UL { margin: 10px 0 20px 30px; list-style: none; }
#content LI { padding-left: 10px; background: url(../pics/charte/puce-li.gif) 0px 8px no-repeat; }
#content P, #content LI { margin-bottom: 5px; padding: 0 10px; text-align: justify; line-height: 17px; }
#content P.separator { padding: 3px !important; background: #EBEBEC; }
#content A { color: #7E1348; }
#content MENU { float: right; clear: right; width: 198px; margin: 0 5px 30px 30px; list-style: none; border: 1px solid #CCC; }
#content MENU LI { margin: 0 !important; padding: 3px 0 !important; font-size: 12px; text-align: left !important; background: url(../pics/charte/bg-gradient.png) left top repeat-x; }
#content MENU A, #content MENU SPAN { display: block; padding-left: 15px; background: url(../pics/charte/puce-li.gif) 4px 7px no-repeat; }

	/* Home */
	#bandeau { position: relative; margin-bottom: 1px; }
	#bandeau A { display: block; position: absolute; bottom: 10px; right: 0; height: 25px; padding: 0 35px 0 5px; line-height: 25px; font-size: 13px; text-decoration: none; color: #FFF; background: #4B0B2B url(../pics/charte/puce-bandeau.png) right top no-repeat; }
	#bandeau A:hover { text-decoration: underline; }
	DIV.home H2 { margin-bottom: 0 !important; }
	DIV.actu { padding: 5px 10px; background: url(../pics/charte/bg-gradient.png) left bottom repeat-x; }
	DIV.actu H3 { margin: 0 !important; padding: 0 !important; font-size: 12px; font-weight: normal; color: #7B7B7B !important; text-transform: uppercase; }
	DIV.actu P { margin: 0 !important; padding: 0 !important; }
	A.more { display: block; height: 18px; margin: 1px 0 3px; padding-right: 20px; line-height: 18px; text-align: right; font-size: 12px; color: #4B0B2B; background: #EBEBEC url(../pics/charte/puce-more.gif) right 7px no-repeat; }

	/* Productions */
	H3 BIG { color: #373536 !important; }
	DIV.prods { clear: both; overflow: hidden; width: 100%; padding-left: 25px; }
	DIV.prod { float: left; width: 205px; margin: 0 5px 20px 0; text-align: center; }
	DIV.prod IMG { margin-bottom: 5px; border: 2px solid #CCC; }
	DIV.prod A { font-size: 14px; }
	DIV.production .r { clear: right; margin: 0 5px 10px 30px; }
	DIV.synopsis { margin: 15px 0; padding: 10px; background: #EEE; }
	P.gallery { margin-top: 10px; line-height: 25px !important; text-align: center; vertical-align: middle; }
	P.gallery A { padding-left: 30px; background: url(../pics/charte/pics.png) left center no-repeat; }

	/* Actus */
	P.pagingNav { margin-top: 30px; text-align: center; border-top: 1px solid #EEE; }
	DIV.actualite IMG { margin-right: 10px; }

	/* Formulaires */
	LABEL { display: inline-block; width: 110px; vertical-align: top; }
	P.nolabel { padding-left: 120px !important; }
	P.details { font-size: 10px; }
	INPUT, TEXTAREA { width: 350px; font: 11px Arial, sans-serif; border: 1px solid #4B0B2B; }
	INPUT.chk { width: auto; border: none; background: transparent; }
	INPUT.btn { width: auto; padding: 0 10px; color: #FFF; background: #4B0B2B; border: 1px solid #333; cursor: pointer; }
	INPUT.btn:hover { background: #692949; }

	/* Divers */
	UL.filmo UL { margin: 0 !important; }
	UL.filmo LI LI { margin-bottom: 0 !important; font-style: italic; background: none !important; }
	.msg { margin: 5px; padding: 10px !important; text-align: center; font-weight: bold; color: #C00; border: 1px solid #C00; }
	.ok { color: #696; border-color: #696; }

/********** Pied-de-page **********/
#footer { position: absolute; bottom: 0; left: 51px; width: 678px; height: 70px; }
DIV.home #footer { width: 378px; }
#footer DIV { height: 18px; margin-bottom: 1px; background: url(../pics/charte/logo-small.png) right top no-repeat; border-bottom: 3px solid #4B0B2B; }
#footer P { padding: 8px; text-align: center; background: #373536; }
#footer * { color: #7B7B7B; }

/********** Surdéfinitions et styles génériques **********/
.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.justify { text-align: justify !important; }
.middle { vertical-align: middle !important; }
.l { float: left; }
.r { float: right; }
.clear { clear: both; }
.spacer { clear: both; height: 1px; font-size: 0px; }
.nospace { margin: 0 !important; padding: 0 !important; }

/********** LIGHTBOX **********/
#lightbox { position: absolute; z-index: 100; left: 0; width: 100%; line-height: 0; text-align: center; }
#lightbox IMG { width: auto; height: auto;}
#lightbox A IMG { border: none; }
#outerImageContainer { position: relative; width: 250px; height: 250px; margin: 0 auto; background-color: #FFF; }
#imageContainer { padding: 10px; }
#loading { position: absolute; top: 40%; left: 0%; width: 100%; height: 25%; line-height: 0; text-align: center; }
#hoverNav { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; }
#imageContainer>#hoverNav { left: 0; }
#hoverNav A { outline: none; }
#prevLink, #nextLink { display: block; width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(../pics/charte/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../pics/charte/next.gif) right 15% no-repeat; }
#imageDataContainer { overflow: auto; width: 100%; margin: 0 auto; line-height: 1.4em; font: 10px Verdana, Helvetica, sans-serif; background-color: #FFF; }
#imageData { padding: 0 10px; color: #666; }
#imageData #imageDetails { float: left; width: 70%; text-align: left; }
#imageData #caption { font-weight: bold; }
#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ float: right; width: 66px; padding-bottom: 0.7em; outline: none; }
#overlay { position: absolute; z-index: 90; top: 0; left: 0; width: 100%; height: 500px; background-color: #000; }