html,
body{
	margin:0;
	padding:0;
	background-color: #ddd;
	width:100%;
	height:100%;
}


#dragMenu{
    width:100%;
    height:10px;
    background-color: #aab0b4;
    border-radius: 13px 13px 0 0;
    cursor: move;
}

#toolsMenu{
	display: block;
	position: absolute;
    z-index:9;
	
	border-radius:13px;
	background-color: #eee;
	padding:0.5em;
	left:27%;
	top:20px;
	width:600px;
    box-shadow: 3px 3px 5px #ddd;
}
.menu div{
    float:left;
}
.menu .shapesTools{
    display: block;
    float:left;
    clear:both;
    overflow:hidden;
}
.menu .shapesTools a{
	border: 1px solid #d3d3d3;
    border-radius: 13px;
    background: linear-gradient(358deg, #ececec, #ffffff);
    padding: 5px;
    margin: 5px;
    text-decoration: none;
    color: #555;
    text-align: center;
    display: block;
    width: 25px;
    height: 25px;
    float: left;

}
.menu a.ativo{
	border: 1px solid #e6e6e6;
    border-radius: 13px;
    background: linear-gradient(358deg, #ffffff, #ececec);
    padding: 5px;
    margin: 5px;
    text-decoration: none;
    color: #8daffb;
    text-align: center;
    display: block;
    width: 26px;
    height: 26px;
    
}

.menu a:hover{
    box-shadow: 2px 2px 3px #cfcfcf;
    width: 26px;
    height: 26px;
    display: block;
}

.menu .toolSize{
    margin-top:5px;
    float:left;
    display: block;
}

.menu .toolSize button.numberDown,
.menu .toolSize button.numberUp{
    float:left;
    width:25px;
    height:32px;
    background-color: #fff;
    color:#555;
}
.menu .toolSize button.numberDown{
    border-radius: 5px 0 0 5px;
    border:1px solid #000000;
}
.menu .toolSize button.numberUp{
    border-radius: 0 5px 5px 0;
    border:1px solid #000000;
}


.menu .toolSize button.numberDown:hover,
.menu .toolSize button.numberUp:hover{
    background-color: #eee;
    color:#333;
}

.menu .toolSize button.numberDown:active,
.menu .toolSize button.numberUp:active{
    color:#8daffb;
}

.menu .toolSize input.size{
    background-color: #fff;
    display:block;
    width:30px;
    height:28px;
    float:left;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
    font-size:15px;
    text-align:center;
    color:#555;
}
.menu input.size:focus-visible{
    outline: none;
}

.menu .colorPicker{
    float:right;
    display: block;
    clear:both;
    overflow:hidden;
    margin-top:5px;
}
.menu .colorPicker input{
	   
    border: none;    
    width: 35px;
    height: 35px;
}



.menu .tool{
	border:1px solid #000;
}
.coordenadas{
    z-index: 1;
    position: fixed;
    display: block;
    left:5px;
    bottom:5px;
    font-family: "Courier New";
    font-size: 11px;
}

.menuLayers{
    z-index: 1;
    position: fixed;
    display: block;
    right:5px;
    bottom:20px;
    font-family: "Arial";
    font-size: 12px;
    background-color: #eee;
    border:1px solid #333;
    border-radius:3px;
    padding:0.5em;
}

.menuLayers .layerOptions{
    display: block;
    right: 5px;
    top: 5px;
    clear:both;
    overflow:hidden;
}


.menuLayers .layerOptions a{
    border: 1px solid #000;
    border-radius: 3px;
    background: linear-gradient(358deg, #ececec, #ffffff);
    padding: 5px;
    margin: 5px;
    text-decoration: none;
    color: #000;
    text-align: center;
    display: block;
    width: 15px;
    height: 18px;
    float: left;
}

.menuLayers ol{
   list-style: none;
    padding:0;
    margin: 0;
    background-color: #d9d9d9;
    border: 1px solid #ddd;
}

.menuLayers ol li{
    display: block;
    width: 100px;
    font-size: 14px;
    font-family: Arial;
    padding: 0 0 0 4px;
    clear: both;
    overflow: hidden;
    content: "";
}

.menuLayers ol li a{
    color: #000000;
    border: 1px solid #000;
    float: right;
    display: block;
    padding: 3px;
    background-color: #fff;
}
.menuLayers ol li:nth-child(even){
    background-color:#c7c7c7
}
.menuLayers ol li.selected{
    border:2px solid #5d7eda;
    border-radius:5px;
}
.menuLayers ol li .delete{
    display:block;
    float:right;
}