/* */ #game_outer{position:relative; margin:auto; width: 900px; height: 600px; background-size: 900px 600px;} #topLayer{width:900px; height:600px; position:absolute; top:0px; left:0px; z-index:100} #map_frame{width:900px; height:600px; position:absolute; top:0px; left:0px; z-index:80; background: url(images/map_frame.png) no-repeat; background-size: 900px 600px;} #game_assets{width:900px; height:600px; position:absolute; top:0px; left:0px; z-index:82;} #timerBloc{z-index: 80;} #topInterface{position: absolute; top:-5px; left:0; z-index: 100; width: 900px;} #questionLabelBloc{position: absolute; left:30px; top:12px; font-weight: bold; z-index:10;} #questionLabelBloc.on_bottom{top:450px !important;} #topInterface { position: absolute; top: -5px; left: 0; z-index: 100; width: 900px; height: 100%; pointer-events: none; } #questionLabelBloc.on_bottom { bottom: 84px !important; position: absolute; height: max-content; top: auto !important; } #questionIndexLabel{font-size: 1.5em; color:#4373AF; display: inline-block;} #questionTextLabel{font-size: 2em; color:#355987; display: inline-block; margin-left:10px;letter-spacing: -0.04em;} #questionTextSupLabel{font-size: 1.5em; color:#4373AF; display: inline-block; margin-left:10px;} #mainScoreLabel{position: absolute; right:60px; font-size: 2.2em; font-weight: bold; text-align: right; color:#355987; top: 12px; } /* For tablets */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { #questionLabelBloc{top:7px;} #mainScoreLabel{top: 2px;} } /* FOR small screens (iphones) @media only screen and (max-device-width : 568px){ */ @media only screen and (max-device-width : 1300px){ /* Game */ #topInterface{top:44px !important;} #mainScoreLabel, #questionIndexLabel, #questionTextLabel{ color:#FFF !important; text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;} #questionLabelBloc { left: 36px; background: #00000066; padding: 2px 10px; border-radius: 17px; } #mainScoreLabel{ margin-right:20px;} .score_comparator { display: block;} #questionTextLabel{ font-size: 1.8em; } #questionTextSupLabel { display: block; font-size: 1.3em; margin-top: -10px; margin-left: 0px; color: #FFFFFF88; } #game_outer #winSolution.popup{top: 130px;} } .pinDot, .pinLabel, .flagUser, .flagAnswer{position: absolute; z-index: 2 } .pinLabel{ color:#FFF; font-weight:bold; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);}/* text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; letter-spacing: auto;}*/ .pinDot{width:5px; height: 5px; background: #F00; border:solid 2px #FFF; border-radius: 10px; } .pinDot.user{display:none;} .flagUser{background: url(images/loc_games/flagUser.png) 100% 100% no-repeat; background-size: 12px 30px;width: 12px; height:30px;} .flagUserPointShadow{position:absolute;width:5px; height: 5px; background: rgba(0, 0, 0, 0.2);border-radius: 10px;} .flagAnswer{background: url(images/loc_games/flagAnswer.png) 100% 100% no-repeat; background-size: 12px 30px;width: 12px; height:30px;} .distCircle{position:absolute; background: url(images/loc_games/distCircle.png) no-repeat; background-size: 100% 100%;z-index: 1} /* the left of #winSolution will be calculated according to the flagAnswer position */ #winSolution{left:300px; padding:20px; font-size: 1.2em;} #winSolution .questionIndexLabel{font-size: 1em; color:#427ECF; text-align: center;} #winSolution .questionTextLabel{font-size: 1.3em; color:#427ECF; text-align: center;line-height: 1em;} #winSolution .distanceLabel{font-size: 2.2em; color:#427ECF; text-align: center;margin-top: 20px;} #winSolution .distanceLabelUnit{font-size: 1em; color:#427ECF; } .distanceBloc{margin-top:30px; padding:0 20px;} .distanceBloc .distanceIco{display: inline-block;width:44px; height:25px; background:url(images/loc_games/ico_dist.png) no-repeat; background-size: 44px 25px; } .distanceBloc .distanceDetail{display: inline-block;font-size: 1.15em; color:#FEB32A; float: right;} .timeBloc{margin-top:30px; padding:0 20px;} .timeBloc .timeIco{display: inline-block;width:26px; height:25px; background:url(images/loc_games/ico_time.png) no-repeat; background-size: 26px 25px;} .timeBloc .timeDetail{display: inline-block;font-size: 1.15em; color:#47B2CF; float: right;} #winSolution .scoreLabel{font-size: 3em; color:#427ECF; text-align: center;margin-top:30px;} /* #winEndGame */ #winEndGame .scoreTitleLabel{} #winEndGame .statsBlocTitle{font-size: 1.2em; font-family: Blogger_Sans_Light; color:#72BBF3; text-align: center;} #winEndGame .statsBloc{ padding:10px 30px 0px 30px; border:solid 1px #72BBF3; margin: 0 30px; border-radius: 20px;} #winEndGame .distanceBloc{margin-top:0px; } #winEndGame .timeBloc{margin-top:0px; line-height: 30px;} #buttonPlayAgain{margin-top:16px;} #trav_assets{ font-size: 0.7em; padding:20px; text-align: left;} /*position: absolute; bottom:100px; left:20px; z-index: 200;*/ #trav_assets input{width:60px;} .btn_plusminus{padding:2px; font-size: 0.7em; min-width:2em;} /* Cursor for touch device 2023 : the mire size x 2 */ /*-----------------------------------*/ #loc_cursor{position:absolute; z-index: 3000; background:url(images/loc_games/mire@2x.png) no-repeat; top:100px; left:100px;background-size: 68px 54px; width:68px; height:54px; display:none;} /*#loc_cursor{position:absolute; z-index: 3000; background:url(images/loc_games/mire@2x.png) no-repeat; top:100px; left:100px;background-size: 34px 27px; width:34px; height:27px; display:none;}*/ /* ZOOM */ /*-----------------------------------*/ .zoom { display:inline-block; position: relative; } .zoom:after { content:''; display:block; width:33px; height:33px; position:absolute; top:0; right:0; /*background:url(icon.png);*/ } .zoom img { display: block; } .zoom img::selection { background-color: transparent; } /* TRAV */ /*-----------------------------------*/ #trav_asset_content_result.displayed{padding:10px; background: #CFF; margin-bottom:20px;}