body {
  background-color:#000;
  font-family: ufp, Verdana, Arial, sans-serif;
 }

@font-face {
 font-family: ufp;
 src: url("FE.eot") /* EOT file for IE */
}
@font-face {
 font-family: ufp;
 src: url("FE.TTF") /* TTF file for CSS3 browsers */
} 


/* Color of standard Button */
.button {
color: #ffffff;
font: bold 12px/1.5em ufp;
background-color: #AA0000;

}

.hover {
color: #FFFF00;
font: bold 12px/1.5em ufp;
background-color: #6E0101;
}
 
 a, a:visited {
  text-decoration:none;
  }

 a:hover {
  text-decoration:none;
  color:yellow;
 }

 img, embed, iframe {
  /*#9cf #fc6 #999 #c66 #c9c*/
  border-top:0.5em solid #9cf;
  border-bottom:0.5em solid #fc6;
  border-left:0.5em solid #c66;
  border-right:0.5em solid #c9c;
  border-radius: 1em;
  margin: 0.1em;
  padding: 0.5em;
 }

 input, textarea {
  border-radius: 1em;
  margin: 0.1em;
 }

 .relative_div {
  position:relative;
 }

 .retour_chariot {
  position:relative;
  display: block;
  height:1em;
 }
 
 a.bouton {
  background-color:#f90;
  border-radius: 2em;
  color:#000;
  text-decoration:none;
  height:0.8em;
  line-height:0.8em;
  font-weight:bold;
  font-size:1em;
  text-align:center;
  border-top:0.5em solid #f90;
  border-bottom:0.5em solid #f90;
  border-left:1em solid #f90;
  border-right:1em solid #f90;
  display:inline-block;
 }

 .bouton:hover {
  background-color:#fc6;
  border-top:0.5em solid #fc6;
  border-bottom:0.5em solid #fc6;
  border-left:1em solid #fc6;
  border-right:1em solid #fc6;
 }

 .bloc_contenu {
  position:relative;
 }

 .bloc_titre {
  position:relative;
  color:#ffe7ad;
 }

 .contenu_titre {
  position:relative;
  left:4em;
  font-weight: bold;
  font-size: 2em;
 }

 .haut_gauche {
  z-index:90;
  position: absolute;
  background-color:#c9c; /* #9cf #fc6 #999 #f90(selected) #c66 */
  width: 5em;
  height: 2.3em;
  top: 0.5em;
  left: 0.5em;
  border-top-left-radius: 2em;
 }
 .concave_haut_gauche {
  z-index:99;
  position: absolute;
  background-color:#000;
  border-top-left-radius:1.5em;
  width: 5em;
  height: 1.5em;
  top: 1.5em;
  left: 4.3em;
 }
 .cache_haut_gauche {
  z-index:80;
  position: absolute;
  background-color:#000;
  top:0em;
  left:0em;
  width: 5.5em;
  height: 3em;
 }

 .haut_gauche_1 {
  position: absolute;
  background-color:#c9c;
  height: 1em;
  width: 5em;
  top: 0.5em;
  left: 5.5em;
  margin: 0em;
 }

 .haut_gauche_2 {
  position: absolute;
  background-color:#fc6;
  height: 1em;
  width: 8em;
  top: 0.5em;
  left: 10.7em;
 }

 .haut_mid {
  position: absolute;
  background-color:#9cf;
  height: 1em;
  top: 0.5em;
  left: 18.9em;
  right: 18em;
 }

 .haut_droite_2 {
  position: absolute;
  background-color:#999;
  height: 1em;
  width: 1em;
  top: 0.5em;
  right: 16.8em;
 }

