/* 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; overflow:hidden; }
#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; }
#credits { color:#aa0000; text-align:center; padding:10px; }
a { color:#0000ff; }
a:hover { color:#0055ff; text-decoration:none; }
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;
	margin:0px;
	padding:0px;
	background-color:#ffbbff;
	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_loader
{
	color:#ff0000;
	
	border:1px solid #bbbbdd;
	background-color:#bbbbff;

	font-size:14px;
	font-size:2.58em;
	font-size:258%;
	font-size:6.8vmin;

	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-khtml-border-radius:12px;

	-moz-box-shadow:10px 10px 6px 1px #000000;
	-webkit-box-shadow:10px 10px 6px 1px #000000;
	-o-box-shadow:10px 10px 6px 1px #000000;
	-khtml-box-shadow:10px 10px 6px 1px #000000;
	box-shadow:10px 10px 6px 1px #000000;

	transform:rotate(358deg);
	-o-transform:rotate(358deg);
	-ms-transform:rotate(358deg);
	-khtml-transform:rotate(358deg);
	-webkit-transform:rotate(358deg);
	
	filter:alpha(opacity=90);
	opacity:0.9;
	-moz-opacity:0.9;
	-khtml-opacity:0.9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	
	animation:shaking 0.5s ease-in-out infinite;
}
.button_loader:hover
{
	color:#000000;
	border:1px solid #ffddff;
	background-color:#ffccff;
	
	-moz-box-shadow:10px 10px 6px 1px #555555;
	-webkit-box-shadow:10px 10px 6px 1px #555555;
	-o-box-shadow:10px 10px 6px 1px #555555;
	-khtml-box-shadow:10px 10px 6px 1px #555555;
	box-shadow:10px 10px 6px 1px #555555;
}
#button_load_check_music
{
	position:absolute;
	left:25%;
	top:25%;
	width:50%;
	height:50%;
	
	font-weight:bold;
	z-index:4;
}
#music_progress
{
	visibility:hidden;
	display:none;
	
	position:absolute;
	left:20%;
	top:40%;
	width:60%;
	height:20%;
	
	vertical-align:middle;
	font-weight:bold;
	z-index:4;
	
	animation:pumping 1s ease-in-out infinite;
}
#music_progress_bar_mask
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	height:100%;
	
	-moz-box-shadow:10px 10px 10px 10px #555555;
	-webkit-box-shadow:10px 10px 10px 10px #555555;
	-o-box-shadow:10px 10px 10px 10px #555555;
	-khtml-box-shadow:10px 10px 10px 10px #555555;
	box-shadow:10px 10px 10px 10px #555555;
}
#music_progress_bar
{
	position:absolute;
	left:0px;
	top:14%;
	width:0%;
	height:80%;
	background-color:#aaaaee;
	animation:blinking 0.5s ease-in-out infinite;
}
#music_progress_text
{
	position:absolute;
	left:0px;
	top:50%;
	width:100%;
	height:100%;

	text-align:center;	
	color:#ff0000;
	
	font-size:16px;
	font-size:1.28em;
	font-size:128%;
	font-size:3.8vmin;
	
	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%;
	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
{
	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; }
@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)";
  }
}
@keyframes shaking
{
  0%
  {
	transform:rotate(358deg);
	-o-transform:rotate(358deg);
	-ms-transform:rotate(358deg);
	-khtml-transform:rotate(358deg);
	-webkit-transform:rotate(358deg);
  }

  50%
  {
	transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-khtml-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
  }

  100%
  {
	transform:rotate(358deg);
	-o-transform:rotate(358deg);
	-ms-transform:rotate(358deg);
	-khtml-transform:rotate(358deg);
	-webkit-transform:rotate(358deg);
  }
}
@keyframes pumping
{
  0%
  {
	transform:scale(0.9);
	-o-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-khtml-transform:scale(0.9);
	-webkit-transform:scale(0.9);
  }

  50%
  {
	transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	-khtml-transform:scale(1);
	-webkit-transform:scale(1);
  }

  100%
  {
	transform:scale(0.9);
	-o-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-khtml-transform:scale(0.9);
	-webkit-transform:scale(0.9);
  }
}