/* basic */

    

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

img {
    max-width: 100%;
}

.clear {
    clear: both;
}

.album_info .blacklist ul li {
    color:black!important;
}

.hidden {
    display: none !important;
}

.view#box_set {
    margin-bottom: 50px; /* Leave room for footer */
}

/* éléments typo */

body {
    background: #AA5A17 url(../images/record-player/natural_paper.png) repeat;
    color: #fff;
    font-family: 'Oswald', 'Impact', sans-serif;
    margin: 0;
  
    -webkit-font-smoothing: antialiased;

}



a { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
h1 {
    font-family: Josefin Sans;
    font-weight:300;
}

h2 {
    font-family: Josefin Sans, Times, "Times New Roman", serif;
    font-weight:300;
}


#ep {
    
    margin-top:10px;
  
  
    text-shadow:2px 2px 2px white;
    font-size:18px;
    font-family : Oswald;
    font-weight:400;
    color:#cccccc;
width:5px;

	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	white-space:nowrap;
	mar
	bottom:0;
	margin-left:-55px;
	
	height:20px;

	
}



.tip {
    position: absolute;
    left: 30%;
    width: 40%;
    line-height: 1; 
    text-align: center;
    padding: 10px;
    background: rgba(70,70,70,.95);
    color: #fff;
    border-radius: 40px;
    top: 50%;
    font-size: 40px;
    margin-top: -40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 20;
}

.touch .tip {
    display: inline-block;
}

.no-touch .tip {
    display: none;
}

/* recherche album */

.album_slider {
    margin: 0;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

#album_picker .viewport {
    max-width: 100%;
   
    height:100%;
    text-align: center;
}

#album_picker .viewport .album_slider {
    text-align: left;
    width: 1150px;
    
}

.album {
    margin: 0;
    float: left;
    list-style-type: none;
}

.play_album, .album_title, .album_spine {
    cursor: pointer;
}

.album {
    margin-left: 5px;
}

.album:first-child {
    margin-left: 20px;
}

.album.current_album {
    margin: 0 15px;
    color:black;
    text-shadow:2px 2px 2px white;
}

.album_cover {
    float: left;
margin-right: 25px;
}

.album.current_album {
    width: 900px;
}

.album_cover, .album_info {
    display: none;
    
}




.album_info {
    width: auto;
    float: right;
    
}

.album h2 {
    font-size: 35px;
    float: left;
    width: 270px;
    color:#2d242f;
    margin-top:0px;
   
}

.album .play_album {
    float:right;
    width: 42px;
    margin-top:0px;
    background-color:#ffffff;
    text-indent: -9999em;
    height:27px;
    background-image: url("../images/controls/controlsprite.png");
    background-position: -199px -12px;
}

.album .play_album:hover {
    background-color:#cccccc;
}

.album .description {
clear: both;
font-style:italic;
font-family: times;
font-size: 12px;
line-height: 15px;
margin-bottom:10px;
}
.current_album .album_cover, .current_album .album_info {
    display: block;
    
}

.current_album .album_spine {display:none;
    
}



/* slider */

#box_set {
    width: 100%;
    top: 0;
    left: 0;
    bottom: 60px;
    color: #cccccc;
    background: url(../images/record-player/natural_paper.png) repeat;

}

#box_set .gallery-wrap {
    width: 90%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

.gallery-wrap .timer {
    display: none;
}

#box_set div.orbit-wrapper div.slider-nav span.right {
     margin-right: -40px;
}
#box_set div.orbit-wrapper div.slider-nav span.left {
    margin-left: -40px;
}

.box-set-slide .hero {
    width: auto;
}
.box-set-slide .moretext {
    display: block;
    margin-left:300px;
    margin-top:100px;
}

.box-set-slide h2 {
    color: #ededed;
}
.box-set-slide .description {
    font-family: Oswald, Times, "Times New Roman", serif;
    font-weight:400;
    margin-bottom: 20px;
    text-align:left;
    width:480px;
    line-height:20px;
    font-size: 13px;
    color:rgb(45, 36, 47);
  opacity:.5;
    text-shadow:2px 2px 2px white;
}


#close_box_set {
    position:absolute;
    top:20px;
    left:10px;
    text-transform: uppercase;
    padding: 20px 40px 15px 40px;
    color: #cccccc;
    text-decoration: none;
    background: none;
    font-size:70px; 
    text-shadow: 2px 2px 2px white;
    margin-top:-10px;
    margin-bottom:25px;
    z-index:20;
    font-family:"Oswald"
    

}

