html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #000;
font: 100% tahoma, geneva, arial, sans-serif;
text-align: left;
color: #777;
}

#pageb, #pagen, #pageg {
width: 999px;
height: 580px;
margin: auto;
}
#pageb {
background: url(im/bgblanc.png) no-repeat;
}
#pagen {
background: url(im/bgnoir.png) no-repeat;
}
#pageg {
background: url(im/bggris.png) no-repeat;
}

#bas {
z-index: 2;
position: relative;
top: 560px;
}
#milieu {
top: -36px;
position: relative;
float: left;
width: 990px;
padding-top: 20px;
}

#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12 {
top: 3px;
width: 242px;
height: 19px;
margin-left: auto;
margin-right: auto;
background-image: url(im/ba.gif);
background-repeat: no-repeat;
}

#t1 {background-image: url(im/ba.gif);}
#t2 {background-image: url(im/extrait.gif);}
#t3 {background-image: url(im/film.gif);}
#t4 {background-image: url(im/photos.gif);}
#t5 {background-image: url(im/affiches.gif);}
#t6 {background-image: url(im/fonds.gif);}
#t7 {background-image: url(im/resume.gif);}
#t8 {background-image: url(im/acteurs.gif);}
#t9 {background-image: url(im/realisateur.gif);}
#t10 {background-image: url(im/qr.gif);}
#t11 {background-image: url(im/chiffres.gif);}
#t12 {background-image: url(im/scenario.gif);}

#bloc, #blocn {
margin-top: 80px;
border: #ddd solid 2px;
border: none;
width: 640px;
height: 360px;
}

#blocn {border-color: #777; background-color: #000;}

#sousbloc {margin: 10px 40px;}

#milieu, #bloc, #blocn, #coeur {
margin-left: auto;
margin-right: auto;
}

#un {float: left;}
#deux {float: left;}
#trois {float: left;}

a#retour, #bienvenue, a#logo, a#xhtml, a#css, a#ff, #lien, #gratuit, #menu {
position: relative;
float: left;
display: block;
height: 15px;
background-repeat: no-repeat;
}

a#xhtml, a#css, a#ff {height: 13px;}

a#retour, #bienvenue {margin-left: 17px; top: 7px; width: 252px; z-index: 3;}
a#retour {background-image: url(im/retour-i.gif); background-repeat: no-repeat;}
a#retour:hover {background-image: url(im/retour-a.gif);}
#bienvenue {background-image: url(im/bienvenue.gif);}
#lien {z-index: 2; float: right; width: 331px; height: 23px; background-image: url(im/lien.gif); background-repeat: no-repeat; top: 7px; right: 18px; font-weight: normal; cursor: help;}
a#logo { float: right; width: 23px; height: 23px; background-image: url(im/logo-i.gif); top: 7px; right: 10px; z-index: 3;}
a#logo:hover {background-image: url(im/logo-a.gif);}

#gratuit {width: 113px; height: 14px; background-image: url(im/gratuit.gif); left: -253px; font-weight: normal; cursor: help;}
#menu {width: 43px; height: 14px; background-image: url(im/menu.gif); left: 96px;}
a#xhtml {width: 64px; background-image: url(im/xhtml-i.gif); left: 394px;}
a#xhtml:hover {background-image: url(im/xhtml-a.gif);}
a#css {width: 32px; background-image: url(im/css-i.gif); left: 414px;}
a#css:hover {background-image: url(im/css-a.gif);}
a#ff {width: 17px; background-image: url(im/ff-i.gif); left: 434px;}
a#ff:hover {background-image: url(im/ff-a.gif);}

a#ba, a#extrait, a#film, a#photos, a#affiches, #fonds, #resume, #acteurs, #realisateur, #qr, #chiffres, #scenario, #image {
height: 24px;
display: block;
}

a#ba {width: 242px; background-image: url(im/ba-i.gif); margin-top: 166px; margin-left: 118px;}
a#ba:hover {background-image: url(im/ba-a.gif);}
a#extrait {width: 138px; background-image: url(im/extrait-i.gif); margin-top: 20px; margin-left: 222px;}
a#extrait:hover {background-image: url(im/extrait-a.gif);}
a#film {width: 190px; background-image: url(im/film-i.gif); margin-top: 20px; margin-left: 170px;}
a#film:hover {background-image: url(im/film-a.gif);}
a#photos {width: 280px; background-image: url(im/photos-i.gif); margin-top: 20px; margin-left: 80px;}
a#photos:hover {background-image: url(im/photos-a.gif);}
a#affiches {width: 317px; background-image: url(im/affiches-i.gif); margin-top: 20px; margin-left: 42px;}
a#affiches:hover {background-image: url(im/affiches-a.gif);}
a#fonds {width: 192px; background-image: url(im/fonds-i.gif); margin-top: 20px; margin-left: 168px;}
a#fonds:hover {background-image: url(im/fonds-a.gif);}

