@charset "utf-8";

/* Bernd Obergassel`s Wave Mixer Style Sheet 17.05.2024 */




 body {
     color : #fff;
     background-color : #2f2f2f;
     margin : 0;
     font-family : Arial;
     text-align : center;
     padding : 0;
}


h1 {
   font-variant : small-caps;
   font-size : 1cm;
   text-shadow : 0 0 0.5em #fff;
}


.Text1 {
   text-align : left;
   font-family : Arial;
   font-size : 14px;
   font-weight : normal;
   color : yellow;
} 

.Text2 {
   text-align : left;
   font-family : Arial;
   font-size : 14px;
   font-weight : normal;
   color : #009933;
} 

.Text3 {
   text-align : left;
   font-family : Arial;
   font-size : 12px;
   font-weight : normal;
   color : #ffcc33;
}

.Text4 {
   text-align : left;
   font-family : Arial;
   font-size : 14px;
   font-weight : normal;
   color : #ffcc33;
}


.Text5 {
   text-align : left;
   font-family : Arial;
   font-size : 14px;
   font-weight : normal;
   color : #00dd44;
}


.Text6 {
   text-align : left;
   font-family : Arial;
   font-size : 14px;
   font-weight : normal;
   color : #f0f0f0;
}


.SldrWrt {
   text-align : right;
   font-family : Arial;
   font-size : 8px;
   font-weight : normal;
   color : white;
} 

.schwarz12n {
   font-family : Verdana, Arial;
   font-size : 12px;
   font-weight : normal;
   color : black;
} 


.tabrahmen0 {
   border : solid 0;
}


.tabrahmen0-c {
   border : solid 0;
   margin-left : auto;
   margin-right : auto;
}


.tabrahmen0-l {
   border : solid 0;
   margin-right : auto;
}


.tabrahmen0-r {
   border : solid 0;
   margin-left : auto;
}



/* audio{ color: #ff0;	background-color: #008;	width: 250px;	height: 28px;} */

a{
   color: #fff;
}


a:link {
   color:  #fff;
   text-decoration:none;
}


.button {
   cursor : pointer;
   font-family : Arial;
   font-weight : normal;
   text-decoration : none;
   font-size : 12px; 
   white-space : nowrap;
   overflow : hidden;
   min-width : 5em;
   line-height : 23px;
   margin : 0;
   padding-left : 0.5em;
   padding-right : 0.5em;
   padding-top : 0;
   padding-bottom : 0;
   background-color : #1f1f1f;
   color : white;
   border-radius : 10px;
   display : inline-block;
   border : #fff outset 1px;
   box-shadow : 0 0 5px #000;
} 
 

.button:hover {
   cursor : pointer;
   color : pink;  /* Schrift */
   background-color : #000033;
   border : red outset 1px;
}


.button.selected {
   background-color : #000033;
} 


.button.menu {
   min-width : 5em;
   background-color : #080;
   box-shadow : 0 0 5px #0f0;
} 

.button.bassdrum {
   min-width : 5em;
   box-shadow : 0 0 5px #ff9966;
} 

/*.button.bassdrum:hover{background-color: #000a33;} */


.button.clap {
   min-width : 5em;
   box-shadow : 0 0 5px darkblue;
} 


.button.hihats {
   min-width : 5em;
   box-shadow : 0 0 5px steelblue;
} 


.button.snares {
   min-width : 5em;
   box-shadow : 0 0 5px green; 
} 


.button.bass {
   min-width : 5em;
   box-shadow : 0 0 5px #808000; /* = olive */
} 
	

.button.percussion {
   min-width : 5em;
   box-shadow : 0 0 5px #2266dd;
} 


.button.lead {
   min-width : 5em;
   box-shadow : 0 0 5px maroon;
} 


.button.misc {
   min-width : 5em;
   box-shadow : 0 0 5px #6655ff;
} 


.button.user {
   min-width : 5em;
   box-shadow : 0 0 5px red;
} 


.button.start {
   min-width : 2em;
   background-color : #080;
   box-shadow : 0 0 5px yellow;
} 


.button.effekte {
   min-width : 5em;
   box-shadow : 0 0 5px pink;
} 


.button.effekte:hover {
   background-color : #002800;
} 


.button.menu:hover {
   background-color : #0a0;
} 


.button.menu.selected {
   background-color : #0f0;
} 


div.sample {
   display : inline-block;
   margin : 5px;
} 


 .handzeiger {
   font-family : Arial;
   font-size : 12px;
   font-weight : normal;
   color : black;
   cursor : pointer;
}


.schaltflaeche {
   font-family : Arial;
   font-size : 12px;
   font-weight : normal;
   color : black;
   cursor : pointer;
} 


hr {
   border-color : indianred;
   border-style : inset;
   border-width : 1px;
   margin : 10px auto;
} 

/* ------------------------------------------ */

