* {
    margin:0; padding:0;
}

head__er,foot_er,n__av,.to_p {
    border:1px solid white;
}

/* bleu font:#04AEDA fond:#05001B  vert:#17B602*/


.floatLeft {
  float:left;
}

.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    /*overflow: hidden;*/
}

/*---------------- body -------------------*/



hmtl {
    font-size:100%;
}

body {
    color:#04AEDA;
    font-family:SonySketchEFRegular;
    font-size:0.813em; /*13*/
    background-color:gray; /*120028;*/
}

a {
    color:#04AEDA;
    font-weight:bold;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

@font-face {
    font-family: 'SonySketchEFRegular';
    src: url('fonts/sony_sketch_ef/sony_sketch_ef-webfont.eot');
    src: url('fonts/sony_sketch_ef/sony_sketch_ef-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sony_sketch_ef/sony_sketch_ef-webfont.woff') format('woff'),
         url('fonts/sony_sketch_ef/sony_sketch_ef-webfont.ttf') format('truetype'),
         url('fonts/sony_sketch_ef/sony_sketch_ef-webfont.svg#SonySketchEFRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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


#container {
    width:1010px;
    margin:0 auto;
    margin-top:10px;
    margin-bottom:20px;
    /*overflow:hidden;
    white-space: nowrap;*/
    background-color:#05001B; /*120028;*/
    padding:20px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), 16px 5px 45px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), 16px 5px 45px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), 16px 5px 45px rgba(0, 0, 0, 0.5);
}


/*--------- header -----------------*/

#container > header .top {
   height:40px;
   background:url("img/menu.jpg") repeat-x;
   border-top: 1px solid #17B602;
   margin-bottom:20px;
   font-family:SonySketchEFRegular;
   letter-spacing: 1.15px;
}
header .left {
    display:inline-block;
    vertical-align:top;
    padding:10px;
    width:480px;
}
header .right {
    display:inline-block;
    vertical-align:top;
    padding:10px;
    width:330px;
}
header .last {
    display:inline-block;
    vertical-align:top;
    padding:10px;
    width:130px;
}

header img {
    filter: alpha(opacity=67);
    opacity: 0.67;
    height:240px;
}

header .top h1 {
    padding:10px;
    font-size:1.351em;
    display:inline-block;
    margin-right:160px;
    vertical-align:top; /* ??? */
}
header .top h1 span {
    color:#aaa;
}
header .top div {
    font-size:1.351em;
    display:inline-block;
    margin-right:20px;
    text-transform:uppercase;
    vertical-align:top; /* ??? */
}

/*----------- menu du haut --------------------*/

header .top div a {
    display:inline-block;
    height:40px;
    line-height:40px;
}
header .top div a:hover {
    background:url("img/menu.jpg") repeat-x;
    background-position:0 -50px;
    text-decoration:none;
    color:#17B602;
}



/*----------- pochette --------------------*/

section {
    position:relative;
}
.pochetteCD {
    position:absolute;
}

#img2_1 {
    display:block;
}
#img2_2,#img2_3 {
    display:none;
}
#img2_1:target {   display:block;  }
#img2_2:target {   display:block;  }
#img2_3:target {   display:block;  }
#img2_1:target + #img2_2 {   display:none;  }
#img2_2:target + #img2_3 {   display:none;  }

/*------------- menu -------------------*/

nav {
  position:relative;
  border-top:1px solid #17B602;
  background:url("img/menu.jpg") repeat-x;
  margin-bottom: 40px;
  margin-top:30px;
}
nav ul {
    font-weight:bold;
    display:inline-block;
   hei_ght:40px;
}

nav  > a {
  display:inline-block;
  height:35px;
  background-repeat:no-repeat;
  background-size:33px;
  background-position:0 3px;
  padding-top:0;
}

nav  > a:nth-of-type(1) {
  margin-left:10px;
}

nav span + a {
    width:75px;
    background-position:0 0px;
    position:relative;
    left:3px;
    background-image:url(img/back.png);
}

nav  span + a + ul + a {
    width:40px;
    position:absolute;
    right:3px;
    background-image:url(img/next.png);
}

nav li {
    display:inline-block;
    position:relative;
}



nav li a {
    display:inline-block;
    line-height:40px;
    text-align:center;
    height:40px;
    width:180px;
    position:relative;    /* clip: rect(0px, 200px, 30px, 0px); sup droit   inf gauche) */
    color:#04AEDA;
    font-size:1.182em;  /* 14px */
    text-decoration:none;
    background:url("img/menu.jpg") repeat-x;
}


