@charset "UTF-8";
/* CSS Document */
* { margin:0; padding:0; }
body { font-family: Helvetica, Arial, sans-serif; background-repeat: repeat; background-image:url(img/cadre/background.jpg); }
#page { width: 1000px; margin: auto; margin-bottom: 25px; }
#header { text-align: center; width: 1000px; background-image: url(img/cadre/header.png); background-repeat: no-repeat; height: 120px; padding-top: 70px; font-size: 14px; }
#header img { margin-top: 30px; }
.langue-fr {
	background-image: url(img/FR.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	display: block;
	position: absolute;
	width: 80px;
	height: 44px;
	margin-left: 952px;
	margin-top: -60px;
	text-decoration:none;
}
.langue-en {
	background-image: url(img/EN.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	display: block;
	position: absolute;
	width: 80px;
	height: 44px;
	margin-left: 952px;
	margin-top: -60px;
	text-decoration:none;
}
.langue-fr:hover, .langue-en:hover {
	background-position: left top;
}
#lecteur { width: 200px; position: absolute; margin-left: 715px; margin-top: -120px; font-size: 11px; line-height: 14px; color: #CC3300; }
#lecteur img { margin-top: 0px; }
#shade { width: 897px; padding-right:17px; margin-left: 56px; background-image: url(img/cadre/ombre.png); background-repeat: repeat-y; background-position: right; }
#wrap { width: 897px; background-color: #FFE500; }
#wrap h1 img { margin-left: 35px; margin-bottom: 10px; border: none; margin-top: 250px; }

/* ------ CONTENT ------ */
#content { width: 527px; margin-left: 320px; height: 400px; font-size: 12px; padding:45px 40px 0px 10px; line-height: 14px; background-image: url(img/cadre/bckgnd-content.png); background-repeat: no-repeat; background-position: -20px top; color: #262626; }
#content h2 { font-size: 16px; font-weight: normal; margin-bottom: 10px; color: #990000; text-align: center; }
#contenu p { margin-bottom: 5px; }
#content a { color: #990000; text-decoration: none; }
#content a:hover { color: #CC0000; text-decoration: underline; }
#content .video { margin-bottom: 10px; width: 530px; height: 300px; }
#content .musique { margin-top: 10px; }
#content .musique li { list-style-type: none; display: block; width: 223px; float: left; margin-top: 8px; margin-bottom: 12px; padding-left: 40px; }
#content .musique p { line-height: 16px; }
#content  #technique  { width: 440px; height: 285px; }
#content #technique td { padding-bottom: 3px; width: 220px; vertical-align: top; }
#content #technique .tech { border-top-width: 1px; border-top-style: solid; border-top-color: #666666; padding-top: 10px; }
#content #technique p { margin-bottom: 5px; line-height: 16px; }
#content #casting { text-align: center; }
#content #casting td { vertical-align: top; }
#content #casting p { margin-bottom: 10px; }
#content #casting img { margin-top: 5px; }

/* ------ NAVIGATION ------ */
#nav { position: absolute; top: 600px; }
#nav li { list-style-type: none; }
#nav a { text-decoration: none; display: block; position: absolute; background-repeat:no-repeat; background-position:bottom; }
#nav a.synopsis { width: 178px; height: 194px; background-image: url(img/nav/synopsis.png); z-index: 10; margin-top: 75px; margin-left: -30px; }
#nav a.extraits { width: 342px; height: 384px; background-image: url(img/nav/extraits.png); margin-top: -105px; margin-left: -40px; z-index: 3; }
#nav a.bonus { width: 90px; height: 107px; background-image: url(img/nav/bonus.png); margin-left: 260px; margin-top: 175px; z-index: 4; }
#nav a.casting { width: 228px; height: 253px; background-image: url(img/nav/casting.png); margin-left: 283px; z-index: 2; }
#nav a.photos { width: 134px; height: 185px; background-image: url(img/nav/photos.png); margin-left: 480px; margin-top: 20px; z-index: 6; }
#nav a.partenaires { width: 171px; height: 207px; background-image: url(img/nav/partenaires.png); margin-left: 590px; margin-top: 5px; z-index: 1; }
#nav a.partners { width: 171px; height: 207px; background-image: url(img/nav/partners.png); margin-left: 590px; margin-top: 5px; z-index: 1; }
#nav a.bo { width: 92px; height: 110px; background-image: url(img/nav/bo.png); margin-left: 490px; margin-top: 180px; z-index: 5; }
#nav a.bo-en { width: 92px; height: 110px; background-image: url(img/nav/bo-en.png); margin-left: 500px; margin-top: 190px; z-index: 5; }
#nav a.generique { width: 137px; height: 174px; background-image: url(img/nav/generique.png); margin-left: 740px; margin-top: 30px; z-index: 5; }
#nav a.generique-en { width: 137px; height: 174px; background-image: url(img/nav/generique-en.png); margin-left: 740px; margin-top: 30px; z-index: 5; }
#nav a.fiche { width: 180px; height: 140px; background-image: url(img/nav/fiche.png); margin-left: 560px; margin-top: 180px; z-index: 1; }
#nav a.fiche-en { width: 180px; height: 140px; background-image: url(img/nav/fiche-en.png); margin-left: 600px; margin-top: 178px; z-index: 1; }
#nav a.liens { width: 91px; height: 110px; background-image: url(img/nav/liens.png); margin-left: 730px; margin-top: 190px; z-index: 6; }
#nav a.liens-en { width: 91px; height: 110px; background-image: url(img/nav/liens-en.png); margin-left: 760px; margin-top: 190px; z-index: 6; }
#nav a.synopsis:hover, #nav a.extraits:hover, #nav a.bonus:hover, #nav a.casting:hover, #nav a.photos:hover, #nav a.partenaires:hover, #nav a.partners:hover,#nav a.bo:hover, #nav a.bo-en:hover, #nav a.generique:hover, #nav a.generique-en:hover, #nav a.fiche:hover, #nav a.fiche-en:hover, #nav a.liens:hover, #nav a.liens-en:hover { background-position: top; }

/* ------ PIED DE PAGE ------ */
#footer { width: 1000px; height: 94px; background-image: url(img/cadre/footer.png); background-repeat: no-repeat; }
#footer img { margin-top: 5px; margin-left: 116px; }
#footer .date { position: absolute; margin-top: -30px; }

/* ------ CLASSES ------ */
.hide { visibility: hidden; }
img.scooter { position: absolute; top: 100px; margin-left: -80px; z-index: 11; }
.center { text-align: center; }
.clear { clear: both; }
.mazel { border: none; margin-top: 50px; margin-left: 12px; margin-right: 12px; }
.mentions { text-align: center; margin-top: 5px; color: #666666; }
.partenaires {
	border: none;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 8px;
}
.partner { margin-top: 40px; }
#content img.vignette { border: none; margin-right: 2px; margin-bottom: 2px; }

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide { display:none; }
/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber { display: block; width: 580px; }
.tabberlive { }
/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav { }
ul.tabbernav li
{ list-style-type: none; display: block; width: 120px; float: left; line-height: 20px; background-image: url(img/fleches/up-right.png); background-repeat: no-repeat; background-position: -1px 3px; padding-left: 15px; }
#content ul.tabbernav li a {color: #666666; }
#content ul.tabbernav li a:hover { color: #999999; }
ul.tabbernav li a:link {   }
ul.tabbernav li a:visited { }
#content ul.tabbernav { display: block; width: 580px; margin-top: 315px; position:absolute; }
#content ul.tabbernav li.tabberactive { background-image: url(img/fleches/up-right.png); background-position: left -28px; padding-left: 20px; width: 115px; font-weight: bold; background-repeat: no-repeat; color: #333333; }
#content ul.tabbernav li.tabberactive a { color: #333333; }
ul.tabbernav li.tabberactive a:hover { }
/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
 /* height:200px; */
 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
 /* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {  display:none; }
.tabberlive .tabbertab h3 { display:none; }
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 { }
.tabberlive#tab2 { }
.tabberlive#tab2 .tabbertab { overflow:auto; }