/* Feuille de style pour le contenu des pages 
 * C'est cette feuille de style qui doit être liée aux pages du site
 * La feuille de style de la charte est appelée depuis cette feuille.
 */
 
/* Import des style pour la charte */
@import "charte.css";

/* styles globaux
*********************/
*{
  margin: 0;
  padding: 0;
  }
.floatleft{
  float: left;
  }
.floatright{
  float: right;
  }
img.floatright{
  float: right;
  margin: 0 0 0 18px;
  }
.clearer{
  clear: both;
  }
a:active, a:focus{
  outline: none;
  }
a img{
  border: none;
  }
#toplink{
  position: fixed;
  bottom: 50px;
  right: 5px;
  color: #FFF;
  font: 10px Arial, Helvetica, sans-serif;
  border: 1px solid #FFF;
  padding: 4px;
  text-decoration: none;
  }
#toplink:hover{
  background: #FFF;
  color: #000;
  }

/* typographie
*********************/

/* typo > headlines
*********************/
#contenuTexte h1{
  font: italic 20px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  color: #F60;
  margin: 27px 34px 18px 0;
  border-bottom: 1px solid #DDD;
  }
#contenuTexte h1.rail{
  font: 10px/11px Arial, Verdana, sans-serif;
  color: #999;
  margin: -15px 0 18px;
  border: none;
  }
#contenuTexte h1.rail a{
  color: #999;
  }
#contenuTexte h2{
  font: italic 14px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  color: #DDD;
  margin: 0 34px 18px 18px;
  border-bottom: 1px dotted #DDD;
  clear: both;
  }
#contenuTexte h2.arrowed{
  border: none;
  line-height: 27px;
  margin: 0 34px 18px 18px;
  padding: 0 0 0 18px;
  background: url(../images/charte/h2_arrow.gif) no-repeat;
  }

/* typo > blocs
*********************/
#contenuTexte p{
  color: #DDD;
  font: 12px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  text-align: justify;
  margin: 0 0 18px;
  }
#contenuTexte p.cutted,
#contenuTexte li.cutted{
  text-align-last: justify;
  }
#contenuTexte li.nolisttag{
  list-style: none;
  }
#contenuTexte p.aligncol,
#contenuTexte ul.aligncol,
#contenuTexte ol.aligncol{
  padding: 0 35px 0 0;
  }
#contenuTexte p.center{
  text-align: center;
  }
#contenuTexte li{
  color: #DDD;
  font: 12px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  letter-spacing: -0.02em;
  text-align: justify;
  margin: 0 0 18px 18px;
  }
#contenuTexte .nospacing{
  margin: 0 0 18px;
  }
#contenuTexte .nospacing li{
  margin: 0 0 0 18px;
  }
#contenuTexte blockquote{
  border-top: 1px dotted #73B3EE;
  border-bottom: 1px dotted #73B3EE;
  text-align: center;
  font: 12px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  letter-spacing: 0.05em;
  color: #DDD;
  padding: 9px 0;
  margin: 0 34px 18px 0;
  clear: both;
  }
#contenuTexte blockquote.noborder{
  border-top: none;
  }
#contenuTexte blockquote.bordered{
  border: 1px dotted #73B3EE;
  padding: 18px;
  letter-spacing: 0.075em;
  }

/* typo > emphases
*********************/
#contenuTexte strong{
  color: #FF9B58;
  font-weight: bold;
  }
#contenuTexte .smallcaps{
  font-variant: small-caps;
  }

/* typo > liens
*********************/
#contenuTexte a{
  text-decoration: none;
  letter-spacing: 0.05em;
  border-bottom: 1px dotted #73B3EE;
  color: #73B3EE;
  }
#contenuTexte a:hover{
  border-bottom: 3px double #73B3EE;
  }
#contenuTexte a.simplelink,
#contenuTexte a.simplelink:hover{
  border: none;
  }

/* colonnes, ensembles
*********************/
#contenuTexte .semicol{
  width: 295px;
  float: left;
  margin: 0 27px 0 0;
  }
#contenuTexte .alignright{
  text-align: right;
  }

/* bloc actu
*********************/
#contenuTexte .bloc_actu{
  position: relative;
  padding: 10px;
  width: 594px;
  margin: 0 0 18px;
  border: 1px dotted #CCC;
  }
#contenuTexte .bloc_actu p.date{
  position: absolute;
  top: 13px;
  right: 11px;
  font-size: 11px;
  }
#contenuTexte .bloc_actu h2{
  margin: 0 0 9px;
  clear: none;
  }
#contenuTexte .bloc_actu .img_swap,
#contenuTexte .bloc_actu .img_noswap{
  float: left;
  width: 350px;
  padding: 0 10px 0 0;
  margin: -5px 0 0;
  }
#contenuTexte .bloc_actu .img_swap img,
#contenuTexte .bloc_actu .img_noswap img{
  margin: 5px 5px 0 0;
  float: left;
  }
#contenuTexte img.floatleft{
  margin: 0 18px 0 0;
  }
