@charset "utf-8";

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

body {
/* background-image:url(Hintergrundcarbonhell8x8.png);*/
	font-family: Arial, Comic Sans MS, Helvetica, sans-serif;
	font-size: 100,01%;
	text-align:center;
	background-color:#000000;/*XXXXXXX  fuer dieses script werden 880 mid Dateien benoetigt    XXXXXXXX*/
	}
*{ margin:0px; padding:0px; }


body h1	{font-weight:bold; color:#ffffff; font-size:24px; 
		text-align:center; /*text-shadow:#000 8px 8px 4px;*/}
body h2 {font-weight:bold; color:#ffffff; font-size:16px; 
		text-align:center;}	
body h3 {font-weight:bold; color:#cccccc; font-size:14px; 
		text-align:center;}	
body h4 {font-weight:bold; color:#000000; font-size:18px; 
		text-align:center;}	
body h5 {font-weight:bold; color:#000000; font-size:16px; 
		text-align:center;}	
body h6 {font-weight:bold; color:#000000; font-size:14px; 
		text-align:center;}	
body p { font-weight:bold; color:#000000; font-size:12px;
		text-align:center; /*text-shadow:#000 8px 8px 4px;*/
		}

#hauptcontainer { z-index:1;  /* Das Basis div des M C S */
	/*padding:12px; Innenabstand von je 12 px werden zum wight px hinzuadiert ! also 1216 +12 +12 = 1240 px gesammtbreite */
	position:absolute;
	top: 0px; left:0px; width:1240px; height:668px; background-color:#000000; 
	} /*alles übergreifender haupt container*/
	
	
#hauptcontaineriframe { z-index:1;  /* Das Basis div des M C S */
	/*padding:12px;*/ /*Innenabstand von je 12 px werden zum wight px hinzuadiert ! also 1216 +12 +12 = 1240 px gesammtbreite */
	position:absolute;
	top: 0px; left:0px;width:1240px; height:230px; background-color:#000000; 
	} /*alles übergreifender haupt container*/


#text {  /*   Das LOGO Namensschild   M C S  by Ralf Herting   */
	position:absolute; background-color:#000000; top: 12px; left:378px; width:472px; height:74px;
	}
#textfeld_home {position:absolute; top:10px; left:10px; width:77px; height:50px; background-color:#333 }
#home {position:absolute; top: 10px; left:10px;  width:77px; height:50px;
	}
#info {position:absolute; top: 08px; left:440px; width:20px; height:20px;
	}

#funktionen_links { /* Div= die Zone fuer Matrix , LED , Effekte und Macros */
	background-color:#666666; 
	position:absolute; top: 12px; left:12px; width:340px; height:204px;
	}
#macrosteuerung { /* Div fuer die fuenf lila Bottons unter dem Logo schild */
	background-color:#666666; 
	position:absolute; top: 108px; left:368px; width:492px; height:108px;
	}
#funktionen_rechts { /* Div fuer die fuenf lila Bottons unter dem Logo schild */
	background-color:#666666; 
	position:absolute; top: 12px; left: 876px; width:340px; height:204px;
	}
	
	
	
/*XXXXXXX  MATRIX   XXXXXXXX*/
#zonematrix_titel {	/*-- Div Die Zone fuer X-Mouves Step 1 - 12 Matrix Zoner-X fuer die Sensorzonen darunter die 12 Steps  --*/
	position:absolute; top:232px; left:12px; width:1204px; height:26px; z-index:200;
	background-color:#eee; 
	}
#zonematrix { 
	background-color:#666666; 
	position:absolute; top: 274px; left:12px; width:1204px; height:168px; z-index:100;
	}/*xxxxxxx*/
	
	
	
/*XXXXXXX  L.E.D.   XXXXXXXX*/
#zonesteps_led_oben_titel { /* Oberes Ueberschrift feld */
	position:absolute; top: 232px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
#zonesteps_led_oben { /*  Das erste Sensortastfeld Steps 1 - 12 */
	background-color:#666666; 
	position:absolute; top: 274px; left:12px; width:1204px; height:168px;

	}
#zonesteps_led_unten_titel { /* Unteres Ueberschrift feld */
	position:absolute; top: 458px; left:12px; width: 1204px; height:26px; 
	background-color:#eeeeee; 
	}
#zonesteps_led_unten { /*  Das zweite Sensortastfeld Steps 13 - 24 */
	
	background-color:#666666; 
	position:absolute; top: 500px; left:12px; width:1204px; height:168px;
	
	}
/*xxxxxxx  mcs_SensorTouch_LED_html ende xxxxxxxx*/
	
	


/*XXXXXXX  EFFEKTE   XXXXXXXX*/
#zonesteps_effekte_oben_titel { /* Oberes Ueberschrift feld */
	position:absolute; top: 232px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
