

#layerZero{
}

#layerOne{
	padding:2em 0 1.5em 0;
	text-align:left;
}

/* for titleLayers */
.title3{width:33.3%;padding-bottom:33.3%;}
.title2{width:50%;padding-bottom:50%;}
.title3 img{width:50%;height:auto;margin-top:5%;}
.title2 img{width:65%;height:auto;/*margin-top:10%;*/}

.layerTitle img{opacity:0.6;}
.layerTitle.selected img{opacity:1;}
.layerTitle{
	display:inline-block;
	position:relative;
	cursor:pointer;
	height:0;
	background-color:#2c8f88;
	box-shadow: 1px 0 0 rgba(0,0,0,0.5) inset;
}
.layerTitle div{
	position:absolute;
	font-size:0.9em;
	width:100%;
}
.title2 div{bottom:0.5em;}
.title3 div{bottom:0;}

.layerTitle:hover{
	background-color:#5dd5b0;
}
.layerTitle.selected{
	background-color:#5dd5b0;
}

/* for standard layers */

.layer, .layerNC{
	color:#000000;
	cursor:pointer;
	font-size:1em;
	padding:0.3em 1.5em 0.3em 0.9em;
	position:relative;
}
.layer:hover, .layerNC:hover{
	background-color:#5dd5b0;
}
.layer.selected, .layerNC.selected{
	color:#ffffff;
	background-color:#5dd5b0;
}
.layerGroup{
	position:relative;
}
.layerChild{
	position: absolute;
    top: 0;
    left: 105%;
    background-color: rgba(255,255,255,0.6);
    padding-bottom: 0.8em;
    width: 120%;
	opacity:1;
	transition: all 0.3s;
	transform:none;
}
.layerChild.hidden{
	transform: translate(-30%,0);
    opacity: 0;
}
.plusIcon, .tickIcon{
	width: 1.2em;
    height: 1.2em;
    float: right;
    margin-right: 0.3em;
	background-size:100%;
	position:absolute;
	top: 0.3em;
    right: 0.1em;
}
.plusIcon{background-image:url("image/plusLayer.png");}
.selected .plusIcon, .selected.plusIcon{
	background-image:url("image/minusLayer.png");
}
.tickIcon {
	outline: 1px solid rgba(0,0,0,0.75);
    outline-offset: -0.25em;
}
.selected .tickIcon {
	outline: 1px solid rgba(255,255,255,0.9);
	background-image:url("image/tickYes.png");
}

.layerSlider{
	height:1.5em;
	width:100%;
    margin-bottom:0.5em;
}
.sliderClose{
    width: 1.4em;
    height: 1.4em;
	margin-right: 0.2em;
	cursor:pointer;
	float:right;
	background-image:url("image/close.png");
	background-size:100%;
}

.sliderClose:hover{
	background-image:url("image/closeHover.png");
}