html, body {
    font-family:"Myriad","Myriad Pro",Georgia,Helvetica,Sans-serif;
    color:white;
    height: 100%;
    width: 100%;
    margin: 0px;
    scroll-behavior: smooth;
    /* Does not work in IE, Edge, Safari (cross-browser solution: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp) */
}

body {
    display: flex;
    flex-direction: column;
}

table {
 width:100%;
 height:100%;
 border-spacing: 0;
 border-collapse: collapse; 
}

img { border:none; }

a { color:#a05913; }

a:hover { color:#b5b5b5; }

.center { text-align:center; }

/* ------------------------------- */

#topBar {
 background: #b5b5b5;
 height: 45px;
 text-align: center;
}

#topBar img {
 height: 32px;
 padding-top: 6px;
}

/* ------------------------------- */

.main {
    flex: 1 0 auto;
    padding: 50px 25px 50px 25px;
    background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) ),
                url(img/fools_2015_black_400.jpg) black no-repeat 100% 100%;
}

.home { background-position: left bottom; padding-top: 100px; }
.videos { padding-left: 50px; }
.artworks { text-align: center; }
.about { background: black; }

/* ============ Menu ============= */

#bottomBar {
    background:#b5b5b5;
    /*height: 45px;*/
    padding: 7px;
    box-sizing: border-box;
}

#bottomBar a, #bottomBar a:hover {
    text-decoration:none
}

#menu, #playlist, #copyright {
    float: left;
    box-sizing: border-box;
}

#menu {
 text-align:left;
 width:655px;
 min-width:655px;
}

#menu a {
 display: inline-block;
 padding: 5px 9px 5px 9px;
 margin-right: 5px;
 background-color:#a0a0a0;
 font-size:13px;
 font-weight: normal;
 color:#353535;
 border:2px inset #c4c4c4;
 transition: all 0.4s;
}

#menu a:hover,
#menu #current_page {
 background-color:black;
 color:white;
 cursor:pointer;
}

#menu #current_page {
 font-weight: bold;
}

#playlist {
 padding-top: 6px;
 text-align:center;
 width:130px;
 min-width:125px; 
 font-size: 15px
}

#playlist a {
 color:#505050;
 font-weight: bold;
}

#playlist a:hover {
 color:#202020;
}

#copyright {
    position: absolute;
    right: 7px;
    font-size: 10px;
    font-style: italic;
    color: #505050;
    padding: 10px 0 0 40px;
}

#mobile_down, #mobile_up {
    display: none;
    position: fixed;
    z-index: 2;
    right: 7px;
    height: 45px;
    width: 45px;
    cursor: pointer;
}

#mobile_down {
    background: url(img/arrow_down.png) no-repeat;
    top: 0;
}

#mobile_up {
    background: url(img/arrow_up.png) no-repeat;
    bottom: 0;
}

/* =========== Accueil music ============ */

#covers_container {
 height: 300px;
 padding-top:50px;
}

#home_tracks_labels {
    text-align: right;
    width: 36%;
    vertical-align: top;
    padding-top: 20px;
    line-height: 30px
}

/* ============ Discography ============= */

#disco_flow_container, #album_detail {
  padding-top:25px;
  float: left;
}

#disco_flow_container { width: 25%; }

#flow_container { 
  width: 45%;
  margin-left: 27%;
}

#album_detail {
  width: 75%;
  padding-right: 10px;
  box-sizing: border-box;
}

#beanComment {
  background: #2F2F2F;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid white
}

.album_title {
 font-size:25px;
 font-weight:bold;
}

.album_words_notes {
 font-size:10px;
 font-weight: normal;
 color: #858755;
 text-decoration:none
}

.album_infos {
 font-size:15px;
 font-style:italic;
}

.featuring {
 display: block;
 padding-top: 5px;
 font-size:10px;
}

.albumTracks_container {
  box-sizing: border-box;
  padding:15px 40px 0 0;
  width:50%;
  float: left;
}

.track_title {
 font-size:12px;
 font-weight:bold;
}

.track_infos { font-size:12px; }

.duration {
 font-size:12px;
 font-style:italic;
}

/* =========== Videos ============ */

.videoTitle {
 font-size:23px;
 font-weight:bold;
}

.videoAlbum {
 font-size:15px;
 font-style:italic;
 margin-bottom: 15px
}

.videoAlbum a { color: white; }

video {
  width: 720px;
  max-width: 95%;
  height: auto;
  margin-bottom: 50px
}

/* ============ Words ============= */

.words {
 width: 50%;
 padding: 0 20px 30px 0px;
 box-sizing: border-box;
 line-height: 28px;
}

.words img {
  display:block;
  float: left;
  margin-right: 5px;
  width: 55px;
  cursor:pointer
}

.words_title {
 font-size:18px;
 font-weight:bold;
 color:white;
}

