/* ELEMENTS COMMUNS A TOUTES LES PAGES */

body, #wrap
{
    height: auto;
}

#wrap
{
    position: relative;
    height: auto;
    min-height: 100%;
    padding-bottom: 353px;
    overflow: hidden;

}


header
{
    overflow-x: hidden;                   /* pas de défilement horizontal */
}

body
{
    margin-top: -3px;
    overflow-x: hidden;                   /* pas de défilement horizontal */
    z-index: -1;
}

/*div
{
  -khtml-user-select: text;	empeche la sélection des images sinon c'est dégueu dès qu'on fait un faut mvt 
  -webkit-user-select: text;
  -moz-user-select: -moz-none;
  -ms-user-select: text;
}

div p, div li, div a, div h1, div h2, div h3, div h4
{
  -moz-user-select: text !important;
} */

.main
{
    padding-bottom: 200px;
}

nav
{
    position: fixed;
    width: 98.5%;
    height: 50px;
    outline: solid 0px black;
    z-index: 7;
}

#menu
{
    position: fixed;
    top: -15px;
    left: 50%;
    margin-left: -600px;
    width: 80%;
    min-width: 955px;
    max-width: 1201px;
    z-index: 5;
    outline: solid 0px black;
}

#bar_nyew
{
    height: 49px;
}

nav li
{
    margin-right: 0.7%;
    padding: 15px;
}

#about
{
    margin-right: 7%;
}