.haut_droite_1 {
  position: absolute;
  background-color:#c66;
  height: 1em;
  width: 11.6em;
  top: 0.5em;
  right: 5em;
  margin: 0em;
}

 .haut_droite {
  position: absolute;
  background-color:#c66; /* #9cf #fc6 #999 #f90(selected) #c66 */
  width: 5em;
  height: 1em;
  top: 0.5em;
  right: 0;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
 }

 .gauche{
  position:absolute;
  height: 52.8em;
  width:4.3em;
  left:0.5em;
  padding:0em;
  z-index:60;
  text-align:right;
  vertical-align:bottom;
  color:#000;
  font-weight:bold;
  background-color:#000;
 }

 .gauche_haut {
  z-index:70;
  position:absolute;
  background-color:#c66;
  left:0em;
  top:2.4em;
  width:3.8em;
  height:12.6em;
  z-index:-1;
  text-align:right;
  color:#000;
  font-weight:bold;
 }

 .gauche_haut_1 {
  z-index:70;
  position:absolute;
  background-color:#9cf;
  left:0em;
  top:15.2em;
  width:3.8em;
  height:3em;
  z-index:-1;
  text-align:right;
  color:#000;
  font-weight:bold;
 }

 .gauche_haut_2 {
  z-index:70;
  position:absolute;
  background-color:#fc6;
  left:0em;
  top:18.4em;
  width:3.8em;
  height:9em;
  z-index:-1;
  text-align:right;
  color:#000;
  font-weight:bold;
 }

 .gauche_haut_3 {
  z-index:70;
  position:absolute;
  background-color:#c9c;
  left:0em;
  top:27.6em;
  width:3.8em;
  height:20em;
  z-index:-1;
  text-align:right;
  color:#000;
  font-weight:bold;
 }

 .gauche_haut_4 {
  z-index:70;
  position:absolute;
  background-color:#c66;
  border-bottom-right-radius: 4em;
  left:0em;
  top:47.8em;
  width:3.8em;
  height:9em;
  z-index:-1;
  text-align:right;
  color:#000;
  font-weight:bold;
 }

 .gauche_bas {
  z-index:170;
  position:relative;
  background-color:#999;
  width:3.8em;
  height:5.8em;
  border-top-right-radius: 4em;
  margin-top:0.2em;
  z-index:-2;
  left:0.5em;
 }

.contenu {
  position:relative;
  text-align:left;
  z-index:100;
  top:3em;
  margin-left:6em;
  color:#ffe7ad;
  width:90%;
 }

 .contenu img {
  max-width:40em;
 }

 .bas {
  z-index:80;
  position:relative;
  background-color:#000;
  left: 0.5em;
  height:52em;
  padding-top:0.2em;
 }

 .bas_titre {
  z-index:80;
  position:relative;
  background-color:#000;
  height:2.3em;
  left: 0.5em;
  padding-top:0.2em;
 }

 .gauche_titre {
  position:absolute;
  background-color: #fc6;
  color: #000;
  font-weight: bold;
  height: 50em;
  text-align: right;
  width: 3.8em;
  top:-2em;
  left:0.5em;
  z-index: -1;
 }