.words_album {
 font-size:15px;
 font-weight:normal;
 font-style:italic;
}


.words_list_container {
 width: 50%;
 height: 500px;
 padding: 30px 40px 80px 40px;
 background: #1a1a1a;
 float: right;
 box-sizing: border-box;
}

.words_list_container .words_title {
 height: 50px;
 background: linear-gradient(rgba(26,26,26,0), rgba(26,26,26,1));
}

.words_list {
 position: relative;
 overflow-y: scroll;
 padding-top: 25px;
 height: 90%;
}

.words_list a:before {
  /*content: "☾";   \025D2
  content: "\0266F";*/
  font-weight:bold;
  padding-right: 10px;
}

.words_list a {
  display: block;
  padding: 5px 0 5px 5px;
  margin-left: 40px;
  margin-bottom: 10px;
  color: white;
  text-decoration: none;
}

.words_list a:hover {
  background: #b5b5b5;
  color:#303030;
  border-radius: 5px;
}

.words_list img {
  position: absolute;
  margin: -5px 0 0 -40px;
  width: 30px;
  cursor:pointer
}

.words #lyrics pre {
    font-family: "Myriad","Myriad Pro",Georgia,Helvetica,Sans-serif;
}

/* ============ Search ============= */

.search_label {
 width: 275px;
 text-align: right;
 font-size:15px;
 padding-top: 5px;
 padding-right: 10px;
 float: left;
}

input[type=text] {
 position:absolute; 
 width: 300px;
}

select {
 position:absolute; 
 width: 125px;
}

input[type=submit] { margin-left:285px; }

table#results { 
 height:auto;
 width:auto;
}

table#results td { 
 padding:10px; 
 border: 2px solid #b5b5b5;
}
	
.result_title {
 height: 40px;
 text-align: center;
 font-weight: bold;
 font-size: 17px;
 color: black;
 background: #b5b5b5;
}

.search_res_album {
    display: inline-block;
    padding-top: 15px;
}

/* Mobile search results */
#mobile_results { display: none; }
.mobile_result { margin-bottom: 10px; border-top: 1px solid; padding-top: 30px; }
.mobile_res_album { overflow: auto; }
.mobile_result img { float: left; margin-right: 8px; }
.mobile_res_album img { height: 70px; padding-bottom: 45px;}
.mobile_result .search_res_album { padding-top: 0 }
.mobile_track_title { font-weight: bold; }
.mobile_infos { font-style: italic; margin-bottom: 10px; }

/* ============ About ============= */

#foolsGroup_img {
 width: 350px;
 text-align:center;
 float: left;
}

#foolsGroup_img img {
 width: 100%;
 max-width: 350px;
 padding: 25px;
 box-sizing: border-box;
}

#fools_txt { padding: 25px 25px 0 25px; }

#main_fools_container,
#other_fools_container {
 width: 50%;
 float: left;
}

.about_title { padding: 25px 0; }

#main_fools { border-right: 1px solid gray; }
#main_fools td { padding-right: 15px; }
#main_fools img {
 width: 60px;
 margin-right: 5px;
}

.fool_name {
  font-weight: bold;
  float: left;
  margin-right: 3px;
}

.fool_nick {
 font-style: italic; 
}

#about_flow_container {
 width: 25%;
 max-width: 150px;
 padding-left: 5%; 
 float: left;
 box-sizing: border-box;
}

#about_flow_container .flow { max-height: 230px; }

#more_infos {
 float: left;
 width: 75%;
 padding-left: 5%;
 box-sizing: border-box
}

/* ============= Radio ============== */

.radio {
z-index: 2;
position: fixed;
right: -315px;
top: 50px;
max-height: 90%;
background: white;
border-bottom-left-radius: 10px;
transition: all 0.3s;
}

.radio:hover { right: 0px; }

.radio_label {
position: absolute;
transform: rotate(90deg);
transform-origin: left top 0;
background: white;
color: black;
font-size: .8em;
letter-spacing: 0.2em;
padding: 0px 15px 4px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
cursor: pointer;
}

.radio button {
    position: absolute;
    bottom: 7px;
    left: 7px;
}
.radio #err {
    position: absolute;
    bottom: 40px;
    left: 10px;
    font-style: italic;
    color: #8a1919;
    font-size: 0.8em;
    opacity: 0.0;
    transition: all 0.4s;
}

#gradient {
    height: 15%;
    background: transparent; /*for none supporting browsers*/
    background: linear-gradient(to top, white, rgba(255,255,255,0.0));
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 10px;
    width: 100%;
}

/* ============ Playlist ============= */

.track_container {
  width:30%;
  float:left;
}

/* ============ Listen ============= */

.listen-cover {
  width: 300px;
  max-width: 100%;
}

