body {
    background: url('/playlists/images/backgrounds/1632.png');
    width:100%;
    margin:0;
    padding:0;

}

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

@font-face {
    font-family: 'chalk';
    src: url('/fonts/chalk.ttf');
    src: url('/fonts/chalk.eot?#iefix') format('embedded-opentype'), url('/fonts/chalk.woff') format('woff'), url('/fonts/chalk.ttf') format('truetype'), url('/fonts/chalk.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'chick';
    src: url('/fonts/chick.ttf');
    src: url('/fonts/chick.eot?#iefix') format('embedded-opentype'), url('/fonts/chick.woff') format('woff'), url('/fonts/chick.woff2') format('woff2'),  url('/fonts/chick.ttf') format('truetype'), url('/fonts/chick.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

#pagewrapper {
    position:relative;
    z-index:0;
    padding-top: 136px;
    max-width:1254px;
    margin:0 auto;
}

a, a img {
    text-decoration:none;
    border:none;
}

img { max-width: 100%; }

#headerbar {
    height:80px;
    background: #2d395f;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;

}

#header {
    margin: 0 auto;
    max-width: 1000px;
    height: 100%;
}



#title {
    font-family: 'Lobster', cursive;
    color:#ffffff;
    font-size:50px;
    width:70%;
    text-align:left;
    float:left;
}

#title img, .button img {
    width:30px;
}



.blog img {
    width:86px;
    margin-top:-9px;
}

#buttonsholder {
    float:right;
    margin: 20px 0;

}

.button {
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
      -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    border-radius:50%;
      -webkit-border-radius:50%;
      -moz-border-radius:50%;
}

.blog-link, .blog-link2 {
   box-shadow:none;
   border-radius: 0;
      -webkit-border-radius:0;
      -moz-border-radius:0;
}

.blog-link-2 {
   display:none;
}

#panel {
    background: #ffffff url('/playlists/images/backgrounds/collage.png');
    background-size:100%;
    width:940px;
    min-height:640px;
    margin:0 auto 48px;
    position:relative;
    border-radius:50px;
      -webkit-border-radius:50px;
      -moz-border-radius:50px;
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
      -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
   padding:30px 0 20px 0;

}



.playlistholder {
    background: url('/playlists/images/backgrounds/whitebg.png');
    width:100%;
    min-height:150px;
    border-top:solid 1px gray;
    border-bottom:solid 1px gray;
    clear:both;
    box-shadow: 0px 5px 3px rgba(50, 50, 50, 0.4), 0px -5px 3px rgba(50, 50, 50, 0.4);
        -webkit-box-shadow: 0px 5px 3px rgba(50, 50, 50, 0.4), 0px -5px 3px rgba(50, 50, 50, 0.4);
        -moz-box-shadow: 0px 5px 3px rgba(50, 50, 50, 0.4), 0px -5px 3px rgba(50, 50, 50, 0.4);
    margin-top:16px;
    margin-bottom:32px;
    display:inline-block;

}

.playerlinks {
    width:90%;
    min-height:120px;
    margin:10px auto 0;
}

ul {
   list-style:none;
   padding:0;
}

.playerlinks li { 
    float:left;
    margin: 0 10px 10px 10px;
    position:relative;
    width:120px;

}

.playerlinks span {
    margin-left:-100%;
    width:100%;
    height:120px;
}




.eighttracks span:after {
    background:url('/playlists/images/overlays/8tracksoverlay.png') no-repeat;

}




.mixcloud span:after {
    background:url('/playlists/images/overlays/mixcloudoverlay.png') no-repeat;

}

.minilogs span:after {
    background:url('/playlists/images/overlays/minilogsoverlay.png') no-repeat;

}

.eighttracks span:after, .mixcloud span:after, .minilogs span:after {
    content:'';
    width:inherit;
    height:inherit;
    display:inline-block;
    -o-background-size:cover;
    background-size:cover;

}


.playlistholder li:hover img {
    -o-border-radius:120px;
    border-radius:120px;
      -webkit-border-radius:120px;
      -moz-border-radius:120px;
   }

.playlistholder li img {
    border-radius:15px;
      -webkit-border-radius:15px;
      -moz-border-radius:15px;
  }

.playlistholder a {
    height:100%;
    width:100%;
    display:inline-block;
}


