.musicpage {
    max-width:80em;
    margin:auto;
}


.center {
    text-align:center;
}


.playpause {
    padding:0 !important;
}

.behindsong {
    background-color:#eaeaea;
    padding-top:.25em;
}

#songSlider {
    display:inline-block;
    margin-top:.2em;
    height:.6em !important;
    background-color:#c1c3c5 !important;
}

#trackProgress {
    height:.8em !important;
    margin-top:-.12em;
    background-color:#3cb4ec !important;
    border-right:solid 5px black;
    border-radius:3px;
}

.downloadit {
    padding:0 !important;
    margin-left:.4em;
}

.scrubber {
    float:right;
}

.artistart img {
    border:solid white 5px;
    border-radius:15em;
    box-shadow:0px 0px 5px #ccc;
}

.artistart img:hover {
    border:solid #454545 .5em;
    border-radius:15em;
    box-shadow:0px 0px 5px #909090;
}


.musicheader {
    border-bottom:solid .15em #c1c3c5;
    margin-bottom:2em;
    padding:0;
}


.playlist {
    border-top:solid .15em #c1c3c5;
    border-bottom:solid .15em #c1c3c5;
    margin-top:3em;
    padding-left:1em;
    padding-right:1em;
    margin-bottom:3em;
    padding-top:1em;
    padding-bottom:2em;
}

.albumTitle {
    margin-left:1.5em;
    font-size:1.3em;
    color:#acacac;
}


.songtitle {
    color:#787878;
}

.currentartist {
    color:#3d3d3d;
}

.tagheaders {
    margin:0;
    margin-top:3em;
}

.taggy {
    background-color:#d3d3d3;
    padding:.2em;
}


.playerbox {
    background-color:#eaeaea;
    border:solid .2em #d4d4d4;
    padding:.7em;
    border-radius:7px;
    min-height:6em;
    width: 400px;
}


.playertitleholder {
    background-color:#ffffff;
    padding:.4em;
    border-radius:5px;
    width: 55%;
    display: inline-block;
}

.playerbuttonholder {
    background-color:#e8e8e8;
    border-radius:5px;
    border: 1px solid #f8f8f8;
    text-align:center;
    width:10%;
    display: inline;
    margin: 5px;
    padding:2px 2px 5px 5px;
    

}


.AboutUsTitle {
    font-size: 24px;
}


a.current-page:link {
    background: none repeat scroll 0 0 #d4d4d4;
    border: 1px dashed #D94917;
    color: #fff;
    padding: 5px 10px;
}
a, a:visited {
    color: #333333;
    outline: 0 none;
    text-decoration: none;
    transition: color 0.1s ease-in-out 0s;
}

a.page:link, a.page:visited {
    border: 1px solid #DDDDDD;
    color: #000000;
    padding: 5px 10px;
}
a, a:visited {
    color: #333333;
    outline: 0 none;
    text-decoration: none;
    transition: color 0.1s ease-in-out 0s;
}

/* ----------  PLAYER 2  --------------   */


.post-title h1 {
    margin-left: 0px;
    padding-top: 20px;
    font-family: "museo",sans-serif;
    color: #4d4d4d !important;

    
    }

.audioplayerarea {
    text-align: center;
    margin-left: -20px;

    
    }



.playerbox2 {
  background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e2e2e2 58%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(58%,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e2e2e2 58%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e2e2e2 58%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e2e2e2 58%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e2e2e2 58%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */

    border: 1px solid #d4d4d4;
    border-radius: 7px;
    display: inline-flex;
    min-height: 45px;
    min-width: 70%;
    padding: 3px;
        display: -webkit-inline-box;

    /*display: -webkit-flex;
    display: -moz-inline-box;*/

    
    
/*    background: #e2e2e2;  Old browsers */
/*    background: -moz-linear-gradient(top,  #e2e2e2 0%, #d1d1d1 41%, #e2e2e2 100%);  FF3.6+ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(41%,#2b2b2b), color-stop(100%,#e2e2e2)); /* Chrome,Safari4+ */
 /*   background: -webkit-linear-gradient(top,  #e2e2e2 0%,#d1d1d1 41%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
 /*   background: -o-linear-gradient(top,  #e2e2e2 0%,#d1d1d1 41%,#e2e2e2 100%); /* Opera 11.10+ */
 /*   background: -ms-linear-gradient(top,  #e2e2e2 0%,#d1d1d1 41%,#e2e2e2 100%); /* IE10+ */
 /*   background: linear-gradient(to bottom,  #e2e2e2 0%,#d1d1d1 41%,#e2e2e2 100%); /* W3C */  
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

}


.listen {
    font-size: 11pt !important;
}

.playbutton2 {
    padding-left: 10px;
}


.sliderarea2 {
    padding-left: 0%;
    padding-top:4px;
}


.slider2 {
    width: 100%;
    display: inline;
}

/*
input[type="range"]{
    width: 350px;
    margin-top: -20px;
}

*/

.currenttime2 {
    font-size:9pt;
    color: #787878;
    vertical-align: 47%;
}


.totaltime2 {
    font-size:9pt;
    color: #787878;
    vertical-align: 47%;
}


.songtime2 {
    font-size:1.5em;
    color:#b0b0b0;
    text-align:right;
}





.songtime {
    font-size:1.5em;
    color:#b0b0b0;
    text-align:right;
}


.playbar {
    border-left:solid #4ba8f7 9em;
    border-right:solid silver 15em;
    color:#494949;
    background-color:#494949;
}


#slide {
    border-color:#494949;
    width:80%;
    display: inline;
        padding-top:12px;

}

