@page { size:landscape; }

html	{font-size: 100%;}
body	{font-size: .8em;}

* { font-family : "Trebuchet MS",Geneva,Arial,Helvetica,sans-serif; }
body {
background:#b3b2b2 url('img/fond_vitrine.png') top left repeat-x;
margin: 0; 
padding: 0; 
text-align:center;
}

#conteneur {
height:485px;
left: 50%; 
margin-top: -242px; /* moitié de la hauteur */
margin-left: -400px; /* moitié de la largeur */
position:absolute;
text-align:left;
top: 50%;
width:800px;
}



/*** Langues ***/
#langues {
background-color:transparent;
color:#FFF;
font-size:9pt;
height:20px;
left:0;
position:absolute;
text-align:right;
top:0;
width:800px;
}
#langues a{color:#FFF; padding:0 3px 0 3px}
#langues a:hover{
background-color:#FFF;
color:#000;
}


/*** Onglets ***/
#onglets {
background-color:#000;
border-bottom:7px solid #000;
color:#FFF;
left:0;
height:25px;
margin:0;
padding:5px 0 0 0;
position:absolute;
top:20px;
width:800px;
}
#onglets ul {
list-style-type:none;
margin:0;
padding:0 0 0 5px;
position:absolute;
bottom:3px;
}
#onglets li {
float:left;
margin:0 10px 0 0;
}
#onglets #contact {
float:right;
margin-right:15px;
}
#onglets li a, #onglets li span {
color:#FFF;
padding:3px 5px 3px 5px;
}
#onglets li a:hover, #onglets li.active span {
background-color:#FFF;
color:#FFF;
}


/*** Corps de la page ***/
#corps {
background-color:#FFF;
height:385px;
left:0;
position:absolute;
top:57px;
width:800px;
}
#gauche {
background:url('img/separation.png') top right repeat-y;
left:0;
height:358px;
margin:0 5px 0 0;
padding:15px 15px 0 15px;
position:absolute;
top:0;
width:280px;
}
#gauche #identite {
height:200px;
position:relative;
overflow:auto;
}
#gauche h1 {
color:#6A6968;
line-height:12pt;
font-size:13pt;
margin-bottom:5px;
}
#gauche h1 .baseline {
color:#6A6968;
font-size:9pt;
}
#gauche #identite .logo {
position:absolute;
left:0;
margin-right:10px;
}
#gauche #identite img {
border:0;
margin-top:5px;
}
#gauche #identite #coordonnees {
margin-left:90px;
}

#gauche #identite p, #gauche #identite a {
color:#929090;
font-size:8pt;
}

#gauche #identite #rubrique {clear:both;font-size:9pt;}
#gauche #identite #specialites {font-size:8pt;}
#gauche #identite #specialites strong {color:#000;}

#gauche #quelques_realisations {
bottom:0;
height:131px;
left:0;
padding-left:15px;
position:absolute;
width:280px;
}

#gauche #quelques_realisations h2 {
border-bottom:3px solid #000;
color:#6a6968;
margin-bottom:15px;
margin-right:10px;
}
#gauche #quelques_realisations ul {
margin:0;
padding:0;
list-style-type:none;
}
#gauche #quelques_realisations li {
float:left;
margin-right:10px;
}
#gauche #quelques_realisations li a img {
border:0;
height:60px;
width:60px;
}

#contenu {
height:343px;
margin:0;
overflow:auto;
padding:15px 20px 15px 40px;
position:absolute;
right:0;
top:0;
width:430px;
}

#contenu h1 {
color:#FFF;
font-size:180%;
font-weight:normal;
padding:0 5px 0 5px;
margin-bottom:15px;
}
#contenu h2 {font-size:140%}
#contenu h3, #contenu h4 {font-size:100%}
#contenu p {
margin-bottom:10px;
margin-left:15px;
}

#contenu ul {list-style-type:square;padding-left:55px;}
#contenu ol {padding-left:55px;}
#contenu address {
font-style:normal;
margin:0 0 0 15px;
padding:0;
}
#contenu form {
margin:0;
padding:10px;
background:#F3F3F3;
}
#contenu form .message_avertissement {color:#F7AA0D;font-style:italic;font-weight:bold;}
#contenu form fieldset {border:1px solid #CCC; margin-bottom:15px;}
#contenu form fieldset legend {color:#787879;font-weight:bold;}
#contenu form input, form textarea, form select {font-size:9pt;}
#contenu form textarea.big {
height:12em;
width:90%;
}
#contenu form p.text label{
cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
float: left;	/*** Très important, ne pas suprimer ! ***/
line-height: 1em;	/*** ... et centrés verticalement. ***/
margin: 0;
padding: 0 .5em 0 0;
text-align: right;	/*** ... et ils sont alignés à droite... ***/
width: 35%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
}
#contenu form p.radio span {
margin-left:35%;
}
#contenu form p.radio span.label {
display:block;
float:left;
line-height:1em;
margin:0;
text-align:right;
width:35%;
}
#contenu form p.radio span.input {
display:block;
padding-left:.5em;
text-align:left;
}
#contenu form p.validation {
text-align:center;
}
#contenu form p.validation input{
background-color:#000;
border:1px solid #000;
color:#FFF;
cursor:pointer;
font-weight:bold;
margin-top:10px;
}
#contenu form input.validation  {
background-color:#000;
border:1px solid #000;
color:#FFF;
cursor:pointer;
font-weight:bold;
}

