/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 10, 2017 */ @font-face { font-family: 'krungthepregular'; src: url('../fonts/krungthep-webfont.eot'); src: url('../fonts/krungthep-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/krungthep-webfont.woff2') format('woff2'), url('../fonts/krungthep-webfont.woff') format('woff'), url('../fonts/krungthep-webfont.ttf') format('truetype'), url('../fonts/krungthep-webfont.svg#krungthepregular') format('svg'); font-weight: normal; font-style: normal;} /*GLOBAL*/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix {display: inline-block;} .selected { background: #FF0000; color: #FFF;} html[xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;} .clear{clear: both;} p {margin: 0px; } a:hover { color: white} a { text-decoration: none ; color: #a6a6a5; } *{box-sizing: border-box;} ul {list-style: none;} body{ font-family: 'krungthepregular'; font-size: 12px ; margin: 0px ; padding: 0px; background-color:#353534; color: white} header { width: 1000px; height: 60px;} /* WRAPPER GLOBAL */ #wrapper{max-width:1000px;margin:0px auto;} .backgroundlogin {height: 408px; width: 900px; margin: 0px auto; background-image: url(../img/bklogin.png); background-size: cover; padding-top: 40px;} .backgroundHaut { height: 303px; width: 900px; margin: 0px auto; background-image: url(../img/bk.png); background-size: cover; margin-top: 18px;} .backgroundloginHaut { height: 303px; width: 900px; margin: 0px auto; background-image: url(../img/bkloginhaut.png); background-size: cover; margin-top: 18px;} .backgroundHautdojo { height: 303px; width: 900px; margin: 0px auto; background-image: url(../img/bkdojo.png); background-size: cover; margin-top: 18px;} .backgroundHautchance { height: 303px; width: 900px; margin: 0px auto; background-image: url(../img/bkchance.png); background-size: cover; margin-top: 18px;} .backgroundJoystique {height: 413px; width: 900px; margin: 0px auto; background-image: url(../img/bkjoy.png); background-size: cover} .backgroundTopTen {height: 616px; width: 900px; margin: 0px auto; background-image: url(../img/backtopten.png); background-size: cover;} #menu li {float: left; margin-right: 49px;} #menu li a {text-decoration: none;font-size: 11px;} #infoJoueur li {float: left; margin-right: 49px;} #infoJoueur li a {text-decoration: none;font-size: 13px;} #infoJ { color: white; margin: 0px auto; font-size: 14px; margin-bottom: 45px; text-align: right; text-transform: uppercase; margin-left: 253px;} .texteRed {color: #e73845;} .m {margin-left: 20px ; color: #a6a6a5;font-size: 11px; float: left; margin-top: 25px;} #logo { width: 178px; height: 68px; margin: 0px auto ;background-image: url(../img/logo.svg); background-size: cover ; position: absolute; margin-left: 416px;} /* login */ #input { margin: 0px auto; width: 300px; position: relative; padding-top: 35px; color: white;} input {font-family: 'krungthepregular'; font-size: 14px ; width: 300px; height: 40px; color: #353534; } #identifiants {margin: 0px auto ; width: 472px; height: 53px;position: relative; padding-top: 16px; font-size: 14px ;color :#a6a6a5} #enterlogin { margin: 0px auto ; width:77px; position: relative; cursor: pointer;background-color: #262625 ; border: #262625; color: #a6a6a5; margin-left: 110px;} #login {width: 380px; height: 65px;background-image: url(../img/login.svg); background-size: cover;margin : 0px auto; position: relative;} #logout {cursor: pointer;} /* AFFICHAGE HAUT */ #gagne {width: 460px; height: 84px;background-image: url(../img/gagne.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #perdu {width: 460px; height: 84px;background-image: url(../img/perdu.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #egalite {width: 460px; height: 84px;background-image: url(../img/egalite.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #choisirVotreJoueur {width: 460px; height: 107px;background-image: url(../img/choisirjoueur.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: block} #vs {width: 460px; height: 107px;background-image: url(../img/vs.svg); background-size: cover; float: left; position: absolute; margin-top: 100px;margin-left: 229px; display: none} #appuyerGo {width: 460px; height: 104px;background-image: url(../img/go.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: block} #gagnepartie {width: 460px; height: 104px;background-image: url(../img/gagnepartie.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #perdupartie {width: 460px; height: 104px;background-image: url(../img/perdupartie.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #jouer { cursor: pointer;} /* personnage */ #persoLogin {width: 220px; height: 220px;background-image: url(../img/ghost.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 340px;display: block} #caillouxGaucheGLogin {width: 160px; height: 120px;background-image: url(../img/caillouxGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 146px;margin-left: 275px; display: block} #caillouxDroiteGLogin {width: 160px; height: 120px;background-image: url(../img/caillouxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 146px;margin-left:460px; display: block} #atsumoGauche {width: 220px; height: 220px;background-image: url(../img/atsumo.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #atsumiGauche {width: 220px; height: 220px;background-image: url(../img/atsumi.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #knorgGauche {width: 220px; height: 220px;background-image: url(../img/knorg.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #chiefGauche {width: 220px; height: 220px;background-image: url(../img/chief.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #giantGauche {width: 220px; height: 220px;background-image: url(../img/giant.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #shadowGauche {width: 220px; height: 220px;background-image: url(../img/shadow.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #grumpGauche {width: 220px; height: 220px;background-image: url(../img/grump.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #pandaGauche {width: 220px; height: 220px;background-image: url(../img/panda.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #afroGauche {width: 220px; height: 220px;background-image: url(../img/afro.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #ghostGauche {width: 220px; height: 220px;background-image: url(../img/ghost.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #ombreGauche {width: 220px; height: 220px;background-image: url(../img/ombre.svg); background-size: cover; float: left; margin-top: 89px;margin-left: 124px;display: none} #atsumoDroite {width: 220px; height: 220px;background-image: url(../img/atsumo.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #atsumiDroite {width: 220px; height: 220px;background-image: url(../img/atsumi.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #knorgDroite {width: 220px; height: 220px;background-image: url(../img/knorg.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #chiefDroite {width: 220px; height: 220px;background-image: url(../img/chief.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #giantDroite {width: 220px; height: 220px;background-image: url(../img/giant.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #shadowDroite {width: 220px; height: 220px;background-image: url(../img/shadow.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #grumpDroite {width: 220px; height: 220px;background-image: url(../img/grump.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #pandaDroite {width: 220px; height: 220px;background-image: url(../img/panda.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #afroDroite {width: 220px; height: 220px;background-image: url(../img/afro.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #ghostDroite {width: 220px; height: 220px;background-image: url(../img/ghost.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #ombreDroite {width: 220px; height: 220px;background-image: url(../img/ombre.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #senseiDroite {width: 220px; height: 220px;background-image: url(../img/sensei.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #nekoDroite {width: 220px; height: 220px;background-image: url(../img/neko.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: none} #caillouxGaucheG {width: 160px; height: 120px;background-image: url(../img/caillouxGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 146px;margin-left: 64px; display: none} #caillouxDroiteG {width: 160px; height: 120px;background-image: url(../img/caillouxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 146px;margin-left: 243px; display: none} #feuilleGaucheG {width: 160px; height: 120px;background-image: url(../img/feuilleGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 190px;margin-left: 45px;display: none} #feuilleDroiteG {width: 160px; height: 120px;background-image: url(../img/feuilleDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 190px;margin-left: 261px;display: none} #ciseauxGaucheG {width: 160px; height: 120px;background-image: url(../img/ciseauxGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 162px;margin-left: 30px;display: none} #ciseauxDroiteG {width: 160px; height: 120px;background-image: url(../img/ciseauxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 162px;margin-left: 276px;display: none} #caillouxGaucheD {width: 160px; height: 120px;background-image: url(../img/caillouxGauche.svg); background-size: cover; float: left; position: absolute;margin-top: 146px; margin-left: 495px;display: none} #caillouxDroiteD {width: 160px; height: 120px;background-image: url(../img/caillouxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 146px; margin-left: 679px;display: none} #feuilleGaucheD {width: 160px; height: 120px;background-image: url(../img/feuilleGauche.svg); background-size: cover; float: left; position: absolute;margin-top: 190px; margin-left: 478px;display: none} #feuilleDroiteD {width: 160px; height: 120px;background-image: url(../img/feuilleDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 190px; margin-left: 698px;display: none} #ciseauxGaucheD {width: 160px; height: 120px;background-image: url(../img/ciseauxGauche.svg); background-size: cover; float: left; position: absolute;margin-top: 162px; margin-left: 462px;display: none} #ciseauxDroiteD {width: 160px; height: 120px;background-image: url(../img/ciseauxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 162px; margin-left: 712px;display: none} #caillouxGaucheGatsumi {width: 160px; height: 120px;background-image: url(../img/caillouxGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 146px;margin-left: 84px; display: none} #caillouxDroiteGatsumi {width: 160px; height: 120px;background-image: url(../img/caillouxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 146px;margin-left: 215px; display: none} #feuilleGaucheGatsumi {width: 160px; height: 120px;background-image: url(../img/feuilleGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 190px;margin-left: 74px;display: none} #feuilleDroiteGatsumi {width: 160px; height: 120px;background-image: url(../img/feuilleDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 190px;margin-left: 224px;display: none} #ciseauxGaucheGatsumi {width: 160px; height: 120px;background-image: url(../img/ciseauxGauche.svg); background-size: cover; float: left; position: absolute; margin-top: 162px;margin-left: 63px;display: none} #ciseauxDroiteGatsumi {width: 160px; height: 120px;background-image: url(../img/ciseauxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 162px;margin-left: 236px;display: none} #caillouxGaucheDatsumi {width: 160px; height: 120px;background-image: url(../img/caillouxGauche.svg); background-size: cover; float: left; position: absolute;margin-top: 146px; margin-left: 518px;display: none} #caillouxDroiteDatsumi {width: 160px; height: 120px;background-image: url(../img/caillouxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 146px; margin-left: 648px;display: none} #feuilleGaucheDatsumi {width: 160px; height: 120px;background-image: url(../img/feuilleGauche.svg); background-size: cover; float: left; position: absolute;margin-top: 190px; margin-left: 507px;display: none} #feuilleDroiteDatsumi {width: 160px; height: 120px;background-image: url(../img/feuilleDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 190px; margin-left: 658px;display: none} #ciseauxGaucheDatsumi {width: 160px; height: 120px;background-image: url(../img/ciseauxGauche.svg); background-size: cover; float: left; position: absolute;margin-top: 162px; margin-left: 494px;display: none} #ciseauxDroiteDatsumi {width: 160px; height: 120px;background-image: url(../img/ciseauxDroite.svg); background-size: cover; float: left;position: absolute;margin-top: 162px; margin-left: 674px;display: none} /* JOYSTICK */ #buttonFeuille {width: 120px; height: 120px;background-image: url(../img/buttonfeuille.svg); background-size: cover; float: left; position: absolute; margin-top: 60px;margin-left: 266px; cursor: pointer;} #buttonCailloux {width: 120px; height: 120px;background-image: url(../img/buttoncailloux.svg); background-size: cover; float: left; position: absolute; margin-top: 60px;margin-left: 391px;cursor: pointer;} #buttonCiseaux {width: 120px; height: 120px;background-image: url(../img/buttonciseaux.svg); background-size: cover; float: left; position: absolute; margin-top: 60px;margin-left: 514px;cursor: pointer;} #buttonScore1 {width: 60px; height: 60px;background-image: url(../img/buttonscore.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 164px;} #buttonScore2 {width: 60px; height: 60px;background-image: url(../img/buttonscore.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 164px;} #buttonScore3 {width: 60px; height: 60px;background-image: url(../img/buttonscore.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 164px;} #buttonScore4 {width: 60px; height: 60px;background-image: url(../img/buttonscore.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 668px;} #buttonScore5 {width: 60px; height: 60px;background-image: url(../img/buttonscore.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 668px;} #buttonScore6 {width: 60px; height: 60px;background-image: url(../img/buttonscore.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 668px;} #buttonScore1win {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 164px;display: none} #buttonScore2win {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 164px;display: none} #buttonScore3win {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 164px;display: none} #buttonScore4win {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 668px;display: none} #buttonScore5win {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 668px;display: none} #buttonScore6win {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 668px;display: none} #buttonExit {width: 60px; height: 60px;background-image: url(../img/buttonexit.svg); background-size: cover; float: left; position: absolute; margin-top: 242px;margin-left: 299px;cursor: pointer;} #buttonGo {width: 120px; height: 120px;background-image: url(../img/buttonGo.svg); background-size: cover; float: left; position: absolute; margin-top: 206px;margin-left: 392px;cursor: pointer;} #buttonChance {width: 60px; height: 60px;background-image: url(../img/buttonchance.svg); background-size: cover; float: left; position: absolute; margin-top: 242px;margin-left: 550px;cursor: pointer;} #buttonChanceBattle {width: 60px; height: 60px;background-image: url(../img/buttonchance.svg); background-size: cover; float: left; position: absolute; margin-top: 242px;margin-left: 550px;cursor: pointer;} #touchefeuilleT { float: left; position: absolute; margin-top: 175px;margin-left: 300px; font-size: 10px;} #touchecaillouxZ { float: left; position: absolute; margin-top: 175px;margin-left: 421px; font-size: 10px;} #toucheciseauxU { float: left; position: absolute; margin-top: 175px;margin-left: 545px; font-size: 10px;} #toucheGo { float: left; position: absolute; margin-top: 312px;margin-left: 430px; font-size: 10px;} /* SELECTION PEESONNAGE */ #teteatsumo {width: 120px; height: 120px;background-image: url(../img/teteatsumo.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 141px; cursor: pointer;} #tetepanda {width: 120px; height: 120px;background-image: url(../img/tetepanda.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 284px;cursor: pointer;} #teteatsumi {width: 120px; height: 120px;background-image: url(../img/teteatsumi.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 438px;cursor: pointer;} #teteghost {width: 120px; height: 120px;background-image: url(../img/teteghost.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 592px;cursor: pointer;} #tetegiant {width: 120px; height: 120px;background-image: url(../img/tetegiant.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 730px;cursor: pointer;} #teteknorg {width: 120px; height: 120px;background-image: url(../img/teteknorg.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 141px;cursor: pointer;} #teteshadow {width: 120px; height: 120px;background-image: url(../img/teteshadow.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 284px;cursor: pointer;} #tetegrump {width: 120px; height: 120px;background-image: url(../img/tetegrump.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 438px;cursor: pointer;} #teteafro {width: 120px; height: 120px;background-image: url(../img/teteafro.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 592px;cursor: pointer;} #tetechief {width: 120px; height: 120px;background-image: url(../img/tetechief.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 730px;cursor: pointer;} #teteatsumoSelect {width: 120px; height: 120px;background-image: url(../img/teteatsumoselect.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 141px; cursor: pointer; display: none;} #tetepandaSelect {width: 120px; height: 120px;background-image: url(../img/tetepandaselect.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 284px;cursor: pointer; display: none;} #teteatsumiSelect {width: 120px; height: 120px;background-image: url(../img/teteatsumiselect.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 438px;cursor: pointer; display: none;} #teteghostSelect {width: 120px; height: 120px;background-image: url(../img/teteghostselect.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 592px;cursor: pointer; display: none;} #tetegiantSelect {width: 120px; height: 120px;background-image: url(../img/tetegiantselect.svg); background-size: cover; float: left; position: absolute; margin-top: 40px;margin-left: 730px;cursor: pointer; display: none;} #teteknorgSelect {width: 120px; height: 120px;background-image: url(../img/teteknorgselect.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 141px;cursor: pointer;display: none;} #teteshadowSelect {width: 120px; height: 120px;background-image: url(../img/teteshadowselect.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 284px;cursor: pointer;display: none;} #tetegrumpSelect {width: 120px; height: 120px;background-image: url(../img/tetegrumpselect.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 438px;cursor: pointer;display: none;} #teteafroSelect {width: 120px; height: 120px;background-image: url(../img/teteafroselect.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 592px;cursor: pointer;display: none;} #tetechiefSelect {width: 120px; height: 120px;background-image: url(../img/tetechiefselect.svg); background-size: cover; float: left; position: absolute; margin-top: 180px;margin-left: 730px;cursor: pointer;display: none;} #jouer { float: left; position: absolute; margin-top: 330px;margin-left: 469px;} /* PLAYER MUSIC */ #buttonrecul {width: 30px; height: 30px;background-image: url(../img/buttonrecul.svg); background-size: cover; float: left; position: absolute; margin-top: -7px;margin-left: 633px; cursor: pointer;} #buttonplay {width: 30px; height: 30px;background-image: url(../img/buttonplay.svg); background-size: cover; float: left; position: absolute; margin-top: -6px;margin-left: 674px; cursor: pointer;} #buttonavance {width: 30px; height: 30px;background-image: url(../img/buttonavance.svg); background-size: cover; float: left; position: absolute; margin-top: -6px;margin-left: 708px; cursor: pointer;} #titremusique { float: left; position: absolute; margin-top:0px;margin-left: 750px; cursor: pointer; color: #a6a6a5;font-size: 11px;} /* SCORE */ #score { margin: 0px auto ; width: 625px;font-size: 14px; position: relative;padding-top: 155px; text-align: left; text-transform: uppercase;} #logo2 { width: 178px; height: 68px; margin: 0px auto ;background-image: url(../img/logo.svg); background-size: cover ;position: absolute; margin-left: 372px; margin-top: 60px;} #tab { margin: 0px auto ; width: 605px;margin-top: 20px;font-size: 14px;} .center {text-align: center;} /* Dojo */ #gagnedojo {width: 460px; height: 84px;background-image: url(../img/gagnedojo.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #perdudojo {width: 460px; height: 84px;background-image: url(../img/perdudojo.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #egalitedojo {width: 460px; height: 84px;background-image: url(../img/egalitedojo.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #buttonScoredojo {width: 60px; height: 60px;background-image: url(../img/buttonscorewin.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 164px;} #persoDroitedojo {width: 220px; height: 220px;background-image: url(../img/sensei.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: non} #buttonScore1dojo {width: 60px; height: 60px;background-image: url(../img/buttonscoredojo.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 164px;} #buttonScore2dojo {width: 60px; height: 60px;background-image: url(../img/buttonscoredojo.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 164px;} #buttonScore3dojo {width: 60px; height: 60px;background-image: url(../img/buttonscoredojo.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 164px;} #buttonScore4dojo {width: 60px; height: 60px;background-image: url(../img/buttonscoredojo.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 668px;} #buttonScore5dojo {width: 60px; height: 60px;background-image: url(../img/buttonscoredojo.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 668px;} #buttonScore6dojo {width: 60px; height: 60px;background-image: url(../img/buttonscoredojo.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 668px;} #appuyerGodojo {width: 460px; height: 104px;background-image: url(../img/godojo.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: block} /* chance */ #gagnechance {width: 460px; height: 84px;background-image: url(../img/gagnechance.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #perduchance {width: 460px; height: 84px;background-image: url(../img/perduchance.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #egalitechance {width: 460px; height: 84px;background-image: url(../img/egalitechance.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #buttonScorechance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 164px;} #persoDroitechance {width: 220px; height: 220px;background-image: url(../img/neko.svg); background-size: cover;float: left;margin-top: 89px; margin-left: 213px;display: non} #buttonScore1chance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 164px;} #buttonScore2chance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 164px;} #buttonScore3chance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 164px;} #buttonScore4chance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 218px;margin-left: 668px;} #buttonScore5chance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 160px;margin-left: 668px;} #buttonScore6chance {width: 60px; height: 60px;background-image: url(../img/buttonscorechance.svg); background-size: cover; float: left; position: absolute; margin-top: 102px;margin-left: 668px;} #appuyerGochance {width: 460px; height: 146px;background-image: url(../img/gochance.svg); background-size: cover; float: left; position: absolute; margin-top: 38px;margin-left: 229px; display: block} #tropchance {width: 460px; height: 104px;background-image: url(../img/tropchance.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} #paschance {width: 460px; height: 104px;background-image: url(../img/paschance.svg); background-size: cover; float: left; position: absolute; margin-top: 33px;margin-left: 229px; display: none} /* Footer */ #credit_footer { margin: 0px auto; color :#a6a6a5 ; font-size: 10px; width: 320px; margin-top: 20px; margin-bottom: 20px;}