.bas_gauche_titre {
  z-index:90;
  position: absolute;
  background-color:#999; /* #9cf #fc6 #999 #f90(selected) #c66 */
  width: 5em;
  height: 2.3em;
  left: 0em;
  border-bottom-left-radius: 2em;
 }

 .concave_bas_gauche_titre {
  z-index:99;
  position: absolute;
  background-color:#000;
  border-bottom-left-radius:1.5em;
  width: 5em;
  height: 1.5em;
  left: 3.8em;
 }

 .bas_gauche_1_titre {
  position: absolute;
  background-color:#999;
  height: 0.8em;
  width: 10em;
  top: 1.7em;
  left: 5em;
  margin: 0em;
 }

 .bas_gauche_2_titre {
  position: absolute;
  background-color:#c66;
  height: 0.8em;
  width: 8em;
  top: 1.7em;
  left: 15.2em;
  margin: 0em;
 }

 .bas_mid_titre {
  position: absolute;
  background-color:#fc6;
  height: 0.8em;
  top: 1.7em;
  left:23.4em;
  right: 50%;
  margin-right:0.1em;
 }

 .bas_droite_2_titre {
  position: absolute;
  background-color:#999; 
  left:50%;
  margin-left:0.1em;
  height: 0.8em;
  top: 1.7em;
  right: 13.9em;
 }

 .bas_droite_1_titre {
  position: absolute;
  background-color:#c9c; 
  width: 12em;
  height: 0.8em;
  top: 1.7em;
  right: 1.7em;
 }

 .bas_droite_titre {
  position: absolute;
  background-color:#fc6;
  width: 1em;
  height: 0.8em;
  top: 1.7em;
  right: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
 }

 .bas_gauche {
  z-index:90;
  position: absolute;
  background-color:#fc6; /* #9cf #fc6 #999 #f90(selected) #c66 */
  width: 5em;
  height: 2.3em;
  left: 0em;
  border-bottom-left-radius: 2em;
 }

 .concave_bas_gauche {
  z-index:99;
  position: absolute;
  background-color:#000;
  border-bottom-left-radius:1.5em;
  width: 5em;
  height: 1.5em;
  left: 3.8em;
 }

 .bas_gauche_1 {
  position: absolute;
  background-color:#fc6;
  height: 0.8em;
  width: 15em;
  top: 1.7em;
  left: 5em;
  margin: 0em;
 }

 .bas_gauche_2 {
  position: absolute;
  background-color:#999;
  height: 0.8em;
  width: 5em;
  top: 1.7em;
  left: 20.2em;
  margin: 0em;
 }

 .bas_mid {
  position: absolute;
  background-color:#c9c;
  height: 0.8em;
  top: 1.7em;
  left:25.4em;
  right: 15.1em;
 }

 .bas_droite_2 {
  position: absolute;
  background-color:#fc6; 
  width: 1em;
  height: 0.8em;
  top: 1.7em;
  right: 13.9em;
 }

 .bas_droite_1 {
  position: absolute;
  background-color:#c66; 
  width: 10em;
  height: 0.8em;
  top: 1.7em;
  right: 3.7em;
 }

 .bas_droite {
  position: absolute;
  background-color:#9cf;
  width: 3em;
  height: 0.8em;
  top: 1.7em;
  right: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
 }
 .code {
  position:absolute;
  bottom:0em;
  left:0em;
  text-align:right;
  width: 3.6em;
 }
 @media screen and (max-width: 50em), all and (orientation:portrait) {
 
  img, embed, iframe {
   max-width:100%;
   margin-right:0.5em;
  }

  .contenu img {
   max-width:95%;
  }
  
  .contenu {
   position:relative;
   z-index:100;
   top:3em;
   left:0em;
   margin-left:0em;
   color:#ffe7ad;
   width:100%;
  }

  .contenu_titre {
   position:relative;
   left:0em;
   margin-left:0em;
   width:100%;
  }
 
  .haut_gauche {
   height:1em;
   border-bottom-left-radius: 2em;
  }

  .bas_gauche {
   height:0.8em;
   border-top-left-radius: 2em;
   top: 1.7em;
  }
  
  .bas_gauche_titre {
   height:0.8em;
   border-top-left-radius: 2em;
   top: 1.7em;
  }

  .bas_titre {
   display:none;
  }
  .concave_haut_gauche {
   display:none;
  }

  .concave_bas_gauche_titre {
   display:none;
  }

  .concave_bas_gauche {
   display:none;
  }
  .gauche_titre{
   display:none;
  }

  .gauche{
   display:none;
  }

  .gauche_haut {
   display:none;
  }

  .gauche_haut_1 {
   display:none;
  }

  .gauche_haut_2 {
   display:none;
  }

  .gauche_haut_3 {
   display:none;
  }

  .gauche_haut_4 {
   display:none;
  }

  .gauche_bas {
   display:none;
  } 

  .retour_chariot {
   display:inline;
   width:1em;
  }
 }

 @media all and (orientation:portrait) {
  .contenu {
   font-size:1.5em;
   padding-bottom:3em;
  }
  .contenu_titre, .menu {
   font-size:1.5em;
  }
 }