body {
  background-color: #fff;
  color: #000;
  
  /* centrage horizontal */
  text-align: center;
  font-family: 'Times New Roman',Times,serif;
  font-size: medium;
  
  padding: 0;
  margin: 0;
}
em {font-size: 100%}
a {text-decoration: none; color: #000;}
a:hover {color: #ef3e2e;}
img {border: 0;}

.nowrap { white-space: nowrap; }
.spacer {clear: both;}
.clearleft {clear: left;}
.clearright {clear: right;}
.floatleft {float: left; padding-right: 10px;}
.floatright {float: right; padding-left: 10px;}

#conteneur {
  /* centrage horizontal  */
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 750px;
  margin-top: 20px;
  
 background-image: url(images/fond-themes.png);
 background-repeat: repeat-y; 
}
#accueil #conteneur {background-image: none;}
#accueil #cadre {
  text-align: left;
  width: 750px;
  height: 524px;
  
  background-image: url(images/fond-accueil.png);
  background-repeat: no-repeat; 
}
#accueil p {
  text-align: center;
  font-size: 12pt;
  padding: 5px 10px;
  width: 430px;
  line-height: 1em;
}
#accueil #vignettes-themes a.vignette {
  padding: 1px 10px;
  position: relative;
}

#enfance.vignette {bottom: 50px;}
#femmes.vignette  {}
#arts.vignette {bottom: 35px;}
#politique.vignette {bottom: 20px;}
#voyages.vignette {}

#en-tete {
  background-image: url(images/fond-themes-top.gif);
  background-repeat:no-repeat;
  height: 322px;
}

#en-tete.reponses {
  background-image: url(images/fond-reponses-top.gif);
  background-repeat:no-repeat;
  height: 193px;
}

#contenu {
 width: 670px;
 margin-top: -270px;
 padding: 10px 40px;
 }
 
 #pied {  
  clear: both;
  text-align: center;
  font-size: small;
  font-weight: normal;
  width: 750px;
  
  background-color: #fff;
  padding-bottom: 1em;
}

#pied a#lienexpo {color: #ef3e2e; font-weight: bold;}
#pied a:hover {text-decoration: underline;}

#pied hr {
  height: 1px;
  width: 400px;
  color: #000;
  background-color: #000;
}

#logo-lectura {
  display: inline;
}

#bandeau-menu {
  font-size: 14pt;
  letter-spacing: 4.8px;
  
  position: relative; 
  left: 0;
  bottom: 10px;
}
#accueil #bandeau-menu {
  visibility: hidden;
}
#bandeau-menu a {
  letter-spacing: normal;
}
#bandeau-menu a#current {
  color: #ef3e2e;
}
img#titre {
  position: relative;
  left: 95px;
}
#reponses img#titre {
  float: right;
  position: relative; 
  top: 35px;
  left: -100px;
}
/* Hack : target safari  */
html[xmlns*=""] body:last-child #reponses {margin-top: 100px;}

#plan img#titre {
  float: right;
  padding-top: 25px;
  padding-right: 230px;
}
#plan ul li {padding-top: 1em; font-size: 14pt;}
#plan ul li li {padding-top: 0.5em; font-size: 13pt;}

.reponses img#toile {
  float: left;
  position: relative;
  left: 76px;
  top: 30px;
}
img#toile {
  float: right;
  position: relative;
  top: 50px;
  right: 50px;
}
#accueil img#toile {top: 30px; right: 40px;}

#reponses .question {
  position: relative;
  top: 100px;
}
#plan #contenu {
  margin-top: 10px;
}

#retour {position: relative; left: 50px; color: #ef3e2e; font-style: italic;}
a:hover#retour {text-decoration: underline;}
#reponses h3 {text-align: center; font-size: 130%;}
#reponses .question h2 {font-size: 18pt; font-weight: normal; font-style: italic;}
.reponse {padding: 180px 20px 10px 20px; font-weight: 700;}
#plan .reponse {padding: 0;}
.separateur {text-align: center; width: 670px;}

#questions hr {
  color: #c4c4c4;
  height: 1x;
  width : 250px;
  display: none;
}