#zonesteps_effekte_oben { /*  Das erste Sensortastfeld Steps 1 - 12 */
	background-color:#666666; 
	position:absolute; top: 274px; left:12px; width:1204px; height:168px;
	}
#zonesteps_effekte_unten_titel { /* Unteres Ueberschrift feld */
	position:absolute; top: 458px; left:12px; width: 1204px; height:26px; 
	background-color:#eeeeee; 
	}
#zonesteps_effekte_unten { /*  Das zweite Sensortastfeld Steps 13 - 24 */
	background-color:#666666; 
	position:absolute; top: 500px; left:12px; width:1204px; height:168px;
	}
	
	
	/*XXXXXXX  MACROS   XXXXXXXX*/
#zonesteps_macros_oben_titel { /* Oberes Ueberschrift feld */
	position:absolute; top: 232px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
#zonesteps_macros_oben { /*  Das erste Sensortastfeld Steps 1 - 12 */
background-color:#666666; 
	position:absolute; top: 274px; left:12px; width:1204px; height:168px;
	}
#zonesteps_macros_unten_titel { /* Unteres Ueberschrift feld */
	position:absolute; top: 458px; left:12px; width: 1204px; height:26px; 
	background-color:#eeeeee;
	}
#zonesteps_macros_unten { /*  Das zweite Sensortastfeld Steps 13 - 24 */
	background-color:#666666; 
	position:absolute; top: 500px; left:12px; width:1204px; height:168px;
	}
	
	/*xxxxxxx  mcs_SensorTouch_effekte_html ende xxxxxxxx*/
	


/*XXXXXXX  ZONEN   XXXXXXXX*/
/* Dies sind die Divs in dehnen die jeweils 12 Sensortasten drin sind */
#zonesteps_001_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_001 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_002_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_002 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_003_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_003 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_004_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_004 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_005_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_005 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_006_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_006 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_007_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_007 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_008_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_008 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_009_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_009 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_010_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_010 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_011_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_011 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
#zonesteps_012_titel {
	position:absolute; top:0px; left:12px; width:1204px; height:26px;
	background-color:#eeeeee; 
	}
	#zonesteps_012 { /*  Das erste Sensortastfeld Steps 1 - 12 im Iframe*/
	position:absolute; top:42px; left:12px; width:1204px; height:168px;
	background-color:#666666; 
	}
	/*xxxxxxx*/
	
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXX  Zonen Design   XXXXXXXX*/
.zone {  /*XXXX---  Die Felder in denen die 12 Sensortasten drin sind  ---XXXX*/
	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: #dddddd; border-right-color: #bbbbbb; border-bottom-color: #aaaaaa; border-left-color: #cccccc;
}