nav li a span {
    position:absolute;
    left:28%;
}

nav li a:hover {
    color:#17B602;
    background-position:0 -50px;
    transition-duration: 0.3s;
    transition-property: font-size;
    font-size:2.2em;
}

nav li a:active {
    color:#B75703;
    background-position:0 -100px;
    text-shadow: 1px 1px 11px rgba(255, 255, 255, 1);
}

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

.btn:hover span {
    color: #241F3A;
    text-shadow:0 0 7px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF;  /* -1px 1px 0 #04AEDA,  */
}
.btn:hover {
    text-decoration:none;
}


.btnApple {
    color:#04AEDA;
    text-shadow:1px 1px 1px #000,-1px -1px 1px #000;
    font-weight:bold;
    position:relative;
    display:inline-block;
    border:none;
    border-radius: 18px 18px 18px 18px;
    behavior: url(./js/PIE.htc);
    box-shadow:1px 0 3px #FFFFFF, -1px -2px 9px #00002E inset;
    padding: 10px 32px 10px 32px;
    text-decoration:none;
}
a.btnApple {
    text-indent:0px;
    line-height:1px;
}
.btnApple:active {
    box-shadow:1px 1px 3px #FFFFFF, 4px 3px 9px #00002E inset;
    left:3px;
    top:4px;
    /*padding: 14px 26px 6px 38px;*/
}
a.btnApple:active {
    line-height:2px;
    text-indent:4px;
}

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

section {
    margin-bottom: 30px;
}

section .pochetteCD {
    vertical-align:top;
    margin-right:40px;
    display:inline-block;
    border:8px solid #241F3A;
    outline:3px solid  #04AEDA;
    width: 300px;
}

/*
section .pochetteCDWrapper {
    margin-left:5px;
    box-shadow: -7px 0 10px #FFF;
    transform: rotate(-5deg);
}*/

section .pochetteCD  img {
    height:300px;
    width: 300px;
}
section .pochetteCD  p {
    background-color: #241F3A;
    color:rgba(3, 170, 214, 0.9);
    font-size: 1.763em;/*16*/
    height: 50px;
    letter-spacing: 1.8px;
    margin-top: -5px;/* !!! */
    padding: 5px;
    text-shadow:none;
    fil__ter: Shadow(Color=#04AEDA, Direction=130, Strength=1); /* IE Proprietary Filter marche pas */
    font-weight: normal;

    animation:titreAnimation 4s  linear 0s  1;
}
.ie section .pochetteCD  p {
    color:#04AEDA;
}

@keyframes titreAnimation {
    0% { color:transparent; text-shadow: 0 0 3px #04AEDA, 0 0 8px #04AEDA, 0 0 10px #04AEDA; }
    1%,40% { color:transparent; }
    40%,80% { color:rgba(3, 170, 214, 0.4); } /* marche sous ie10 */
    80%,100% { text-shadow:none; color:rgba(3, 170, 214, 0.9); }
}



section .pochetteCD a {
    display:block;
}

section .pochetteCD:hover {
    outline:none;
}
section .pochetteCD a:hover {
    transform-origin: 50% 50%;

    -webkit-transform: scale(1.6) rotate(-10deg);
    -moz-transform: scale(1.6) rotate(-10deg);
    -o-transform: scale(1.6) rotate(-10deg);
    transform: scale(1.6) rotate(-10deg);

    -webkit-box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.5);

    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}


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

section #listeMorceaux  {
    display:inline-block;
    margin-left:375px;
}

/*--------- player -------------*/

section #listeMorceaux .div1 {
    border: 1px solid #04AEDA;
    border-radius: 17px 17px 17px 17px;
    height: 30px;
    margin-bottom: 16px;
    padding:10px 0 6px 15px;
    width: 340px;
    background-image: linear-gradient(#05001B, #004B77);
    background-image: -ms-linear-gradient(#05001B, #004B77); /* IE10+ */
    background-image: -webkit-linear-gradient(#05001B, #004B77);
}
.ie_lt10 section #listeMorceaux .div1 {
    background-color:#004B77;
}
.ie_lt10.ie_gt8 section #listeMorceaux .div1 {
    behavior: url(./js/PIE.htc);
    filt_er: progid:DXImageTransform.Microsoft.gradient(startColorStr='#05001B',endColorStr='#004B77',GradientType=0 ); /* IE6-9 */
  /* marche pas avec radius et ie9 !!  http://www.journaldunet.com/developpeur/client-web/tutoriel-pratique/la-transparence-de-couleur-avec-rgba-en-css3/le-filtre-gradient-pour-ie.shtml */
}