#about_menu
{
    overflow: hidden;
    position: absolute;
    padding: 0px;
    margin-left: -34px;
    top: 63px;
    text-align: left;
    font-size: 0.8em;
    height: 0px;
    width: 125px;
    z-index: 10 !important;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

#about ul li
{
    width: 95px;
}

#about:hover #about_menu
{
    border-top: solid 1px black;
    height: 141px;
}

.growing_genres_menu
{
    position: relative;
    left: 0px;
    padding-left: 28px;
    text-align: left;
    margin-top: -2px;
    width: 95px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.growing_genres_menu ul
{
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 47px;
    width: 126px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 0.8em;
    height: 0px;
    box-shadow: none !important;
}

.growing_genres_menu:hover ul
{
    outline: solid 0px black;
    height: 376px;

}

.growing_genres_menu li
{
    position: relative;
    left: -3px;
    top: -0.5px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 5px;
    text-align: center;
    width: 128px !important;
    height: 16px !important;
    line-height: 1em !important;
}

.growing_genres_menu li:hover
{
    background-color: #EDE7FD !important;
}

.about_genre
{
    position: relative;
    margin-top: 0px;
    border-top: solid 1px rgb(210, 195, 249);
    padding-left: 0px;
    height: 20px;
}

.cadre_menu_genre
{
    box-shadow: inset 0px 2px 5px #DFD4FB !important;
}

.french
{
	display: none;
}


/* TRANSITION TIME !!!!! */

.trans
{
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.t200
{
    -o-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.trans300
{
    -o-transition: all 0.3s 0.3s;
    -moz-transition: all 0.3s 0.3s;
    -webkit-transition: all 0.3s 0.3s;
    transition: all 0.3s 0.3s;
}

.trans_long
{
    -o-transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -webkit-transition-timing-function: linear;
    transition: all 2s;
    transition-timing-function: linear;
}


/* SEARCH BAR */

#search_engine
{
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    width: 322px;
    height: 65px;
    display: inline-block;
    position: fixed;
    left: 50%;
    margin-left: -500px;
    margin-top: -5.5px;
    z-index: 8;
}

#drag_search, #drop_search
{
    padding-left: 20px;
    padding-right:20px;
    width: 312px;
    height: 76.5px;
    display: inline-block;
    position: fixed;
    left: 50%;
    margin-left: -500px;
    margin-top: 3px;

    z-index:0;
    opacity:0;
    box-shadow: 0px 3px 4px black;
    border-radius: 2px;	
    background-color:white;
    -o-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
}
#drag_search
{
    border : dashed 5px rgb(223,212,251);

}

#drop_search
{
    border : dashed 5px rgb(128,60,150);

}

#drag_search.active{
    z-index:10;
    opacity:1;
}

#drop_search.up
{
    z-index:11;
}

#drop_search.active
{
    z-index:11;
    opacity:1;
}

#search_artist
{
    position: relative;
    left: -2px;
    padding-left: 8px;
    width: 105%;
    height: 120px;
    color: rgb(128,50,160);
    text-transform: uppercase;
}

.navbar-form
{
    position: absolute;
    width: 96%;   
}

#search_engine #triplet_search
{
    position: absolute;
    letter-spacing: 0px;
    top: 52px;
    left: 5px;
    text-align: left;
    margin-right: 15px;
    outline: solid px black;
    width: 95%;
}

#search_complexity, #search_loudness, #search_melody
{
    position: relative;
    width: 100%;
    height: 40px;
    position: relative;
    top: -5px;
    left: -3px;
    padding-top: 10px;
    outline: solid px black;
    z-index: 7;
}

#search_by
{
    position: absolute;
    left: 10px;
    color: rgb(128, 50, 160);
    margin-bottom: 0px;
    padding: 0px;
    text-align: left;
    width: 20%;
    outline: solid px black;
    letter-spacing: 0em;
}

#loupe
{
    float: right;
    height: auto;
    margin-top: 7px;
    width: 24px;
    margin-right: 4px;
    outline: solid px black;
}

#search_text
{
    position: absolute;
    top: 18px;
    left: 12px;
    border: solid black px;
    overflow: hidden;
    width: 93%;
    height: 32%;
    border-radius: 5px;
}

#search_text:hover, #wrap_melody:hover, #wrap_loudness:hover, #wrap_complexity:hover
{
    box-shadow: 0px 0px 4px rgb(200, 110, 250);
}

#loupe_2
{
    position: absolute;
    opacity: 0.1;
    top: 4px;
    right: 5px;
    float: right;
    width: 24px;
}

#loupe_2:active
{
    margin-top: 1px;
    margin-bottom: -1px;
}

#loupe:active
{
    margin-top: 8px;
    margin-bottom: -8px;
}

.case_search
{
    opacity: 0;
}

#wrap_melody, #wrap_loudness, #wrap_complexity
{
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: 20%;
    height: 25px;
    margin-right: 5px;
    position: relative;
    left: 24%;
    border-radius: 2px;
    top: 8px;
    z-index: 8;
}

.behind
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 25px;
    border-radius: 2px;
    color: rgb(128, 50, 160);
    font-size: 0.7em;
    text-align: center;
    background-color: white;
    z-index: 6;
}

.behind p
{
    position: relative;
    top: -4px;
}

.over_triplet
{
    position: absolute;
    top: 7px;
    width: 20%;
    z-index: 8;
    overflow: hidden;
    height: 242px;
    padding-top: 12px;
	display: none;
}


.over_triplet ul
{
    text-align: center;
    border: solid 1px grey;
}

.over_triplet ul li
{
    position: relative;
    padding-top: 0px !important;
    left: -41px;
    width: 140%;
    height: 20px;
    padding-bottom: 0px;
    padding-top: 1px;
}

#over_melody
{
    left: 24%;
}

#over_loudness
{
    left: 46.5%;
}

#over_complexity
{
    left: 68.5%;
}

#deroule_melody, #deroule_loudness, #deroule_complexity
{
    position: relative;
    width: 11px;
    height: 7px;
    top: -38px;
    opacity: 0;
}

#wrap_melody div p, #wrap_loudness div p, #wrap_complexity div p
{
    position: relative;
    height: 25px;
    top: -10px;
    padding-top: 6px;
    z-index: 1;
}


/* SUGGESTIONS DEROULANTES DU HEADER */

#search_suggest
{
	display: none;
}

#search_suggest, #search_suggest_big
{
    position: fixed;
    left: 50%;
    margin-left: -477px;
    top: 41px;
    width: 315px;
    z-index: 7;
    background-color: white;
    border: solid 1px rgb(128, 50, 160);
    text-align: left;
    letter-spacing: 0.02em;
    border-radius: 2px;
}


#search_suggest_big
{
    position: absolute !important;
    left: 50% !important;
    margin-left: -500px !important;
    width: 663px !important;
    top: 577px !important;
}

#search_suggest ul, #search_suggest_big ul
{
    position: relative;
    left: -40px;
    top: 13.5px;
    width: 305px;
    margin-bottom: 0px;
    outline: solid px black;
}

#search_suggest_big ul
{
    width: 653px !important;
}

#search_suggest ul p, #search_suggest_big ul p
{
    padding-left: 10px;
    padding-top: 2px;
    width: 305px;
    height: 20px;
}

#search_suggest_big ul p
{
    width: 653px !important;
}

#search_suggest ul li ul, #search_suggest_big ul li ul
{
    position: relative;
    left: -40px;
    padding-left: 50px;
    top: -15px;
}

#search_suggest_big ul li ul
{
    width: 653px !important;
    margin-left: 0px;
}

#search_suggest a li, #search_suggest_big a li
{
    height: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 10px;
    margin-left: -10px;
}

#search_suggest_big a li
{
    width: 653px !important;
}

.champ_suggest
{
    margin-top: -29.5px;
}

.champ_suggest ul
{
	overflow: hidden;
	padding-left: 82px;
	margin-left: -42px;
}

header .champ_suggest ul
{
	margin-left: 8px !important;
	padding-left: 42px !important;
}

#more_results
{
    position: relative;
    text-align: center;
    margin-top: 3px;
    margin-bottom: 0px;
    height: 35px;
    padding-top: 15px;
    background-color: rgb(239, 239, 239);
    border-top: solid 1px rgb(213, 213, 213);
    border-radius-bottom-right: 2px;
    border-radius-bottom-left: 2px;
}

#fleche_seemore_suggestion
{
    width: 8px;
    margin-left: 5px;
    margin-bottom: 1.5px;
}

/* SEARCH_SUGGESTS */
.page_suggests
{
    height: 1200px !important;
}

#mean
{
    text-align: center;
    padding-right: 45px;
    color: black;
    position: relative;
    top: -30px;
}

.suggest_top p
{
    background-color: rgb(239, 239, 239);
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 40px;
    position: relative;
    left: -40px;
    width: 989px;
    border-top: solid 1px rgb(213, 213, 213);
}

.suggest_division
{
    top: 583px !important;
    background-color: white;
    border: solid 1px rgb(223,212,251);
    width: 1028px !important;
    letter-spacing: 0.05em !important;
}

.champs_mean
{
    text-transform: uppercase;
    position: relative;
    top: -16px;
    line-height: 1.5em;
    overflow: hidden;
    padding-top: 30px;
    margin-bottom: 0px !important;
}

.champs_mean a li
{
    border: solid px black;
    position: relative;
    left: -81px;
    width: 988px;
	padding-left: 42px;
    padding-top: 6px;
    padding-bottom: 5px;
}

.champs_mean a:hover li
{
    background-color: rgb(237, 231, 253);
    border-top: solid 1px #DFD4FB;
    color: black;
    padding-top: 5px;
}

.champs_mean a:active li
{
	background-color: #c5b1f7;
	color: white;
}

.champs_mean li ul
{
    position: relative;
    top: -17px;
}


/* LIENS RESEAUX SOCIAUX */

#social_links
{
    list-style-type: none;
    position: fixed;
    margin-top: 100px;
    right: 20px;
    z-index: 5;    
}

.icon
{
    width: 55px;
    height: auto;
    margin-bottom: 15px;
    outline: none;
}


/* LOGO + SLOGAN + PHRASE D'INTRO DE CHAQUE PAGE */
#logo_nyew
{
    position: absolute;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    height: 283px;
    margin-top: 120px;
    text-align: center;
    z-index: 0;
}

#logo
{
    width: 405px;
    height: auto;
}

#jack
{
    width: 300px;
    height: auto;
    margin-bottom: 5px;
}

#slogan
{
    position: absolute;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    margin-right: auto;
    margin-top: 365px;
    text-align: center;
    line-height: 50%;
    z-index: 0;
}

/* PAGE_HOME */

/* code css du tableau de genres */


#home #wrap
{
    min-height: 2900px;
}


#genres_musique
{
    position: relative;
    margin-top: 580px;
    width: 74%;
    margin-left: 13.3%;
    outline: solid 0px black;

}

.rangee_genre
{
    width: 890px;
    min-width: 890px;
    margin: auto;
    padding-left: 5px;
    outline:solid px black;
}

.genre
{
    display: inline-block;
    padding: 0px;
    margin: 5px;
}

.description_genre
{
    text-align: center;
    width: 280px;
    height: 110px;
    padding-top: 30px;
    background-image: url(../img/fond_genre_petit.png) !important;
    line-height: 50%;
}

h2
{
}

.discover
{
    text-align: center;
    padding: 1px;
    margin: 0px;
}

.discover:hover
{
    text-align: center;
}

.discover p             /* correction du bug de Safari-pourri */
{
    height: 35px;
    padding-top: 17px;
    padding-bottom: 3px;
    margin-top: -1px;
    margin-bottom: -1px;
}

#wrap_genres
{
}

#bloc_description_rangee
{
    position: absolute;
    top: 610px;
    left: -4%;
    width: 18%;
    outline: solid px black;
}

#genres_musique, #bloc_description_rangee
{
    display: inline-block;
    text-align: justify;
}

.description_rangee
{
    text-align: right;
    height: 188px;
    padding-bottom: 0px;
}

.fleche_famille
{
    float: right;
    width: 35px;
    position: relative;
    bottom: -15px;
    margin-left: 10px;
}
/* fin du code css du tableau de genres */


@media all and (max-width: 1490px)
{

    #menu
    {
        margin-left: 10%;
        left: 0%;
    }
    #search_engine , #drag_search, #drop_search
    {
        margin-left: 15%;
        left: 0px;
    }
    #search_suggest
    {
        left: 0px;
        margin-left: 16.5%;
    }
}

@media all and (max-width: 1200px)
{
    #social_links
    {
        list-style-type: none;
        right: 10px !important;
        z-index: 1;
    }
}

@media all and (max-width: 1128px)
{
    #social_links
    {
        list-style-type: none;
        right: 25px !important;
        position: absolute !important;
        z-index: 1;
    }
}

@media all and (max-width: 1190px)
{
    nav
    {
        min-width: 0px;
    }
    #menu
    {
        position: fixed;
        margin-top: -15px;
        margin-left: 7.5%;
        left: 0%;
        padding: 15px;
        min-width: 820px;
        width: 80% !important;
    }
    #about
    {
        margin-right: 1.2%;
    }
    #about ul
    {
        position: absolute;
        top: 75px;
    }
	#volume_bar
	{
		top: 40px !important;
	}
    nav li
    {
        margin-right: 0.3%;
        padding: 15px;
		padding-top: 16.5px;
    }

    header .icon
    {
        width: 30px;
        height: 30px;
        margin-bottom: 8px;
        outline: none;
    }

    #genres_musique
    {
        position: absolute;
        width: 82%;
        margin-left: 9%;
        outline: solid 0px black;

    }
    #bloc_description_rangee
    {
        position: absolute;
        top: 650px;
        left: -8%;
        width: 18%;
        outline: solid 0px black;
    }
    #about ul
    {
        position: absolute;
        top: 78px;
    }
	#volume_bar
	{
		top: 34px !important;
	}
    #bloc_description_rangee
    {
        top: 617px;
    }
    .growing_genres_menu ul
    {
        top: 47px !important;
    }
    .feeds_li
    {
        margin-right: 8px !important;
    }
    .feeds_cadre
    {
        top: 74px !important;
        right: 11px !important;

    }
} 

@media all and (max-width: 1077px)
{
    #search_engine, #drag_search, #drop_search
    {
        left: 50%;
        margin-left: -380px;
    }
    #search_suggest
    {
        left: 50%;
        margin-left: -363px;
    }
}

@media all and (max-width: 1020px)
{
    #menu
    {
        left: 50%;
        margin-left: -420px;
    }
    #search_engine, #drag_search, #drop_search
    {
        left: 12.5%;
        margin-left: 0px;
    }
    #search_suggest
    {
        left: 14.5%;
        margin-left: 0px;
    }
}

@media all and (max-width: 980px)
{
    #search_engine, #drag_search, #drop_search
    {
        left: 50%;
        margin-left: -365px;
    }
    #search_suggest
    {
        left: 50%;
        margin-left: -347px;
    }
}

@media all and (max-width: 920px)
{
    #menu
    {
        margin-left: 0px;
        left: -5px;
        min-width: 820px;
        width: 97% !important;
    }
    #search_engine, #drag_search, #drop_search
    {
        left: 5%;
        margin-left: 0px;
    }
    #search_suggest
    {
        left: 7.5%;
        margin-left: 0px;
    }
}


/* PAGE_HOME */
#home
{
    min-width: 1000px;
}

#grand_arbre
{
    position: absolute;
    top: 270px;
    width: 1168px;
    height: 1850px;
    left: 50%;
    margin-left: -590px;
}

#help
{
    position: absolute;
    margin-top: 537px;
    width: 50px;
    height: 50px;
    right: 50%;
    margin-right: -496px;
    outline: solid 0px black;
    max-height: 1294px !important;
    z-index: 1;
}

#a_fleche
{
    position: absolute;
    height: 0px;
    border: solid 0px black;
}

.aide_img
{
    width: 42px;
    height: 41px;
    position: relative;
    top: -5px;
    padding: 5px;
    padding-bottom: 9px;
    z-index: 1;
    outline: solid 0px black;
}

#fleche_popularity
{
    overflow: hidden;
    outline: solid 0px black;
    height: auto;
    width: 0px;
    position: absolute;
    left: -22px;
    margin-left: 23px; 
    margin-top: -5px;
    border: solid 0px black;
}

#popularity_img
{
    height: auto;
    width: 870px;
}

#fleche_dancing
{
    overflow: hidden;
    outline: solid px black;
    position: absolute;
    bottom: 0px;
    margin-left: 0px;
    height: 0px;
    border: solid 0px black;
}

#dancing_img
{
    height: 1250px;
    width: auto;
}


#help:hover #fleche_dancing
{
    height: 1250px;
}

#help:hover #fleche_popularity
{
    width: 880px;
    margin-left: -858px;
}


/* Trending_nyews_home */

#titre_nyews
{
    position: absolute;
    top: 2090px;
    width: 700px;
    height: 40px;
    left: 50%;
    margin-left: -350px;
    text-align: center;
    padding-bottom: 17.5px;
    padding-top: 2.5px;
}

#trending
{
    position: absolute;
    width: 640px;
    top: 2150px;
    left: 50%;
    margin-left: -350px;
    height: 840px;
}

#trending #video
{
    position: relative;
    top: 0px;
    left: 50%;
    margin-left: -320px;
}

#trending #titre_interview
{
    position: absolute;
    top: 360px;
}

#trending #date_interview
{
    position: absolute;
    top: 475px;
}

#trending article
{
    position: relative;
    top: 35px;
    text-align: justify;
    letter-spacing: 0.05em;
    font-size: 0.85em;
    margin-left: -400px;
    width: 75%;
    left: 74%;
    outline: solid 0px black;
}

#trending article p{
    text-indent: 30px;
}

#read_more
{
    position: absolute;
    left: 50%;
    margin-left: -90px;
    text-align: center;
    padding-top: 7px;
    height: 36px;
    width: 180px;
    bottom: 36px;
    border-radius: 50px;
    letter-spacing: 1px;
}

@-moz-document url-prefix(){
    #read_more{
        letter-spacing: 2px;
    }
}
/* PAGE MUSIC */
#music
{
}