li a:after {
    content: attr(data-title);
    position: absolute;
    left: 0;
text-align: center;
    background: #000000;
    padding: 5px 10px;
    color: #ffffff;
    border-radius:10px;
      -webkit-border-radius: 10px;
      -moz-border-radius   : 10px;
    opacity:0;
    max-width:120px;
filter: alpha(opacity=0);
     transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -moz-transition   : all 0.4s ease;
    font-family: 'Bitter', serif;
    font-size:15px;
    min-width: 70%;
    margin-bottom: -5px;
}

.playlistholder a:hover:after {
    bottom: 100%;
    opacity:1;
    z-index:1000;
  }

li.new a:hover:after, li.featured a:hover:after, li.christmas a:hover:after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    text-align: center;
    padding: 5px 15px;
    color: #ffffff;
    border-radius:10px;
      -webkit-border-radius: 10px;
      -moz-border-radius   : 10px;
    opacity: 1;
    transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      -moz-transition   : all 0.4s ease;
    font-family: 'Bitter', serif;
    font-size:15px;
    font-weight:400;
    min-width: 70%;
    height:auto;
    margin-bottom: -5px;
    margin-left:0;
    
  
}

li.new a:hover:after, li.featured a:hover:after {
   background: #000000;
}

li.christmas a:hover:after {
   background: green;
}
   
li.new a:after, li.featured a:after  {
    
    opacity:1;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 700;
    color: #ffffff;  
    background: #556da0;
    font-size:17px;
    min-width:0;


}

li.new a:after  {
    content: "New";
    left: -15px;
}

li.featured a:after {
    content: "Featured";
    left: -20px;
    
}


.playerlinks li:nth-child(6) {
    clear:both;
  }

#footer{
    background:#2D395F;
    min-height:130px;
    width:75%;
    margin: 60px 0 50px 12%;
    box-shadow: 5px 3px 3px 0px rgba(50, 50, 50, 0.75);
        -webkit-box-shadow: 5px 3px 3px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow: 5px 3px 3px 0px rgba(50, 50, 50, 0.75);
    border-radius:15px;
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
}

#help {
    min-height:120px;
    display:inline-block;
    border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
    padding:5px;
    float:left;
    color:#ffffff;
    border:1px solid white;
    font-family: 'Bitter', serif;
    font-size: 14px;
    line-height:140%;


   }

#help img {
    margin:6px;
    float:right;
    opacity:.3;
    width:60px;
}

#help .bold {
    font-weight:700;
    font-size:15px;

    }


#help ul {
    width:95%; 
    margin: 14px auto;
}

#help ul li {
padding-bottom: 10px;
}


#help a, #credits a {
    color:#D8ECF3;
    text-decoration:none;
    opacity:.6;
}

#help p {
    clear:both;
}




#credits {
    text-align:center;
    padding:7px;
    color:#ffffff;
    font-size:14px;
    font-family: 'Bitter', serif;


   }

#credits h4 {
    margin:0 auto 5px;
    padding:0;
    font-size:16px;
    opacity: .8;
    
}


.flower {
  font-family:'chick'; font-size:25px;
  font-weight:bold;
  }




/* ---  Sliding tab   ---- */

.slidetab {
    position:absolute;
    top:340px;
    right:10%;
    width:122px;
    height:250px;
    transition: all 1s;
    -webkit-transition: all 1s;
    z-index:-20;

}

.showicons { 
    right: 3.5%;
    transition: all 1s;
      -webkit-transition: all 1s;
}

#iconsholder {
    float:left;
    width:auto;
    background: #ffffff url('/playlists/images/backgrounds/collage.png');

    padding:40px 5px;
    border:1px solid #BF1616;
    border-radius:0 0 15px; 
     -webkit-border-radius:0 0 15px; 
      -moz-border-radius:0 0 15px;
    background-size: 100%;

}

#iconsholder2 {
    float:left;
    width:auto;
    padding:1px;
    display:none;
    

}

.icon {
   margin-bottom:10px;

}


.icon img{
    width:80px;
    height:80px;
    border-radius:50%;
      -webkit-border-radius:50%;
      -moz-border-radius:50%;
    box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.9);

}

img.eighttracks-logo {
    background:#005c8f;
    }


img.mixcloud-logo {
    background:#ffffff;
    }

img.minilogs-logo {
    background:#f9a61a;
    }


