/*---------------------------------------
Css screen - Studio entête - version 2 
---------------------------------------*/

/*-----------------------------------------------------------------
Uniformisation du rendu html
-----------------------------------------------------------------*/

/*-- reset marges --*/

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
ul, ol, li,
fieldset, form, label,
table, tr, td {
margin: 0;
padding: 0;
}

/*-- document html --*/

html { font-size: 100%; }

/*-- div --*/

div {
overflow: hidden;
}

/*-- liens --*/

a { text-decoration: underline; }
a:active { outline: none; }
a img, a object { border: none; }

/*-- textes --*/

h1, h2, h3, h4, h5, h6 {
font-weight: normal; 
font-style: normal;
}
hr { display: none; }
sup, sub { line-height: 0; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
abbr { 
border-bottom: 1px dotted #000;
cursor: help;
}

/*-- formulaire --*/

form, fieldset { border: none; }
form label { cursor: pointer; }
input, button, select { vertical-align: middle; }

/*-- tableau --*/

table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #000;
}
td {
border: 1px solid #000;
vertical-align: top;
}

/*---------------------------------------
Conteneurs principaux
---------------------------------------*/

html {
position: relative;
background: #58585a url(images/fond-site.png) center top no-repeat;
height: 100%;
}

body {
background: transparent url(images/fond-banniere.png) center top no-repeat;
font: 0.80em/1.2em Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
}

#global {
margin: 0 auto;
padding: 0 5px;
width: 960px;
background: #FFF url(images/fond-contenu.png) center top repeat-y;
height: 1%;
}

/*---------------------------------------
Liens principaux
---------------------------------------*/

a{
color: #0076bd;
text-decoration: underline;
}

a:hover, a:focus, a:active {
color: #014b78;
text-decoration: underline;
}

/*---------------------------------------------------------------------------------------
Entête
---------------------------------------------------------------------------------------*/

#entete {
height: 173px;
width: 960px;
margin: 0 auto;
background: transparent;
padding-top: 76px;
}

#entete #logo {
float: left;
padding: 12px 0 0 25px;
}

/*---------------------------------------
Menu
---------------------------------------*/

#menu {
float: right;
}

#menu ul {
display: block;
float: left;
text-align: right;
width: 220px;
word-spacing: 0.3em;
}

#menu li{
float : right;
display : block;
width: 100%;
}

#menu li h2 {
font-size: 1.5em;
font-weight: normal;
margin: 6px 0;
}

#menu li a{
float : right;
color: #FFF;
margin: 2px 5px 2px 0;
padding: 3px 5px 4px 5px;
font-size: 1.2em;
text-decoration: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#menu a:hover, #menu a:focus, #menu a:active{
color: #FFF;
background: #58595c;
}

#menu li.current_page_item a, #menu li.current-cat a{
color: #FFF;
background: #0076bd;
}

/*---------------------------------------
Barre d'information
---------------------------------------*/

#barre-info {
height: 45px;
width: 960px;
margin: 0 auto;
}

#barre-info p{	
color: #FFF;
font-style: italic;
font-size: 1.9em;
line-height: 1.1em;
padding: 8px 0px 8px 15px;
}

/*---------------------------------------
Formulaire de recherche
---------------------------------------*/

#barre-info form{
float: right;
margin: 5px 0 0 0;
}

#barre-info form .champs_recherche {
width: 180px;
height: 15px;
padding: 8px 0 8px 3px;
}

#barre-info form input{
vertical-align: top;
}

#barre-info form input#searchsubmit{
padding : 1px 8px 0 3px;
}

/*---------------------------------------------------------------------------------------
Contenu 1 : partie haute
---------------------------------------------------------------------------------------*/

/*------------------------------------
Conteneur principal
------------------------------------*/

#contenu1 {
color: #1e1e1e;
}

/*------------------------------------
Textes
------------------------------------*/

#contenu1 h1 {
color: #757d88;
background: #FFF;
font-size: 3em;
line-height: 1.3em;
font-weight: normal;
font-style: italic;
padding: 15px;
}

#contenu1 h1.titre_creation {
font-size: 2.3em;
line-height: 1em;
height : 25px;
padding-top: 22px;
padding-bottom: 19px;
border-bottom: solid 1px #808080;
padding-right: 0px;
}

#contenu1 h1.titre_creation span{
font-size: 0.75em;
color: #707173;
}

#contenu1 h2{
font-weight: normal;
font-size: 2.5em;
line-height: 1.3em;
padding-left: 15px;
padding-top: 12px;
padding-bottom: 4px;
color: #757d88;
}