#page_search #wrap
{
    min-height: 390px;
}

/* PAGE_NYEWS */

#wrap_nyews
{
    height: 3000px;
    overflow-x: hidden;
}

#page_arbre #wrap
{
    margin-bottom: 165px;
    margin-left: -10px;
    width: 102%;
    min-height: 1000px;
    box-shadow: inset 0px -40px 80px white;
}

#page_search #wrap
{
    margin-bottom: 165px;
    margin-left: -10px;
    width: 102%;
    min-height: 400px;
    box-shadow: inset 0px -40px 80px white;
}


#video
{
    position: relative;
    top: 0px;
    margin-bottom: 50px;
    height: 400px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    z-index: 0;
    outline: solid 0px black;
}

#interview
{
    position: relative;
    font-family: tahoma, 'gothic', arial, sans serif;
    font-size: 14px;
    min-height: 1500px;
    width: 940px;
    left: 50%;
    padding-top: 55px;
    top: 580px;
    margin-left: -470px;
    background-color: rgba(255,255,255,0.8);
}

.nyews_subject
{
    position: absolute;
    width: 115px; 
    height: 25px;
    background-color: rgba(223, 212, 251, 0.5);
    font-family: 'gothic', arial, sans serif;
    text-transform: uppercase;
    color: rgb(128, 60, 150);
    text-align: center;
    padding-top: 5px;
    top: 0px;
    border-top: solid 1px rgb(223, 212, 251);
    border-left: solid 1px rgb(223, 212, 251);
}

#titre_interview
{
    font-family: 'gothic', arial, sans serif;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 490px;
}

#date_interview
{
    position: absolute;
    top: 583px;
    font-family: 'gothic', arial, sans serif;
    width: 100%;
    text-align: center;
}

#interview #intro
{
    position: relative;
    left: 50%;
    margin-left: -370px;
    text-align: justify;
    width: 740px;
    top: 100px;
    letter-spacing: 0.5px;
}

.features
{
    position: absolute;
    top: 830px;
    width: 620px;
    background-color: white;
    margin-left: 25px;
    padding: 25px;
    padding-top: 5px !important;
    border: solid 1px black;
    text-align: justify;
    letter-spacing:0.5px;
}

.fleche_features
{
    width: 20px;
    height: 20px;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color: white;
    position: absolute;
    left: -27px;
    margin-top: 13px;

    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* Internet Explorer */
    -moz-transform:rotate(45deg); /* Firefox */
    -webkit-transform:rotate(45deg); /* Safari et Chrome */
    -o-transform:rotate(45deg); /* Opera */
}

.number_feature, .p_feature
{
    display:  inline-block;
    vertical-align: top;
    height: 40px;
}

.number_feature
{
    width: 20px;
    text-align: center;
    margin-top: 16px;
}

.p_feature
{
    width: 175px;
    margin-top: 8px;
    letter-spacing: 0px;
}


#title-1 p, #title-6 p
{
    margin-left: 4px;
}


/*.scrollable
{
    overflow-y:scroll;
    position:absolute;
    padding:0 17px 0 0;
    width: 100%;
    height:100%;
}

.scrollbar
{
    cursor:n-resize;
    position:absolute;
    overflow:auto;
    top:0px;
    right:0px;
    z-index:2;
    background:#444;
    width:14px;
    border-radius:8px;
}*/

#titres_features
{
    position: absolute;
    margin-left: 20px;
    width: 200px;
    top: 818px;
    left: 693px;
    text-transform: uppercase;
    font-family: 'gothic', arial, sans serif;
    letter-spacing: 0.5px;
    font-size: 0.95em;
}

#titres_features ul
{
    padding-left: 0px;
}

#titres_features ul li
{
    background-color: #FAF8FF;
    height: 52px;
    border: solid 1px #DFD4FB;
    margin-top: -1px;
}

body:not(.dragging) #titres_features ul li:hover
{
    cursor: pointer;
    background-color: rgb(233,222,261) !important;
}

#features_title
{
    text-align: center;
    background-color: rgb(223, 212, 251) !important;
    border: solid 1px black !important;
    height: 9px !important;
    padding-top: 0px !important;
    padding-bottom: 10px !important;
    margin-bottom: 1px;
}


body:not(.dragging) #features_title:hover
{
    cursor: default !important;
}

#greffe
{
    position: relative;
    top: 200px;
    display: none;
}

/* PAGE_CONTACT */

#page_contact #wrap
{
    min-height: 1100px;
}



#page_terms #wrap
{
    height: 1000px !important;
}

.text_contact
{
    margin-top: 40px;
    margin-left: 0px;
    margin-right: 25px;
    font-size: 0.9em;
}

.cadre_terms
{
    width: 650px !important;
}

.text_terms
{
    margin-left: 30px;
    margin-right: 40px;

}

.text_terms a:hover
{
    text-decoration: underline;
}

#questions, #lien_contacts
{
    display: inline-block;
    vertical-align: top;
    margin-top: 50px;
    margin-left: 10px;
    margin-bottom: 40px;
}

#questions
{
    margin-left: 60px;
}

.img_cadre_contact
{
    position: absolute;
    width: 700px;
    height: auto;
    left: 50%;
    margin-left: -350px;
    z-index: -1;
    margin-top: 480px;
}

#arbre_cadre_haut
{
    position: absolute;
    top: 0px;
}

#arbre_cadre_bas
{
    margin-top: 575px;
}

#add
{
    text-align: center;
}

/* ABOUT_GENRES */


.page_about #wrap
{
    height: 1580px !important;
}

.page_about #questions, .page_about #lien_contacts
{
    margin-top: 15px;
    margin-bottom: 0px;
}

.page_about #questions
{
    text-align: right !important;
    line-height: 5.3em !important;
}

.page_about #questions li
{
    margin-left: -10px !important;
    max-height: 30px;
}

.page_about #questions li strong
{
    position: relative;
    top: -18px;
}

.text_score, .reliable
{
    text-align: center !important;
}

.def_criteres
{
    font-size: 0.9em !important;
    margin-top: 16px !important;
    line-height: 1.70em;
    max-width: 650px;
    text-shadow: 0px 1px 1px rgb(200, 200, 200) !important;
}

#fiche
{
    position: relative;
    width: 840px;
    left: 50%;
    padding-top: 35px;
    top: 534px;
    margin-left: -475px;
    background-color: rgba(255, 255, 255, 0.85);
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 450px;
}

