html{
  height: 100%;
}

html { 
  margin:0;
  padding:0;
  bottom:  0;
  background: url(images/album2026.png) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  font-family: 'Lato', sans-serif;
}

#newmusic {
    position:  absolute;
    display:  block;
    width:  100%;
    margin:  20% auto;
    text-align:  center;
    color:  #ffffff;
    z-index:  6;
}


/*** HEADER ***/

header {
    padding: 0 20px 10px 20px;
    height: 44px;
    z-index: 2;
    position: fixed;
    margin-top:  -20px;
    width:  100%;
}

header h1 {
    font-weight:  normal;
    color:  #fff;
    font-family: 'Lato', sans-serif;
    text-transform : uppercase;
    padding-left:  10px;
    font-size: 200%;
    margin-top:  14px;
    display:  block;
    float:  left;
}

.bold {
    font-weight: 700; 
}

/*** MENU ***/

.menu {
    float:  right;
    padding: 20px 40px;
}

.menu a {
    text-decoration:  none;
    font-weight:  normal;
    color:  #fff;
    text-transform : uppercase;
    font-size:  140%;
    padding: 6px;
    margin-right: 16px;
    border:  solid 1px rgba(0, 0, 0, 0);
}

.menu a:hover {
    border:  solid 1px #fff;
}

.menu .active, .active {
    font-weight: 700; 
}

/*** CONTENT ***/

.space {
    padding-top:  100px;
}

.player {
    width: 300px;
    left:  20px;
    top:  0;
    height:  100%;
    position:  fixed;
    padding:  0 20px 0 20px;
    background:  rgba(36, 21, 37, 0.5);
    z-index: 2;
}

.player h2 {
    font-weight: 700; 
    color:  #fff;
    font-size:  16pt;
}

.player .imgcontrol {
    width:  50px;
    height:  50px;
    text-align:  center;
    cursor:  pointer;
}

.player h3 {
    font-weight: normal; 
    color:  #fff;
    font-size:  12pt;
    text-transform : uppercase;
}

.player small {
    font-weight: normal; 
    color:  #fff;
    font-size:  10pt;
    text-transform : uppercase;
}

/*** PLAYER ***/

#audio {
    z-index: 1;
}

#controls {
  position: relative;
  z-index: 2;
  padding: 3px;
}

#time {
  width: 280px;
  height:  4px;
  display: inline-block;
  background:  rgba(255, 255, 255, 0.4);
  border:  none;
}

#btn_volume {
  margin-left: 5px;
}

#volume {
  float: right;
  width: 200px;
  height: 2px;
  margin-top: 12px;
}

.ui-progressbar .ui-progressbar-value {
    background:  #fff;
}

/** MUSICIANS **/
.musicianimg {
    width:  80px;
    height:  80px;
    display:  block;
    float:  left;
    margin:  20px 6px 0 0;
}

/*** Album ***/
.playeralbumcurrent {
    width:  200px;
    height:  200px;
    display:  block;
}

.playeralbum {
    width:  200px;
    height:  200px;
    display:  block;
    margin:  20px 6px;
}

.infos {
    margin:  20px 10px;
    font-size:  20px;
}

.infos small {
    font-size:  14px;
}


.infos h3 {
    padding-bottom:  0;
    margin-bottom:  0;
    font-weight: bold;
}

/*** Album list ***/

.albumlist {
    width:  560px;
    margin:  auto;
    color:  #fff;
    margin-top:  50px;
}

.albumlist .infosalbum {
    height:  200px;
    float:  left;
    padding-bottom:  6px;
    margin-bottom: 10px;
    margin-top: 60px;
}

.albumlist .tracklist {
    width:  100%;
    float:  left;
    border-top: 1px solid #ffffff;
    padding-top:  10px;
}

/*** Infos Album ***/

.albumlist .album {
    width:  140px;
    height:  140px;
    margin: 0;
    padding:  0;
    display:  block;
    float:  left;
    cursor:  pointer;
    filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
        
}

.albumlist .albumactive {
    
    filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -moz-filter: brightness(100%);
        -o-filter: brightness(100%);
        -ms-filter: brightness(100%);
}

.currentalbum {
    float:  left;
    width: 200px;
    height: 200px;
    margin: 70px 10px 10px 0;
}

.albumlist .infosalbum {
    float:  left;
}

.albumlist .infosalbum h3 {
    padding-bottom:  0;
    margin-bottom:  0;
    font-weight:  bold;
    font-size:  12pt;
    text-transform: uppercase;
}

/*** Track list ***/

.albumlist .tracklist .track {
    /*border-left:  solid 1px #fff;*/
    margin: 0 0 6px 0;
    padding:  4px 8px 4px 0;
    cursor: pointer;
    border:  solid 1px rgba(0, 0, 0, 0);
    font-size:  10pt;
}

.albumlist .tracklist .track:hover {
    border:  solid 1px #fff;
}

.albumlist .tracklist .track .num {
    padding:  0 6px 0 10px
}

.albumlist .tracklist .track .name {
    
}

.albumlist .tracklist .track .time {
    float:  right;
}

.albumlist .tracklist .musicactive {
    font-weight: 700; 
    border:  solid 1px #fff;
}

/*** RIGHT PART ***/
.right {
    position: absolute;
    right: 20px;
    color:  #ffffff;
    top: 120px;
    width: 360px;
    overflow: inherit;
}

.right .albums {
    padding-top:  10px;
    border-top: 1px solid #ffffff;
    margin-top: 10px;
}

.right .album {
    width:  120px;
    height:  120px;
    margin: 0;
    padding:  0;
    display:  block;
    float:  left;
    cursor:  pointer;
    filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
        
}

.right .album:hover {
    filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
}

.right .albumactive {
    
    filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -moz-filter: brightness(100%);
        -o-filter: brightness(100%);
        -ms-filter: brightness(100%);
}

.right .infosalbum h3 {
    padding-bottom:  0;
    margin-bottom:  0;
    font-weight:  bold;
    font-size:  12pt;
    text-transform: uppercase;
}


/*** About ***/

#about {
    width:  560px;
    margin:  auto;
    color:  #fff;
    margin-top:  50px;
    display:  none;
}

#about h3 {
    padding-top: 60px;
}

.musician {
    width:  100%;
    float:  left;
}