@media screen
{
  /*
  svg:root {
    width:  30cm;
    height: 22cm; 
  }
  svg { width: 30cm; height: 22cm; }
  */
}

 body{
    font-family: 'Gloria Hallelujah', cursive;
    color: #333333;
    background-image: url(res/bkg_body.png);
    background-position-x: initial;
}
            
svg, svg:not(:root) { overflow:  hidden; }
/*svg { width:attr(width); height:attr(height) }*/

div#canvas{
    margin: 0 auto;
    width: 30cm; height: 22cm;
    background-image: url(res/arriere-plan.jpg);
    background-position-x: initial;
}

rect#fondTapis{
    fill:rgb(41,121,182);
    /*stroke:black;
    stroke-width:1;
    opacity:0.6;*/
    }
rect#fondPlateau{
    fill:white;
    /*stroke:black;
    stroke-width:1;*/
    opacity:0.2;
    }

rect[id^=dalle]{
    fill:red;
    /*stroke:green;
    stroke-width:0;*/
    }
    
g.button {
    opacity: .8;
}
g.button:hover {
    cursor: pointer; 
    opacity: 1;
    }
.draggable {
    cursor: move;
    }
#grip{
    opacity:0.6; 
    /*cursor: url('#gripMoveCursor'), move;*/
    cursor: url('#gripMoveCursor'), url('gripMoveCursor512.png') 231 231, url('cursor.png') 8 8, move;
    }
.help{
    cursor: help;
    }

#modal{
    opacity:0.3;
    cursor: not-allowed;
    }
#modal[hidden=true]{
    display:none;
    }

#tilesPanel{
      cursor: crosshair;
    }
#tilesPanel[hidden=true]{
      /*visibility: hidden */
      display:none;
    }
#tilesPanel use{
      cursor: crosshair;  
    }
#closeTilesPanel{
       cursor: default; 
    }
   
iframe#editeur{
    width:22cm;
    height:22cm;
    border:none;
}
nav{
    background-color: rgba(125,125,125,0.2);
    float:right;
    _position: absolute;
    _left:22cm;_top:1.2cm;
    width:8cm; height:22cm;
    _margin-right: 1cm;
}
#menu{
    _background-color: red;
    width:6.3cm;
    margin-top:1cm;
    margin-right:auto; margin-left:auto;
    text-align:center;
}
#menuEntry_loadIt, #menuEntry_saveIt, #menuEntry_cleanIt, #menuEntry_createIt
{
    width:2.6cm;
    _border:1px solid white;
    margin:0; padding:0;
}

section.help{
    _background-color: blueviolet;
    border:1px solid white;
    width:6.3cm;height:6.3cm;
    margin-top:1cm;
    margin-right:auto; margin-left:auto;
}
section.about{
    _background-color: blueviolet;
    width:6.3cm;
    margin-right:auto; margin-left:auto;
    margin-top:4.5cm;
}
section.about svg{
    width:4.5cm;
    margin-left:0.9cm; margin-top:.2cm; 
}

input[type=range]{
    cursor: pointer; 
}

aside.info{
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    width: 30cm; height: 22cm;

    left: 50%; 
    -ms-transform:translate(-50%, 0); /* IE 9 */
    -webkit-transform: translate(-50%, 0); /* Chrome, Safari, Opera */
    transform: translate(-50%, 0);
        
    _-ms-transform: rotate(1deg); /* IE 9 */
    _-webkit-transform: rotate(1deg); /* Chrome, Safari, Opera */
    _transform:rotate(1deg);
    
    display:none;
}
aside.info article{
    background-color: rgba(133,133,133,0.9);
    position: absolute;
    width:16cm;
    _top:1cm;

    left: 50%; /* left:50% && tranform: translate(-50%) permettent de centrer */
    -ms-transform:translate(-50%, 0); /* IE 9 */
    -webkit-transform: translate(-50%, 0); /* Chrome, Safari, Opera */
    transform: translate(-50%, 0);

    padding:.2cm;
}
aside.info article header{
    text-align: center;
    padding: 0px 0 0px 0;
    margin-bottom:22px;
    border-bottom: 1px solid rgb(41,121,182);
    font-size:120%;
}
aside.info article button{
    float:right;
}