.taste_80_140 {/*XXXX---  Die drei verschiedenen Sensortasten in denen die Silbernen Bilder sind  ---XXXX*/
	width:80px; height:140px; background-color:#cccccc; background-image:url(bilder/Sensortaste_80_140_Silber.jpg); }
.taste_140_80 {
	width:140px; height:80px; background-color:#cccccc; background-image:url(bilder/Sensortaste_140_80_Silber.jpg); }
.taste_77_80 {
	width:77px; height:80px; background-color:#cccccc; background-image:url(bilder/Sensortaste_77_80_Silber.jpg); }
	
	/* XXXXXXXXXXXXXXX TASTEN Design mit Rahmnen und abgerundeten Ecken XXXXXXXXXXXXXXXXXX*/
.tasten_design {
	/*float:left;
	margin-left: 12px; margin-bottom:12px; aussenabstand*/
	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: #dddddd;
	border-right-color: #bbbbbb;
	border-bottom-color: #aaaaaa;
	border-left-color: #cccccc;
	-moz-border-radius: 6px 6px 6px 6px; 
	-webkit-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
	}
	/* XXXXXXXXXXXXXXX TASTEN Farben Leucht Schatten XXXXXXXXXXXXXXXXXX*/
.weiss {
	-webkit-box-shadow: #ffffff 8px 8px 12px, #ffffff -8px -8px 12px, #ffffff 8px -8px 12px, #ffffff -8px 8px 12px;
	-mox-box-shadow: #ffffff 8px 8px 12px, #ffffff -8px -8px 12px, #ffffff 8px -8px 12px, #ffffff -8px 8px 12px;
	box-shadow: #ffffff 8px 8px 12px, #ffffff -8px -8px 12px, #ffffff 8px -8px 12px, #ffffff -8px 8px 12px;
	}
.dunkel {
	-webkit-box-shadow: #666666 8px 8px 12px, #666666 -8px -8px 12px, #666666 8px -8px 12px, #666666 -8px 8px 12px;
	-mox-box-shadow: #666666 8px 8px 12px, #666666 -8px -8px 12px, #666666 8px -8px 12px, #666666 -8px 8px 12px;
	box-shadow: #222222 8px 8px 12px, #222222 -8px -8px 12px, #222222 8px -8px 12px, #222222 -8px 8px 12px;
	}
.silber {
	-webkit-box-shadow: #bbbbbb 8px 8px 12px, #bbbbbb -8px -8px 12px, #bbbbbb 8px -8px 12px, #bbbbbb -8px 8px 12px;
	-mox-box-shadow: #bbbbbb 8px 8px 12px, #bbbbbb -8px -8px 12px, #bbbbbb 8px -8px 12px, #bbbbbb -8px 8px 12px;
	box-shadow: #bbbbbb 8px 8px 12px, #bbbbbb -8px -8px 12px, #bbbbbb 8px -8px 12px, #bbbbbb -8px 8px 12px;
	}
.rot{
	-webkit-box-shadow: #dd0000 8px 8px 12px, #dd0000 -8px -8px 12px, #dd0000 8px -8px 12px, #dd0000 -8px 8px 12px;
	-mox-box-shadow: #dd0000 8px 8px 12px, #dd0000 -8px -8px 12px, #dd0000 8px -8px 12px, #dd0000 -8px 8px 12px;
	box-shadow: #dd0000 8px 8px 12px, #dd0000 -8px -8px 12px, #dd0000 8px -8px 12px, #dd0000 -8px 8px 12px;
	}
.gruen {
	-webkit-box-shadow: #00dd00 8px 8px 12px, #00dd00 -8px -8px 12px, #00dd00 8px -8px 12px, #00dd00 -8px 8px 12px;
	-mox-box-shadow: #00dd00 8px 8px 12px, #00dd00 -8px -8px 12px, #00dd00 8px -8px 12px, #00dd00 -8px 8px 12px;
	box-shadow: #00bb00 8px 8px 12px, #00bb00 -8px -8px 12px, #00bb00 8px -8px 12px, #00bb00 -8px 8px 12px;	
	}
.blau{
	-webkit-box-shadow: #0000bb 8px 8px 12px, #0000bb -8px -8px 12px, #0000bb 8px -8px 12px, #0000bb -8px 8px 12px;
	-mox-box-shadow: #0000bb 8px 8px 12px, #0000bb -8px -8px 12px, #0000bb 8px -8px 12px, #0000bb -8px 8px 12px;
	box-shadow: #0000bb 8px 8px 12px, #0000bb -8px -8px 12px, #0000bb 8px -8px 12px, #0000bb -8px 8px 12px;	
		}
.cyan{
	-webkit-box-shadow: #00dddd 8px 8px 12px, #00dddd -8px -8px 12px, #00dddd 8px -8px 12px, #00dddd -8px 8px 12px;
	-mox-box-shadow: #00dddd 8px 8px 12px, #00dddd -8px -8px 12px, #00dddd 8px -8px 12px, #00dddd -8px 8px 12px;
	box-shadow: #00dddd 8px 8px 12px, #00dddd -8px -8px 12px, #00dddd 8px -8px 12px, #00dddd -8px 8px 12px;	
	}
.magenta{
	-webkit-box-shadow: #dd00dd 8px 8px 12px, #dd00dd -8px -8px 12px, #dd00dd 8px -8px 12px, #dd00dd -8px 8px 12px;
	-mox-box-shadow: #dd00dd 8px 8px 12px, #dd00dd -8px -8px 12px, #dd00dd 8px -8px 12px, #dd00dd -8px 8px 12px;
	box-shadow: #dd00dd 8px 8px 12px, #dd00dd -8px -8px 12px, #dd00dd 8px -8px 12px, #dd00dd -8px 8px 12px;
	}
.gelb{
	-webkit-box-shadow: #dddd00 8px 8px 12px, #dddd00 -8px -8px 12px, #dddd00 8px -8px 12px, #dddd00 -8px 8px 12px;
	-mox-box-shadow: #dddd00 8px 8px 12px, #dddd00 -8px -8px 12px, #dddd00 8px -8px 12px, #dddd00 -8px 8px 12px;
	box-shadow: #dddd00 8px 8px 12px, #dddd00 -8px -8px 12px, #dddd00 8px -8px 12px, #dddd00 -8px 8px 12px;
	}
.hellblau{
	-webkit-box-shadow: #0000ff 8px 8px 12px, #0000ff -8px -8px 12px, #0000ff 8px -8px 12px, #0000ff -8px 8px 12px;	
	-mox-box-shadow: #0000ff 8px 8px 12px, #0000ff -8px -8px 12px, #0000ff 8px -8px 12px, #0000ff -8px 8px 12px;	
	box-shadow: #0000ff 8px 8px 12px, #0000ff -8px -8px 12px, #0000ff 8px -8px 12px, #0000ff -8px 8px 12px;	
	}
.lila {
	-webkit-box-shadow: #6400b4 8px 8px 12px, #6400b4 -8px -8px 12px, #6400b4 8px -8px 12px, #6400b4 -8px 8px 12px;
	-mox-box-shadow: #6400b4 8px 8px 12px, #6400b4 -8px -8px 12px, #6400b4 8px -8px 12px, #6400b4 -8px 8px 12px;
	box-shadow: #6400b4 8px 8px 12px, #6400b4 -8px -8px 12px, #6400b4 8px -8px 12px, #6400b4 -8px 8px 12px;
	}
.braun{
	-webkit-box-shadow: #cc6600 8px 8px 12px, #cc6600 -8px -8px 12px, #cc6600 8px -8px 12px, #cc6600 -8px 8px 12px;
	-mox-box-shadow: #cc6600 8px 8px 12px, #cc6600 -8px -8px 12px, #cc6600 8px -8px 12px, #cc6600 -8px 8px 12px;
	box-shadow: #cc6600 8px 8px 12px, #cc6600 -8px -8px 12px, #cc6600 8px -8px 12px, #cc6600 -8px 8px 12px;
	}
	
.rot_hellblau{
	-webkit-box-shadow: #0000ff 8px 8px 12px, #dd0000 -8px -8px 12px, #0000ff 8px -8px 12px, #dd0000 -8px 8px 12px;
	-mox-box-shadow: #0000ff 8px 8px 12px, #dd0000 -8px -8px 12px, #0000ff 8px -8px 12px, #dd0000 -8px 8px 12px;
	box-shadow: #0000ff 8px 8px 12px, #dd0000 -8px -8px 12px, #0000ff 8px -8px 12px, #dd0000 -8px 8px 12px;	
	}
.hellblau_rot{
	-webkit-box-shadow: #0000ff 8px 8px 12px, #0000ff -8px -8px 12px, #0000ff 8px -8px 12px, #0000ff -8px 8px 12px;	
	-mox-box-shadow: #0000ff 8px 8px 12px, #0000ff -8px -8px 12px, #0000ff 8px -8px 12px, #0000ff -8px 8px 12px;	
	box-shadow: #dd0000 8px 8px 12px, #0000ff -8px -8px 12px, #dd0000 8px -8px 12px, #0000ff -8px 8px 12px;	
	}



/*XXXXXXX  Beschrieftungen   XXXXXXXX*/
/*XXXXXXX  Die schmalen Beschriftungs zonen fenster über den normalen 12ern-Tastenfeldern  XXXXXXXX*/
.textname { text-align:center; background-color:#eeeeee; width:84px; height:24px; }
	
/* Der Bezschriftungsdiv für die Matrix Zone */
#matrixtext { /* XXXXXXXX  Die schmalen Beschriftungs zone über dem Matrix Zonenfeld XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:564px;}
	/*#matrixtexteins {  XXXXXXXXXX Dies sind die deaktivierten einzeltasten 1 bis 6 !!
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; }
	#matrixtextzwei {
	margin:0px; padding:0px; position:absolute;top: 0px; left:118px; }
	#matrixtextdrei {
	margin:0px; padding:0px; position:absolute;top: 0px; left:214px; }
	#matrixtextvier {
	margin:0px; padding:0px; position:absolute;top: 0px; left:310px; }
	#matrixtextfuenf {
	margin:0px; padding:0px; position:absolute;top: 0px; left:406px; }
	#matrixtextsechs {
	margin:0px; padding:0px; position:absolute;top: 0px; left:502px; }*/
	#matrixtextsieben {
	margin:0px; padding:0px; position:absolute;top: 0px; left:608px; }
	#matrixtextacht {
	margin:0px; padding:0px; position:absolute;top: 0px; left:704px; }
	#matrixtextneun {
	margin:0px; padding:0px; position:absolute;top: 0px; left:800px; }
	#matrixtextzehn {
	margin:0px; padding:0px; position:absolute;top: 0px; left:896px; }
	#matrixtextelf {
	margin:0px; padding:0px; position:absolute;top: 0px; left:1002px; }
	#matrixtextzwoelf {
	margin:0px; padding:0px; position:absolute;top: 0px; left:1098px; }
	
	