.titre_fiche
{
    position: relative;
    left: 50%;
    margin-left: -200px;
    height: 25px;
    width: 400px;
    border: solid 0px black;
    padding-top: 20px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    line-height: 0 !important; 
}

.titre_section
{
    font-size: 1.9em;
    text-align: center;
    margin-top: 0px !important;
    letter-spacing: 0.03em;
}

.separateur_titre
{
    position: relative;
    left: 50%;
    margin-left: -250px;
    top: -45px;
    width: 500px;
    height: 3px;
    /* box-shadow: 0px 1px 1px rgba(150,150,150,1); */
    background-color: #DFD4FB;
    outline: solid 0px black;
}

#fiche article
{
    font-family: tahoma, arial, sans serif;
    text-align: justify;
    font-size: 0.95em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    position: relative;
    text-shadow: 0px 1px 1px rgb(200, 200, 200);
    top: -10px;
}

#fiche article p
{
    margin-top: 0px !important;
}

		/* PAGE ABOUT_US */

#us
{
    position: relative;
    width: 840px;
    left: 50%;
    padding-top: 35px;
    top: 515px;
    margin-left: -495px;
    background-color: rgba(255, 255, 255, 0.85);
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 450px;
}

#grand_arbre_page_about
{
	position: absolute;
    top: -150px;
    width: 1600px;
    height: 2700px;
    left: 50%;
    margin-left: -805px;
    opacity: 0.3;
    z-index: -2;
}

.img_cadre_us
{
    position: absolute;
    width: 700px;
    height: auto;
    left: 50%;
    margin-left: -350px;
    z-index: -1;
	margin-top: 0px !important;
}

#arbre_cadre_haut_us
{
	margin-top: 401px;
	opacity: 0.45;
}

#us article
{
	font-family: tahoma, arial, sans serif;
    text-align: justify;
    font-size: 0.95em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    position: relative;
    top: -10px;
	text-indent: 50px;
}

#us article a:hover
{
	text-decoration: underline;
}

.avatar
{
	width: 200px;
	margin: 25px;
	margin-top: 35px;
}

.pierre
{
	float: left;
	-ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
    transform: rotate(-10deg);
	box-shadow: 4px 4px 10px rgb(100,100,100);
	margin-left: 5px;
}

.sam
{
	float: right;
	-ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
	box-shadow: -4px 4px 10px rgb(100,100,100);
	margin-right: 10px;
	margin-left: 15px;
}

.alex
{
	float: left;
	-ms-transform: rotate(-6deg); /* IE 9 */
    -webkit-transform: rotate(-6deg); /* Chrome, Safari, Opera */
    transform: rotate(-6deg);
	box-shadow: 4px 4px 10px rgb(100,100,100);
	margin-left: 5px;
}

		/* PAGE PRE_HOME */

#pre_home #wrap
{
    height: 700px;
}

#cadre_1
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    top: 595px;
    width: 860px;    
}

#cadre_1 li
{
    margin-left: -25px;
    outline: solid 0px black;
}

#how_to
{
    position: absolute;
    margin-top: 592.5px;
    text-align: center;
    left: 50%;
    margin-left: -98px;
}

#start
{
    position: absolute;
    left: 50%;
    margin-left: -90px;
    text-align: center;
    padding-top: 7px;
    height: 36px;
    width: 180px;
    margin-top: 850px;
}

#cadre_1 strong
{
}

/* REQUESTS */
#requests
{
    height: 2000px;
}

#liste_requests
{
    position: absolute;
    top: 500px;
    text-align: left;
    left: 50%;
    margin-left: -180px;
}

/* FOOTER */
#footer
{
    position: relative;
    bottom: -10px;
    height: 253px;
    clear: both;
    left: 0;
    right: 0;
    background-color: white;
    width: 730px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px -5px 10px white;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index: 3;
    outline: solid 0px black;

}

#footer li
{
    position: relative;
    top: 75px;
    left: 20.5%;
    display: inline-block;
    margin-right: 60px;
    outline: solid 0px black;
}

#footer h4
{
    text-align: center;
    font-size: 0.8em;
    color: #DFD4FB;
    text-shadow: 0px 1px 1px rgb(50,50,50);
    position: relative;
    top: 110px;
    letter-spacing: 0.1em;
    outline: solid 0px black;
}

/* BETA TEST - PASSWORD */

#page_pass
{
    height: 850px;
}

#password
{
    position: absolute;
    text-align: center;
    top: 550px;
    left: 50%;
    margin-left: -95px;
}

.answer
{
    position: absolute;
    text-align: center;
    top: 550px;
    left: 50%;
    margin-left: -210px;
}

/* PAGE(S)_ARBRE */

#def_genre
{
    width: 800px;
    margin-left: 105px;
    margin-bottom: 40px;
    height: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    outline: px solid black;
}

#learn_more
{
    position: relative;
    left: 50%;
    margin-left: -65px;
    top: -20px;
    bottom: 10px;
    text-align: center;
    padding-top: 2px;
    height: 30px;
    width: 130px;
    outline: solid px black;
}


#title_artist
{
    position: absolute;
    top: 13px;
    margin-top: 3px;
    padding-right: 7px;
    left: 160px;
    line-height: 0.5em;
    width: 650px;
    list-style-type: none;
    z-index: 2;
}

#note_titre
{
    margin-top: 3px;
}

.waveform
{
    height: 65px;
    outline: solid px black;
    background-color: white;
    width: 680px;
    margin-top: 37px;
    margin-left: -30px;
    margin-right: 10px;
}
canvas
{
    margin-top: 0px;
}

.waveform:not(.playing) canvas, .waveform_side:not(.playing) canvas
{
    opacity: 0.8;
}

body:not(.dragging) .waveform:not(.playing) canvas:hover,body:not(.dragging)  .waveform_side:not(.playing) canvas:hover
{
    cursor: url("../img/play_cursor.png"), pointer;
    opacity: 1;
}

.waveform.playing canvas, .waveform_side.playing canvas
{
    opacity: 1;
}

.blocks_search canvas
{
    margin-top: 0px;
}

.soundwave_loader
{
    height: 60px;
    margin-left: 295px;
}

.clock
{
    position: absolute;
    left: 563px;
    bottom: 13px;
    width: 16px;
    height: 16px;
}

.cadre_music_bottom
{
    outline: solid 0px black;
    width: 100%;
    z-index:4;
}

.sub_genre
{
    position: absolute;
    bottom: 10.5px;
    left: 160px;
    color: rgb(128, 50, 160);
    outline: solid 0px black;
    width: 238px;
    z-index: 3;
}


.liens_triplet
{
    position: relative;
    width: 150px;
    top: -807.5px;
    right: -858px;
    box-shadow: 0px 2px 2px black;
    border-radius: 2px;
    min-height: 167px;
}

.liens_triplet.playing{
    z-index: 2
}

.liens_triplet:hover, .liens_triplet.dragging
{
    z-index: 3;
}

.liens_triplet_search
{
    top: -262px !important;
}

.liens_triplet_search:hover
{
    z-index: 2;
}

#artist_soundcloud ul
{
    overflow: hidden;
    height: 0px;
    width: 134px;
    position: relative;
    left: -12px;
    top: -2px;
    font-size: 0.8em;
    text-transform: uppercase;
    outline: solid 0px black;
}

#artist_soundcloud ul li
{
    line-height: 1.2em;
}

#artist_soundcloud ul:hover
{
    overflow: visible !important;
}

#artist_soundcloud:hover ul
{
    height: 50px;
}

.same
{
    position: relative;
    left: -12px;
    line-height: 1.5em;
}

.growing_link
{
    position: relative;
    left: 13px;
    text-align: left;
    margin-top: -2px;
    width: 125px;
    text-transform: uppercase;
    font-size: 0.92em;
    letter-spacing: 0.1em;
    outline: solid 0px black; 
}

.growing_link ul
{
    overflow: hidden;
    position: relative;
    left: 13px;
    width: 150px;
    padding-left: 0px;
    text-align: left;
    font-size: 0.8em;
    height: 0px;
    outline: solid 0px black;
}

.growing_link:hover ul, .growing_link.playing ul, .growing_link.dragging ul
{
    outline: solid 0px black;
    height: 192px;
}

#same_genre, #other_genres
{
    position: relative;
    left: 7px;
    letter-spacing: 0.05em !important;
}

/*.same_genre .more_track, .other_genres .more_track,{
    overflow: hidden;
}*/


.more_track
{
    position: relative;
    margin-top: 0px;
    border-top: solid 1px rgb(210, 195, 249);
    padding-left: 3px;
    padding-top: 5px;
    height: 50px;
    outline: solid 0px black;
}

