html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, small, strong, b, u, i, svg { margin: 0; padding: 0; border: 0; color: #fff; font-size: 100%; font: inherit; vertical-align: baseline; }
body { line-height: 1; }
h1 { font-size: 2em; margin:1em 10px; }

*:focus { outline:0; }




#content {
	background-color: #111; 
	background-size: cover;
	max-width:700px;
	margin:0 auto;
}

#onlineGame {
	position: relative;
	opacity:1;
	width:100%;
    margin: 0 auto;
    padding: 0;
	overflow:hidden;
}

#tetrisboard {
	position: relative; 
	border:1px solid #222;
	background-color: #111; 
	background-size: cover;
	z-index: 1;
    margin-bottom: 1em;
	width:58%;
	overflow:hidden;
}
#tetrisboard * {
	-ms-content-zooming: none;
	-ms-touch-action: none;
	touch-action: none;
}
#tetrisboard  div, #vorschau  div {
	position: absolute;
	/*cursor: pointer;*/
	overflow: hidden;
	border:1px solid #111;
	background-color:#111;
	width:10%;
	height:auto;
}
#tetrisboard  .mFR.aktiv {
	/*border:3px solid #CC0000;*/
}

#settings {
	position: absolute;
    width: 35%;
	top:0;
	right:2%;
	display:none;
	max-width: 180px;
}
#settings div, #settings p {
	display: inline-block;
	margin:0;
}
#settings table {
	width:90%;
	margin:0 auto;
}
#settings #pause {
	background-color:#111;
	color:#666;
	width: 100%;
	font-weight:normal;
	font-size:95%;
}
#settings div#vorschau {
	width:80%;
	margin:0 10%;
}
#settings div#vorschau table{
	width:100%;
	margin:0;
	padding:0;
	border-collapse: collapse;
}
#settings div#vorschau td {
	border:1px solid #111;
	margin:0;
	padding:0;
	background-color:#111;
}

#onlineGame .dialog {
	position: absolute;
	top: 10%;
	left: 2%;
    width: 55%;
    height: auto;
	color: #000;
	text-align: center;
	background-color: rgba(255,255,255,.85);
	z-index:55;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 1px solid #999;
	-webkit-box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
}

#onlineGame .dialog h2 { 
	margin: 10% auto 5% auto;
	font-size: 2em; 
	line-height: 1.2em;
}

#onlineGame .dialog div, #onlineGame .dialog p { 
    margin: 5%;
    line-height: 1.4em;
}
#onlineGame .dialog table { 
    text-align:left;
	width:80%;
	max-width:250px;
	margin: 0 auto;
}

.gameButton { 
	background-color: #Fa0;
	cursor: pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 1em;
	line-height: 1em;
	font-weight: bold;
	color: #FFF;
    padding: .2em 10px;
    margin: 10% auto;
    min-width: 30%;
}
.gameButton:hover { 
	background-color: #111;
	color: #Fa0;
}



div#pfeile {
	width:80%;
	height:auto;
	display:none;
    text-align: center;
	margin:0 auto;
}
div#pfeile img {
	width:20%;
	height:auto;
	border:1px solid #222;
	margin:4%;
	cursor: pointer;
}
div#pfeile img#pfeil_links {
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	transform: rotate(-90deg);
}
div#pfeile img#pfeil_unten {
	-webkit-transform: rotate(180deg); 
	-moz-transform: rotate(180deg); 
	-ms-transform: rotate(180deg); 
	-o-transform: rotate(180deg); 
	transform: rotate(180deg);
}
div#pfeile img#pfeil_rechts {
	-webkit-transform: rotate(90deg); 
	-moz-transform: rotate(90deg); 
	-ms-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
	transform: rotate(90deg);
}



