body {
    margin: 0 auto;
    background-color: #667d98;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    overflow-y:scroll;
 }

 /* Header oben */
 #header {
     position: absolute;
     top: 0;
     left: 130px;
     height: 175px;
     background-color: #667d98;
     color: white;
     padding: 0px;
     box-sizing: border-box;
     overflow: hidden;
     
 }     

 /* Footer unten */
 #footer {
     position: absolute;
     bottom: 0px;
     left: 0px;

     height: 60px;
     width: 100%;
     background-color: #333;
     color: white;
     padding: 2px 15px 0px 15px;
     box-sizing: border-box;
     text-align: left;
     z-index: 4000;
 }

 /* Linke Navigation */
 #nav {
     position: absolute;
     top: 120px;
     /* unter dem Header */
     bottom: 60px;
     /* über dem Footer */
     left: 0;
     width: 120px;
    
     background-color: #ffffff;
     padding: 0px;
     box-sizing: border-box;
     overflow-y: auto;
     scrollbar-width: none;
 }

 #playlist-header {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color:#dddddd;
    color:#000000;
    padding: 0px;
    position:fixed;
    
    padding: 5px 0px 5px 0px;
    z-index:6000;
    box-sizing: border-box;
    width:120px;
}

#showplaylist {
    height: 100%;
    overflow-y: auto;
    padding: 0px;
    box-sizing: border-box;
    scrollbar-width: block;
    background-color: transparent;
    margin-top: 40px;
    box-sizing: border-box;
}

#logo {
    left:0px;top:0px;
     position: absolute;
     box-sizing: border-box;
     width: 120px;
     height: 120px;
     background-color: #ffffff;
    overflow:hidden;

}



 /* Mittlerer Inhalt */
 #content {
     position: absolute;
     top: 180px;
     bottom: 60px;
     left: 130px;
     width: 100%;
     background-color: #667d98;
     padding: 0px;
     box-sizing: border-box;
     overflow-y: scroll;
     /*overflow-x: hidden;*/
 }

 /* Rechte Info-Spalte 
 #info {
     position: absolute;
     top: 120px;
     bottom: 60px;
     right: 0;
     width: 150px;
     background-color: #7a6f6f;
     padding: 20px;
     box-sizing: border-box;
     overflow-y: auto;
     z-index: 3000;
 }
*/
 .artist {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 120px;
     height: 100px;
     background: #ded7d7;
     margin-left: 5px;
 }

 .artistaktuell {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 150px;
     height: 150px;
     background: #ded7d7;
     margin-right: 5px;
 }

 .playlist {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     width: 100%;
     height: 140px;
     background: transparent   ;
     margin-left: 0px;
 }

 .picartist {
     position: relative;
     top: 1px;
     margin: 0 auto;
     box-sizing: border-box;
    
     width: 100%;
     height: 140px;
     background: transparent;

 }

 .picartistaktuell {
     position: relative;
     top: 0px;
     margin: 0 auto;
     box-sizing: border-box;
     width: 100%;
     background: transparent;
    margin-right:5px;
    overflow:hidden;
 }
 .textartist {
     position: absolute;
     font-size: 12px;
     left: 0px;
     bottom: 0px;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 100%;
     min-height: 20px;
     background: #ffffff;
     color: #000000;
     text-align: center;
    padding-top:3px;
 }
.textartistaktuell {
     position: absolute;
     font-size: 14px;
     font-weight:bold;
     left: 0px;
     bottom: 0px;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 100%;
     min-height: 22px;
     background: #ffffff;
     color: #000000;
     text-align: center; 
     padding-top:3px
 }

