Alphabet 4 forme numérique pour les utilisateurs d'un langage multidirectionnel

A placer dans le body

chiffre 1

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:-15px ; height:15px ; margin-left:20px">
<div class="boucle210" style="margin-left:-16px">
</div>
</div>
</div>

chiffre 2

<div class="mon_humeur1 action">
<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="trait_vertical1" style="margin-top:0px ; margin-left:0px; height:7px">
<div class="trait_horizontal1" style="margin-top:7px ; margin-left:0px">
</div>
</div>
</div>
</div>

chiffre 3

<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="boucle206" style="margin-top:7px ; margin-left:0px">
</div>
</div>

chiffre 4

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:-7px ; height:14px ; margin-left:40px">
<div class="trait_horizontal1" style="margin-top:6px ; margin-left:-9px">
<div class="trait_vertical1 tourne45m" style="margin-top:-8px ; margin-left:4px ; height:12px">
</div>
</div>
</div>
</div>

chiffre 5

<div class="mon_humeur1 action">
<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="trait_vertical1" style="margin-top:-7px ; margin-left:0px; height:7px">
<div class="trait_horizontal1" style="margin-top:0px ; margin-left:0px">
</div>
</div>
</div>
</div>

chiffre 6

<div class="mon_humeur1 action">
<div class="boucle208" style="margin-top:-8px ; margin-left:40px">
<div class="boucle212" style="margin-top:-12px ; margin-left:-2px">
</div>
</div>

</div>

chiffre 7

<div class="mon_humeur1 action">
<div class="trait_horizontal1 " style="width:9px ; margin-top:1.2px ; margin-left:15px">
<div class="trait_vertical1 tourne30m" style="height:17px ; margin-top:1.2px ; margin-left:6px">
</div>
</div>
</div>

chiffre 8

<div class="mon_humeur1 action">
<div class="boucle204" style="margin-top:-8px ; margin-left:40px">
<div class="boucle205" style="margin-top:8px ; margin-left:-2px">
</div>
</div>
</div>

chiffre 9

<div class="mon_humeur1 action">
<div class="boucle202" style="margin-top:10px ; margin-left:40px">
<div class="boucle203" style="margin-top:-10px ; margin-left:0px">
</div>
</div>
</div>>

chiffre 0

<div class="mon_humeur1 action">

<div class="boucle201" style="margin-top:10px ; margin-left:40px">

</div>
</div>

chiffre +

<div class="mon_humeur1 action">
<div class="trait_vertical1" style="margin-top:8px ; height:10px ; margin-left:20px">
<div class="trait_vertical1 tourne90" style="height:9px ; margin-top:1.2px">
</div>
</div>
</div>

chiffre -

<div class="mon_humeur1 action">
<div class="trait_vertical1 tourne90" style="height:9px ; margin-top:1.2px">
</div>
</div>

chiffre *

<div class="mon_humeur1 action">

<div class="trait_vertical1" style="margin-top:8px ; height:10px ; margin-left:20px">
<div class="trait_vertical1 tourne45m" style="height:9px ; margin-top:1.2px">
<div class="trait_vertical1 tourne45m" style="height:9px ; margin-top:1.2px">
<div class="trait_vertical1 tourne45m" style="height:9px ; margin-top:1.2px">
</div>
</div>
</div>
</div>
</div>

chiffre /

<div class="mon_humeur1 action">

<div class="trait_vertical1 tourne30m" style="height:9px ; margin-top:1.2px">
</div>
</div>

signe 1

<div class="boucle206" style="margin-top:-7px ; margin-left:40px">
<div class="boucle206" style="margin-top:7px ; margin-left:0px">
</div>
</div>

A placer dans le style du head

.mon_humeur1{
position:relative;
width: 40px;
height: 40px;
background-color: #F5FFFA;
margin-left: 1px;
}
.trait_vertical1{
position:relative;
width: 2px;
height: 15px;
background-color: #3366FF;
}
.trait_vertical1:active{
background-color: #F5FFFA;
}
.trait_horizontal1{
position:absolute;
width: 10px;
height: 2px;
background-color: #3366FF;
}
.trait_horizontal1:active{
background-color: #F5FFFA;
}
.action{
position:absolute;
cursor:pointer;
background-color: #F5FFFA;

}
.boucle201{
width: 8px;
height: 15px;
border: 0px;
border-top: 2px solid #3366FF;
border-right: 2px solid #3366FF;
border-left: 2px solid #3366FF;
border-bottom: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle202{
width: 10px;
height: 15px;
border: 0px;
border-top: 2px solid #3366FF;
border-right: 2px solid #3366FF;
border-bottom: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle203{
width: 10px;
height: 15px;
border: 0px;
border-bottom: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle204{
width: 7px;
height: 10px;
border: 0px;
border-top: 2px solid #3366FF;
border-right: 2px solid #3366FF;
border-left: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle205{
width: 7px;
height: 10px;
border: 0px;
border-bottom: 2px solid #3366FF;
border-right: 2px solid #3366FF;
border-left: 2px solid #3366FF;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.boucle206{
width: 10px;
height: 7px;
border: 0px;
border-bottom: 2px solid #3366FF;
border-right: 2px solid #3366FF;
border-top: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle207{
width: 10px;
height: 7px;
border: 0px;
border-left: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle208{
width: 10px;
height: 7px;
border: 0px;
border-bottom: 2px solid #3366FF;
border-right: 2px solid #3366FF;
border-top: 2px solid #3366FF;
border-left: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle209{
width: 10px;
height: 7px;
border: 0px;
border-left: 2px solid #3366FF;
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:5px;
}
.boucle210{
position:relative;
width: 15px;
height: 10px;
border: 0px;
border-right: 3px solid #3366FF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:100px;
border-bottom-left-radius:10px;
}
.boucle211{
width: 14px;
height: 14px;
border: 0px;
border-top: 2px solid #3366FF;
border-right: 2px solid #3366FF;

border-top-left-radius:140px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:14px;
}
.angle1 {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.boucle212{
width: 14px;
height: 14px;
border: 0px;
border-left: 2px solid #3366FF;
border-top: 2px solid #3366FF;
border-top-left-radius:14px;
border-top-right-radius:14px;
border-bottom-right-radius:14px;
border-bottom-left-radius:7px;
}
.tourne45m {
float: left;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
.tourne30m {
float: left;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg);
}
.tourne90 {
float: left;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari */
transform: rotate(-90deg);
}