.question {
  width: 600px;
  line-height: 0.8em;
  padding-bottom: 1em;
  padding-top: 2em;
  clear: right;
}
.question h2 {
  display: block;
  margin: 0;
  font-size: 20pt;
}
.question h2 .libelle {
  font-size: 65%;
  line-height: 1.2em;
  padding-top: 0.5em;
  padding-left: 1.5em;
  display: block;
}
.question .image-legende {
  float: right;
  margin-right: 50px;
  text-align: center;
}
.legende {
  font-size: 80%;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  margin-top: 3px;
  padding-bottom: 1em;
}

.indication {
  font-style: italic;
  float: right;
  position: relative;
  clear: right;
}

.question a.lienresponse {
  color: #ef3e2e;
  float: right;
}
.question a.lienresponse img {padding: 10px;}

#questions .indication {right: 50px;}
#reponses .indication {right: 240px;}

/* d'une manière générale la question 1 ne doit pas dépasser 420px (pour ne pas passer sous la toile) */
#questions #q1.question {width: 410px;}

.bordered {border: 1px solid black;}

#enfance #questions #q2.question {margin-left: 120px; width: 480px;}
#enfance #questions #q3.question {width: 550px;}
#enfance #questions #q4.question {margin-left: 50px; width: 550px;}
#enfance #questions #q4 .legende {width: 550px;}
#enfance #questions #q5.question {width: 550px;}

#enfance #reponses #r2 #raillane {width: 227px; padding: 5px; float: right;}
#enfance #reponses #r2 #cathedrale {width: 600px;}
#enfance #reponses #r3 #grenette {width: 680px;}
#enfance #reponses #r4 #plan  {width: 680px;}
#enfance #reponses #r5 .imgblock {float: left; padding: 0 7px;}
#enfance #reponses #r5 #a  {width: 192px;}
#enfance #reponses #r5 #b  {width: 222px;}
#enfance #reponses #r5 #c  {width: 173px;}

#femmes #reponses #r1 .imgblock  {width: 652px;}
#femmes #questions #q1 .imgblock  {width: 300px; padding: 10px;}
#femmes #questions #q2.question {margin-left: 120px; width: 520px;}
#femmes #questions #q3.question {margin-left: 40px;}
#femmes #reponses #r2 #femmes-r2a  {width: 637px; padding: 5px 15px;}
#femmes #reponses #r2 #l1  {float: left; width: 120px; padding-left: 95px;}
#femmes #reponses #r2 #l2  {float: left; width: 120px; padding-left: 47px;}
#femmes #reponses #r2 #l3  {float: left; width: 120px; padding-left: 47px;}
#femmes #reponses #r2 #femmes-r300_069v  {width: 600px; padding: 5px 30px;}
#femmes #reponses #r3 #femmes-r299_2B222  {width: 581px;}
#femmes #reponses #r3 #femmes-C2127_3_265  {width: 300px; padding-top: 0px;}

#arts #reponses #r1 #arts-r300b_135  {width: 201px; float: right; padding-top: 10px; padding-bottom: 0; padding-left: 10px;}
#arts #reponses #r1 #arts-v23045  {width: 265px; float: left; padding-right: 10px;}
#arts #reponses #r1 #arts-v32655_097  {width: 274px; float: right; padding-left: 10px;}
#arts #reponses #r1 #l1  {float: left; width: 150px; padding-left: 5px;}
#arts #reponses #r1 #l2  {float: left; width: 148px; padding-left: 9px;}
#arts #reponses #r1 #l3  {float: left; width: 164px; padding-left: 9px;}
#arts #reponses #r1 #l4  {float: left; width: 135px; padding-left: 9px;}
#arts #questions #arts-amst_426b {width: 420px;}
#arts #questions #q1.question {margin-left: 120px; width: 480px;}
#arts #reponses #r2 #arts-c705_55  {width: 590px;}
#arts #fleche4 {float: right; margin-top: 10px;}
#arts #reponses #r2 #arts-r5896_15_175v  {width: 352px; margin-left: 60px;}
#arts #questions #q2.question .imgblock {float: right; width: 352px;}
#arts #questions #q2.question #part2 {clear: right;}
#arts #questions #q3.question {margin-left: 100px; width: 540px;}
#arts #reponses #r2 #arts-r289_14_269  {width: 300px; float: left; padding-right: 10px;}
#arts #reponses #r2 #arts-v28103  {width: 303px; float: right; padding-left: 10px;}
#arts #reponses #r3 .imgblock  {width: 632px;}
#arts #reponses #r3 #l1  {float: left; width: 162px; padding-left: 0px;}
#arts #reponses #r3 #l2  {float: left; width: 252px; padding-left: 10px;}
#arts #reponses #r3 #l3  {float: left; width: 202px; padding-left: 5px;}

