/**Style commun exos de math**/
body{padding:4px; font-family:"verdana"; font-size:18px; margin: 4px;}

body>div, form{padding:4px;}

h1,h2,h3{color:#88E}

h2.smart:before{content:\219D}

h3{font-size:large; color:maroon}

footer{position:fixed;bottom:0; background:beige; padding:6px;}

.enjolive{background:url(http://tactilab.sourceforge.io/tactimath/style/blue_tree.png)}

.smart>input[type=button]{height:48px; background:#9AF; color:white;}

input[type=button], button {
    background:#5CF;
    border-radius:4px;
    color:white;
}

.button {
    /*background: beige;*/
    height: 16px;
    border-radius:4px;
}

input, select{font-size:18px;}

/*.friend*/
.friend{background-image:url(friend_help.jpeg); 
        background-repeat:no-repeat;
        height:100px;
        width:100px;
        float:right;
        }
::placeholder{font-size:smaller}

span, select{margin: 2px} 

hr{margin:2px}

.colonne {
    display:flex;
    flex-direction: column;
}

.colonne>div{
    flex-direction:row
}

.vcentered{display:inline-block;}

.formula, .formula input, #numericBoard, #numericBoard input {
     font-family:georgia; font-style:italic; 
}

.frac, .formula, .formula input{font-size:x-large}

.formula, .formula input, .formula p {
    margin: 4px; padding:4px;
}

/*clavierNumeric*/
.edition{border: 1px solid blue; background: #cde; padding: 4px; display:none}
div.edition>div{/*background:#eee; border:1px solid #777;*/ 
    min-width:40px;
    display:inline-block;
    margin:4px;
    text-align:center;
    }
.surbrille{border:2px solid #5fa;}
/*FIN*/

/*#numericBoard input{font-family: georgia; font-weight: bold; font-style:italic}*/


#numericBoard{max-width:600px;}
#numericBoard input[type=button]{
                    border:2px solid #888; 
                    border-radius: 4px;      
                    font-weight: bold;
                    min-height:36px;
                    min-width:40px;
}

/*Pour donner le focus � un champ �dit� par le NB mais en-dehors du NB*/
input.entry{border:2px solid green}

table.classic thead {background:#eee; font-weight:bold; padding:4px;}

table.classic td{border:none;}

thead td{text-align:center}

table.classic td:first-child{background:#eee;color:purple;padding:4px}

label > input {
    margin-left:4px;
}
	
/*.sipher, .operator, .formula span, .formula td{font-size: 28px; margin: 4px;}*/
img.button {
    width:40px; height:40px;border: 1px solid #eee;   
}

img.keyboardSample {
    background:url(keyboardImg2.jpg);
    background-repeat:no-repeat;
    background-size:contain;
}

.link a{text-decoration:none; border:2px solid blue}

ul {
    list-style-type:none; margin: 4px;
}

ul.horiz li {
    float:left; padding: 4px;
}

/*Messages de feedback/correction*/
p:empty{display: none}

p.correction, p.help{background: #ddd; font-size:x-large; padding:4px; border: 1px solid #cda;}

/*p.errorMessage{background:#e77; color:red; font-size:x-large; padding: 4px; border: 1px solid #d66; }*/

.errorAnswer{color:red;}

#bravo,.bravo{color:green; }
#echec,.echec{color:#f44; }
.fail{color: red; border: 1px solid red;}

.dialog {
    background: #aaf;
    margin: 4px;
    float: right;
}

/*Messages animés:*/
.ephemere{animation-name:ephemere;
    animation-duration:6s;
  transform:rotateX(0.25turn)
}

@keyframes ephemere{
    0%{transform: rotateX(0);}
    66%{transform:rotateX(0.1turn)}
}

.anim{
    display: inline-block;
    animation-name:anim;
    animation-duration:6s;
}
@keyframes anim{
    0%{margin-left:0;}			
    50%{margin-left:100px;margin-top:50px; font-size:x-large;}
    100%{color:purple;}
}
#e_alert{padding:6px;border-radius: 6px;}
#e_alert:not(.anim) {
        display:none;
    }
#e_alert:empty{display:none}
#e_alert:before{content:'!'; font-size:x-large}