@charset "utf-8";

*{ margin:0px; padding:0px; }

body {
/*max-width:348px; max-height:368px;   background-image:url(Hintergrundcarbonhell8x8.png);*/
	font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
	font-size: 100,01%; /*color:#000;*/
	text-align:center;
	width:348px; height:368px;
	/*background-color:#ccc;*/
	}
*{ margin:0px; padding:0px; text-decoration:none; }


body h1	{font-weight:bold; color:#000; font-size:14px; 
		text-align:center; /*text-shadow:#000 8px 8px 4px;*/
		}
body h2 {font-weight:bold; color:#000; font-size:12px; 
		text-align:center;}
		
body p { font-weight:bold; color:#000; font-size:24px; 
		text-align:center; text-shadow:#000 8px 8px 4px;
		}

#hauptcontainer { z-index:1;
	margin:0px; padding:0px;
	position:absolute;
	top: 0px;
	left:0px; /*background-color:#fff;*/ width:348px; height:368px; 	} /*alles übergreifender haupt container*/



#farbtafel { /*Feld in denen die Tasten sind*/
	background-color:#666; background-image: url(Bilder/hintergrunddigi_silberdunkel.jpg);
	position:absolute;
	top:12px; left:12px; width:320px; height:338px;
	border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ddd;
	border-right-color: #bbb;
	border-bottom-color: #aaa;
	border-left-color: #ccc;
	z-index:30;
}
	
.schatten {
	-webkit-box-shadow: #666 8px 8px 8px;
	-mox-box-shadow: #666 8px 8px 8px;
	-ms-border-shadow: #666 8px 8px 8px;
	-o-box-shadow: #666 8px 8px 8px;
	box-shadow: #666 8px 8px 8px;
	
	z-index:30;
	/*background-image:url(Bilder/-Hintergrund-8x8-fuer-TAMULIMOBA.png)*/
	}
	
	.textweiss{ color:#FFF;}

	.kleinerschatten {
	-webkit-box-shadow: #222 4px 4px 4px;
	-mox-box-shadow: #222 4px 4px 4px;
	-ms-border-shadow: #222 4px 4px 4px;
	-o-box-shadow: #222 4px 4px 4px;
	box-shadow: #222 4px 4px 4px;
	}

	#text { background-image:url(Bilder/textbildhell.jpg);
	margin:0px; padding:4px; 
	position:absolute;
	top: 12px; left:54px; 
	width:200px; height:32px;
	background-color:#ccc; 
	border-radius: 6px 6px 6px 6px; 
	-moz-border-radius: 6px 6px 6px 6px; 
	-webkit-border-radius: 6px 6px 6px 6px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ddd;
	border-right-color: #bbb;
	border-bottom-color: #aaa;
	border-left-color: #ccc;
	-webkit-box-shadow: #222 4px 4px 4px;
	-mox-box-shadow: #222 4px 4px 4px;
	-ms-border-shadow: #222 4px 4px 4px;
	-o-box-shadow: #222 4px 4px 4px;
	box-shadow: #222 4px 4px 4px;
	
	}
	
.ledfeld_0 {position: absolute; z-index: 10; top:6px; left:17px; width:10px; height:10px;
border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
border-width: 1px; border-style: solid;
	border-top-color:#ddd;
	border-right-color:#888;
	border-bottom-color:#777;
	border-left-color:#ccc;
}

/*--  xxxx  Dieses Script erzeugt einen DigiTaster und beinhaltet/designt alle zugehörigen Komponenten  xxxx--*/

/*Der Tastendiv ist der Tranzparente Raumplatzhalter zum Pixelgenauen Positionieren des Schalter mitsamt allen seinen Inhalten*/
#tastetext_1  {position:absolute; background-color:#C00; z-index: 10; top: 80px; left: 30px;  }
#tastendiv_1  {position:absolute; z-index: 10; top: 80px; left: 20px;  } /*text-align:justify;*/
#ledfeld_1 {background-color:#cc0000;  }

#tastetext_2  {position:absolute; background-color:#0C0; z-index: 10; top: 80px; left: 101px;  }
#tastendiv_2  {position:absolute; z-index: 10; top: 80px; left: 91px;  }
#ledfeld_2 {background-color:#00cc00; }

