/* HTML5 âS
° Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; /*overflow-y: scroll;*/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #d00027; color: #fff; text-shadow: none; }
::selection { background: #d00027; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; outline-style: none}
a:hover { color: #06e; outline-style: none}
a:focus { /*outline: thin dotted;*/; outline-style: none }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }


form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
ul {margin: 0; padding: 0; list-style-type: none}


/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */

body {font-family: 'PT Sans', sans-serif;}
#container {width: 100%; position: relative}
#home {overflow: hidden}
#bio {overflow: hidden}

#stopPortrait {background: url(../img/stopPortrait.jpg) center center no-repeat black; width: 100%; height: 100%; display: none}

#footer {position: fixed; bottom: 2px; width: 99%; margin: auto; height: 15px; z-index: 1000; font-size: 8px; text-transform: uppercase; text-align: right; font-weight: bold;  opacity : 0.3; -moz-opacity : 0.3; -ms-filter: "alpha(opacity=30)"; filter : alpha(opacity=30);}
#footer:hover {opacity : 1; -moz-opacity : 1; -ms-filter: "alpha(opacity=100)"; filter : alpha(opacity=100);}
#footer a {color: black; text-decoration: none}
#footer a:hover {color: #d00027}

header { height: 70px; width: 100%; background: url(../img/bgHeader.png) bottom repeat-x; position: fixed; overflow: hidden;  z-index: 1000}
#headerContent { width: 940px; margin: auto; height: 150px; position: relative }
h1 {display: block; width: 90px; height: 35px; text-indent: -9999px; background: url(../img/mainLogo.png) no-repeat; margin: 0; position: absolute; top: 10px; left: -20px; }

#mainNav {width: 515px; height: 60px; position: absolute; left: 80px; top: 20px; border-left: 1px solid #787375; height: 20px; overflow: hidden; }
#mainNav li {float: left; padding: 2px 12px; border-right: 1px solid #787375; height: 18px; }
#mainNav li a {font-size: 12px; color: white; text-decoration: none; text-transform: uppercase}
#mainNav li a:hover {color: #d00027} 
#mainNav li a.active {color: #d00027}

#pastille {width: 190px; height: 179px; position: absolute; z-index: 2; background:url(../img/bgPastille.png); top: -18px; right: 10% }
#pastille #btConcerts { display: block; width: 87px; height: 19px; text-indent: -9999px; position: absolute; bottom: 25px; background:  url(../img/btnConcerts.png) no-repeat; left: 48px }
#pastille #btConcerts:hover {background-position: 0 -20px}
#pastille #btConcerts:active {background-position: 0 -40px}
/* PLAYER */

#player { width: 340px; height: 150px; overflow: hidden; position: absolute; top: 15px; right: 0 }
#controls {width: 340px; height: 35px; position: relative }
#controls a {display: block; position: absolute; text-indent: -9999px; height: 28px; width: 26px}
#controls a#youtubeBTN {background: url(../img/sprites.png) no-repeat; top: 1px; left: 0}
#controls a#youtubeBTN:hover {background-position: 0 -30px}
#controls a#bandcampBTN {background: url(../img/sprites.png) -27px 0 no-repeat; top: 1px; left: 28px}
#controls a#bandcampBTN:hover {background-position: -27px -30px}
#play { width: 160px; height: 20px; overflow: hidden; position: absolute; top: 5px; right: 110px }

#currentSong {width: 90px; height: 16px; position: absolute; color: white; padding: 2px 8px; top: 5px; left: 240px; border-top: 1px solid #717171;
background-color: #636262;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#848384), to(#646364)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #848384, #646364); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #848384, #646364); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #848384, #646364); /* IE10 */
  background-image:      -o-linear-gradient(top, #848384, #646364); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #848384, #646364);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#848384', EndColorStr='#646364'); /* IE6-IE9 */
  text-shadow: -1px -1px 2px #000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  -webkit-box-shadow: 1px 1px 2px #1e1e1e; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 1px 1px 2px #1e1e1e; /* FF3.5 - 3.6 */
          box-shadow: 1px 1px 2px #1e1e1e; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

#playlist {padding-left: 80px; background: url(../img/coverPlaylist.jpg) top left no-repeat; margin-top: 15px; position: absolute; top: 20px}
#playlist li {width: 210px; height: 18px; color: white; padding: 2px 10px; border: 1px solid #323232;
background-color: #504f4f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#676666), to(#504f4f)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #676666, #504f4f); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #676666, #504f4f); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #676666, #504f4f); /* IE10 */
  background-image:      -o-linear-gradient(top, #676666, #504f4f); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #676666, #504f4f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#676666', EndColorStr='#504f4f'); /* IE6-IE9 */
  text-shadow: -1px -1px 2px #000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  opacity : 0.3; -moz-opacity : 0.3; -ms-filter: "alpha(opacity=30)"; filter : alpha(opacity=30);
}
ul#playlist li:hover {opacity : 1; -moz-opacity : 1; -ms-filter: "alpha(opacity=100)"; filter : alpha(opacity=100); cursor: pointer}
ul#playlist li a {color: white; text-decoration: none}
#scrollbar {width: 10px; background: #3d3c3c; position: absolute; top: 0; right: 0; height: 72px;
}
#scrollbar a#cursorScroll {display: block; text-indent: -9999px; background: white; position: absolute; top: 0; left: 0; width: 10px; height: 15px;
-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 5px; /* FF1-3.6 */
border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */;
 opacity : 0.3; -moz-opacity : 0.3; -ms-filter: "alpha(opacity=30)"; filter : alpha(opacity=30);
 }
