html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
position: fixed;
overflow: hidden;
font-family: Times;
}

a {

}

#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
position: fixed;
}

a{outline: none;
text-decoration:none;
}


:focus{outline: none;}

img#photo_perso{
  position: absolute;
  top: 70px;
  left: 24px;
}


div#coordonnes
{
font-style: italic;
font-weight:bold;
text-align:center;
left: 0%;
width: 320px;  
top: 1%;
position: absolute;
font-size:18px;

}
html>body div#coordonnes
{
font-style: italic;
font-weight:bold;
text-align:center;
left: 0%;
width: 320px;  
top: 1%;
position: fixed;
font-size:16px;
}
div#coordonnes a {color: silver;
font-size: 14px;}
div#coordonnes a:hover {}



div#musique 
{
left: 40%;
right: 50%;
width: 500px;
height: 0px;  
bottom: 15px;
position: absolute;

}
html>body div#musique 
{
left: 40%;
right: 50%;
width: 500px;
height: 0px;  
bottom: 35px;
position: fixed;

}
div#musique a {color: white;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
div#musique a:hover {color: #FFD700;}

div#copyright 
{
bottom: 0%;
width: 500px;
height: 15px;  
position: absolute;
font-weight: bold;
font-size: 11px;
left: 0.39%;
color: white;
font-style: italic;
}
html>body div#copyright 
{
bottom: 0%;
width: 500px;
height: 15px;  
position: fixed;
font-weight: bold;
font-size: 11px;
left: 0.39%;
color: white;
font-style: italic;
}



div#citation
{
 font-style: italic;
	   width: 440px;
   height: 45px;
   position: absolute;
right: 3.06%;
   top: 9.16%;
}
html>body div#citation
{
 font-style: italic;
	   width: 440px;
   height: 45px;
   position: fixed;
right: 3.06%;
   top: 9.16%;
}

div#contenue
{
    color: black;
   width: 480px;
   height: 280px;
   font-style: italic;
font-size:16px;

padding: 2px;
position: absolute;
right: 5.07%;
   top: 31.13%;
}
html>body div#contenue
{
     color: black;
   width: 480px;
   height: 280px;
   font-style: italic;
font-size:16px;

padding: 2px;
position: fixed;
right: 5.07%;
   top: 34.13%;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

html>body div#contenue {
   width: 38%;
   right: 40px;
}

.menu-list {
  margin-top: 9px!important;
}


}

div#clear_index
{
	
}
div#contenueParcours
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;


padding: 7px;

   position: absolute;
right: 0.64%;
   top: 13%;
}
html>body div#contenueParcours
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;;


padding: 7px;

   position: absolute;
right: 0.64%;
   top: 4%;
}
div#contenueParcours a {color: #808080;}
div#contenueParcours a:hover {color: #FFD700;}

div#contenueApproche
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 13%;
}
html>body div#contenueApproche
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 13%;
}
div#contenuepkfr
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 8%;
}
html>body div#contenuepkfr
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: fixed;
right: 0.64%;
   top: 8%;
}
div#contenuepkfr a {color: gray;}
div#contenuepkfr a:hover {color: #FFD700;}

div#contenuenewsletter {
       color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 13%;
}

html>body div#contenuenewsletter
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 13%;
}

div#contenuepkfr2
{
    color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: fixed;
right: 0.64%;
   top: 13%;
}
html>body div#contenuepkfr2
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: fixed;
right: 0.64%;
   top: 13%;
}
div#contenuepkfr2 a {color: gray;}
div#contenuepkfr2 a:hover {color: #FFD700;}

div#contenueateliers
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 13%;
}
html>body div#contenueateliers
{
     color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;

padding: 7px;
   position: absolute;
right: 0.64%;
   top: 13%;
}
div#contenueateliers a {color: gray;}
div#contenueateliers a:hover {color: #FFD700;}

div#contenueDeontologie
{
        color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;


padding: 7px;

   position: absolute;
right: 0.64%;
   top: 13%;
}
html>body div#contenueDeontologie
{
       color: black;
   width: 490px;
   height: 300px;
   font-style: italic;
font-size:16px;


padding: 7px;

   position: absolute;
right: 0.64%;
   top: 13%;
}
div#contenueDeontologie a {color: #808080;}
div#contenueDeontologie a:hover {color: #FFD700;}

div#menu
{
	   width: 550px;
   height: 250px;
   
   position: absolute;
left: 2.01%;
   top: 35%;
   z-index: 2;
}
html>body #menu
{
	   width: 550px;
   height: 250px;
   
   position: fixed;
left: 2.01%;
   top: 35%;

}

html>body #menu {
  left: 2.60%;
}



div#menu2
{


	   width: 300px;
   height: 600px;
   
   position: absolute;
left: 40%;
   top: 0%;
}
html>body div#menu2
{


	   width: 300px;
   height: 600px;
   
   position: fixed;
left: 40%;
   top: 0%;
}
.menu-list {
  list-style-type: none;
  margin-top: -6px;
  font-style: italic;
}

.menu-list > li {
  padding: 8px;
}

.menu-list > li > a {
  color: black;
  font-size: 18px;
}

.menu-list > li > a:active, .menu-list > li > a:hover, .menu-list > li > a.selected {
  color: gray;
}

div#contenue:first-letter /* Je veux que la première lettre de mes paragraphes... */
{

   font-size: 45px;
}
div#contenueParcours:first-letter
{

   float: left; /* Flotte à gauche */
  font-size: 45px; /* Fasse une hauteur de 3 lignes */
   /* Soit mise en Arial si possible*/
   /* Soit écrite en gras (c'est plus voyant) */
   margin-right: 15px; /* Qu'il y ait une marge de 5px à droite pour que ça colle pas trop au reste du texte */
}
div#contenue:first-letter
{

   font-size: 45px;
    margin-right: -3px;
    font-weight: normal;
}

div#contenueDeontologie:first-letter
{

   font-size: 45px; /* Fasse une hauteur de 3 lignes */
   /* Soit mise en Arial si possible*/
   /* Soit écrite en gras (c'est plus voyant) */
}
div#contenuepkfr:first-letter
{
   font-size: 45px; /* Fasse une hauteur de 3 lignes */
    /* Soit mise en Arial si possible*/
   /* Soit écrite en gras (c'est plus voyant) */
}
div#contenuepkfr2:first-letter
{
   font-size: 45px; /* Fasse une hauteur de 3 lignes */
    /* Soit mise en Arial si possible*/
   /* Soit écrite en gras (c'est plus voyant) */
}

#livre {
    position: absolute;
    bottom: 19%;
    left: 2.60%;
    padding-left: 48px;
    z-index: 1;
}

#livre img {
  vertical-align: bottom;
  height: 80px;
}

#livre strong {
  color: #8d2430;
}

#newsletter label{
display:block;
width:215px;
float:left;
}