body
{
    background-color: #000000;  /*fond de la page noir */
    color: white; /* texte de la page blanc */
}

h2 {
text-shadow:3px 3px 3px #2F4F4F;
}

.titre_recherche {color: #C0C0C0; font-family: Arial; font-size: 24pt; font-weight: bold; text-align:left; margin-left:30  }

.liste_puces {font-family: Arial; font-size: 10pt; color: #000000; text-align: left; list-style-type:square; margin-left:20}

.legende     { font-family: Arial; font-size: 10pt; color: #FFFFFF; font-style:italic }

/* le style paragraphe justifié noir sur blanc*/
.justifie {
color: #000000;/* noir*/
font-family:Arial; font-size:12pt; text-align:justify; text-indent:20px
}

.justifie_BsurN_12 { font-family: Arial; font-size: 12pt; text-indent: 20px; text-align: justify; color:#FFFFFF }

.LienTransitionBackgroundGSB a{
    font-family:Arial;
    padding: 1px;
    color:#808080;
    text-decoration:none;
    background:#transparent;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in; 
}
.LienTransitionBackgroundGSB a:hover{
    color:#404040;
    background:#D3D3D3;
}

.LienTransitionBackgroundBSN a{
    padding: 1px;
    color:#FFF;
    text-decoration:none;
    background:#transparent;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.LienTransitionBackgroundBSN a:hover{
    color:#D3D3D3;
    background:#404040;
}



/* la classe gsb----------------------------*/
a.gsb {
color: #808080;/* gris*/
background: #transparent;
text-decoration:none; font-family:Arial; font-size:12pt; line-height:100%
}
a:hover.gsb {
color: #2F4F4F;/* survol gris foncé*/
background: #D3D3D3;
/*text-decoration:underline;*/
}



/* la classe gris sur noir----------------------*/
a.gsn {
opacity: 1;
filter:alpha(opacity=100);
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-htm-transition: opacity 0.5s ease;
	-ms-transition:opacity 0.5s ease;
	transition: opacity 0.5s ease;
	
color: #808080;/* gris*/
/*background: #transparent;*/
text-decoration:none; font-family:Arial; font-size:12pt; line-height:100%
}
a:hover.gsn {
opacity: 0.5;
filter:alpha(opacity=50);
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-htm-transition: opacity 0.5s ease;
	-ms-transition:opacity 0.5s ease;
	transition: opacity 0.5s ease;
	
text-decoration:underline;
color: #20B2AA; survol gris clair
/*background: #0F2F2F;*/
}



/* la classe liengsn----------------------*/
a.liengsn {
color: #808080;/* gris*/
/*background: #transparent;*/
text-decoration:underline; font-family:Arial; font-size:10pt; line-height:100%
}
a:hover.liengsn {
	
text-decoration:none;
color: #20B2AA; survol gris clair
background: #0F2F2F;
}




/* la classe bsn-------------------------------*/
a.bsn {
opacity: 1;
filter:alpha(opacity=100);
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-htm-transition: opacity 0.5s ease;
	-ms-transition:opacity 0.5s ease;
	transition: opacity 0.5s ease;
color: #FFFFFF;/* blanc*/
text-decoration:none; font-family:Arial; font-size:10pt; line-height:100%
}
a:hover.bsn {
opacity: 0.7;
filter:alpha(opacity=70);
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-htm-transition: opacity 0.5s ease;
	-ms-transition:opacity 0.5s ease;
	transition: opacity 0.5s ease;
color: #909090;/* survol gris*/
text-decoration:underline;
}



/* opacité des couvertures : opaque vers transparent*/
.opaque
{
opacity: 1;
filter:alpha(opacity=100);
	transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-webkit-transition: all 0.25s ease;
	-htm-transition: all 0.25s ease;
	-ms-transition:all 0.25s ease
}
:hover.opaque
{
opacity: 0.7;
filter:alpha(opacity=70);
	transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-webkit-transition: all 0.25s ease;
	-htm-transition: all 0.25s ease;
	-ms-transition:all 0.25s ease;
}


/* style opacité : transparent vers opaque*/
.opaque2
{
filter : alpha(opacity=70);
opacity: 0.7;
	transition: opacity 0.25s ease;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
}
:hover.opaque2
{
filter : alpha(opacity=100);
opacity: 1;
	transition: opacity 0.25s ease;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
}

/* style opacité : transparent vers opaque - nouveaux livres et pile */
.opaque3
{
filter : alpha(opacity=70);
opacity: 0.7;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
:hover.opaque3
{
filter : alpha(opacity=100);
opacity: 1;
	-moz-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-htm-transition: opacity 0.25s ease;
	-ms-transition:opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
.opaque3:active {
	position:relative;
	top:2px;
}


/* id du bloc des thèmes de recherche ------------------------*/
#theme {
background-color:#f0e8d8;
border:1px solid #909090;
padding:25px;
width:80%;
   margin-left: auto;
   margin-right: auto;
   
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.11, #dacdb1), color-stop(0.56, #f0e8d8));  
background-image: -webkit-linear-gradient(center bottom, #dacdb1 11%, #f0e8d8 56%);  
background-image: -moz-linear-gradient(center bottom, #dacdb1 11%, #f0e8d8 56%);  
background-image: linear-gradient(center bottom, #dacdb1 11%, #f0e8d8 56%);  
-webkit-box-shadow: 0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset;  
-moz-box-shadow:    0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset;  
box-shadow:         0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset;     
   
/*ombre 
box-shadow:2px 2px 10px 5px #2F4F4F; 
-moz-box-shadow:2px 2px 10px 5px #2F4F4F; 
-webkit-box-shadow:2px 2px 10px 5px #2F4F4F; */
}

/* id du bloc blanc ---------------------------------------*/
#bloc_blanc {
background-color:#F7F7F7;
border:1px solid #000000;
padding:25px;
width:90%;
   margin-left: auto;
   margin-right: auto;
   
-webkit-box-shadow: inset 2px 2px 20px 1px #404040;
        
        box-shadow: inset 2px 2px 20px 1px #404040;
}

/* classe coins du bloc recherche*/
.coins {
/*coins arrondis pour le bloc recherche*/
background:#FFFFFF;
border:1px solid #bbbbbb;
border-radius:0px 50px 25px 25px;
}

.coins_reguliers {
/*coins arrondis pour le bloc blanc*/
background:#FFFFFF;
border:1px solid #bbbbbb;
border-radius:10px;
}


.zoomcover {/* dans chaque page de livre */
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;

transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
:hover.zoomcover{
transform: rotate(0deg) scale(1.5) skew(0deg) translateX(10px) translateY(40px);
-webkit-transform: rotate(0deg) scale(1.5) skew(0deg) translateX(10px) translateY(40px);
-moz-transform: rotate(0deg) scale(1.5) skew(0deg) translateX(10px) translateY(40px);
-o-transform: rotate(0deg) scale(1.5) skew(0deg) translateX(10px) translateY(40px);
-ms-transform: rotate(0deg) scale(1.5) skew(0deg) translateX(10px) translateY(40px);
}



.zoomvignette { /* dans la page des livres */
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;

transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);

}
:hover.zoomvignette {

transform: rotate(0deg) 		scale(1.1) 		skew(0deg) translateX(0px) translateY(0px);
-webkit-transform: rotate(0deg) scale(1.1) 		skew(0deg) translateX(0px) translateY(0px);
-moz-transform: rotate(0deg) 	scale(1.1) 		skew(0deg) translateX(0px) translateY(0px);
-o-transform: rotate(0deg) 		scale(1.1) 		skew(0deg) translateX(0px) translateY(0px);
-ms-transform: rotate(0deg) 	scale(1.1) 		skew(0deg) translateX(0px) translateY(0px);

}

.picimg
{
  /*  width:100px;
    height:125px;*/
    -webkit-transition: all .6s ease-in; /* element qui subit la transition, temps de la transition et function de la transition*/
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.picimg:hover
{
    -webkit-transform: scale(1.1); /*multiplication de la taille de départ x 1.1*/
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin: center center; /*origine de l'animation*/
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}
				


.zoomlogo
{
/*
transition:all 0.1s ease;
-webkit-transition:all 0.1s ease;
-moz-transition:all 0.1s ease;
-o-transition:all 0.1s ease;
*/

transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);

opacity: 1;
filter:alpha(opacity=100);
}
:hover.zoomlogo{
transform: rotate(1deg) scale(1) skew(0deg) translateX(0px) translateY(0px);
-webkit-transform: rotate(1deg) scale(1) skew(0deg) translateX(0px) translateY(0px);
-moz-transform: rotate(1deg) scale(1) skew(0deg) translateX(0px) translateY(0px);
-o-transform: rotate(1deg) scale(1) skew(0deg) translateX(0px) translateY(0px);
-ms-transform: rotate(1deg) scale(1) skew(0deg) translateX(0px) translateY(0px);

opacity: 0.9;
filter:alpha(opacity=90);
}

.reflet{
-webkit-box-reflect: 
below 0
-webkit-gradient(linear,0 0,0 100%,
  from(transparent),color-stop(.5,transparent),
  to(rgba(255, 255, 255, 0.3)));
}