/*Olivier Beining - Directeur Artistique & Webdesigner Freelance - http://www.olivierbeining.com*/

/* //////////////////////////////  RESET////////////////////////////// */ 
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0;	outline: 0;	font-size: 100%; vertical-align: baseline;}

body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}/* a noter lors de la définition des focus */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/*table {border-collapse: collapse;border-spacing: 0;}*/
img {vertical-align:middle;}

/* ///////////////////////// PAGE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
html { font-size: 100%; /* Évite un bug d'IE 6-7 sur la gestion des polices en em*/ } 
body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; /* À adapter pour la police choisie.*/ line-height: 14px; /* À adapter au design.*/ color: black;/* À adapter au design.*/ background: white;/* À adapter au design.*/} 
img {border: none;}

/* /////////////////////////   TYPOGRAPHIE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
/* Les titres */ 
h1, h2, h3, h4, h5, h6 { 
  margin: 0 0 10px 0; /* Rapproche le titre du texte.*/ 
  font-weight: normal; /* Valeur par défaut bold.*/ 
  font-style: normal; 
} 
h1 {font-size: 24px; font-weight: bold; margin:0; line-height:24px;} 
h2 {font-size: 12px; color:white; padding:5px 10px; background:black; text-transform:uppercase; margin:0;} 
h3 {font-size: 12px; font-weight:bold;}
h4 {font-weight:bold;}

/*h4 {font-size: 16px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}*/

/* Divers éléments de type en-ligne */ 
em { font-style: italic; } 
strong { font-weight: bold; } 
 
/* Les abréviations */ 
abbr[title] { border-bottom: 1px dotted; cursor: help;} /* Met en évidence les abréviations (ayant un attribut title) */ 
 