#contenu.realisations li {margin:5px}
#contenu.realisations img {border:0;height:75px;width:75px;}
#contenu.realisations ul {list-style-type:none;padding-left:15px;}
#contenu.realisations ul li {display:block;float:left;height:75px;margin:5px;text-align:center;width:75px;}
#contenu.realisations h2 {clear:both;margin-bottom:5px;padding-top:10px;}

/*** Pied de page ***/
#pied_page {
background-color:#000;
bottom:20px;
color:#FFF;
height:25px;
margin:0;
padding:5px 0 5px 0;
position:absolute;
width:800px;
}
#pied_page ul {
bottom:0;
list-style-type:none;
margin:0;
padding:0px 0 0 10px;
}
#pied_page li {
float:left;
margin-right:15px;
}
#pied_page li a {
color:#FFF;
padding:3px 5px;
}
#pied_page li a:hover {color:#F7AA0D;}
#pied_page ul li a.ajouter_selection {background:url('img/btn_ajouter_selection.gif') center left no-repeat;padding-left:17px;}
#pied_page ul li a.envoyer_mail{background:url('img/btn_envoyer_mail.gif') center left no-repeat;padding-left:23px;}
#pied_page ul li a.enregistrer_pdf{background:url('img/btn_enregistrer_pdf.gif') center left no-repeat;padding-left:20px;}
#pied_page ul li a.imprimer{background:url('img/btn_imprimer.gif') center left no-repeat;padding-left:26px;}

#pied_page #lien_bepub {
float:right;
margin-right:15px;
}
#pied_page #lien_bepub a img {
border:0;
}

/*** Mentions ***/
#mentions {
color:#FFF;
bottom:0;
font-size:9pt;
height:20px;
position:absolute;
text-align:center;
width:800px;
}
#mentions a {color:#FFF;}
#mentions a:hover {color:#3C3C3E;}

/*** STYLES COMMUNs ***/
hr.spacer {
clear:both;
visibility:hidden;
}

/*** Adaptations du style graphique selon la rubrique ***/
.architecture #contenu h1 {background-color:#7E450A;}
.architecture #contenu h2, .architecture #contenu h3 {color:#7E450A;}
.architecture #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #7E450A;}
.architecture #onglets {border-bottom:7px solid #7E450A;}
.architecture #onglets li a:hover, .architecture #onglets li.active span {background-color:#7E450A;}
.architecture #gauche {border-right:2px solid #7E450A;}
.architecture #gauche h1 {color:#7E450A;}
.architecture #gauche #identite #specialites {color:#7E450A;}
.architecture #gauche #quelques_realisations h2 {border-bottom:3px solid #7E450A;}

.arts_graphiques #contenu h1 {background-color:#E31A25;}
.arts_graphiques #contenu h2, .arts_graphiques #contenu h3 {color:#E31A25;}
.arts_graphiques #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #E31A25;}
.arts_graphiques #onglets {border-bottom:7px solid #E31A25;}
.arts_graphiques #onglets li a:hover, .arts_graphiques #onglets li.active span {background-color:#E31A25;}
.arts_graphiques #gauche {border-right:2px solid #E31A25;}
.arts_graphiques #gauche h1 {color:#E31A25;}
.arts_graphiques #gauche #identite #specialites {color:#E31A25;}
.arts_graphiques #gauche #quelques_realisations h2 {border-bottom:3px solid #E31A25;}

.photographie #contenu h1 {background-color:#F29400;}
.photographie #contenu h2, .photographie #contenu h3 {color:#F29400;}
.photographie #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #F29400;}
.photographie #onglets {border-bottom:7px solid #F29400;}
.photographie #onglets li a:hover, .photographie #onglets li.active span {background-color:#F29400;}
.photographie #gauche {border-right:2px solid #F29400;}
.photographie #gauche h1 {color:#F29400;}
.photographie #gauche #identite #specialites {color:#F29400;}
.photographie #gauche #quelques_realisations h2 {border-bottom:3px solid #F29400;}

.imprimerie #contenu h1 {background-color:#8ABC46;}
.imprimerie #contenu h2, .imprimerie #contenu h3 {color:#8ABC46;}
.imprimerie #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #8ABC46;}
.imprimerie #onglets {border-bottom:7px solid #8ABC46;}
.imprimerie #onglets li a:hover, .imprimerie #onglets li.active span {background-color:#8ABC46;}
.imprimerie #gauche {border-right:2px solid #8ABC46;}
.imprimerie #gauche h1 {color:#8ABC46;}
.imprimerie #gauche #identite #specialites {color:#8ABC46;}
.imprimerie #gauche #quelques_realisations h2 {border-bottom:3px solid #8ABC46;}

