* {
	margin: 0; padding: 0; top: 0px; left: 0px; right: 0px;
	
         
}

	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
}
 
body  { background: #000005 url(images/soleil.jpg) center center no-repeat fixed;     
         background-size: cover;     
           top: 0px; left: 0px; right: 0px;
           margin:          0;  
	   padding:         0;  
           - webkit - fond - taille :  2650px  1440px;  
           z-index:  1;
          overflow: auto;
          text-align:      center; 
          height:   100%; 
          width:    100%;
          font-family:  Arial;
          color:      #A7A9B4;
          line-height : 15px;
}  
    
         
a {


                  text-decoration: none;
                  padding:         0px 0px 0px 0px;	
                  color:           #FFFFFF;
                  font-weight:     normal; 

}
	

 a:hover{
                  color:            #ADC1CF;
                  text-decoration: none;
                  font-weight:     normal;
}
                              
 /*  Global toute la page qui fixe Image de fond scrolling sur IPAD
********************************************************************/

#global {  margin:   0px  0 0 0px;
           padding:  0px; 
           position: fixed; 
           height:   100%; 
           z-index:  1;
           overflow: auto;
                 
}            

/*  HEADER LOGO et MENU PRINCIPAL
********************************************************************/

#header-cont { 
 
                 width:    100%; 
                 position: fixed; 
                 top:      0px; 
                 z-index:  2;

} 


.header  { background: url(images/logo.gif) left bottom no-repeat;
           
           height: 70px;
           width:  960px;
           margin: 0px auto;
}
 


#menu {    background: url(.jpg) right top no-repeat;
           position: relative; 
           float:    right;  
           margin-top: 30px; margin-bottom: 0px; width: 500px;
            -webkit-transition: background-color 0.4s;
	    transition: background-color 0.4s;
                            
                
}
 
#menu ul li {      margin-top:    0px;
                   line-height:   16px;
                   list-style:    none;
                   text-align:    right;
}
 

#menu   a{    


                  text-decoration: none;
                  padding:         0px 0px 0px 10px;	
                  list-style:      none;
                  text-transform:  uppercase ;
                  color:           #FFFFFF;
                  font-size :      11px;
                  font-family:     Arial, sans-serif;
                  font-weight:     bold; 

}
	



#menu ul li a:hover{background:   #4E6F84;
                  color:          #FFFFFF; 
                  text-decoration: none;
                  font-weight:     bold;
}
/* medias -> 
********************************************************************************************************************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone  ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}




/* CORPS DE PAGE -> 
********************************************************************************************************************/

#container {   background: url(images/.png)  right top no-repeat;
             position:     relative; 
             width:        960px;             
             margin:       0px auto; 
	     min-height:   100%;
            
}


#maingauche {   
           position:     relative;
           width:        960px;
           overflow:     auto;
           margin :      80px 0px 0px 0px; 
           min-height:   100%;
}




#gauche {      
               position:    relative;  
               margin-top:  20px;
               border-radius: 10px;
               border-collapse: collapse;
               border: px solid #BFC9CC;
               float:       left;
               width:       450px;
               padding:     0px 10px 10px 10px; 
               font-family: Arial;
               font-size:   13px;
               font-weight: normal;
               color:      #A7A9B4;
               text-align:  left;
               min-height:   100%;
} 



#droit {       
               position:    relative;  
               border-radius: 10px;
               border-collapse: collapse; 
               margin-top:   20px;
               float:       right;
               width:       250px;
               padding:     10px 10px 10px 0px; 
               font-family: Arial;
               font-size:   13px;
               font-weight: normal;
               color:      #D6DCDC;
               text-align:  right;
               min-height:   100%;
               
}



#droit h2 {
   margin: 0;
   padding: 0px 10px 5px 0px;
   text-align: right;
   text-transform: uppercase;
   font-size: 11px;
   color:   #FFFFFF;
   background: url(images/) no-repeat;
}

#droit ul {
   margin: 0 0 0px 0;
   padding: 0px 7px 0 0px;
   border-bottom: 0;
   font: 11px arial;
   line-height: 17px;
   list-style: none;
   color: #D6DCDC;
}