#close_box_set:hover{
   background-color:none;
}
/* tourne disque */

#record {
    background: #cccccc url(../images/record-player/fondd.png) repeat;
  min-height:900px!important;
  min-width:1200px;
 
}

#record_status {
    width: 230px;
    height: 230px;
    background: transparent url(../images/record-player/big-play-pause.png) no-repeat;
    position: absolute;
    margin-left: -136px;
    margin-top: -115px;
    width: 230px;
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
}

#record_status.pause {
    background-position: 0 bottom;
}

#record h2 {
    margin: 2em 0 0 0;
    padding-top:50px;
    color:white;
    font-size:35px;
    margin-left:30px;
    
    
}

#record .track_list {
    padding-left:30px;
    font-size: 13px;
    width: 200px;
    padding-right: 15px;
    float: left;
    height: 600px;
    color:white!important;
    overflow: auto;
    font-family:"times";
}

#record_disc {
    display: block;
    width: 850px;
    height: 689px;
    margin: -120px auto 0 auto;
    position: relative;
    cursor: pointer;
}

#record_disc_base, #record_disc_grooves, #record_disc_shine {
    width: 690px;
    height: 690px;
    position: absolute;
    top: 0;
    right: 100px;    
}

#record_label {
    width: 224px;
    height: 224px;
    position:absolute;
    right: 334px;
    top: 234px;
}

/* In IE8, our rotation fallback will position this relatively, rather than absoultely. */

.lt-ie9 #record_label {
    float: right;
    top: 159px;
    
}

.record_title {
    max-width: 325px;
}

#record_turntable {
    background: url(../images/record-player/turntable.png) no-repeat;
    width: 696px;
    height: 696px;
    position: absolute;
    top: -2px;
    right: 97px;
}

#record_disc_base {
    background: transparent url(../images/record-player/vinyl.png) no-repeat;
}

#record_disc_grooves {
    background: transparent url(../images/record-player/vinyl-tracks.png) no-repeat;
}

#record_disc_shine {
    background: transparent url(../images/record-player/vinyl-glare.png) no-repeat;
}

#record_tonearm {
    width: 500px;
    height: 600px;
    position: absolute;
    top: 0;
    right: -50px;
    background: transparent url(../images/record-player/tonearm2.png) no-repeat;
}

#record_tonearm {
    -webkit-transform: rotate(-30deg);
    -webkit-transform-origin: 80% 20%;
    -moz-transform: rotate(-30deg);
    -moz-transform-origin: 80% 20%;
    -ms-transform: rotate(-30deg);
    -ms-transform-origin: 80% 20%;
    transform: rotate(-30deg);
    transform-origin: 80% 20%;
}


#record_knob {
    position: absolute;
    top: 580px;
    right: 0px;
}

/* navigation */

#footer {
    position: fixed;
    height: 60px;
    width: 100%;
    
    background-color: #393841;
    bottom: 0;
    z-index: 100;
}
.view {
    /*display: none;*/
    overflow: hidden;
    /*height: 0;*/
    padding: 10px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

.view.active {

}

.play_album {
    background-color: #70c1c9;
    border-radius: 5px;
    display: inline-block;
}
li.track {
    cursor: pointer;
    padding-top:2px;
    padding-bottom:2px;
}

li.track:hover {
    background-color:none;
}

.track {
    
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

.track.current_track_item {
    color:orange;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#toggles {
    position: absolute;
    top: 0;
    right: 0;
}
#now_playing_data {
    position: absolute;
    top: 0;
    right: 200px;
}

.icon {
    background: url(../images/misc/spritesheet.png) no-repeat;
    display: inline-block;
    text-indent: -99999px;
    cursor: pointer;
}

.icon-fb-png {
    width: 9px;
    height: 18px;
    background-position: -88px -0px;
}

.icon-logo-png {
    width: 77px;
    height: 42px;
    background-position: -0px -0px;
}

.icon-next-png {
    width: 14px;
    height: 12px;
    background-position: -86px -77px;
}

.icon-pause_s3-jpg {
    width: 12px;
    height: 14px;
    background-position: -86px -52px;
}

.icon-play_lg-png {
    width: 42px;
    height: 27px;
    background-position: -0px -53px;
}

.icon-play_sm-jpg {
    width: 6px;
    height: 12px;
    background-position: -0px -100px;
}

.icon-prev-png {
    width: 14px;
    height: 12px;
    background-position: -88px -29px;
}

.icon-twitter-png {
    width: 22px;
    height: 18px;
    background-position: -53px -53px;
}

/* player controls */


#holder {
   
    
}

