/* ####################################################### */
/* ############### LAYOUT LAYOUT LAYOUT ################## */
/* ####################################################### */

/* ### NORMALIZE:CSS minified ###  */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

#svgbox {position:absolute; left:-500px; top:-300; width:300px; height:300px; overflow:hidden; z-index:0} /* bei display:none und visibility:hidden funktioniert mask in geklonten svg's nicht mehr */
#svgbox svg {margin:10px; width:20px; height:20px; }
button svg {position:absolute; width:70%; height:70%;left:15%;top:15%;}

a, button, #language-button { border:0; border-radius:5px;} 
button {position:relative; outline:none}
#topnavbtns {position:absolute; width:450px; height:100%; left:calc(230px + 8%); top:0; } /*  border:1px dotted red */
#topnavbtns button { border-style:solid; width:29%;  margin:0; border-radius:0px; font-size:0.7em;   }
#topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:21%}
#topnav-cfa {display:none;}
#topnavcontent {display:none; position:fixed; padding:0 4%; width:100%; height:300px; top:50px; z-index:22}
.topnavlinkbtn { font-size:0.85em; padding:0 4px;}
/* #topnavcontent a {width:24%; height:45px; display:table-cell; vertical-align:middle; border: 5px solid transparent; font-size:0.9em} */
.topnavlinkbox {padding:10px 4% 0 4%;}

#cfbtn svg, #cabtn svg, #ccbtn svg, #cpbtn svg {width:100%; height:70%; left:0%; top:15%; }
#topnavbtns svg { width:33%; height:19px; left:2%; top:15px;}
#topnavbtns span {position:absolute; width:80%;left:20%;top:42%;height:60%}
 
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

body {position:relative}
body * {margin:0; padding:0;} 
header {position:fixed; width:100%; height:50px; z-index:100}
header .container {position:relative; width:100%; height:100%; max-width:1440px; margin:0 auto;}
main {margin:50px 0 0 0; padding:0; width:100%; }
main .container {position:relative; width:100%; max-width:1366px; margin:0 auto; padding:10px 0 0 0;}
#content {position:relative; float:left; width:66%; width:calc(89% - 300px); left:4%; padding:0; border-radius:7px;}
#addendum, #preface {position:relative; float:right; width:24%; width:300px; margin:0 3% 0 0;}

footer {min-height:140px; } 
footer .container {position:relative; width:70%; max-width:980px; margin:0 auto; padding: 15px 0px;}
nav {display:none;}

header, main, footer {min-width:600px;}

#ladeanzeige {position:relative; margin:0; width:100%; height:5px; transition: opacity 0.4s;}
#ladebalken {position:fixed; top:50px; height:5px; width:0;}
#ladetext {display:none;}
#logo { display:block; position:absolute; left:12px; top:6px; width:96px; height:50px; margin:0; padding:0;} 

#svglogo {position:absolute; width:100%; height:70%; left:0; top:12%; }

#language-button, #cssmodebtn, #lefthandbtn, #cfbtn, #cabtn, #ccbtn, #cpbtn { background:none; display:block; position:absolute; top:8px; width:40px; height:35px; text-align:center;  border-radius:3px;}
#language-button svg {width:80%; height:80%; left:10%; top:10%;}
#language-button span {color:#EED;  display:block; position:absolute; width:100%; height:50%; top:20%; left:0; font-size:0.64em; font-weight:bold; text-align:center;}

#lefthandbtn svg {width:100%; height:70%; left:0%; top:17%;}
.rh #svglefthand { transform:scaleX(-1);}
.rh #svghandL { display:none;}
.rh #svghandR { display:block;}
.lh #svglefthand { transform:scaleX(1);}
.lh #svghandL { display:block;}
.lh #svghandR { display:none;}

#loadsounds-button {background:none; position:absolute; width:40px; height:35px; top:8px; padding: 0px; border:0}
#loadsounds-button span {display:none}
/*
#cfbtn {left:12.5%}
#ccbtn {left:17.5%}
#cabtn {left:22.5%}
#language-button {right:1.5%; top:12px;}
#cssmodebtn { right:6.5%; padding:0;}
#lefthandbtn {right:11.5%;}
#loadsounds-button {right:16.5%}

#cfbtn {left:140px}
#ccbtn {left:195px}
#cabtn {left:250px}
#language-button {right:20px; top:12px;}
#cssmodebtn { right:76px; padding:0;}
#lefthandbtn {right:134px;}
#loadsounds-button {right:192px}*/

