/* CSS Document */
body {
	background-color: #000;
	margin:0;
	padding:0;
}
#conteneur { /* englobe la page */
	width:100%;
	text-align:center;
	max-width:1044px;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	position:relative;
	}
#haut {
	text-align:center;
	margin-bottom:5px;
}
#haut_petit {
	text-align:center;
	margin-top:70px;
	margin-bottom:20px;
}
.image_bandeau {
	width:100%;
	max-width:750px;
}
.image_bandeau_petit {
	width:100%;
	max-width:400px;
}
.image_sous_bandeau {
	width:100%;
	max-width:472px;
}
#gauche { /* conteneur romans sur page accueil */
	width:48%;
	background-color:#500;
	float:left;
	text-align:center;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:220%;
	line-height:120%;
	transition:all 0.5s;
}
#gauche:hover {
	background-color:#8A0000;
	transition:all 0.5s;
}
#droit { /* conteneur grilles sur page accueil */
	width:48%;
	background-color:#005151;
	float:right;
	text-align:center;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:220%;
	line-height:120%;
	transition:all 0.5s;
}
#droit:hover {
	background-color:#008080;
	transition:all 0.5s;
}
.footer {
	text-align:center;
	margin-bottom:15px;
	margin-top:10px;
}
.footer a {
	color:#CCC;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration:none;
}
.footer a:hover {
	color:#FFF;
	text-decoration:underline;
}
.presentation {
	text-align:center;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:50%;
	line-height:110%;
	background-color:#000;
	padding-top:10px;
	padding-bottom:15px;
}
#menus { /* menus fixés sur pages courantes */
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	width:100%;
	overflow:visible;
	text-align:center;

}
#conteneur_menus {
	width:100%;
	max-width:1500px;
	margin-left:auto;
	margin-right:auto;
	display: flex;
	justify-content: center;
	text-align:center;
	background-color: rgba(0,0,0,0.6);
	padding-bottom:5px;
	position:relative;
	overflow:visible;
}
	
#menus a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 40px;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 2px #000;
	text-decoration:none;
	display:inline-block;
	padding:5px;
	text-align:center;
	line-height:50px;
	color: #fff;
	margin-left:10px;
	margin-right:10px;
	background-color:#C9FF93;
	background-color: rgba(78,177,29,0.85);
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-ms-transition:all 0.5s;
	-o-transition:all 0.5s;
	transition:all 0.5s;
	flex:auto;
	position:relative;
}
#nbr_panier {
	position:absolute;
	font-size:13px;
	width:20px;
	line-height:20px;
	background-color:#FFC;
	bottom:-10px;
	right:10px;
	color:#000;
	text-shadow: 0px 0px 0px #000;
	text-align:center;
	letter-spacing: 0em;
}
#menus a:hover {
	background-color:#063;
	background-color: rgba(0,128,64,0.85);
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-ms-transition:all 0.5s;
	-o-transition:all 0.5s;
	transition:all 0.5s;
}
#menus a.bouton_romans {
	background-color:#500;
}
#menus a.bouton_romans:hover {
	background-color:#8A0000;
}
#menus a.bouton_grilles {
	background-color:#066;
}
#menus a.bouton_grilles:hover {
	background-color:#008080;
}

#menus a.bouton_infos {
	background-color:#005329;
}
#menus a.bouton_infos:hover {
	background-color:#009D4F;
}
#menus a.bouton_gris {
	background-color:#666;
}
#menus a.bouton_gris:hover {
	background-color:#333;
}
.conteneur_roman {
	font-family:Georgia, 'Times New Roman', Times, serif;
	font-size:110%;
	line-height:120%;
	display:flex;
	text-align:center;
	background-color:#370000;
	padding:5px;
	color:#FFF;
	margin-bottom:15px;
}
.photo_roman {
	display:inline-block;
	flex:auto;
}
.description_roman {
	display:inline-block;
	flex:auto;
	padding:10px;
}
.center {
	text-align: center;
}
.tab_center {
	text-align:center;
}
.blanc {
	color:#FFF;
}
.bouton_plus {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	background-color:#C0C0C0;
	border:none;
	width:40px;
	transition:all 0.5s;
	cursor:pointer;
}
.bouton_plus:hover {
	background-color:#FFF;
	transition:all 0.5s;
}
.bouton_suppr {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	background-color:#F00;
	border:2px solid #FFF;
	width:40px;
	transition:all 0.5s;
	color:#FFF;
	cursor:pointer;
}
.bouton_suppr:hover {
	background-color:#900;
	transition:all 0.5s;
}
.bouton_qte {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight:bold;
	background-color:#FFF;
	border:none;
	width:40px;
}
.bouton_ajout {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	line-height:40px;
	background-color:#C0C0C0;
	border:none;
	transition:all 0.5s;
	cursor:pointer;
}
.bouton_ajout:hover {
	background-color:#FFF;
	transition:all 0.5s;
}
.lien_bouton {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	background-color:#C0C0C0;
	text-decoration:none;
	color:#000;
	transition:all 0.5s;
	cursor:pointer;
}
.lien_bouton:hover {
	background-color:#FFF;
	transition:all 0.5s;
}
.lien_bouton_suppr {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 32px;
	background-color:#F00;
	text-decoration:none;
	color:#FFF;
	border:2px solid #FFF;
	transition:all 0.5s;
}
.lien_bouton_suppr:hover {
	background-color:#900;
	transition:all 0.5s;
}
.surlignage_noir {
	background-color:#000;
	color:#FFF;
	padding:2px;
	padding-left:5px;
	padding-right:5px;
}
.surlignage_bleu {
	background-color:#005151;
	color:#FFF;
	padding:2px;
	padding-left:5px;
	padding-right:5px;
}
.surlignage_rouge {
	background-color:#900;
	padding:2px;
	padding-left:5px;
	padding-right:5px;
}
.surlignage_paypal {
	background-color:#FFF;
	font-size: 20px;
	padding:2px;
	padding-left:5px;
	padding-right:5px;
}
.surlignage_gris {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	background-color:#C0C0C0;
	color:#000;
}
.surlignage_blanc {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	background-color:#FFFFFF;
	color:#000;
}
#imp_commande {
	display:none;
}
#fond_impression {
			color:#000; text-align:center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:120%; background-color:#E8E8E8; padding:20px
		}