/* XXXXXXXX  Die schmalen Beschriftungs zone über die Zonenfelder - L E D , Effekte , Macros  XXXXXXXX*/

#textledoben { /* XXXXXXXX Die Sammel Bezschriftungsleiste für die LED Oberen Zonenfelder 1 bis 12 XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:1158px;}
#textledunten { /* XXXXXXXX Die Sammel Bezschriftungsleiste für die LED Unteren Zonenfelder 1 bis 12 XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:1158px;}
	
#texteffekteoben { /* XXXXXXXX Die Sammel Bezschriftungsleiste für die Effekte Oberen Zonenfelder 1 bis 12 XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:1158px;}
#texteffekteunten { /* XXXXXXXX Die Sammel Bezschriftungsleiste für die Effekte Unteren Zonenfelder 1 bis 12 XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:1158px;}

#textmacrosoben { /* XXXXXXXX Die Sammel Bezschriftungsleiste für die Effekte Oberen Zonenfelder 1 bis 12 XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:1158px;}
#textmacrosunten { /* XXXXXXXX Die Sammel Bezschriftungsleiste für die Effekte Unteren Zonenfelder 1 bis 12 XXXXXXXX*/
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; width:1158px;}


/*XXXXXXX  Die 12 Beschriftungs Textfelder in den Zonen Text DIVs für alle Ebenen   XXXXXXXX*/

	#texteins { /*  Die Bezschriftungsleiste für die Steps Zonen */
	margin:0px; padding:0px; position:absolute;top: 0px; left:22px; }/* plus 96*/
	#textzwei {
	margin:0px; padding:0px; position:absolute;top: 0px; left:118px; }
	#textdrei {
	margin:0px; padding:0px; position:absolute;top: 0px; left:214px; }
	#textvier {
	margin:0px; padding:0px; position:absolute;top: 0px; left:310px; }
	#textfuenf {
	margin:0px; padding:0px; position:absolute;top: 0px; left:416px; }
	#textsechs {
	margin:0px; padding:0px; position:absolute;top: 0px; left:512px; }
	#textsieben {
	margin:0px; padding:0px; position:absolute;top: 0px; left:608px; }
	#textacht {
	margin:0px; padding:0px; position:absolute;top: 0px; left:704px; }
	#textneun {
	margin:0px; padding:0px; position:absolute;top: 0px; left:810px; }
	#textzehn {
	margin:0px; padding:0px; position:absolute;top: 0px; left:906px; }
	#textelf {
	margin:0px; padding:0px; position:absolute;top: 0px; left:1002px; }
	#textzwoelf {
	margin:0px; padding:0px; position:absolute;top: 0px; left:1098px; }
	
	/*XXXXXXX  Beschrieftungen  ende  XXXXXXXX*/


	
	/*Der Tastendiv ist der Tranzparente Raumplatzhalter zum Pixelgenauen Positionieren des Schalter mitsamt allen seinen Inhalten*/
	.tastendiv_abstand  {position:relative;float:left;
	margin-left: 0px; padding: 0px; z-index: 10; height:140px; /*background-color:#66cc66;*/}
	
	
	/*xxxxxxxxxxxx--- Funktionen links Anfang---xxxxxxxxxxxxxxxx*/