/* volume popup */
td.volcfarbe1 {background-color:#c6f7f7;}
td.volcfarbe2 {background-color:#c6e7f7;}
td.volcfarbe3 {background-color:#c6d7f7;}
td.volcfarbe4 {background-color:#a6d7f7;} 

/* panner popup */
td.pancfarbe1 {background-color:#d6a1f1;}
td.pancfarbe2 {background-color:#d691f1;}
td.pancfarbe3 {background-color:#d681f1;}

/* filter popup */
td.lpfiltercfarbe1 {background-color:#ffcc66;}
td.lpfiltercfarbe2 {background-color:#ffbc66;}
td.lpfiltercfarbe3 {background-color:#ffac66;}

td.hpfiltercfarbe1 {background-color:#bbcc66;}
td.hpfiltercfarbe2 {background-color:#bbbc66;}
td.hpfiltercfarbe3 {background-color:#bbac66;}


td.statusfield1 {background-color:#3f3f28; 
                             border-top-left-radius:5px;
                             border-bottom-left-radius:5px;
                             border-top-right-radius:5px;
                             border-bottom-right-radius:5px;}

/* about popup */
td.aboutfarbe1 {background-color:#eeccff;}

/* donate popup */
td.donatefarbe1 {background-color:#aaaaaa;}

/* help popup */
td.helpfarbe1 {background-color:#c6d7e7;}

td.tabhntrgrnd1 {background-color:#2f2f18;}
td.tabhntrgrnduserloops {background-color:#2f222f;}

td.contab2col1l {width:300px; background-color:#272727;border-top-left-radius:10px;}
td.contab2col1 {width:300px; background-color:#272727;}
td.contab2col1r {width:300px; background-color:#272727; border-top-right-radius:10px;}

td.contab2col2l {width:650px; background-color:#2b2b2b;border-top-left-radius:10px;border-bottom-left-radius:10px;}
td.contab2col2 {width:400px; background-color:#2b2b2b;border-top-right-radius:10px;border-bottom-right-radius:10px;}

td.contab2col2r {width:300px; background-color:#2b2b2b;border-bottom-right-radius:10px;}

td.contab2col3 {width:300px; background-color:#383838;}



td.contab3col1l {width:300px; background-color:#272727;border-top-left-radius:10px;}
td.contab3col1 {width:300px; background-color:#272727;}
td.contab3col1r {width:300px; background-color:#272727; border-top-right-radius:10px;}

td.contab3col2l {width:650px; background-color:#2b2b2b;border-top-left-radius:10px;border-bottom-left-radius:10px;}
td.contab3col2 {width:550px; background-color:#2b2b2b;border-top-right-radius:10px;border-bottom-right-radius:10px;}

td.contab3col2r {width:300px; background-color:#2b2b2b;border-bottom-right-radius:10px;}

td.contab3col3 {width:300px; background-color:#383838;}

/* Waveformmixer ------------------------------------------ */

td.grafik {width:750px; background-color:#272727;}
td.mstr_vol {width:390px; background-color:#272727;}
td.spacer1 {width:20px; background-color:#303030;}

td.slider {width:1150px; background-color:#272727;}

/* ------------------------------------------ */

.controltable1 {
   margin-left : auto;
   margin-right : auto;
   width : 1010px;
   border-spacing : 0;
   padding : 0;
}   

.controltable2 {
   margin-left : auto;
   margin-right : auto;
   width : 1000px;
   border-spacing : 0;
   padding : 0;
}   

.controltable3 {
   margin-left : auto;
   margin-right : auto;
   width : 1200px;
   border-spacing : 0;
   padding : 0;
}   


/* Waveformmixer ------------------------------------------ */

.mainwavetable {
   width:1400px;
   /* border:1px solid; */
   margin-left : auto;
   margin-right : auto;
  /*  border : dotted 1px; */
   background-color : #272727;
   /* border-collapse : collapse;  mit, werden die Zellen etwas eingerückt. Aber die Rundungen verschwinden ^^ */
   border-top-left-radius:10px;
   border-bottom-left-radius:10px;
   border-top-right-radius:10px;
   border-bottom-right-radius:10px;
}
 

.oben_tab {border:0px solid; margin-left:auto; margin-right:auto;background-color:#272727;}
.unten_tab {border:0px solid; margin-left:auto; margin-right:auto;background-color:#272727;}


/* ------------------------------------------ */


div.controlsample {
   display : inline;
   margin : 5px;
} 


.controlbutton {
   width: 70px;
   cursor : pointer;
   font-weight : normal; 
   white-space : nowrap;
   overflow : hidden;
   min-width : 4em;
   font-size : 12px;
   line-height : 16px;
   margin : 0;
   padding-left : 0.5em;
   padding-right : 0.5em;
   padding-top : 0;
   padding-bottom : 0;
   background-color : #222222;
   color : #fff;
   border-radius : 10px;
   display : inline-block;
   border : #fff outset 1px;
   box-shadow : 0 0 5px #000;
} 


.controlbutton:hover {
   width: 70px;
   cursor : pointer;
   color : pink;
   background-color : #444444;
   border : red outset 1px;
} 


.controlbutton.selected {
   background-color : #000000;
   color : pink;
} 

.controlbutton2 {
   width: 70px;
   cursor : pointer;
   font-weight : normal; 
   white-space : nowrap;
   overflow : hidden;
   min-width : 4em;
   font-size : 12px;
   line-height : 16px;
   margin : 0;
   padding-left : 0.5em;
   padding-right : 0.5em;
   padding-top : 0;
   padding-bottom : 0;
   background-color : #555555;
   color : #fff;
   border-radius : 10px;
   display : inline-block;
   border : #fff outset 1px;
   box-shadow : 0 0 5px #000;
} 


.controlbutton2:hover {
   width: 70px;
   cursor : pointer;
   color : pink;
   background-color : #333333;
   border : red outset 1px;
} 


.controlbutton2.selected {
   background-color : #555555;
   color : pink;
} 


.infobutton:hover {
   cursor : pointer;
   background-color : #333333;
   color : pink;
   border : red outset 1px;
} 


.infobutton.selected {
   background-color : #555555;
   color : pink;
} 


div.xbuttonstil {
   display : inline;
   margin : 0;
} 


.xbutton {
   cursor : pointer;
   font-family : Verdana, Arial;
   font-size : 12px;
   font-weight : bold;
   white-space : nowrap;
   overflow : hidden;
   min-width : 0.8em;
   line-height : 14px;
   margin : 0;
   padding-left : 0.5em;
   padding-right : 0.5em;
   padding-top : 0;
   padding-bottom : 0;
   background-color : #fefefe; /* vorher: white -> Validator bemaengelte gleiche Farbe zu border-top-color */
   color : black;
   border-radius : 3px;
   display : inline;
   border : white outset 1px;
   box-shadow : 0 0 2px #7f7f7f;
} 


.xbutton:hover {
   cursor : pointer;
   background-color : white;
   color : darkred;
   border : red outset 1px;
} 


/* ------------------------------------------ */


canvas {
  width: 600px;
  height: 160px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  margin-bottom: -3px;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.7), 0 3px 4px rgba(0,0,0,0.7);
}

/* ------------------------------------------ */


div.presetbutton {
   display : inline;
   margin : 5px;
} 

.presets {
   cursor : pointer;
   font-weight : normal; 
   white-space : nowrap;
   overflow : hidden;
   min-width : 4em;
   font-size : 12px;
   line-height : 16px;
   margin : 0;
   padding-left : 0.5em;
   padding-right : 0.5em;
   padding-top : 0;
   padding-bottom : 0;
   background-color : #333333;
   color : #fff;
   border-radius : 10px;
   display : inline-block;
   border : #fff outset 1px;
   box-shadow : 0 0 5px #000;
} 


.presets:hover {
   cursor : pointer;
   color : pink;
   background-color : #002222;
   border : red outset 1px;

} 


.presets:active { /* yellow font during clicking */
   color : yellow; 
} 

/* for colored preset button */

.presetcol {
   cursor : pointer;
   font-weight : normal; 
   white-space : nowrap;
   overflow : hidden;
   min-width : 4em;
   font-size : 12px;
   line-height : 16px;
   margin : 0;
   padding-left : 0.5em;
   padding-right : 0.5em;
   padding-top : 0;
   padding-bottom : 0;
   background-color : #002222;
   color : #fff;
   border-radius : 10px;
   display : inline-block;
   border : #fff outset 1px;
   box-shadow : 0 0 5px #000;
} 

.presetcol:hover {
   cursor : pointer;
   color : pink;
   background-color : #002222;
   border : red outset 1px;

} 

.presetcol:active { /* yellow font during clicking */
   color : yellow; 
} 
/* ------------------------------------------ */

/* for pop-ups */

.popupdivs {background-color:#000000; border-radius:12px; text-align:left;}
.popupspans {font-size:14px; font-family:verdana,arial; font-weight:normal; color:#c0c0c0;}

.overlay-donate {width: 25em; background: #aaaaaa; border: 1px solid #e7c150; position: fixed; top: 25%; right: 30%; opacity:0.95; margin: auto; border-radius: 0.8em .8em .8em; border: 1px solid; padding: .5em; margin: .5em; box-shadow: 3px 3px 4px #000000; font-family: Avenir, sans-serif; font-size: 14px;}
.overlay-about {width: 370px; background: #eeccff; border: 1px solid #e7c150; position: fixed; top: 25%; right: 35%; opacity:0.95; margin: auto; border-radius: 0.8em .8em .8em; border: 1px solid; padding: .5em; margin: .5em; box-shadow: 3px 3px 4px #000000; font-family: Avenir, sans-serif; font-size: 14px;}
.overlayHidden {display: none;}
#hidedonate {position: absolute; margin: 0; right: 0; top: 0; background: white; color: darkred; border: 1px solid black; font: bold 0/0 sans-serif; border-radius:5px;}
#hidedonate::before {content: "X"; font: bold 1rem sans-serif;}
#hideabout {position: absolute;	margin: 0; right: 0; top: 0; background: white; color: darkred; border: 1px solid black; font: bold 0/0 sans-serif; border-radius:5px;}
#hideabout::before {content: "X"; font: bold 1rem sans-serif;}

/* ------------------------------------------ */