/* styles css */

/* 
/*
/* global ******************* */

* {
padding: 0;
margin: 0;
border: 0;
font-family: helvetica, arial, sans-serif;
}

@font-face {
	font-family: 'journal';
	src: url('fonts/journal.eot');
	src: local('☺'), url('fonts/journal.woff') format('woff'), url('fonts/journal.ttf') format('truetype'), url('fonts/journal.svg#') format('svg');
}

@font-face {
	font-family: 'dinbold';
	src: url('fonts/din.eot');
	src: local('☺'), url('fonts/din.woff') format('woff'), url('fonts/din.ttf') format('truetype'), url('fonts/din.svg#') format('svg');
}

html {
height: 100%;
font-size: 100%;
}

body {
font-size: 1em;
background-color: #4a3932;
}

#global {
position: relative;
width: 900px; height: 740px;
margin: 0 auto;
margin-top: 20px;
background: transparent url(imports/bg.gif) 0 0 no-repeat;
}

/*#global {
position: absolute;
width: 900px; height: 740px;
top: 50%;
margin-top: -370px;
left: 50%;
margin-left: -450px;
background: transparent url(imports/bg.gif) 0 0 no-repeat;
}*/

/* 
/*
/* contenus home ******************* */


#home {
position: absolute;
top: 90px; left: 0;
width: 900px; height: 560px;
background: transparent url(imports/home.jpg) 0 0 no-repeat;
}

#home h1, #home h2 {display: none;}

#home a {
position: absolute;
display: block;
top: 500px; left: 410px;
width: 80px; height: 24px;
text-align: center;
font-weight: bold;
padding-top: 6px;
color: #000;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 0 12px #000;
-webkit-box-shadow: 0 0 12px #000;
box-shadow: 0 0 12px #000;
}

#home a:hover {color: #fff; background-color: #000;}


/* contenus ******************* */



#wrapper {
overflow: hidden;
position: absolute;
top: 90px; left: 0;
width: 892px; height: 552px;
border: #fff 4px solid;
}
 
#inner {
width: 4500px;
height: 2240px;
position: relative;
background: transparent url(imports/bg-typo.gif) 0 0 repeat;
}
 
.scrolling-content {
width: 900px; height: 560px;
position: absolute;
}
 
 
#content00 {
left: 1800px; top: 560px;
background: transparent url(imports/image-home.jpg) 0 0 no-repeat;
}
 
#content1 {left: 1800px; top: 0;}
#content2 {left: 900px; top: 560px;}
#content3 {left: 2700px; top: 560px;}
#content4 {left: 900px; top: 1120px;}
#content5 {left: 1800px; top: 1120px;}
#content6 {left: 2700px; top: 1120px;}

#content7 {left: 0; top: 0;}
#content8 {left: 900px; top: 0;}
#content9 {left: 2700px; top: 0;}
#content10 {left: 3600px; top: 0;}
#content11 {left: 0; top: 560px;}
#content12 {left: 3600px; top: 560px;}

#content13 {left: 0; top: 1120px;}
#content14 {left: 3600px; top: 1120px;}

#content15 {left: 1800px; top: 1680px;}
#content16 {left: 900px; top: 1680px;}

div.playerflash {
width: 640px;
margin: 0 auto;
margin-top: 35px;
}

div.tool1 {
position: absolute;
top: 5px; left: 115px;
width: 20px; height: 12px;
background: transparent url(imports/tool.png) 0 0 no-repeat;
}
div.tool2 {
position: absolute;
top: 5px; left: 285px;
width: 20px; height: 12px;
background: transparent url(imports/tool.png) 0 0 no-repeat;
}
div.tool3 {
position: absolute;
top: 5px; left: 385px;
width: 20px; height: 12px;
background: transparent url(imports/tool.png) 0 0 no-repeat;
}
div.tool4 {
position: absolute;
top: 5px; left: 500px;
width: 20px; height: 12px;
background: transparent url(imports/tool.png) 0 0 no-repeat;
}
div.tool5 {
position: absolute;
top: 5px; left: 615px;
width: 20px; height: 12px;
background: transparent url(imports/tool.png) 0 0 no-repeat;
}
div.tool6 {
position: absolute;
top: 5px; left: 790px;
width: 20px; height: 12px;
background: transparent url(imports/tool.png) 0 0 no-repeat;
}

/* 
/*
/* menus ******************* */

#menu-persos {
position: absolute;
top: 0; left: 0;
list-style-type: none;
}
#menu-persos span {
position: absolute; 
display: none;
padding: 20px; 
z-index: 30;
}


a#link1 {
display: block; float: left;
width: 230px; height: 90px;
background: transparent url(imports/image-personnes.jpg) 0 0 no-repeat;
}
a#link1:hover {
background: transparent url(imports/image-personnes.jpg) 0 -90px no-repeat;
}

