body {
        padding: 8px;
        font-family:Calibri;
      }

header{position:fixed; left:0; top:0}
section{width:150vh;overflow:hidden;display:flex;flex-direction:row;}

#messageContainer{
    position: absolute;
    background: #eef;
    padding:4px;
    left:0;
    top:0;
    z-index:1;
}
#messageContainer:empty{padding:0 !important}
#messageContainer span{margin-left:4px;}

#selectedObject{background:beige; position:fixed;top:12px; left:60px;}
#debug{display:none}

#canvasContainer{position:relative;margin-top: 5px;}

#more_params label{min-width:40px}

canvas{
      	border: 1px solid green;
		position:relative;
      }

#illustration{max-width:250px;}

.display_alert {
    position: absolute;
    top: 0;
    left:0;
    display: none;
    border: 4px solid gray;
    background:white;
}

p{font-size:larger}

a{margin-left:12px;}

#selectedObject input, #actions input, #menu input {
        max-width:60px;
        /*display:block;*/
    }
#color_dialog input[type=button] {
          min-width:32px;
          /*display:block;*/
        }
div.button{display:block}

#dialog_geo input, .geo-info{font-size:large}

#messageContainer input[type=button], 
div.menu span{border: 1px solid maroon; background:beige; padding:4px; font-weight:bold}
 
div.menu span{
        display:inline-block;
        margin:4px;
        min-width:75px;
        width:20%;
    }
	   
input.toggle{opacity:.5}

select:empty{display:none}

.abandon {
    /*float:right;fait marcher width!*/
    background: red;
    color: white;
    width:40px;
    padding:0 8px 0 8px;
    vertical-align:top;
    text-align:center;
    font-size: xx-large;
}

widgetslide {
    position: absolute;
    bottom: 0;
    right: 0;
}

form{background:#ddd; border:#aaa; padding:4px;}
    
.submenu {
    display:none;
}

#widgetslide{display:inline-block; position:relative; width:480px; height:36px;z-index:2}  /*largeur id canslider*/ 
#slider{position:absolute;top:0;left:100px; opacity:.7; width:40px; text-align:center; background:bisque; z-index:2}
.binaire{float:left; text-align:center; font-size:24px; color:red}

/**1 image = xx icônes*/
span.geobuttonbar {
    margin-right:2px; float:left;
}
div.geobuttonbar p{display:inline}
div.geobuttonbar{border:1px solid #f4f4f4} 
div.geobuttonbar table{border:1px}
figure {
    display: inline-block;
}
.geobuttonbar input[type=button], .geobuttonbar>div.button, span.button, #property input[type=button]:not(.color) {
    background-image:url(buttonbar.png); background-repeat:no-repeat; width: 44px !important; height: 44px; margin: 0 !important; 
}

.geobuttonbar input:hover{border:1px solid blue}

.trashcan{background-position:-0px -0px}
.loupe_plus{background-position:-44px -0px}
.loupe_moins{background-position:-88px -0px}
.cadenas{background-position:-132px -0px}
.undo{background-position:-176px -0px}
.grille{background-position:-220px -0px}
.repere{background-position:-264px -0px}
.pellicule{background-position:-308px -0px}
.point{background-position:-0px -44px}
.midpoint{background-position:-44px -44px}
.segment{background-position:-88px -44px}
.line{background-position:-132px -44px}
.parallele{background-position:-176px -44px}
.perpendiculaire{background-position:-220px -44px}
.angle{background-position:-264px -44px}
.circle{background-position:-308px -44px}
.polygon_small{background-position:-0px -88px}
.hachure{background-position:-44px -88px}
.AB{background-position:-88px -88px}
.dashed{background-position:-132px -88px}
.distance{background-position:-176px -88px}
.crayon_gris{background-position:-220px -88px}
.remplir{background-position:-264px -88px}
.message{background-position:-308px -88px}
.vecteur{background-position:-0px -132px}
.sector{background-position:-44px -132px}
.symmetry{background-position:-88px -132px}
.line_symmetry{background-position:-132px -132px}
.rotation{background-position:-176px -132px}
.egalite{background-position:-220px -132px}
.compas{background-position:-264px -132px}
.arrow{background-position:-308px -132px}
.fdex{background-position:-0px -176px}
.trefle{background-position:-44px -176px}
.parametric{background-position:-88px -176px}
.sine2{background-position:-132px -176px}
.integrale{background-position:-176px -176px}
.horizontale{background-position:-220px -176px}
.coordonnee{background-position:-264px -176px}
.suite_recur{background-position:-308px -176px}
.ellipse{background-position:0px -220px}
.etiquette{background-position:-44px -220px}

.text{position:absolute; border:1px dashed gray; padding:4px;}

.bgimage{background-image:url(../proto_zi/carte43.png);  /*wservice*/
background-size:contain;
background-position:"center center";
background-repeat:no-repeat;}

/**Les deux constituants du checkbox (voir chk)**/
.chk {
    display: none;
}
.unchecked, .checked{float:left; width:36px;height:36px;line-height:36px;border:1px solid blue; text-align:center}
.checked{display:none;font-size:24px}
.chk:checked + .forchk .unchecked{display:none} 
.chk:checked + .forchk .checked{display:block}