#contenuTexte .bloc_actu p{
  margin: 0 0 9px;
  }
#contenuTexte #pagination{
  clear: both;
  border-top: 1px solid #CCC;
  text-align: right;
  padding: 4px;
  margin: 0 34px 0 0;
  }

/* bloc travaux
*********************/
#contenuTexte .bloc_trav{
  width: 195px;
  margin: 0 15px 0 0;
  float: left;
  }
#contenuTexte .bloc_trav a,
#contenuTexte .bloc_trav a:hover{
  display: table-cell;
  width: 195px;
  height: 138px;
  line-height: 138px;
  text-align: center;
  border: none;
  }
#contenuTexte .bloc_trav img{
  vertical-align: middle;
  }
#contenuTexte .bloc_trav p{
  text-align: center;
  border: 1px dotted #73B3EE;
  }
#contenuTexte .bloc_trav p a,
#contenuTexte .bloc_trav p a:hover{
  display: inline;
  line-height: inherit;
  }

/* step by step
*********************/
#contenuTexte #step_palette,
#contenuTexte #step_palette2{
  margin: 20px auto 10px;
  width: 425px;
  }

/* peintre jazz pres
*********************/
#contenuTexte .bigbloc_trav{
  width: 295px;
  float: left;
  margin: 0 26px 0 0;
  }
#contenuTexte .bigbloc_trav a,
#contenuTexte .bigbloc_trav a:hover{
  border: none;
  }
#contenuTexte .bigbloc_trav img{
  display: block;
  margin: 0 0 4px;
  }
#contenuTexte .bigbloc_trav p{
  text-align: center;
  border: 1px dotted #73B3EE;
  }

/* peintre jazz cartes
*********************/
#contenuTexte .smallbloc_trav{
  width: 112px;
  float: left;
  margin: 0 14px 0 0;
  }
#contenuTexte .smallbloc_trav a,
#contenuTexte .smallbloc_trav a:hover{
  border: none;
  }
#contenuTexte .smallbloc_trav img{
  display: block;
  margin: 0 auto 4px;
  }
#contenuTexte .smallbloc_trav p{
  text-align: center;
  border: 1px dotted #73B3EE;
  }

/* peintre jazz nuit
*********************/
#contenuTexte #video_peintre_nuit,
#contenuTexte #video_presse01,
#contenuTexte #video_presse02{
  width: 320px;
  margin: 40px auto 0;
  }

/* fiche objet texte
*********************/
#contenuTexte #toile_orig{
  float: right;
  width: 100px;
  background: #000;
  padding: 0 0 10px 18px;
  text-align: center;
  font: 12px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  letter-spacing: 0.05em;
  color: #73B3EE;
  }
#contenuTexte #toile_orig a{
  border: none;
  }

/* contact
*********************/
#formContact{
  width: 990px;
  height: 185px;
  background: url(../images/charte/contact_bck.jpg);
  padding: 20px 0 0;
  }
#formContact .contactcol{
  width: 350px;
  margin: 0 0 0 75px;
  float: left;
  }
#formContact .contactcol div{
  text-align: right;
  height: 18px;
  margin: 0 0 1px;
  }
#formContact .contactcol .rowtextarea_large_m,
#formContact .contactcol .rowtextarea_large_s{
  height: 32px;
  }
#formContact .contactcol .rowtextarea_large_m label,
#formContact .contactcol .rowtextarea_large_s label{
  vertical-align: top;
  }
#formContact .contactcol .rowtextarea_large_m textarea,
#formContact .contactcol .rowtextarea_large_s textarea{
  position: relative;
  top: 2px;
  }
#formContact label{
  font: 10px/18px Arial, Helvetica, sans-serif;
  color: #FFF;
  }
#formContact input{
  width: 200px;
  height: 14px;
  padding: 2px 4px;
  background: #AEA9AA;
  border: none;
  font: 11px Arial, Helvetica, sans-serif;
  color: #000;
  margin: 1px 0 0;
  }
#formContact .rowsubmit{
  padding: 5px 0 0;
  }
#formContact .rowsubmit input{
  width: 102px;
  height: 20px;
  padding: 2px 4px;
  background: #8E8787;
  border: 1px solid #AEA9AA;
  color: #333;
  }
#formContact textarea{
  width: 200px;
  height: 28px;
  padding: 2px 4px;
  background: #AEA9AA;
  border: none;
  font: 10px Arial, Helvetica, sans-serif;
  color: #000;
  margin: 1px 0 0;
  }
.champRequis{
  color: #F00;
  }
p.small{
  font-size: 10px;
  margin: 11px 0 0;
  }
#formContact p{
  color: #DDD;
  font: 12px/18px "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  text-align: center;
  margin: 0 35px 18px 0;
  }
#formContact a{
  text-decoration: none;
  letter-spacing: 0.05em;
  border-bottom: 1px dotted #73B3EE;
  color: #73B3EE;
  }
#formContact a:hover{
  border-bottom: 3px double #73B3EE;
  }
