/*
body, html {
	height:100%;
}
*/

body {
/*	background:#fff;
	padding-top:.5em;
	width:99%;	
	text-align:center;*/

	/*background-image: url("/includes/web/planet-bg.png");
	background-repeat: no-repeat;
	background-position: 10px 100px;*/
}

body, input {
	font-family:"Verdana",sans-serif;
	font-size:10pt;
	
}

input[type=submit], input[type=reset], button {
	font-weight:bold !important;
	font-size:0.85em !important;
	padding: 0.15em 0.15em !important;
	border:0.1em outset rgba(102, 102, 102, 0.05);
	cursor:pointer;
	-moz-border-radius: 0.20em;
	-webkit-border-radius: 0.20em;
	border-radius: 0.20em;
	color: #fff;
	background: rgb(202, 79, 27);
}


input[type=submit]:hover, input[type=reset]:hover, button:hover{
		
	border:0.2em outset rgba(102, 102, 102, 0.15)
	cursor:pointer;
	-moz-border-radius: 0.20em;
	-webkit-border-radius: 0.20em;
	border-radius: 0.20em;
	color: #fff;
	background: rgb(211, 113, 27);
}

.bandeau {
	text-align:center;
	width:30% !important;
	margin :auto !important;
	margin-top: 0.3em;
	margin-bottom:0.3em;
}
.bandeau2 {
	text-align:center;
	width:60% !important;
	margin :auto !important;
	margin-top: 0.3em;
	margin-bottom:0.3em;
}

h1, h2, h3, h4, .centre {
	text-align:center;
	width:100%;
	margin-top:0.3em;
	margin-bottom:0.3em;
}

.gauche {
	text-align:left;
}

.droite {
	text-align:right;
}

h1 {
	font-size:1.8em;
	margin-top:0.5em;
}

h2 {
	font-size:1.5em;
}

h3 {
	font-size:1.4em;
	margin-top:0.5em;
	margin-bottom:.2em;
}

h4 {
	margin-top: 0.5em;
	margin-bottom: 0.2em;
	color: rgba(93, 79, 68, 1.00);
	font-weight: bold;
	font-size: 1.15em;
}

h5 {
	text-align:center;
	vertical-align:center;
	padding:.2em .2em;
	margin-top:0.0em;
	margin-bottom:0.0em;
	border-collapse:collapse;
	background-color:rgba(94, 137, 212, 0.75);
	-moz-border-radius-topleft: 0.75em;
	-moz-border-radius-topright: 0.75em;
	-moz-border-radius-bottomright: 0.0em;
	-moz-border-radius-bottomleft: 0.0em;
	-webkit-border-top-left-radius: 0.75em;
	-webkit-border-top-right-radius: 0.75em;
	-webkit-border-bottom-left-radius: 0.0em;
	-webkit-border-bottom-right-radius: 0.0em;
	border-top-left-radius: 0.75em;
	border-top-right-radius: 0.75em;
	border-bottom-left-radius: 0.0em;
	border-bottom-right-radius: 0.0em;
	border-bottom:4px solid rgb(255, 255, 255);
	border-top:0px solid rgb(255, 255, 255);
	border-left:2px solid rgb(255, 255, 255);
	border-right:2px solid rgb(255, 255, 255);
	font-size:1.15em;
	font-weight:bold;
}

td.gauche {
	text-align:left !important;
}

.gras {
	font-weight:bold;
}

.bordure {
	border:1px solid black;
}

th{
	text-align:right;
	font-weight:bold;
	padding-right:.3em;
}

table#formulaire th{
	text-align:left;
}

table{
	text-align:center;
}
form#form_index {
	margin-bottom : 0em;
}
table#clavier{
	padding:.2em 0;
	border: 1px solid rgba(93, 79, 68, 0.25);
	font-weight:bold;
	width:13em;
	margin-top:.2em;
	margin-bottom:.1em;
	margin-left:auto;
	margin-right:auto;
	-moz-border-radius: 0.75em;
	-webkit-border-radius: 0.75em;
	border-radius: 0.75em;
}