#tastetext_3  {position:absolute; background-color:#00C; z-index: 10; top: 80px; left: 172px;  }
#tastendiv_3  {position:absolute; z-index: 10; top: 80px; left: 162px;  } /*text-align:justify;*/
#ledfeld_3 {background-color:#0000cc; }

#tastetext_4  {position:absolute; background-color:#EEE; z-index: 10; top: 80px; left: 243px;  }
#tastendiv_4  {position:absolute; z-index: 10; top: 80px; left: 233px;  }
#ledfeld_4 {background-color:#dddddd; }
		

#tastetext_5  {position:absolute; background-color:#0CC; z-index: 10; top: 204px; left: 30px;  }
#tastendiv_5  {position:absolute; z-index: 10; top: 204px; left: 20px;  } /*text-align:justify;*/
#ledfeld_5 {background-color:#00cccc;}

#tastetext_6  {position:absolute; background-color:#C0C; z-index: 10; top: 204px; left: 101px;  }
#tastendiv_6  {position:absolute; z-index: 10; top: 204px; left: 91px;  }
#ledfeld_6 {background-color:#cc00cc;}

#tastetext_7  {position:absolute; background-color:#CC0; z-index: 10; top: 204px; left: 172px;  }
#tastendiv_7  {position:absolute; z-index: 10; top: 204px; left: 162px;  } /*text-align:justify;*/
#ledfeld_7 {background-color:#cccc00; }

#tastetext_8  {position:absolute; background-color:#000; z-index: 10; top: 204px; left: 243px;  }
#tastendiv_8  {position:absolute; z-index: 10; top: 204px; left: 233px;  }
#ledfeld_8 {background-color:#222222; }



/*
#tastendiv_2  {position:absolute; z-index: 10; top: 20px; left: 84px;  }
#tastendiv_3  {position:absolute; z-index: 10; top: 20px; left: 148px;  }
#tastendiv_4  {position:absolute; z-index: 10; top: 20px; left: 212px;  }
*/
/*
#tastendiv5    . . .  und so weiter für in das MCS eingefügten DigiTaster !
Die "xx" Platzhalter müßen durch die Position  (Pixelangeben) ersetzt werden !
*/



/*oberes textfelt LEDfeld*/
.tastendiv {
	/*position: absolute;*/ /*Feste Fixierte Position des fingertip bereich innerhalb der DigiTaste*/
	width:64px; height:108px;
	margin-left: 0px; 
	/*border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ddd;
	border-right-color: #bbb;
	border-bottom-color: #aaa;
	border-left-color: #ccc;
	-moz-border-radius: 2px 2px 2px 2px; 
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;*/
	}
/*für 10 Kacheln mit kleinen innenkacheln in denen die Slider laufen*/

.taste {
	position:absolute; 
	top:28px; left:10px;
	background-color: #eee;
	width:44px; height:68px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #aaa;
	border-right-color: #ccc;
	border-bottom-color: #ddd;
	border-left-color: #bbb;
	border-radius: 2px 2px 2px 2px; 
	-moz-border-radius: 2px 2px 2px 2px; 
	-webkit-border-radius: 2px 2px 2px 2px;

	-webkit-box-shadow: #222 2px 2px 2px, #222 -2px -2px 2px, #222 2px -2px 2px, #222 -2px 2px 2px;
	-mox-box-shadow: #222 2px 2px 2px, #222 -2px -2px 2px, #222 2px -2px 2px, #222 -2px 2px 2px;
	box-shadow: #222 2px 2px 2px, #222 -2px -2px 2px, #222 2px -2px 2px, #222 -2px 2px 2px;
	
}
	
