body{
	margin:0;
	background: #fff;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;

	overflow: hidden;
}
canvas{
	position:absolute;
	top:0; left:0;
}

#cursor{
	position: absolute;
	width:0; height:0;
}
#cursor img{
	position: absolute;
	top:-30px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#canvasses{
	position:absolute;
	top:0; left:0;
	width: calc(100% - 300px);
	height: 100%;
}
#canvasses[fullscreen=yes]{
	width: 100%;
}
/*
#canvasses[cursor=ink]{
	cursor: url('cursors/ink.png') 0 30, auto;
}
#canvasses[cursor=drag]{
	cursor: url('cursors/drag.png') 15 15, auto;
}
#canvasses[cursor=erase]{
	cursor: url('cursors/erase.png') 5 25, auto;
}
#canvasses[cursor=label]{
	cursor: url('cursors/label.png') 15 15, auto;
}
*/



/**********
 PLAY CONTROLS
**********/

#playbar{
	position: absolute;
	bottom: 15px;
	left: calc(50% - 275px); /* 50% - half of (playbar width + sidebar width)*/

	width: 250px;
	height: 75px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#playbar[fullscreen=yes]{
	left: calc(50% - 125px); /* 50% - half of (playbar width)*/
}
#playbar .component_button{
	position: absolute;
	bottom: 0;
	width: 230px;
	height: 25px;
	background: #444;
}
#playbar .component_button:hover{
	background: #555;
}
#playbar .play_slider{
	width: 190px;
    position: absolute;
    left: 30px;
    margin: 0;
}
.play_button_icon{
	width: 25px;
	height: 25px;
	background-image: url(icons/controls.png);
	display: inline-block;
	background-size: 400% 100%;
}
.play_button_icon[icon="0"]{ background-position: 0 0; }
.play_button_icon[icon="1"]{ background-position: -25px 0; }
.play_button_icon[icon="2"]{ background-position: -50px 0; }
.play_button_icon[icon="3"]{ background-position: -75px 0; }
.play_button_label{
	display: inline-block;
	position: relative;
    top: -5px;
}
div[big=yes] .play_button_icon{
	width: 30px;
	height: 30px;
}
div[big=yes] .play_button_label{
	top: -3px;
}



/**********
 TOOLBAR 
**********/

#toolbar{
	position: absolute;
	left: 0px;
	top: calc(33% - 142.5px); /* 33% - half of toolbar height */

	width:75px; height:280px;
	padding: 5px;
	background-color: #ddd;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#toolbar[mode=play]{
	display: none;
}

.toolbar_button{
	width:60px; height:60px;
	margin: 5px;
	border: 2px solid #ddd;
	cursor: pointer;
	background-size: 100% 100%;
}
.toolbar_button[selected=yes]{
	border: 2px solid #888;
	background-color: #999;
}

/**********
 SIDEBAR 
**********/

#sidebar{
	position: absolute;
	top:0; right:0;
	width: 300px;
	height: 100%;
	background: #ddd;

	font-weight: 100;
	font-size: 17px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#sidebar > div{
	margin: 25px;
}
#sidebar > div > div{
	margin-bottom: 20px;
}
#sidebar[mode=play]{
	background: #222;
	color: #777;
}
#sidebar .mini_button{
	background: #999;
	color: #fff;
	padding: 3px 5px;
	border-radius: 2px;
	font-size: 16px;

	cursor: pointer;
}
#sidebar .mini_button:hover{
	background: #aaa;
}
#sidebar[mode=play] .mini_button{
	background: #555;
	color: #111;
}
#sidebar[mode=play] .mini_button:hover{
	background: #666;
}
#sidebar a{ color: #777; }
#sidebar a:hover{ color: #999; }
#sidebar hr{
	border: none;
	border-bottom: 2px solid rgba(150,150,150,0.5);
	width: 300px;
	position: relative;
	left:-25px;
	margin: 10px 0;
}
.component_input{
	border: none;
	
	width:calc(100% - 10px);
	height:22px;
	padding: 5px;
	
	font-size: 20px;
	font-weight: 100;
}
.component_textarea{
	border: none;
	width:calc(100% - 10px);
	height: 100px;
	padding: 5px;
	font-size: 16px;
	font-weight: 100;
}
.component_output{
	border: 1px solid #aaa;
	width:100%;
	background: #ccc;
	color: #666;
	font-size: 15px;
	font-weight: 100;
}
.component_slider{
	position: relative;
	width: 250px;
	height: 52px;
}
.component_slider_graphic{
	position: absolute;
	width: 250px;
	height: 40px;
	cursor: pointer;
}
.component_slider_pointer{
	position: absolute;
	top: 42px;
	width: 15px;
	height: 10px;
}
.component_label{
	margin-bottom: 5px;
}
.component_button{

	width: calc(100% - 20px);
	background: #888;
	color: #fff;
	font-size: 20px;
	font-weight: 100;
	text-align: center;
	padding: 10px;
	border-radius: 5px;

	cursor: pointer;
}
.component_button:hover{
	background: #999;
}
.component_button[header=yes]{
	position: absolute;
	top:0; left:0;
	width: 280px;
	background: #222;
    border-radius: 0px;
    color: #888;
}
.component_button[header=yes]:hover{
	background: #333;
}



/**********

MODAL

**********/

#modal_container{
	display: none;
	position: absolute;
	width: 100%; height: 100%;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#modal_container[show=yes]{
	display: block;
}
#modal_bg{
	position: absolute;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.8);
}
#modal{

	position: absolute;
	top:0; left:0; right:0; bottom:0;
	margin: auto;

	width: 600px; height: 300px;
	padding: 10px;
	background: #ddd;
}
#modal_close{
	width: 120px;
	font-weight: 100;
	color: #777;
	cursor: pointer;
}
#modal_close:hover{
	color: #888;
}
#modal_page{
	margin: 15px;
	font-size: 25px;
	font-weight: 100;
	color: #333;
}
#modal iframe{
	border: none;
}