#scrollbar a#cursorScroll:hover { opacity : 1; -moz-opacity : 1; -ms-filter: "alpha(opacity=100)"; filter : alpha(opacity=100);}

#staff {width: 1000px; height: 65px; position: absolute; left: 0; bottom: 15px }


.imgopacity{opacity: 0.7;-moz-opacity: 0.7;-khtml-opacity: 0.7;filter: alpha(opacity=70);}
.imgopacity:hover{opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;filter: alpha(opacity=100);}




/* INTERFACE */

#draft {position: absolute; top: 70%; left: 20%; width: 500px; z-index: 100}

a.btnGauche { display: block; width: 46px; height: 46px; background: url(../img/sprites.png) -80px -69px no-repeat; text-indent: -9999px; position: absolute; left: 1%; top: 50%; /*margin-top: -23px;*/ z-index: 1500  }
a.btnGauche:hover {background-position: -80px -116px}

a.btnDroite { display: block; width: 46px; height: 46px; background: url(../img/sprites.png) -136px -69px no-repeat; text-indent: -9999px; position: absolute; right: 1%; top: 50%; /*margin-top: -23px;*/ z-index: 1500  }
a.btnDroite:hover {background-position: -136px -116px}

a.btnUp { display: block; width: 33px; height: 33px; background: url(../img/sprites.png) 0 -80px no-repeat; text-indent: -9999px; margin: auto  }
a.btnUp:hover { background-position: -35px -80px }

a.btnDown { display: block; width: 33px; height: 33px; background: url(../img/sprites.png) 0 -114px no-repeat; text-indent: -9999px; margin: auto; margin-top: 5px;   }
a.btnDown:hover { background-position: -35px -114px }

.btnIzia {padding: 4px 7px; font-size: 13px; color: white; background: #d40023; text-decoration: none; 
  -webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
  -moz-border-radius: 15px; /* FF1-3.6 */
  border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;line-height: 26px; text-align: center
}
.btnIzia a {color: white; text-decoration: none}
.btnIzia a:hover {text-decoration: underline}

/*a.btnIzia:hover {background: black}*/
#homeContentNav {display: block; width: 30px; height: 15px; position: absolute; bottom: 20px; left: 50%; margin-left: -15px }
#homeContentNav li {float: left; width: 10px; height: 10px}
#homeContentNav a { display: block; width: 10px; height: 10px; background: url(../img/sprites.png) -15px -64px no-repeat; text-indent: -9999px  }
#homeContentNav a.active {background-position: -4px -64px}
#homeContentNav a:hover {background-position: -25px -64px}

/* HOME */