/* ============ Poolls ============= */
.polls .date { font-style: italic; font-size: .65em; }
.polls #form_container { display: inline-block; margin-right: 20px; border-right: 1px solid white; padding-right: 20px; width: 30%; vertical-align: top;}
.polls input[type=text] { position: relative; width: 90%; }
.polls input[type=email] { width: 90%; }
.polls textarea { width: 92%; height: 100px }
.polls .pooll_answer { display: inline-block; background: gray; font-size: .8em; margin: 2px; padding: 1px 5px; border-radius: 5px; }
.polls #infos { display: inline-block; width: 62%; }
.polls iframe { max-width: 100% }
.polls .author:before { content: "— ";}
.polls .author { display: block;font-size: .8em; font-style: italic; }
.polls #error { color: #901616; margin: -20px 0 20px 0; }
@media screen and (max-width: 610px) { 
    .polls #form_container { width: 100%; border-right: none; padding-bottom: 10px; margin-bottom: 20px; }
    .polls #infos { width: 100%; border-bottom: 1px solid white; border-top: 1px solid white; padding-top: 20px; margin-bottom: 20px; }
    /*.polls iframe { width: 100%; }*/
}
@media screen and (max-width: 479px) {
    .polls input[type=text] { margin-left: 0;}
}

/* ===================================================================== */
/*                          Responsive structure                         */
/* ===================================================================== */


/* =================================================== 930 */
@media screen and (max-width: 930px) {
    #playlist { text-align: left; }
    .track_container { width: 50% }
}

/* =================================================== 890 */
@media screen and (max-width: 890px) {
    #copyright { position: relative; width: 100%; }
}

/* =================================================== 790 */
@media screen and (max-width: 790px) {
    .track_container { width: 100% }
}

/* =================================================== 768 */
@media screen and (max-width: 768px) {

    ul.playlist { margin: 0 27% !important; }

    #playlist { padding: 12px 0 0 7px; }
    .album_infos { display: block; }
    
    /* Search */
    #results { display: none; }
    #mobile_results { display: block; }
    #results_number { font-size: 20px; }
    
    /* About */
    .fool_name { float: none; }
    .separator { display: none }
    
}

/* =================================================== 660 */
@media screen and (max-width: 660px) {

    body { font-size: 14px; }
    .main { padding: 50px 25px 25px 25px; }
    
    #menu { width: 100%; min-width: 0; padding-top: 50px }
    #menu a { display: block; margin-right: 0; }
    #playlist { position: absolute; width: 100%; }
    #mobile_down, #mobile_up { display: block; }
    
    #disco_flow_container { width: 40%; }
    #album_detail { width: 60%; }
    .albumTracks_container { width: 100%; }
    
    /* Search */
    .search_label {
        text-align: left;
        font-size: 14px;
        padding-left: 25px;
        width: 180px;
    }
    input[type=text] { width: auto; }
    input[type=submit] { margin: 25px; }
    
    /* Words*/
    .words_list_container {
        width: 100%;
        height: 300px;
        margin-bottom: 25px;
    }
    .words_list img { margin-top: 0; }

    .words { width: 100%; }

    /* About */
    #foolsGroup_img { width: 100%; }
    #main_fools_container,
    #other_fools_container {
      width: 100%;
    }
    
    #main_fools { border-right: none; }
    #main_fools td { padding-bottom: 15px; padding-right: 0px; }
    
    #about_flow_container { 
      width: 33%;
      padding-left: 0;
    }
    
    #more_infos { width: 66%; }
    
/* =================================================== 515 */
@media screen and (max-width: 515px) {
    /* artworks */
    #artwork img { max-width: 240px; }
}

/* =================================================== 480 */
@media screen and (max-width: 479px) {

    #topBar img { height: 27px; }
    
    .flow { margin-bottom: -50px !important; }
    .ContentFlow .globalCaption { margin-top: 50px !important; }
    ul.playlist { margin: 0 0 !important; }
    #home_tracks_labels { width: auto; }
    
    #disco_flow_container { width: 100%; padding-top: 0; }
    #album_detail { width: 100%; padding-left: 10px; }

    input[type="text"] { position: relative; margin-left: 25px }
    .short_label { width: 80px; }
    .instruments_label { width: 0px; padding-left: 15px; }
    
    .playlist_main { padding-left: 0; }
    /*.ui360-vis { width: 65%; }*/
    .ui360-vis { width: 0%; }
    .ui360 a.sm2_link { white-space: normal; }

}

/* =================================================== 360 */
@media screen and (max-width: 360px) {
    #topBar img { height: 23px; }
    .ui360-vis .sm2-360ui { margin-left: -290px; }
    .sm2-360ui { margin-top: 27px !important; }
    .sm2_link { position: absolute !important; top: 0 !important; }
}

/* =================================================== MAX HEIGHT 630 */
@media screen and (max-height: 630px) {
    .radio button {  
        top: 7px;
        bottom: auto;
    }
}