.textartist:hover {
     position: absolute;
     font-size: 12px;
     left: 0px;
     bottom: 0px;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 100%;
     min-height: 22px;
     background: #000000;
     color: #aaaaaa;
     text-align: center;
    padding-top:3px
 }

 .playbutton {
     box-sizing: border-box;
     float: left;
     width: 120px;
     background: transparent;
     align-items: center;
     margin-right: 5px;
     margin-bottom: 5px;
     overflow: hidden;
     border-radius:5px;
 }

 .songtitle {
     box-sizing: border-box;
     text-align: center;
     width: 100%;
     background: #eeeeee;
     align-items: center;
     font-size:12px;
     height:20px;
     padding-top: 3px;
 }

 #naviheader {
     position: absolute;
     top: 500px;
     left: 10px;
     width: 100%;
 }

 .songbereich {
     position: absolute;
     top: 10px;
     right: 40px;
     border: 0px solid #dddddd;
     width: 400px;
     height: 80px;
     box-sizing: border-box;
     padding: 10px;
     font-size: 20px;
     text-align: left;
     background:#667d98;
 }

 #links {position:absolute;left:0;width:120px;height:80px;text-align:right;}
 #rechts {position:absolute;left:130px; width:200px;}


 .cdbereich {
     position: relative;
     left: 0px;
     top: 0px;
     bottom: 0px;
     border-top: 2px solid #dddddd;
     border-bottom: 2px solid #dddddd;
     width: 90%;
     height:550px;
     box-sizing: border-box;
     padding-top: 10px;
     padding-bottom:10px;
     overflow-y: scroll;
     
     scrollbar-width: block;
     scrollbar-base-color:#ffffff;
     scroll-behavior: auto;
     /*background-image: url("/assets/images/background/Digitalfabrikanten.jpg");*/
     background-size: cover;
     background-position: center;
     background:transparent;
 }

 .now {
    
    position: absolute;
     top: 20px;
     right: 40px;
 }

 .download-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#songdownload {
    position: absolute;
     top: 5px;
     right: 5px;
     z-index: 5000;
     width:50px;
}
#copyright {float:right;width:180px;padding:5px;right:200px}
.trackpicture {width:120px; height:120px; border-radius:5px;}
.artistpicture {width:150px; height:150px;}
.playlistpicture {width:120px; height:120px;}




/* -------------------------------------------------------------------------------- */
/* mobil */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 420px)  {
    body {
    margin: 0 auto;
    background-color: #000000;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    color:#dddddd;
 }
/* Header oben */
 #header {
     position: absolute;
     top: 0;
     left: 0px;
     width:100%;
     height: 120px;
     background-color: #000000;
     color: white;
     padding: 0px;
     box-sizing: border-box;
     overflow: hidden;
     border-bottom: 2px solid #ffffff;
 }     

/* Mittlerer Inhalt */
 #content {
     position: absolute;
     top: 200px;
     bottom: 60px;
     left: 130px;
     width: 100%;
     background-color: #667d98;
     padding: 0px;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
 }

 /* Linke Navigation */
 #nav {
     position: absolute;
     top: 200px;
     /* unter dem Header */
     bottom: 60px;
     /* �ber dem Footer */
     left: 0;
     width: 120px;
     background-color: rgba(255,255,255,0.5);
     padding: 0px;
     box-sizing: border-box;
     overflow-y: none;
     scrollbar-width: 0px;
 }

 /* Footer unten */
 #footer {
     position: absolute;
     bottom: 0px;
     left: 0px;
     height: 60px;
     width: 100%;
     background-color: #333;
     color: white;
     padding: 2px 15px 0px 2px;
     box-sizing: border-box;
     text-align: left;
     z-index: 4000;
 }

 #showplaylist {
    height: 100%;
    overflow-y: auto;
    padding: 0px;
    box-sizing: border-box;
    scrollbar-width: none;
    background-color: #000000;
    margin-top: 40px;
    box-sizing: border-box;
}

#copyright {float:right;width:110px;padding:5px;right:160px}

 .cdbereich {
     position: relative;
     left: 0px;
     top: 0px;
     bottom: 0px;
     border: 0px solid #dddddd;
     width: 290px;
     box-sizing: border-box;
     padding: 0px;
     overflow: scroll;
     scrollbar-width: none;
     
     /*background-image: url("/assets/images/background/Digitalfabrikanten.jpg");*/
     background-size: cover;
     background-position: center;
     background:#000000;
 }

  .songbereich {
     position: absolute;
     top: 122px;
     left: 10px;
     border: 0px solid #dddddd;
     width: 100%;
     height: 80px;
     box-sizing: border-box;
     padding: 0px;
     font-size: 20px;
     text-align: left;
 }

 .playlist {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;

     width: 100%;
     height: 140px;
     background: transparent   ;
     margin-left: 0px;
 }

 .picartist {
     position: relative;
     top: 1px;
     margin: 0 auto;
     box-sizing: border-box;
    
     width: 100%;
     height: 140px;
     background: transparent;

 }

 .textartist {
  position: absolute;
  font-size: 16px;
  left: 0px;
  bottom: 0px;
  margin: 0 auto;
  box-sizing: border-box;
  float: left;
  width: 100%;
  min-height: 15px;
  background: #ffffff;
  color: #000000;
  text-align: center;
  box-sizing: border-box;
 }

 .textartistaktuell {
     position: absolute;
     font-size: 12px;
     left: 0px;
     bottom: 0px;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 100%;
     min-height: 15px;
     background: #ffffff;
     color: #000000;
     text-align: center; 
 }