a#link2 {
display: block; float: left;
width: 120px; height: 90px;
background: transparent url(imports/image-personnes.jpg) -230px 0 no-repeat;
}
a#link2:hover {
background: transparent url(imports/image-personnes.jpg) -230px -90px no-repeat;
}

a#link3 {
display: block; float: left;
width: 89px; height: 90px;
background: transparent url(imports/image-personnes.jpg) -350px 0 no-repeat;
}
a#link3:hover {
background: transparent url(imports/image-personnes.jpg) -350px -90px no-repeat;
}

a#link4 {
display: block; float: left;
width: 132px; height: 90px;
background: transparent url(imports/image-personnes.jpg) -439px 0 no-repeat;
}
a#link4:hover {
background: transparent url(imports/image-personnes.jpg) -439px -90px no-repeat;
}

a#link5 {
display: block; float: left;
width: 130px; height: 90px;
background: transparent url(imports/image-personnes.jpg) -571px 0 no-repeat;
}
a#link5:hover {
background: transparent url(imports/image-personnes.jpg) -571px -90px no-repeat;
}

a#link6 {
display: block; float: left;
width: 199px; height: 90px;
background: transparent url(imports/image-personnes.jpg) -701px 0 no-repeat;
}
a#link6:hover {
background: transparent url(imports/image-personnes.jpg) -701px -90px no-repeat;
}


a#link1:hover + span.over1 {
display: block;
top: 94px; left: 4px;
width: 852px; height: 235px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}
a#link2:hover + span.over2 {
display: block;
top: 94px; left: 4px;
width: 852px; height: 235px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}
a#link3:hover + span.over3 {
display: block;
top: 94px; left: 4px;
width: 852px; height: 235px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}
a#link4:hover + span.over4 {
display: block;
top: 94px; left: 4px;
width: 852px; height: 235px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}
a#link5:hover + span.over5 {
display: block;
top: 94px; left: 4px;
width: 852px; height: 235px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}
a#link6:hover + span.over6 {
display: block;
top: 94px; left: 4px;
width: 852px; height: 235px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}


/* menu home ********* */

#content00 img {position: absolute; z-index: 10;}

#content00 span {
position: absolute; 
display: none;
padding: 20px; 
z-index: 30;
}

#content00 a {
position: absolute;
z-index: 20;
}

a#link7 {
display: block; float: left;
top: 0; left: 0;
width: 295px; height: 275px;
background-color: transparent;
}
a#link7:hover {background: transparent url(imports/bg-white.png) 0 0 repeat;}

a#link8 {
display: block; float: left;
top: 0; left: 298px;
width: 297px; height: 275px;
background-color: transparent;
}
a#link8:hover {background: transparent url(imports/bg-white.png) 0 0 repeat;}

a#link9 {
display: block; float: left;
top: 0; left: 598px;
width: 295px; height: 275px;
background-color: transparent;
}
a#link9:hover {background: transparent url(imports/bg-white.png) 0 0 repeat;}

a#link10 {
display: block; float: left;
top: 278px; left: 0;
width: 295px; height: 275px;
background-color: transparent;
}
a#link10:hover {background: transparent url(imports/bg-white.png) 0 0 repeat;}

a#link11 {
display: block; float: left;
top: 278px; left: 298px;
width: 297px; height: 275px;
background-color: transparent;
}
a#link11:hover {background: transparent url(imports/bg-white.png) 0 0 repeat;}

a#link12 {
display: block; float: left;
top: 278px; left: 598px;
width: 295px; height: 275px;
background-color: transparent;
}
a#link12:hover {background: transparent url(imports/bg-white.png) 0 0 repeat;}



a#link7:hover + span.over7 {
display: block;
top: 0; left: 298px;
width: 257px; height: 520px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}

a#link10:hover + span.over10 {
display: block;
top: 0; left: 298px;
width: 257px; height: 520px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}

a#link8:hover + span.over8 {
display: block;
top: 0; left: 598px;
width: 255px; height: 520px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}

a#link11:hover + span.over11 {
display: block;
top: 0; left: 598px;
width: 255px; height: 520px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}

a#link9:hover + span.over9 {
display: block;
top: 0; left: 298px;
width: 257px; height: 520px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}

a#link12:hover + span.over12 {
display: block;
top: 0; left: 298px;
width: 257px; height: 520px;
background: transparent url(imports/bg-rollover.png) 0 0 repeat;
}





/* 
/*
/* typos ******************* */

h1 {
margin-bottom: 20px;
font-family: journal, sans-serif;
font-size: 2.6em;
line-height: 0.9em;
letter-spacing: 2px;
color: #ff0;
}

