/* 
  	Feuille de style utilisée partout
	 
	RESPECTER LA GRILLE ET LES COULEURS SUIVANTE
	insérer les nouvelles couleurs ici, avec un petit commentaire svp
	
	Couleurs Côté Cinéma
 
	@blanc : 		#fff 		//Fond
	@noir :			#000		//Texte mis en évidence
	@rouge : 		#E52B38 	//liens
	@rouge-minus :	#E57D84		//lien atténué
	@gris-fonce :	#525252		//titres, menu, texte normal
	@gris-clair :	#ECECEC		//fond des champs input
	@gris-moyen :	#BCBCBC		//encadrement
	@gris-bleu :	#384349		//fond du bloc résultat de recherche du guide
	@jaune :		#FBBD00		//fond jaune du guide / distributeur
	

	Images : utiliser des url absolue
	exemple : /images/logo.png
	
	Découpe du site
	
	Cadre principal englobant la totalité de la page sur 950px 
  
	24 colonnes en largeur soit 30px de large et 10px de marge à droite par colonne 
	sauf pour la dernière colonne qui n'a pas de marge à droite 
 
 	une ligne = 1.5em 
	deux lignes = 3em, etc...

	pour  1 colonnes :	 30px
	pour  2 colonnes :	 70px
	pour  3 colonnes :	110px
	pour  4 colonnes :	150px
	pour  5 colonnes :	190px
	pour  6 colonnes :	230px
	pour  7 colonnes :	270px
	pour  8 colonnes :	310px
	pour  9 colonnes :	350px
	pour 10 colonnes :	390px
	pour 11 colonnes :	430px
	pour 12 colonnes :	470px
	pour 13 colonnes :	510px
	pour 14 colonnes :	550px
	pour 15 colonnes :	590px
	pour 16 colonnes :	630px
	pour 17 colonnes :	670px
	pour 18 colonnes :	710px
	pour 19 colonnes :	750px
	pour 20 colonnes :	790px
	pour 21 colonnes :	830px
	pour 22 colonnes :	870px
	pour 23 colonnes :	910px
	pour 24 colonnes :	950px
	
	attention : si ça saute alors que vous utilisez ces valeurs, c'est sans doute parque qu'il y a un border quelques part...
*/

/* initialisation global */
html {font-size:100.01%;}
body {font-size:75%;color:#525252;background:#fff;font-family: Verdana, Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#525252; font-family:Arial, Helvetica, sans-serif;}
h1 {font-size:2em;line-height:1;color:#e52b38;}
h2 {font-size:1.7em;}
h3 {font-size:1.5em;line-height:1;}
h4 {font-size:1.2em;line-height:1.25;}
h5 {font-size:1em;font-weight:bold;}
h6 {font-size:1em;font-weight:bold;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0; height: 0; line-height: 1; vertical-align: baseline; 
_vertical-align: bottom; position: relative; font-size:75%; }
sup { bottom: 1ex; }
sub { top: .5ex; }
abbr, acronym {border-bottom:1px dotted #666;}
pre { white-space:pre; }
pre, code, tt { font:1em 'andale mono', 'lucida console', monospace; line-height:1.5; }
dl dt {font-weight:bold;}
th {font-weight:bold;}
form { overflow:hidden; }

a { color:#E52B38; font-weight:bold; }
a,a:link,a:active,a:visited { text-decoration:none; }
a:focus,a:hover{ text-decoration:underline; }

input[type=text], input[type=password], textarea, select { background-color:#ECECEC; border:1px solid #BCBCBC; padding:0; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { background-color:#fff; border-color:#525252;  }


/* JQuery */
.ui-tabs .ui-tabs-hide { display: none; }

body { text-align:center; }
body.page { background:#fff none; text-align:left; }

/* Cadre principal pour l'ensemble des page du site, attention à bien respecter la largeur */
#cadre-header { width:950px;margin:0 auto; position:relative; text-align:left; height:auto; }
#cadre-contenu { width:950px;margin:0 auto; position:relative; text-align:left; height:auto; padding-bottom:42px; clear:both; }

/* Entête */
#site-logo { float:left; width:390px; margin-right:10px; height:6em; } /* 10 colonnes */
#site-logo img {}

#banniere { text-align:center; }

.clearfix, .clear { clear:both; width:100%;}
.clearfix:after, #cadre-principal:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.hidden { display:none; }

/* Pages */
.page { padding:0 15px 0 15px; clear:both; }
.page li ul, div.page li ol {margin:0 1.5em;}
.page ul, div.page ol {margin:0 1.5em 1.5em 1.5em;}
.page ul {list-style-type:disc;}
.page ol {list-style-type:decimal;}

.page h1 {margin:.5em 0;}
.page .titre_blanc { color:#fff; }
.page .texte_km { margin-top:.5em; }
.page .texte_km strong { color:#000; }
.page strong, .page b { color: #000; }

.page .cs_partie_video {
	width:420px;
	height:190px;
	background:#000 url(/images/cs_accent_bg_noir.png) top right no-repeat;
	color:#fff;
	float:left;
	margin-right:8px;
	display:inline;
	margin-bottom:1em;
}
.page .cs_partie_rom {
	display:block;
	width:420px;
	height:190px;
	background:#e52b38 url(/images/cs_accent_bg_rouge.png) top right no-repeat;
	color:#fff;
	float:left;
	margin-bottom:1em;
}
.page .cs_partie_video .titre_gros, .page .cs_partie_rom .titre_gros { margin:7px; display:block; }
.page .cs_partie_video li {	background:url(images/cs_puce_bg_noir.png) left center no-repeat;margin:15px;}
.page .cs_partie_rom li {	background:url(images/cs_puce_bg_rouge.png) left center no-repeat; margin:15px;}

.page ul { margin:10px 0 0 0; padding:0; }
.page li {
	list-style:none;
	background:url(/images/cs_puce_bg_blanc.png) left center no-repeat;
	padding-left:25px;
	margin-bottom:5px;
	margin-left:10px;
	display:block;
}
.page { line-height:1.4em; }
.page .centre { text-align:center; }
.page .image_gauche { float:left; margin:0 7px 4px 0; }
.page .image_droite { float:right; margin:0 0 4px 7px; }

#mentions { padding:10px 0 30px 0; clear:both; }

#nav-du-bas { font-size:12px; color:#d7d7d7; text-align:left;  }
#nav-du-bas ul { display:block; }
#nav-du-bas ul li { line-height:18px; }

#footer { background:#151515; margin-top:42px; text-align:center; height:220px; display:block; }
#footer h2 { color:#E52B38; margin-top:15px; }
#footer a {color:#d7d7d7; font-weight:normal;}
#footer-contenu { width:950px; margin:auto; display:block; position:relative;  }
#onglet-gauche { position:absolute; top:-33px; left:15px; }
#onglets-droite { position:absolute; top:-33px; left:860px; }

a.retour {display:block; float:right; width:50px; text-align:center; }
#page-contact a.retour {margin:25px 20px 0 0; display:inline; }