/*------------- Reset partiel ------------------------*/
*{
margin:0;
padding:0;
-moz-transition: all ease 0.6s;
-o-transition: all ease 0.6s;
-webkit-transition: all ease 0.6s;
transition: all ease 0.6s;
}
/*----------------------------------------------------*/



/*----------------------------------------------------*/
body{
background-color:#444;
}

/*----------------------------------------------------*/
#content{
position:absolute;
bottom:10%;
top:10%;
left:10%;
right:10%;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
}


/*----------------------------------------------------*/
/* Lignes */
.ligne, .interligne{
position:relative;
}

.ligne{
-webkit-flex-grow:8;
-moz-flex-grow:8;
flex-grow:8;
display:-webkit-flex;
display:-moz-flex;
display:flex;
}

.interligne{
-webkit-flex-grow:2;
-moz-flex-grow:2;
flex-grow:2;
}


/*----------------------------------------------------*/
/* Lettres */
.car{
position:relative;
}

.lettre{
-webkit-flex-grow:8;
-moz-flex-grow:8;
flex-grow:8;
}

.interlettre{
-webkit-flex-grow:1;
-moz-flex-grow:1;
flex-grow:1;
}

.barre{
position:absolute;
}

.hor{height:16.67%;} /* max selon la grille ci-dessous*/
.ver{width:50%;} /* max selon la grille ci-dessous*/

.top-0{top:0%;}
.top-1{top:16.67%;}
.top-2{top:33.33%;}
.top-3{top:50%;}
.top-4{top:66.67%;}
.top-5{top:83.33%;}
.top-6{top:100%;}

.bot-0{bottom:100%;}
.bot-1{bottom:83.33%;}
.bot-2{bottom:66.67%;}
.bot-3{bottom:50%;}
.bot-4{bottom:33.33%;}
.bot-5{bottom:16.67%;}
.bot-6{bottom:0%;}

.lef-0{left:0%;}
.lef-1{left:40%;}
.lef-2{left:50%;}
.lef-3{left:60%;}
.lef-4{left:100%;}

.rig-0{right:100%;}
.rig-1{right:60%;}
.rig-2{right:50%;}
.rig-3{right:40%;}
.rig-4{right:0%;}

.sub{
position:absolute;
background-color:#e3e3e3;
border-radius:3px;
}

.barre.ver .sub{
height:100%;
width:60%; /* max 100%*/
}
.barre.hor .sub{
width:100%;
height:60%; /* max 100%*/
}

.barre.ver[class*="lef-"] .sub{left:0%;}
.barre.ver[class*="rig-"] .sub{right:0%;}

.barre.hor[class*="bot-"] .sub{bottom:0%;}
.barre.hor[class*="top-"] .sub{top:0%;}

.barre.ver.mid,
.barre.ver.mid .sub{
left:0%;
right:0%;
margin:0 auto;
}

.barre.hor.mid,
.barre.hor.mid .sub{
top:0%;
bottom:0%;
margin:auto 0;
}

/*----------------------------------------------------*/
/* Parametres */
	/* épaisseurs X et Y */
	.barre.ver .sub{width:90%; /* max 100%*/}
	.barre.hor .sub{height:7%; /* max 100%*/}

	/* rayon d'arrondi */
	.sub{border-radius:0;}
	
	/* couleur des barres */
	.barre.hor .sub{background-color:red;}
	.barre.ver .sub{background-color:red;}
	
	/* opacité des barres */
	.sub{opacity:1;}
	
	/* couleur de fond */
	body{background-color:black;}

/*----------------------------------------------------*/
/* Spécifique */
.chiffre .barre .sub{background-color:#c70000}
.maj .barre .sub{background-color:#ff0271}
.ponct .barre .sub{background-color:#ff0553}