/* grün */
#tetrisboard div.img1, #vorschau .img1 { 
background: #cdeb8e;
background: -moz-linear-gradient(-45deg,  #cdeb8e 0%, #a5c956 100%);
background: -webkit-linear-gradient(-45deg,  #cdeb8e 0%,#a5c956 100%);
background: linear-gradient(135deg,  #cdeb8e 0%,#a5c956 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
}
/* gelb */
#tetrisboard div.img2, #vorschau .img2 { 
background: #FCFF5A ;
background: -moz-linear-gradient(-45deg,  #FCFF5A  1%, #E8E102    100%);
background: -webkit-linear-gradient(-45deg,  #FCFF5A  1%,#E8E102    100%);
background: linear-gradient(135deg,  #FCFF5A  1%,#E8E102    100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFF5A ', endColorstr='#E8E102   ',GradientType=0 );
}
/* rot */
#tetrisboard div.img3, #vorschau .img3 { 
background: #FF6060 ;
background: -moz-linear-gradient(-45deg,  #FF6060  1%, #ff0400 100%);
background: -webkit-linear-gradient(-45deg,  #FF6060  1%,#ff0400 100%);
background: linear-gradient(135deg,  #FF6060  1%,#ff0400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6060 ', endColorstr='#ff0400',GradientType=0 );
} 
/* orange */
#tetrisboard div.img4, #vorschau .img4 { 
background: #FFB15F ; 
background: -moz-linear-gradient(-45deg,  #FFB15F  1%, #ff7b00 100%);
background: -webkit-linear-gradient(-45deg,  #FFB15F  1%,#ff7b00 100%);
background: linear-gradient(135deg,  #FFB15F  1%,#ff7b00 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFB15F ', endColorstr='#ff7b00',GradientType=0 ); 
} 
/* lila */
#tetrisboard div.img5, #vorschau .img5 { 
background: #DA94FF ; 
background: -moz-linear-gradient(-45deg,  #DA94FF  1%, #b600ff 100%); 
background: -webkit-linear-gradient(-45deg,  #DA94FF  1%,#b600ff 100%); 
background: linear-gradient(135deg,  #DA94FF  1%,#b600ff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DA94FF ', endColorstr='#b600ff',GradientType=0 ); 
} 
/* blau */
#tetrisboard div.img6, #vorschau .img6 { 
background: #A5CFF9 ; 
background: -moz-linear-gradient(-45deg,  #A5CFF9  1%, #57AAFF  100%);
background: -webkit-linear-gradient(-45deg,  #A5CFF9  1%, #57AAFF  100%); 
background: linear-gradient(135deg,  #A5CFF9  1%, #57AAFF  100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A5CFF9 ', endColorstr='#57AAFF ', GradientType=0 );
} 
/* cyan */
#tetrisboard div.img7, #vorschau .img7 { 
background: #7CF7F7 ; 
background: -moz-linear-gradient(-45deg,  #7CF7F7  1%, #00EAE6  100%); 
background: -webkit-linear-gradient(-45deg,  #7CF7F7  1%,#00EAE6  100%); 
background: linear-gradient(135deg,  #7CF7F7  1%,#00EAE6  100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7CF7F7 ', endColorstr='#00EAE6 ',GradientType=0 );
} 




@media (max-width: 500px) {
	#settings {
		font-size: 4vw;
	}
	#onlineGame .dialog  { 
		width: 95%;
	}
	#onlineGame .dialog h2 { 
		font-size: 8vw;
		margin: 10% auto;
	}
	#onlineGame .dialog div, #onlineGame .dialog p { 
		font-size: 4vw;
	}
	#onlineGame .dialog .gameButton { 
		min-width: 30%;
	}
	div#pfeile { 
		display: block;
	}
	div#pfeile img { 
		width:15%;
		margin:2% 4%;
	}
}
/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	div#pfeile { 
		display: block;
	}
	@media only screen and (orientation : landscape) {
		div#pfeile { 
			position: absolute;
			bottom: 0;
			right: 0;
			width: 39%;
		}
	}
}