#image, #im-ba, #im-extrait, #im-film, #im-photo, #im-affiches, #im-fonds, #im-resume, #im-acteurs, #im-realisateur, #im-qr, #im-chiffres, #im-scenario {
margin-top: 95px;
width: 228px;
height: 478px;
margin-left: 25px;
}
#image {background-image: url(im/image.jpg);}
#im-ba {background-image: url(im/im-ba.jpg);}
#im-extrait {background-image: url(im/im-extrait.jpg);}
#im-film {background-image: url(im/im-film.jpg);}
#im-photo {background-image: url(im/im-photo.jpg);}
#im-affiches {background-image: url(im/im-affiches.jpg);}
#im-fonds {background-image: url(im/im-fonds.jpg);}
#im-resume {background-image: url(im/im-resume.jpg);}
#im-acteurs {background-image: url(im/im-acteurs.jpg);}
#im-realisateur {background-image: url(im/im-realisateur.jpg);}
#im-qr {background-image: url(im/im-qr.jpg);}
#im-chiffres {background-image: url(im/im-chiffres.jpg);}
#im-scenario {background-image: url(im/im-scenario.jpg);}

a#resume {width: 96px; background-image: url(im/resume-i.gif); margin-top: 167px; margin-left: 25px;}
a#resume:hover {background-image: url(im/resume-a.gif);}
a#acteurs {width: 159px; background-image: url(im/acteurs-i.gif); margin-top: 20px; margin-left: 25px;}
a#acteurs:hover {background-image: url(im/acteurs-a.gif);}
a#realisateur {width: 331px; background-image: url(im/realisateur-i.gif); margin-top: 20px; margin-left: 25px;}
a#realisateur:hover {background-image: url(im/realisateur-a.gif);}
a#qr {width: 270px; background-image: url(im/qr-i.gif); margin-top: 20px; margin-left: 25px;}
a#qr:hover {background-image: url(im/qr-a.gif);}
a#chiffres {width: 232px; background-image: url(im/chiffres-i.gif); margin-top: 20px; margin-left: 25px;}
a#chiffres:hover {background-image: url(im/chiffres-a.gif);}
a#scenario {width: 280px; background-image: url(im/scenario-i.gif); margin-top: 20px; margin-left: 25px;}
a#scenario:hover {background-image: url(im/scenario-a.gif);}

em {display: none;}

a.bulle, a.bullen {position: relative}
a.bulle span, a.bullen span {display: none;}
a.bulle:hover, a.bullen:hover {text-decoration: none; background: none;}
a.bulle:hover span, a.bullen:hover span {
bottom:24px;
left:14px;
width: 200px;
display: inline;
position: absolute;
z-index: 4;
border: #000 2px solid;
background: #888;
color: #fff;
padding: 10px;
text-decoration: none;
filter:alpha(opacity=50);
opacity:0.50;
–khtml–opacity: .5;
}

a.bullen:hover span {
border: #fff 2px solid;
background: #888;
color: #000;
filter:alpha(opacity=88);
opacity:0.88;
–khtml–opacity: .88;
}

a.bulmel, a.bulmeln {position: relative}
a.bulmel span, a.bulmeln span {display: none;}
a.bulmel:hover, a.bulmeln:hover {
text-decoration: none;
background: none;
}
a.bulmel:hover span, a.bulmeln:hover span {
top:23px;
right:-12px;
width: 226px;
height: 48px;
display: inline;
position: absolute;
z-index: 4;
border: #000 2px solid;
background: #fff;
background-image: url(im/mel.gif);
background-repeat: no-repeat;
background-position: 7px 42px;
color: #000;
padding: 10px;
text-decoration: none;
cursor: pointer;
filter:alpha(opacity=60);
opacity:0.60;
–khtml–opacity: .6;
}

a.bulmeln:hover span {
border-color: #000;
filter:alpha(opacity=40);
opacity:0.40;
–khtml–opacity: .4;
}

.bullemenu {
position: relative;
display: none;
}
.bullemenu:hover {
text-decoration: none;
background: none;
}
#menu:hover div {
position: absolute;
z-index: 4;
bottom: -6px;
width: 450px;
height: 130px;
left: -205px;
display: inline;
border: 2px solid #ccc;
background: #888;
background-image: url(im/bgblanc.png);
background-position: 227px 140px;
color: #000;
padding: 2px;
text-align: left;
text-decoration: none;
filter:alpha(opacity=88);
opacity:0.88;
–khtml–opacity: .88;
}

