html{

overflow-y: auto;
}

html, body{
font-family: "Lucida Sans", "Lucida Grande",
"Lucida Sans Unicode", Arial, sans-serif;
font-size:0.95em;
width : 100%;
margin : 0;
z-index:0;
}

body{
background:white url('images/bg_optiWeb') no-repeat fixed center top;
position:absolute;
width:100%;
height:100%;
z-index:0;
overflow-x: hidden;
}

a:focus{
outline:0;
}

#boutons{
position:absolute;
width:60px;
height:100px;
z-index:200;
}

#boutons div{
position:relative;
float:left;
width:60px;
height:50px;
}

#boutons div a{
display:block;
width:100%;
height:100%;
}


#display{
position:absolute;
width:400px;
left:50%;
margin-left:-210px;
background:grey;
padding:10px;
text-align:center;
z-index:200;
color:white;
border-radius:10px;
text-shadow: 1px 1px 1px #000000;
margin-top:-60px;
}

#displayCanvas{
position : absolute;
width:400px;
left:50%;
margin-left:-200px;
z-index: 105;
color:white;
background:grey;
padding:15px;
margin-top:-60px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border:solid white 3px;
}

#displayCanvas:hover{
cursor :pointer;
}


#footer{
position:absolute;
width:100%;
height:120px;
background:black;
bottom:0;
z-index:5;
}

#gommeCanvas{
position:absolute;
height:100%;
z-index:100;
visibility:hidden;
}

#crayonCanvas{
position:absolute;
height:100%;
z-index:100;
visibility:hidden;
}

#blocageDiv {
position:absolute;
height:100%;
width: 100%;
z-index:100;
visibility:hidden;
}

#blocReturn{
position:absolute;
height:100%;
width:100%;
z-index:100;
visibility:hidden;
}

#mainConteneur{
position:absolute;
bottom:0;
width:534px;
left: 50%;
margin-left:-267px;
height:750px;
background:url('images/women.png') bottom center no-repeat;
z-index:10;
}


#mainConteneur div{
position:absolute;
}

#mainConteneur div a{
display:block;
width:100%;
height:100%;
}

#lascaux{
top:475px;
left:323px;
background:url('images/mots/lascaux.png') no-repeat;
width:77px;
height:55px;
}

#nombril{
top:725px;
left:240px;
background:url('images/mots/nombril.png') no-repeat;
width:59px;
height:18px;
}

#dessin{
top:630px;
left:206px;
background:url('images/mots/dessin.png') no-repeat;
width:140px;
height:47px;
}

#animation{
top:578px;
left:155px;
background:url('images/mots/animation.png') no-repeat;
width:39px;
height:95px;
}

#ortograffe{
top:623px;
left:239px;
background:url('images/mots/ortograffe.png') no-repeat;
width:105px;
height:18px;
}

#autofiction{
top:598px;
left:208px;
background:url('images/mots/autofiction.png') no-repeat;
width:146px;
height:19px;
}

#emotion{
top:550px;
left:264px;
background:url('images/mots/emotion.png') no-repeat;
width:116px;
height:30px;
}

#beaux-arts{
top:518px;
left:251px;
background:url('images/mots/beaux-arts.png') no-repeat;
width:105px;
height:24px;
}

#art{
top:434px;
left:89px;
background:url('images/mots/art.png') no-repeat;
width:55px;
height:37px;
}

#gomme{
top:417px;
left:163px;
background:url('images/mots/gomme.png') no-repeat;
width:52px;
height:29px;
}

#verbe{
top:320px;
left:247px;
background:url('images/mots/verbe.png') no-repeat;
width:44px;
height:49px;
}

#photographie{
top:444px;
left:278px;
background:url('images/mots/photographie.png') no-repeat;
width:169px;
height:39px;
}

#cul{
top:254px;
left:179px;
background:url('images/mots/cul.png') no-repeat;
width:26px;
height:20px;
}

#ture{
top:167px;
left:373px;
background:url('images/mots/ture.png') no-repeat;
width:43px;
height:29px;
}

#imagination{
top:72px;
left:373px;
background:url('images/mots/imagination.png') no-repeat;
width:67px;
height:59px;
}

#aquarelle{
top:468px;
left:76px;
background:url('images/mots/aquarelle.png') no-repeat;
width:63px;
height:40px;
}