h2 {
margin-bottom: 5px;
font-family: dinbold, helvetica, verdana, sans-serif;
font-size: 1.4em;
font-weight: normal;
line-height: 1.6em;
color: #fff;
}

h3 {
margin-top: 5px;
margin-bottom: 10px;
font-family: journal, sans-serif;
font-size: 2.2em;
line-height: 1em;
letter-spacing: 2px;
color: #ff0;
}

p.dined {
font-family: dinbold, helvetica, verdana, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
color: #fff;
}

p.dined2 {
font-family: dinbold, helvetica, verdana, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
color: #fff;
}

p {
color: #fff;
}

a {
color: #ff0;
text-decoration: none;
outline: none;
}

/* divers ******** */

a.backhome-d {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-d.gif) 0 0 no-repeat;
}
a.backhome-d:hover {opacity: 0.8;}
a.backhome-d span {display: none;}

a.backhome-g {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-g.gif) 0 0 no-repeat;
}
a.backhome-g:hover {opacity: 0.8;}
a.backhome-g span {display: none;}

a.backhome-h {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-h.gif) 0 0 no-repeat;
}
a.backhome-h:hover {opacity: 0.8;}
a.backhome-h span {display: none;}

a.backhome-b {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-b.gif) 0 0 no-repeat;
}
a.backhome-b:hover {opacity: 0.8;}
a.backhome-b span {display: none;}

a.backhome-bd {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-bd.gif) 0 0 no-repeat;
}
a.backhome-bd:hover {opacity: 0.8;}
a.backhome-bd span {display: none;}

a.backhome-bg {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-bg.gif) 0 0 no-repeat;
}
a.backhome-bg:hover {opacity: 0.8;}
a.backhome-bg span {display: none;}

a.backhome-hd {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-hd.gif) 0 0 no-repeat;
}
a.backhome-hd:hover {opacity: 0.8;}
a.backhome-hd span {display: none;}

a.backhome-hg {
position: absolute;
top: 264px; right: 20px;
display: block;
width: 77px; height: 24px;
background: transparent url(imports/bt-home-hg.gif) 0 0 no-repeat;
}
a.backhome-hg:hover {opacity: 0.8;}
a.backhome-hg span {display: none;}

/* 
/*
/* footer ******************* */

#footer {
position: absolute;
top: 670px; left: 0;
width: 900px; height: 90px;
}

#footer span {display: none;}

a#link13 {
float: left;
display: block;
width: 90px; height: 20px;
margin-bottom: 5px;
background: transparent url(imports/bt-savoir+.png) 0 0 no-repeat;
}
a#link13:hover {
background: transparent url(imports/bt-savoir+.png) 0 -20px no-repeat;
}

#footer p {
font-size: 0.8em;
text-align: center;
color: #9e857b;
clear: both;
}

#footer p.bt {
width: 480px;
margin: 0 auto;
}

a#link14 {
color: #9e857b;
text-decoration: underline;
}

a#link14:hover {text-decoration: none;}


a#link15 {
float: left;
display: block;
width: 180px; height: 20px;
margin-bottom: 5px;
background: transparent url(imports/bt-esp19.png) 0 -5px no-repeat;
}
a#link15:hover {
background: transparent url(imports/bt-esp19.png) 0 -35px no-repeat;
}

a#link16 {
float: left;
display: block;
width: 160px; height: 20px;
margin-bottom: 5px;
background: transparent url(imports/bt-mot.png) 0 0 no-repeat;
}
a#link16:hover {
background: transparent url(imports/bt-mot.png) 0 -20px no-repeat;
}

#footer img {
float: left;
}

/* bonus credits ******************* */

div#bonus {
position: absolute;
top: 0; left: 50px;
width: 740px;
}

div#bonus a, div#credits a {
color: #fff;
text-decoration: underline; 
font-family: dinbold, sans-serif;
}
div#bonus a:hover, div#credits a:hover {text-decoration: none;}

div#bonus p, div#credits p {
width: 650px;
margin-bottom: 5px;
font-family: dinbold, sans-serif;
}

div#bonus p {
font-size: 0.9em;
width: 700px;
}

div#bonus hr {
visibility: hidden;
width: 10px;
margin: 10px 0;
}

div#credits {
position: absolute;
top: 20px; left: 30px;
width: 740px;
}

div#credits p {margin-bottom: 20px;}

div#credits div.team {
padding: 2px;
border: #999 1px solid;
background-color: #4a3932;
}


div#auteurs {
position: absolute;
top: 20px; left: 30px;
width: 760px;
}

div#auteurs p {
font-size: 0.8em;
font-family: dinbold, sans-serif;
}

div#auteurs a {
font-family: dinbold, sans-serif;
}