#cfbtn {left:calc(80px + 4%)}
#ccbtn {left:calc(125px + 4%)}
#cabtn {left:calc(170px + 4%)}
#cpbtn {left:calc(215px + 4%)}
#language-button {right:2%; top:12px;}
#cssmodebtn { right:calc(48px + 2%); padding:0;}
#lefthandbtn {right:calc(96px + 2%);}
#loadsounds-button {right:calc(150px + 2%);}


#soundsAlert {display:none; position:fixed; z-index:100; width:420px; height:270px; left:calc(50% - 200px); top:100px; border-radius:15px; padding:20px; font-size:0.9em; line-height:1.3em;}
.soundsYes, .soundsNo, .soundsAlways { border:0; position:absolute; z-index:11; width:116px; height:116px; bottom:20px; border-radius:9px; padding:0px; font-size:0.8em; text-align:center; line-height:1.3em}
.soundsNo, .soundsNo:hover {left:calc(19% - 58px); }
.soundsYes, .soundsYes:hover {left:calc(50% - 58px); }
.soundsAlways, .soundsAlways:hover {left:calc(81% - 58px); }
.soundsYes svg, .soundsNo svg, .soundsAlways svg { position:absolute; width:100%;height:50%;left:0;top:8%}
.soundsYes span, .soundsNo span, .soundsAlways span {position:absolute; width:100%; height:30%;left:0;top:70%} 


#nav2app {margin:8px 20px 20px 20px; text-align:center}
#pagenav {border-radius: 5px; margin:8px 0 20px 0; }
#pagenav h3 {margin:10px 5px 5px 5px; font-family: 'Handlee'; text-align:center; font-size:0.8em;}
#pagenav a { display:block; width:100%; font-size:0.85em; text-align:left; min-height:28px; padding:8px 0 8px 15px ; margin:3px 0;}


#nav2app p {text-align:center;color:#C7C5B0; font-size:0.9em; }
#nav2app h2 a {font-size:0.6em; }
#nav2app > a {position:relative; display:inline-block; width:15%; margin:3px 20px }
#nav2app img { width:100%; }

.grid12 { clear:both; width:98%; margin: 0 1%; padding:0;}

.grid3, .grid4, .grid8, .grid6 { margin: 0 1%; float:left; padding:0;}
.grid4r , .grid8r, .grid6r  { margin: 0 1%; float:right; padding:0;}
.grid6, .grid6r {  width:46%;}
.grid8, .grid8r { width:60%;}
.grid4, .grid4r { width:31%}
.grid3 {width:21%}
.left-half, .right-half { width:50%; margin:0; padding:0;}
.left-half {float:left;}
.right-half {float:right;}
.left-half p, .right-half p {padding:5px 10px;} 

footer .spalte {min-height:180px; width:31.3%; margin:5px 1%; padding:5px; float:left;}
footer .spalte h2 {font-size:1.2em; font-family: 'Varela Round'; font-weight:normal; text-indent: 10px;}
footer ul {list-style:none; margin:0; padding:0}
footer li {margin:10px; padding:0; font-size:0.82em;}
footer a.copyright {font-size:0.9em; }

/*#email { width:260px; height:160px; border:1px solid #999;}*/
/* ####################### CONTENT ####################### */ 

.antifloat { clear:both;}
p {margin: 0 0 0.8em 0; line-height:1.5em; text-align:justify}
/*
small {display:block; margin: 0 0 1.2em 0; line-height:1.6em;}
p > small {display:inline}*/
.hinweis {font-size:0.86em}
.center {text-align:center; margin:1em 0}
.versteckt {display:none}
.outside {position:absolute !important; width:800px; height:800px; left:-5000px !important; top:-5000px !important; overflow:hidden}
.outleft {left:-110% !important}

