@import url(https://fonts.googleapis.com/css?family=Lily+Script+One);

body{
	font-size: 62.5%;
	height: 100%!important;
	width: 100%!important;
	-ms-interpolation-mode: bicubic; /*beautifuler display for downsampled images in IE*/
	-ms-touch-action: pan-y; /*redirect all touch event in javascript*/
	padding: 0;
	margin: 0;
	background: #F5F5F5;
}

.top-bar{
	background: #1F80AF;
	border-bottom: 1px solid #0099CC;
	height: 4em;
	font-size: 1.5em;
	color: #F5F5F5;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
	position:fixed;
	top:0;
	width: 100%;
	z-index: 15;
}

.top-bar.green{
	background: #1f886a;
	border-bottom: 1px solid #19624e;
}

.top-bar > *{
	float: left;
	margin-top: 1em;
}

label{
	font-family: 'Lily Script One', cursive;
	font-weight: lighter;
	font-size: 1.4em;
	margin-left: 1em;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

label:after{
	content: ' :';
}

.top-bar > span[input="text"]{
	display: inline-block;
	position: relative;
	background: #0099CC;
	border: none;
	height: 2.5em;
	line-height: 2.5em;
	vertical-align: middle;
	width:20em;
	padding: 0 1em;
	outline: none;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}


.top-bar.green > span[input="text"]{
	background: #1f886a;
}

.top-bar > span[input="text"]:focus, .top-bar > span[input="text"]:active{
	background: #FFF;
	color: #222;
	border: 1px solid #0099CC;
}

.top-bar.green > span[input="text"]:focus, .top-bar.green > span[input="text"]:active{
	background: #FFF;
	color: #222;
	border: 1px solid #19624e;
}

.top-bar > .button{
	display: inline-block;
	margin-top: 0.625em;
	width: 1.25em;
	height: 1.25em;
	background: #1F80AF;
	color: #F5F5F5;
	padding: 0.12em 0.125em 0.19em 0.125em;
	font-family: "Segoe UI Symbol", Symbol;
	font-size: 1.6em;
	text-align: center;
	cursor: pointer;
	border-bottom:1px solid #0099CC;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.top-bar.green > .button{
	background: #1f886a;
	border-bottom: 1px solid #19624e;
}

.top-bar > .button:hover{
	background: #F5F5F5;
	color: #0099CC;
}

.top-bar.green > .button:hover{
	color: #19624e;
}

.container{
	display:table;
	position:relative;
	top:1em;
	left: 1em;
	right: 1em;
	padding: 5em 0 0 0;
	width: 30%;
	height: -webkit-calc(100% - 6em);
	height: -moz-calc(100% - 6em);
	height: -ms-calc(100% - 6em);
	height: calc(100% - 6em);
	z-index: 5;
	-ms-touch-action: pinch-zoom pan-y;
}

#map{
	display: inline-block;
	position: fixed;
	top: 6em;
	right:0;
	margin-left:30%;
	width:70%;
	height: -webkit-calc(100% - 6em);
	height: -moz-calc(100% - 6em);
	height: -ms-calc(100% - 6em);
	height: calc(100% - 6em);
	float: right;
	padding: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.table{
	display: block;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

span.tag{
	display: inline-block;
	background: #0089E0;
	border-radius: 0 8px 8px 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	padding: 0.3em 1.2em;
	position: relative;
	color: #fff;
	margin:0.5em;
	z-index: 10;
	max-width: 20em;
	height: 2rem;
	line-height: 2rem;
	transform: translate3d(0,0,0);
}

span.tag:before{
	display:block;
	content:' ';
	position: absolute;
	left:-0.95em;
	top:0;
	width:0;
	height:0;
	border-top:0rem solid transparent;
	border-bottom:1.7rem solid transparent;
	border-right:2em solid #0089E0;
}

.top-bar> *.trash.over{
	background: #FFA500;
}

*[drag], *[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	cursor : move;
}

a.delete{
	display:inline-block;
	background: #0089E0;
	font-family: "Segoe UI Symbol", Symbol;
	color: #000;
	padding: 0.3em 0.3em 0.3em 0.1em;
	width:0.9em;
	height:0.9em;
	z-index: 11;
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: 0;
}

a.delete:hover{
	background: #F5F5F5;
}

.container, #map{;
	overflow-x: none;
	overflow-y: auto;
}

.panel > canvas{
	position:absolute;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

#overlay{
	display: inline-block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;
	box-sizing: border-box;   
	background: #FFF;
	border: 1px solid #CCC;
	width: 40em;
	height: 15em;
	position: absolute;
	padding: 1.5em;
	top: 0;
	left: 0;
	-webkit-transform: translate3d(0, -1000px, 0);
	-moz-transform: translate3d(0, -1000px, 0);
	-ms-transform: translate3d(0, -1000px, 0);
	transform: translate3d(0, -1000px, 0);
	box-shadow: 0 0 0.2em 0.2em rgba(0,0,0,.4);
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

#overlay > .button{
	display:inline-block;
	background: #1f886a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	padding: 0.1em 0.4em;
	color: #fff;
	border: 1px solid #fff;
	outline: 1px solid #1f886a;
}

#overlay > span[input="text"]{
	display: block;
	font-size: 2em;
	background: #1f886a;
}

#overlay > span[input="text"]:focus, #overlay > span[input="text"]:active{
	background: #FFF;
	color: #222;
	border: 1px solid #19624e;
}