#macrotaste_1  {position:absolute; top:12px; left:20px; width:77px; height:80px; z-index: 60; }
#textfeld_macro_eins {position:absolute; top:12px; left:20px; width:77px; height:80px; background-color:#cccccc; }


#macrotaste_2  {position:absolute; top:12px; left:113px; width:77px; height:80px; z-index: 60; }
#textfeld_macro_zwei {position:absolute; top:12px; left:113px; width:77px; height:80px; background-color:#cccccc; }


#macrotaste_3  {position:absolute; top:12px; left:206px; width:77px; height:80px; z-index: 60; }
#textfeld_macro_drei {position:absolute; top:12px; left:206px; width:77px; height:80px; background-color:#cccccc; }


#macrotaste_4  {position:absolute; top:12px; left:299px; width:77px; height:80px; z-index: 60;  }
#textfeld_macro_vier {position:absolute; top:12px; left:299px; width:77px; height:80px; background-color:#cccccc; }


#macrotaste_5  {position:absolute; top:12px; left:392px; width:77px; height:80px; z-index: 60;  }
#textfeld_macro_fuenf {position:absolute; top:12px; left:392px; width:77px; height:80px; background-color:#cccccc; }


/*xxxxxxxxxxxx--- Funktionen links Ende---xxxxxxxxxxxxxxxx*/
	

/*xxxxxxxxxxxx--- Funktionen links Anfang---xxxxxxxxxxxxxxxx*/

#funktionstaste_1  {position:absolute; top:12px; left:20px; width:140px; height:80px; z-index: 60; }
#textfeld_funktion_eins {position:absolute; top:12px; left:20px; width:140px; height:80px; background-color:#cccccc; }


#funktionstaste_2  {position:absolute; top:12px; left:177px; width:140px; height:80px; z-index: 60; }
#textfeld_funktion_zwei {position:absolute; top:12px; left:177px; width:140px; height:80px; background-color:#cccccc; }


#funktionstaste_3  {position:absolute; top:110px; left:20px; width:140px; height:80px; z-index: 60; }
#textfeld_funktion_drei {position:absolute; top:110px; left:20px; width:140px; height:80px; background-color:#cccccc; }


#funktionstaste_4  {position:absolute; top:110px; left:177px; width:140px; height:80px; z-index: 60;  }
#textfeld_funktion_vier {position:absolute; top:110px; left:177px; width:140px; height:80px; background-color:#cccccc; }