#homeContent {background: url(../img/bgHomeIpad.jpg)}
.trame {background:url(../img/trameIzia.png) }

#homeContent a.btnGauche {display: block;}
#homeContent a.btnDroite {display: block;}

#miniShop {width: 350px; height: 40px; position: absolute; bottom: 7%; left: 5%; /*background: url(../img/home1/nouvelalbum.png) left center no-repeat; padding-left: 280px;*/ z-index: 265; margin-top: 3px }

#album img#didier {position: absolute; bottom: 0; right: 5%; z-index: 2; width: 732px; height: 720px}
#album img#tige {position: absolute; top: 0%; left: -100px; z-index: 2; }
#album img#hedgehog {position: absolute; top: 13%; left: 35%; z-index: 2; }
#album img#cover {position: absolute; bottom: 20%; left: 38%; z-index: 2; }
#album img#mainTitre {position: absolute; bottom: 5%; left: 3%; z-index: 2; }
#album img#tracklist {position: absolute; top: 65%; left: 40%; z-index: 2; display: none }

#clip {background: url(../img/photogroupe.jpg) center center no-repeat; width: 100%; position: absolute;}
#clickClip {display: block; width: 391px; height: 132px; text-indent: -9999px; background: url(../img/btnClip.png) no-repeat; position: absolute; right: 20%; bottom: 20%}
#clickClip:hover {background-position: 0 -133px}

#live_cplus {background: black; width: 100%;background:url(../img/fond_embed2.jpg) center center }
#liveEmbed {width: 640px; height: 450px; position: absolute; top: 50%; left: 50%; margin-left: -320px; margin-top: -225px}

#vinyles { background: url(../img/concoursBG.jpg) center center black; width: 100%; }
a#btnVinyles { display: block; width: 384px; height: 225px; position: absolute; bottom: 10%; left: 10%; text-indent: -9999px; background:  url(../img/btnVinyles.png); }


/* BIO */

#bio { }
#bioContent {position: relative; /*min-height: 700px*/; background: url(../img/bgBio.jpg) center center;}
#bioTxt { position: relative; overflow: hidden; height: 520px; width: 550px;}
#bioTxt p#bioIntro { font-size: 24px; border-top: 1px solid #282828; padding-top: 15px; margin-top: 15px; text-align: left; letter-spacing: -0.05em;  }
#bioTxt p {opacity : 0.6; -moz-opacity : 0.6; -ms-filter: "alpha(opacity=60)"; filter : alpha(opacity=60); text-align: justify; font-size: 14px}
#bioWrap {width: 550px; height: 520px; position: absolute; left: 50%; margin-left: -470px; top: 55%; margin-top: -300px; background: url(../img/bgblocBio.png); color: white; padding: 15px; overflow: hidden;  }
#bioCol {width: 525px; float: left}
#bioCol img#logoBio {display: block}

/* PHOTOS */

#photosContent {background:url(../img/bgPhotos.jpg) center center; overflow: hidden }
#photoSlider {overflow: hidden; z-index: 200}
#photosContent .photo {width: 940px; height: 570px; background: url(../img/bgUnePhoto.png) bottom center no-repeat; position: absolute; z-index: 201}
#photosContent .photo .photoLegende {text-align: right; margin-top: 0; }
#photosContent .photo .photoLegende span { padding: 3px 10px; background: #d00027; color: white; font-size: 10px }

/* VIDEOS */

#videoContent {background: url(../img/bgVideos.jpg) center center}
#wrapperVideo {width: 880px; height: 524px; background:url(../img/bgBlocVideos.png) ; position: absolute; top: 50%; margin-top: -250px; left: 50%; margin-left: -440px; padding: 13px; overflow: hidden }
#wrapperVideo #colGauche {float: left; margin-right: 28px}
#titreVideos {margin-bottom: 18px; height: 31px; background: url(../img/titreVideos.png) no-repeat; padding-left: 100px; text-indent: -9999px}