.slidetab .tab {
    cursor:pointer;
    float:right;
    width:30px;
    height:80px;
    background:#356AA0;
    text-align: center;
    line-height: 30px;
    border-top-right-radius: 15px;
    border-bottom-right-radius:15px;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    font-size:25px;
    color: white;
box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
      -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
}

.extratext {
    display:none;
}

/* ----------- Qtip ---------- */

.tooltiptext a { 
    color:#454545;
    text-decoration:none;
    border-bottom:1px dashed #454545;
}

.tooltiptext, #help  { 
display:none;
}

.q-icons {
   display:none;
}



/* ----------- Special playlists ---------- */

li.christmas a:after  {
    
    opacity:1;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 700;
    font-size:17px;
    min-width:0;
    background: url('/playlists/images/backgrounds/holly.png') no-repeat left top; 
   content:'';
    width:30px;
    height:30px;
    display:inline-block;
    -o-background-size:cover;
    background-size:cover;
margin-left: -16px;
margin-top: -5px;
}


/* ----------- Playlist pages ---------- */

.player-8tracks {
    width:100%;
    height:100%;
}



/* ----------- Break points ----------- */
/* Temp Xmas */
@media screen and (max-width: 21.875em) {
body {background-size: 20%;}
li.christmas a:after {margin-top: 2px;}
#headerbar {height:65px; min-width:320px; position:fixed;}
#header {margin:0 8%;}
#header img {width:15px;}
#title {font-size:25px; float:none; width:100%; } 
#buttonsholder {margin:10px 0;}
.slidetab {display:none;}
.q-icons {display:block;}
.icon {margin-bottom:0; margin-left:5px; float:left;}
.icon img {width:50px; height:50px}
#pagewrapper {padding-top:75px;min-width: 310px;margin-top: 5px;}
#panel {width:85%; margin:0 auto; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; padding-top:3px;}
.playerlinks {margin:10px 5%;}
.playerlinks li {width:29%; margin:0 2%; min-width:65px;}
.playerlinks li:nth-child(3) {clear:both;}
.playerlinks li:nth-child(6) {clear:none;}
.eighttracks span:after, .mixcloud span:after, .minilogs span:after {margin-bottom:2%;  height:85px;}
li a:after {padding:5px 7px; font-size:12px;}
li.new a:after, li.featured a:after {font-size:15px; line-height:80%; margin-left:5%;}
li.new a:hover:after, li.featured a:hover:after, li.christmas a:hover:after {font-size:12px; line-height:100%; }
li.christmas a:after {margin-left: -12px;}
#credits {font-size: 11px; line-height: 140%;}
#credits h4 {font-size:13px;}
.extratext {display:inline;}
#footer {margin:30px auto 20px; width:85%}
#help {font-size:11px;}
#help .bold {font-size:13px;}
#help img {margin: 4px;width: 40px;}
.blog-link {display:none;}
.blog-link-2 {display:block;}
#header .blog img {width:35px; margin-top:-6px}
}

@media screen and (min-width:21.876em) and (max-width: 26.56em) {
/*Temp Xmas*/
body {background-size: 20%;}
/*----*/
#headerbar {height:65px; min-width:320px; position:fixed;}
#header {margin:0 8%;}
#header img {width:15px;}
#title {font-size:25px; float:none; width:100%; } 
#buttonsholder {margin:10px 0;}
.slidetab {display:none;}
.q-icons {display:block;}
.icon {margin-bottom:0; margin-left:5px; float:left;}
.icon img {width:50px; height:50px}
#pagewrapper {padding-top:75px;min-width: 310px;margin-top: 5px;}
#panel {width:85%; margin:0 auto; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; padding-top:3px;}
.playerlinks {margin:10px 5%;}
.playerlinks li {width:29%; margin:0 2%; min-width:65px;}
.playerlinks li:nth-child(3) {clear:both;}
.playerlinks li:nth-child(6) {clear:none;}
.eighttracks span:after, .mixcloud span:after, .minilogs span:after {margin-bottom:2%;  height:85px;}
li a:after {padding:5px 7px; font-size:12px;}
li.new a:after, li.featured a:after {font-size:15px; line-height:80%; margin-left:5%;}
li.new a:hover:after, li.featured a:hover:after, li.christmas a:hover:after {font-size:12px; line-height:100%; }
li.christmas a:after {margin-left: -12px;}
#credits {font-size: 11px; line-height: 140%;}
#credits h4 {font-size:13px;}
.extratext {display:inline;}
#footer {margin:30px auto 20px; width:85%}
#help {font-size:11px;}
#help .bold {font-size:13px;}
#help img {margin: 4px;width: 40px;}
.blog-link {display:none;}
.blog-link-2 {display:block;}
#header .blog img {width:35px; margin-top:-6px}
}