/*xxxxxxxxxxxx--- Funktionen links Ende---xxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxx--- Funktionen rechts Anfang---xxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXX Gruenes Funktionstastenfeld für Sound steuerung und Trigger XXXXXXXXXXXXXXX*/
#funktionstaste_5  {position:absolute; top:12px; left:20px; width:140px; height:80px; z-index: 60; }
#textfeld_funktion_fuenf {position:absolute; top:12px; left:20px; width:140px; height:80px; background-color:#cccccc; }


#funktionstaste_6  {position:absolute; top:12px; left:177px; width:140px; height:80px; z-index: 60; }
#textfeld_funktion_sechs {position:absolute; top:12px; left:177px; width:140px; height:80px; background-color:#cccccc; }


#funktionstaste_7  {position:absolute; top:110px; left:20px; width:140px; height:80px; z-index: 60; }
#textfeld_funktion_sieben {position:absolute; top:110px; left:20px; width:140px; height:80px; background-color:#cccccc; }


#funktionstaste_8  {position:absolute; top:110px; left:177px; width:140px; height:80px; z-index: 60;  }
#textfeld_funktion_acht {position:absolute; top:110px; left:177px; width:140px; height:80px; background-color:#cccccc; }

/*xxxxxxxxxxxx--- Funktionen rechts Ende---xxxxxxxxxxxxxxxx*/

/*XXXXXXXXXX  Matrix Sensorfeld - Obere Zone 1-12 XXXXXXXXXX*/

#tastendiv_eins  {position:absolute; top:12px; left:22px; width:80px; height:140px; z-index: 100; }
#textfeld_eins {position:absolute; top:12px; left:22px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_zwei  {position:absolute; top:12px; left:118px; z-index: 100; }
#textfeld_zwei {position:absolute; top:12px; left:118px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_drei  {position:absolute; top:12px; left:214px; z-index: 100; }
#textfeld_drei {position:absolute; top:12px; left:214px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_vier  {position:absolute; top:12px; left:310px; z-index: 100; }
#textfeld_vier {position:absolute; top:12px; left:310px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_fuenf  {position:absolute; top:12px; left:406px; z-index: 100; }
#textfeld_fuenf {position:absolute; top:12px; left:406px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_sechs  {position:absolute; top:12px; left:502px; z-index: 100; }
#textfeld_sechs {position:absolute; top:12px; left:502px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_sieben  {position:absolute; top:12px; left:609px; z-index: 100;  }
#textfeld_sieben {position:absolute; top:12px; left:609px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_acht  {position:absolute; top:12px; left:705px; z-index: 100; }
#textfeld_acht {position:absolute; top:12px; left:705px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_neun  {position:absolute; top:12px; left:801px; z-index: 100; }
#textfeld_neun {position:absolute; top:12px; left:801px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_zehn  {position:absolute; top:12px; left:897px; z-index: 100; }
#textfeld_zehn {position:absolute; top:12px; left:897px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_elf  {position:absolute; top:12px; left:1004px; z-index: 100; }
#textfeld_elf {position:absolute; top:12px; left:1004px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_zwoelf  {position:absolute; top:12px; left:1100px; z-index: 100; }
#textfeld_zwoelf {position:absolute; top:12px; left:1100px; width:80px; height:140px; background-color:#cccccc; }


/*XXXXXXXXXX  Ende Matrix 1-12  XXXXXXXXXX*/

/*XXXXXXXXXX  Step 1 bis 12 Sensorfeld  XXXXXXXXXX*/
/*XXXXXXX  Fuer jede Taste seperat, das ermöglicht spähter eigene Grafiken namens oder sonstige einzigartige
gestaltungmoeglichkeiten zu XXXXXXXX*/


#tastendiv_1  {position:absolute; top:12px; left:22px; z-index: 100; }
#textfeld_1 {position:absolute; top:12px; left:22px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_2  {position:absolute; top:12px; left:118px; z-index: 100; }
#textfeld_2 {position:absolute; top:12px; left:118px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_3  {position:absolute; top:12px; left:214px; z-index: 100; }
#textfeld_3 {position:absolute; top:12px; left:214px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_4  {position:absolute; top:12px; left:310px; z-index: 100; }
#textfeld_4 {position:absolute; top:12px; left:310px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_5  {position:absolute; top:12px; left:417px; z-index: 100; }
#textfeld_5 {position:absolute; top:12px; left:417px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_6  {position:absolute; top:12px; left:513px; z-index: 100; }
#textfeld_6 {position:absolute; top:12px; left:513px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_7  {position:absolute; top:12px; left:609px; z-index: 100; }
#textfeld_7 {position:absolute; top:12px; left:609px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_8  {position:absolute; top:12px; left:705px; z-index: 100; }
#textfeld_8 {position:absolute; top:12px; left:705px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_9  {position:absolute; top:12px; left:812px; z-index: 100; }
#textfeld_9 {position:absolute; top:12px; left:812px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_10  {position:absolute; top:12px; left:908px; z-index: 100; }
#textfeld_10 {position:absolute; top:12px; left:908px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_11  {position:absolute; top:12px; left:1004px; z-index: 100; }
#textfeld_11 {position:absolute; top:12px; left:1004px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_12  {position:absolute; top:12px; left:1100px; z-index: 100; }
#textfeld_12 {position:absolute; top:12px; left:1100px; width:80px; height:140px; background-color:#cccccc; }