.songtitle {box-sizing: border-box;
     text-align: center;
     width: 100%;
     background: #eeeeee;
     align-items: center;
     font-size:10px;color:#000000;}


 .picartist.img {width:100%;}

.artist {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 120px;
     height: 100px;
     background: #ded7d7;
     margin-left: 5px;
 }

 .artistaktuell {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 120px;
     height: 120px;
     background: #ded7d7;
     margin-right: 5px;
 }


}







/* -------------------------------------------------------------------------------- */
/* mobil iphone hans */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 391px)  {
    body {
    margin: 0 auto;
    background-color: #001100;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    color:#dddddd;
 }
/* Header oben */
.trackpicture {width:120px; height:120px;}
 #header {
     position: absolute;
     top: 0;
     left: 0px;
     width:100%;
     height: 120px;
     background-color: #002200;
     color: white;
     padding: 0px;
     box-sizing: border-box;
     overflow: hidden;
 }     

/* Mittlerer Inhalt */
 #content {
     position: absolute;
     top: 200px;
     bottom: 60px;
     left: 130px;
     width: 100%;
     background-color: #667d98;
     padding: 0px;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
 }

 /* Linke Navigation */
 #nav {
     position: absolute;
     top: 200px;
     /* unter dem Header */
     bottom: 60px;
     /* �ber dem Footer */
     left: 0;
     width: 120px;
     background-color: rgba(255,255,255,0.5);
     padding: 0px;
     box-sizing: border-box;
     overflow-y: auto;
     scrollbar-width: block;
 }

 /* Footer unten */
 #footer {
     position: absolute;
     bottom: 0px;
     left: 0px;
     height: 60px;
     width: 100%;
     background-color: #333;
     color: white;
     padding: 2px 15px 0px 2px;
     box-sizing: border-box;
     text-align: left;
     z-index: 4000;
 }

 #showplaylist {
    height: 100%;
    overflow-y: auto;
    padding: 0px;
    box-sizing: border-box;
    scrollbar-width: none;
    background-color: #000000;
    margin-top: 40px;
    box-sizing: border-box;
}

#copyright {float:right;width:110px;padding:5px;right:160px}

 .cdbereich {
     position: relative;
     left: 0px;
     top: 0px;
     bottom: 0px;
     border: 0px solid #dddddd;
     width: 290px;
     box-sizing: border-box;
     padding: 0px;
     overflow: scroll;
     scrollbar-width: none;
     
     /*background-image: url("/assets/images/background/Digitalfabrikanten.jpg");*/
     background-size: cover;
     background-position: center;
     background:#000000;
 }

  .songbereich {
     position: absolute;
     top: 122px;
     left: 10px;
     border: 0px solid #dddddd;
     width: 100%;
     height: 80px;
     box-sizing: border-box;
     padding: 0px;
     font-size: 20px;
     text-align: left;
 }

 .playlist {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;

     width: 100%;
     height: 140px;
     background: transparent   ;
     margin-left: 0px;
 }

 .picartist {
     position: relative;
     top: 1px;
     margin: 0 auto;
     box-sizing: border-box;
    
     width: 120px;
     height: 140px;
     background: transparent;

 }

 .textartist {
  position: absolute;
  font-size: 16px;
  left: 0px;
  top: 100px;
  margin: 0 auto;
  box-sizing: border-box;
  float: left;
  width: 120px;
  min-height: 15px;
  background: #ffffff;
  color: #000000;
  text-align: center;
  box-sizing: border-box;
 }

 
.songtitle {color:#000000;}

 .picartist.img {width:120px;}

 .artist {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 120px;
     height: 100px;
     background: #ded7d7;
     margin-left: 5px;
 }

 .artistaktuell {
     position: relative;
     margin: 0 auto;
     box-sizing: border-box;
     float: left;
     width: 120px;
     height: 120px;
     background: #ded7d7;
     margin-right: 5px;
 }

}