.controls a{
    height:50px;
    display:block;
    text-indent:-9999em;
    background-image: url("../images/controls/controlsprite.png");
    width:30px;
    float:left;
    margin-right:1px;
    overflow: hidden;
}


.controls a:hover, .controls:hover a  {
    background-color:orange;
    
    
}

#prev a{
    width:30px;
    background-position:4px;
}

#pause a{
    background-position: -27px 0px;
}

#play a{
    background-position: -57px 0px;
}

#next a{
    background-position: -85px 0px;
}

#twitter_share a{display:none;
    background-position: -120px 0px;
}

#fb_share a{display:none;
    background-position: -150px 0px;
}

#samuel a {
    width:90px;
    background-position: 360px 0px;
}

#footer {
    height:50px;
    width:100%;
    /* Safari 4+, Chrome 1-9 */
   background:url(../images/record-player/fondd.png) repeat;
    
}

.footer-view-specific .show-album_picker .box-button {
   
}


.show_box_set span {
     background:white;
    color:black;
    display:block;
    
}



.show_box_set .box-button span {
    
    
    font-family: Oswald;
    text-transform: uppercase;
    font-size:19px;
    color:#ffffff;
    height:50px;
    display:block;
    padding-left:0px;
    padding-right:50px;
    line-height: 50px;
    background-color:#333333;
    text-decoration: none;
    text-align: center;
    width:280px;
    
    
}


#current-song {
    padding-top:10px;
    float:left;
    min-width: 200px;
    line-height:15px;
    margin-left:10px;
    margin-right:10px;
    font-family: "Oswald";
    font-size:13px;
    
    letter-spacing:0px;
    text-transform:uppercase;
}

/* Player */
.jp-controls li {
    display: block;
    float: left;
    height: 41px;
    width: 41px;
}
.jp-controls a {
    display: block;
    position: relative;
    float: left;
    height: 41px;
    width: 41px;
    background-color: black;
}
.jp-controls a span {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
}

.footer-view-specific > * {
    display: block;
    margin-top:0;
    left: 20;
    top: 0;
    width: 600px;
    height: 100%;
   
}

.footer-view-specific a {
    text-decoration:none;
    color:orange;
}

.show-record {
    color:white;
    background:black;
}




.footer-view-specific p {
    font-size:11px;
     background-color: none;
    margin-bottom:20px;
    background-position: right center;
    background-repeat: no-repeat;
    display:inline-block;
    color: rgb(255, 255, 255);
   
    font-family: times;
    
   
    height: 50px;
    line-height: 50px;
    margin-left: 70px;
    padding-right: 50px;
    padding-left:260px;
    text-align: left;
    display:block;
    text-transform: uppercase;
    width: 800px;
    
}

/* utiliser ces classes pour les contenus ne devant pas s'afficher tout le temps*/
body.view-album_picker .show-album_picker { display: block; }
body.view-record .show-record { display: block; }
body.view-box_set .show-box_set { display: block; }


body.view-album_picker .show-album_picker { display: block; }
body.view-record .show-record { display: block; }
body.view-box_set .show-box_set { display: block; }



.artist_info {
   bottom:50px;
    right:320px;
}

/* center components */

#album_picker .viewport, #box_set .viewport {
    display: table;
    margin: auto;
}

.vertical-center {
    display: table-cell;
    vertical-align: middle;
}

#album_picker {
    /*width:100%!important;*/
min-width:1200px!important;
padding-left:90px;
margin-right:50px;

}

.album_info ul {
    overflow: auto;
   
    height: 360px;
    font-family:times;
    color:black;
    font-size:13px;
    line-height:15px;
    
}

.album_slider {
  width:auto!important;
    height:577px;
    

}

#record_browse {
    text-transform: uppercase;
    padding: 20px 20px 12px 20px;
    
    text-decoration: none;
    
   z-index:100;
   font-size:50px;
   color:white;
   margin-left:20px;
   
    margin-top:-15px;
    margin-bottom:25px;
    position: absolute;
    left:0px;

}

#record_browse:hover{
   background-color:url(../images/record-player/natural_paper.png) repeat;
}





/*@media (max-width:900px){
   
    #ep {
        writing-mode:lr-tb!important;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	white-space:nowrap;
        }
	
	
	
}*/