/* HTML Stylesheet Script */
/* Autor - StarBucK */

body
{
	+background-color: #aaa;
	color: #ccc;
	font-size: 8pt;
	font-family: verdana;
	cursor: default;
	
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

a:active {text-decoration: none; color: #fff}
a:link {text-decoration: none; color: #fff; cursor: default}
a:visited{text-decoration: none; color: #fff}
a,a:link,a:visited{outline:none;}
* img{outline:none;}
* img a,* img a:link,* img a:visited{outline:none;}

input[type=button]::-moz-focus-inner {border: 1px dotted transparent;}

#panel
{
	position: relative;
	width: 100%;
	font-family: verdana;
	color: #ccc;
}

	.panel_title
	{
		float: left;
		width: auto;
		margin: 0px 0px 0px 15px;
		padding: 0px 10px 0px 10px;
		background-color: #aaa;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		
		border-top: solid 1px #fff;
		border-bottom: solid 1px #fff;
			
		-webkit-border-radius: 5px 5px 5px 5px;
		-moz-border-radius: 5px 5px 5px 5px;
		-ms-border-radius: 5px 5px 5px 5px;
		border-radius: 5px 5px 5px 5px;
			
		-webkit-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.9);
		-moz-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.9);
		-ms-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.9);
		box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.9);
		
		+-webkit-text-shadow: 0 -1px #888, 1px 0 #888, 0 1px #888, -1px 0 #888;
		+-moz-text-shadow: 0 -1px #888, 1px 0 #888, 0 1px #888, -1px 0 #888;
		+-ms-text-shadow: 0 -1px #888, 1px 0 #888, 0 1px #888, -1px 0 #888;
		+text-shadow: 0 -1px #888, 1px 0 #888, 0 1px #888, -1px 0 #888;
	}

	.panel_frame
	{
		width: 500px;
		+background-color: #f1f1f1;
		background-image: url("../gfx/background.jpg");
		
		border-top: solid 1px #fff;
		border-bottom: solid 1px #fff;
		
		-webkit-border-radius: 10px 10px 10px 10px;
		-moz-border-radius: 10px 10px 10px 10px;
		-ms-border-radius: 10px 10px 10px 10px;
		border-radius: 10px 10px 10px 10px;
						
		-webkit-box-shadow: inset 0 1px 50px rgba(0, 0, 0, 0.9);
		-moz-box-shadow: inset 0 1px 50px rgba(0, 0, 0, 0.9);
		-ms-box-shadow: inset 0 1px 50px rgba(0, 0, 0, 0.9);
		box-shadow: inset 0 1px 50px rgba(0, 0, 0, 0.9);
	}

	.panel_adress
	{
		padding-left: 25px;
		width: 350px;
		height: 20px;
		color: #ccc;
		font-size: 13px;
		text-align: left;
		
		border-bottom: 1px solid #000000;
		
		-webkit-user-select:text;
		-moz-user-select:text;
		-ms-user-select:text;
		user-select:text;
		
		-webkit-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		-moz-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		-ms-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
	}

	.panel_buttons
	{
		padding: 20px 1px 1px 1px;
		width: 70px;
		
		border-left: 1px solid #000;
			
		-webkit-border-radius: 0px 10px 10px 0px;
		-moz-border-radius: 0px 10px 10px 0px;
		-ms-border-radius: 0px 10px 10px 0px;
		border-radius: 0px 10px 10px 0px;
	}

		.panel_button_1
		{
			padding: 0px 0px 10px 0px;
		}

		.panel_button_1 input
		{
			width: 60px;
			color: #000;
			background-color: #0e3;
			
			border: 1px solid #999;
			
			-webkit-border-radius: 3px 3px 3px 3px;
			-moz-border-radius: 3px 3px 3px 3px;
			-ms-border-radius: 3px 3px 3px 3px;
			border-radius: 3px 3px 3px 3px;
		}

		.panel_button_2
		{
			padding: 0px 0px 10px 0px;
		}

		.panel_button_2 input
		{
			width: 60px;
			color: #000;
			background-color: #f03;
			
			border: 1px solid #999;
			
			-webkit-border-radius: 3px 3px 3px 3px;
			-moz-border-radius: 3px 3px 3px 3px;
			-ms-border-radius: 3px 3px 3px 3px;
			border-radius: 3px 3px 3px 3px;
		}

		.panel_button_3
		{
			padding: 0px 0px 10px 0px;
		}

		.panel_button_3 input
		{
			width: 60px;
			color: #000;
			background-color: #fc0;
			border: 1px solid #999;
			
			-webkit-border-radius: 3px 3px 3px 3px;
			-moz-border-radius: 3px 3px 3px 3px;
			-ms-border-radius: 3px 3px 3px 3px;
			border-radius: 3px 3px 3px 3px;
		}

		.panel_button_4
		{
			padding: 10px 0px 10px 0px;
		}

		.panel_button_4 input
		{
			width: 60px;
			color: #fff;
			background-color: #369;
			
			border: 1px solid #999;
			
			-webkit-border-radius: 3px 3px 3px 3px;
			-moz-border-radius: 3px 3px 3px 3px;
			-ms-border-radius: 3px 3px 3px 3px;
			border-radius: 3px 3px 3px 3px;
		}
		
		.connect_button
		{
			display: table;
			position: relative;
			float: center;
			width: 60px;
			height: 40px;
			background-color: #06c;
			
			border-top: solid 1px #fff;
			border-bottom: solid 1px #fff;
			
			-webkit-border-radius: 5px 5px 5px 5px;
			-moz-border-radius: 5px 5px 5px 5px;
			-ms-border-radius: 5px 5px 5px 5px;
			border-radius: 5px 5px 5px 5px;
		}
		
		.connect_button_text
		{
			display: table-cell;
			position: absolute;
			margin: -2px 0px 0px -2px;
			padding: 15px 0px 14px 2px;
			width: 60px;
			font-weight: bold;
			text-align: center;
			
			-webkit-transition: all 0.25s;
			-moz-transition: all 0.25s;
			-ms-transition: all 0.25s;
			transition: all 0.25s;
		}
		
		.connect_button_text:hover
		{
			color: #000;
		}
		
		.connect_button_text:hover+.connect_button_border
		{
			height: 20px;
			background-image: url("../gfx/farbspirale.gif");
			
			border-top: solid 10px #000;
			border-bottom: solid 10px #000;
			
			-webkit-border-radius: 5px 5px 5px 5px;
			-moz-border-radius: 5px 5px 5px 5px;
			-ms-border-radius: 5px 5px 5px 5px;
			border-radius: 5px 5px 5px 5px;
			
			-webkit-transition: all 0.25s;
			-moz-transition: all 0.25s;
			-ms-transition: all 0.25s;
			transition: all 0.25s;
		}
		
		.connect_button_border
		{
			display: table-cell;
			margin-top: -49px;
			vertical-align: middle;
			width: 60px;
			height: 20px;
			background-clip: border-box;
			border-color: #06c;
		}
		
		.connect_button_off
		{
			display: table;
			position: relative;
			float: center;
			width: 60px;
			height: 40px;
			
			border-top: solid 1px #fff;
			border-bottom: solid 1px #fff;
			
			-webkit-border-radius: 5px 5px 5px 5px;
			-moz-border-radius: 5px 5px 5px 5px;
			-ms-border-radius: 5px 5px 5px 5px;
			border-radius: 5px 5px 5px 5px;
		}
		
		.connect_button_off_text
		{
			display: table-cell;
			position: absolute;
			padding: 14px 0px 14px 0px;
			width: 58px;
			font-weight: bold;
			text-align: center;
			
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-ms-transition: all 1s;
			transition: all 1s;
		}
		
		.connect_button_off_text:hover
		{
			-webkit-filter: blur(100px);
			-moz-filter: blur(100px);
			filter: blur(100px);
			
			+-webkit-transform: rotate(2880deg);
			+-moz-transform: rotate(2880deg);
			+-ms-transform: rotate(2880deg);
			+transform: rotate(2880deg);
			
			opacity: 0;
			
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-ms-transition: all 1s;
			transition: all 1s;
		}

	.panel_map
	{
		width: 160px;
		height: 120px;
		font-size: 13px;
		+font-weight: bold;
		
		border-right: 1px solid #000;
		
		-webkit-border-radius: 0px 0px 0px 10px;
		-moz-border-radius: 0px 0px 0px 10px;
		-ms-border-radius: 0px 0px 0px 10px;
		border-radius: 0px 0px 0px 10px;
		
		-webkit-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		-moz-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		-ms-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
	}

	.panel_players
	{
		font-size: 13px;
		
		-webkit-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		-moz-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		-ms-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
	}

		.panel_players_title
		{
			font-size: 13px;
			+font-weight: bold;
		
			+-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
			+-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
			+-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
			+box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
		
			-webkit-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
			-moz-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
			-ms-text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
			text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000;
		}

			.panel_players_title_id
			{
				padding: 0px 3px 0px 3px;
				width : 17px;
				text-align: right;
				color: #777;
				
				border-bottom: 1px solid #555;
			}

			.panel_players_title_name
			{
				padding: 0px 0px 0px 3px;
				width: 160px;
				color: #777;
				
				border-bottom: 1px solid #555;
			}

			.panel_players_title_score
			{
				padding: 0px 3px 0px 3px;
				width: 35px;
				color: #777;
				
				border-bottom: 1px solid #555;
			}

			.panel_players_title_ping
			{
				padding: 0px 3px 0px 3px;
				width: 35px;
				text-align: right;
				color: #777;
				
				border-bottom: 1px solid #555;
			}

		.panel_players_id
		{
			padding: 1px 3px 1px 3px;
			color: #f00;
			font-size: 13px;
			font-weight: bold;
			
			border-bottom: 1px dashed #555;
		}

		.panel_players_name
		{
			padding: 0px 0px 0px 3px;
			font-size: 13px;
			
			border-bottom: 1px dashed #555;
		}

		.panel_players_score
		{
			padding: 1px 3px 1px 3px;
			font-size: 13px;
			
			border-bottom: 1px dashed #555;
		}

		.panel_players_ping
		{
			padding: 1px 3px 1px 3px;
			font-size: 13px;
			
			border-bottom: 1px dashed #555;
		}