.more_track:hover
{
    box-shadow: inset -3px 0px 2px #EDE7FD;
}

.more_track .waveform_side{
    opacity:0.8;
    width:150px;
    height:38px;
    margin-left:-3px;
    position:absolute;
    top:0px;
}

.more_track_content{
    position:absolute;
    max-width: 148px;
    height: 60px !important;
    overflow: hidden;
    z-index: 8;
}

.more_track li
{
    //height:56px;
}
.more_track li p
{
    top: -44px;
    position: relative;
    margin-left: 33px;
    margin-top:0px;
    line-height: 1em;
    left: 0px;
    white-space: nowrap;
    z-index: -5;
    overflow:hidden;
    color: rgb(128,60,150);
    clear: both;
    float: left;
}


.more_track .side_play_pause
{
    float: left;
    margin-right: 7px;
    margin-top: 0px;
    height: 16px;
    z-index: 9;
    padding-left: 10px;
    padding-right: 2px;
    padding-top: 15px;
    padding-bottom: 18px;
}

.side_track:hover .side_play_pause
{
    background-color: #EDE7FD;
    box-shadow: 3px 0px 2px #EDE7FD;
}

.more_track .play_img{

    margin: none;
    width: 16px;
    height: auto;
    z-index: 9;
}

.high-z{
    z-index:1000;
}

#more
{
    position: relative;
	z-index: 8;
	text-align: center;
    height: 420px;
    margin-top: 2px;
    padding-top: 5px;
    max-height: 20px;
}


body:not(.dragging) .side_track.not_loaded:hover, body:not(.dragging) .trans_long:hover
{
    cursor: url("../img/mainopen.png") 5 5, auto;
}

.side_track.not_loaded:active
{
    cursor: url("../img/mainclosed.png") 5 5, move;
}


/* INSANE + jauge */

#fleche_haut
{
    position: relative;
    top: -16px;
    width: 20px;
    z-index: 1;
}

.insane
{
    position: relative;
    top: -424px;
    margin-left: 261px;
    left: 50%;
    text-align: center;
    height: 45px;
    width: 70px;
    z-index: -5;
}

.masque_insane
{
    float: left;
    margin-left: 8px;
    margin-top: -20px;
    width: 16px;
    height: auto;
}

.insane span
{
    position: relative;
    top: -13px;
    bottom: 10px;
}

.insane_search
{
    top: 16px !important;
}

.accuracy
{
    position: relative;
    top: -240px;
    margin-left: -369px;
    left: 50%;
    text-align: center;
    height: 45px;
    width: 300px;
}

.jauge
{
    position: relative;
    width: 290px;
    height: 1em;
    bottom: 14px;
}

.accuracy p
{
    position: relative;
    top: -12px;
}

.fleche_accuracy
{
    position: relative;
    left: -115px !important;
}

/* BOITE LIENS DEROULANTS */

.liens_triplet ul, .liens_triplet_search ul
{
    margin-top: 5px;
    margin-left: -31.5px;
    line-height: 1.05em;
    outline: solid 0px black;
}

#liste_liens
{
    position: relative;
    top: 13px;
    left: 33px;
    width: 130px;
    padding-left: 10px;
    padding-bottom: 16px;
}

#scores, .liens_triplet, .liens_triplet_search
{
    background-color: white;
}

#scores, #cadre_music
{
    position: relative;
    box-shadow: 0px 2px 2px black;
    border-radius: 2px;
}

#scores
{
    left: 0px;
    height: 167px;
    width: 125px;
    color: rgb(128, 50, 160);
}

#cadre_music
{
    left: 141.5px;
    top: -211.5px;
    width: 700px;
    height: 167px;
    background-color: #DFD4FB;
    z-index: 1;
}

.blocks_track
{
    outline: solid px black;
    min-width: 1010px;
    height: 287px;
    max-height: 287px;
}

#liste_arbre
{
    position: absolute;
    top: 540px;
    height: auto;
    width: 1015px;
    min-width: 1015px;
    left: 50%;
    margin-left: -505px;
    outline: px solid black;
}

.time
{
    position: absolute;
    left: 590px;
    font-size: 1em;
    bottom: -5px;
    color: rgb(128,60,150);
}

#support_feuilles
{
    position: absolute;
    bottom: 0px;
    left: 8px;
    outline: solid 0px black;
}

.feuilles_score
{
    width: 27px;
    height: auto;
}

.ul_feuille
{
    width: 27px !important;
}

#M, #L, #C
{
    display: inline-block;
    vertical-align: bottom;
    width: 25px;
    outline: solid px black;
}

#M, #L
{
    margin-right: 12px;
}

.fleche
{
    position: relative;
    width: 17px;
    z-index: 1;
    outline: solid px black;
}

#fleche_gauche
{
    left: 125px;
    top: -88px;
}

.blocks_track #fleche_droite
{
    left: 841px;
    top: -302px;
}

.blocks_track .play_sound
{
	left: 342px;
}


.branche
{
    position: relative;
    left: 10px;
    outline: solid 0px black;
    width: 580px;
    height: auto;
}


.btn_feuille
{
    position: relative;
    width: 80px;
    height: auto;
    margin-left: 21px;
    z-index: 1;
    top: 137px;
    left: -3px;
}

#btn_feuilles
{
    position: relative;
    height: 200px;
    width: 650px;
    top: -293px;
    left: 175px;
    background-image: url('../img/arbre_choix_musique.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 88% 150%;
}

.feuille_-c
{
    margin-left: 17px !important;
}

.feuille_-m
{
    margin-right: -10px !important;
    margin-left: 32px;
}

.choose
{
    position: relative;
    top: -365px;
    left: 50%;
    margin-left: 155px;
    width: 550px;
    height: 50px;
    background-color: #DFD4FB;
    border-radius: 2px;
    box-shadow: 0px 2px 2px black;
    padding-top: 1px;
}

.drag_tree
{
    z-index:0;
    opacity:0;
    top:-415px;
    width:540px;
    height:40px;
    margin-top:-1px;
    border : dashed 5px rgb(223,212,251);
    background-color:white;
    -o-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;

}

.drop_tree
{
    z-index:0;
    opacity:0;
    top:-465px;
    width:540px;
    height:40px;
    margin-top:-1px;
    border : dashed 5px rgb(128,60,150);
    background-color:white;
    -o-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
}

.drag_tree.active
{
    opacity:1;
    z-index:10;
}

.drop_tree.up
{
    z-index:11;
}

.drop_tree.active
{
    opacity:1;
    z-index:11;
}

.drop_tree.warning{
    border : dashed 5px rgba(204,0,51,0.6);
}

#note_drag{
    position:absolute;
    opacity:0;
    height:30px;
    z-index:0;
    left:0px;
    top:0px;
}

#note_drag.active
{
    opacity:1;
    z-index:15;
}


.fin
{
    position: relative;
    top: 0px;
    left: 50%;
    margin-left: -290px;
    width: 550px;
    height: 50px;
    background-color: rgb(252,213,213);
    border-radius: 2px;
    padding-top: 1px;
}

#grand_arbre_page_arbre, #grand_arbre_page_arbre_2, #grand_arbre_page_arbre_3, #grand_arbre_fiche, #grand_arbre_fiche_2
{
    position: absolute;
    top: 100px;
    width: 1490px;
    height: 2700px;
    left: 50%;
    margin-left: -750px;
    opacity: 0.3;
    z-index: -3;
}

#grand_arbre_page_arbre_2
{
    top: 2550px !important;
}

#grand_arbre_page_arbre_3
{
    top: 4900px !important;
}

#grand_arbre_fiche
{
    top: -190px;
}

#grand_arbre_fiche_2
{
    opacity: 0;
    top: 2150px;
}

/* PAGE_SEARCH */

.liste_search
{
    margin-top: 80px;
}

.blocks_search
{
    /*position: relative;*/
	height: 240px;
    margin-left: 10px;
}

/* .blocks_search.mlc
{
    height: 240px !important;
}

.blocks_search:not(.mlc)
{
    height: 185px !important;
} */

/*////////..... GRANDE barre de recherche .....///////////*/

#search_bar
{
    position: absolute;
    top: 530px;
    left: 50%;
    margin-left: -510px;
    border-radius: 3px;
    width: 1030px;
    height: 44px;
    padding-top: 9px;
    background-color: #DFD4FB;
    box-shadow: 0px 2px 2px black;
}

#search_bar .form_control, #search_bar .searchbar-form
{
    margin-left: 4px !important;
    height: 45px !important;
}

.input_search
{
    position: relative;
    top: -4px;
    width: 715px !important;
    left: -30px !important;
    padding-left: 30px !important;
}

.case_input
{
    width: 665px;
    height: 35px;
    overflow: hidden;
    margin-left: 10px;
    border-radius: 3px;
}