.tastetext {
	/*position:absolute; 
	top:28px; left:10px;*/
	background-color: #efe;
	width:44px; height:17px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #aaa;
	border-right-color: #ccc;
	border-bottom-color: #ddd;
	border-left-color: #bbb;
	border-radius: 2px 2px 2px 2px; 
	-moz-border-radius: 2px 2px 2px 2px; 
	-webkit-border-radius: 2px 2px 2px 2px;
}
	
	
	.taste:active {
		background-color: #ddd;
		border-top-width: 3px;

	border-right-color: #bbb;
	border-bottom-color: #aaa;
	border-left-color: #ccc;
	}
	#taste_1:active {

	-webkit-box-shadow: #ff0000 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #ff0000 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #ff0000 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	
}   /*xxxxxxxx  #fff=Farbe  1xxpx=rechts    2xxpx=unten    xxpx=verlauf
				#fff=Farbe  1-xxpx=links    2-xxpx=oben    xxpx=verlauf*/
				
	#taste_2:active {
		-webkit-box-shadow: #00ff00 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #00ff00 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #00ff00 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;	
	
}   

	#taste_3:active {
		-webkit-box-shadow: #0000ff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #0000ff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #0000ff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	
}   /*xxxxxxxx  #fff=Farbe  1xxpx=rechts    2xxpx=unten    xxpx=verlauf
				#fff=Farbe  1-xxpx=links    2-xxpx=oben    xxpx=verlauf*/
				
	#taste_4:active {

	-webkit-box-shadow: #ffffff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #ffffff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #ffffff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	
}   
	#taste_5:active {
		
	-webkit-box-shadow: #00ffff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #00ffff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #00ffff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	
	
}   /*xxxxxxxx  #fff=Farbe  1xxpx=rechts    2xxpx=unten    xxpx=verlauf
				#fff=Farbe  1-xxpx=links    2-xxpx=oben    xxpx=verlauf*/
				
	#taste_6:active {
		
		-webkit-box-shadow: #ff00ff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #ff00ff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #ff00ff 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;


	
}   

	#taste_7:active {

	-webkit-box-shadow: #ffff00 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #ffff00 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #ffff00 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	
}   /*xxxxxxxx  #fff=Farbe  1xxpx=rechts    2xxpx=unten    xxpx=verlauf
				#fff=Farbe  1-xxpx=links    2-xxpx=oben    xxpx=verlauf*/
				
	/*#taste_8:hover {

	-webkit-box-shadow: #000000 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	-mox-box-shadow: #000000 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	box-shadow: #000000 0px -44px 28px, #ddd -2px -2px 2px, #ddd 2px -2px 2px, #000 0px 2px 2px;
	
}   */



.fingertip {
	position: absolute; /*Feste Fixierte Position des fingertip bereich innerhalb der DigiTaste
	in Pixeln von  (Top) = Oben  und */
	top: 24px; /*Feste Fixierte Position in Pixeln ab Oberkante DigiTaste*/
	width: 32px;
	height: 32px;
	margin-left: 0px; /*  ! ACHTUNG !Seitenabstand des Fingertip bereiche zum linken DigiTasten Rand*/
	border-top-width: 6px;
	border-right-width: 6px;
	border-bottom-width: 6px;
	border-left-width: 6px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ddd;
	border-right-color: #bbb;
	border-bottom-color: #aaa;
	border-left-color: #ccc;
	/*-moz-border-radius: 2px 2px 2px 2px; 
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;*/
	}


	







		/*#heimhobbytv {
			border-bottom: 2px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position:relative;
		}
		#heimhobbytv span {
			margin-left: -999em;
			position: absolute;
		}
		/*Hier unter:   alles:hover span   kann alles rein wie:  Borderradius, Schatten, Positionen, auch Videos*/
		/*#heimhobbytv:hover span { background-image:url(Bilder/tv_hobby_beruf.jpg);
			position: position:absolute; top:-215px; left:491px; width:301px; height:157px; z-index: 99;
			margin-left: 0; /*width: 350px;*/
		/*}*/
		/** html a:hover { background: transparent; }*/
/*fingertipfläche*/

/* Die Taste mit allen inhalten im  Tastendiv Nu. 1 = tastendiv1*/

	/*text-align:justify; width:128px; height:128px;*/

	/*#heimhobbyschalter {
	position:absolute; z-index:3;
	top:256px; left:32px; width:128px; height:128px;
	}
	#heimhobbyschalter:hover { 
	position:absolute; z-index:3; background-image:url(Bilder/Tranzschaltflaecherot.png);
	top:256px; left:32px; width:128px; height:128px;
	-webkit-box-shadow: #fcc 8px 8px 12px;
	-mox-box-shadow: #fcc 8px 8px 12px;
	box-shadow: #fcc 8px 8px 12px, #fcc -8px -8px 12px, #fcc 8px -8px 12px, #fcc -8px 8px 12px;
	border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; 
	-webkit-border-radius: 10px 10px 10px 10px;
	}*/