.bullemenu a {color: #444;}
.bullemenu a:visited {color: #999;}
.bullemenu a:active {color: #444;}
.bullemenu a:hover {color: #444; background-color: #ccc;}

.ad {text-align: right;}

table {width: 450px;}

td {padding: 10px;}

#coeur {
margin-top: 150px;
margin-bottom: 10px;
width: xxxpx;
text-align: center;
}

p {text-align: justify;}

h1 {
font-weight: normal;
text-align: center;
}

h2 {font-weight: normal;}

h3 {}

ul, li {
margin-bottom: 0;
margin-top: .4em;
}

li {
list-style-image: url(im/puce.gif);
margin: 0;
text-align: left;
}

p.let:first-letter {
float: left;
margin-right: .1em;
padding: .03em;
color: #ccc;
font-size: 2.8em;
}

p.letn:first-letter {
float: left;
margin-right: .1em;
padding: .03em;
color: #333;
font-size: 2.8em;
}

.dur {
cursor: help;
border-bottom: 1px dotted;
}

a {font-weight: bold; text-decoration: none;}
a.n:link {color: #bbb; background-color: #333;}
a.n:visited, a.b:visited {color: #777;}
a.n:active {color: #bbb;}
a.n:hover {color: #bbb; background-color: #444;}
a.b:link {color: #444;}
a.b:active {color: #444; background-color: #ccc;}
a.b:hover {color: #444; background-color: #ccc;}
a.c:link {color: #aaa; background-color: #555;}
a.c:visited {color: #777; background-color: #1d1d1d;}
a.c:active {color: #444; background-color: #ccc;}
a.c:hover {color: #444; background-color: #aaa;}

.scroll, .scrollb {
padding: 8px;
position: relative;
width: 620px;
height: 340px;
overflow: auto;
background-color: #1d1d1d;
border: solid 2px #000;
}

.scrollb, #bloc {
background-color: #e8e8e8;
border: solid 2px #fff;
}

#bloc {border-color: #bbb;}

img {border: solid 2px #777}

.pdb {border: none; margin-right: 8px;}

.fl {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}

.aff {
width: 225px;
height: 300px;
}

.jaq {
width: 372px;
height: 250px;
}

.lab {
width: 250px;
height: 250px;
}

.fon {
width: 480px;
height: 300px;
}

.cam {
width: 481px;
height: 335px;
}

.act {
width: 240px;
height: 320px;
}

.actp {
width: 160px;
height: 214px;
}

.actf {
width: 260px;
height: 180px;
}

.acta {
width: 160px;
height: 160px;
}

.act, .actp, .actf, .acta {
border: solid 2px #fff;
float: left;
margin: .5em 2em;
}

.actgd {
width: 428px;
height: 321px;
border: solid 2px #fff;
}

.mel {
width: 230px;
height: 17px;
border: none;
}

.cen, .cen p {text-align: center;}

.top {
text-align: center;
font-size: .8em;
}

a.t:link {color: #bbb;}
a.t:visited {color: #bbb;}
a.t:active, a.tn:link {color: #444;}
a.t:hover, a.tn:visited {color: #444;}
a.tn:active {color: #bbb;}
a.tn:hover {color: #bbb;}

.inf {
font-size: .8em;
margin-bottom: 2px;
margin-top: 2px;
}

.dia {margin-left: 189px; text-indent: -145px;}

.marge {margin-left: -150px;}

dl, dt, dd, #menuie ul, #menuie li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menuie {
position: absolute;
margin-bottom: 0;
left: -120px;
z-index:5;
font-size: 80%;
border: none;
}
#menuie dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menuie dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background-position: 60px 0;
background-repeat: no-repeat;
width: 170px;
height: 14px;
border: none;

}
#menuie dd {
background-color: #ccc;
background-image: url(im/bgblanc.png);
background-position: 200px 222px;
position: absolute;
bottom: 16px;
width:100%;
border: 1px solid #bbb;

}
#menuie li {
text-align: center;
list-style-image: none;
}
#menuie li a, #menuie dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: none;
}
#menuie li a:hover, #menuie dt a:hover {
background: #ccc;
color: #000;
}

.mi {
font-weight: bold;
color: #000;
}

.ita {font-style: italic}

#haut {
position: absolute;
text-align: center;
margin-left: 30%;
margin-right: 30%;
}

#haut a {font-weight: normal; text-decoration: underline;}