.characterwalking { -webkit-animation: bounce 0.5s infinite alternate; } @keyframes bounce { from { transform: translateY(-5px); } to { transform: translateY(0px); } } #gametokenclose {position: absolute; bottom: 20px; left: 20px; height: 61px; width: 62px; background-image: url(../sitePics/gametokenclose.svg); transition: transform .5s ease-in-out; display: none;} #gametokenclose:hover{-webkit-transform: scale(1.1); cursor:pointer;} #answerspad {position: absolute; width: 580px; height: 70px; left: 50%; margin-left: -300px; bottom: -100px; border-radius: 10px; overflow:hidden; border: 3px solid black; background-color: white; padding: 10px;} .respondquestion {display: block; height: 6px; color: #1B1511; font-weight: bold; font-size: 17px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;} .respondquestion:hover {color: #674F41; font-weight: bold; font-size: 18px; cursor:pointer;} .respondquestionsec {display: block; height: 6px; color: #1B1511; font-weight: bold; font-size: 17px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; border-top: 1px solid black;} .respondquestionsec:hover {color: #674F41; font-weight: bold; font-size: 18px; cursor:pointer;} /********** Robby Assistance Robot ********************/ .robbyfloating { -webkit-animation: robbybounce 4.0s infinite alternate; } @keyframes robbybounce { from { transform: translateY(-15px); } to { transform: translateY(0px); } } .robby_bellybutton_off {position: absolute; top: 153px; left: 69px; height: 49px; width: 69px; background-image: url(../games/promotedicktracy/images/robby_bellybutton_off.svg);} .robby_bellybutton_on {position: absolute; top: 153px; left: 69px; height: 49px; width: 69px; background-image: url(../games/promotedicktracy/images/robby_bellybutton_on.svg); transition: transform .5s ease-in-out; display: none;} .robby_bellybutton_on:hover{-webkit-transform: scale(1.1); cursor:pointer;} .robby_speech_left {position: absolute; background-image: url(../games/promotedicktracy/images/speech_left.svg); font-size: 12px; padding: 20px; color: #131317; text-align: left;} .robby_speech_right {position: absolute; background-image: url(../games/promotedicktracy/images/speech_right.svg); font-size: 12px; padding: 20px; color: #131317; text-align: left;} #speechballoontext { position: absolute; color: #111111; font-weight: bold; font-size: 16px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; } /******************************************************************** PROMOTE DT ******************************************************************************************/ /* backgrounds */ .promotedt_background_intro {position: absolute; left: 0px; bottom: 0px; background-image: url(../games/promotedicktracy/images/background_intro.jpg); height: 612px; width: 1000px;} .promotedt_background_token {position: absolute; left: 0px; bottom: 0px; background-image: url(../games/promotedicktracy/images/background_token.jpg); height: 612px; width: 1000px;} #token_promotedt {position: absolute; left: 50%; margin-left: -140px; top: -460px; background-image: url(../games/promotedicktracy/images/token.png); height: 456px; width: 280px;} #promotedt_dude {position: absolute; left: 1050px; bottom: -10px; background-image: url(../games/promotedicktracy/images/intro_dude.png); height: 582px; width: 270px;} #promotedt_dudenude {position: absolute; left: -350px; bottom: -10px; background-image: url(../games/promotedicktracy/images/intro_dudenude.png); height: 612px; width: 343px;} #promotedt_speechballoonintro {display:none; background-image: url(../games/spotthediffereces/images/speech_intro.svg);} #laptop_top {position: absolute; left: 0px; top: 0px; background-image: url(../games/promotedicktracy/images/laptop_top.png); height: 43px; width: 1000px;} #laptop_left {position: absolute; left: 0px; top: 43px; background-image: url(../games/promotedicktracy/images/laptop_left.png); height: 569px; width: 107px;} #laptop_right {position: absolute; right: 0px; top: 43px; background-image: url(../games/promotedicktracy/images/laptop_right.png); height: 569px; width: 131px;} #laptop_bottom {position: absolute; left: 0px; bottom: 0px; background-image: url(../games/promotedicktracy/images/laptop_bottom.png); height: 51px; width: 1000px;} #promotedt_flywerholder {position: absolute; left: 135px; top: 90px; width: 490px; height: 420px;} #flyersetmenu {position: absolute; left: 664px; top: 82px; width: 212px; height: 58px;} #flyersetmenu .But1On {position: absolute; top: 4px; left: 1px; height: 50px; width: 51px; background-image: url(../games/promotedicktracy/images/IconSet1.svg);} #flyersetmenu .But2On {position: absolute; top: 1px; left: 53px; height: 56px; width: 59px; background-image: url(../games/promotedicktracy/images/IconSet2.svg);} #flyersetmenu .But3On {position: absolute; top: 4px; left: 117px; height: 50px; width: 37px; background-image: url(../games/promotedicktracy/images/IconSet3.svg);} #flyersetmenu .But4On {position: absolute; top: 4px; left: 160px; height: 50px; width: 51px; background-image: url(../games/promotedicktracy/images/IconSet4.svg);} #flyersetmenu .But1Off {position: absolute; top: 10px; left: 7px; height: 37px; width: 37px; background-image: url(../games/promotedicktracy/images/IconSet1.svg);transition: transform .5s ease-in-out;} #flyersetmenu .But2Off {position: absolute; top: 8px; left: 60px; height: 41px; width: 43px; background-image: url(../games/promotedicktracy/images/IconSet2.svg);transition: transform .5s ease-in-out;} #flyersetmenu .But3Off {position: absolute; top: 11px; left: 121px; height: 37px; width: 27px; background-image: url(../games/promotedicktracy/images/IconSet3.svg);transition: transform .5s ease-in-out;} #flyersetmenu .But4Off {position: absolute; top: 11px; left: 167px; height: 36px; width: 36px; background-image: url(../games/promotedicktracy/images/IconSet4.svg);transition: transform .5s ease-in-out;} #flyersetmenu .But1Off:hover,.But2Off:hover,.But3Off:hover,.But4Off:hover {-webkit-transform: scale(1.5); cursor:pointer;} #flyer1 {position: absolute; left: 0px; top: 0px; width: 150px; height: 200px; transition: transform .5s ease-in-out;} #flyer2 {position: absolute; left: 170px; top: 0px; width: 150px; height: 200px; transition: transform .5s ease-in-out;} #flyer3 {position: absolute; left: 340px; top: 0px; width: 150px; height: 200px; transition: transform .5s ease-in-out;} #flyer4 {position: absolute; left: 0px; top: 220px; width: 150px; height: 200px; transition: transform .5s ease-in-out;} #flyer5 {position: absolute; left: 170px; top: 220px; width: 150px; height: 200px; transition: transform .5s ease-in-out;} #flyer6 {position: absolute; left: 340px; top: 220px; width: 150px; height: 200px; transition: transform .5s ease-in-out;} #flyer1:hover,#flyer2:hover,#flyer3:hover,#flyer4:hover,#flyer5:hover,#flyer6:hover {-webkit-transform: scale(1.1); cursor:pointer;} .flyerselected {-webkit-transform: scale(1.1); border: 1px solid #feb400;} .flyergreyedout {filter: grayscale(100%);} .promolanguage_active {padding: 3px; border: 1px solid #feb400; border-radius: 27px; -webkit-border-radius: 27px; margin-top: 4px;} .promolanguage_inactive {padding: 3px; border: 1px solid #131317; border-radius: 27px; -webkit-border-radius: 27px; margin-top: 4px; cursor:pointer;} .textfieldpromote { border: 1px solid white; border-radius: 4px; -webkit-border-radius: 4px; margin-bottom: 8px; height: 30px; padding: 6px; font-size: 15px; background-color: #131317; color: white; width: 100%; } .textfieldpromote:focus { border: 1px solid #feb400; outline: none; } .textfieldpromoteerror { border: 1px solid white; border-radius: 4px; -webkit-border-radius: 4px; margin-bottom: 8px; height: 30px; padding: 6px; font-size: 15px; background-color: #131317; color: white; width: 100%; } .textfieldpromoteerror:focus { border: 1px solid #FF0000; outline: none; } .set1flyer1 {background-image: url(../games/promotedicktracy/images/promoflyer_set1_1.jpg); background-size: 150px 200px;} .set1flyer2 {background-image: url(../games/promotedicktracy/images/promoflyer_set1_2.jpg); background-size: 150px 200px;} .set1flyer3 {background-image: url(../games/promotedicktracy/images/promoflyer_set1_3.jpg); background-size: 150px 200px;} .set1flyer4 {background-image: url(../games/promotedicktracy/images/promoflyer_set1_4.jpg); background-size: 150px 200px;} .set1flyer5 {background-image: url(../games/promotedicktracy/images/promoflyer_set1_5.jpg); background-size: 150px 200px;} .set1flyer6 {background-image: url(../games/promotedicktracy/images/promoflyer_set1_6.jpg); background-size: 150px 200px;} .set2flyer1 {background-image: url(../games/promotedicktracy/images/promoflyer_set2_1.jpg); background-size: 150px 200px;} .set2flyer2 {background-image: url(../games/promotedicktracy/images/promoflyer_set2_2.jpg); background-size: 150px 200px;} .set2flyer3 {background-image: url(../games/promotedicktracy/images/promoflyer_set2_3.jpg); background-size: 150px 200px;} .set2flyer4 {background-image: url(../games/promotedicktracy/images/promoflyer_set2_4.jpg); background-size: 150px 200px;} .set2flyer5 {background-image: url(../games/promotedicktracy/images/promoflyer_set2_5.jpg); background-size: 150px 200px;} .set2flyer6 {background-image: url(../games/promotedicktracy/images/promoflyer_set2_6.jpg); background-size: 150px 200px;} .set3flyer1 {background-image: url(../games/promotedicktracy/images/promoflyer_set3_1.jpg); background-size: 150px 200px;} .set3flyer2 {background-image: url(../games/promotedicktracy/images/promoflyer_set3_2.jpg); background-size: 150px 200px;} .set3flyer3 {background-image: url(../games/promotedicktracy/images/promoflyer_set3_3.jpg); background-size: 150px 200px;} .set3flyer4 {background-image: url(../games/promotedicktracy/images/promoflyer_set3_4.jpg); background-size: 150px 200px;} .set3flyer5 {background-image: url(../games/promotedicktracy/images/promoflyer_set3_5.jpg); background-size: 150px 200px;} .set3flyer6 {background-image: url(../games/promotedicktracy/images/promoflyer_set3_6.jpg); background-size: 150px 200px;} .set1flyer1big {background-image: url(../games/promotedicktracy/images/promoflyer_set1_1.jpg); background-size: 315px 420px;} .set1flyer2big {background-image: url(../games/promotedicktracy/images/promoflyer_set1_2.jpg); background-size: 315px 420px;} .set1flyer3big {background-image: url(../games/promotedicktracy/images/promoflyer_set1_3.jpg); background-size: 315px 420px;} .set1flyer4big {background-image: url(../games/promotedicktracy/images/promoflyer_set1_4.jpg); background-size: 315px 420px;} .set1flyer5big {background-image: url(../games/promotedicktracy/images/promoflyer_set1_5.jpg); background-size: 315px 420px;} .set1flyer6big {background-image: url(../games/promotedicktracy/images/promoflyer_set1_6.jpg); background-size: 315px 420px;} .set2flyer1big {background-image: url(../games/promotedicktracy/images/promoflyer_set2_1.jpg); background-size: 315px 420px;} .set2flyer2big {background-image: url(../games/promotedicktracy/images/promoflyer_set2_2.jpg); background-size: 315px 420px;} .set2flyer3big {background-image: url(../games/promotedicktracy/images/promoflyer_set2_3.jpg); background-size: 315px 420px;} .set2flyer4big {background-image: url(../games/promotedicktracy/images/promoflyer_set2_4.jpg); background-size: 315px 420px;} .set2flyer5big {background-image: url(../games/promotedicktracy/images/promoflyer_set2_5.jpg); background-size: 315px 420px;} .set2flyer6big {background-image: url(../games/promotedicktracy/images/promoflyer_set2_6.jpg); background-size: 315px 420px;} .set3flyer1big {background-image: url(../games/promotedicktracy/images/promoflyer_set3_1.jpg); background-size: 315px 420px;} .set3flyer2big {background-image: url(../games/promotedicktracy/images/promoflyer_set3_2.jpg); background-size: 315px 420px;} .set3flyer3big {background-image: url(../games/promotedicktracy/images/promoflyer_set3_3.jpg); background-size: 315px 420px;} .set3flyer4big {background-image: url(../games/promotedicktracy/images/promoflyer_set3_4.jpg); background-size: 315px 420px;} .set3flyer5big {background-image: url(../games/promotedicktracy/images/promoflyer_set3_5.jpg); background-size: 315px 420px;} .set3flyer6big {background-image: url(../games/promotedicktracy/images/promoflyer_set3_6.jpg); background-size: 315px 420px;} #escapingBallG{ position: absolute; left: 15px; top: 20px; width:80px; height:40px; } .escapingBallG{ background-color:rgb(0,230,255); position:absolute; top:0; left:0; width:40px; height:40px; border-radius:20px; -o-border-radius:20px; -ms-border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; animation-name:bounce_escapingBallG; -o-animation-name:bounce_escapingBallG; -ms-animation-name:bounce_escapingBallG; -webkit-animation-name:bounce_escapingBallG; -moz-animation-name:bounce_escapingBallG; animation-duration:1.5s; -o-animation-duration:1.5s; -ms-animation-duration:1.5s; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-timing-function:linear; -o-animation-timing-function:linear; -ms-animation-timing-function:linear; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; animation-delay:0s; -o-animation-delay:0s; -ms-animation-delay:0s; -webkit-animation-delay:0s; -moz-animation-delay:0s; transform:scale(0.5, 1); -o-transform:scale(0.5, 1); -ms-transform:scale(0.5, 1); -webkit-transform:scale(0.5, 1); -moz-transform:scale(0.5, 1); } @keyframes bounce_escapingBallG{ 0%{ left:0px; transform:scale(0.5, 1); } 25%{ left:26px; transform:scale(1, 0.5); } 50%{ left:66px; transform:scale(0.5, 1); } 75%{ left:26px; transform:scale(1, 0.5); } 100%{ left:0px; transform:scale(0.5, 1); } } @-o-keyframes bounce_escapingBallG{ 0%{ left:0px; -o-transform:scale(0.5, 1); } 25%{ left:26px; -o-transform:scale(1, 0.5); } 50%{ left:66px; -o-transform:scale(0.5, 1); } 75%{ left:26px; -o-transform:scale(1, 0.5); } 100%{ left:0px; -o-transform:scale(0.5, 1); } } @-ms-keyframes bounce_escapingBallG{ 0%{ left:0px; -ms-transform:scale(0.5, 1); } 25%{ left:26px; -ms-transform:scale(1, 0.5); } 50%{ left:66px; -ms-transform:scale(0.5, 1); } 75%{ left:26px; -ms-transform:scale(1, 0.5); } 100%{ left:0px; -ms-transform:scale(0.5, 1); } } @-webkit-keyframes bounce_escapingBallG{ 0%{ left:0px; -webkit-transform:scale(0.5, 1); } 25%{ left:26px; -webkit-transform:scale(1, 0.5); } 50%{ left:66px; -webkit-transform:scale(0.5, 1); } 75%{ left:26px; -webkit-transform:scale(1, 0.5); } 100%{ left:0px; -webkit-transform:scale(0.5, 1); } } @-moz-keyframes bounce_escapingBallG{ 0%{ left:0px; -moz-transform:scale(0.5, 1); } 25%{ left:26px; -moz-transform:scale(1, 0.5); } 50%{ left:66px; -moz-transform:scale(0.5, 1); } 75%{ left:26px; -moz-transform:scale(1, 0.5); } 100%{ left:0px; -moz-transform:scale(0.5, 1); } } /********************************************************************** MEMORY ********************************************************************************************/ /* backgrounds */ .memory_background_bridge{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/bridge.png); height: 612px; width: 1000px;} .memory_background_spacemap{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/spacemap.png); height: 612px; width: 1000px;} .memory_background_emptyspace{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/spacemap_empty.png); height: 612px; width: 1000px;} .memory_level_load1{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/level_1.png); height: 612px; width: 1000px;} .memory_level_load2{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/level_2.png); height: 612px; width: 1000px;} .memory_level_load3{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/level_3.png); height: 612px; width: 1000px;} .memory_level_load4{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/level_4.png); height: 612px; width: 1000px;} .memory_level_load5{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/level_5.png); height: 612px; width: 1000px;} .memory_level_load6{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/level_6.png); height: 612px; width: 1000px;} .memory_level_planet1{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/planet_1.png); height: 612px; width: 1000px;} .memory_level_planet2{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/planet_2.png); height: 612px; width: 1000px;} .memory_level_planet3{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/planet_3.png); height: 612px; width: 1000px;} .memory_level_planet4{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/planet_4.png); height: 612px; width: 1000px;} .memory_level_planet5{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/planet_5.png); height: 612px; width: 1000px;} .memory_level_planet6{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/memory/images/planet_6.png); height: 612px; width: 1000px;} /* diverse */ #spacecaptain_start {position: absolute; left: -341px; bottom: -20px; background-image: url(../games/memory/images/captain.png); height: 576px; width: 341px;} #spacecaptain_ending {position: absolute; left: -450px; bottom: -20px; background-image: url(../games/memory/images/captain2.png); height: 593px; width: 449px;} #token_memory {position: absolute; left: 50%; margin-left: -140px; top: -460px; background-image: url(../games/memory/images/token.png); height: 456px; width: 280px;} #token_rays {display:none; position: absolute; left: 50%; top: 50%; margin-left: -316px; margin-top: -316px; background-image: url(../games/memory/images/token_rays.png); height: 632px; width: 632px; animation: rayrotation 30s infinite linear;} @keyframes rayrotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .memory_nametag_p1{position: absolute; left: 0px; top: 10px; background-image: url(../games/memory/images/nametag_p1.png); height: 40px; width: 390px;} .memory_nametag_p2{position: absolute; left: 0px; top: 10px; background-image: url(../games/memory/images/nametag_p2.png); height: 40px; width: 390px;} .memory_nametag_p3{position: absolute; left: 0px; top: 10px; background-image: url(../games/memory/images/nametag_p3.png); height: 40px; width: 390px;} .memory_nametag_p4{position: absolute; left: 0px; top: 10px; background-image: url(../games/memory/images/nametag_p4.png); height: 40px; width: 390px;} .memory_nametag_p5{position: absolute; left: 0px; top: 10px; background-image: url(../games/memory/images/nametag_p5.png); height: 40px; width: 390px;} .memory_nametag_p6{position: absolute; left: 0px; top: 10px; background-image: url(../games/memory/images/nametag_p6.png); height: 40px; width: 390px;} #speechballoon {display:none; position: absolute; left: 459px; top: 50px; height: 229px; width: 477px; background-image: url(../games/memory/images/speechballoon.svg);} /* buttons */ .startbutton_a{height: 60px; width: 125px; background-image: url(../games/memory/images/button_start_a.png); transition: transform .5s ease-in-out;} .startbutton_a:hover{-webkit-transform: scale(1.1); cursor:pointer;} .startbutton_b{height: 60px; width: 125px; background-image: url(../games/memory/images/button_start_b.png); cursor:pointer; animation: ButtonDeZoom 0.5s ease-in-out;} .retrybutton_a{height: 63px; width: 76px; background-image: url(../games/memory/images/button_retry_a.png); transition: transform .5s ease-in-out;} .retrybutton_a:hover{-webkit-transform: scale(1.1); cursor:pointer;} .retrybutton_b{height: 63px; width: 76px; background-image: url(../games/memory/images/button_retry_b.png); cursor:pointer; animation: ButtonDeZoom 0.5s ease-in-out;} .nextbutton_a{height: 63px; width: 76px; background-image: url(../games/memory/images/button_next_a.png); transition: transform .5s ease-in-out;} .nextbutton_a:hover{-webkit-transform: scale(1.1); cursor:pointer;} .nextbutton_b{height: 63px; width: 76px; background-image: url(../games/memory/images/button_next_b.png); cursor:pointer; animation: ButtonDeZoom 0.5s ease-in-out;} @keyframes ButtonDeZoom { 0% { transform: scale(1.1); } 100% { transform: scale(1);} } /* spacemap */ #gametitle_memory{background-image: url(../games/memory/images/title_game.png); height: 75px; width: 175px;} #spacemap_rocket{background-image: url(../games/memory/images/spaceship.png); height: 60px; width: 54px;} .rocket_pos1{position: absolute; left: 170px; top: 490px; transform: rotate(42deg);} .rocket_pos2{position: absolute; left: 240px; top: 20px; transform: rotate(84deg);} .rocket_pos3{position: absolute; left: 330px; top: 535px; transform: rotate(125deg);} .rocket_pos4{position: absolute; left: 580px; top: 155px;transform: rotate(70deg);} .rocket_pos5{position: absolute; left: 750px; top: 520px; transform: rotate(105deg);} .rocket_pos6{position: absolute; left: 930px; top: 30px; transform: rotate(155deg);} #spacemap_levelball_off{background-image: url(../games/memory/images/dot1.png); height: 34px; width: 34px;} #spacemap_levelball_on{background-image: url(../games/memory/images/dot2.png); height: 34px; width: 34px;} .levelball_pos1{position: absolute; left: 184px; top: 500px;} .levelball_pos2{position: absolute; left: 240px; top: 35px;} .levelball_pos3{position: absolute; left: 335px; top: 540px;} .levelball_pos4{position: absolute; left: 590px; top: 170px;} .levelball_pos5{position: absolute; left: 770px; top: 535px;} .levelball_pos6{position: absolute; left: 930px; top: 40px;} #spacemap_planet1{position: absolute; left: 33px; top: 340px; height: 184px; width: 185px; background-image: url(../games/memory/images/spacemap_planet1.png);} #spacemap_planet2{position: absolute; left: 208px; top: 77px; height: 141px; width: 141px; background-image: url(../games/memory/images/spacemap_planet2.png);} #spacemap_planet3{position: absolute; left: 362px; top: 420px; height: 162px; width: 167px; background-image: url(../games/memory/images/spacemap_planet3.png);} #spacemap_planet4{position: absolute; left: 561px; top: 199px; height: 142px; width: 142px; background-image: url(../games/memory/images/spacemap_planet4.png);} #spacemap_planet5{position: absolute; left: 748px; top: 387px; height: 137px; width: 137px; background-image: url(../games/memory/images/spacemap_planet5.png);} #spacemap_planet6{position: absolute; left: 812px; top: 45px; height: 139px; width: 139px; background-image: url(../games/memory/images/spacemap_planet6.png);} .spacemap_planet_playable:hover {-webkit-transform: scale(1.1); cursor:pointer;} .spacemap_planet_playable{transition: transform .5s ease-in-out;} .spacemap_planet_done{cursor:default;} .spacemap_planet_wobble{animation: PlanetZoom 2s linear infinite; cursor:pointer;} @keyframes PlanetZoom { 0% { transform: scale(1.1); } 50% { transform: scale(1); } 100% { transform: scale(1.1);} } /* GAME SCREEN */ #gamescreen {overflow: hidden;} #loaderscreen {overflow: hidden;} .container { position: absolute; width: 980px; left: -30px; top: 50px; display:none; } .container a { color: inherit; } #bigrocket{ position: absolute; height: 774px; width: 701px; background-image: url(../games/memory/images/craftbig.png); left: 50%; margin-left: -350px; bottom: -780px; } #clickcounter { position: absolute; top: 20px; left: 456px; height: 26px; width: 108px; background-image: url(../games/memory/images/clickcounter.png); line-height: 26px; font-size: 1em; text-align: center; color: #EEEEEE; font-weight: bold user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; } #loadertext_white { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; } #memory_gamescreenfader, #memory_loaderfader{ position: absolute; left: 0px; bottom: 0px; height: 612px; width: 1000px; display:none; } .gamescreenfader { opacity:.50; background-color: #000000; } .gamescreenfader_black { color: #FFFFFF; background-color: #000000; } .msgbox_holder { display:none; position: absolute; top: 50%; left: 50%; height: 254px; width: 234px; margin-left: -117px; margin-top: -127px; } .msgbox_holder .screen_red { position: absolute; top: 0px; left: 0px; height: 216px; width: 234px; background-image: url(../games/memory/images/msgbox_red.png);} .msgbox_holder .screen_gamewin { position: absolute; top: 0px; left: 0px; height: 216px; width: 234px; background-image: url(../games/memory/images/msgbox_gamewin.png);} .msgbox_holder .title_gameover_1 { position: absolute; top: 30px; left: 0px; height: 40px; width: 234px; background-image: url(../games/memory/images/title_gameover_1.png);} .msgbox_holder .title_gameover_2 { position: absolute; top: 30px; left: 0px; height: 40px; width: 234px; background-image: url(../games/memory/images/title_gameover_2.png);} .msgbox_holder .title_gamewin_1 { position: absolute; top: 30px; left: 0px; height: 40px; width: 234px; background-image: url(../games/memory/images/title_gamewin_1.png);} .msgbox_holder .title_gamewin_2 { position: absolute; top: 30px; left: 0px; height: 40px; width: 234px; background-image: url(../games/memory/images/title_gamewin_2.png);} .tiles { margin: 15px auto; width: 100%; height: 100%; overflow: hidden; } li { display: inline-block; position: relative; margin: 5px; padding: 5px; } .tile { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.6s ease-in-out; } .tile .tile-front, .tile .tile-back { position: absolute; height: 100%; width: 100%; -webkit-backface-visibility: hidden; border-radius: 6px; overflow: hidden; } .tile .tile-front { -webkit-transition: -webkit-transform 0.3s ease-in-out; } .tile .tile-front:hover { background: #51a9ff; -webkit-transform: scale(1.1); } .tile .tile-back { background-color: orange; -webkit-transform: rotateY(180deg); } .tile .tile-back:hover { background: #ffb733; } .tile .tile-back img { width: 100%; height: 100%; } .tile.flipped { -webkit-transform: rotateY(180deg); } .disabled { pointer-events: none; animation: hidememorytile 0.5s 0.5s 1 normal forwards ease-out; } @keyframes hidememorytile { 1% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } /********************************************************************** JIGSAW TROUBLE ********************************************************************************************/ .snappuzzle-wrap { position: relative; display: block; } .snappuzzle-pile { position: absolute; top: 10px; left: 660px; width: 330px; height: 580px;} .snappuzzle-piece { cursor: move; } .snappuzzle-slot { position: absolute; background: #fff; opacity: .8; } .snappuzzle-slot-hover { background: #eee; } .jigsaw_background_puzzle {position: absolute; left: 0px; top: 0px; height: 603px; width: 1000px;} #jigsaw_gameloader {position: absolute; z-index: 2000; left: 0px; top: 0px; height: 603px; width: 1000px; background-image: url(../games/jigsawtrouble/images/background_loader.png);} .gameloader_1{background-color: #DD7403;} .gameloader_2{background-color: #256299;} .gameloader_3{background-color: #B7DB21;} .gameloader_4{background-color: #AA2183;} .gameloader_5{background-color: #653CA0;} .gameloader_6{background-color: #A81E2F;} .jigsaw_background_intro{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/jigsawtrouble/images/background_intro.png); height: 603px; width: 1000px;} .jigsaw_background_boxes{position: absolute; z-index: 2001; left: 0px; bottom: 0px; background-image: url(../games/jigsawtrouble/images/background_boxes.png); height: 603px; width: 1000px;} .jigsaw_background_reward{position: absolute; z-index: 2001; left: 0px; bottom: 0px; background-image: url(../games/jigsawtrouble/images/background_reward.png); height: 603px; width: 1000px;} /* INTRO SCREEN */ .jigsaw_table{position: absolute; right: 0px; bottom: 0px; background-image: url(../games/jigsawtrouble/images/table.png); height: 226px; width: 910px;} #jigsaw_carpenter{position: absolute; left: -386px; bottom: -20px; background-image: url(../games/jigsawtrouble/images/carpenter.png); height: 561px; width: 382px;} #jigsaw_carpenternude{position: absolute; left: -405px; bottom: -20px; background-image: url(../games/jigsawtrouble/images/carpenter_reward.png); height: 650px; width: 405px;} .jigsaw_introfader{position: absolute; left: 0px; bottom: 0px; height: 603px; width: 1000px; background-color: #815938; opacity:.50;} .jigsaw_logo{position: absolute; left: 162px; top: -524px; background-image: url(../games/jigsawtrouble/images/logo.png); height: 524px; width: 677px;} #jigsaw_speechballoonintro {display:none; position: absolute; left: 50px; top: 50px; height: 302px; width: 518px; background-image: url(../games/jigsawtrouble/images/speech_intro.svg);} #jigsaw_boxrow1{position: absolute; left: 516px; top: 239px; background-image: url(../games/jigsawtrouble/images/boxrow1.png); height: 33px; width: 229px; transition: transform .5s ease-in-out;} #jigsaw_boxrow2{position: absolute; left: 520px; top: 318px; background-image: url(../games/jigsawtrouble/images/boxrow2.png); height: 34px; width: 222px; transition: transform .5s ease-in-out;} .jigsaw_boxwobble1 {animation: BoxWobble1 2s linear infinite; cursor:pointer;} @keyframes BoxWobble1 { 0% { transform: scaleY(1.5); top: 230px;} 50% { transform: scaleY(1); top: 239;} 100% { transform: scaleY(1.5);top: 230px;} } .jigsaw_boxwobble2 {animation: BoxWobble2 2s linear infinite; cursor:pointer;} @keyframes BoxWobble2 { 0% { transform: scaleY(1); top: 318px;} 50% { transform: scaleY(1.5); top: 308px;} 100% { transform: scaleY(1);top: 318px;} } /* GAME ELEMENTS */ .nextbuttonwood{position: absolute; right: 40px; bottom: 40px; height: 75px; width: 105px; background-image: url(../games/jigsawtrouble/images/button_next_a.png); transition: transform .5s ease-in-out;} .nextbuttonwood:hover{background-image: url(../games/jigsawtrouble/images/button_next_b.png); -webkit-transform: scale(1.1); cursor:pointer;} .stoppuzzle{position: absolute; right: 10px; top: 10px; height: 40px; width: 40px; background-image: url(../games/jigsawtrouble/images/closegame_a.png); transition: transform .5s ease-in-out;} .stoppuzzle:hover{background-image: url(../games/jigsawtrouble/images/closegame_b.png); cursor:pointer;} .jigsaw_top_a{position: absolute; left: 0px; top: 0px; background-image: url(../games/jigsawtrouble/images/background_puzzle_top_a.png); height: 323px; width: 1000px;} .jigsaw_top_b{position: absolute; left: 0px; top: 0px; background-image: url(../games/jigsawtrouble/images/background_puzzle_top_b.png); height: 323px; width: 1000px;} .jigsaw_bottom_a{position: absolute; left: 0px; top: 323px; background-image: url(../games/jigsawtrouble/images/background_puzzle_bottom_a.png); height: 280px; width: 1000px;} .jigsaw_bottom_b{position: absolute; left: 0px; top: 323px; background-image: url(../games/jigsawtrouble/images/background_puzzle_bottom_b.png); height: 280px; width: 1000px;} #screensaw{position: absolute; left: 1310px; top: 0px; background-image: url(../games/jigsawtrouble/images/screensaw.png); height: 350px; width: 1300px;} #puzzle_solved{position: absolute; z-index: 2003; left: 384px; top: -394px; background-image: url(../games/jigsawtrouble/images/readysign.png); height: 394px; width: 233px;} #token_jigsaw{position: absolute; left: 50%; margin-left: -140px; top: -460px; background-image: url(../games/jigsawtrouble/images/token.png); height: 456px; width: 280px;} #jigsaw_speechballoonreward {display:none; position: absolute; left: 360px; top: 100px; height: 374px; width: 476px; background-image: url(../games/jigsawtrouble/images/speech_reward.svg);} #box1{height: 157px; width: 193px; background-image: url(../games/jigsawtrouble/images/box_1a.png);} .gameloader_1 .box{position: absolute; left: 50%; top:50%; margin-left: -98px; margin-top: -87px; animation: PlanetZoom 2s linear infinite;} .box1a {position: absolute; left: 130px; top: 80px; transition: ease-in-out;} .box1a:hover{animation: BigBoxWobble1 1s linear infinite; cursor:pointer; transition: ease-in-out;} @keyframes BigBoxWobble1 { 0% { transform: scaleY(1); top: 80px;} 50% { transform: scaleY(1.3); top: 57px;} 100% { transform: scaleY(1);top: 80px;} } #box1b {position: absolute; left: 130px; top: 80px; height: 157px; width: 193px; background-image: url(../games/jigsawtrouble/images/box_1b.png);} #box2{height: 167px; width: 197px; background-image: url(../games/jigsawtrouble/images/box_2a.png);} .gameloader_2 .box{position: absolute; left: 50%; top:50%; margin-left: -98px; margin-top: -123px; animation: PlanetZoom 2s linear infinite;} .box2a {position: absolute; left: 393px; top: 69px; transition: ease-in-out;} .box2a:hover{animation: BigBoxWobble2 1s linear infinite; cursor:pointer; transition: ease-in-out;} @keyframes BigBoxWobble2 { 0% { transform: scaleY(1); top: 69px;} 50% { transform: scaleY(1.3); top: 45px;} 100% { transform: scaleY(1);top: 69px;} } #box2b{position: absolute; left: 393px; top: 69px; height: 167px; width: 197px; background-image: url(../games/jigsawtrouble/images/box_2b.png);} #box3{height: 153px; width: 230px; background-image: url(../games/jigsawtrouble/images/box_3a.png);} .gameloader_3 .box{position: absolute; left: 50%; top:50%; margin-left: -115px; margin-top: -129px; animation: PlanetZoom 2s linear infinite;} .box3a {position: absolute; left: 649px; top: 84px; transition: ease-in-out;} .box3a:hover{animation: BigBoxWobble3 1s linear infinite; cursor:pointer; transition: ease-in-out;} @keyframes BigBoxWobble3 { 0% { transform: scaleY(1); top: 84px;} 50% { transform: scaleY(1.3); top: 62px;} 100% { transform: scaleY(1);top: 84px;} } #box3b{position: absolute; left: 649px; top: 82px; height: 154px; width: 230px; background-image: url(../games/jigsawtrouble/images/box_3b.png);} #box4{height: 171px; width: 194px; background-image: url(../games/jigsawtrouble/images/box_4a.png);} .gameloader_4 .box{position: absolute; left: 50%; top:50%; margin-left: -97px; margin-top: -123px; animation: PlanetZoom 2s linear infinite;} .box4a {position: absolute; left: 130px; top: 326px; transition: ease-in-out;} .box4a:hover{animation: BigBoxWobble4 1s linear infinite; cursor:pointer; transition: ease-in-out;} @keyframes BigBoxWobble4 { 0% { transform: scaleY(1); top: 326px;} 50% { transform: scaleY(1.3); top: 300px;} 100% { transform: scaleY(1);top: 326px;} } #box4b{position: absolute; left: 130px; top: 324px; height: 172px; width: 194px; background-image: url(../games/jigsawtrouble/images/box_4b.png);} #box5{height: 179px; width: 195px; background-image: url(../games/jigsawtrouble/images/box_5a.png);} .gameloader_5 .box{position: absolute; left: 50%; top:50%; margin-left: -97px; margin-top: -130px; animation: PlanetZoom 2s linear infinite;} .box5a {position: absolute; left: 386px; top: 318px; transition: ease-in-out;} .box5a:hover{animation: BigBoxWobble5 1s linear infinite; cursor:pointer; transition: ease-in-out;} @keyframes BigBoxWobble5 { 0% { transform: scaleY(1); top: 318px;} 50% { transform: scaleY(1.3); top: 290px;} 100% { transform: scaleY(1);top: 318px;} } #box5b{position: absolute; left: 386px; top: 318px; height: 180px; width: 195px; background-image: url(../games/jigsawtrouble/images/box_5b.png);} #box6{height: 190px; width: 233px; background-image: url(../games/jigsawtrouble/images/box_6a.png);} .gameloader_6 .box{position: absolute; left: 50%; top:50%; margin-left: -116px; margin-top: -140px; animation: PlanetZoom 2s linear infinite;} .box6a {position: absolute; left: 635px; top: 307px; transition: ease-in-out;} .box6a:hover{animation: BigBoxWobble6 1s linear infinite; cursor:pointer; transition: ease-in-out;} @keyframes BigBoxWobble6 { 0% { transform: scaleY(1); top: 307px;} 50% { transform: scaleY(1.3); top: 278px;} 100% { transform: scaleY(1);top: 307px;} } #box6b{position: absolute; left: 635px; top: 307px; height: 190px; width: 233px; background-image: url(../games/jigsawtrouble/images/box_6b.png);} /********************************************************************** SPOT THE DIFFERENCE ********************************************************************************************/ /* INTRO & GENERAL ELEMENTS */ .diff_background_game{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/spotthediffereces/images/background_spotscreen.png); height: 612px; width: 1000px;} .diff_background_levelselect{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/spotthediffereces/images/background_levelselect.png); height: 612px; width: 1000px;} .diff_background_intro{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/spotthediffereces/images/background_intro.png); height: 612px; width: 1000px;} .diff_background_outro{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/spotthediffereces/images/background_outro.png); height: 612px; width: 1000px;} .diff_background_tokenreward{position: absolute; left: 0px; bottom: 0px; background-image: url(../games/spotthediffereces/images/background_tokenreward.png); height: 612px; width: 1000px;} #token_spotdiff {position: absolute; left: 50%; margin-left: -140px; top: -460px; background-image: url(../games/spotthediffereces/images/token.png); height: 456px; width: 280px;} #diff_itguy{position: absolute; left: -280px; bottom: -20px; background-image: url(../games/spotthediffereces/images/itguy.png); height: 580px; width: 280px;} #diff_itguynude{position: absolute; right: 0px; bottom: -595px; background-image: url(../games/spotthediffereces/images/itguynude.png); height: 595px; width: 532px;} #diff_speechballoonintro {display:none; position: absolute; left: 209px; top: 66px; height: 443px; width: 578px; background-image: url(../games/spotthediffereces/images/speech_intro.svg);} #spotdiff_speechballoonreward {display:none; position: absolute; left: 60px; top: 35px; height: 251px; width: 635px; background-image: url(../games/spotthediffereces/images/speech_outro.svg);} .nextbuttonitstyle{position: absolute; right: 40px; bottom: 40px; height: 102px; width: 102px; background-image: url(../games/spotthediffereces/images/button_next_a.png);} .nextbuttonitstyle:hover{background-image: url(../games/spotthediffereces/images/button_next_b.png); cursor:pointer;} /* LEVEL SELECT */ .puzzle1a{position: absolute; height: 180px; width: 270px; left: 49px; top: 81px; transform: rotate(2deg) skew(1deg, -1deg); background-image: url(../games/spotthediffereces/images/puzzle_1a.png);} .puzzle1a:hover{background-image: url(../games/spotthediffereces/images/puzzle_1b.png); cursor:pointer;} .puzzle1b{position: absolute; height: 180px; width: 270px; left: 49px; top: 81px; transform: rotate(2deg) skew(1deg, -1deg); background-image: url(../games/spotthediffereces/images/puzzle_1c.png);} .puzzle1c{position: absolute; height: 180px; width: 270px; left: 49px; top: 81px; transform: rotate(2deg) skew(1deg, -1deg); background-image: url(../games/spotthediffereces/images/puzzle_1d.png);} .puzzle1c .locktimer {position: absolute; height: 25px; width: 95px; left: 56px; top: 103px; font-size: 25px; color: #FF0000;} .puzzle2a{position: absolute; height: 180px; width: 270px; right: 49px; top: 81px; transform: rotate(-1deg) skew(-1deg, 1deg); background-image: url(../games/spotthediffereces/images/puzzle_2a.png);} .puzzle2a:hover{background-image: url(../games/spotthediffereces/images/puzzle_2b.png); cursor:pointer;} .puzzle2b{position: absolute; height: 180px; width: 270px; right: 49px; top: 81px; transform: rotate(-1deg) skew(-1deg, 1deg); background-image: url(../games/spotthediffereces/images/puzzle_2c.png);} .puzzle2c{position: absolute; height: 180px; width: 270px; right: 49px; top: 81px; transform: rotate(-1deg) skew(-1deg, 1deg); background-image: url(../games/spotthediffereces/images/puzzle_2d.png);} .puzzle2c .locktimer {position: absolute; height: 25px; width: 95px; left: 56px; top: 103px; font-size: 25px; color: #FF0000;} .puzzle3a{position: absolute; height: 115px; width: 160px; left: 60px; top: 320px; transform: rotate(-1deg) skew(8deg, 0deg); background-image: url(../games/spotthediffereces/images/puzzle_3a.png);} .puzzle3a:hover{background-image: url(../games/spotthediffereces/images/puzzle_3b.png); cursor:pointer;} .puzzle3b{position: absolute; height: 115px; width: 160px; left: 60px; top: 320px; transform: rotate(-1deg) skew(8deg, 0deg); background-image: url(../games/spotthediffereces/images/puzzle_3c.png);} .puzzle3c{position: absolute; height: 115px; width: 160px; left: 60px; top: 320px; transform: rotate(-1deg) skew(8deg, 0deg); background-image: url(../games/spotthediffereces/images/puzzle_3d.png);} .puzzle3c .locktimer {position: absolute; height: 16px; width: 61px; left: 32px; top: 66px; font-size: 16px; color: #FF0000;} .puzzle4a{position: absolute; height: 108px; width: 185px; left: 285px; top: 324px; transform: rotate(-7deg) skew(-6deg, 7deg); background-image: url(../games/spotthediffereces/images/puzzle_4a.png);} .puzzle4a:hover{background-image: url(../games/spotthediffereces/images/puzzle_4b.png); cursor:pointer;} .puzzle4b{position: absolute; height: 108px; width: 185px; left: 285px; top: 324px; transform: rotate(-7deg) skew(-6deg, 7deg); background-image: url(../games/spotthediffereces/images/puzzle_4c.png);} .puzzle4c{position: absolute; height: 108px; width: 185px; left: 285px; top: 324px; transform: rotate(-7deg) skew(-6deg, 7deg); background-image: url(../games/spotthediffereces/images/puzzle_4d.png);} .puzzle4c .locktimer {position: absolute; height: 16px; width: 58px; left: 47px; top: 63px; font-size: 16px; color: #FF0000;} .puzzle5a{position: absolute; height: 108px; width: 185px; right: 285px; top: 324px; transform: rotate(7deg) skew(6deg, -7deg); background-image: url(../games/spotthediffereces/images/puzzle_5a.png);} .puzzle5a:hover{background-image: url(../games/spotthediffereces/images/puzzle_5b.png); cursor:pointer;} .puzzle5b{position: absolute; height: 108px; width: 185px; right: 285px; top: 324px; transform: rotate(7deg) skew(6deg, -7deg); background-image: url(../games/spotthediffereces/images/puzzle_5c.png);} .puzzle5c{position: absolute; height: 108px; width: 185px; right: 285px; top: 324px; transform: rotate(7deg) skew(6deg, -7deg); background-image: url(../games/spotthediffereces/images/puzzle_5d.png);} .puzzle5c .locktimer {position: absolute; height: 16px; width: 58px; left: 47px; top: 63px; font-size: 16px; color: #FF0000;} .puzzle6a{position: absolute; height: 115px; width: 160px; right: 65px; top: 320px; transform: rotate(1deg) skew(-8deg, 0deg); background-image: url(../games/spotthediffereces/images/puzzle_6a.png);} .puzzle6a:hover{background-image: url(../games/spotthediffereces/images/puzzle_6b.png); cursor:pointer;} .puzzle6b{position: absolute; height: 115px; width: 160px; right: 65px; top: 320px; transform: rotate(1deg) skew(-8deg, 0deg); background-image: url(../games/spotthediffereces/images/puzzle_6c.png);} .puzzle6c{position: absolute; height: 115px; width: 160px; right: 65px; top: 320px; transform: rotate(1deg) skew(-8deg, 0deg); background-image: url(../games/spotthediffereces/images/puzzle_6d.png);} .puzzle6c .locktimer {position: absolute; height: 16px; width: 61px; left: 32px; top: 66px; font-size: 16px; color: #FF0000;} /* GAMING ELEMENTS */ #pointerscreen{position: absolute; top: 20px; left: 20px; height: 570px; width: 830px;} #diff_leftimage{display:none; position: absolute; top: 10px; left: 10px; height: 590px; width: 420px;} #diff_rightimage{display:none; position: absolute; top: 10px; left: 440px; height: 590px; width: 420px;} .imageborder_a{border: 1px solid #11CFE7;} .imageborder_b{border: 2px solid #FF0000;} #diffpuzlleimage{height: 570px; width: 830px;} .diffpuzz1{background-image: url(../games/spotthediffereces/images/puzzle_1.png);} .diffpuzz2{background-image: url(../games/spotthediffereces/images/puzzle_2.png);} .diffpuzz3{background-image: url(../games/spotthediffereces/images/puzzle_3.png);} .diffpuzz4{background-image: url(../games/spotthediffereces/images/puzzle_4.png);} .diffpuzz5{background-image: url(../games/spotthediffereces/images/puzzle_5.png);} .diffpuzz6{background-image: url(../games/spotthediffereces/images/puzzle_6.png);} #pointsholder{display: none; position: absolute; top: 10px; left: 10px; height: 570px; width: 830px; padding: 10px;} .diffpointerholder{position: absolute; border-radius: 50%;} .diffpointerholdertest{position: absolute; border-radius: 50%; border: 2px solid green;} .diffpointer {display:none; width: 100%; height: 100%; background-image: url(../games/spotthediffereces/images/foundpointer2.svg);} .wrongturnblock{display: inline-block; height: 26px; width: 8px; margin: 2px 1px 2px; 0px; background-color: #FFFFFF; float: left;} .assignmentpin_holder{display: none; position: relative; height: 21px; width: 118px; margin-top: 10px;} .assignmentpin_a{position: absolute; left: 0px; top: 6px; height: 10px; width: 37px; background-image: url(../games/spotthediffereces/images/assignment_pin_a.svg);} .assignmentpintext_a{position: absolute; left: 44px; height: 21px; line-height: 21px; width: 81px; color: #11CFE7; font-size: 12px; text-align: left;} .assignmentpin_b{position: absolute; left: 0px; height: 21px; width: 42px; background-image: url(../games/spotthediffereces/images/assignment_pin_b.svg);} .assignmentpintext_b{position: absolute; left: 44px; height: 21px; line-height: 21px; width: 81px; color: #FFFFFF; font-size: 12px; text-align: left;} .difffailbutton{border: 1px solid #FF0000; color: #FF0000;} .difffailbutton:hover{border: 1px solid #FF0000; background-color: #FF0000; color: #071F41; cursor:pointer;} .diffwinbutton{border: 1px solid #00C100; color: #00C100;} .diffwinbutton:hover{border: 1px solid #00C100; background-color: #00C100; color: #071F41; cursor:pointer;} .spotdifflevelwinspinner{background-image: url(../games/spotthediffereces/images/levelwin.png); animation: spinHorizontal 8s infinite linear;} @keyframes spinHorizontal { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } #spotdiffbutton_exitlevel {position: absolute; top: 562px; left: 880px; height: 20px; width: 20px; padding: 5px;} .spotdiffingamebutton_exitlevel svg{fill: #11CFE7;} .spotdiffingamebutton_exitlevel svg:hover{fill: #ffffff;cursor:pointer;} #spotdiffbutton_soundoffon {position: absolute; top: 562px; left: 950px; height: 20px; width: 20px; padding: 5px;} .spotdiffingamebutton_sound_onn svg{fill: #11CFE7;} .spotdiffingamebutton_sound_onn svg:hover{fill: #ffffff;cursor:pointer;} .spotdiffingamebutton_sound_off svg{fill: #FF0000;} .spotdiffingamebutton_sound_off svg:hover{fill: #ffffff;cursor:pointer;} #noTrespassingOuterBarG{ position: absolute; bottom: 20px; left: 20px; height:28px; width:320px; border:1px solid rgb(17,206,231); overflow:hidden; margin:auto; } .noTrespassingBarLineG{ background-color:rgb(17,206,231); float:left; width:19px; height:165px; margin-right:33px; margin-top:-39px; transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .noTrespassingAnimationG{ width:425px; animation-name:noTrespassingAnimationG; -o-animation-name:noTrespassingAnimationG; -ms-animation-name:noTrespassingAnimationG; -webkit-animation-name:noTrespassingAnimationG; -moz-animation-name:noTrespassingAnimationG; animation-duration:1.5s; -o-animation-duration:1.5s; -ms-animation-duration:1.5s; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-timing-function:linear; -o-animation-timing-function:linear; -ms-animation-timing-function:linear; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; } @keyframes noTrespassingAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-52px; } } @-o-keyframes noTrespassingAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-52px; } } @-ms-keyframes noTrespassingAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-52px; } } @-webkit-keyframes noTrespassingAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-52px; } } @-moz-keyframes noTrespassingAnimationG{ 0%{ margin-left:0px; } 100%{ margin-left:-52px; } } /********************************************************************** RATE THAT DICK ********************************************************************************************/ .rtd_background{position: absolute; left: 0px; top: 1px; background-image: url(../games/ratethatdick/images/background.png); height: 612px; width: 952px;} .rtd_background_reward{position: absolute; left: 0px; top: 1px; background-image: url(../games/ratethatdick/images/background_reward.png); height: 612px; width: 952px;} #token_ratethatdick {position: absolute; left: 50%; margin-left: -140px; top: -460px; background-image: url(../games/ratethatdick/images/token.png); height: 456px; width: 280px;} #faultdoor_left{background-image: url(../games/ratethatdick/images/faultdoor_left.png); height: 612px; width: 556px;} .faultdoorleftstatus_closed {position: absolute; left: 0px; top: 1px;} .faultdoorleftstatus_open {position: absolute; left: -560px; top: 1px;} #faultdoor_right{background-image: url(../games/ratethatdick/images/faultdoor_right.png); height: 612px; width: 526px;} .faultdoorrightstatus_closed {position: absolute; right: 0px; top: 1px;} .faultdoorrightstatus_open {position: absolute; right: -530px; top: 1px;} #securitydude{position: absolute; left: -50px; bottom: 0px; background-image: url(../games/ratethatdick/images/securitydude_intro.png); height: 579px; width: 583px;} #securitydudeexplain{position: absolute; right: -454px; bottom: 0px; background-image: url(../games/ratethatdick/images/securitydude_explain.png); height: 429px; width: 454px;} #securitydudereward{position: absolute; left: -520px; bottom: 0px; background-image: url(../games/ratethatdick/images/securitydude_reward.png); height: 612px; width: 520px;} #ratethatdick_speechintro{display:none; position: absolute; left: 442px; top: 45px; width: 478px; overflow: hidden;} #ratethatdick_speechintroballoon{position: absolute; left: 0px; top: 0px; height: 470px; width: 478px; background-image: url(../games/ratethatdick/images/speechbaloon_intro.svg);} #ratethatdick_speechexplain{display:none; position: absolute; left: 63px; top: 55px; height: 382px; width: 556px; background-image: url(../games/ratethatdick/images/speechbaloon_explain.svg);} #secpaddisplay{position: absolute; width: 198px; height: 60px; left: 2px; top: 2px; border-radius: 6px; line-height: 60px; font-size: 50px; user-select: none;} .secpaddisplay_normal{border: 1px solid #11CFE7; color: #FFFFFF;} .secpaddisplay_error{border: 1px solid #FF0000; color: #FF0000;} .secpaddisplay_correct{border: 1px solid #00C100; color: #00C100;} .secpadbutton{position: absolute; width: 60px; height: 60px; border: 1px solid #11CFE7; border-radius: 6px; color: #11CFE7; line-height: 60px; font-size: 40px; user-select: none;} .secpadbutton:hover{border: 1px solid #8EDDE7; border-radius: 6px; color: #8EDDE7; line-height: 60px; font-size: 50px; cursor:pointer;} .secpadbutton_error{position: absolute; width: 60px; height: 60px; border: 1px solid #FF0000; border-radius: 6px; color: #FF0000; line-height: 60px; font-size: 40px;} .secpadbutton_correct{position: absolute; width: 60px; height: 60px; border: 1px solid #00C100; border-radius: 6px; color: #00C100; line-height: 60px; font-size: 40px;} .svgsecpadbutton{position: absolute; width: 40px; height: 40px; padding: 10px; border: 1px solid #11CFE7; border-radius: 6px; fill: #11CFE7; user-select: none;} .svgsecpadbutton:hover{border: 1px solid #8EDDE7; border-radius: 6px; fill: #8EDDE7; cursor:pointer;} .svgsecpadbutton_error{position: absolute; width: 40px; height: 40px; padding: 10px; border: 1px solid #FF0000; border-radius: 6px; fill: #FF0000;} .svgsecpadbutton_correct{position: absolute; width: 40px; height: 40px; padding: 10px; border: 1px solid #00C100; border-radius: 6px; fill: #00C100;} .codeicon_error{background-image: url(../games/ratethatdick/images/displayicon_wrong.png); animation: spinHorizontal 8s infinite linear;} .codeicon_correct{background-image: url(../games/ratethatdick/images/displayicon_correct.png); animation: spinHorizontal 8s infinite linear;} .codeicon_token{background-image: url(../games/ratethatdick/images/displayicon_token.png); animation: spinHorizontal 8s infinite linear;} .ratethatdick_buttonhelp{position: absolute; top: 25px; left: 25px; height: 64px; width: 64px; background-image: url(../games/ratethatdick/images/help_button_a.png); transition: transform .5s ease-in-out;} .ratethatdick_buttonhelp:hover{background-image: url(../games/ratethatdick/images/help_button_b.png); -webkit-transform: scale(1.1); cursor:pointer;} #polaroid { background-color: #ffffff; padding: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: none; } #polaroid .phototitle { width: 100%; color: #2D2D2D; padding: 5px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;} #polaroid .photoglass { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none; } #scorepointer{position: absolute; top: 0px; left: 0px; height: 31px; width: 40px; background-image: url(../games/ratethatdick/images/scalepointer.png); cursor:pointer;} .numpoint{position: absolute; height: 20px; width: 76px; top: 2px; cursor:pointer;} #votebutton{position: absolute; bottom: -50px; left: 50%; margin-left: -120px; height: 35px; width: 241px; background-image: url(../games/ratethatdick/images/votebutton.png); padding-top: 15px; font-size: 22px; font-weight: bold; cursor:pointer; text-shadow: #e0e0e0 1px 1px 0, 2px 2px 2px rgba(206,89,55,0);} .votebuttontext_0{color: #0D6CA7;} .votebuttontext_0:hover{color: #108DDA;} .votebuttontext_1{color: #349860;} .votebuttontext_1:hover{color: #3DB270;} .votebuttontext_2{color: #349860;} .votebuttontext_2:hover{color: #3DB270;} .votebuttontext_3{color: #59B50D;} .votebuttontext_3:hover{color: #67D40F;} .votebuttontext_4{color: #71AD00;} .votebuttontext_4:hover{color: #8CD900;} .votebuttontext_5{color: #C1C100;} .votebuttontext_5:hover{color: #D9D900;} .votebuttontext_6{color: #C8A700;} .votebuttontext_6:hover{color: #D9B400;} .votebuttontext_7{color: #BD7B00;} .votebuttontext_7:hover{color: #D98E00;} .votebuttontext_8{color: #C15E00;} .votebuttontext_8:hover{color: #D96900;} .votebuttontext_9{color: #C73900;} .votebuttontext_9:hover{color: #D93E00;} .votebuttontext_10{color: #B31200;} .votebuttontext_10:hover{color: #D91600;} #caugestarter{position: absolute; bottom: 20px; right: 18px; height: 6px; width: 23px; background-image: url(../games/ratethatdick/images/caugestarter.png);} #progresscaugeslider{position: absolute; bottom: -565px; left: 0px; height: 570px; width: 23px; background-image: url(../games/ratethatdick/images/cauge.png);} .cssload-clock{ border-radius: 58px; border: 3px solid rgb(0,0,0); height: 78px; width: 78px; position: absolute; left: calc(50% - 42px); top: calc(50% - 42px); display: none; } .cssload-clock:after{ content: ""; position: absolute; background-color: rgb(0,0,0); top:2px; left: 48%; height: 37px; width: 4px; border-radius: 5px; transform-origin: 50% 97%; -o-transform-origin: 50% 97%; -ms-transform-origin: 50% 97%; -webkit-transform-origin: 50% 97%; -moz-transform-origin: 50% 97%; animation: grdAiguille 2.3s linear infinite; -o-animation: grdAiguille 2.3s linear infinite; -ms-animation: grdAiguille 2.3s linear infinite; -webkit-animation: grdAiguille 2.3s linear infinite; -moz-animation: grdAiguille 2.3s linear infinite; } .cssload-clock:before{ content: ""; position: absolute; background-color: rgb(0,0,0); top:6px; left: 48%; height: 34px; width: 4px; border-radius: 5px; transform-origin: 50% 94%; -o-transform-origin: 50% 94%; -ms-transform-origin: 50% 94%; -webkit-transform-origin: 50% 94%; -moz-transform-origin: 50% 94%; animation: ptAiguille 13.8s linear infinite; -o-animation: ptAiguille 13.8s linear infinite; -ms-animation: ptAiguille 13.8s linear infinite; -webkit-animation: ptAiguille 13.8s linear infinite; -moz-animation: ptAiguille 13.8s linear infinite; } @keyframes grdAiguille{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } @-o-keyframes grdAiguille{ 0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(360deg);} } @-ms-keyframes grdAiguille{ 0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(360deg);} } @-webkit-keyframes grdAiguille{ 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @-moz-keyframes grdAiguille{ 0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(360deg);} } @keyframes ptAiguille{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } @-o-keyframes ptAiguille{ 0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(360deg);} } @-ms-keyframes ptAiguille{ 0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(360deg);} } @-webkit-keyframes ptAiguille{ 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } @-moz-keyframes ptAiguille{ 0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(360deg);} } /********************************************************************** BRAIN GAMES ********************************************************************************************/ .brain_background_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/background_intro.png); height: 612px; width: 1375px;} .brain_background_levelselect{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/background_levelselect.png); height: 612px; width: 1000px;} .brain_background_outro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/background_outtro.jpg); height: 612px; width: 1000px;} #thumbs_up{position: absolute; right: -552px; top: 100px; height: 446px; width: 552px; background-image: url(../games/braingames/images/Thumbs_Up.svg);} #thumbs_down{position: absolute; left: -549px; top: 100px; height: 443px; width: 549px; background-image: url(../games/braingames/images/Thumbs_Down.svg);} .braingame_button_play{position: absolute; right: 20px; bottom: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_PlayLevel.svg); transition: transform .5s ease-in-out; display: none;} .braingame_button_play:hover{-webkit-transform: scale(1.1); cursor:pointer;} #braingame_button_startgame{position: absolute; left: 50%; margin-left: -126px; bottom: -110px; width: 252px; height: 106px; background-image: url(../games/braingames/images/Button_Startgame.svg); transition: transform .5s ease-in-out; display: none;} #braingame_button_startgame:hover{-webkit-transform: scale(1.1); cursor:pointer;} .braingame_button_info{position: absolute; left: -108px; top: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_Info.svg); transition: transform .5s ease-in-out; display: none;} .braingame_button_info:hover{-webkit-transform: scale(1.1); cursor:pointer;} .braingame_button_return{position: absolute; right: -108px; top: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_Return.svg); transition: transform .5s ease-in-out; display: none;} .braingame_button_return:hover{-webkit-transform: scale(1.1); cursor:pointer;} #cellphone{position: absolute; left: 50%; margin-left: -209px; bottom: -594px; width: 417px; height: 594px; background-image: url(../games/braingames/images/cellphone.png);} #cellphone .cellphonedisplay{position: absolute; left: 71px; top: 15px; width: 234px; height: 444px; background-color: white;} #cellphone .mask_top{position: absolute; left: 0px; top: 0px; width: 417px; height: 29px; background-image: url(../games/braingames/images/cellphone_mask_top.png);} #cellphone .mask_left{position: absolute; left: 0px; top: 29px; width: 72px; height: 430px; background-image: url(../games/braingames/images/cellphone_mask_left.png);} #cellphone .mask_right{position: absolute; right: 0px; top: 29px; width: 112px; height: 430px; background-image: url(../games/braingames/images/cellphone_mask_right.png);} #cellphone .mask_bottom{position: absolute; left: 0px; bottom: 0px; width: 417px; height: 135px; background-image: url(../games/braingames/images/cellphone_mask_bottom.png);} #cellphone .mask_finger{position: absolute; left: 72px; bottom: 135px; width: 18px; height: 54px; background-image: url(../games/braingames/images/cellphone_mask_vinger.png);} #cellphone .mask_palm{position: absolute; right: 112px; bottom: 135px; width: 53px; height: 121px; background-image: url(../games/braingames/images/cellphone_mask_palm.png);} #cellphone .mousebutton{transition: transform .5s ease-in-out;} #cellphone .mousebutton:hover{-webkit-transform: scale(1.1); cursor:pointer;} #tracy_intro{position: absolute; left: -442px; bottom: 0px; background-image: url(../games/braingames/images/tracy_intro.png); height: 608px; width: 442px;} #tracy_outro{position: absolute; left: -388px; bottom: -10px; background-image: url(../games/braingames/images/tracy_outtro.png); height: 612px; width: 388px;} #braingames_speechintro{display:none; position: absolute; left: 400px; top: 45px; width: 478px; overflow: hidden;} #braingames_speechintroballoon{position: absolute; left: 0px; top: 0px; height: 470px; width: 478px; background-image: url(../games/braingames/images/speechbaloon_intro.svg);} #braingamespeechbaloon_left{position: absolute; left: 0px; top: 0px; height: 449px; width: 607px; background-image: url(../games/braingames/images/speechbaloon_left.svg);} #braingamespeechbaloon_right{position: absolute; left: 0px; top: 0px; height: 449px; width: 607px; background-image: url(../games/braingames/images/speechbaloon_right.svg);} #token_braingames{position: absolute; left: 50%; margin-left: -140px; top: -460px; background-image: url(../games/braingames/images/token.png); height: 456px; width: 280px;} /* TASKBOARD & NOTES */ #postitopdracht{position: absolute; height: 260px; width: 275px; z-index: 100;} .postitnotetask_1{ left: 440px; top: 138px; transform: skew(-4deg, 0deg);} .postitnotetask_2{ left: 440px; top: 138px; transform: skew(-4deg, 0deg);} .postitnotetask_3{ left: 440px; top: 138px; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnotetask_4{ left: 440px; top: 138px; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnotetask_5{ left: 440px; top: 138px; transform: skew(-4deg, 0deg);} .postitnotetask_6{ left: 440px; top: 138px; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnotetask_7{ left: 440px; top: 138px; transform: skew(-4deg, 0deg);} .postitnotetask_8{ left: 440px; top: 138px; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnotetask_9{ left: 440px; top: 138px; transform: skew(-4deg, 0deg);} .postitnotetask_10{ left: 440px; top: 138px; transform: skew(-4deg, 0deg);} .postitnote_clickable{transition: transform .5s ease-in-out;} .postitnote_clickable:hover {transform: scale(1.1); cursor:pointer;} .postitnote_passed{display: none;} .postitnote_locked{ filter: grayscale(100%); } .postitnote_locked .svgclass1 {padding: 10px; fill: #6A6A6A; transform: skew(-4deg, 0deg);} .postitnote_locked .svgclass3 {padding: 10px; fill: #8D8D8D; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnote_locked .svgclass4 {padding: 10px; fill: #6A6A6A; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnote_locked .svgclass5 {padding: 10px; fill: #6A6A6A; transform: skew(-4deg, 0deg);} .postitnote_locked .svgclass6 {padding: 10px; fill: #6A6A6A; transform: rotate(-7deg) skew(-2deg, 0deg);} .postitnote_locked .svgclass7 {padding: 10px; fill: #8D8D8D; transform: skew(-4deg, 0deg);} .postitnote_locked .svgclass8 {padding: 10px; fill: #8D8D8D; rotate(-7deg) skew(-2deg, 0deg);} .postitnote_locked .svgclass9 {padding: 10px; fill: #8D8D8D; transform: skew(-4deg, 0deg);} .postitnote_locked .svgclass10 {padding: 10px; fill: #8D8D8D; transform: skew(-4deg, 0deg);} .postitnote_zoomed {animation: PostItZoom 1.0s ease-in-out 0s forwards;} @keyframes PostItZoom { 0% { transform: scale(1) rotateY(0deg); } 100% { transform: scale(8) rotateY(360deg); } } .postitnote_dezoomed {animation: PostItDeZoom 1.0s ease-in-out 0s forwards;} @keyframes PostItDeZoom { 0% { transform: scale(8) rotateY(360deg); } 100% { transform: scale(1) rotateY(0deg); } } #postitnote_1{position: absolute; left: 657px; top: 192px; width: 45px; height: 42px; background-image: url(../games/braingames/images/assignment1a.svg); } #postitnote_2{position: absolute; left: 738px; top: 196px; width: 45px; height: 42px; background-image: url(../games/braingames/images/assignment2a.svg); } #postitnote_3{position: absolute; left: 737px; top: 263px; width: 48px; height: 44px; background-image: url(../games/braingames/images/assignment2b.svg); } #postitnote_4{position: absolute; left: 818px; top: 192px; width: 49px; height: 44px; background-image: url(../games/braingames/images/assignment3a.svg); } #postitnote_5{position: absolute; left: 823px; top: 263px; width: 45px; height: 42px; background-image: url(../games/braingames/images/assignment3b.svg); } #postitnote_6{position: absolute; left: 824px; top: 333px; width: 48px; height: 44px; background-image: url(../games/braingames/images/assignment3c.svg); } #postitnote_7{position: absolute; left: 905px; top: 192px; width: 45px; height: 42px; background-image: url(../games/braingames/images/assignment4a.svg); } #postitnote_8{position: absolute; left: 903px; top: 263px; width: 49px; height: 44px; background-image: url(../games/braingames/images/assignment4b.svg); } #postitnote_9{position: absolute; left: 905px; top: 334px; width: 45px; height: 42px; background-image: url(../games/braingames/images/assignment4c.svg); } #postitnote_10{position: absolute; left: 905px; top: 403px; width: 45px; height: 42px; background-image: url(../games/braingames/images/assignment4d.svg); } #braingameanswerspad {position: absolute; width: 580px; height: 70px; left: 50%; margin-left: -280px; bottom: -100px; border-radius: 10px; overflow:hidden; border: 3px solid black; background-color: white; padding: 10px;} #braingameplaypad {position: absolute; width: 580px; height: 70px; left: 50%; margin-left: -300px; bottom: -100px; border-radius: 10px; border: 3px solid black; background-color: white; padding: 10px;} #braingameplaypad #padtimer {position: absolute; width: 60px; height: 60px; left: -30px; overflow:hidden; background-image: url(../games/braingames/images/timer.svg); line-height: 60px; color: #1B1511; font-size: 16px;} #braingameplaypad .padanswertext {color: #1B1511; font-weight: bold; font-size: 17px; height: 17px; display: inline-block; margin-top: 15px;} #braingameplaypad .padfield {border: 1px solid #1B1511; border-radius: 4px; font-size: 15px; padding: 3px; display: inline-block; width: 45px;} #braingameplaypad .button_submitanswer{position: absolute; right: -30px; bottom: 15px; width: 60px; height: 73px; background-image: url(../games/braingames/images/Button_SubmitAnswer.svg); transition: transform .5s ease-in-out;} #braingameplaypad .button_submitanswer:hover{-webkit-transform: scale(1.1); cursor:pointer;} /*PUZZLE 1*/ .brain_background_level_1_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_1_introbackground.png); height: 612px; width: 1000px;} #braindude_1_intro{position: absolute; right: -364px; bottom: -5px; background-image: url(../games/braingames/images/puzzle_1_dude_intro.png); height: 601px; width: 364px;} /*PUZZLE 2*/ .brain_background_level_2_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_2_introbackground.png); height: 612px; width: 1000px;} .brain_background_level_2_game{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_2_gamebackdrop.png); height: 612px; width: 1000px;} #braindude_2_intro{position: absolute; right: -409px; bottom: 0px; background-image: url(../games/braingames/images/puzzle_2_dude_intro.png); height: 603px; width: 409px;} .MagicCircle{position: absolute; width: 66px; height: 66px; border-radius: 50%; font-size: 50px; text-shadow: #e0e0e0 1px 1px 0, 2px 2px 2px rgba(206,89,55,0); line-height: 66px; text-align: center; user-select: none; cursor: grab;} .MagicCirclePlaced{position: absolute; width: 88px; height: 88px; border-radius: 50%; font-size: 50px; text-shadow: #e0e0e0 1px 1px 0, 2px 2px 2px rgba(206,89,55,0); line-height: 86px; text-align: center; user-select: none; cursor: default;} #MagicCircle1 {left: 680px; top: 160px; background-color: #EC5F67; color: #983D42; border: 2px solid #983D42} #MagicCircle2 {left: 680px; top: 260px; background-color: #F99157; color: #AF653E; border: 2px solid #AF653E} #MagicCircle3 {left: 680px; top: 360px; background-color: #FAC863; color: #A08040; border: 2px solid #A08040} #MagicCircle4 {left: 780px; top: 160px; background-color: #99C794; color: #4E654C; border: 2px solid #4E654C} #MagicCircle5 {left: 780px; top: 260px; background-color: #5FB3B3; color: #325D5D; border: 2px solid #325D5D} #MagicCircle6 {left: 780px; top: 360px; background-color: #6699CC; color: #3B5875; border: 2px solid #3B5875} #MagicCircle7 {left: 880px; top: 160px; background-color: #C594C5; color: #5D475D; border: 2px solid #5D475D} #MagicCircle8 {left: 880px; top: 260px; background-color: #E494AB; color: #5A3B44; border: 2px solid #5A3B44} #MagicCircle9 {left: 880px; top: 360px; background-color: #AB7967; color: #563E34; border: 2px solid #563E34} .magicposition{position: absolute; height: 90px; width: 90px; border: 1px solid #E6E6E6; border-radius: 50%;} #puzzle_2_rainbowswirl{position: absolute; left: 170px; top: 187px; background-image: url(../games/braingames/images/puzzle_2_rainbowswirl.png); height: 366px; width: 366px; animation: rainbowswirlrotation 10s infinite linear; display: none;} @keyframes rainbowswirlrotation { from { -webkit-transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); } } /*PUZZLE 3*/ .brain_background_level_3_intro{position: absolute; left: -380px; top: 0px; background-image: url(../games/braingames/images/puzzle_3_introbackground.png); height: 612px; width: 1380px;} #braindude_3_intro{position: absolute; left: -426px; bottom: -5px; background-image: url(../games/braingames/images/puzzle_3_dude_intro.png); height: 604px; width: 426px;} /*PUZZLE 4*/ .brain_background_level_4_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_4_introbackground.png); height: 612px; width: 1000px;} .brain_background_level_4_game{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_4_gamebackdrop.png); height: 612px; width: 1000px;} #braindude_4_teacher{position: absolute; left: -435px; bottom: -5px; background-image: url(../games/braingames/images/puzzle_4_dude_teacher.png); height: 602px; width: 435px;} .dudewatch { display: inline-block; position: absolute; width: 24px; height: 24px; vertical-align: middle; overflow: hidden; left: 349px; top: 473px; transform: rotate(115deg); } .dudewatch #face { fill: #333333; } .dudewatch #hour, #min { stroke-width: 1px; fill: #ffffff; } .dudewatch #sec { stroke: red; } /*PUZZLE 5*/ .brain_background_level_5_intro{position: absolute; left: -243px; top: 0px; background-image: url(../games/braingames/images/puzzle_5_introbackground.png); height: 622px; width: 1243px;} .brain_background_level_5_game{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_5_gamebackdrop.png); height: 612px; width: 1000px;} #braindude_5_intro{position: absolute; left: -832px; top: 50px; background-image: url(../games/braingames/images/puzzle_5_dude_intro.png); height: 1320px; width: 832px;} #braingame_button5_startgame{position: absolute; left: 50%; margin-left: 50px; bottom: -110px; width: 252px; height: 106px; background-image: url(../games/braingames/images/Button_Startgame.svg); transition: transform .5s ease-in-out; display: none;} #braingame_button5_startgame:hover{-webkit-transform: scale(1.1); cursor:pointer;} #grid .pipe{ font-size: 0px; background-color: white; display: inline-block; width: 90px; height: 90px; box-sizing: content-box; background-repeat: no-repeat; background-position: center; } .braingame5_gameplayexplain {position: absolute; left: 554px; top: 222px; width: 428px; height; 286px; font-size: 1.1em; color: #1A1416; text-align: left;} #grid .u { background-image: url("../games/braingames/images/end.svg"); transform: rotate(180deg); } #grid .u.a{ background-image: url("../games/braingames/images/end_a.svg"); } #grid .d { background-image: url("../games/braingames/images/end.svg"); transform: rotate(0deg); } #grid .d.a{ background-image: url("../games/braingames/images/end_a.svg");} #grid .r { background-image: url("../games/braingames/images/end.svg"); transform: rotate(270deg); } #grid .r.a{ background-image: url("../games/braingames/images/end_a.svg"); } #grid .l{ background-image: url("../games/braingames/images/end.svg"); transform: rotate(90deg); } #grid .l.a{ background-image: url("../games/braingames/images/end_a.svg"); } #grid .u.d{ background-image: url("../games/braingames/images/straight.svg"); } #grid .u.d.a{ background-image: url("../games/braingames/images/straight_a.svg"); } #grid .l.r{ background-image: url("../games/braingames/images/straight.svg"); transform: rotate(90deg); } #grid .l.r.a{ background-image: url("../games/braingames/images/straight_a.svg"); } #grid .u.r{ background-image: url("../games/braingames/images/corner.svg"); transform: rotate(0deg); } #grid .u.r.a{ background-image: url("../games/braingames/images/corner_a.svg"); } #grid .u.l{ background-image: url("../games/braingames/images/corner.svg"); transform: rotate(270deg); } #grid .u.l.a{ background-image: url("../games/braingames/images/corner_a.svg"); } #grid .d.r{ background-image: url("../games/braingames/images/corner.svg"); transform: rotate(90deg); } #grid .d.r.a{ background-image: url("../games/braingames/images/corner_a.svg"); } #grid .d.l{ background-image: url("../games/braingames/images/corner.svg"); transform: rotate(180deg); } #grid .d.l.a{ background-image: url("../games/braingames/images/corner_a.svg"); } #grid .u.r.l{ background-image: url("../games/braingames/images/tsplit.svg"); transform: rotate(270deg); } #grid .u.r.l.a{ background-image: url("../games/braingames/images/tsplit_a.svg"); } #grid .r.d.l{ background-image: url("../games/braingames/images/tsplit.svg"); transform: rotate(90deg); } #grid .r.d.l.a{ background-image: url("../games/braingames/images/tsplit_a.svg");} #grid .d.l.u{ background-image: url("../games/braingames/images/tsplit.svg"); transform: rotate(180deg); } #grid .d.l.u.a{ background-image: url("../games/braingames/images/tsplit_a.svg"); } #grid .u.r.d{ background-image: url("../games/braingames/images/tsplit.svg"); transform: rotate(0deg); } #grid .u.r.d.a {background-image: url("../games/braingames/images/tsplit_a.svg"); } #grid .u.r.d.l{ background-image: url("../games/braingames/images/cross.svg"); } #grid .u.r.d.l.a{ background-image: url("../games/braingames/images/cross_a.svg"); } .brain_background_level_5_game #timersliderholder {position: absolute; width: 320px; height: 28px; left: 60px; top: 80px; overflow:hidden; background-color: #348ACC; border-radius: 14px; overflow: hidden;} .brain_background_level_5_game #pipetimerslider {position: absolute; width: 320px; height: 28px; left: 0px; top: 0px; overflow:hidden; background-color: #00FFFF;} /*PUZZLE 6*/ .brain_background_level_6_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_6_introbackground.jpg); height: 612px; width: 1000px;} #braindude_6_intro{position: absolute; left: -350px; bottom: -15px; height: 600px; width: 347px;} .braindude_6_withshirt {background-image: url(../games/braingames/images/puzzle_6_dude_intro.png);} .braindude_6_shirtless {background-image: url(../games/braingames/images/puzzle_6_dude_nude.png);} #headhorseoverlay{position: absolute; left: 588px; top: 122px; background-image: url(../games/braingames/images/puzzle_6_horseheadoverlay.png); height: 232px; width: 411px;} .brain_background_level_6_game{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_6_gamebackground.jpg); height: 612px; width: 1000px;} /*PUZZLE 7*/ .brain_background_level_7_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_7_introbackground.jpg); height: 612px; width: 1000px;} .brain_background_level_7_receptiondesk{position: absolute; left: 247px; top: 135px; background-image: url(../games/braingames/images/puzzle_7_introback_receptiondesk.png); height: 519px; width: 943px;} #braindude_7_receptionist{position: absolute; background-image: url(../games/braingames/images/puzzle_7_dude_receptionist.png); height: 453px; width: 237px;} .receptionist_intro { left: 1250px; top: 31px; } .receptionist_return { left: 400px; top: 176px; } .receptionbell{position: absolute; left: 608px; top: 168px; height: 32px; width: 56px; background-image: url(../games/braingames/images/receptionbell.svg); transition: transform .5s ease-in-out;} .receptionbell:hover{-webkit-transform: scale(1.1); cursor:pointer;} #receptionbellpointer{ position: absolute; left: 615px; top: 89px; background-image: url(../games/braingames/images/receptionbell_pointer.svg); height: 68px; width: 42px; display: none;} .receptionsign {position: absolute; left: 427px; top: 177px; height: 37px; width: 117px; transform: skew(-4deg, 0deg); font-size: 10px; color: #3E1E29} #braindude_7_intro{position: absolute; left: -450px; top: 6px; background-image: url(../games/braingames/images/puzzle_7_dude_jack_intro.png); height: 668px; width: 442px;} #ingamedudejack {position: absolute; left: -520px; top: 0px; height: 612px; width: 517px; background-image: url(../games/braingames/images/puzzle_7_dude_jack_game.png);} #puzz7slide1 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide1.jpg); display: none;} #puzz7slide2 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide2.jpg); display: none;} #puzz7slide3 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide3.jpg); display: none;} #puzz7slide4 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide4.jpg); display: none;} #puzz7slide5 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide5.jpg); display: none;} #puzz7slide6 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide6.jpg); display: none;} #puzz7slide7 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide7.jpg); display: none;} #puzz7slide8 {position: absolute; left: 0px; top: 0px; height: 612px; width: 1000px; background-image: url(../games/braingames/images/puzzle_7_slide8.jpg); display: none;} .braingame7_button_nextslide{position: absolute; right: 20px; bottom: 20px; width: 66px; height: 65px; background-image: url(../games/braingames/images/button_NextSlide.svg); transition: transform .5s ease-in-out; display: none;} .braingame7_button_nextslide:hover{-webkit-transform: scale(1.1); cursor:pointer;} /*PUZZLE 8*/ .brain_background_level_8_intro{position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_8_introbackground.jpg); height: 612px; width: 1000px;} #braindude_8_intro { position: absolute; left: 1500px; bottom: 0px; background-image: url(../games/braingames/images/puzzle_8_dude_intro.png); height: 612px; width: 480px; } /*PUZZLE 9*/ .brain_background_level_9_intro { position: absolute; left: -835px; top: 0px; background-image: url(../games/braingames/images/puzzle_9_introbackground.png); height: 612px; width: 1835px; } .brain_background_level_9_game { position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_9_gamebackdrop.png); height: 612px; width: 1000px; } #braindude_9_intro { position: absolute; left: -400px; bottom: 0px; background-image: url(../games/braingames/images/puzzle_9_dude_intro.png); height: 600px; width: 397px; } #braindude_9_ending { position: absolute; left: 360px; bottom: 0px; background-image: url(../games/braingames/images/puzzle_9_dude_ending.png); height: 577px; width: 218px; display: none;} .brain_background_level_cheatnote_nl { position: absolute; left: 800px; top: 534px; background-image: url(../games/braingames/images/puzzle_9_spiekbriefje_small_nl.png); height: 133px; width: 123px; display: none;} .brain_background_level_cheatnote_en { position: absolute; left: 800px; top: 534px; background-image: url(../games/braingames/images/puzzle_9_spiekbriefje_small_en.png); height: 133px; width: 123px; display: none;} .brain_background_level_cheatnotebig_1 { position: absolute; left: 4px; top: 86px; background-image: url(../games/braingames/images/puzzle_9_spiekbriefje_big_nl.png); height: 324px; width: 300px; display: none;} .brain_background_level_cheatnotebig_2 { position: absolute; left: 4px; top: 86px; background-image: url(../games/braingames/images/puzzle_9_spiekbriefje_big_en.png); height: 324px; width: 300px; display: none;} .braingame9_button_close{position: absolute; left: 20px; bottom: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_Close.svg); transition: transform .5s ease-in-out; } .braingame9_button_close:hover{-webkit-transform: scale(1.1); cursor:pointer;} .braingame9_button_return{position: absolute; right: 20px; top: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_Return.svg); transition: transform .5s ease-in-out; display: none;} .braingame9_button_return:hover{-webkit-transform: scale(1.1); cursor:pointer;} .lockernumpad0up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_0a.png); display: inline-block;} .lockernumpad1up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_1a.png); display: inline-block;} .lockernumpad2up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_2a.png); display: inline-block;} .lockernumpad3up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_3a.png); display: inline-block;} .lockernumpad4up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_4a.png); display: inline-block;} .lockernumpad5up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_5a.png); display: inline-block;} .lockernumpad6up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_6a.png); display: inline-block;} .lockernumpad7up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_7a.png); display: inline-block;} .lockernumpad8up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_8a.png); display: inline-block;} .lockernumpad9up {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_9a.png); display: inline-block;} .lockernumpadresetup {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_reset_a.png); display: inline-block;} .lockernumpadenterup {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_enter_a.png); display: inline-block;} .lockernumpad0down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_0b.png); display: inline-block;} .lockernumpad1down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_1b.png); display: inline-block;} .lockernumpad2down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_2b.png); display: inline-block;} .lockernumpad3down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_3b.png); display: inline-block;} .lockernumpad4down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_4b.png); display: inline-block;} .lockernumpad5down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_5b.png); display: inline-block;} .lockernumpad6down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_6b.png); display: inline-block;} .lockernumpad7down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_7b.png); display: inline-block;} .lockernumpad8down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_8b.png); display: inline-block;} .lockernumpad9down {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_9b.png); display: inline-block;} .lockernumpadresetdown {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_reset_b.png); display: inline-block;} .lockernumpadenterdown {margin: 2px; height: 30px; width: 30px; background-image: url(../games/braingames/images/puzzle_9_button_enter_b.png); display: inline-block;} #circleG{ width:112px; margin:auto; margin-top: 90px; } .circleG{ background-color:rgb(0,255,255); float:left; height:24px; margin-left:13px; width:24px; animation-name:bounce_circleG; -o-animation-name:bounce_circleG; -ms-animation-name:bounce_circleG; -webkit-animation-name:bounce_circleG; -moz-animation-name:bounce_circleG; animation-duration:2.24s; -o-animation-duration:2.24s; -ms-animation-duration:2.24s; -webkit-animation-duration:2.24s; -moz-animation-duration:2.24s; animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-direction:normal; -o-animation-direction:normal; -ms-animation-direction:normal; -webkit-animation-direction:normal; -moz-animation-direction:normal; border-radius:16px; -o-border-radius:16px; -ms-border-radius:16px; -webkit-border-radius:16px; -moz-border-radius:16px; } #circleG_1{ animation-delay:0.45s; -o-animation-delay:0.45s; -ms-animation-delay:0.45s; -webkit-animation-delay:0.45s; -moz-animation-delay:0.45s; } #circleG_2{ animation-delay:1.05s; -o-animation-delay:1.05s; -ms-animation-delay:1.05s; -webkit-animation-delay:1.05s; -moz-animation-delay:1.05s; } #circleG_3{ animation-delay:1.35s; -o-animation-delay:1.35s; -ms-animation-delay:1.35s; -webkit-animation-delay:1.35s; -moz-animation-delay:1.35s; } @keyframes bounce_circleG{ 0%{} 50%{ background-color:rgb(0,149,144); } 100%{} } @-o-keyframes bounce_circleG{ 0%{} 50%{ background-color:rgb(0,149,144); } 100%{} } @-ms-keyframes bounce_circleG{ 0%{} 50%{ background-color:rgb(0,149,144); } 100%{} } @-webkit-keyframes bounce_circleG{ 0%{} 50%{ background-color:rgb(0,149,144); } 100%{} } @-moz-keyframes bounce_circleG{ 0%{} 50%{ background-color:rgb(0,149,144); } 100%{} } /*PUZZLE 10*/ .brain_background_level_10_intro { position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_10_introbackground.jpg); height: 612px; width: 2569px; } .brain_background_level_10_introfinished { position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_10_introbackground_cut.jpg); height: 612px; width: 1000px; } .brain_background_level_10_game { position: absolute; left: 0px; top: 0px; background-image: url(../games/braingames/images/puzzle_10_sudokubackground.jpg); height: 612px; width: 1000px; } #braindude_10_intro { position: absolute; left: 2994px; bottom: 0px; background-image: url(../games/braingames/images/puzzle_10_dude_intro.png); height: 592px; width: 425px; } .sudoku_board { margin:1px auto; position: absolute; height: 458px; width: 458px; border-left: 1px solid #bdc3c7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sudoku_board .cell { width: 11.11%; display: inline-block; float:left; cursor:pointer; text-align: center; overflow: hidden; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; box-shadow: 0px 0px 0px 1px #bdc3c7; background:white; } .sudoku_board .cell.border_h { box-shadow: 0px 0px 0px 1px #bdc3c7, inset 0px -2px 0 0 #34495e; } .sudoku_board .cell.border_v { box-shadow: 0px 0px 0px 1px #bdc3c7, inset -2px 0 0 #34495e; } .sudoku_board .cell.border_h.border_v { box-shadow: 0px 0px 0px 1px #bdc3c7, inset -2px 0 0 black, inset 0px -2px 0 black; } .sudoku_board .cell span { color:#2c3e50; font-size:14px; text-align:middle; } .sudoku_board .cell.selected, .sudoku_board .cell.selected.fix { background:#FFE; } .sudoku_board .cell.selected.current { position:relative; background: #3498db; font-weight:bold; box-shadow: 0px 0px 3px 3px #bdc3c7; } .sudoku_board .cell.selected.current span { color:white; } .sudoku_board .cell.selected.group { color:blue; } .sudoku_board .cell span.samevalue, .sudoku_board .cell.fix span.samevalue { font-weight:bold; color:#3498db; } .sudoku_board .cell.notvalid, .sudoku_board .cell.selected.notvalid{ font-weight:bold; color:white;; background:#e74c3c; } .sudoku_board .cell.fix { background:#ecf0f1; cursor:not-allowed; } .sudoku_board .cell.fix span { color:#7f8c8d; } .sudoku_board .cell .solution { font-size:10px; color:#d35400; } .sudoku_board .cell .note { color:#bdc3c7; width:50%; height:50%; display: inline-block; float:left; text-align:center; font-size:14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gameover_container .gameover { color:white; font-weight:bold; text-align:center; display:block; position:absolute; width:90%; padding:10px; box-shadow: 0px 0px 5px 5px #bdc3c7; } .restart { background:#7F8C8D; color:#ecf0f1; } /* console */ .board_console_container, .gameover_container { background-color: rgba(255, 255, 255, 0.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .board_console { display:block; position:absolute; width:50%; color:white; background-color: rgba(127, 140, 141, 0.7); box-shadow: 0px 0px 5px 5px #bdc3c7; } .board_console .num { width:33.33%; color:#2c3e50; padding: 1px; display: inline-block; font-weight:bold; font-size:24px; text-align: center; cursor:pointer; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; box-shadow: 0px 0px 0px 1px #bdc3c7; } .board_console .num:hover { color:white; background:#f1c40f; } .board_console .num.remove { width:66.66%; } .board_console .num.note { background:#95a5a6; color:#ecf0f1; } .board_console .num.note:hover { background:#95a5a6; color:#f1c40f; } .board_console .num.selected { background:#f1c40f; box-shadow: 0px 0px 3px 3px #bdc3c7; } .board_console .num.note.selected { background:#f1c40f; box-shadow: 0px 0px 3px 3px #bdc3c7; } .board_console .num.note.selected:hover { color:white; } .board_console .num.no:hover { color:white; cursor:not-allowed; } .board_console .num.remove:hover { color:white; background:#c0392b; } .statistics { text-align:center; } #sudoku_menu { background-color: black; position: absolute; z-index:2; width: 100%; height: 100%; left: -100%; box-sizing: border-box; -moz-box-sizing: border-box; } #sudoku_menu ul { margin: 0; padding: 100px 0px 0px 0px; list-style: none; } #sudoku_menu ul li{ margin: 0px 50px; } #sudoku_menu ul li a { text-align:center; padding: 15px 20px; font-size: 28px; font-weight: bold; color: white; text-decoration: none; display: block; border-bottom: 1px solid #2c3e50; } #sudoku_menu.open-sidebar { left:0px; } #sidebar-toggle { z-index:3; background: #bdc3c7; border-radius: 3px; display: block; position: relative; padding: 22px 18px; float: left; } #sidebar-toggle .bar{ display: block; width: 28px; margin-bottom: 4px; height: 4px; background-color: #f0f0f0; border-radius: 1px; } #sidebar-toggle .bar:last-child{ margin-bottom: 0; } .braingame10_button_return{position: absolute; right: 20px; bottom: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_Return.svg); transition: transform .5s ease-in-out;} .braingame10_button_return:hover{-webkit-transform: scale(1.1); cursor:pointer;} .braingame10_button_close{position: absolute; right: 20px; top: 20px; width: 108px; height: 107px; background-image: url(../games/braingames/images/Button_Close.svg); transition: transform .5s ease-in-out; } .braingame10_button_close:hover{-webkit-transform: scale(1.1); cursor:pointer;}