.beben:hover
{
	-webkit-animation-name: beben;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-name: beben;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@-webkit-keyframes beben
{
	0% { -webkit-transform: rotate(0deg) translate(2px, 1px); }
	10% { -webkit-transform: rotate(2deg) translate(1px, 2px); }
	20% { -webkit-transform: rotate(-2deg) translate(3px, 0px); }
	30% { -webkit-transform: rotate(0deg) translate(0px, -2px); }
	40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); }
	50% { -webkit-transform: rotate(2deg) translate(1px, -2px); }
	60% { -webkit-transform: rotate(0deg) translate(3px, -1px); }
	70% { -webkit-transform: rotate(2deg) translate(-2px, -1px); }
	80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); }
	90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); }
	/*100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); }*/
}

@keyframes beben
{
	0% { transform: rotate(0deg) translate(2px, 1px); }
	10% { transform: rotate(2deg) translate(1px, 2px); }
	20% { transform: rotate(-2deg) translate(3px, 0px); }
	30% { transform: rotate(0deg) translate(0px, -2px); }
	40% { transform: rotate(-2deg) translate(-1px, 1px); }
	50% { transform: rotate(2deg) translate(1px, -2px); }
	60% { transform: rotate(0deg) translate(3px, -1px); }
	70% { transform: rotate(2deg) translate(-2px, -1px); }
	80% { transform: rotate(-2deg) translate(1px, 1px); }
	90% { transform: rotate(0deg) translate(-2px, -2px); }
	/*100% { transform: rotate(2deg) translate(-1px, 2px); }*/
}