/* Les citations */ 
blockquote { margin: .75em 0 .75em 20px; padding: 0 0 0 10px; border-left: solid 2px #ddd; } /* Met en évidence les citations */ 
q, cite { font-style: italic; } 
q cite, q q { font-style: normal } 
q {quotes: none;} /* Supprime les guillemets automatiques (citations courtes) */ 
q:before, q:after {content: "";} /* Nécessaire pour Safari/Chrome */
 
/* Rapproche les paragraphes dans les listes et citations */ 
blockquote p, li p {margin: .5em 0;} 
 
/* Styles de base pour les listes de définition */ 
dl { margin: .75em 0;} 
dt { margin: .75em 0 0 0; font-weight: bold;} 
dd { margin: .25em 0 .25em 32px; } 
 
/* Listes */ 
ul, ol {/*margin: .75em 0 .75em 32px;*/ margin:0;padding: 0;}
li{margin:5px 0 0 0;}
 
/* Paragraphes */ 
p { margin: 10px 0;}  /* Marges plus faibles que par défaut.*/ 

/* Adresse */ 
address { margin: .75em 0; font-style: normal;} 
 
/* /////////////////// LIENS /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
a { text-decoration: none;} 
a:link {  color: #059ad2;} 
a:visited { color: #059ad2; } 
a:hover, a:focus, a:active {color: #059ad2; text-decoration: underline;} 
a:active {outline: none; } /* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a img { border: none; } /* Pas de bordure autour des images dans les liens */ 
 
/* //////////////////// FORMULAIRES /////////////////////////*/ 
form, fieldset {margin: 0; padding: 0; border: none;} 
input, button, select {vertical-align: middle; /* Solution pb. d'alignement. */ }

/* //////////////////// TABLEAUX ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
/* Mise en forme simple pour les tableaux */ 
table {margin: 0; border: none; /* Pas de bordure = "none". */ /*border-collapse: collapse;*/ /* Valeur par défaut: "separate". */ border-spacing: 0;} 
table td, table th { padding: 0px; /* Pas de retrait autour du texte = "0". */ border:none; /* Pas de bordure = "none". */ vertical-align: top; /* Valeur par défaut: "middle" */} 

/* //////////////////// DIVERS ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ 


/* ----------------------------- */
/*            Gabarit            */
/* ----------------------------- */
/*Classes générales*/
.droite {float: right;}
.gauche {float: left;}
.texteDroite {text-align: right;}
.texteGauche {text-align: left;}
.texteCentre {text-align: center;}
.texteBleu {color:#059ad2;}
.texteGris {color:#9d9d9d;}

/*TEMPLATE*/
#wrapper{margin-top:15px;}
/*#header h1{ background:#059ad2; text-align:right;}*/
#main {padding:155px 10px 15px 0px; border-right: #9d9d9d solid 1px;}
/*#main .ce_text{text-align:justify;}*/
#main .heading.active h2{ background:#059ad2;}
#main h2{ background:black; color:white; padding:2px 5px; font-weight:normal; line-height:20px;}
#main h3{display:inline; background:black; color:white; padding:2px 5px; font-weight:normal; line-height:18px;}
#logo { text-align:left;}
#logo h1 { font-size:18px; margin:0 0 5px 0; color:#059ad2; text-transform:none;}
#logo h2 { font-size:13px; margin:0; padding:0; color:white; text-transform:uppercase; font-weight:normal; line-height:14px; background:none;}
#logo h2 span{background:black; padding:1px 2px; margin:0;}
#right .inside{margin-left:10px;}
#right h3{margin-top:15px;}
.tel{ background: url(../img/ico_tel.png) top left no-repeat; height:15px; padding-left:15px; color:#059ad2; font-size:16px;}
.socialNetwork ul{margin:0;}
.socialNetwork li{ display:inline;}

#showreel h2{margin:0; background:#059ad2;}
.temoignagesClient{margin:0 0 10px 0; border-bottom: #000 solid 1px; padding:0 0 10px 0;}

#footer{color:#9d9d9d; margin:80px 0 0 0;}

/*MENU PRINCIPAL*/
#menuP{/*color:#9d9d9d;*/ text-transform:uppercase; font-size:24px; font-weight:bold; margin:36px 0 50px 0;}
/*#menuP ul{margin:0;}*/
#menuP li {color:white; margin:0;}
#menuP li a, #menuP li a:link{color:#9d9d9d; line-height:33px; padding:2px; /*display:block;*/ /*height:30px;*/}
#menuP li a:hover, #menuP li a:focus, #menuP li a:active{color:white; background:#059ad2; text-decoration:none; padding:2px;}
#menuP li span.active {color:white; background:#059ad2; text-decoration:none; padding:2px; line-height:33px;}

/*ARTICLES ET NEWS*/
.pointeBulle{height:11px; background:url(../img/pointeBull.png) 740px top no-repeat; border-top:#000 solid 1px;}

.info{ text-align:right; margin:0; color:#9d9d9d; float:right; margin-top:10px;}

.pagination{float:right; margin:10px 0 0 0;}
.pagination p{display:none;}
.pagination ul{ margin:0;}
.pagination li{ display:inline;}

/*FORMULAIRES*/
#form_Contact{width:350px; margin:10px 0 0 0;}
#form_Contact label{ width:75px; height:27px; background:black; text-align:right; color:white; display:block; float:left; line-height:27px; margin:0;}
#form_Contact input { border:#000 solid 5px; display:block; width:255px;margin:0;}
#form_Contact textarea { border:#000 solid 5px; margin:0; width:255px;}
#form_Contact .submit_container input{ background:black; color:white; border:0 none; cursor:pointer; margin: 10px 10px 10px 0; float:right; width:80px; height:27px; line-height:27px;}
#form_Contact .submit_container input:hover{ background:#059ad2; color:white;}
.error {color:red; margin:0; padding:0 0 0 5px;}

/*FOLIO*/

.description{width:195px; display:block; float:left; margin-right:15px;}
#main .description h3{text-transform:uppercase; margin: 5px 0px 0px 0px; display:block; background:none; padding:0; color:black; font-weight:bold; line-height:14px;}
.description ul{margin:0; padding:0;}
.description li{color:white; margin:0px;/*background:#059ad2;*/}
.description li span{background:#059ad2; padding:0 5px;}
.description p{margin:5px 0px 0px 0px; color:#9d9d9d; }

.thumbnails{margin:10px 0 10px 0px; height:53px; width:560px; overflow:hidden; float:right;}
.thumb a{ float:left; background : white; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; margin: 0 12px 0 0;}
.thumb a:hover{ background : white; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}
.thumb a.active { background : white; filter: alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}

/*MEDIABOX STYLES*/
#mbOverlay{ background:white;}
#mbTitle{ font-weight:normal;}

/*ACORDION*/
.toggler{cursor:pointer;}

/*NEWSLETTER*/
.mod_nl_reader h1{ display:none;} /*je masque le titre par defaut*/
.mod_nl_reader .back{ display:none;} /*je masque le lien de retour vers la liste*/
.newsletter {margin:0 10%; width:80%;}
.mod_unsubscribe input { border:#000 solid 5px; display:block; width:255px; margin:0;}
.mod_unsubscribe .submit{ background:black; color:white; border:0 none; cursor:pointer; margin: 10px 10px 10px 0; width:110px; height:27px; line-height:27px;}
.mod_unsubscribe .submit:hover{ background:#059ad2; color:white;}