/*XXXXXXXXXX  Step 13 bis 24 Sensorfeld  XXXXXXXXXX*/


#tastendiv_13  {position:absolute; top:12px; left:22px; z-index: 100; }
#textfeld_13 {position:absolute; top:12px; left:22px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_14  {position:absolute; top:12px; left:118px; z-index: 100; }
#textfeld_14 {position:absolute; top:12px; left:118px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_15  {position:absolute; top:12px; left:214px; z-index: 100; }
#textfeld_15 {position:absolute; top:12px; left:214px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_16  {position:absolute; top:12px; left:310px; z-index: 100; }
#textfeld_16 {position:absolute; top:12px; left:310px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_17  {position:absolute; top:12px; left:417px; z-index: 100; }
#textfeld_17 {position:absolute; top:12px; left:417px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_18  {position:absolute; top:12px; left:513px; z-index: 100; }
#textfeld_18 {position:absolute; top:12px; left:513px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_19  {position:absolute; top:12px; left:609px; z-index: 100; }
#textfeld_19 {position:absolute; top:12px; left:609px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_20  {position:absolute; top:12px; left:705px; z-index: 100; }
#textfeld_20 {position:absolute; top:12px; left:705px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_21  {position:absolute; top:12px; left:812px; z-index: 100; }
#textfeld_21 {position:absolute; top:12px; left:812px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_22  {position:absolute; top:12px; left:908px; z-index: 100; }
#textfeld_22 {position:absolute; top:12px; left:908px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_23  {position:absolute; top:12px; left:1004px; z-index: 100; }
#textfeld_23 {position:absolute; top:12px; left:1004px; width:80px; height:140px; background-color:#cccccc; }

#tastendiv_24  {position:absolute; top:12px; left:1100px; z-index: 100; }
#textfeld_24 {position:absolute; top:12px; left:1100px; width:80px; height:140px; background-color:#cccccc; }


/*XXXXXXXXXX  Step 25 bis 36 Sensorfeld  XXXXXXXXXX*/


#tastendiv_25  {position:absolute; z-index: 100; top:12px; left:22px; }
#ledfeld_25 { z-index: 20; top:4px; left:14px;width:40px; height:24px; background-color:#ffff00; }

#tastendiv_26  {position:absolute; z-index: 100; top:12px; left:118px; }
#ledfeld_26 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_27  {position:absolute; z-index: 100; top:12px; left:214px; }
#ledfeld_27 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_28  {position:absolute; z-index: 100; top:12px; left:310px; }
#ledfeld_28 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }

#tastendiv_29  {position:absolute; z-index: 100; top:12px; left:417px; }
#ledfeld_29 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ff00ff; }

#tastendiv_30  {position:absolute; z-index: 100; top:12px; left:513px; }
#ledfeld_30 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#00ffff; }

#tastendiv_31  {position:absolute; z-index: 100; top:12px; left:609px; }
#ledfeld_31 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffff00; }

#tastendiv_32  {position:absolute; z-index: 100; top:12px; left:705px; }
#ledfeld_32 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#000000; }

#tastendiv_33  {position:absolute; z-index: 100; top:12px; left:812px; }
#ledfeld_33 {position:relative; z-index: 2000; top:4px; left:4px;width:36px; height:16px; background-color:#ff0000; }

#tastendiv_34  {position:absolute; z-index: 100; top:12px; left:908px; }
#ledfeld_34 {position:relative; z-index: 20; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_35  {position:absolute; z-index: 100; top:12px; left:1004px; }
#ledfeld_35 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_36  {position:absolute; z-index: 100; top:12px; left:1100px; }
#ledfeld_36 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }


/*XXXXXXXXXX  Step 37 bis 48 Sensorfeld  XXXXXXXXXX*/


#tastendiv_37  {position:absolute; z-index: 100; top:12px; left:22px; }
#ledfeld_37 { z-index: 20; top:4px; left:14px;width:40px; height:24px; background-color:#ffff00; }

#tastendiv_38  {position:absolute; z-index: 100; top:12px; left:118px; }
#ledfeld_38 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_39  {position:absolute; z-index: 100; top:12px; left:214px; }
#ledfeld_39 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_40  {position:absolute; z-index: 100; top:12px; left:310px; }
#ledfeld_40 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }

#tastendiv_41  {position:absolute; z-index: 100; top:12px; left:417px; }
#ledfeld_41 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ff00ff; }