.communication #contenu h1 {background-color:#077C2D;}
.communication #contenu h2, .communication #contenu h3 {color:#077C2D;}
.communication #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #077C2D;}
.communication #onglets {border-bottom:7px solid #077C2D;}
.communication #onglets li a:hover, .communication #onglets li.active span {background-color:#077C2D;}
.communication #gauche {border-right:2px solid #077C2D;}
.communication #gauche h1 {color:#077C2D;}
.communication #gauche #identite #specialites {color:#077C2D;}
.communication #gauche #quelques_realisations h2 {border-bottom:3px solid #077C2D;}

.evenementiel #contenu h1 {background-color:#8E457D;}
.evenementiel #contenu h2, .evenementiel #contenu h3 {color:#8E457D;}
.evenementiel #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #8E457D;}
.evenementiel #onglets {border-bottom:7px solid #8E457D;}
.evenementiel #onglets li a:hover, .evenementiel #onglets li.active span {background-color:#8E457D;}
.evenementiel #gauche {border-right:2px solid #8E457D;}
.evenementiel #gauche h1 {color:#8E457D;}
.evenementiel #gauche #identite #specialites {color:#8E457D;}
.evenementiel #gauche #quelques_realisations h2 {border-bottom:3px solid #8E457D;}

.audiovisuel #contenu h1 {background-color:#E6458F;}
.audiovisuel #contenu h2, .audiovisuel #contenu h3 {color:#E6458F;}
.audiovisuel #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #E6458F;}
.audiovisuel #onglets {border-bottom:7px solid #E6458F;}
.audiovisuel #onglets li a:hover, .audiovisuel #onglets li.active span {background-color:#E6458F;}
.audiovisuel #gauche {border-right:2px solid #E6458F;}
.audiovisuel #gauche h1 {color:#E6458F;}
.audiovisuel #gauche #identite #specialites {color:#E6458F;}
.audiovisuel #gauche #quelques_realisations h2 {border-bottom:3px solid #E6458F;}

.multimedia #contenu h1 {background-color:#0069A5;}
.multimedia #contenu h2, .multimedia #contenu h3 {color:#0069A5;}
.multimedia #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #0069A5;}
.multimedia #onglets {border-bottom:7px solid #0069A5;}
.multimedia #onglets li a:hover, .multimedia #onglets li.active span {background-color:#0069A5;}
.multimedia #gauche {border-right:2px solid #0069A5;}
.multimedia #gauche h1 {color:#0069A5;}
.multimedia #gauche #identite #specialites {color:#0069A5;}
.multimedia #gauche #quelques_realisations h2 {border-bottom:3px solid #0069A5;}

.marketing #contenu h1 {background-color:#83CFF0;}
.marketing #contenu h2, .marketing #contenu h3 {color:#83CFF0;}
.marketing #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #83CFF0;}
.marketing #onglets {border-bottom:7px solid #83CFF0;}
.marketing #onglets li a:hover, .marketing #onglets li.active span {background-color:#83CFF0;}
.marketing #gauche {border-right:2px solid #83CFF0;}
.marketing #gauche h1 {color:#83CFF0;}
.marketing #gauche #identite #specialites {color:#83CFF0;}
.marketing #gauche #quelques_realisations h2 {border-bottom:3px solid #83CFF0;}

.medias #contenu h1 {background-color:#02121E;}
.medias #contenu h2, .medias #contenu h3 {color:#02121E;}
.medias #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #000;}
.medias #onglets {border-bottom:7px solid #02121E;}
.medias #onglets li a {border:1px solid #000;}
.medias #onglets li a:hover, .medias #onglets li.active span {border:1px solid #FFF; background-color:#000;}
.medias #gauche {border-right:2px solid #02121E;}
.medias #gauche h1 {color:#02121E;}
.medias #gauche #identite #specialites {color:#02121E;}
.medias #gauche #quelques_realisations h2 {border-bottom:3px solid #02121E;}

.services #contenu h1 {background-color:#A9A8A9;}
.services #contenu h2, .services #contenu h3 {color:#A9A8A9;}
.services #contenu.realisations h2 {color:#6A6968;border-bottom:3px solid #A9A8A9;}
.services #onglets {border-bottom:7px solid #A9A8A9;}
.services #onglets li a:hover, .services #onglets li.active span {background-color:#A9A8A9;}
.services #gauche {border-right:2px solid #A9A8A9;}
.services #gauche h1 {color:#A9A8A9;}
.services #gauche #identite #specialites {color:#A9A8A9;}
.services #gauche #quelques_realisations h2 {border-bottom:3px solid #A9A8A9;}