/*  Ein Kommentar in CSS */

/*  Der * definiert den "global reset" Hier werden alle Elemente angesprochen, die später nicht anders definiert werden. */
*
{
/* margin definiert den Aussenabstand einer Box */	
	margin:0px;	
/* padding definiert	den Innenabstand einer Box */
	padding:0px;
/* font store playfair, metamorphous, open sans	
    font-family: 'Metamorphous', cursive;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Playfair Display', serif;
*/
/* font-family definiert die Schriftart */	

    
   
    _font-family: 'Playfair Display', serif;
    font-family: 'Trade Winds';
    box-sizing: border-box;
    position:relative;
    scroll-behavior: smooth;
  
}
@font-face {
    font-family: 'technologyregular';
    src: url('../font/technology-webfont.woff2') format('woff2'),
         url('../font/technology-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* trade-winds-regular - latin */
@font-face {
    font-family: 'Trade Winds';
    font-style: normal;
    font-weight: 400;
    src: url('../font/trade-winds-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../font/trade-winds-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../font/trade-winds-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../font/trade-winds-v12-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
       
  }
  
  


html,body
{
	height:100%;
    background:black;
}
body 
{
	_background:url(../images/.jpg);
    background-repeat: no-repeat;
    background-position:top;
    background:black;
    margin:0px;
}

.showHelp
{
    _position: absolute;
    width:100vw;
    height:100vh;
    z-index: 1;
    background-color: black;
    
}
.hideHelp
{
    width:0px;
    _z-index: -1;
    position:absolute;
    overflow:hidden;
}
#backBtn                /*  Button Zurueck zum Sequencer */
{
    
    width:auto;
    background:rgb(80, 72, 72);
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:20px;
    
}

#wrapper
{
    
    width:1200px;
    height:900px;
    background:rgb(72, 76, 80);
    margin:auto;
}


.eins            /*  1. Zeile */
{
    background:rgb(40, 42, 43);
    height:10px;
    border-bottom: groove silver 1px;
    border-top: groove silver 1px;
    border-style: outset 1px;
    color:rgb(179, 178, 178);
}   
.zwei           /*  2.Zeile */
{
    height:60px;
    background:rgb(72, 76, 80);
    display: inline-block;
    color:white;
}
.innen
{
    display: none;
}
.eins:hover .innen
{
    cursor: help;
    display: block;
}
.nameBpm
{
    _height:60px;
       
}
#logoname   
{
    float:left;
    width:900px;
    padding-left:10px;
    _background-color: brown;
}
#logo
{
    font-size:250%;
    color:rgb(179, 178, 178);
    text-shadow: 3px 1px 20px red;
  
    margin-left:-10px;
    padding-top:10px;
}
#robo 
{
    float:left;
    _margin-right:270px;     /* Aktivieren wenn float:right; / Fuer Logo in der Mitte*/
    padding-top:3px;
    
    
}

#bpmCss        /* Vol, BPM Text, InitSeq, InitVol */
{
    float:left;
    padding:10px;
    _font-size:100%;
    color:rgb(179, 178, 178);
}
.slider   /*  Alle Slider */
{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    width:60px;
    background:rgb(72, 76, 80);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red ;
    color:rgb(179, 178, 178);
}
.slider:hover
{       
    opacity: 1; 
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb
{
    -webkit-appearance: none; 
    appearance: none;
    width: 14px; 
    height: 14px; 
    border-radius: 50%;
    background: rgb(179, 178, 178);
    cursor:grab; 
}
.slider::-moz-range-thumb
{
    width: 14px; 
    height: 14px; 
    border-radius: 50%;
    background: rgb(179, 178, 178);
    cursor: grab; 
}
.device         /*  Basis div Instrument */
{
    height:65px;
    _background:rgb(184, 24, 122);  /*  Fuer Fehlersuche */
    background:rgb(72, 76, 80);
    display:flex;
    justify-content: space-between;
    padding:3px;
}
.parameterBar       /*  Alle Parameter Zeilen  */
{
    height:30px;
    background:rgb(72, 76, 80);
    display:flex;
    justify-content: space-between;
    padding:3px;
    
}
.leftSet
{
    _background: chocolate;     /*  Fuer Fehlersuche */
    float:left;
    
}
.leftSetParameter
{
    _background:red;
    
    margin-right:4px;
   
}
.display
{
    float:left;
    width:133px;
    height:55px;
    _background: darkgreen;     /*  Fuer Fehlersuche */
    background:rgb(40, 42, 43);
    _background:black;           /*  Fuer Fehlersuche */
    border-style: inset;
    border: solid rgba(131, 122, 122, 0.616) 2px;
    box-shadow: inset 0px 16px 70px -20px rgb(134, 23, 23), inset 0px -16px 60px -20px rgb(148, 50, 50);
    color:rgb(179, 178, 178);
    padding:2px;
    margin:1px;
    font-size:90%;
   
   
  
}
.lcd 
{
    font-family: 'technologyregular';
    font-size:110%;
    text-shadow: rgb(0, 0, 0) 0px 0px 4px;
    color:rgb(179, 178, 178);
}


.instrSelect           /*  Felder Instrument Selektoren / Linke Spalten */
{
    
    width: 80px;
    _background:rgb(107, 180, 85);   /*  Fuer Fehlersuche */
    background:rgb(72, 76, 80);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    text-shadow: 4px 16px 12px red;
    height:20px;
    margin:5px;
    padding-left:4px;
    display: flex;
    
        
}
.media
{
    
    width:18px;
    height:20px;
    background:rgb(72, 76, 80);
    border-radius: 8%;
    box-shadow:0.5px 0.5px 2px red;
    color:rgb(179, 178, 178);
    
    
}
.loadFile
{
    
    width:130px;
    height:20px;
    background:rgb(72, 76, 80);
    border-radius: 8%;
    box-shadow:0.5px 0.5px 2px red;
    color:rgb(179, 178, 178);
    margin-left:6px;
    
}
.userRec
{
    
    width:72px;
    height:20px;
    background:rgb(72, 76, 80);
    border-radius: 8%;
    box-shadow:0.5px 0.5px 2px red;
    color:rgb(179, 178, 178);
    _margin-left:6px;
   
}

.patBtn
{
    width:20px;
    background:rgb(72, 76, 80);
    _border: solid rgba(131, 122, 122, 0.616) 1px;
    _border-style: outset;
    border-radius: 8%;
    color:rgb(179, 178, 178);
    box-shadow:0.5px 0.5px 5px red;
    
}
.patternSelect          /*  6 Speicher Buttons / Linke Spalten */
{
    width: 145px;
    margin:5px;
    _background:rgb(176, 187, 24)       /*  Fuer Fehlersuche */
   
    
}
.setSelect              /*  Felder Volume, Zufall, Reset / Rechte Spalten */
{
    width: 300px;
    margin:5px;
    padding: 3px 3px;
    
    
}

.setBtn                  /*  Buttons  Zufall, Reset / Rechte Spalten */
{
    width:70px;
    background:rgb(80, 72, 72);
    _border: solid rgba(131, 122, 122, 0.616) 1px;
    _border-style: outset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:20px;
    
}
.setBtnMinMax                 /*  Buttons  Zufall, Reset / Rechte Spalten */
{
    width:69px;
    background:rgb(80, 72, 72);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:20px;
    
}

.setBtnActive
{
    width:70px;
    background:rgb(129, 46, 50);
    _border: solid rgba(131, 122, 122, 0.616) 1px;
    _border-style: outset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:20px;
}

.led                  /*  LED inaktiv */
{
    width:15px;
    background:rgb(72, 76, 80);
    _border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 50%;
    _box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:15px;
    
}
.ledActiv                  /*  LED aktiv */
{
    width:15px;
    background:rgb(148, 50, 50);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 50%;
    box-shadow:1px 1px 15px red;
    _color:rgb(179, 178, 178);
    height:15px;
    
}
.input                  /*  Input Volume / Rechte Spalten */
{
    width:45px;
    background:rgb(72, 76, 80);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red ;
    color:rgb(179, 178, 178);
    
}


.boxLeft                 /*  Spalten Linke Felder */
{
    height:70px;
    _background:rgb(89, 159, 194);      /*  Fuer Fehlersuche */
    background:rgb(40, 42, 43);
    border: solid 1px rgb(138,138,138);
    border-style: outset;
    width:300px;
    padding: 3px;
    
    
}

.boxMid                 /*  Spalten Mitte Felder */
{
    height:70px;
    background:rgb(40, 42, 43);
    border: solid 1px rgb(138,138,138);
    border-style: inset;
    width:580px;
    padding: 3px;
    
}
.pad     /*  Pads injected by DOM */
{
    width:31px;
    height:50px;
    background:coral;      /*  Fuer Fehlersuche */
    float:left;
    background:rgb(72, 76, 80);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 8%;
    _box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:2px;
    
}
.pad:hover
{
    box-shadow:1px 1px 8px red;
}
.padSelected     /*  Pads injected by DOM */
{
    width:31px;
    height:50px;
    _background:coral;
    float:left;
    background:rgb(161, 141, 141);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 8%;
    _box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:2px;
    
}
.padPlay    /*  Pads injected by DOM */
{
    width:31px;
    height:50px;
    _background:coral;
    float:left;
    background:rgb(148, 50, 50);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 8%;
    box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:2px;
    
}
.vpad     /*  Volume pads injected by DOM */
{
    width:31px;
    height:16px;
    _background:coral;
    float:left;
    background:rgb(72, 76, 80);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: outset;
    border-radius: 8%;
    _box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:0px;
}
.vpad:hover
{
    box-shadow:1px 1px 8px red;
}
.padVol1     /*  Pad Vol 1 */
{
    width:31px;
    height:16px;
    _background:coral;
    float:left;
    background:rgba(240, 150, 150, 1);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:0px;
}
.padVol075     /* Pad Vol 0.75 */
{
    width:31px;
    height:16px;
    _background:coral;
    float:left;
    background:rgba(240, 150, 150, 0.7);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:0px;
}
.padVol05     /* Pad Vol 0.5 */
{
    width:31px;
    height:16px;
    _background:coral;
    float:left;
    background:rgba(240, 150, 150, 0.5);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:0px;
}
.padVol025     /* Pad Vol 0.25 */
{
    width:31px;
    height:16px;
    _background:coral;
    float:left;
    background:rgba(250, 150, 150, 0.3);
    border: solid rgba(131, 122, 122, 0.616) 1px;
    border-style: inset;
    border-radius: 8%;
    box-shadow:1px 1px 8px red;
    color:rgb(179, 178, 178);
    margin:2px;
    padding:0px;
}

.boxRight               /*  Spalten Rechte Felder */
{
    height:70px;
    background:rgb(40, 42, 43);
    border: solid 1px rgb(138,138,138);
    border-style: outset;
    width:300px;
    padding: 3px;
}
.rightVolBar
{
    margin-left:8px;
}
.fuenf                  /*  Zeile 17, Run/Stop */
{
    width:100%;
    height:36px;
    _background:rgb(196, 18, 18); /* Fuer Fehlersuche*/
    background:rgb(72, 76, 80);
    padding-top:8px;
}
.fuenfBox
{
    width:100%;
    height:40px;
    _background: lightcoral;
    display: inline-block;
}
.runStopBox 
{
    width:600px;
    height:40px;
    _background-color: blue;
    float: left;
}
.loadSaveBox
{
    width:300px;
    height:40px;
    _background:lightpink;
    float: left;
}
.canvasBox
{
    _background:green;
    height:40px;
    width:297px;
    float: left;
    margin-top:-5px;
}
.runStopDiv
{
    float:left;
    width:580px;
    
}
.setBtnLong                  /*  Buttons Load-Save Song */
{
    width:70px;
    background:rgb(80, 72, 72);
    _border: solid rgba(131, 122, 122, 0.616) 1px;
    _border-style: outset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:20px;
    margin-top:3px;
}
#BtnStartStop
{
    width:250px;
    background:rgb(72, 76, 80);
    _border: solid rgba(131, 122, 122, 0.616) 1px;
    _border-style: outset;
    border-radius: 8%;
    box-shadow:1px 1px 5px red;
    color:rgb(179, 178, 178);
    height:25px;
    font-size: 110%;
    margin-left: 160px;
}
#BtnStartStop:hover
{
    box-shadow:1px 1px 20px red;
}
.sechs                       /*  Fusszeile */
{
    width:100%;
    height:35px;
    background:rgb(40, 42, 43);
    color:white;
    border-bottom: groove silver;
    border-top: groove silver 1px;
    border-style: outset 1px;
}
.deviceBottom                /*  Fusszeile */
{
    display: flex;
    justify-content:center;
    padding:10px;
}

a
{
	color:black;
	text-decoration:none;
}
img
{
    max-width:100%;
    height:auto;
}
/* Option Maske */

.option-mask {
	width:100%;
	text-align:left;
	height:100vh;
	background:rgba(10, 10, 10, 0.8);
	padding:2rem;
	position:absolute;
	z-index:100;
	top:0;
	left:0;
	color:rgb(255, 255, 255);
    font-family: 'Arial', serif;
 
}


.option-mask_passiv{
    display: none;
}


#innerwrap{
    width: fit-content;
    margin: auto;
}

#innerwrap h2{
    margin-bottom: 20px;
}

#innerwrap h2, #innerwrap h3,#innerwrap input,#innerwrap button, #innerwrap p, #innerwrap span{

    font-family: 'Arial', serif;
    margin-top: 10px;
}

#innerwrap span{
    margin: 0 80px 0 80px;
}

#songtitel{
    margin: 20px 0 20px 0;
    padding: 5px;
}




/* Ende Speicher Maske */



/* MEDIA QUERY */
@media screen and (max-width:800px) {
	
#mama
{
    width:98%;
    height:auto;
}
img
{
    max-width:100%;
    _height:auto;
}

}
/* Keyframes */
@keyframes fade {
from {
opacity:0;
background:red;
}
50% {
    opacity:1;
    background:green;   
}
to {
    opacity:0;
    background:blue;   
}
}