#synopsis{
top:493px;
left:104px;
background:url('images/mots/synopsis.png') no-repeat;
width:34px;
height:20px;
}

#phylactere{
top:82px;
left:97px;
background:url('images/mots/phylactere.png') no-repeat;
width:140px;
height:133px;
}

#acrylique{
top:138px;
left:259px;
background:url('images/mots/acrylique.png') no-repeat;
width:104px;
height:37px;
}

#cinema{
top:388px;
left:83px;
background:url('images/mots/cinema.png') no-repeat;
width:105px;
height:39px;
}

#onomatopee{
top:226px;
left:349px;
background:url('images/mots/onomatope.png') no-repeat;
width:57px;
height:53px;
}

#fusain{
top:508px;
left:433px;
background:url('images/mots/fusain.png') no-repeat;
width:24px;
height:107px;
}

#gouache{
top:525px;
left:415px;
background:url('images/mots/gouache.png') no-repeat;
width:73px;
height:33px;
}

#crayon{
top:335px;
left:181px;
background:url('images/mots/crayon.png') no-repeat;
width:30px;
height:45px;
}

#bd{
top:395px;
left:385px;
background:url('images/mots/bd.png') no-repeat;
width:51px;
height:27px;
}

#bilal{
top:653px;
left:390px;
background:url('images/mots/bilal.png') no-repeat;
width:30px;
height:16px;
}

#noirBlanc{
top:578px;
left:37px;
background:url('images/mots/noirBlanc.png') no-repeat;
width:55px;
height:85px;
}

#bulle1 {
background:url('images/phylactere/bulle1.png') no-repeat;
width: 100px;
height: 95px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top : -350px;
margin-left : 00px;
z-index: 11;
}

#bulle2 {
background:url('images/phylactere/bulle2.png') no-repeat;
width: 155px;
height: 80px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top : -350px;
margin-left : 00px;
z-index:11;
}

#bulle3 {
background:url('images/phylactere/bulle3.png') no-repeat;
width: 150px;
height: 110px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top : -350px;
margin-left : 00px;
z-index:11;
}

#bulle4 {
background:url('images/phylactere/bulle4.png') no-repeat;
width: 120px;
height: 120px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top: -160px;
margin-left : -180px;
z-index:11;
}

#bulle5 {
background:url('images/phylactere/bulle5.png') no-repeat;
width: 180px;
height: 130px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top: -160px;
margin-left : -250px;
z-index:11;
}

#bulle6 {
background:url('images/phylactere/bulle6.png') no-repeat;
width: 170px;
height: 130px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top: -170px;
margin-left : 120px;
z-index:11;
}

#bulle7 {
background:url('images/phylactere/bulle7.png') no-repeat;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
display: none;
position: absolute;
margin-top: -140px;
margin-left : -250px;
z-index:11;
}


#onomatopee1 {
background:url('images/onomatopee/tchac.png') no-repeat;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left : 200px;
display: none;
position: absolute;
z-index:11;
}

#onomatopee2 {
background:url('images/onomatopee/bziiiip.png') no-repeat;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-left : -300px;
display: none;
position: absolute;
z-index:11;
}

#onomatopee3 {
background:url('images/onomatopee/clac.png') no-repeat;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-left : 500px;
display: none;
position: absolute;
z-index:11;
}

#onomatopee4 {
background:url('images/onomatopee/plop.png') no-repeat;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-top: 100px;
margin-left : 200px;
display: none;
position: absolute;
position: absolute;
z-index:11;
}

#onomatopee5 {
background:url('images/onomatopee/schplok.png') no-repeat;
width: 225px;
height: 100px;
left: 50%;
top: 50%;
margin-top: 200px;
margin-left : -400px;
display: none;
position: absolute;
z-index:11;
}

#onomatopee6 {
background:url('images/onomatopee/bdom.png') no-repeat;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-top : -200px;
margin-left : -300px;
display: none;
position: absolute;
z-index:11;
}

#onomatopee7 {
background:url('images/onomatopee/tactactac.png') no-repeat;
width: 150px;
height: 100px;
left: 50%;
top: 50%;
margin-top : -200px;
margin-left : 400px;
display: none;
position: absolute;
z-index:11;
}