/*====================================================
|                                                    |
|                 General Styles                     |
|                                                    |
====================================================*/

/*------------- On vient initialiser notre site, donc les balise sont génériques ici ---------------*/
@font-face {
	font-family : 'FuturaBook_Bold';
	src: url('themes/default/typo/FuturaBook_Bold.eot');
}
@font-face {
	font-family : 'FuturaBook_Bold';
	src: url('themes/default/typo/FuturaBook_Bold.ttf') format('truetype');
}

@font-face {
	font-family : 'FuturaBK-book';
	src: url('themes/default/typo/FuturaBK-book.eot');
}
@font-face {
	font-family : 'FuturaBK-book';
	src: url('themes/default/typo/FuturaBK-book.ttf') format('truetype');
}

/*----- Le body, on vient insérer notre image de fond, on initialise la couleur 'standard' du texte, on définit la police d'ecriture, etc... ------*/
body {
	font: 12px 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
	background: url(themes/default/img/fond.jpg) top center no-repeat #f9fafc;
	color: #000;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/*---- On initialise toutes les balise a margin/padding 0 -----*/

div, ul, li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul {
	list-style-type: square;
}

img {
	border: none;
}

p{
	text-align: justify;
}
li{
	margin-left: 30px;	
}
/*------ On paramêtre la couleur de nos liens sur le site --------*/

a:link, a:visited, a:active  {
    text-decoration: none;
    color: #000;
}

a:hover {
    text-decoration: underline;
    color: #000;
}

/*----- On initialise les H, et on redéfinit leur taille. Cette étape est importante, elle nous permet d'insérer facilement depuis l'admin des balise H sans avoir a changer leurs apparances -------*/

h1{
	color: #f30600;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 16px; 
	text-align:center;
}

/*-------------- Notre Global va contenir l'ensemble du site, il va nous permettre de centrer celui-ci, et de definir sa largeur --------------------*/

#global{
	width: 1000px;
	margin: 0px auto;
}

/*====================================================
|                                                    |
|                       Header                       |
|                                                    |
====================================================*/

/*---------- La partie header contiendra en général le logo, quelques fois une galerie, et le menu ---------------*/
/*--------- deux parties sont prévues a la base, header left et right, qui sont côte a côte, et le menu qui est en dessous, mais il est tout a fait possible d'insérer le menu dans la partie rigth par exemple (en mettant la div 'menu', non pas a la suite, mais dans la div right) ------------*/

/*-------- Notre div Header contient l'ensemble, c'est sur lui que l'on vient mettre notre image de fond du header. On oublie pas de lui mettre en hauteur la taille de cette image de fond ----------*/

#header {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(themes/default/img/header.png) no-repeat center top;
}

#header_content {
	width:1000px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
}

/*------  Notre partie gauche, dans cette exemple elle ne sert qu'a accueillir le logo--------*/

#header_left {
	width: 1000px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	float: left;
}

/*--------- Notre partie droite, ici elle n'est pas utilisé --------*/

#header_right {
	width: 1000px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	float: left;
}

/*====================================================
|                                                    |
|                       menu bar                     |
|                                                    |
====================================================*/

/*----------- Notre menu se trouve en dessous de la partie left et right du header ----------*/

#menu {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height:79px;
}

/*--------- Notre liste dans laquelle nous affichons notre menu --------*/

#menu ul {
	padding: 0px;
	margin: 0px;
}

/*--------- Chaque liens est ensuite afficher dans un LI, ici nous les affichons cote a cote, donc float left, par defaut, ils seront les uns en dessous des autres ---------*/

#menu ul li { 
	margin: 0px 0px 0px 0px;
	padding: 0px 13px;
	list-style: none;
	float: left;
    position:relative;
}

/*------------- Ici tout ce qui concerne le lien en lui même (couleur etc...) --------------*/

#menu a {
	color: #000;
	font-family: 'FuturaBook_Bold';
	text-decoration: none;
	text-transform: uppercase;
	display:block;
	padding: 24px 8px 0px;
	margin: 0px;
}

#menu a:hover {
	background: url(themes/default/img/fleche.png) no-repeat center top;
}

/*------ La classe active est attribué au lien sur la page actuelle, ici on vient rajouter un bacgound au li actif, et on change la couleur du lien sur la page actuelle ---------*/

#menu .active a {
	background: url(themes/default/img/fleche.png) no-repeat center top;
}

.subnav {
    display: none;
    position: absolute;
    left:-70px;
    z-index: 99;
}

#menu ul li:hover .subnav{
    display:block;
}

#menu ul .subnav li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	width:250px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
	background-color: black;
	float: none;
}

#menu ul .subnav li a {
    color:white;
}

#menu ul .subnav li a:hover, #menu ul .subnav li.active a {
    color:white;
}

/*------------ On en a maintenant terminé avec la partie header, on souffle et on s'attaque au contenu :D ----------*/


/*====================================================
|                                                    |
|                       Content                      |
|                                                    |
====================================================*/

/*------------ La div content, elle contient le left/right column ---------------*/
/*------------ Si l'on a un fond qui se repete, on vient le mettre ici, dans ce cas on 'decoupera le haut du content en 2, et l'on mettra ces 2 images en bacground de column left et right' -------------*/