/*--------- liste des morceaux -------------*/

section #listeMorceaux .div2 {
    height:285px;
    vertical-align: top;
    display:inline-block;
    width:395px;
}

section #listeMorceaux .div2 p {
    font-size:1.363em;
    width:350px;
}
section #listeMorceaux .div2 p + p {
    border-top:1px dotted #17B602;
}

#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8,#m9 {
    display:none;
    position:absolute;
    width:290px;
}

#m1:target {    display:block;  }
#m2:target {    display:block; } 
#m3:target {    display:block;  }
#m4:target {    display:block;  }
#m5:target {    display:block;  }
#m6:target {    display:block;  }
#m7:target {    display:block;  }
#m8:target {    display:block;  }
#m9:target {    display:block;  }
#m1:target + #m2 {    display:none;  }
#m2:target + #m3 {    display:none;  }
#m3:target + #m4 {    display:none;  }
#m4:target + #m5 {    display:none;  }
#m5:target + #m6 {    display:none;  }
#m6:target + #m7 {    display:none;  }
#m7:target + #m8 {    display:none;  }
#m8:target + #m9 {    display:none;  }


#listeMorceaux .div1 div div:before {
  content:"En cours: ";
}

#listeMorceaux .div2 p a {
  display:inline-block;
  padding:2px 10px 5px 2px;
  width:340px;

}

#listeMorceaux .div2 p a:before {
  content:attr(title);
}

#listeMorceaux .div2 p a:hover {
  text-decoration:none;
  font-wei__ght:bold;
  background-color:#17B602;
  color:#05001B;
  padding-left:10px;
  text-shadow:0 0 3px #05001B,0 0 7px #05001B;
  box-shadow:0 0 3px #17B602,0 0 6px #17B602,0 0 9px #17B602,0 0 12px #17B602;;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

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

#listeMorceaux .div1 > div {
  display:inline-block;
  height: 23px;
  font-size:1.413em;
}
#listeMorceaux .div1 > div:nth-child(2) img{
  margin-right:10px;
  height:25px;
}
#listeMorceaux .div1 > div:nth-child(2) img:hover {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

#listeMorceaux .div1 > div:nth-child(2) {
  margin-left:265px;
}
/*
section .btn {
    display:inline-block;
    background-size:30%;
    height: 50px;
    text-indent: 35px;
    width: 90px;
    font-size:1.363em;
}*/

/*--------- rubriques -------------*/

section #listeMorceaux .div4 {
    height:285px;
    display:inline-block;
    vertical-align: top;
    width:235px;
    margin-top:-70px;
}

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

section .div2  a {
    color: #17B602;
    font-weight:normal;
}

section .div3  a {
    margin-right:20px;
    display:inline-block;
    height: 50px;
    text-indent: 35px;
    width: 90px;
    font-size:1.363em;
}

section .div3  {
    vertical-align:top;
    letter-spacing: 1.2px;
    position:relative;
}


#tooltipAchat {
  position:absolute;
  display:block;
  font-size:18px;
  padding:5px;
  border:1px solid orange;
  color:orange;
  -webkit-box-shadow: 0px 0px 5px orange;
  -moz-box-shadow: 0px 0px 5px orange;
  box-shadow: 0px 0px 5px orange,0px 0px 10px orange;
  top:45px;
  left:121px;
  opacity:0;
}

#tooltipAchat:target {
  animation:achatAnimation 3s  linear 0s  3;
}

@keyframes achatAnimation {
    0%,50% { opacity:1; }
    60%,100% { opacity:0; }
}


/*
animation:achatAnimation 5s  linear 0s  infinite;
    0%,50% { display:block; }
    50%,100% { display:none; }
*/

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

section .btnApple {
    margin-left:90px;
    letter-spacing:1.2px;
}

section #btnEcouter:hover,section #btnAcheter:hover,section #btnInformation:hover {
    background-size:32%;
}

