/* Mise en forme du texte de la boîte de dialogue */
h1{
	 font-size:16px;
	 text-align:center;
	 color:blue;
	 }
h2{
	 font-size:12px;
	 text-align:center;
	 }
p{
	font-size:12px;
	}
p.commentaire{
	font-size:10px;
	font-style:italic;
	}
#licence{
	 text-align:center;
}
@font-face {
    font-family: 'Script Ecole 2';
    src: url('scriptecole2-webfont.woff2') format('woff2'),
         url('scriptecole2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/****************************/
/* Mise en forme de la page */
/****************************/
body {
color:black;
background-color:white;
}
/*****************************/		
 /* Tableau de Numération */	
 /***************************/		
#tableau {
	position: absolute;
	background: lightgrey; /* on définit la couleur de fond argent*/
	height: 160px;
	width: 905px;
	left:50px;
	overflow:hidden;
}
table {
	border-collapse:collapse;
}
td.jaune, td.orange, td.vert,td.bleu{
	border:1px solid black;
		}

.glisse_nombre {
	position: absolute;
	left:150px;
	display:inline;
	width: 900px;
	top:70px; /* on descend la glissière */	
}
/*****************************************************/
/* Mise en forme des en-têtes Milliards, millions... */
/***************************************************/			
#classes{
	position:absolute;
	left:150px;
	width:750px;
	}
	
.entete_classe {
	text-align:center;
	vertical-align : top;
	font-size:20px;
	top:5px;
	width:150px;
}
/* Définition des couleurs des classes */			
.orange{background-color:rgba(255,128,0,0.5);}
.jaune{background-color:rgba(255,255,0,0.5);}
.bleu{background-color:rgba(128,128,255,0.5);}
.vert{background-color:rgba(128,255,128,0.5);}
.violet{background-color:rgba(255,128,255,0.5);}

/******************************/
/* Mise en forme des unités */
/****************************/
.unites {
position:relative;
top: 0px;
width:50px;
font-size:20px;
text-align:center;
}
/************************************/
/* Mise en forme partie Décimale */
/**********************************/
/* Taille "indice" inclinée à 45° pour la partie décimale */			
.decimal{
/* Safari */
-webkit-transform: rotate(-45deg);
/* Firefox */
-moz-transform: rotate(-45deg);
/* IE */
-ms-transform: rotate(-45deg);
/* Opera */
-o-transform: rotate(-45deg);	
	font-size:12px;
	text-align:left;
}
/* Position des étiquettes du tableau */
#dixiemes{
	position: absolute;
	top:20px;
	left:750px;
	text-align:left;
}
#centiemes{
	position: absolute;
	top:20px;
	left:800px;
	text-align:left;
}
#milliemes{
	position: absolute;
	top:20px;
	left:850px;
	text-align:left;
}
/**************************************/
/* Mise en forme des cases chiffres */
/************************************/			
.glisse_nombre input{
	position:absolute;
	left:5px;
	width:40px;
	height:70px;
	text-align:center;
	font-size:60px;
	font-family:'Script Ecole 2', sans-serif;
}
/**********************************************************/
/* Définition des boutons d'incrémentation des chiffres */
/*********************************************************/
.moins,.plus{
	position:relative;
	width:15px;
	height:15px;
	font-size:15px;
	position: absolute;
	cursor: pointer;
	background: white;
	border:1px solid black;
	border-radius: 50%;
	left:40%;
}
/* Position du bouton - */
.moins{
	top:72px;	
}
/* Position du bouton + */
.plus{
	bottom:0px;
}
/* Contenu du bouton + */
a.plus:before {
	content: '\2795';
}
/* Contenu du bouton - */
a.moins:before {
	content: '\2796';
}
/********************************/
/* Mise en forme de la virgule */
/*******************************/
#la_virgule{
	position: absolute;
	color:red;
	font-size:90px;
	top:60px;
	left:740px;
	}

/****************************************************************/
/* Définition des boutons Multiplier / Diviser / Remise à zéro */
/**************************************************************/
a.multiplie,a.divise{
	position: absolute;
	cursor: pointer;
	font-size:40px;
	font-style:bold;
	width:1em;
	height:1em;
	line-height:1em;
	text-align:center;
	border-radius: 50%;
	border:solid 1px black;
}
/* Boutons Multiplier */
a.multiplie,a.divise{
	font-size:40px;
	font-style:bold;
	background: lightgrey;
	border:solid 1px black;
}
a.multiplie,a.divise{
	top:10px;
}
a.multiplie{
	left:10px;
}
a.multiplie:before{
	content:'\2716';
}
a.fois_10,a.fois_100,a.fois_1000,a.divise_10,a.divise_100,a.divise_1000{
	position: absolute;
	cursor: pointer;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	background-color:white;
	border:solid 1px black;
	color:black;
	border-radius: 50%;
}
a.fois_10,a.fois_100,a.fois_1000{
	left:15px;
	font-size:10px;
}
a.fois_10{
	top:55px;
}
a.fois_100{
	top:90px;
}
a.fois_1000{
	top:125px;
}
/* Boutons Diviser */
a.divise{
	left:955px;
}
a.divise_10,a.divise_100,a.divise_1000{
	left:960px;
	font-size:10px;
}
a.divise_10{
	top:55px;
}
a.divise_100{
	top:90px;
}
a.divise_1000{
	top:125px;
}
a.divise:before{
	content:'\2797';
}
/* Boutons Aide, Effacer et Recommencer */
a.recommencer,a.effacer,a.apropos{
	position:absolute;
	cursor:pointer;
	top:10px;
	width:30px;
	height:30px;
	line-height:30px;
	font-size:30px;
	text-align:center;
	background-color: black;
	color:white;
	border:solid 1px black;
	border-radius: 50%;
}
/* icône Recommencer */
a.recommencer{
	left:60px;
}
a.recommencer:before{
	content:'\27F2';
}
/* icône Effacer */
a.effacer{
	left:100px;
}
a.effacer:before{
	content:'\1F5D1';
}
/* icône Aide */
a.apropos{
	left:140px;
}
a.apropos:before{
	content:'?';
}