#search_bar .searchbar-form
{
    width: 540px;
}

#search_bar #triplet_search
{
    width: 345px;
    outline: solid 0px black;
    height: 37px;
    margin-left: -4px;
}

.case_input, #search_bar #triplet_search
{
    display: inline-block;
    vertical-align: top;
}

.case_chiffre
{
    position: absolute;
    top: 9px;
    width: 90px;
    height: 35px;
    overflow: hidden;
    outline: solid 0px black;
    margin-left: 8px;
    color: rgb(128, 50, 160);
    border-radius: 3px;
}

#case_1
{
    left: 690px;
}

#case_2
{
    left: 790px;
}

#case_3
{
    left: 890px;
}

.behind_bar
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 35px;
    color: rgb(128, 50, 160);
    font-size: 0.8em;
    text-align: center;
    background-color: white;
    z-index: 6;
}


.over_triplet_bar
{
    position: absolute;
    top: 10px;
    width: 90px;
    z-index: 8;
    overflow: hidden;
    padding-top: 0px;
}

#over_melody_bar
{
    left: 699px;
    height: 0px;
}

#over_loudness_bar
{
    left: 799px;
    height: 0px;
}

#over_complexity_bar
{
    left: 899px;
    height: 0px;
}

.over_triplet_bar ul
{
    border: solid 1px grey !important;
}

#case_1 div p, #case_2 div p, #case_3 div p
{
    position: relative;
    height: 35px;
    top: -13px;
    padding-top: 10px;
    text-align: center;
    z-index: 2;
}

.over_triplet_bar li
{
    position: relative;
    left: -40px;
    text-align: center !important;
    width: 88px;

}

.case_input:hover, #case_1:hover, #case_2:hover, #case_3:hover
{
    box-shadow: 0px 0px 4px rgb(200, 110, 250);
}

#case_1 #deroule_melody, #case_2 #deroule_loudness, #case_3 #deroule_complexity
{
    top: -54px !important;
    width: 11px !important;
    opacity: 0;
}

#search_bar #loupe
{
    position: absolute;
    left: 993px;
    margin-top: 5px;
    margin-left: 5px;
    width: 22px;
    height: auto;
}

#search_bar #triplet_search #loupe:active
{
    margin-top: 7px;
    margin-bottom: -2px;
}

/* ........fin de la grande barre de recherche.......... */

#search_division
{
    position: absolute;
    top: 592px;
    left: 50%;
    margin-left: -510px;
    margin-bottom: 100px;
    width: 1030px;
    box-shadow: 0px 2px 2px black;
}

.genre_search_top
{
    height: 70px;
    text-align: center;
    color: rgb(128, 50, 160);
    border-top: solid 1px #DFD4FB;
    border-left: solid 1px #DFD4FB;
    border-right: solid 1px #DFD4FB;
    background-color: rgba(255,255,255,0.7);

}

body:not(.dragging) .genre_search_top
{
    cursor: pointer;
}

.arbre_search_top
{
    position: absolute;
	width: 25px;
    float: left;
    margin-top: 23px;
	left: 20px;
    display: none;
}

.jauge_genre
{
    width: 380px !important;
    height: 0.9em !important;
    top: 13px;
    margin-left: -35px;
}

.tri
{
    position: absolute;
    margin-top: -8px;
    left: 750px;
    width: 265px;
    letter-spacing: 0px !important;
    display: none;
    text-align: right;
}

.cercle_tri
{
    width: 45px;
    display: inline-block;
    text-decoration: none !important;
    border-radius: 50px;
    box-shadow: 0px 1px 1.5px rgb(80,80,80);
}

.tri a
{
    height: 45px;
}

.fleche_bas_tri
{
    position: absolute;
    width: 10px;
    left: 20px;
    top: 30px;
    opacity: 0;
}

.fleche_1
{
    left: 89px;
    opacity: 0;
}

.fleche_3
{
    left: 139px;
    opacity: 0;
}

.fleche_4
{
    left: 188px;
    opacity: 0;
}

.fleche_5
{
    left: 237px;
    opacity: 0;
}

.tripar_button:hover .fleche_bas_tri
{
    opacity:0.3;
}

.tripar_button:hover .cercle_tri
{
    
}

.tripar_button.selected .fleche_bas_tri
{
    opacity:1;
}

.tripar_button.selected:hover .fleche_bas_tri
{
    opacity:0.7;
}

.tripar_button.selected .cercle_tri, .tripar_score.selected .cercle_tri
{
    opacity:1;
    box-shadow:none;
    border: solid 1px white;
    width: 43px;
}

.tripar_score:not(.selected):hover .cercle_tri{
    opacity:0.8;
}

