@charset "utf-8";
/* template.css = structure du site et systeme de grid */


/*	I - _root : élément racine
	--------------------------------------------------------------------------------------------------------------------------- */
	#_root {}
	
	/*	I - _root > div : 1er élément enfant de la racine
		--------------------------------------------------------------------------------------------------------------------------- */
		#_root > div { }
		
		/* Home : cas particulier de page 
		--------------------------------------------------------------------------------------------------------------------------- */
		.page-accueil {  background: #000 url(../images/template/home-global-contents-bg.jpg) center 100px no-repeat;  }
		.page-accueil #contents { background: #000 url(../images/template/home-global-contents-bg.jpg) center top no-repeat; }
		.page-accueil #contents section {
			float: left;
			width: 500px; 
			background: url(../images/template/line-bg.png) repeat-x; 
		}
		.page-accueil #contents #badgeFr #badgeEn #badgeNl{ margin-top: 48px; margin-left: 45px; }
		
		
		/* Last News */
		.page-accueil #contents #lastNews,
		.page-accueil #contents #lastNews ul {
			width: 204px;
			float: right
		}
			#lastNews ul {}
				#lastNews ul li:first-child { border-top: 1px solid #1c1c1c; }
				#lastNews ul li {
					border-bottom: 1px solid #1c1c1c;
					padding: 12px 0;
				}
					
					#lastNew h2 { line-height: 36px; }
					#lastNews ul li a {}
					#lastNews ul li a:link, #lastNews ul li a:visited {}
					#lastNews ul li a:hover, #lastNews ul li a:actove, #lastNews ul li a:focus {}
					
						#lastNews ul li a img { width: 50px; height: 50px; float: left; margin-right: 10px; }
                                                
                                                #lastNews ul li a div{ float: left; width: 140px;}
						#lastNews ul li a div time { color: #76070c; float: left; line-height: 18px;  width: 140px;}
						#lastNews ul li a div h3 { font: normal normal normal 12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom: 0; }
		
		
		/* Véhicule de jeu en home page  */
		.page-accueil #contents #itemList {
			position: absolute;
			left: 55px;
			top: 190px;
		}
		.page-accueil #contents #itemList,
		.page-accueil #contents #itemList ul,
		.page-accueil #contents #itemList > ul > li {
				width: 184px;
				margin: 0;
			}
				.page-accueil #contents #itemList a h2 {
					width: 160px;
					font-size: 17px; 
					line-height: 17px; 
					margin-bottom: 2px; 
				}
				.page-accueil #contents #itemList a .arrow {
					width: 18px;
					height: 28px;
					background: url(../images/template/arrow-listItem-small.png) no-repeat;
				}
				.page-accueil #contents #itemList a .visual { background: #000; }
				.page-accueil #contents #itemList a .visual,
				.page-accueil #contents #itemList a .visual img {
					width: 160px;
					height: 160px;
				}
				
				/* Diapo */
				.page-accueil #contents #itemList .diapo  {
					  position: absolute;
					  bottom: -10px;
					  left: 0;
					  display: block;
					  width: 186px;
					  height: 100px;
					  background: url(../images/template/diapo.png) no-repeat;
					  z-index: 100;
				  }



		/*	I - GLOBAL HEADER 
			--------------------------------------------------------------------------------------------------------------------------- */
			#global-header {
				position: relative;
				float: left;
				width: 100%;
				height: 100px;
				background: url(../images/template/global-header-bg.jpg) repeat-x;
				z-index: 10000;
			}
				header {
					position: relative;
					width: 960px;
					margin: 0 auto;
				}
				
					/* logo */
					#logo, #logo a, #logo a img { display: block; float: left; }
					#logo {
						position: relative;
						width: 390px;
						height: 85px;
						margin: 0 0 0 -77px;
						padding: 43px 78px 83px 78px;
						background: url(../images/template/logo-bg.png) center top no-repeat;
						z-index: 1000;
					}
					


					


		/*	II - GLOBAL CONTENTS 
			--------------------------------------------------------------------------------------------------------------------------- */
			#global-contents {
				float: left;
				width: 100%;
			}
			
				#contents {
					width: 960px;
					margin: 0 auto;
					background: url(../images/template/global-contents-bg.jpg) center top no-repeat;
				}
					
	
					/* aside */
					aside {
						position: relative;
						float: left;
						width: 160px;
						padding: 150px 0 0 0;
                                                /*background-color: #FF0000;*/
					}
						
						/* arrow : flèche positionné en dessous du logo */
						aside .arrow {
							position: absolute;
							top: 30px;
							left: -20px;
							display: block;
							width: 31px;
							height:94px;
							background: url(../images/template/arrow-01.png) no-repeat;
						}
						
						/* badge : */
						#badgeFr {
							float: right;
							/*margin-left: 16px;*/
							padding-bottom: 48px;
							width: 116px;
							height: 116px;
                                                        text-align: right;
						}
						a#badgeFr:link, a#badgeFr:visited { background: url(../images/template/badge-bg-fr.png) no-repeat; }
						a#badgeFr:hover, a#badgeFr:active, a#badgeFr:focus { background: url(../images/template/badge-bg-fr.png) -116px 0 no-repeat; }
                                                
                                                /* badge : */
						#badgeEn {
							float: right;
							/*margin-left: 16px;*/
							padding-bottom: 48px;
							width: 116px;
							height: 116px;
                                                        text-align: right;
						}
						a#badgeEn:link, a#badgeEn:visited { background: url(../images/template/badge-bg-en.png) no-repeat; }
						a#badgeEn:hover, a#badgeEn:active, a#badgeEn:focus { background: url(../images/template/badge-bg-en.png) -116px 0 no-repeat; }
                                                
                                                /* badge : */
						#badgeNl {
							float: right;
							/*margin-left: 16px;*/
							padding-bottom: 48px;
							width: 116px;
							height: 116px;
                                                        text-align: right;
						}
						a#badgeNl:link, a#badgeNl:visited { background: url(../images/template/badge-bg-nl.png) no-repeat; }
						a#badgeNl:hover, a#badgeNl:active, a#badgeNl:focus { background: url(../images/template/badge-bg-nl.png) -116px 0 no-repeat; }
				
                                                
						/* coordonnées */
						#coordonnees {
							float: left;
							width: 100%;
							padding-top: 24px;
							text-align: right;
							background: url(../images/template/line-bg.png) repeat-x;
						}
							/* h3 */
							#coordonnees h2,
							#coordonnees h3 {
								font-style: normal;
								color: #ad0c13 !important; 
							}
                                                        
                                                /* socialNetwork */
						#socialNetwork {
							float: right;
							margin: 6px 0 0 16px;
						}
                                                #socialNetwork * { float: left; }
	
							
								
					/* Cms Page */
					#cms-page {
						position: relative;
						float: right;
						width: 750px;
						margin: 150px 0 0 0;
						
					}
                                                /* le titre à côté du camembert */
                                                #cms-page camemberttitle{
                                                    position: absolute;
                                                    padding-left: 45px;
                                                    color: #fff;
                                                    font: italic normal normal 36px/36px 'Lato', Arial;
                                                    text-align: right;
                                                    margin-top: -35px;
                                                }
                                                
                                                    /* arrow : flèche */
                                                    #cms-page camemberttitle .arrow {
                                                            position: absolute;
                                                            top: 85px;
                                                            right: 0;
                                                            display: block;
                                                            width: 58px;
                                                            height: 41px;
                                                            background: url(../images/template/arrow-camembert.png) no-repeat;
                                                    }
						
						#cms-page section img[align="left"] { float: left; margin-right: 10px;}
						#cms-page section img[align="right"] { float: right; margin-left: 10px;}
		
						/* 00 section
						------------------------------------------------------------------ */
						#cms-page section {
							float: right;
							width: 750px;
							padding: 24px 0 0 0;
							
						}
						#cms-page > section:first-child { background: url(../images/template/line-bg.png) repeat-x; }
						
							/* Class superficie*/
							#cms-page .superficie {
								display: block;
								float: right;
								padding: 0 12px;
								margin-left: 24px;
								font: italic normal normal 16px/36px 'Lato', Arial;
								background: #76070c;
								color: #fff;
							}
                                                        
                                                /* Utilisé pour le contour des images */        
                                                
                                                .border{
                                                    border: 5px solid #999999;
                                                }
							
							
						/* 01 itemLsit : list d'éléments par vignette, que l'on retrouve dans, news, nos car loges... 
						-------------------------------------------------------------------------------- */
						/* propriétés identiques */
						#itemList,
						#itemList ul {
							float: left;
							width: 100%;
						}
						
						/* Propriétés uniques */
						#itemList {}
							#itemList > ul {
							}

								/* li */
								#itemList > ul > li {
									width: 204px;
									margin: 0 69px 48px 0;
								}
								
									/* a */ 
									#itemList > ul > li a {
										position: relative;
										float: left;
										cursor: pointer;
										height: 353px;
									}
									#itemList > ul > li a:link, #itemList > ul > li a:visited {  }
									#itemList > ul > li a:hover, #itemList > ul > li a:active, #itemList > ul > li a:focus {}
								

										#itemList.references ul li a .title:first-child {
											height: 100px;
										}
										#itemList.references ul li a h2 {
    										font-size: 110%;
    										line-height: 100%;
    										max-height: 170px;
    										overflow: hidden;
										}
										#itemList.references ul li a h3 {
											max-height: 22px;
    										overflow: hidden;
    									}
    									#itemList.references ul li {
										    margin: 0 69px 36px 0;
										    padding-bottom: 24px;
										    border-bottom: 1px solid #555;
										    overflow: hidden;    										
    									}

										
										/* 1er Titre h2 uniquement */
										#itemList ul li a .title:first-child {
											overflow: hidden;
											width: 174px;
											height: 80px;
											padding-right: 30px;
											font: italic normal normal 20px/20px 'Lato', Arial; 
											margin-bottom: 0;
											color: #fff;
											text-align: right;
										}
										
										#itemList ul li a h2 {
											margin-bottom: 4px;
										}
										#itemList ul li a h3 {
											color: #c81c24;
    										font: italic normal normal 14px/20px Arial;
										}

										#itemList ul li a .grey {
											color: #ccc;
										}
										
										#itemList ul li a .actors {
											padding-top: 9px;
											color: #c81c24;
											font-style: italic;
    										text-align: center;
    										-webkit-font-smoothing: antialiased;
    												font-smoothing: antialiased;
										}

										
										/* arrow : flèche */
										#itemList .arrow {
											position: absolute;
											top: 20px;
											right: 0;
											display: block;
											width: 18px;
											height: 39px;
											background: url(../images/template/arrow-listItem.png) no-repeat;
										}
										
										/* !!! Remarque 
										--------------------------------------- 
										Mauvais rendu Sous IE 9 si on  appliquer sur une img un border-radius avec un contour
										--> le contour va être coupé
										Il faut donc l'appliquer la solution sur son parent 
										*/
										
										/* Visual */
										#itemList .visual { 
											position: relative;  
											border-radius: 180px;
											behavior: url(wm-public/scripts/pie/PIE.htc); /* CSSpie !!! faire le lienrelatif depuis le fichier index.html */
											padding: 6px;
											margin: 0 6px;
											background: #999;
										}
										/*#itemList .visual:hover { background: #f00; }*/
											
											/* icon : élément graphique */
											#itemList .visual .icon {
												position: absolute;
												top: 10px;
												right: 0;
												display: block;
												width: 40px;
												height: 40px;
												border: 4px solid #76070c;
												border-radius: 180px;
												behavior: url(wm-public/scripts/pie/PIE.htc); /* CSSpie !!! faire le lienrelatif depuis le fichier index.html */
												box-shadow: 0 0 6px #000;
												background: #ad0c14 url(../images/template/icon-look.png) center no-repeat;
												z-index: 100;
											}
											
											/* img */
											#itemList .visual img {
												position: relative;
												width: 180px;
												height: 180px;
												border-radius: 180px;
												behavior: url(wm-public/scripts/pie/PIE.htc); /* CSSpie !!! faire le lienrelatif depuis le fichier index.html */
												vertical-align: bottom;
											}
										
										/* description */
										#itemList .description {
											padding-top: 24px;
										}
										
											/* date : time */
											#itemList .description time {
												color: #76070c; 
											}
											
											/* Titre : h2 */
											#itemList .description h2 {
												overflow: hidden;
												height: 70px;
												margin: 0;
												font: normal normal normal 14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
											}
										
									
									

															
			
		/*	III - GLOBAL FOTTER 
			--------------------------------------------------------------------------------------------------------------------------- */
			#global-footer {
				float: left; 
				width: 100%;
				padding: 24px 0;
			}
				footer {
					overflow: hidden;
					width: 960px;
					margin: 0 auto;
					padding: 36px 0 0 0;
					background: url(../images/template/line-bg.png) repeat-x;
				}
					/* Copyright */
					#copyright {
						font-size: 16px;
						line-height: 16px;
						color: #888;
						text-align: right;
					}
						/* a */
						#copyright a:link, #copyright a:visited { color: #888; }
						#copyright a:hover, #copyright a:active, #copyright a:focus { color: #fff; }

					
		
		

		/*  IV - TEMPLATE CLASS 
			--------------------------------------------------------------------------------------------------------------------------- */
			/* BOUTON 
				---------------------------------------------------------------- */
				/* 01-  btnMore */
				#_root .btnMore,
				#_root .btnSubmit {
					position: relative;
					display: block;
					float: right;
 					padding: 0 12px;
					font: normal normal normal 14px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
					text-decoration: none;
					text-transform: uppercase;
				}
				#_root .btnMore:link, #_root .btnMore:visited,
				#_root .btnSubmit:link, #_root .btnSubmit:visited { background: #76070c ; color: #fff;  }
				#_root .btnMore:hover, #_root .btnMore:active, #_root .btnMore:focus,
				#_root .btnSubmit:hover, #_root .btnSubmit:active, #_root .btnSubmit:focus { background: #ae0d15 ; color: #fff; }
				
				#_root .btnMore.floatLeft { margin: 0 24px 0 0; }
				
					#_root .btnMore span {
						position: absolute;
						top: 0;
						right: 12px;
						width: 10px;
						height: 100%;
						font-size: 16px;
					}
				
				
				/* 02 - btnSubmit */
				#_root .btnSubmit {
					padding: 0 12px;
					font: normal normal normal 16px/28px Arial, Helvetica, sans-serif;
				}
				
				/* big : Class supplémentaite à btnMore */
				#_root .btnMore.big {
					position: relative;
					height: 22px;
					font: italic normal normal 18px/22px 'Lato', Arial;
					text-transform: capitalize;
					padding: 8px 48px 8px 24px;
				}
					/* habillage du bouton avec des Class supplémentaires */
					/* propriétées identiques */
					#_root .btnMore.big .t,
					#_root .btnMore.big .b,
					#_root .btnMore.big .l,
					#_root .btnMore.big .r,
					#_root .btnMore.big.iconDownload  {
						position: absolute;
						display: block;
					}
					
					#_root .btnMore.big .t,
					#_root .btnMore.big .b { left: 0; width: 100%; height: 5px; z-index: 10; }
					
					#_root .btnMore.big .l,
					#_root .btnMore.big .r { top: 0; width: 5px; height: 100%; z-index: 8; }
					
					#_root .btnMore.big .t { top: 0; background:  url(../images/template/big-btn-top-bg.png.png) left 3px repeat-x; }
					#_root .btnMore.big .b { top: 90%; background:  url(../images/template/big-btn-bottom-bg.png) left 1px repeat-x; }
					#_root .btnMore.big .l { left: 0; background:  url(../images/template/big-btn-left-bg.png.png) 3px top repeat-y; }
					#_root .btnMore.big .r { right: 0; background:  url(../images/template/big-btn-right-bg.png.png) left top repeat-y; }
					
					/* download */
					#_root .btnMore .iconDownload {
						right: 12px;
						top: 50%;
						margin-top: -13px;
						width: 27px;
						height: 26px;
						background: url(../images/template/icon-download.png) right center no-repeat; 
					}
				
				
				/* 03 -  facebook */
				.facebook {
					display: block;
					float: right;
					width: 71px;
					height: 22px;                                        
				}
				.facebook:link, .facebook:visited { background: url(../images/template/icon-facebook.jpg) no-repeat;}
				.facebook:hover, .facebook:active, .facebook:focus { background: url(../images/template/icon-facebook.jpg) left -22px no-repeat; }
		

			
			/* CLASS .shadow : permet d'ajouter un ombre
				----------------------------------------------------------------------------*/
				/* .shadow + position : TL - TR - BL - BR - LT - LB - RT - RB  */
				.shadow { 
					position: absolute; 
					display: block; 
					z-index: 70; 
				}
				
				.shadow.TL, .shadow.TR, .shadow.BL, .shadow.BR { width: 100%; }
				.shadow.RT, .shadow.RB, .shadow.LT, .shadow.LB { height: 100%; } 
				
				.shadow.RT, .shadow.RB, .shadow.LT, .shadow.LB { width: 32px; }
				.shadow.TL, .shadow.TR, .shadow.BL, .shadow.BR { height: 32px; }
				
				.shadow.TL	{ top: -32px; left: 0; background: url(../images/template/shadow/top-left.png) left bottom no-repeat; }
				.shadow.TR	{ top: -32px; right: 0; background: url(../images/template/shadow/top-right.png) right bottom no-repeat; }
				.shadow.BL	{ bottom: -32px; left: 0; background: url(../images/template/shadow/bottom-left.png) left top no-repeat; }
				.shadow.BR	{ bottom: -32px; right: 0; background: url(../images/template/shadow/bottom-right.png) right top no-repeat; }
				.shadow.RT	{ right: -32px; top: 0; background: url(../images/template/shadow/right-top.png) left top no-repeat; }
				.shadow.RB	{ right: -32px; bottom: 0; background: url(../images/template/shadow/right-bottom.png) left bottom no-repeat; }
				.shadow.LT	{ left: -32px; top: 0; background: url(../images/template/shadow/left-top.png) right top no-repeat; }
				.shadow.LB	{ left: -32px; bottom: 0; background: url(../images/template/shadow/left-bottom.png) right bottom no-repeat; }

							
			
			/* CLASS : élement graphqiue
				----------------------------------------------------------------------------*/
			#filtre ul li.column_1_3{
				width:29%;
			}
			
			#filtre ul li.column_3_8{
				width:39%;
			}