#contenu1 h3{
font-size: 2.1em;
font-weight: normal;
line-height: 1.1em;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 5px;
color: #2e2e2e;
}

#contenu1 h4{
font-size: 1.4em;
line-height: 1.2em;
font-weight: bold;
padding-left: 15px;
padding-top: 14px;
padding-bottom: 5px;
color: #2e2e2e;
}

#contenu1 p{
font-size: 1.2em;
line-height: 1.2em;
padding: 8px 20px;
}

#contenu1 ul{
font-size: 1.2em;
line-height: 1.2em;
margin : 4px 8px 8px 22px;
padding-left: 8px;
list-style: disc;
}

#contenu1 li{
padding : 5px 0px;
}

#contenu1 img{
display: block;
}

#contenu1 .g {
float: left;
}

#contenu1 .d {
float: right;
}

#contenu1 .retrait p{
text-indent: -20px;
padding-left: 40px;
}

/*------------------------------------
2 Colonnes -> très grand contenu + petit colonne à droite
------------------------------------*/

.colonne_s{
background: #FFF url(images/colonne.png) repeat-y 738px top;
height: 1%;
overflow: hidden !important;
overflow: visible;
}

#contenu1 .colonne_s_g{
width: 738px;
float: left;
margin-bottom: 10px;
}

#contenu1 .colonne_s_g p{
padding: 8px 0px 8px 11px;
}

#contenu1 .colonne_s_g img{
padding: 10px 0;
display: block;
}

/*-- colonne de droite --*/

#contenu1 .colonne_s_d, #contenu1.colonne_s_d{
float: right;
width: 222px;
margin-bottom: 10px;
height: 1%;
}

#contenu1 .colonne_s_d h2{
font-size: 1.3em;
font-style: italic;
text-align: center;
line-height: 1em;
height : 25px;
padding: 0;
padding-top: 23px;
padding-bottom: 18px;
border-bottom: solid 1px #808080;
border-left: solid 1px #808080;
}

#contenu1 .colonne_s_d h3{
padding: 20px 8px 4px 8px;
color: #757d88;
font-size: 1.4em;
line-height: 1.2em;
}

#contenu1 .colonne_s_d p{
padding: 8px;
}

#contenu1 .colonne_s_d img{
padding: 10px 0px 0px 10px;
display: block;
}

#contenu1 .colonne_s_d ul{
line-height: 1em;
margin : 5px 8px 5px 16px;
}

#contenu1 .colonne_s_d li {
padding : 5px 0px;
}

/*------------------------------------
2 Colonnes -> grand contenu + colonne moyenne à droite
------------------------------------*/

.colonne_m{
background: #FFF url(images/colonne.png) repeat-y 535px top;
height: 1%;
overflow: hidden !important;
overflow: visible;
}

#contenu1.colonne_m_m h3 span{
font-size: 1.6em;
letter-spacing: 5px;
color: #239ee7;
}

#contenu1 .colonne_m_g{
width: 540px;
float: left;
margin-bottom: 10px;
}

#contenu1 .colonne_m_d{
width: 420px;
float: right;
margin-bottom: 10px;
}

/*------------------------------------
2 Colonnes -> moitié / moitié
------------------------------------*/

.colonne_m_m{
background: #FFF url(images/colonne.png) repeat-y 475px top;
height: 1%;
overflow: hidden !important;
overflow: visible;
}

#contenu1 .colonne_m_m_g{
width: 480px;
float: left;
margin-bottom: 10px;
}

#contenu1 .colonne_m_m_d{
width: 480px;
float: right;
margin-bottom: 10px;
}

/*------------------------------------
Pagination
------------------------------------*/

#pagination{
overflow: hidden !important;
overflow:visible;
height: 1%;
clear: both;
background: #FFF;
padding: 12px 10px;
border-top: solid 1px #808080;
}

/*---------------------------------------
Lien vers contact
---------------------------------------*/

#accroche-contact {
overflow: hidden !important;
overflow:visible;
height: 1%;
border-top: solid 1px #808080;
text-align: center;
padding: 2px 0;
background: #239ee7;
clear: both;
font-size: 1.05em;
}

#accroche-contact a{
color: #fff; 
text-decoration: none;
margin: 2px 5px 2px 0;
padding: 3px 5px 4px 5px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background: #0076bd;
}

#accroche-contact a:hover, #accroche-contact a:focus, #accroche-contact a:active {
color: #fff;
background: #014b78;
text-decoration: none;
}

/*------------------------------------
Vignettes
------------------------------------*/

div#vignette_h {
clear: both;
border-top: solid 1px #808080;
border-bottom: solid 1px #808080;
background: #FFF;
overflow: hidden !important;
overflow: visible;
height: 1%;
}