#tastendiv_42  {position:absolute; z-index: 100; top:12px; left:513px; }
#ledfeld_42 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#00ffff; }

#tastendiv_43  {position:absolute; z-index: 100; top:12px; left:609px; }
#ledfeld_43 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffff00; }

#tastendiv_44  {position:absolute; z-index: 100; top:12px; left:705px; }
#ledfeld_44 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#000000; }

#tastendiv_45  {position:absolute; z-index: 100; top:12px; left:812px; }
#ledfeld_45 {position:relative; z-index: 2000; top:4px; left:4px;width:36px; height:16px; background-color:#ff0000; }

#tastendiv_46  {position:absolute; z-index: 100; top:12px; left:908px; }
#ledfeld_46 {position:relative; z-index: 20; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_47  {position:absolute; z-index: 100; top:12px; left:1004px; }
#ledfeld_47 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_48  {position:absolute; z-index: 100; top:12px; left:1100px; }
#ledfeld_48 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }


/*XXXXXXXXXX  Step 49 bis 60 Sensorfeld  XXXXXXXXXX*/


#tastendiv_49  {position:absolute; z-index: 100; top:12px; left:22px; }
#ledfeld_49 { z-index: 20; top:4px; left:14px;width:40px; height:24px; background-color:#ffff00; }

#tastendiv_50  {position:absolute; z-index: 100; top:12px; left:118px; }
#ledfeld_50 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_51  {position:absolute; z-index: 100; top:12px; left:214px; }
#ledfeld_51 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_52  {position:absolute; z-index: 100; top:12px; left:310px; }
#ledfeld_52 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }

#tastendiv_53  {position:absolute; z-index: 100; top:12px; left:417px; }
#ledfeld_53 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ff00ff; }

#tastendiv_54  {position:absolute; z-index: 100; top:12px; left:513px; }
#ledfeld_54 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#00ffff; }

#tastendiv_55  {position:absolute; z-index: 100; top:12px; left:609px; }
#ledfeld_55 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffff00; }

#tastendiv_56  {position:absolute; z-index: 100; top:12px; left:705px; }
#ledfeld_56 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#000000; }

#tastendiv_57  {position:absolute; z-index: 100; top:12px; left:812px; }
#ledfeld_57 {position:relative; z-index: 2000; top:4px; left:4px;width:36px; height:16px; background-color:#ff0000; }

#tastendiv_58  {position:absolute; z-index: 100; top:12px; left:908px; }
#ledfeld_58 {position:relative; z-index: 20; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_59  {position:absolute; z-index: 100; top:12px; left:1004px; }
#ledfeld_59 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_60  {position:absolute; z-index: 100; top:12px; left:1100px; }
#ledfeld_60 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }


/*XXXXXXXXXX  Step 61 bis 72 Sensorfeld  XXXXXXXXXX*/


#tastendiv_61  {position:absolute; z-index: 100; top:12px; left:22px; }
#ledfeld_61 { z-index: 20; top:4px; left:14px;width:40px; height:24px; background-color:#ffff00; }

#tastendiv_62  {position:absolute; z-index: 100; top:12px; left:118px; }
#ledfeld_62 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_63  {position:absolute; z-index: 100; top:12px; left:214px; }
#ledfeld_63 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_64  {position:absolute; z-index: 100; top:12px; left:310px; }
#ledfeld_64 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }

#tastendiv_65  {position:absolute; z-index: 100; top:12px; left:417px; }
#ledfeld_65 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ff00ff; }

#tastendiv_66  {position:absolute; z-index: 100; top:12px; left:513px; }
#ledfeld_66 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#00ffff; }

#tastendiv_67  {position:absolute; z-index: 100; top:12px; left:609px; }
#ledfeld_67 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffff00; }

#tastendiv_68  {position:absolute; z-index: 100; top:12px; left:705px; }
#ledfeld_68 {position: absolute; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#000000; }

#tastendiv_69  {position:absolute; z-index: 100; top:12px; left:812px; }
#ledfeld_69 {position:relative; z-index: 2000; top:4px; left:4px;width:36px; height:16px; background-color:#ff0000; }

#tastendiv_70  {position:absolute; z-index: 100; top:12px; left:908px; }
#ledfeld_70 {position:relative; z-index: 20; top:4px; left:4px;width:36px; height:16px; background-color:#cccccc; }

#tastendiv_71  {position:absolute; z-index: 100; top:12px; left:1004px; }
#ledfeld_71 {position:relative; z-index: 10; top:4px; left:4px; width:36px; height:16px; background-color:#00ff00; }

#tastendiv_72  {position:absolute; z-index: 100; top:12px; left:1100px; }
#ledfeld_72 {position:relative; z-index: 10; top:4px; left:4px;width:36px; height:16px; background-color:#ffffff; }



/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
