/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

body { background-color:#ffffff; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; z-index:5; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
#CB_console { width:460px; height:100px; background-color:#aaaaaa; color:#ddddff; }
button { cursor:pointer; cursor:hand; }
span { color:#aa0000; }
#debug_switch { position:absolute; top:0px; right:6px; z-index:2; color:#ffaa00; }
#debug_switch, label, #debug_checkbox  { cursor:hand; cursor:pointer; }
#skip_music_loader { position:absolute; bottom:10px; left:10px; cursor:hand; cursor:pointer; }
#skip_music_loader:hover { cursor:hand; cursor:pointer; color:#0000aa; }
#loading, #music_loader_checker
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	color:#ff0000;
	background-color:#ffffff;
	z-index:5;
}
#music_loader_checker
{
	display:none;
	visibility:hidden;
	z-index:4;
	font-size:12px;
	font-size:0.6em;
	font-size:60%;
	font-size:3vmin;
}
#button_load_check_music
{
	position:absolute;
	left:25%;
	top:25%;
	width:50%;
	height:50%;
	color:#ff0000;
	font-weight:bold;
	z-index:4;
}
#music_progress
{
	display:table-cell;
	vertical-align:middle;
	color:#ff0000;
	font-weight:bold;
	z-index:4;
	animation:blinking 0.5s ease-in-out infinite;
}
#my_canvas { position:absolute; left:0px; top:0px; z-index:1; }
#my_canvas_buffer { position:absolute; left:0px; top:0px; visibility:hidden; display:none; z-index:1; }
#start_button
{
	z-index:3;
	visibility: hidden;
	display: none;
	position:absolute;
	left:10%;
	top:10%;
	width:80%;
	height:80%;
	color:#ff0000;
	font-size:12px !important;
	font-size:0.58em !important;
	font-size:58% !important;
	font-size:2.8vmin !important;
	font-weight:bold;
	filter:alpha(opacity=90);
	opacity:0.9;
	-moz-opacity:0.9;
	-khtml-opacity:0.9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
#start_button:hover
{
	color:#ffaa00;
	filter:alpha(opacity=100);
	opacity:1;
	-moz-opacity:1;
	-khtml-opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#toolbar { z-index:2; position:absolute; right:50px; top:50px; }
.toolbar_icon { cursor:pointer; cursor:hand; }
#level_selector { color:#3300bb; vertical-align:bottom; text-align:center; }
#controls_toggler
{
	z-index:2;
	position:absolute;
	bottom:50px;
	right:0px;

	text-align:center;
	font-weight:bold;
	line-height:50px;
	color:#ffffff;
	border:1px dashed #ffffff;
	background-color:#5555aa;
	cursor:pointer;
	cursor:hand;
	width:50px;
	height:50px;
	margin:2px;
	
	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-khtml-border-radius:12px;

	filter:alpha(opacity=50);
	opacity:0.5;
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#controls_toggler.controls_hidden
{
	background-color:#0000ff;
}
#controls
{
	z-index:2;
	position:absolute;
	bottom:50px;
	right:50px;
	filter:alpha(opacity=50);
	opacity:0.5;
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.screen_button
{
	display:inline-block;
	text-align:center;
	font-weight:bold;
	line-height:100px;
	color:#ffffff;
	border:1px dotted #ffffff;
	background-color:#0000aa;
	cursor:pointer;
	cursor:hand;
	width:100px;
	height:100px;
	margin:2px;
	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-khtml-border-radius:12px;
}
@keyframes blinking
{
  0%
  {
	filter:alpha(opacity=70);
	opacity:0.7;
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  }

  50%
  {
	filter:alpha(opacity=0);
	opacity:0;
	-moz-opacity:0;
	-khtml-opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  100%
  {
	filter:alpha(opacity=70);
	opacity:0.7;
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  }
}