#contenu1 #vignette_h h2{
padding: 8px 0px 8px 15px;
font-style: italic;
color: #757d88;
}

span.vignette{
width: 138px;
margin: 0 10px;
display: inline;
text-align: center;
float: left;
height: 190px;
}

span.vignette a{
text-decoration : none;
}

span.vignette img {
padding: 10px 14px 3px;
display: inline;
text-decoration: none;
}

span.vignette strong {
margin-top: 2px;
display: block;
}

/*------------------------------------
Diaporama
------------------------------------*/

div#diaporama{
margin: 0;
}

#diaporama img{
display: block;
margin: 0 15px;
text-align: center;
}

/*---------------------------------------
Formulaire de contact
---------------------------------------*/

p.important{
color : #b83b03;
}

#contact-form label{
float:left;
font-weight: bold;
text-align:right;
width: 120px;
padding: 3px 10px 9px 0;
}

#contact-form textarea {
border:1px solid #808080;
}

#contact-form input.textfield {
border:1px solid #808080;
padding: 3px;
width: 200px;
}

#contact-form input.textfield:focus, #contact-form textarea:focus {
background: #e9e9e9;
}

/*---------------------------------------
Pages diverses contenu 1
---------------------------------------*/

/* genèse */

.genese{
background: url(images/biberon.jpg) no-repeat 50px 70px;
padding-left : 440px;
padding-top: 10px;
padding-bottom: 30px;
height: 1%;
overflow: hidden !important;
overflow: visible;
}

/* notre approche */

.notre-approche{
background: url(images/langoustine.jpg) no-repeat 190px 140px;
height: 550px;
}

/* références */

#contenu1.references ul li{
padding : 5px 0px 20px;
}

/*---------------------------------------------------------------------------------------
Contenu 2 : partie basse
---------------------------------------------------------------------------------------*/

#contenu2 {
background: #000 url(images/colonne.png) repeat-y 246px top;
color: #FFF;
clear: both;
overflow: hidden !important;
overflow:visible;
height: 1%;
}

#contenu2 a{
color: #239ee7; 
text-decoration: underline;
}

#contenu2 a:hover, #contenu2 a:focus, #contenu2 a:active {
color: #0076bd;
text-decoration: underline;
}

/*------------------------------------
Textes
------------------------------------*/

#contenu2 h2{
font-weight: normal;
font-size: 2.5em;
line-height: 1.3em;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 0px;
color: #FFF;
}

#contenu2 h3{
font-size: 2.1em;
font-weight: normal;
line-height: 1.1em;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 5px;
color: #FFF;
}

#contenu2 h3 span{
color: #239ee7;
font-size: 1.6em;
letter-spacing: 5px;
}

#contenu2 p{
font-size: 1.2em;
line-height: 1.2em;
padding: 8px 15px;
}

#contenu2 ul{
font-size: 1.2em;
line-height: 1.2em;
margin : 4px 8px 8px 18px;
padding-left: 8px;
list-style: disc;
}

#contenu2 li{
padding : 5px 0px;
}

/*------------------------------------
Colonne gauche
------------------------------------*/

#contenu2 .colonne_g{
float: left;
width: 246px;
}

#contenu2 .colonne_g object{
margin : 8px;
}

/*------------------------------------
Colonne droite
------------------------------------*/

#contenu2 .colonne_d{
float: right;
width: 714px;
}

/*------------------------------------
Liens
------------------------------------*/

#liens {
border-top: solid 1px #808080;
padding: 12px 8px;
margin: 8px 0;
}

#liens a {
margin: 4px;
}

#liens a img{
border: solid 1px #595959;
}

#liens a:hover img, #liens a:focus img, #liens a:active img{
border: solid 1px #239ee7;
}

/*---------------------------------------
Pied de page
---------------------------------------*/

#pied {
background: #0076bd url(images/fond-pied.png) repeat-x center top;
clear: both;
}

#pied div {
background: #0076bd url(images/fond-pied2.png) no-repeat center top;
margin: 0 auto;
padding-bottom: 13px;
width: 970px;
}

#pied p{
margin: 15px 15px 11px 15px;
color: #FFF;
font-size: 1.25em;
line-height: 1.3em;
font-style: italic;
}

#pied ul{
padding: 0 10px;
}

#pied ul li{
float: left;
}

#pied ul.valide_w3c{
float: right;
}

#pied li a {
margin: 2px 5px 2px 0;
padding: 3px 5px 4px 5px;
text-decoration: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#pied a{
color: #fff;
background: #239ee7;
}

#pied a:hover, #pied a:focus, #pied a:active{
background: #014b78;
}