#droit ul li {
   padding-right: 25px;
   font-size: 1em;
   color: #F5A319;
   line-height: 17px;
}

#droit a, a:visited {
   text-decoration: none;
   color:#F1E3C9;
}



#droit ul li a, a:visited {
   border-bottom: none;
   text-decoration: none;
   font-weight: normal;
   color: #FFFFFF;
   display: block;
}

#droit li a:hover {
   display: block;
   color: #FFFFFF;
   background: #311A11 url(images/coeur.gif) left no-repeat;
}




.titre1 {   text-align:  left;
           font-family:  Arial;
           font-size:    16px;
           color:        #EEEEF0;          
           font-weight:  normal;
           padding:      40px 0px 10px 150px;
}

.poetes {   text-align:  center;
           font-family:  Arial;
           font-size:    15px;
           color:        #ECD8B7;         
           font-weight:  normal;
           padding:      20px 0px 20px 0px;
}

.titre {   text-align:   left;
           font-family:  Arial;
           font-size:    13px;
           color:        #EEEEF0;          
           font-weight:  bold;
           padding:      15px 0px 5px 10px;

}

.texte {   padding:      0px 10px 10px 10px;
           text-align:   justify;          
           font-family:  Arial, sans-serif;
           font-size:    13px;
           font-weight:  normal;
           color:       #EEEEF0;
           line-height:  15px;
}
.texted {   padding:      0px 10px 10px 10px;
           text-align:   right;          
           font-family:  Arial;
           font-size:    13px;
           font-weight:  normal;
           color:       #EEEEF0;
           line-height:  15px;
}



/* CLASS -NOM -NB petits caractères - class OPACITE
*************************************************************************************/

.nom {     padding:     0px 60px 8px 15px;
           text-align:  right;
           font-family: ARIAL;
           font-size:   13px;
           color:       #EEEEF0;          
           font-weight: normal; 
           font-style :  italic; 
}

.sd {      padding:     0px 0px 20px 100px;
           text-align:  left;
           font-family: ARIAL Narrow;
           font-size:   16px;
           color:       #E1D9C1;          
           font-weight: normal;
           font-style :  italic;
}
     
.nb {
           padding:     0px 0px 10px 10px;
           text-align:  left;
           font-family: ARIAL;
           font-size:   11px;
           color:       #ECD8B7;          
           font-weight: normal;
           font-style :  italic;
}


.opacite {
 width: 50%;
 background-color: rgb(49, 50, 57); /* alternative solide */
 background-color: rgba(49, 50, 57, 0.6);

}

.date {
   padding:    10px;
   text-align: left;
   font:       italic 1em Georgia;
   color:     #FFFFFF;
}

.cit {background: url(images/.png) right top no-repeat;
   
   padding-left:   10px;
   padding-bottom: 15px;
   text-align:     left;
   font:           11px verdana;
   font-weight:    normal;
   line-height:    15px;
   color:          #EEEEF0;
   
}

.cit a {    color: #FFFFFF;
                  text-decoration: none;
}

.cit a:hover {color:#7E7F91;
              background-color: #FFFFFF;
   border-bottom: none;
   
}



/* BAS DE PAGE
****************************************************/

#footer  { position:    relative;
	   bottom:      0; 
           left:        0;
           width:       100%;
           padding-bottom: 5px;
           font-weight:    normal;    
           text-align: center; font: 0.9em verdana; color: #ECD8B7; 

}

#footer a {    color: #FFFFFF;
                  text-decoration: none;
               font-weight:    bold;
}

#footer a:hover {color:  #FFFFFF; }


                


/* BAS DE PAGE POÈTES 
****************************************************/

#footerpoetes  { position:    relative;
	   bottom:      0; 
           left:        0;
           width:       430px;
           padding-bottom: 5px;    
           text-align: center; font: 0.9em verdana; color: #ECD8B7; 
}
#footerpoetes a {    color: #FFFFFF;
                  text-decoration: none;
}

#footerpoetes a:hover {color:  #2E3C47; }