.nowrap {
	white-space:nowrap;
}
 /* Formulaire grille et grille modif */
.inline {
	display:inline-block;
	width:150px;
  }
.inline img {
    margin: 0px;
	vertical-align:middle;
	max-width:150px;
 }
.label-file {
	cursor: pointer;
	background-color:#FFF;
	color: #003;
	font-weight: bold;
	border:2px solid #003;
	font-size:20px;
	margin-top:5px;
	margin-bottom:5px;
	padding:19px;
	display:inline-block;
	transition:all 0.5s;
}
.label-file:hover {
	color: #000;
	background-color:#69F;
	transition:all 0.5s;
}
.input-file {
    display:none;
}
.formfield-checkbox {
	position: relative;
}
.formfield-checkbox input[type="radio"] {
	display:none;
}
.formfield-checkbox input[type="radio"] + label {
	margin-left:0px;
}
.formfield-checkbox input[type="radio"] + label:before {
	content: " ";
	display: inline-block;
	text-align:center;
	width: 35px;
	height: 35px;
	margin-bottom:-10px;
	border:2px solid #003;
	background-color: #FFF;
}
.formfield-checkbox input[type="radio"]:checked + label:before {
	background-color:#69F;
}
 /* mise en page paragraphe */
.decalage {
	margin-top:40px;
}
.mode_emploi {
	margin-bottom:10px;
}
 /* Affichage 'light box' perso */
#cache {
	position:fixed;
	left:0;
	top:0;
	background:rgba(0, 0, 0, 0.8);
	width:100%;
	height:100%;
	text-align:center;
	z-index:20;
	display:none;
}
#conteneur_affichage {
	width:100%;
	text-align:center;
	position:absolute;
	z-index:21;	
	display:none;
}
#affichage { /* contient image ou mot clés */
	width:360px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background-color:#9CC;
	margin-top:15px;
	padding:10px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:130%;
	line-height:110%;
	display:inline-block;
	position:relative;
	z-index:22;
}
#affichage img {
	width:100%;
	max-width:340px;
}
.affichage_mc, .affichage_grilles {  /* liens pour ouverture light box */
	font-weight:bold;
	background-color:#C0C0C0;
	text-decoration:none;
	color:#000;
	transition:all 0.5s;
}
.affichage_mc:hover, .affichage_grilles:hover {
	background-color:#FFF;
	transition:all 0.5s;
}
.affichage_image {
	background-color:transparent;
	text-decoration:none;
	border:none;
	transition:all 0.5s;
}
.affichage_image:hover {
	transition:all 0.5s;
	background-color:transparent;
}
.photo_panier {  /* image dans panier */
	max-width:100px;
	max-height:80px;
}
 /* lien sur image couverure page romans */
.photo_box{        
	transition:all 0.2s;
	border:1px solid #000;
}
.photo_box:hover{        
	-webkit-transform: scale(1.02, 1.02);-moz-transform: scale(1.02, 1.02);-o-transform: scale(1.02, 1.02);-ms-transform: scale(1.02, 1.02);transform: scale(1.02, 1.02);
	transition:all 0.2s;
	border:1px solid #666;

}
/* carrés sur commentaires */
.commentaire_roman {
	border:#000 1px solid;
	background-color:#8A0000;
	width:20px;
	height:20px;
	display:inline-block;
	margin-right:5px;
}
.commentaire_grille {
	border:#000 1px solid;
	background-color:#008080;
	width:20px;
	height:20px;
	display:inline-block;
	margin-right:5px;
}

@media screen and (max-width: 800px){
    /* Ici du code s'appliquant aux écrans de moins de 800 pixels de large ! */
#menus a {
	font-size: 30px;
	letter-spacing: 0.1em;
	padding:5px;
	margin-left:5px;
	margin-right:5px;
}

}

@media screen and (max-width: 600px){
    /* Ici du code s'appliquant aux écrans de moins de 800 pixels de large ! */
#menus a {
	font-size: 30px;
	letter-spacing: 0em;
	padding:2px;
	margin-left:1px;
	margin-right:1px;
}

}

@media screen and (max-width: 500px){
    /* Ici du code s'appliquant aux écrans de moins de 500 pixels de large ! */
#gauche, #droit {
	float:none;
	clear:both;
	font-size:170%;
	width:65%;
	margin-left:auto;
	margin-right:auto;
	line-height:110%;
	margin-bottom:10px;
}
#menus a {
	font-size: 25px;
	line-height:45px;
	padding:0px;
}
.conteneur_roman {
	display:block;
}
.photo_roman {
	display:block;
	flex:none;
}
.description_roman {
	display:block;
	flex:none;
	padding:10px;
	font-family:'Times New Roman', Times, serif;
	font-size:100%;
	line-height:110%;"
}
.tab_center {
	display:inline-block;
}
#affichage {
	width:320px;
	padding:5px;
	font-size:100%;
}
#affichage img {
	max-width:300px;
}
}