.slider {
    width: 80%;
    display: inline;


}
.sliderarea {
    margin-top:-20px;
}

.currenttime {
    font-size:11pt;
    color: #787878;
    display: inline-block;
    padding-top:-12px;

}

.totaltime {
    font-size:11pt;
    color: #787878;
    margin-top:-10px;


}

  .large-1-andahalf {
    width: 6.250005%; }



#title {
/*            font-family: 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Verdana', sans-serif;*/
    font-size: 20pt;
    font-weight: 400;
    color: #2285a2;
    padding-bottom: 10px;
        }


        
.plusminusbkgrd {
margin-left: -125px;
    position: relative;

}


button.small, .button.small {
    font-size: 11pt;
    padding: 0;
    background-color: transparent;
    border-left: 1px solid #fff;
    border-radius: 5px;
    color: #787878;
    font-weight: 400;
    margin: 0;
    margin-left: 5px;
    min-height: 24px;
    width: 50px;
    line-height: 20px;
}




/*----------------------- MEDIA CLASSES ----------------------*/
     




@media only screen and (max-width: 980px)
 {
    
   
     
 }

@media only screen and (max-width: 920px)
 {
    
     input[type="range"]{
    width: 250px;
    margin-top: 10px;
}
     
 }

@media only screen and (min-width: 921px)
 {
    
     input[type="range"]{
    width: 310px;
    margin-top: 10px;
}
     
 }


@media only screen and (max-width: 800px)
 {
   input[type="range"]{
    width: 225px;
/*    margin-top: -20px;*/
}
     
 }






@media only screen and (max-width: 755px)
 {
    
     input[type="range"]{
    width: 200px;
/*    margin-top: -20px;*/
}
     
 }


@media only screen and (max-width: 700px)
 {
    
     input[type="range"]{
    width: 270px;
/*    margin-top: -20px;*/
}
     .playerbox2 {
    min-width: 100%;
}
 }



@media only screen and (max-width: 640px)
 {

    .plusminusbkgrd {
        margin-left: 0;
    top: 16px;
    }
     
button.small, .button.small {
    background-color: #ffffff;
    border: 1px solid #CFCFCF;
    border-radius: 5px;
    color: #787878;
    font-size: 11pt;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 0 5px;
    min-height: 24px;
    padding: 0;
    width: 50px;
}
     
/*
    .logoholder {
        text-align:center;
    }
    
    .homelogo {
        font-size:2.5em !important;
        text-align:center !important;
    }
    
 	.playerbuttonholder {
    background-color: #e8e8e8;
    border-radius: 5px;
    padding: 0;
    text-align: center;
}
*/
     
input[type="range"]{
    width: 410px;
}

/*
    

.artistart img {
    border:solid white 3px;
    border-radius:.1em;
    box-shadow:0px 0px 5px #ccc;
}

.artistart img:hover {
    border:solid white 3px;
    box-shadow:0px 0px 5px #ccc;
}

.blurredimage {
    padding-bottom:0;
}

.playertitleholder {
    padding-top:1em;
    padding-bottom:1em;
    font-size:1.3em;
}
*/

 }




@media only screen and (max-width: 600px)
 {
    
     input[type="range"]{
    width: 360px;
/*    margin-top: -20px;*/
}
     
 }



@media only screen and (max-width: 550px)
 {
    
     input[type="range"]{
    width: 310px;
/*    margin-top: -20px;*/
}
     
 }

 


@media only screen and (max-width: 500px)
 {
    
     input[type="range"]{
    width: 260px;
/*    margin-top: -20px;*/
}
     
 }


@media only screen and (max-width: 450px)
 {
    
     input[type="range"]{
    width: 210px;
/*    margin-top: -20px;*/
}
     
 }



@media only screen and (max-width: 400px)
 {
    
     input[type="range"]{
    width: 160px;
/*    margin-top: -20px;*/
}
     
 }




@media only screen and (max-width: 345px)
 {
    
     input[type="range"]{
    width: 135px;
/*    margin-top: -20px;*/
}
     #title {
         font-size: 20pt;
     }
     
     
 }