#politique #questions #q2.question {margin-left: 120px; width: 480px;}
#politique #questions #q3.question {width: 550px;}
#politique #questions #q4.question {margin-left: 50px; width: 550px;}
#politique #questions #q5.question {width: 550px;}

#politique  #questions #q1 .imgblock {width: 650px; padding-left: 20px; padding-top: 60px;}
#politique  #questions #q1 .lienresponse, #politique  #questions #q1 .indication {position: relative; left: 250px;}
#politique  #reponses #r1 #politique-e85dar02_a {width: 250px; float: left; padding-left: 40px;}
#politique  #reponses #r1 #politique-r90704_1 {width: 188px; float: right; padding-right: 40px;}
#politique  #reponses #r1 #politique-r292_1_001 {width: 200px; float: left; padding-right: 10px;} 
#politique  #reponses #r1 #politique-r288 {width: 200px; float: right; padding-left: 10px;}
#politique  #reponses #r2 .imgblock {width: 300px; padding-top: 0;}
#politique  #reponses #r2 {margin-top: 150px;}
#politique  #reponses #r2 #politique-r90562_09 {width: 200px; padding-bottom: 30px; margin-top: -150px;}
#politique  #reponses #r3 #politique-mj6373_123 {width: 269px; float: left;}
#politique  #reponses #r3 #politique-amst_298 {width: 300px; float: right;}
#politique  #reponses #r3 #politique-amst_212 {width: 631px;}
#politique #reponses #r3 #l1  {float: left; width: 133px; padding-left: 5px;}
#politique #reponses #r3 #l2  {float: left; width: 146px; padding-left: 105px;}
#politique #reponses #r3 #l3  {float: left; width: 131px; padding-left: 103px;}
#politique  #reponses #r4 #politique-pg_1 {width: 630px;}
#politique  #reponses #r4 #politique-R289_5_211 {width: 180px;}
#politique  #reponses #r4 #politique-a812-2_4_191 {width: 630px;}
#politique  #reponses #r4 #politique-a812-2_6_pl279 {width: 630px;}
#politique  #questions #q5 .imgblock {width: 300px; float: right; padding-top: 10px;}
#politique  #reponses #r5 #politique-r00301_1_1_1d_029 {width: 200px; float: left; padding-right: 10px;}
#politique  #reponses #r5 #politique-v36618_1_000 {width: 200px; float: right; padding-left: 10px;}

#voyages #questions #q2.question {margin-left: 120px; width: 480px;}
#voyages #questions #q2.question .imgblock {float: left; width: 197px;}
#voyages #questions #q3.question {margin-left: 30px; width: 550px;}
#voyages  #reponses #r1 .imgblock {width: 250px;}
#voyages  #reponses #r1 #voyages-marjg_6428 {width: 630px;}
#voyages  #reponses #r1 #voyages-MarjG_5116 {width: 630px;}
#voyages  #reponses #r1 #voyages-r1 {width: 650px; padding-left: 20px;}
#voyages  #reponses #r2 .imgblock {width: 300px; padding-top: 0;}
#voyages  #reponses #r2 #voyages-marjg_6093 {width: 237px; padding-top: 0;}
#voyages  #reponses #r3 #voyages-marjg_2884 {width: 630px;}
#voyages  #reponses #r3 #voyages-marjg_2947 {width: 350px;}
#voyages  #reponses #r3 #voyages-marjg_2961 {width: 207px;}
#voyages  #reponses #r3 #voyages-r9981_001 {width: 200px; padding-top: 0;}