body {
	background-color:#0BC;
	margin:0px;
	color:#FFF;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;	
}
#test{position:absolute; top:0px; left:0px; width:200px; height:200px; background-color:#FFF; color:#000; display:none;}
#wrapper{position:absolute; top:0px; left:0px; right:0px;margin:auto; background-color:#001144}
#canvas, #newline{
	opacity:1;	
	position:absolute;
	bottom:0px;
	right:0px;
	margin:auto;s
	padding:0px;
	overflow:hidden;
	cursor:crosshair;	
}
#newline{
	z-index:2;
}
#canvas {
	z-index:1;
}

#welcome, #sharepane {
	width:100%;
	height:100%;
	opacity:1;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	margin:auto;
	overflow:hidden;
	z-index:3;
	font-family: 'Alegreya Sans', sans-serif;
	font-size:1.5em;
	font-weight:600;
	background-color:rgba(0,17,68,.85);

}
#welcome img {width:1em; height:1em; margin:0em .25em;}
#welcome h1,#sharepane h1{font-size:2em;text-align:center;margin-top:1em;}
#welcome p{margin:0em 2em;padding:0em 0em 1em 0em;}
.close{font-size:1.5em; padding-top:0em;text-align:center; cursor:pointer}
.clouse:hover{text-decoration:underline}
#credits{position:absolute; bottom:0px; right:0px; font-size:.55em; margin-right:2em;}
#sharepane textarea{width:50%; height:10em; margin:auto; left:0px; right:0px;}
#welcome a, #welcome a:visited, #sharepane a, #sharepane a:visited{color:#0cd}
#sharepane p{padding:0px; margin:0em;  text-align:center;}
#sharepane h2{text-align:center; margin:1em 0em 0em 0em; padding:0px}
#sharepane .close{padding-top:1em;}

#controls{	
	width:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
	z-index:1;
	font-family: 'Alegreya Sans', sans-serif;
	background-color:#0CD;
}

#controls>span, #controls>div, #examplecontrols>span #examplecontrols>div{display:block; height:100%; float:left; padding:1em;}

.sep{width:2px; background-color:#0BC; padding:0em !important;}

#size, #cap, #color{display:inline-block; width:100%; height:100%;}
#size div, #cap div, #color div{background-color:#dcdcdc;  display:inline-block; cursor:pointer; position:relative; padding:0px;}
#size .active, #cap .active{background-color:#FFF !important}

#size div{height:2em;margin:0;}
#one{width:4%; position:absolute; left:4%;}
#two{width:8%; position:absolute; left:12%;}
#four{width:16%;position:absolute; left:20%; }
#eight{width:32%;position:absolute; left:32%;}

#cap{text-align:center}
#cap div{width:40%;height:2em; display:inline-block}
#cap #round{border-radius:1em; margin-left:4%}

#color{text-align:center}
#color div{height:1.5em; width:30%;border:3% solid #0cd;display:inline-block;}
#color .active{border:none; width:33%; height:2em;}
#white{background-color:#FFF !important; color:#000; position:absolute; float:left;}
#ltblue{background-color:#BFF6FF !important; color:#000}
#dkblue{background-color:#001144 !important; color:#FFF; position:absolute; float:right;}

#undo, #clear, #share{cursor:pointer;background-position:1em 1em; background-size:2em; background-repeat:no-repeat}
#undo{background-image:url(undo_g.svg);}
#undo:hover{background-image:url(undo_w.svg);}
#clear{background-image:url(close_g.svg);}
#clear:hover{background-image:url(close_w.svg)}
#share{background-image:url(share_g.svg);}
#share:hover{background-image:url(share_w.svg)}