table#clavier td {
	font-size:1.25em;
	text-align:center;
	width:2em;
	padding:.1em 0;
}

table#clavier td.ligne-petite {
	height:.4em !important;
	font-size:.25em !important;
}

table#clavier td a {
	color:#000;
	background-color:#fff;
	border:1px solid #999;
	text-decoration:none;
	padding:0 .5em;
	-moz-border-radius: 0.35em;
	-webkit-border-radius: 0.35em;
	border-radius: 0.35em;
	cursor:pointer;
}

table#clavier td a:hover {
	color:#fff;
	background-color:#000;
	border:1px outset #999;
}

table#clavier td a.bouton {
	font-weight:bold !important;
	font-size:0.85em !important;
	color: #fff;
	padding:0.15em 0.15em !important;
	border:0.1em outset rgba(102, 102, 102, 0.05);
	cursor:pointer;
	-moz-border-radius: 0.20em;
	-webkit-border-radius: 0.20em;
	border-radius: 0.20em;
	background: rgb(202, 79, 27);
}

table#clavier td a.bouton:hover {
	border:0.2em outset rgba(102, 102, 102, 0.15);
	color: #fff;
	cursor:pointer;
	-moz-border-radius: 0.20em;
	-webkit-border-radius: 0.20em;
	border-radius: 0.20em;
	background: rgb(211, 113, 27);
}

a {
	color:#000;
	text-decoration:none;
}

a.reel {
	color:#00f;
}

a:hover {
	text-decoration:underline;
	
}

a img {
	border:none;
}

q:lang(fr) {
	quotes:"\00AB\00A0" "\00A0\00BB" "\201C" "\201D";
}

input[type="submit"],input[type="button"] {
	
}

abbr {
	border-bottom:1px dotted #000;
}

table#debug {
	position:fixed;
	bottom:0;
	left:0;
	background-color:red;
	color:white;
	padding:0;
	font-size:75%;
}

.fond_rouge {
	background-color: #fcc !important;
	background-color: rgba(182, 78, 33, 0.125) !important;
	-moz-border-radius: 0.75em;
	-webkit-border-radius: 0.75em;
	border-radius: 0.75em;
}

p.fond_rouge, div.fond_rouge {
	margin:.5em 5em;
	padding:.2em;
	border:2px solid red;
}

body #entete {
	width:100%;
	height:5em;
	text-align:center;
	vertical-align:center;
}

body #entete-niv2 {
	width: 100%;
	height: 4em;
	text-align: center;
	vertical-align: center;
	color: rgb(202, 79, 27);
}

body #entete-niv3 {
	width: 100%;
	height: 2em;
	text-align: center;
	vertical-align: top;
	color: rgb(220, 145, 27);
}

body #entete-niv4 {
	width:100%;
	height:0.5em;
	text-align:center;
	vertical-align:top;
}

#clavier_virtuel {
    position: relative;
}

span #t1.square {
	height:35px;
}

#i_1 {
    position: absolute;
    left: 10px;
    top: 10px;
	
}



#i_2 {
    position: absolute;
    left: 55px;
    top: 10px;
   
}


#i_3 {
    position: absolute;
    left: 100px;
    top: 10px;
    
 
}

