/* Point de rupture : 480px */ 
/* Couleur du fond : #ffffcc Couleur lettrage principal : #990000 lettrage secondaire : #993300 */

/* Remise à zero pour compatibilité des navigateur */
html,body,div,span,ul,li{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;} ol,ul,li,a{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a {text-decoration:none;}
html { 
	height:100%;
	}

body {
	text-align: center;
	width: 100%;
	min-height:100%;
	background-color: #ffffcc;
	}
div{
	top: 0;
	}
p {
	margin: 0;
	}
.deg_haut {
	height: 50%;
	width: 100%;
	padding: 0;
	margin: auto;
	background: linear-gradient(to top, rgba(255, 255, 204, 0), rgba(255, 255, 204, 1));
	z-index: 8;
	}
.deg_bas {
	height: 25px;
	width: 100%;
	padding: 0;
	margin: auto;
	background: linear-gradient(to bottom, rgba(255, 255, 204, 0), rgba(255, 255, 204, 1));
	z-index: 1;
	}
.fixe_G {
	position: fixed;
	left: 0;
	top : 0;
	height: 100%;
	z-index: 50;
}
.fixe_D {
	position: fixed;
	right: 0;
	top : 0;
	height: 100%;
	background-color : none;
}
.Img200 {
	max-width: 200px;
}
.flex {
	display: flex; /* pour centrer l'img V & H */
}
.flex_fixe {
	display: flex; /* pour centrer l'Ange et l'Organistrum dans leurs conteneurs */
	margin: auto;
	max-width: 15%;
	border: none;
	z-index: 1;
}
img {
	max-width: 100%;
	height: auto;
	margin: auto;
}
.img_D {
	display:inline-block;
	float : right;
	margin: auto;
	border: none;
}
.img_G {
	display:inline-block;
	float : left;
	margin:  auto;
	padding: auto;
	border: none;
	z-index: 50;
	background-color : none;
}

/* ----------------------------------------------------------------------Les conteneurs */
/* --------------------------------------------------Conteneurs globaux---------------- */
.corps {
	display: flex;
	float: left;
	width: 68%;
	margin: auto 16%;
	padding: auto;
}
.corps2 {
	display: flex;
	float: left;
	width: 72%;
	margin: auto 14%;
	padding: auto;
}
.conteneur {
	display: inline-block;
	width: 100%;
	float: left;
	padding: 0;
	border: none;
}

/* --------------------------------------------------Conteneurs internes--------------- */
.entier {
	display: inline-block;
	float: left;
	width: 100%;
	padding: auto;
	margin: auto;
	text-align: center;
	border: none;
}
.troisquart {
	display: inline-block;
	float: left;
	width: 75%;
	padding: auto;
	margin: auto;
	text-align: center;
	border: none;
}
.deuxtiers {
	display: inline-block;
	float: left;
	width: 66%;
	padding: auto;
	margin: auto;
	text-align: center;
	border: none;
}
.demi {
	display: inline-block;
	float: left;
	width: 50%;
	padding: 0;
	margin: 0;
	text-align: center;
	border: none;
}
.tiers {
	display: inline-block;
	float: left;
	width: 33%;
	padding: auto;
	margin: auto;
	text-align: center;
	border: none;
}
.quart {
	display: inline-block;
	top: 0;
	float: left;
	width: 25%;
	padding: auto;
	margin: auto;
	text-align: center;
	border: none;
}
/* -------------------------------------------------------------------------Organistrum */
.conteneur_organistrum {
	display: flex;
	right: 0px;
	margin: auto;
	max-width: 150px;
	max-height: 500px;
	background-color: none;
	border: none;
	z-index: 50;
}
.conteneur_couvercle {
	margin: 0;
	max-width: 54px;
	right: 0;
	top: 0;
	padding: 0;
	z-index: 10;
	background-color: none;
	border: none;
}
.conteneur_clavier {
	position : relative;
	width: 79px;
	right: 0px;
	max-height: 480px;
	top : 35px;
	padding: 25% 0px 0px 0px;
	background-color: none; 
	border: none;
}
.conteneur_touche {
	float: right;
	width: 79px;
	margin: 2px 0 0 0;
	z-index: 9;
	background-color: none; 
	border: none;
}

/* -----------------------------------------------------------------Peintre et Vielleur */
.bas {
	width: 100%;
	position: fixed;
	bottom: 0px;
	padding: auto;
	margin: auto;
	text-align:center;
	border: none;
}
.conteneurBt_PV {
	display: inline-block;
	width: 50%;
	background: #ffffcc;
}
.conteneurBt_V {
	display: inline-block;
	width: 100%;
	background: #ffffcc;
}
.bt_P {
	float: right;
	margin: 0 10% 0 0;
	max-width: 100%;
	background: transparent;
	border: none;
}
.bt_V {
	float: left;
	margin: 0 0 0 10%;
	max-width: 100%;
	background: transparent;
	border: none;
}
.bt_Vseul {
	margin: auto;
	max-width: 100%;
	background: transparent;
	border: none;
}
.Vielleur {
	display: inline-block;
	max-width: 100%;
	margin: auto;
	cursor: pointer;
	border: none;
	background: none;
}
.Peintre {
	display: inline-block;
	max-width: 100%;
	margin: auto;
	cursor: pointer;
	border: none;
	background: none;
}
/* -------------------------Transformer boutonsubmit Peintre et Vielleur--------------- */
input.PV[type="submit"] {
	transform: scale(0, 0);
}

/* --------------------------------------------------------------------------Les textes */
.titre_ital {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 22px;
	font-size: 18px;
	font-weight:bold;
	font-style: italic;
	letter-spacing:1px;
	margin: 0px;
	color:#990000;
	text-align: center;
}
.texte_ital {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 20px;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 0px;
	margin: 0px;
	color: #990000;
	border: none;
}
.texte_12 {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 18px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0px;
	margin: 0px;
	color: #990000;
	border: none;
}
.texte_14 {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 20px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0px;
	margin: 0px;
	color: #990000;
	border: none;
}
.texte_16 {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 22px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0px;
	margin: 0px;
	color: #990000;
	border: none;
}
.texte_18 {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 24px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0px;
	margin: 0px;
	color: #990000;
	border: none;
}

/* ----------------------------------------------------------------Les resultats images */
/* --------------------------------------------Conteneurs------------------------------ */
.conteneur_media {
	width: 98%;
	min-height: 157px;
	margin: 0;
	padding: 1px 10px 1px 1px;
	background-color: #f5f5d3;
	border: 1px solid #a0522d;
	border-radius:15px;
}
.conteneur_livre {
	width: 98%;
	min-height: 145px;
	margin: 0;
	padding: 1px 10px 1px 0;
	background-color: #f5f5d3;
	border: 1px solid #a0522d;
	border-radius:15px;
}
.conteneur_img_oeuvre {
	display: flex; /* pour centrer l'img V & H */
	margin: 0;
	width: 135px;
	height: 135px;
	float: left;
	padding: 8px;
	border: none;
}
.img_oeuvre {
	display:inline-block;
	max-width: 100%;
	max-height: 100%;
	float : left;
	margin: auto;
	border: none;
}
.conteneur_texte_oeuvre {
	height: 140px;
	padding: 1px 10px 0 0;
	margin: 0;
	overflow: auto;
	text-align: left;
	clear: none;
}
/* --------------------------------------------Textes---------------------------------- */
.titre_image {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 22px;
	margin: 6px 0 3px 0;
	font-size: 18px;
	font-weight: bold;
	color: #990000;
	text-align:left;
}
.texte_image {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 18px;
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #990000;
	text-align:left;
}
.texte_ref_img {
	font-family: Palatino, Bookman, Times, Times New Roman, serif;
	line-height: 14px;
	margin: 0;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #990000;
	text-align:right;
}

/* ------------------------------------------------------------------Formulaire contact */
.contact_1_ligne {
	height: 22px;
	margin: auto;
	padding: 5px 10px;
	background-color: #fce8be;
	border: 1px solid #a0522d;
	border-radius:15px;
}
.contact_area {
	width: 90%;
	padding: 10px 10px;
	text-align: left;
	background-color: #fce8be;
	border: 1px solid #a0522d;
	border-radius:15px;
	}
/* ------------------------------------------------------------------Les Cases a cocher */
.ascenseur {
	overflow: auto;
	}
.casacocher {
	width: 75%;
	margin: 0;
	padding:0px 0px 0px 30%;
	text-align:left;
	line-height:25px;
	border: none;
	}
/* ----------------------------------------------boutons radio------------------------- */
.conteneur_cases {
	position: relative;
	margin: auto;
	padding: 0px auto;
	text-align: center;
	border: none;
	}
/* -------------------------------------------------Alphabet--------------------------- */
.conteneur_alpha {
	position: relative;
	width: 70%;
	line-height: 70px;
	margin: auto;
	padding: 0px auto;
	text-align: center;
	border: none;
	}
.alpha {
	display: inline-block;
	position: relative;
	width:0px;
	height: 45px;
	padding: 0 45px 0 0;
	margin: 0px;
	border: none;
	background: none;
}
.alpha_img {
	display inline-block;
	position: absolute;
	max-width: 100%;
	padding: 0; 
	margin: auto;
	font-size: 45px;
	text-align: center;
	color: #990000;
	border: none;
	background: none;
}
/* -------------------------Transformer boutonradio alphabet--------------------------- */
input.ABC[type="radio"] {
	transform: scale(0, 0);
}
input.ABC[type="radio"]:checked+label img {
    position: absolute;
    max-width: 45px;
    height: 45px;
    text-align: center;
	border: 2px solid #990000;
    border-radius:12px;
} 
/* ------------------------------------------------------------------------------Annees */
.case60 {
	display: inline-block;
	width: 60px;
	padding: 0px 5px;
	border: none;
}
.case-annee {
	margin: 0px;
	width: 60px;
	text-align: center;
	font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular, sans-serif;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 2px;
	font-weight: bold;
	color: #993300;
	background-color: #fce8be;
	border: 1px solid #a0522d;
	border-radius: 10px;
}

/* -----------------------------------------------------------------------------Boutons */
.BoutonClicConteneur {
	width: 100%;
	height: 33px;
	margin: 0 auto;
	text-align: center;
	border: 0px solid #a0522d;
}
.BoutonClic {
	display: inline-block;
    background-color: #cd853f;
    border: 2px solid #a0522d;
    border-radius:8px;
    color: #990000;
    font-size: 12px;
    font-weight:bold;
    letter-spacing:2px;
    padding: 0 5px;
}
.BoutonClic:hover {
    background-color: #cdb8a3;
}
/* ----------------------------------------------boutons du bas de page---------------- */
a:hover {
	opacity:0.8;
}

/* ------------------------------------------------------------------------Les couleurs */
.blanc {
	background-color: white;
}
.bleu {
	background-color: blue;
}
.citron {
	background-color: lime;
}
.jaune {
	background-color: yellow;
}
.jauneicono {
	background-color: #ffffcc;
}
.rouge {
	background-color: red;
}
.vert {
	background-color: green;
}
.orange {
	background-color: orange;
}

/* -----------------------------------------------------------------------------ESPACES */
.h5 {
	height: 5px;
	width: 100%;
	background-color: none;
	border: none;
}
.h15 {
	height: 15px;
	width: 100%;
	background-color: none;
	border: none;
}
.h25 {
	height: 25px;
	width: 100%;
	background-color: none;
	border: none;
}
.h50 {
	height: 50px;
	width: 100%;
	background-color: none;
	border: none;
}
.h100 {
	height: 100px;
	width: 100%;
	background-color: none;
	border: none;
}
.h150 {
	height: 150px;
	width: 100%;
	background-color: none;
	border: none;
}