@media screen and (min-width:26.57em) and (max-width: 37.49em) {
/*Temp Xmas*/
body {background-size: 30%;}
/*----*/
#headerbar {height:65px; min-width:426px; position:fixed;}
#header {max-width:410px;margin-top: 10px;height:90%}
#title {font-size:24px;width:auto;} 
#title img {width:15px;}
#buttonsholder {margin:10px 0;}
.button {margin: 0 5px 5px 0;}
.button img {width:17px;}
.slidetab {display:none;}
.q-icons {display:block;}
.icon {margin-bottom:0; margin-left:5px; float:left;}
.icon img {width:60px; height:60px}
#pagewrapper {padding-top:75px;min-width: 426px;margin-top: 5px;}
#panel {width:85%; max-width:450px; margin:0 auto; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; padding-top:10px;}
.playerlinks {margin:10px 5%;}
.playerlinks li {width:29%; max-width:120px; margin:0 2%; min-width:65px;}
.playerlinks li:nth-child(3) {clear:both;}
.playerlinks li:nth-child(6) {clear:none;}
.eighttracks span::after, .mixcloud span::after, .minilogs span::after {margin-bottom:4%;height: 100px;background-size: 94%;}
li a:after {padding:5px 7px; font-size:12px;margin-bottom:-15px;}
li.new a:after, li.featured a:after {font-size:15px; line-height:80%; margin-left:5%;}
li.new a:hover:after, li.featured a:hover:after, li.christmas a:hover:after {font-size:12px; line-height:100%; margin-bottom:-15px; }
li.christmas a:after {margin-left: -12px;}
#credits {font-size: 11px; line-height: 140%;}
#credits h4 {font-size:13px;}
.extratext {display:inline;}
#footer {margin:30px auto 20px; width:85%}
#help {font-size:12px;}
#help .bold {font-size:13px;}
#help img {margin: 4px;width: 40px;}
.blog-link {display:none;}
.blog-link-2 {display:block;margin-right:3px;}
.blog img {width:40px;margin-top:-6px}


}




@media screen and (min-width: 37.50em) and (max-width: 49.99em) {

#header {max-width: 560px;}
#title {font-size:34px;margin-top:10px;width: auto;}
#title img {width:20px;}
.button {margin-right:7px;}
.button img {width: 25px;}
.blog img {width:56px;}
#pagewrapper {width:600px;}
#panel {width: 448px;}
.playerlinks {width: 91.5%; }
.playerlinks li:nth-child(6) { clear:none;}
.playerlinks li:nth-child(3) { clear:both;}
.playerlinks li {margin: 0 8px 8px 8px;}
.showicons { right: 0 !important; }
.slidetab {right: 55px; width: 92px;}
.slidetab .tab {font-size:20px;width:20px;height:60px;}
#iconsholder {padding:15px 2px 15px 14px;}
.icon img {width:54px;height:54px;}


}

@media only screen and (min-width: 50em) and (max-width: 63.99em) {
#header {max-width: 700px;}
#title {font-size:38px;margin:10px;width:auto}
#title img {width:25px;}
#pagewrapper {width:800px;}
#panel {width: 620px;}
.playerlinks li:nth-child(6) { clear:none;}
.playerlinks li:nth-child(4) { clear:both;}
.playerlinks {width: 91%; }
.showicons { right: 0 !important; }
.slidetab {right: 69px; width: 92px;}
.slidetab .tab {font-size:20px;width:20px;height:70px;}
#iconsholder {padding:20px 5px;}
.icon img {width:60px;height:60px;}
.blog img {width:66px;}


}






@media screen and (min-width: 64em) and (max-width: 78.37em){
#header {max-width: 900px;}
#pagewrapper {width:1024px;}
#panel {width: 779px;}
.playerlinks li:nth-child(6) { clear:none;}
.playerlinks li:nth-child(5) { clear:both;}
.showicons { right: 0 !important; }
.slidetab {right: 9.2%;}


}