.genre_search_top p
{
    position: absolute;
    margin-top: 14px;
	width: 400px;
	left: 50%;
	margin-left: -200px;
    font-size: 1.15em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.genre_search_top:hover
{
    background-color: rgb(250, 248, 255);
}

.genre_search_top:hover p
{
    text-decoration: underline;
}

.genre_search_feed
{
    position: relative;
	height: 0;
	overflow: hidden;
    border-left: solid 1px #DFD4FB;
    border-right: solid 1px #DFD4FB;
    border-bottom: solid 1px #DFD4FB;
    background-color: rgb(250, 248, 255);
    z-index:-1;
}


.genre_group.open .genre_search_feed
{
    z-index:1;
	padding-bottom: 55px;
}

/*.genre_group.open .blocks_search
{
	transform: scaleY(1);
}*/

.genre_group.padd .genre_search_feed
{
	padding-bottom: 0px !important;
}

.genre_group.open .genre_search_top
{
    background-color: rgb(250, 248, 255);
}

.genre_group.open .tri{
    display: block;
}


/*@-moz-document url-prefix()    Varitaion pour Firefox 
{
    .genre_search_feed
    {
        padding-bottom: 0px !important;
    }
}*/

.fleche_more
{
    position: absolute;
    bottom: 8px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
}

/* BLOCKS SEARCH */

#search_division .liens_triplet
{
    top: -473px !important;
}

/*#search_division #liste_liens
{
    top: 15px !important;
}*/

.blocks_search #fleche_gauche
{
    position: absolute;
    left: 125px !important;
    top: 78px !important;
}

.blocks_search #fleche_droite
{
    position: absolute !important;
	left: 700px;
    margin-top: -60px;
}

.blocks_search .scores
{
    top: 1px !important;
}

.blocks_search:hover
{
	position: relative;
	z-index: 4;
}

.blocks_search .insane
{
    top: -223px !important;
    margin-left: 265px !important;

}

.blocks_search .play_sound
{
    left: 350px !important;
}

.blocks_search .cadre_music
{
    margin-top: 45px !important;
}


/* FEEDS */
/* icone de notification */
.feeds
{
    height: 50px;

}

.feeds_img
{
    width: auto;
    height: 27px;
}

.feeds_li
{
    padding: 0px !important;
    padding-bottom: 9px !important;
    margin-top: -20px !important;
    height: 40px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 15px;
    margin-left: 0px;
}

.feeds_li:hover
{
    background-color: white !important;
}

.feeds_li:active
{
    background-color: white !important;
}

.feeds_number
{
    position: relative;
    font-size: 0.7em;
    top: 13px;
    right: 8px;
    height: 7px;
    width: 21px;
	text-align: center;
    background-color: #DFD4FB;
    box-shadow: 0px 1px 2px black;
    z-index: 2;
    border-radius: 3px;
    padding-bottom: 6px;

}

.feeds_a
{

    top: 10px;
    right: 18px;
    margin-bottom: 0px !important;
}

/* cadre de notif */
.fleche_feeds
{
    position: relative;
    top: 4px;
    right: 18px;
    width: 16px;
    height: auto;
}

.feeds_cadre
{
	display: none;
    position: absolute;
    right: 3px;
    top: 58px;
    width: 150px;
    height: auto;
    font-size: 0.8em;
    border-radius: 1px;
    opacity: 0;
    display: none;
}

.feeds_cadre li
{
    border-bottom:  solid #DFD4FB 2px;
    text-align: center !important;
    margin-left: -40px !important;
    width: 138px;
    line-height: 1.6em;
    padding-top: 7px !important;
    padding-bottom: 6px !important;
    padding-left: 6px;
    padding-right: 6px;
}

.feeds_cadre li:hover
{
    background-color: #EDE7FD !important;
}

.feeds_cadre li:active
{
    background-color: #EDE7FD !important;
    color: #dfd4fb;
}

.feeds_cadre li:focus
{
    background-color: white !important;
}


/* Volume */

#volume
{
    position: relative;
    top: -33px;
    width: 25px;
    left: -30px;
}

body:not(.dragging) #sound_on:hover
{
    cursor: pointer;
	box-shadow: 0px 0px 8px rgba(128,60,150,0.5);
	/*background-color: rgba(128,60,150,0.5);*/
}

#volume_bar:hover, #volume:hover #volume_bar
{
    height: 120px;
    border-top: solid 1px black;
}

#volume_bar.drag_volume
{
	height: 120px !important;
	border-top: solid 1px black;
}

#sound_on
{
    width: 24px;
	border-radius: 20px;
	padding: 4px;
	padding-right: 2px;
	margin-left: -2px;
	margin-top: -3px;
}

#volume_bar
{
    position: absolute;
    overflow: hidden;
    top: 34px;
    left: -3px;
    height: 0px;
    width: 25px;
    border-bottom-left-radius:  3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0px 3px 3px #323232;
    background-color: white;
}

body:not(.dragging) #volume_bar:hover
{
    cursor: pointer;
}

#volume_level
{
    position: relative;
    left: 9px;
    bottom: -7px;
    width: 7px;
    height: 107px;
    max-height: 107px;
    resize: both;
    background-color: rgba(223,212,251,1);
    border-radius: 1px;

}



/* PAGE SORRY */

#page_sorry
{
}

#interror
{
    position: relative;
    top: 530px;
    width: 700px;
    height: auto;
    left: 50%;
    margin-left: -350px;
    margin-bottom: 370px;
}

#point_interror
{
    position: absolute;
    top: 1030px;
    left: 50%;
    width: 108px;
    margin-left: -47px;
}

.masque_303
{
    margin-top: 25px;
}

#sorry_txt
{
    position: absolute;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    text-align: center;
    letter-spacing: 0.5px;
    top: 940px;
    font-size: 1.5em;
    color: rgb(128, 50, 160);
    line-height: 1.1em;
}

#sorry_txt em
{
    font-size: 0.7em !important;
    font-style: normal;
}

.error_303
{
    margin-top: 55px;
    line-height: 0.9em !important;
}

#sorry_txt span
{
    font-size: 0.6em !important;
}

/* BULLES */

.slide
{
    position: absolute;
    margin-left: -10px;
    margin-top: -20px;
    border: solid 0px black;
    height: 15px;
    width: 160px;
}

.bulle
{
    border: solid 1px rgb(223,212,251);
    background-color: rgba(50,50,50,0.8);
    color: white;
    font-family: tahoma, arial, sans serif;
    padding-top: 7px;
    padding-right: 10px;
    padding-left: 12px;
    padding-bottom: 5px;
    border-radius: 3px;
    box-shadow: 0px 1px 15px rgba(50,50,50,0.8);
    display: none;
    z-index: 4 !important;

    position: absolute;
    left: -11px;
    margin-top: 15px;
    width: 150px;
}

.fleche_bulle
{
    position: absolute;
    margin-top: -13px;
    margin-left: 10px;
    z-index: 2;
    width: 10px;
    height: 10px;
    background-color: rgb(87,87,87);
    border-top: solid 1px rgb(223,212,251);
    border-left: solid 1px rgb(223,212,251);
    z-index: 6;

    /* attention.... rotation !! */

    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* Internet Explorer */
    -moz-transform:rotate(45deg); /* Firefox */
    -webkit-transform:rotate(45deg); /* Safari et Chrome */
    -o-transform:rotate(45deg); /* Opera */
}

.fleche_bulle_m
{
    left: 9px;
}

.fleche_bulle_l
{
    left: 50px;
}

.fleche_bulle_c
{
    left: 91px;
}

.bulle ul
{
    letter-spacing: 0.5px;
    font-size: 13px;
    text-align: left !important;
    line-height: 16px !important;
    border-radius: 5px;
}

#M span, #L span, #C span
{
    padding-left: 10px;
    padding-right: 10px;
}

#M span
{
    margin-left: -4px;
}

#C span
{
    margin-left: -3px;
}

.bulled_word:not(.dragging) span:hover, .bulled_word:not(.dragging) span:hover
{
    cursor: help;
    text-decoration: none !important;
}

.blocks_search .bulled_title:not(.dragging):hover, .blocks_search .bulled_title:not(.dragging) span:hover, .blocks_search .bulled_title:not(.dragging):hover span img:hover
{
    cursor: url("../img/mainopen.png") 5 12, move;
}

.blocks_search .bulled_title:not(.dragging) .bulle:hover{
    cursor: pointer;
}

.bulled_word:hover, .bulled_word.dragging
{
    text-decoration: none !important;
}


.feuille_number
{
    padding: 0px !important;
    margin-left: 0px !important;
}

.bulle a
{
    color: rgb(223,212,251);
    font-weight: bold;
    letter-spacing: 0px;
}

.bulle_a_top
{
    margin-top: -3px;
    margin-left: -3px;
}

.bulle a:hover
{
    text-decoration: underline;
}

.bulle_a
{    
    position: relative;
    text-align: justify;
    top: 7px;
}

.bulled_word:hover span, .bulled_word.dragging span
{
    text-shadow: 0px 1px 1px rgb(100,100,100);
}

.bulled_word:hover .bulle_artwork_track, .bulled_word:hover .bulle_sub, .bulled_word:hover .bulle_score
{
    display: block;
}


.bulle_sub
{
    width: 165px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
	z-index: 6 !important;
}

.bulle_sub .fleche_bulle
{
    margin-top: -8px !important;
}

.bulle_sub .slide
{
    height: 27px !important;
    margin-top: -25px;
}

.bulle_sub ul
{
    margin-left: 0px !important;
    padding-left: 0px !important ;
    margin-top: 3px !important;
}

.bulle_artwork
{
    padding-bottom: 2px !important;
    padding-right: 0px !important;
    text-transform: none !important;
    left: -175px;
    top: -33px;
    width: 150px !important;
    z-index: 10 !important;
}

.bulle_artwork img
{
    margin-left: -5px;
    margin-top: -9px;
    width: 148px;
}

.bulle_artwork img:hover
{
    box-shadow: 0px 0px 4px #dfd4fb;
}

.fleche_bulle_top
{
    top: 37px;
    left: 147px;

    transform:rotate(135deg);
    -ms-transform:rotate(135deg); /* Internet Explorer */
    -moz-transform:rotate(135deg); /* Firefox */
    -webkit-transform:rotate(135deg); /* Safari et Chrome */
    -o-transform:rotate(135deg); /* Opera */
}

.slide_top
{
    width: 35px;
    height: 100px;
    border: solid 0px black;
    position: absolute;
    right: -30px;
}

.title_bulle
{
    margin-left: -4px;
    padding-right: 4px;
}

body:not(.dragging) .title_bulle span
{
    cursor: default !important;
}

/* Bulles des artistes */

.bulle_artist
{
    left: -130px !important;
    z-index: 2 !important;
    width: 140px !important;
    padding-bottom: 13px !important;
}

.bulle_artist .bulle_a_top{
    white-space: nowrap;
}

.bulle_artist .fleche_bulle_top
{
    left: 137px;
}

#bulle_artist_0
{
    top: -37px;
}

#bulle_artist_1
{
    top: -21px;
}

#bulle_artist_2
{
    top: -6px;
}

#bulle_artist_3
{
    top: 9px;
}

.bulle_artist ul
{
    border-radius: 0px !important;
    height: auto !important;
    overflow: visible !important;
}

.bulle_artist img
{
    position: relative;
    top: 6px;
    width: 136px;	
    margin-left: 0px;
}

@-moz-document url-prefix()    
{
    .bulle_artist img
    {
        margin-left: -1px;
    }
}

.bulle_artist .bulle_a_top
{
    font-size: 11px;
}

/* Bulles des sides_tracks */

.growing_link ul:hover
{
    overflow: visible !important;
}

/*.side_track:hover .bulle_side_track
{
    display: block;
}*/

.bulle_side_track
{
    transition: all 0.5s;
    left: -149px !important;
    width: 127px !important;
    padding-top: 3px !important;
}

.bulle_side_track .title_bulle{
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.bulle_side_track li
{
    margin-left: 17px !important;
}

.bulle_side_track .fleche_bulle_top
{
    top: 52px;
    left: 124px;
}

#social_links .bulled_word:hover .bulle{
    opacity: 1;
    margin-top: 60px !important;
}

#bulle_fb
{
    display: block !important;
    opacity: 0;
    width: 61px !important;
    margin-left: 85px !important;
    margin-top: -10060px !important;
    height: 82px !important;
    top: -40px !important;
}

#bulle_fb .slide_top
{
    width: 20px;
    height: 80px;
    border: 0px solid #000;
    position: absolute;
    top: -5px;
    right: -20px;
}

#bulle_fb .fleche_bulle_top
{
    left: 58px;
    top: 30px;
}

body:not(.dragging) .bulle_side_track:hover, body:not(.dragging) .bulle_side_track span:hover
{
    cursor: default !important;
}

.feuilles_side
{
    position: relative !important;
    width: 27px !important;
    top: 0px !important;
    margin-left: 8px !important;
    padding-top: 2px !important;
}

.feuille_side_l
{
    margin-left: 3px !important;
}

.feuille_side_c
{
    margin-left: 3px !important;
}

.feuilles_side:hover
{
    box-shadow: none !important;
}

.div_side_note
{
    width: 43px;
    display: inline-block;
    vertical-align: top;
    border:solid px white;
    margin-left: -5px;
    text-align: center;
}

.div_side_m
{
    margin-left: -9px;
}

.div_side_l
{
    padding-left: 5px;
}

.side_m
{
    font-weight: bold !important;
    color: rgb(142,245,159) !important;
    margin-left: 9px !important;
}

.side_note_m
{
    margin-left: 8px !important;
}

.side_l
{
    font-weight: bold !important;
    color: rgb(253,97,106) !important;
}

.side_c
{
    font-weight: bold !important;
    color: rgb(107,151,251) !important;
}

.side_notes_li
{
    margin-left: -10px;
}

.side_note
{
    text-align: center !important;
}

.sub_genre_side
{
    margin-top: 2px;
    width: 125px !important;
}

.side_track_2 .bulle
{
    top: -37px;
}

.side_track_3 .bulle
{
    top: -37px;
}

.side_time
{
    position: absolute;
    color: white;
    opacity: 0.7;
    font-size: 16px;
    margin-top: 12px;
    width: 100% !important;
    text-align: center !important;
}

body:not(.dragging) .side_time:hover
{
    cursor: default;
}


body.dragging
{
    cursor: url("../img/mainclosed.png") 5 5, move;
}

body.dragging .side_track .trans_long
{
    cursor: url("../img/mainclosed.png") 5 5, move;
}

		/* Drapeaux des langues */
		
#flags
{
	position: absolute;
	right: 110px;
	margin-top: -50px;
	width: 100px !important;
	border: solid 0px black;
	height: 50px !important;
	text-align: right;
	padding-right: 5px;
}

#flags_wiki
{
	position: absolute;
	z-index: 7;
	left: 50%;
	margin-left: 415px;
	top: 507px;
	border: solid 0px black;
	text-align: right;
	padding-right: 5px;
}


#french_flag, #english_flag
{
	position: relative;
	bottom: -27px;
	width: 22px;
	display: inline-block;
	opacity: 0.7;
}

#french_flag:hover, #english_flag:hover
{
	cursor: pointer;
	opacity: 1 !important;
}

		/* Nouveau pre_home*/
	
#frise
{
	position: absolute;
	top: 520px;
	width: 100%;
	text-align: center;
	outline: solid 0px black;
}
		
.frise, #frise
{
	display: inline-block;
	vertical-align: middle !important;
	margin-right: -5px;
}

.point_frise
{
	position: relative;
	top: 50%;
	border-radius: 152px;
	border: solid 4px rgb(223,212,251);
	width: 20px;
	height : 20px;
	background-color: white;
	overflow: visible !important;
}

.point_frise.hoverable:hover
{
	cursor: pointer;
	background-color: rgb(223,212,251);
}

.ca_tourne
{
	box-shadow: inset 0px 0px 10px rgb(100,100,100);
	overflow: hidden !important;
	background-color: rgba(255,255,255,0);
}

.bar_frise
{
	position: relative;
	top: 50%;
	height: 7px;
	width: 130px;
	background-color: rgb(223,212,251);
	z-index: -1;
}

.text_point
{
	position: absolute;
	top: -80px;
	text-align: center;
	width: 150px !important;
	left: 50%;
	margin-left: -75px;
	border: 0px solid black;
	padding-bottom: 40px;
	padding-top: 40px;
	z-index: 3;
}

.number_point
{
	position: absolute;
	bottom: -80px;
	left: 50%;
	margin-left: -47px;
	text-align: center;
	font-size: 20px;
	border: 0px solid black;
	padding: 40px;
}


.point_frise.hoverable:hover .text_point
{
	font-weight: bold;
	color: rgb(128,60,150);
	text-shadow: 0px 2px 2px rgb(100,100,100);
}

.point_frise .text_point.open
{
	font-weight: bold;
	color: rgb(128,60,150);
}

.point_frise.hoverable:active .text_point
{
	font-weight: none;
	text-shadow: none;
	margin-top: 2px;
}

#callage
{
	height: 308px;
	width: 0px;
	border: 0px solid black;
}

.phrase_point
{
	position: absolute;
	left: 50%;
	top: 45px;
	width: 280px;
	margin-left: -140px;
	border: 0px black solid;
	text-transform: uppercase;
	line-height: 30px;
	display: none;
}

.phrase_point strong
{
	color: rgb(128,60,150);
}

.your
{
	font-size: 27px;
}

.type
{
	font-size: 20px;
}

.among
{
	font-size: 13px;
}

.how
{
	font-size: 35px;
}

.triplet_point
{
	font-size: 16px;
}

.img_frise
{
	/*display: none;*/
	position: absolute;
	left: 50%;
	z-index: -1;
	display: none;
	opacity: 0;	
}


.img_point
{
	width: 600px;
	margin-left: -308px;
}

.img_choix1
{
	margin-left: -170px;
	width: 350px;
}

.img_choix2
{
	margin-left: -165px;
}

.entoure_genre
{
	position: absolute;
	width: 160px;
	height: 40px;
	left: 50%;
	margin-left: -80px;
	margin-top: 233px;
	border: 2px dashed rgba(128,60,150,0.8);
	border-radius: 5px;
	display: none;
}


		/* Cache pour IE */
		
#cache_ie
{
	display: none;
	position: fixed;
	top: 0px;
	Left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(100,100,100,0.5);
	z-index: 10;
}

#autres_browsers
{
	position: fixed;
	left: 50%;
	margin-left: -238px;
	margin-top: -170px;
	top: -50%;
	height: 300px;
	width: 400px;
	border: solid 20px rgba(223,212,251,0.8);
	box-shadow: 0px 20px 40px rgb(100,100,100);
	border-radius: 3px;
	background-color: white;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

#autres_browsers h1
{
	color: rgb(128,60,150);
}

#autres_browsers ul
{
	outline: solid 0px black;
	position: absolute;
	left: 50%;
	width: 400px;
	margin-left: -220px;
}

#autres_browsers img
{
	width: 50px;
	border-radius: 50px;
	margin-right: 36px;
}

#autres_browsers img, .adjust
{
	display: inline-block;
	vertical-align: middle;
}

#autres_browsers p
{
	font-family: tahoma, arial, sans serif;
	letter-spacing: 1px;
	line-height: 22px;
}

#autres_browsers img:hover
{
	width: 54px;
	margin-top: 0px;
	margin-right: 34px;
	margin-left: -2px;
}

.adjust
{
	border: solid 0px black;
	width: 0px;
	height: 60px;
}

/* ---------------------------------------------------------------------------
   Correctif du curseur de volume.

   #volume_bar est un enfant de #volume, donc le survol de la barre maintient
   bien #volume:hover. Le probleme etait ailleurs : l'icone s'arrete a 26px de
   haut alors que la barre commence a 34px. En descendant la souris vers le
   curseur on traversait 8px ou aucun des deux n'etait survole, la barre se
   refermait avant d'etre atteinte et le reglage etait impossible.

   Ce pont transparent couvre l'intervalle et garde la chaine de survol intacte.
   --------------------------------------------------------------------------- */
#volume::after
{
    content: "";
    position: absolute;
    top: 18px;
    left: -3px;
    width: 25px;
    height: 22px;
    pointer-events: auto;
}

body:not(.dragging) #volume:hover
{
    cursor: pointer;
}

/* La barre se ferme instantanement quand elle devrait s'estomper. */
#volume_bar
{
    transition: height 200ms ease;
}

/* Rail de fond : sans lui on ne voit pas la course restante, seulement
   le remplissage flottant dans du blanc. */
#volume_bar::before
{
    content: "";
    position: absolute;
    left: 9px;
    top: 7px;
    bottom: 7px;
    width: 7px;
    background-color: rgba(197, 177, 247, 0.28);
    border-radius: 4px;
}

/* Curseur rond a l'extremite du remplissage. La jauge se remplit par le bas,
   le repere se place donc en haut de #volume_level. */
#volume_level
{
    border-radius: 4px;
}

#volume_level::before
{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    margin-top: -6px;
    border-radius: 50%;
    background-color: #7d5fc4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#volume_bar.drag_volume #volume_level::before
{
    box-shadow: 0 0 0 4px rgba(125, 95, 196, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
}