section #btnEcouter {
    background:url("img/listen.png") no-repeat;
    background-size:30%;    /*!!!!!*/

}
section #btnAcheter {
    background:url("img/plus.png") no-repeat;
    background-size:30%;
}
section #btnInformation {
    background:url("img/info.png") no-repeat;
    background-size:30%;
}

/*----------- rubriques -----------------------*/

.menuV1 {
    width:230px;
    list-style:none;
}
.menuV1 .menuCategory {
    font-size:1.321em;
    font-weight:bold;
    min-height:20px;
    padding-top:3px;
    background: url("img/menu2.jpg") repeat-x;
    cursor:pointer;
    margin-top:10px;
}
.menuV1 ul {
    list-style:none;
    border:1px solid #17B602;
    background:#05001B;
    height:0px;
    overflow:hidden;
}
.menuV1 .menuCategory > a {
    display:inline-block;
    padding:5px 0 0 9px;
    letter-spacing: 1.15px;
    height:30px;
}
.menuV1 .menuCategory a:focus + ul {
    height:160px;
    padding-top:5px;
    padding-bottom:20px;
    -webkit-transition: height 0.5s ease-in-out 0s;
    -moz-transition: height 0.5s ease-in-out 0s;
    transition: height 0.5s ease-in-out 0s;
}


.menuV1 ul li {
    margin-bottom:1px;
}
.menuV1 ul li a {
    display:block;
    text-decoration:none;
    color:#17B602;
    font-size:0.812em;
    font-family:Arial;
    height:20px;
    padding:5px 0 0 7px;
}
.menuV1 ul li:hover a {
    color:#05001B;
    background:#17B602;
;}

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

footer {
    padding:10px;
    height:20px;
    border-top: 1px solid #17B602;
    background:url("img/menu.jpg") repeat-x;
    text-align:center;
    font-size:1.323em;
}

article div {
    font-size:1.2em;
}

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

.right p {
  margin-bottom:5px;
  font-size:1.325em;
  letter-spacing:2.8px;
}

.slider {
    overflow:hidden;
}
.slider .container {
    position:relative;
    width:400%;
    height:100%;
    opacity:0.35;
    animation:albumsAnimation 18s  linear 1s  infinite;
}
.slider .thumbnail {
    height:100%;
    width:25%;
    display:inline-block;
}
.slider:hover {
    animation-play-state:pause; /* !!! */
}

@keyframes albumsAnimation {
    0% { opacity:0.35; }
    0%,10%,100% { left:0%;  }
    10%,20% { opacity:1; }

    20% { opacity:0.35; }
    25%,35% { left:-100%;  }
    35%,45% { opacity:1; }

    45% { opacity:0.35; }
    50%,60% { left:-200%;  }
    60%,75% { opacity:1; }

    75% { opacity:0.35; }
    80%,90% { left:-300%;  }
    90%,97% { opacity:1; }
}

/*
    0%,20%,100% { opacity:1; }
    25%,45% { opacity:1; }
    50%,75% { opacity:1; }
    80%,95% { opacity:1; }

    0%,20%,100% { left:0%;  }
    25%,45% { left:-100%;  }
    50%,75% { left:-200%;  }
    80%,95% { left:-300%;  }

    0%,20%,100% { left:0%;  }
    25%,45% { left:-100%;  }
    50%,75% { left:-200%;  }
    80%,100% { left:-300%;  }
*/

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

.slider {
   border:2px dotted #17B602;
}

.slider,.slider .thumbnail img  {
    height:300px;
    width:300px;
}


.slider .thumbnail div a {
    color:rgba(10,10,10,0.8);    
}

.slider .thumbnail div {
    position:absolute;
    background-color:rgba(250,250,250,0.45);
    font-weight:bold;
    bottom:0;
    width:280px;
    height:30px;
    padding:10px;
    font-size:16px;
    font-family:Arial;
    text-align:center;
}


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

.last span[class="floatLeft"] {
    background:url(img/pictos.png) no-repeat;
    height: 49px;
    width: 58px;
    margin-right:6px;
    margin-bottom:2px;
}

.last p {
    margin-bottom:10px;
    font-family:Arial;
}

.last p:nth-child(1) span[class="floatLeft"]  {
  background-position:-4px -55px;
}
.last p:nth-child(2) span[class="floatLeft"]  {
  background-position:-117px -55px;
}
.last p:nth-child(3) span[class="floatLeft"]  {
  background-position:-347px -55px;
}
.last p:nth-child(4) span[class="floatLeft"]  {
  background-position:-464px -55px;
}