#i_4 {
    position: absolute;
    left: 145px;
    top: 10px;
 
}

 #i_5 {
    position: absolute;
    left: 10px;
    top: 55px;
   
}

 #i_6 {
    position: absolute;
    left: 55px;
    top: 55px;
   
}

 #i_7 {
    position: absolute;
    left: 100px;
    top: 55px;
 
}

 #i_8 {
    position: absolute;
    left: 145px;
    top: 55px;
  
}
 #i_9 {
    position: absolute;
    left: 10px;
    top: 100px;
   
}

 #i_10 {
    position: absolute;
    left: 55px;
    top: 100px;
  
}

 #i_11 {
    position: absolute;
    left: 100px;
    top: 100px;
  
}

 #i_12 {
    position: absolute;
    left: 145px;
    top: 100px;
  
}

 #i_13 {
    position: absolute;
    left: 10px;
    top: 145px;
  
}

 #i_14 {
    position: absolute;
    left: 55px;
    top: 145px;
  
}

 #i_15 {
    position: absolute;
    left: 100px;
    top: 145px;
   
}
 #i_16 {
    position: absolute;
    left: 145px;
    top: 145px;
  
}
.square:hover {
    border: 2px solid rgb(161, 148, 134);
    border-top-left-radius: 0.50em;
	border-top-right-radius: 0.50em;
	border-bottom-left-radius: 0.50em;
	border-bottom-right-radius: 0.50em;
	cursor:pointer;
}
 .square    {
	
	cursor:pointer;
}
 #i_1:active , #i_2:active, #i_3:active, #i_4:active, #i_5:active, #i_6:active, #i_7:active, #i_8:active, #i_9:active , #i_10:active ,#i_11:active, #i_12:active, #i_13:active, #i_14:active, #i_15:active, #i_16:active{
	border: 2px inset rgb(93, 79, 68);
	cursor:pointer;
}

.lien-bleu {
	color:rgb(35, 76, 173);
	font-weight:bold;
}

.lien-bleu:hover {
	text-decoration:none;
	color:#000000;
	font-weight:bold;
}


.ligne-separation {
	display:inline-block;
	text-align:left;
	color:black;
	width:100% !important;
	background:rgb(202, 79, 27) !important;
	height:2px;
}

.div-vide-auto {
	width:100%;
	height:1em;
}

.div-vide-auto-grand {
	width:100%;
	height:2em;
}

.div-100pourcent {
	text-align:center;
	width: 100%;
}

.txt-copyright {
	color: rgb(93, 79, 68) !important;
	font-size: 7pt !important;
	font-weight: bold !important;
	padding-top: .1em !important;
}

body #global-1 {
	display:inline-block;
	text-align:center;
	vertical-align:center;
	width:100%;
	height:auto;
}

body #global-2 {
	display:inline-block;
	text-align:center;
	vertical-align:center;
	width:100%;
	height:auto;
}

body #zone-1 {
	display:inline-block;
	padding:0.50em 0.90em;
	padding-bottom : 0.1em;
	/*text-align:center;*/
	vertical-align:center;
	/*width:auto;
	height:auto;*/
	background-color: rgb(234, 231, 221);
	-moz-border-radius: 0.75em;
	-webkit-border-radius: 0.75em;
	border-radius: 0.75em;
	margin-left:auto;
	margin-right:auto;
}

body #zone-1 table tr td #phv {
	text-align:center;
	vertical-align:center;
}
.mobile {
		display: none !important;
	}
@media (max-width: 640px) {
	 {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	/*body {
		width: auto;
		margin: 0;
		padding: 0;
	}*/
	body #global-1 {
	display:inline-block;
	text-align:center;
	vertical-align:center;
	/*width:100%;
	height:auto;*/
}


/* Firefox */ 
input[type=number] { 
	-moz-appearance: textfield; 
} 
/* Chrome */ 
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { 
	-webkit-appearance: none; margin:0; 
} 
/* Opéra*/ 
input::-o-inner-spin-button, input::-o-outer-spin-button { 
	-o-appearance: none; margin:0 
}

body #global-2 {
	display:inline-block;
	text-align:center;
	vertical-align:center;
	/*width:auto;
	height:auto;*/
}

body #zone-1 {
	display:inline-block;
	padding:.1em .7em;
	/*text-align:center;*/
	vertical-align:center;
	/*width:auto;
	height:auto;*/
	background-color: rgb(234, 231, 221);
	-moz-border-radius: 0.75em;
	-webkit-border-radius: 0.75em;
	border-radius: 0.75em;
	margin-left:auto;
	margin-right:auto;
}
	
	body, input {
	font-family:"Verdana",sans-serif;
	font-size:8pt;
	-moz-appearance: textfield; 
}
	
	h1 {
	font-size:0em;
	margin-top:0em;
}

	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
		horizontal-align:center;
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	.mobile {
		display: block !important;
	}
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */

	/*body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}*/
}