#content {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/*------------- On attaque donc les colones, il est important que leurs largeurs + leur padding/margin ne dépassent pas les 1000px (ou la taille du global), sinon elles basculeront l'une en dessous de l'autre ---------------*/
/*------------- Les padding augmentent la taille d'une div, si l'on met un padding de 10px sur la gauche d'une div de 30px, elle fera au final 40px, donc les margin ET les padding s'additionne au width pour determiner les 1000px ---------------*/
/*----------- On positionne tout en partan de la gauche c'est plus simple pour s'y retrouver ------------*/

#left_column {
	width: 1000px;
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 30px;
}

#left_column p{
	padding:0px;
	margin: 12px 18px 0px 45px;
	color: #000;
	font-family: 'FuturaBK-book';
	font-size: 16px;
	width: 220px;
	text-align: right;
	float: left;
	line-height: 20px;
}

#left_column span{
	color: #f30600;
	font-family: 'FuturaBook_Bold';
}

#left_column .encart_anim{
	float: left;
	margin:12px 8px 0px 0px;
}

/*------ Et la colone de droite, ici nous avons une image de fond en haut, on vient donc mettre un min-height afin que celle ci s'affiche même s'il n'y a pas de contenu ------*/

#right_column {
	width: 1000px;
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 10px 0px;
}

form{
	margin: 0px 270px 0px;
}

/*====================================================
|                                                    |
|                       Footer                       |
|                                                    |
====================================================*/

/*------------ La div qui contient notre footer--------------*/
/*------------- S'il l'on veut un footer qui prend toute la page, comme c'est le cas ici il faudra alors la sortir de la div global (sinon elle fera 1000px max), sinon on le laisse dans le global (dans footer.php)--------------*/

#footer {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background: url(themes/default/img/footer.png) no-repeat top center;
}

/*------ Notre div pour centrer le contenu du footer, uniquement si l'on a sorti le footer du global comme ici -------*/

#footer_content{
	width: 1000px;
	margin: 0px auto;
	height: 69px;
}

/*--------------- Les colone du footer, elles nous servent a mettre les différents éléments cote à cote (ici la phrase de footer est sur la gauche  -----------------*/
/*-------- Toujours le même principe, on positionne tout depuis la gauche, sur une largeur total de 1000px ---------*/

#footer_left{
	width: 200px;
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

/*------ la colone de droite, ici elle contient les réseaux sociaux et les mentions légales ------*/

#footer_right{
	width: 650px;
	float: left;
	padding: 25px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

/*----------- Ici les propriétés CSS des liens dans le Footer ----------*/

#footer a {
    text-decoration: none;
    color: #000;
}

#footer a:hover {
    text-decoration: underline;
    color: #000;
}

/*--------- Ici les propriété de notre phrase de footer (celle qu'on config dans l'admin -----------*/

.texte_footer{
	text-align: left;
	color: white;
}

/*------ Si l'on veut remettre le menu dans le bas du site, il faut mettre les styles sur les UL et les LI de celui ci  --------*/

#footer ul{
	padding: 0px 0px 0px 0px;
	margin: 9px 0px 0px 21px;
}

#footer li{
	float:left;
	list-style: none;
	margin: 0px;
	padding: 0 5px;
	border-right: solid 1px #000;
}

#footer #static-6{
	border-right: none;	
}

/*--------- Il ne nous reste que les div des reseaux sociaux et des mentions legales ---------*/
/*------- Ici elles se trouvent cote a cote, dans la colone right du footer ------*/

/*---- On commence par les reseaux sociaux -----*/

 #p_social{
	width:184px;
	padding: 0px 0px 0px 0px;
	margin: 135px 45px 0px;
	text-align: center;
	height: 45px;
}

/*------- Puis les mentions -------*/

.mentions{
	width:140px;
	padding: 0px 0px 0px 0px;
	margin: 25px 0px 0px 0px;
	float: left;
}

.copyright{
	font-size:10px;
	color:#000;
	font-style: italic;
	text-align: right;
	margin: 0px 7px 0px 0px;
}

/*====================================================
|                                                    |
|                       Other                        |
|                                                    |
====================================================*/

/*------------ Notre div clear, a mettre après des div flottantes ------------*/

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* AJOUTS */

/****************************/
/*		  Contact           */
/****************************/

#form label{
	width:120px;
	float:left;
}
#form label.spam{
	width:200px;
	float:none;
}
#form input{
	margin:2px 0;
}

/****************************/
/*		  Mentions          */
/****************************/
#content_mentions{ font-size:12px;width:600px; }							/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-tmp iframe, .fancybox-tmp object {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	padding: 0;
	margin: 0;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	padding: 0;
	margin: 0;
	position: relative;
	outline: none;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 10px;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('js/fancybox/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8020;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('js/fancybox/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	background: transparent url('js/fancybox/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 20px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 20px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -9999px;
	left: -9999px;
	padding: 0;
	overflow: visible;
	visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: #000;
}

#fancybox-overlay.overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8030;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	margin-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}