#videoMenu {width: 210px; height: 510px; float: left; margin-top: 10px; }
#videoMenu .thumb {position: relative; margin: 5px 0; border: 5px solid #d00027; height: 130px; width: 200px}
#videoMenu .thumb:hover {border-color: white}
#videoMenu .thumb img {position: absolute; display: block; z-index: 8}
#videoMenu .thumb a.clickVideo { position: absolute; display: block; width: 200px; height: 130px; background: url(../img/sprites.png) -190px 0; z-index: 10; text-indent: -9999px;opacity : 0.6; -moz-opacity : 0.6; -ms-filter: "alpha(opacity=60)"; filter : alpha(opacity=60); }
#videoMenu .thumb a.clickVideo:hover {opacity : 1; -moz-opacity : 1; -ms-filter: "alpha(opacity=100)"; filter : alpha(opacity=100);}
#videoMenu #video_wrapper { width: 210px; height:435px; overflow: hidden; position: relative; }
#videoMenu #video_slider { position: absolute; width: 210px; z-index: 20}

/* PRESSE */ 

#actusContent {background: url(../img/bgPresse.jpg) center center; position: relative; z-index:1; width:100%; overflow: hidden; }
#actusSlider {margin: auto; margin-top: -200px; overflow: hidden; width:2000px; position: absolute; top:50%; left:0;}
#actusSlider .actu { width: 280px; height: 420px; background: url(../img/bgPress.png); padding: 10px 10px 10px 20px; border: 5px solid white; color: white; float: left; margin-left: 30px; margin-right:30px }
#titreActus {width: 87px; height: 31px; position: absolute; top: 23%; left: 5%; text-indent: -9999px; background:url(../img/titrePresse.png) no-repeat }
#actusSlider .actu h2 {font-weight: normal; font-size: 30px; margin-bottom: 10px}
#actusSlider .actu .texteActu { font-size: 14px; }
#actusSlider .actu .texteActu a {color: white}
#actusSlider .actu .texteActu a:hover {color: #D00027}

/* LIVE */
#liveContent {width: 100%; position: relative; background: url(../img/bgLive.jpg) bottom center }
#titreLive {width: 87px; height: 31px; background: url(../img/titreLive.png) no-repeat; padding-left: 100px; text-indent: -9999px; margin: 10px}
#liveBloc { width: 770px; height: 480px; background: url(../img/bgBlocLive.png); position: absolute; left: 50%; margin-left: -350px; top: 50%; margin-top: -240px; overflow: auto; }

/* OPE LIVE */

#opeLive {background: url(../img/bg_live.jpg) top  center no-repeat black; overflow: hidden; width: 100%; margin-top: 50px}
#opeLive form p {margin: 0}

/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.ie7 #stopPortrait {display: none;}




/* ==|== media queries ====================================================== */

@media only screen and (min-width: 480px) {

}

@media only screen and (max-width: 1024px) {
#album img#didier {position: absolute; bottom: 0; right: -5%; z-index: 2; width: 325px; height: 500px}
#album img#cover { left: 41% }
/*#miniShop {bottom: 47%; left: 37%}*/
}

@media only screen and (max-height: 700px) {
#album img#didier { bottom: 0; right: -5%}
#album img#snake {top: -20%; left: -20%; }
#album img#cover { left: 38%; }
/*#miniShop {bottom: 54%; left: 42%}*/
}

@media only screen and (max-width: 1010px) {

/*#miniShop {bottom: 47%; left: 46%}*/
}


@media only screen and (min-height: 845px) {
/*#miniShop {bottom: 42%; left: 37%}*/
}

@media only screen and (min-height: 800px) {

#album img#snake {top: 0; left: 0; }

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#stopPortrait {display: none;}
#album img#izia {position: absolute; bottom: 0; right: -5%; z-index: 2; width: 325px; height: 500px}
.trame {background: none;}
#homeContent {background: url(../img/bgHome.jpg) center center}
/*#miniShop {bottom: 54%; left: 42%}*/
#bioContent {background: url(../img/bgBioipad.jpg) top left no-repeat}
#bioTxt p {font-size: 12px}
#bioCol img#logoBio {display: none}
#bioTxt p#bioIntro {font-size: 12px; letter-spacing: 0; font-weight: bold}
#mainNav li a {font-size: 11px}
}

/* iPad (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
#stopPortrait {display: block;}
}

/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}