h1 {clear:both; margin:5px 1% 25px 1%;}
h3, h4, h5 {clear:both; margin:10px 1% 15px 1%;}
h2, h2 > h3, h3 > h4, h4 > h5 {clear:both; margin:20px 1% 15px 1%;}


div[class*="grid"] h1, div[class*="grid"] h2, div[class*="grid"] h3, div[class*="grid"] h4, div[class*="grid"] h5 {margin-left:0; margin-right:0;}

a:link, a:visited {text-decoration:none;} 
cite, table.cite-style { font-size:1.25em; line-height:1.4em;}
table.cite-style {margin:auto;}
table.cite-style td  {padding:2px 5px}

ul, ol {margin: 0.8em 0;}
ul {padding:0px 15px 5px 50px; list-style:square;}
ol {padding:0px 15px 5px 20px;}
li {padding:2px 0 4px 0;}
sub {font-size:1em;}
 
img {border:0; margin:0; padding:0}
.bildlinks {float:left; padding:0.3em 10px 10px 0px;}
.bildrechts {float:right; padding:0.3em 0px 10px 10px;}

.tafel { padding:10px; border-radius:7px; margin:15px 0;}
.tafel p {color:#DDC;}
.tafel p span {font-family: 'Handlee'}

.seitennavigation {margin:5px; height:60px; padding:7px 0px 20px 10px; text-align:center;}
.seiteNext-aktiv, .seiteNext-inaktiv, .seiteBack-aktiv, .seiteBack-inaktiv, .seiteNr-aktiv, .seiteNr-inaktiv {
	display:inline-block; height:42px; padding:10px 0 0 0; margin:3px; border:2px solid #FFF; border-radius:5px; 
	}
.seiteNext-aktiv, .seiteNext-inaktiv, .seiteBack-aktiv, .seiteBack-inaktiv { width:90px;}
.seiteNr-aktiv, .seiteNr-inaktiv { width:46px;}

/* ########## Videos ############# */

/* Folgendes von http://www.geiststreicher.org/2013/11/tipps-tricks-youtube-videos-in-responsive-sites-einbetten/ */
.youtube {text-align: center; margin:10px; border-radius:9px; margin:10px;}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin:10px 0;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.video-container iframe {border-radius:7px; }
/*  Ende */ 

/* ########## Chord Diagrams ######## */
.fb-box { border-radius:5px; }
/*div[id*="cd"], div[id*="chord"] { min-height:250px; margin-bottom:20px; background:#CCC; border-radius:7px;}*/
* { -webkit-tap-highlight-color:rgba(0,0,0,0);}
/* Chord Diagrams */
.chordsingle, .chordblender, .chordUpDownArrows { position:relative; border-radius:7px; margin-top:0px; margin-bottom:20px;} 
.chordsingle { height:250px;} 
.chordblender, .chordUpDownArrows { height:290px; }
/* Fretboards */
/* .chordsmall  .fb-wrapper, .chordsingle .fb-wrapper, .chordUpDownArrows .fb-wrapper, .chordblender .fb-wrapper */
.fb-wrapper {width:96%; left:3%;}
.chordsingle .fb-wrapper  {height:80%; top:19%}
.chordsmall  .fb-wrapper {height:83%; top:16%}
.chordUpDownArrows .fb-wrapper, .chordblender .fb-wrapper {height:68%; top:16%}
/* Progressions */
/* div[id*="prog"] {background:#221} */
.chordProgression { position:relative;  border-radius:7px; margin: 0 10px 10px 10px;} 
.grid6 .chordProgression, .grid6r .chordProgression,.grid12 .chordProgression { margin: 0 0 10px 0;} 
/* Progression Control Box */
.progControlBox { min-height:180px; position:relative; padding:5px;  margin:5px 0.5%; float:right;} /* width:460px; height:50px; */
div[class*="grid6"] .progControlBox {margin:5px 0px;}
/* , .chordsmall */
.chordsmall { position:relative; margin:5px 0.5%; min-width:150px; height:180px; float:left;}
.chordProgression.two .chordsmall, .chordProgression.two .progControlBox {width:49%}
.chordProgression.three .chordsmall, .chordProgression.three .progControlBox {width:32.332%}
.chordProgression.four .chordsmall, .chordProgression.four .progControlBox {width:24%}
.chordProgression.five .chordsmall, .chordProgression.five .progControlBox {width:19%}
.progControlBox.full {width:95% !important; min-height:68px; margin:0px 0.5%}
/* Buttons */ 
.spotViewBtn span {display:none}
.spotViewBtn, .cdBtnPlay, .cdBtnPlay2, .chorddiagram-btnUp, .chorddiagram-btnDown { position:absolute; height:12%; border-radius:4px; font-size:1.24em;}
.spotViewBtn:focus, .cdBtnPlay:focus, .cdBtnPlay2:focus {outline: none;} 
.multiCdBtn {margin: 0 0.5% 3px 0.5%; padding: 2px 5px; width:49%; height:45px; border-radius:5px; }
/* View Options */
.spotViewText {position:absolute; height:12%; top:6%}
.chordsingle .spotViewBtn, .chordUpDownArrows .spotViewBtn{ right:14%; width:10%; top:3%;}
.chordblender .spotViewBtn { right:10px; width:44px; top:8px;}
.chordsingle .spotViewText, .chordUpDownArrows .spotViewText { right:26%;} 
.chordblender .spotViewText { right:75px;} 
/* Play */
.cdBtnPlay, .cdBtnPlay2 {width:10%; right:2%;}
.cdBtnPlay span, .cdBtnPlay2 span {display:none}
.chordsingle .cdBtnPlay, .chordUpDownArrows .cdBtnPlay {  top:3%;}
.chordblender .cdBtnPlay { left:2%; right:auto; bottom:3%;}
.cdBtnPlay2 { right:2%; bottom:3%;}
.chordsmall .cdBtnPlay { width:28px; height:25px; right:0px; top:3px; font-size:0.9em; border:0; border-radius:2px; }
/* Label / Chord Symbol */
.chordsingle .label, .chordUpDownArrows .label, .chordblender .label, .chordblender .label2, .chordsmall .label  { height:30px; position:absolute;}  
.chordsingle .label, .chordUpDownArrows .label, .chordblender .label, .chordblender .label2  { left:10%; top:12px; font-size:1.3em;}
.chordsmall .label  { left:15%; top:3px; font-size:1.2em;}
/* Slider */

.sliderbox { position:absolute; width: 66%; height:12%; bottom:1%; left:17%;}
.slider { 
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 3px;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
}
input[type=range]::-moz-focus-outer { border:0; }
input[type=range]:focus { outline: none; }

/* Up Down */
.chorddiagram-btnDown {left:calc(50% - 85px); width:80px; bottom:5px; font-size:1em}
.chorddiagram-btnUp {left:calc(50% + 5px); width:80px; bottom:5px; font-size:1em}

.controlGroupSpot, .controlGroupKey, .controlGroupVar { position:relative; width:160px; height:50px; margin:5px 0 2px 0; float:right}
.controlGroupSpot {width:115px;}
.controlGroupVar  {width:135px;}
.controlGroupKey .btnKeyUp, .controlGroupKey .btnKeyDown, .controlGroupVar .btnVariation, .controlGroupVar .btnVariationDimmed, .controlGroupSpot .spotViewBtn { 
  border-radius:5px; position:absolute; height:40px; }

.controlGroupKey .btnKeyDown { width:38px; right:45px; }
.controlGroupKey .btnKeyUp { width:38px; right:0px; }
.controlGroupKey .keyText { width:70px; left:0px;}

.controlGroupVar .btnVariation, .controlGroupVar .btnVariationDimmed {width:80px; right:0px; font-size:1em;}
.controlGroupVar .variationText { width:60px; left:0px;}

.controlGroupSpot .spotViewBtn {width:40px; right:0px; background-size: 45%}
.controlGroupSpot .spotViewText {width:80px; left:5px;}

.controlGroupKey .keyText, .controlGroupVar .variationText, .controlGroupSpot .spotViewText {position:absolute; height:30px; top:12px; font-size:0.9em; text-align:center}

.progControlBox .btnVariationDimmed {opacity: 0.4;}


/* Staff Boards */
.staffboard { position:relative; width:100%; height:200px;border-radius:7px; margin: 0 0 10px 0; }
.staffboard .staff-wrapper { position:absolute; width:100%; height:90%; left:0; top:0}
.staffboard-btnUp, .staffboard-btnDown {  position:absolute; height:38px; width:70px; top:205px; font-size:1em; opacity:0.7; border-radius:7px; font-size:1.24em;}
.staffboard-btnUp  { left:10px; top:132px;} 
.staffboard-btnDown { left:10px; top:170px;} 
/* modalChords */
.mc-txt1, .mc-txt2 { position:absolute; width:60px; height:25px; font-size:0.72em; text-align:center}
.mc-txt1 { bottom:25px;}
.mc-txt2 { bottom:3px;}
/* CompareChords (Tafel mit Noten) */ 
.cc-btnType, .cc-btnUp, .cc-btnDown, .cc-btnPlay, .cc-labelField, .cc-txtField { font-family:'Varela Round', 'Sniglet';}
.cc-box {position:relative; width:100%; height:220px; border-radius:7px; margin: 0 0 10px 0;} 
.cc-box .staff-wrapper { position:absolute; width:40%; height:150px; left:38%; top:60px}
.cc-btnType, .cc-btnUp, .cc-btnDown, .cc-btnPlay { position:absolute;  height:35px; font-size:1.2em; border-radius:5px;}
.cc-btnType { position:absolute; left:2%; width:30%; font-size:0.98em;} 
.cc-btnDown { top:175px; left:2%; width:14%;}
.cc-btnUp { top:175px; left:18%; width:14%;}
.cc-btnPlay, .cc-btnPlay:hover { right:10px; top:10px; width:50px; background-repeat: no-repeat; background-position:center; background-size: 35%;}
.cc-btnPlay span {display:none}
.cc-txtField { position:absolute; right:5%; width:30%; height:25px; font-size:1em; text-align:right;}
.cc-labelField{ position:absolute; left:40%; top:30px; width:150px; height:50px; font-size:1.5em; text-align:center;}
/* Chord Symbol Elements */
.csRoot {display:inline-block; padding-right:2px;}
.csTriadExt {display:inline-block; font-size:0.75em;}
.csSus {display:inline-block; font-size:0.75em; position:relative; left:-0.1em}
.csType, .csExtNum, .csTensions {display:inline-block; font-size:0.7em; position:relative; top:-0.5em}
.csSlash {display:inline-block; position:relative;}
.csBass {display:inline-block; position:relative;}
/* Chord Chart  */
.chordchart {  margin:10px; padding:10px; border-radius:4px;font-size:0.9em}
.chordchart .bar { width:24.9%; height:30px;  float:left; margin:10px 0; padding-left:8px; position:relative;}
div[class*="grid"] .chordchart { margin:10px 0; padding:5px;}
div[class*="grid6"] .chordchart .bar,  div[class*="half"]  .chordchart .bar { width:50%;}
.chordchart .bar:first-child { padding-left:4px;}
.chordchart .bar:nth-last-child(2) {  padding-left:1%;}
.chordchart .beat {	width:25%; height:30px; display:inline-block; text-align:center; vertical-align:bottom; overflow:visible; white-space: nowrap;} 

/* ####################################################### */
/* ############# @ MEDIA @ MEDIA @ MEDIA ################# */
/* ####################################################### */

@media screen and (max-width:1200px) {
  #content { width:calc(89% - 160px);}
  #addendum, #preface {width:160px;}
  body { font-size:0.92em}
  #topnavbtns { width:420px; }
 /* #content, #addendum, #preface { font-size:0.92em} */
  
}
@media screen and (min-width:860px) and (max-width:950px) {
  #topnavbtns { width:40%; left:calc(220px + 8%); left:33% }
  #topnavbtns svg { width:32%; height:19px; left:34%; top:18%; ;}
  #topnavbtns span {position:absolute; width:100%;left:0;top:68%; height:20%; }
}
@media screen and (min-width:801px) and (max-width:859px) {
  /*#topnavbtns { width:300px; left:calc(192px + 10%); }*/
  #topnavbtns { width:37%; left:calc(210px + 8%); left:36% }
  #topnavbtns button { width:25%; }
  #topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:25%}
  #topnavbtns svg { width:60%; height:25px; left:20%; top:13px; stroke:#EEE; fill:#EEE}
  #topnavbtns span {display:none }
}
@media screen and (max-width:800px) {
  header {height:90px; position:relative}
  #main {margin:0px;}
  #cfbtn, #cabtn, #ccbtn, #cpbtn {  top:49px; width:40px; height:35px;}
  #cfbtn {left:2%}
  #ccbtn {left:9%}
  #cabtn {left:16%}
  #cpbtn {left:23%}
  #topnavbtns { width:70%; height:35px; left:30%; top:53px; }
  #topnavbtns svg { top:5px; }
  #topnavbtns span {top:38%;}
  .blue #topnavbtns {height:35px; top:50px;}
  #topnavcontent {position:absolute;top:90px;height:420px;padding:0 1%;}
}
@media screen and (max-width:600px) {
  #cfbtn, #cabtn, #ccbtn, #cpbtn {  top:8px }
  #cfbtn {left:calc(90px + 4%)}
  #ccbtn {left:calc(135px + 4%)}
  #cabtn {left:calc(180px + 4%)}
  #cpbtn {left:calc(225px + 4%)}
  #topnavbtns { width:100%; left:0;}
  #topnavbtns button { width:25%; }
  #topnavbtns button:nth-child(1), #topnavbtns button:nth-child(4) {width:25%}
}



@media screen and (max-width:900px) {
  #content, #addendum, #preface  {clear:both; float:none; width:94%; left:0; margin:0 0 0 3%; border-radius:0px;}
  .chordsingle { height:230px;} 
  .chordblender, .chordUpDownArrows { height:270px; }
  .staffboard {height:170px;}
}
@media screen and (max-width:800px) {
.chordchart { font-size:0.7em; margin:8px; padding:8px;}
.beat {padding-top:5px}
}
@media screen and (max-width:619px) {
.grid12, .grid6, .grid6r, .grid4, .grid4r, .grid8, .grid8r {  width:98%; margin:0 auto; float:none;}
/*h1, h2, h3, h4, h5 {clear:both; margin:15px 1% 15px 5%;}*/
.left-half, .right-half { width:100%; float:none;}
ul {padding:0px 15px 5px 20px;}
footer .container {width:94%; margin:5px auto;}
footer .spalte1, footer .spalte2, footer .spalte3 {width:100%;  float:none; margin:5px 0;} 
}
@media screen and (max-width:600px) {
#menu-button {right:65px;}
.soundsAlert {width:300px; height:320px; left:calc(50% - 150px); top:80px; border-radius:5px; box-shadow:none;}
.chordchart { font-size:0.5em; font-weight:bold; margin:10px 3px; padding:5px;}
.chordProgression {margin: 10px 3px}
.beat {padding-top:5px}
}
@media screen and (max-width:380px) {
main .container { width:100%;}

.staffboard { height:160px;}
}


/* ##### GOOGLE ADSENSE etc... #####  */
.adcontainer {position:relative; padding:0; text-align:center;}
#adpagetop {margin:10px 0 15px 0; display:none; }
#adprefacetop {margin:0 0 15px 0; }
#adcontenttop {margin:0 0 15px 0; display:none;}
#adaddendum {margin:15px 0 5px 0;  } /* transition: top 3s; */
#adaddendum160 {margin:0 0 5px 0; display:none; } /* transition: top 3s; */
 

@media screen and (min-width:901px) and (max-width:1200px) {
  #adprefacetop, #adaddendum {display:none;}
  #adaddendum160 {display:block}
} 

@media screen and (max-width:900px) {
  #adprefacetop { display:none; }
  #adcontenttop { display:block; }
}



#mydevice {display:none; position:fixed; width:90px; height:55px; background:#C31; opacity:0.9; right:50px; bottom:50px; font-size:0.75em; color:#FFF; padding:5px; border-radius:5px;}