body {
	margin: 3px 5px 3px 3px;
	padding: 0px;
	overflow: hidden;
}

.btn_play::before { 
	content:'?'; 
	position:absolute; 
	left:0px;
	top:10px; 
}

/*******************************************************************************************************/
/* Buttons im Glasstyle
/* 
/*******************************************************************************************************/

.button-glass {
	display: inline-block;
	vertical-align: center;
	height: 100%;
	width: 100%;
	margin: auto;
	position: relative;
	overflow: hidden;
	font-size: 14px;
	font-weight: normal;
	color: black;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px #ffffff;
	background-color: #dddddd;
	background-clip: padding-box;
	border: 1px solid;
	border-color: #777777 #777777 #999999;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
	cursor: pointer;
}

.button-glass td {
	font-family: Arial, 'Arial Narrow';
	font-weight: bold;
	font-size: 10vw;
	text-align: center;
	color: white;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

.button-glass:before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -20%;
  right: -20%;
  border-radius: 50%;
  background: transparent;
  -webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
}

.button-glass:hover {
	background-color: #cccccc;
}

.button-glass:active {
  border-color: #999999 #777777 #777777;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.1));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.1));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.1));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.1));
}

.button-glass:active:before {
  top: -50%;
  bottom: -125%;
  left: -15%;
  right: -15%;
  -webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
}

/* Hellblau */
.button-glass.blue-1 {
	color: white;
	text-shadow: 0 1px #154c86;
	background-color: #247edd;
	border-color: #1c65b2 #18589c #18589c;
}

.button-glass.blue-1:hover {
  background-color: #1a74d3;
}

.button-glass.blue-1:active {
  border-color: #113f70 #154c86 #1c65b2;
}

/* Dunkelblau */
.button-glass.blue-2 {
  color: white;
  text-shadow: 0 1px #0d4d09;
  background-color: #2b477f;
  border-color: #566d99 #112958 #112958;
}

.button-glass.blue-2:hover {
  background-color: #163572;
}

.button-glass.blue-2:active {
  border-color: #112958 #112958 #566d99;
}

/* Grün */
.button-glass.green-1 {
  color: white;
  text-shadow: 0 1px #0d4d09;
  background-color: #1ca913;
  border-color: #147b0e #11640b #11640b;
}

.button-glass.green-1:hover {
  background-color: #159b0d;
}

.button-glass.green-1:active {
  border-color: #093606 #0d4d09 #147b0e;
}

/* Rot */
.button-glass.red-1 {
  color: white;
  text-shadow: 0 1px #72100d;
  background-color: #cd1d18;
  border-color: #9f1713 #891310 #891310;
}

.button-glass.red-1:hover {
  background-color: #c01511;
}

.button-glass.red-1:active {
  border-color: #5b0d0b #72100d #9f1713;
}




/*
*
*/