/* * * * *
* * * * *
GENERAL / COMMON
* * * * *
* * * * */
html {
overflow-x: hidden;
}
body {
padding-top: 95px;
min-width: 280px;
}
/* FONTS */
@font-face {
font-family: KatahdinRound;
src: url('../fonts/KatahdinRound.otf');
}
/* END FONTS */
/* PRELOAD IMAGES */
.preload_image {
height: 1px;
width: 1px;
position: absolute;
left: -10000px;
top: -10000px;
}
/* END PRELOAD IMAGES */
/* STEP ACTION BUTTONS */
.btn_step_action {
font-family: KatahdinRound, sans-serif;
text-transform: uppercase;
display: inline-block;
font-weight: 500;
padding: 20px 80px;
margin: 0 auto 0 auto;
border-radius: 10px;
cursor: pointer;
color: white;
background: #1b99e6; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#1da1f2, #1b99e6); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1da1f2, #1b99e6); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1da1f2, #1b99e6); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1da1f2, #1b99e6); /* Standard syntax */
}
.btn_step_action:hover {
background: #1069bc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#1da1f2, #1069bc); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1da1f2, #1069bc); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1da1f2, #1069bc); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1da1f2, #1069bc); /* Standard syntax */
}
/* END STEP ACTION BUTTONS */
/* NAVIGATION ARROWS */
.navigation_arrow {
}
.navigation_arrow img {
width: 150px;
}
.navigation_arrow:hover {
background: var(--background-whitesmoke);
}
.arrow_back {
position: fixed;
top: 50%;
left:10%;
z-index: 1;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.arrow_forward {
position: fixed;
top: 50%;
right:10%;
z-index: 1;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
/* END NAVIGATION ARROWS */
/* * * * *
* * * * *
* END GENERAL *
* * * * *
* * * * */
/* * * * *
* * * * *
* GAME CONTROL *
* * * * *
* * * * */
#game_control {
width: 100%;
padding-bottom: 100px;
display: none;
}
/* TOP BAR */
#game_control_top_bar {
width: 100%;
height: 75px;
position: fixed;
top: 60px;
left: 0;
z-index: 5;
background-color: var(--background-color);
box-shadow: 0 1px 3px rgba(var(--background-color-inverse-rgb),0.15);
}
#top_bar_content {
width: 66%;
height: 100%;
position: relative;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: default;
}
.top_bar_item {
}
#readspeaker_container {
position: fixed;
top: 8.5em;
width: 100%;
z-index: 10;
}
#readspeaker_buttons_container {
position: relative;
}
/* CONTROL PANEL - TOP BAR CENTER LEFT */
#control_panel {
position: relative;
width: 25%;
height: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 0.25em;
}
.control_panel_item {
height: 100%;
padding: 0 10px;
margin-right: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.control_panel_item.disabled {
opacity: 0.5;
cursor: default;
}
.control_panel_item:not(.disabled):hover {
background-color: var(--hover-grey);
}
.control_panel_item:not(.disabled):hover img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.control_panel_item img {
display: block;
margin: auto;
margin: 0 auto 8px auto;
width: auto;
height: 1.25em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
body.night_mode .control_panel_item img {
filter: invert(1);
}
.control_panel_item.listen img {
height: 1.5em;
margin: 0 auto 4px auto;
}
.control_panel_item.listen.inactive img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
border-radius: 50%;
}
.control_panel_item .control_panel_item_text {
font-size: 0.75em;
color: var(--text-lighter);
}
.control_panel_item:not(.disabled):hover .control_panel_item_text {
color: var(--text-default);
}
/* CONTROL PANEL LARGE (AVATAR AND CAR) */
.screen_control_button {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#btn_player, #btn_continue_game {
position: relative;
height: 100%;
margin-right: 10px;
padding: 3px 10px 0 10px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#btn_player:hover, #btn_continue_game:hover {
background-color: var(--hover-grey);
}
#player_avatar {
margin-bottom: 3px;
width: 48px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#btn_player:hover #player_avatar {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
#car_avatar {
margin-bottom: 3px;
width: 48px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#btn_continue_game:hover #car_avatar {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.control_panel_item_large_text {
color: var(--text-lighter);
font-size: 0.75em;
}
#btn_player:hover .control_panel_item_large_text, #btn_continue_game:hover .control_panel_item_large_text {
color: var(--text-default);
}
/* END CONTROL PANEL LARGE (AVATAR AND CAR) */
/* END CONTROL PANEL */
/* TITLES - TOP BAR CENTER */
#top_bar_titles_container {
width: 50%;
}
#top_bar_title {
font-size: 1.5em;
padding: 0;
margin: 0 0 3px 0;
}
#top_bar_subtitle {
font-size: 1.125em;
font-weight: 500;
padding: 0;
margin: 0;
}
/* development mode only */
#developer_mode_title {
font-size: 0.75em;
background-color: #f81b84;
color: white;
display: none;
position: absolute;
bottom: -1.4em;
padding: 0.125em;
left: 0;
right: 0;
}
/* END TITLES */
/* REWARDS PROGRESS (STAR METER) - TOP BAR RIGHT */
#top_bar_right {
width: 25%;
height: 100%;
padding: 0 0.25em 0 0;
margin: 0;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#top_bar_right_content {
}
#top_bar_rewards_status_container {
height: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#top_bar_rewards_status_container:hover {
background-color: var(--hover-grey);
cursor: pointer;
}
#top_bar_rewards_status_container:hover #rewards_progress_container {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
#rewards_progress_container {
height: 46px;
width: 80px;
position: relative;
margin-bottom: 8px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#rewards_progress_background {
z-index: 0;
height: 100%;
position: absolute;
top: 3px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#rewards_progress_foreground {
z-index: 1;
height: 100%;
position: absolute;
top: 3px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.rewards_progress_container_clone.accumulating {
-webkit-animation: starAccumulating 1.5s linear 3.0s forwards;
animation: starAccumulating 1.5s linear 3.0s forwards;
}
.rewards_progress_container_clone.accumulating_fast {
-webkit-animation: starAccumulating 1.0s linear 2.5s forwards;
animation: starAccumulating 1.0s linear 2.5s forwards;
}
@-webkit-keyframes starAccumulating {
0%{
-webkit-transform: scale(1.0);
transform: scale(1.0);
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
15%{
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
60%{
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
70%{
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
75%{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-: brightness(150%);
filter: brightness(150%);
}
100%{
-webkit-: brightness(100%);
filter: brightness(100%);
}
}
@keyframes starAccumulating {
0%{
-webkit-transform: scale(1.0);
transform: scale(1.0);
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
15%{
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
60%{
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
70%{
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
75%{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-: brightness(150%);
filter: brightness(150%);
}
100%{
-webkit-: brightness(100%);
filter: brightness(100%);
}
}
/* FALLING STARS (REWARD ANIMATION) */
#fallings_stars_container {
top: 0;
background: rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
left:0;
z-index: 11;
display: none;
}
.falling_stars {
position: relative;
text-align: center;
z-index: 10;
}
.falling_stars span {
display: inline-block;
background:url("../graphics/ic_star_rain.png");
color: transparent;
}
.falling_stars .star1 {
width: 75px;
height: 75px;
background-size: 80px;
margin: -200px -93px 96px -71px;
-webkit-animation: fallingStars 3s infinite linear;
-moz-animation: fallingStars 3s infinite linear;
}
.falling_stars .star2 {
width: 30px;
height: 30px;
background-size: 30px;
margin: -200px -53px 77px -41px;
-webkit-animation: fallingStars 3.5s infinite linear;
-moz-animation: fallingStars 3.5s infinite linear;
}
.falling_stars .star3 {
width: 40px;
height: 40px;
background-size: 40px;
margin: -120px -85px 113px -55px;
-webkit-animation: fallingStars 5s infinite linear;
-moz-animation: fallingStars 5s infinite linear;
}
.falling_stars .star4 {
width: 50px;
height: 50px;
background-size: 50px;
margin: -190px -43px 96px -38px;
-webkit-animation: fallingStars 4.1s infinite linear;
-moz-animation: fallingStars 4.1s infinite linear;
}
.falling_stars .star5 {
width: 25px;
height: 25px;
background-size: 25px;
margin: -135px -7px 91px -23px;
-webkit-animation: fallingStars 4.7s infinite linear;
-moz-animation: fallingStars 4.7s infinite linear;
}
.falling_stars .star6 {
width: 100px;
height: 100px;
background-size: 100px;
margin: -155px -27px 85px -33px;
-webkit-animation: fallingStars 4.9s infinite linear;
-moz-animation: fallingStars 4.9s infinite linear;
}
.falling_stars span:nth-child(5n+5) {
-webkit-animation-delay: 0.63s;
-moz-animation-delay: 0.63s;
}
.falling_stars span:nth-child(3n+2) {
-webkit-animation-delay: 1.01s;
-moz-animation-delay: 1.01s;
}
.falling_stars span:nth-child(2n+5) {
-webkit-animation-delay: 1.21s;
-moz-animation-delay: 1.21s;
}
.falling_stars span:nth-child(3n+10) {
-webkit-animation-delay: 1.63s;
-moz-animation-delay: 1.63s;
}
.falling_stars span:nth-child(7n+2) {
-webkit-animation-delay: 1.98s;
-moz-animation-delay: 1.98s;
}
.falling_stars span:nth-child(4n+5) {
-webkit-animation-delay: 2.34s;
-moz-animation-delay: 2.34s;
}
.falling_stars span:nth-child(3n+7) {
-webkit-animation-delay: 2.57s;
-moz-animation-delay:2.57s;
}
@-webkit-keyframes fallingStars {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
/* END FALLING STARS (REWARD ANIMATION) */
/* CLICK ME STAR (CLAIM REWARD) */
#star_click_me_container {
text-align: center;
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 31;
}
#star_click_me {
z-index: 32;
display: block;
height: 480px;
opacity: 0;
cursor: pointer;
-webkit-animation: bounceInStar 600ms linear 3.0s forwards;
animation: bounceInStar 600ms linear 3.0s forwards;
}
@-webkit-keyframes bounceInStar {
0%{
opacity: 0;
-webkit-transform: scale(0.0);
transform: scale(0.0);
}
50%{
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
70%{
opacity: 1;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
82%{
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
90%{
opacity: 1;
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
96%{
opacity: 1;
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
100%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceInStar {
0%{
opacity: 0;
-webkit-transform: scale(0.0);
transform: scale(0.0);
}
50%{
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
70%{
opacity: 1;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
82%{
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
90%{
opacity: 1;
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
96%{
opacity: 1;
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
100%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* END CLICK ME STAR (CLAIM REWARD) */
/* END REWARDS PROGRESS (STAR METER) */
/*END TOP BAR*/
/* * * * *
* * * * *
* GAME OVERVIEW *
* * * * *
* * * * */
/*
FOR FIXED BACKGROUND!!
background-image: url("../images/bkg_game_overview.jpg");
background-repeat: no-repeat;
background-position: left center;
background-size:cover;
background-attachment: fixed;
*/
#game_overview {
width: 100%;
margin: 40px auto 0 auto;
display: none;
background-image: url("../images/bkg_player.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 20px 0 80px 0;
box-sizing: border-box;
overflow-x: hidden;
}
#game_overview_content {
width: 100%;
/*display: none;*/
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 50px;
}
.game_overview_column {
position: relative;
width: 40%;
margin: 0 1%;
}
.game_overview_item {
position: relative;
margin: 0 0 25px 0;
padding: 2em 1.5em;
border-radius: 25px;
background-color: rgba(var(--background-color-rgb), 0.86);
}
.game_overview_item.reduced_horizontal_padding {
padding: 2em 1.0em;
}
.game_overview_item_heading {
margin: 0 auto 35px auto;
padding-top: 10px;
font-size: 2.25em;
font-family: KatahdinRound, sans-serif;
color: #3399cc;
font-weight: bold;
cursor: default;
text-shadow: -1px -1px 0px #eff7fb, 0px 1px 0px rgba(0,0,0,0.2), 0px 2px 0px rgba(0,0,0,0.05);
}
body.night_mode .game_overview_item_heading {
color: dodgerblue;
}
/* GAME SETTINGS */
#game_settings_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: default;
}
.game_settings_button {
position: relative;
text-align: center;
width: 25%;
margin: 0 2% 20px 2%;
font-size: 0.875em;
padding: 10px 5px;
cursor: pointer;
}
.game_settings_button img {
display: block;
height: 64px;
margin: 0 auto 10px auto;
}
body.night_mode .game_settings_button img {
filter: invert(1);
}
.game_settings_button.disabled img {
opacity: 0.5;
}
.game_settings_button:hover {
color: var(--text-inverse);
background: #333;
}
body.night_mode .game_settings_button:hover {
color: var(--text-default);
background: black;
}
.game_settings_button:hover img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
/* END GAME SETTINGS */
/* BOTTOM BUTTONS */
.overview_bottom_button {
width: 33.33%;
display: block;
padding: 20px;
}
/* * * * *
* PLAYER * *
* * * * */
#player_details_container {
width: 100%;
}
#player_details_avatar {
height: 128px;
cursor: pointer;
}
#player_details_avatar:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
#player_details_name {
margin: 10px 0 0 0;
padding: 0;
}
/* * * * *
* END PLAYER *
* * * * */
/* * * * *
* STATS * *
* * * * */
/*CHARTS*/
#player_charts_container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.player_chart_wrapper {
position: relative;
width: 31%;
margin: 0 1% 20px 1%;
background: transparent;
text-align: center;
overflow: hidden;
}
.player_stat_title {
color: grey;
font-weight: 500;
font-size: 1.0em;
margin-bottom: 10px;
}
body.night_mode .player_stat_title {
color: #ccc;
}
.player_stat {
font-weight: 500;
font-size: 0.875em;
margin: 10px 0;
}
.player_chart {
position: relative;
height: 120px;
z-index: 2;
}
.stat_center_text {
position: absolute;
top: calc(50% - 8px);
left: calc(50% + 3px);
font-size: 2.25em;
font-weight: 700;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: var(--text-inverse);
text-shadow: 0 2px 1px rgba(var(--background-color-inverse-rgb),0.8);
z-index: 3;
}
.player_chart_wrapper_large {
position: relative;
width: 100%;
background: transparent;
text-align: center;
}
.player_stat_large_title {
color: grey;
font-weight: 500;
font-size: 1.0em;
margin-bottom: 0;
}
.player_stat_explanation {
font-size: 0.75em;
margin: 0 0 10px 0;
}
#chart_quiz_history_container {
position: relative;
}
#chart_quiz_history {
position: relative;
height: 240px;
z-index: 2;
}
/*END CHARTS*/
/* * * * *
* END INFO *
* * * * */
/* * * * *
LEADERBOARDS / COMPETITION
* * * * */
/* LEADERBOARD BUTTONS */
#current_period_competition_details {
text-align: left;
}
#current_period_competition_details p:first-child {
margin-top: 0;
padding-top: 0;
}
#current_period_competition_details a {
text-decoration: none;
color: var(--text-default);
font-weight: 500;
}
#current_period_competition_details a:hover {
color: dodgerblue;
}
#leaderboard_selector_buttons {
width: 100%;
margin-bottom: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.leaderboard_selector_button {
font-family: KatahdinRound, sans-serif;
width: 49%;
display: inline-block;
font-weight: 500;
padding: 10px;
border-radius: 5px;
cursor: pointer;
color: white;
outline: none;
border: none;
background: #1b99e6; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#1da1f2, #1b99e6); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1da1f2, #1b99e6); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1da1f2, #1b99e6); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1da1f2, #1b99e6); /* Standard syntax */
}
.leaderboard_selector_button:first-child {
margin-right: 2%;
}
.leaderboard_selector_button:hover {
background: #1069bc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#1da1f2, #1069bc); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1da1f2, #1069bc); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1da1f2, #1069bc); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1da1f2, #1069bc); /* Standard syntax */
}
/* END LEADERBOARD BUTTONS */
/* LEADERBOARD TABLES */
.leaderboard {
width: 100%;
border-collapse: collapse;
text-align: center;
display: none;
}
/* LEADERBOARD COLUMNS */
.leaderboard_column_rank {
width: 7.5%;
}
.leaderboard_column_avatar {
width: 7.5%;
}
.leaderboard_column_name {
width: 45%;
}
.leaderboard_column_stars {
width: 15%;
}
.leaderboard_column_questions {
width: 25%;
}
/*HEADINGS*/
.leaderboard th {
padding: 18px 0 8px 0;
background: black;
color: white;
vertical-align: top;
}
.leaderboard th:first-child, #rewards th:first-child {
border-top-left-radius: 8px;
}
.leaderboard th:last-child, #rewards th:last-child {
border-top-right-radius: 8px;
}
.leaderboard th a {
color: var(--text-inverse);
text-decoration: none;
}
.leaderboard th a:hover {
color: dodgerblue;
}
.leaderboard_sort_indicator {
height: 12px;
display: block;
margin: 0 auto;
opacity: 0;
}
/*LEADERBOARD BODY*/
/*ROWS& CELLS*/
.leaderboard tbody {
font-size: 0.875em;
}
.leaderboard tbody tr {
box-shadow:
0 2px 0 #cccccc inset,
2px 0 0 #cccccc inset,
-2px 0 0 #cccccc inset
;
}
.leaderboard tbody tr:last-child {
box-shadow:
0 -2px 0 #cccccc inset,
0 2px 0 #cccccc inset,
2px 0 0 #cccccc inset,
-2px 0 0 #cccccc inset
;
}
.leaderboard tbody tr:nth-child(even) {
background-color: #dddddd;
}
body.night_mode .leaderboard tbody tr:nth-child(even) {
background-color: transparent;
}
.leaderboard td {
padding: 5px;
position: relative;
vertical-align: middle;
}
.cell_align_left, .leaderboard_player_cell {
text-align: left;
}
.leaderboard_player_cell {
}
.leaderboard_avatar {
max-height: 32px;
vertical-align: middle;
}
.leaderboard_player_cell span {
vertical-align: middle;
}
.leaderboard_item_me {
font-weight: 500;
background: #61b1ff;
background: -webkit-linear-gradient(#8ec7ff, #61b1ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#8ec7ff, #61b1ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#8ec7ff, #61b1ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#8ec7ff, #61b1ff); /* Standard syntax */
box-shadow:
0 2px 0 #1e90ff inset,
0 -2px 0 #1e90ff inset,
2px 0 0 #1e90ff inset,
-2px 0 0 #1e90ff inset
!important;
}
body.night_mode .leaderboard_item_me {
color: var(--text-inverse);
}
.leaderboard_item_neighbour {
box-shadow:
2px 0 0 #cccccc inset,
-2px 0 0 #cccccc inset
!important;
}
.create_player_prompt {
text-decoration: none;
color: var(--text-default);
text-decoration: underline;
}
body.night_mode .create_player_prompt {
color: var(--text-inverse);
}
.create_player_prompt:hover,
body.night_mode .create_player_prompt:hover {
color: #0077ee;
}
.leadboard_item_competition_leader {
box-shadow:
0 2px 0 #e0ad2a inset,
0 -2px 0 #e0ad2a inset,
2px 0 0 #e0ad2a inset,
-2px 0 0 #e0ad2a inset !important;
font-weight: 500;
background: #facd58;
background: -webkit-linear-gradient(#facd58, #f9c12f); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#facd58, #f9c12f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#facd58, #f9c12f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#facd58, #f9c12f); /* Standard syntax */
}
body.night_mode .leadboard_item_competition_leader {
color: black;
}
.leadboard_item_competition_leader .leaderboard_player_total {
font-weight: bold;
}
/* END LEADERBOARD TABLES */
/* * * * *
END LEADERBOARDS
* * * * */
/* REWARDS TABLE */
#rewards {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.rewards_column_number {
width: 10%;
}
.rewards_column_icon {
width:10%;
}
.rewards_column_description {
width: 80%;
}
#rewards th {
padding: 18px 0;
background: black;
color: var(--text-inverse);
vertical-align: top;
}
body.night_mode #rewards th {
color: var(--text-default);
}
#rewards tbody {
font-size: 0.875em;
color: var(--text-lighter);
}
#rewards tbody tr {
box-shadow:
0 2px 0 #cccccc inset,
2px 0 0 #cccccc inset,
-2px 0 0 #cccccc inset
;
}
#rewards tbody tr:nth-child(even) {
background-color: var(--hover-grey-darker);
}
body.night_mode #rewards tbody tr:nth-child(even),
body.night_mode #rewards tbody tr:nth-child(odd) {
background-color: black;
}
#rewards tbody tr:last-child {
box-shadow:
0 -2px 0 #cccccc inset,
0 2px 0 #cccccc inset,
2px 0 0 #cccccc inset,
-2px 0 0 #cccccc inset
;
}
#rewards td {
position: relative;
vertical-align: middle;
color: var(--text-default);
padding: 0.25em;
}
body.night_mode #rewards tr.reward_unlocked td,
body.night_mode #rewards tr.reward_unlocked_last td {
color: var(--text-inverse);
}
#rewards td a {
text-decoration: none;
font-weight: 500;
color: dodgerblue;
}
#rewards td a:hover {
color: var(--color-link-hover);
}
.reward_icon {
max-height: 32px;
vertical-align: middle;
}
.reward_unlocked {
font-weight: 500;
color: var(--text-default);
background: #66ff66;
background: -webkit-linear-gradient(#66ff66, #5be55b); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#66ff66, #5be55b); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#66ff66, #5be55b); /* For Firefox 3.6 to 15 */
background: linear-gradient(#66ff66, #5be55b); /* Standard syntax */
box-shadow:
0 2px 0 #66cc66 inset,
2px 0 0 #66cc66 inset,
-2px 0 0 #66cc66 inset !important;
}
.reward_unlocked_last {
font-weight: 500;
color: var(--text-default);
background: #66ff66;
background: -webkit-linear-gradient(#66ff66, #5be55b); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#66ff66, #5be55b); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#66ff66, #5be55b); /* For Firefox 3.6 to 15 */
background: linear-gradient(#66ff66, #5be55b); /* Standard syntax */
box-shadow:
0 2px 0 #66cc66 inset,
0 -2px 0 #66cc66 inset,
2px 0 0 #66cc66 inset,
-2px 0 0 #66cc66 inset !important;
}
.reward_first_locked {
box-shadow:
2px 0 0 #cccccc inset,
-2px 0 0 #cccccc inset
!important;
}
/* END REWARDS TABLE */
/* * * * *
* * CHAPTERS *
* * * * */
#chapters_container {
padding-left: 60px;
padding-right: 60px;
}
#chapters_container .game_overview_item_heading {
margin: 0 0 20px 0;
}
.chapter_row_container {
position: relative;
}
.chapter_row_container:not(:last-child) {
margin-bottom: 46px;
}
.chapter_row {
position: relative;
width: 100%;
z-index: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/*.chapter_row:not(:last-child) {
margin-bottom: 40px;
}*/
#chapter_row_1 {
z-index: 1;
}
#chapter_row_2 {
z-index: 2;
}
#chapter_row_3 {
z-index: 3;
}
#chapter_row_4 {
z-index: 4;
}
/* CHAPTER CIRCLES */
.chapter_circle {
position: absolute;
z-index: 3;
height: 60px;
width: 60px;
-webkit-border-radius: 50%;
border-radius: 50%;
outline: none;
cursor: pointer;
}
.circle_locked {
background: #999999; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#cccccc, #999999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#cccccc, #999999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#cccccc, #999999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#cccccc, #999999); /* Standard syntax */
cursor: default;
}
.circle_complete {
background: #59f259; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ff80, #59f259); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ff80, #59f259); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ff80, #59f259); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ff80, #59f259); /* Standard syntax */
}
.circle_complete:hover {
background: #23b223; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#5be55b, #23b223); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5be55b, #23b223); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5be55b, #23b223); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5be55b, #23b223); /* Standard syntax */
}
.circle_active {
background: #3399ff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#66ccff, #3399ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#66ccff, #3399ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#66ccff, #3399ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#66ccff, #3399ff); /* Standard syntax */
}
.circle_active:hover {
background: #236bb2; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#5bb7e5, #236bb2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5bb7e5, #236bb2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5bb7e5, #236bb2); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5bb7e5, #236bb2); /* Standard syntax */
}
.circle_left {
left: -30px;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}
.circle_active::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
content: '';
background: #66ccff;
pointer-events: none;
z-index: -1;
-webkit-animation: pulse 1.5s linear;
animation: pulse 1.5s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.circle_center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.circle_right {
right: -30px;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}
.chapter_circle img {
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.circle_unlocked:hover {
/*-webkit-filter: brightness(0.8); */
}
/* END CHAPTER CIRCLES */
/* CHAPTER DATA */
.chapter_data {
position: relative;
z-index: 2;
height: 100px;
width: 50%;
}
/* VERTICAL (ROTATED 90) CHAPTERS */
#chapter_data_3, #chapter_data_6, #chapter_data_9 {
position: absolute;
width: 90px;
top: 28px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
#chapter_data_3, #chapter_data_9 {
z-index: 0;
right: -90px;
}
/* END VERTICAL CHAPTERS */
.chapter_data_title {
position: absolute;
width: 75%;
bottom: 64px;
left: 50%;
font-size: 0.875em;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
font-weight: 500;
}
.chapter_data_title_vertical {
width: 90%;
}
.chapter_data_title_locked {
color: #999999;
}
body.night_mode .chapter_data_title_locked {
color: #666;
}
.chapter_data_title_complete {
/*color: #59f259;*/
color: var(--text-default);
}
.chapter_data_title_active {
color: #3399ff;
}
#chapter_title_3, #chapter_title_9 {
top: 65px;
bottom: 0;
}
/*#chapter_title_1 {
color: #7e7e7e;
}
#chapter_title_2 {
color: #3072ff;
}
#chapter_title_3 {
color: #ff952f;
}
#chapter_title_4 {
color: #1fb12e;
}
#chapter_title_5 {
color: #ff48a4;
}
#chapter_title_6 {
color: #05ae8c;
}
#chapter_title_7 {
color: #7e3eff;
}
#chapter_title_8 {
color: #fb4844;
}
#chapter_title_9 {
color: #4396c9;
}
#chapter_title_10 {
color: #d8ac00;
}
#chapter_title_11 {
color: #009494;
}*/
/* CHAPTER PROGRESS BARS */
.chapter_progress_container {
position: absolute;
top: 50%;
left:0;
right: 0;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
height: 12px;
padding: 0;
margin: 0;
background-color: #cccccc;
}
.progress_container_left {
margin-left: 26px;
margin-right: 26px;
}
.progress_container_right {
margin-right: 26px;
margin-left: 26px;
}
.chapter_progress {
position: absolute;
top: 0;
left: 0;
height: 12px;
z-index: 1;
}
.progress_incomplete {
background: #3399ff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#66ccff, #3399ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#66ccff, #3399ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#66ccff, #3399ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#66ccff, #3399ff); /* Standard syntax */
}
.progress_complete {
background: #59f259; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ff80, #59f259); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ff80, #59f259); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ff80, #59f259); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ff80, #59f259); /* Standard syntax */
}
#progress_container_chapter_4, #progress_container_chapter_5,
#progress_container_chapter_10, #progress_container_chapter_11 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
top: 44px;
}
/*#progress_container_chapter_1 {
border-top: 1px solid #7e7e7e;
border-bottom: 1px solid #7e7e7e;
background-color: #eaeaea;
}
#progress_chapter_1 {
width: 0;
background-color: #7e7e7e;
}
#progress_container_chapter_2 {
border-top: 1px solid #3072ff;
border-bottom: 1px solid #3072ff;
background-color: #cdddff;
}
#progress_chapter_2 {
width: 0;
background-color: #3072ff;
}
#progress_container_chapter_3 {
border-top: 1px solid #ff952f;
border-bottom: 1px solid #ff952f;
background-color: #ffe5cc;
}
#progress_chapter_3 {
width: 0;
background-color: #ff952f;
}
#progress_container_chapter_4 {
border-top: 1px solid #1fb12e;
border-bottom: 1px solid #1fb12e;
background-color: #b6f2bc;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
top: 44px;
}
#progress_chapter_4 {
width: 0;
background-color: #1fb12e;
}
#progress_container_chapter_5 {
border-top: 1px solid #ff48a4;
border-bottom: 1px solid #ff48a4;
background-color: #ffe5f2;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
top: 44px;
}
#progress_chapter_5 {
width: 0;
background-color: #ff48a4;
}
#progress_container_chapter_6 {
border-top: 1px solid #05ae8c;
border-bottom: 1px solid #05ae8c;
background-color: #dbfef7;
}
#progress_chapter_6 {
width: 0;
background-color: #05ae8c;
}
#progress_container_chapter_7 {
border-top: 1px solid #7e3eff;
border-bottom: 1px solid #7e3eff;
background-color: #e7dbff;
}
#progress_chapter_7 {
width: 0;
background-color: #7e3eff;
}
#progress_container_chapter_8 {
border-top: 1px solid #fb4844;
border-bottom: 1px solid #fb4844;
background-color: #fecccb;
}
#progress_chapter_8 {
width: 0;
background-color: #fb4844;
}
#progress_container_chapter_9 {
border-top: 1px solid #4396c9;
border-bottom: 1px solid #4396c9;
background-color: #bddaec;
}
#progress_chapter_9 {
width: 0;
background-color: #4396c9;
}
#progress_container_chapter_10 {
border-top: 1px solid #d8ac00;
border-bottom: 1px solid #d8ac00;
background-color: #ffefb1;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
top: 44px;
}
#progress_chapter_10 {
width: 0;
background-color: #d8ac00;
}
#progress_container_chapter_11 {
border-top: 1px solid #009494;
border-bottom: 1px solid #009494;
background-color:#bbffff;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
top: 44px;
}
#progress_chapter_11 {
width: 0;
background-color: #009494;
}*/
/* END CHAPTER PROGRESS BARS */
/* END CHAPTERS */
/* * * * *
* * * * *
END GAME OVERVIEW
* * * * *
* * * * */
/* STEPS */
#steps_container {
position: relative;
width: 100%;
margin: 20px auto;
overflow: hidden;
}
.car_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 36px;
}
.car {
height: 28px;
width: auto;
opacity: 0;
display: none;
position: relative;
-webkit-animation-name: bounceInCar;
animation-name: bounceInCar;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes bounceInCar{
0%{
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50%{
opacity: 0.9;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75%{
opacity: 1;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
100%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceInCar{
0%{
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50%{
opacity: 0.9;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75%{
opacity: 1;
-webkit-transform: scale(0.92);
transform: scale(0.92);
}
100%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#steps_content {
width: 50%;
margin: 0 auto;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
/*LEVEL STEP ITEM*/
.step_item {
position: relative;
width: 10.25%;
margin-right: 2%;
margin-left: 2%;
margin-bottom: 9px;
cursor: default;
}
.step_item_content {
position: relative;
width: 95%;
margin: 0 auto;
border-radius: 50%;
}
.step_item_content:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
outline: none;
opacity: 0;
}
.step_locked .step_item_content {
background: #999999; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#cccccc, #999999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#cccccc, #999999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#cccccc, #999999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#cccccc, #999999); /* Standard syntax */
}
.step_unlocked .step_item_content {
background: #59f259; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#80ff80, #59f259); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#80ff80, #59f259); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#80ff80, #59f259); /* For Firefox 3.6 to 15 */
background: linear-gradient(#80ff80, #59f259); /* Standard syntax */
}
.step_unlocked:hover .step_item_content {
background: #23b223; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#5be55b, #23b223); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5be55b, #23b223); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5be55b, #23b223); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5be55b, #23b223); /* Standard syntax */
}
.step_active .step_item_content {
background: #3399ff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#66ccff, #3399ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#66ccff, #3399ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#66ccff, #3399ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#66ccff, #3399ff); /* Standard syntax */
}
.step_active:hover .step_item_content {
background: #236bb2; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#5bb7e5, #236bb2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5bb7e5, #236bb2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5bb7e5, #236bb2); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5bb7e5, #236bb2); /* Standard syntax */
}
.step_active .step_item_content:after {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
content: '';
background: #66ccff;
pointer-events: none;
z-index: -1;
-webkit-animation: pulse 1.5s linear;
animation: pulse 1.5s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
0% {
opacity: 0.99;
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
50% {
opacity: 0.4;
}
100% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
opacity: 0.1;
}
}
@keyframes pulse {
0% {
opacity: 0.99;
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
50% {
opacity: 0.4;
}
100% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
opacity: 0.1;
}
}
.step_unlocked_inactive {
background: #999999 !important; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#cccccc, #999999) !important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#cccccc, #999999) !important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#cccccc, #999999) !important; /* For Firefox 3.6 to 15 */
background: linear-gradient(#cccccc, #999999) !important; /* Standard syntax */
-webkit-animation-name: wiggle;
-ms-animation-name: wiggle;
-ms-animation-duration: 2500ms;
-webkit-animation-duration: 2500ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
.step_unlocked_inactive:hover {
background: #858585 !important; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#b8b8b8, #858585) !important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#b8b8b8, #858585) !important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#b8b8b8, #858585) !important; /* For Firefox 3.6 to 15 */
background: linear-gradient(#b8b8b8, #858585) !important; /* Standard syntax */
}
@keyframes wiggle {
0% {-webkit-transform: rotate(10deg);}
10% {-webkit-transform: rotate(-10deg);}
20% {-webkit-transform: rotate(20deg);}
30% {-webkit-transform: rotate(-5deg);}
40% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
.step_item_status {
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 4;
}
.step_stars_container {
width: 100%;
text-align: center;
margin-top: 5px;
opacity: 0;
}
.step_star_wrapper {
position: relative;
display: inline-block;
width: 20%;
height: 20px;
overflow: hidden;
}
.step_star {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/*END LEVEL STEP ITEM*/
#next_chapter {
width: 10.25%;
margin-left: 2%;
cursor: default;
}
.next_chapter_content {
position: relative;
width: 95%;
margin: 0;
/*border-radius: 50%;*/
/*outline: 1px solid black;*/
}
/*.next_chapter_content:before {
content: "";
display: block;
padding-top: 100%;
}
.next_chapter_locked .next_chapter_content {
background: #999999;
background: -webkit-linear-gradient(#cccccc, #999999);
background: -o-linear-gradient(#cccccc, #999999);
background: -moz-linear-gradient(#cccccc, #999999);
background: linear-gradient(#cccccc, #999999);
color: var(--text-inverse);
}
.next_chapter_unlocked .next_chapter_content {
background: #3399ff;
background: -webkit-linear-gradient(#66ccff, #3399ff);
background: -o-linear-gradient(#66ccff, #3399ff);
background: -moz-linear-gradient(#66ccff, #3399ff);
background: linear-gradient(#66ccff, #3399ff);
color: var(--text-inverse);
}
.next_chapter_unlocked:hover .next_chapter_content{
background: #236bb2;
background: -webkit-linear-gradient(#5bb7e5, #236bb2);
background: -o-linear-gradient(#5bb7e5, #236bb2);
background: -moz-linear-gradient(#5bb7e5, #236bb2);
background: linear-gradient(#5bb7e5, #236bb2);
}*/
.next_chapter_unlocked:hover {
color: #1873cc;
}
.next_chapter_number {
height: 100%;
}
/*.next_chapter_number {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 56px;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
}*/
.goal_image {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 50%;
}
/* END STEPS */
/* STEP INFO */
#step_info_container {
width: 100%;
padding: 40px 0;
margin-top: 40px;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 2;
}
#step_info_background_overlay {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#step_info {
position: relative;
width: 40%;
margin: 0 auto;
background-color: rgba(var(--background-color-rgb), 0.9);
border-radius: 20px;
padding: 40px 20px 40px 20px;
z-index: 2;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
#step_info a {
text-decoration: none;
color: blue;
}
#step_info a:hover {
color: dodgerblue;
}
#step_info a.coupon_code {
text-decoration: none;
color: blue;
font-weight: 500;
}
#step_info a.coupon_code:hover {
color: dodgerblue;
}
#step_title {
margin: 0 auto 5px auto;
}
#step_subtitle {
margin: 0 auto 25px auto;
}
#step_description {
text-align: center;
}
#step_description ul {
width: 100%;
text-align: left;
padding-left:0;
}
#step_description ul li {
margin-left: 33.33%;
font-size: 1.0em;
margin-bottom: 7px;
list-style-position: outside;
}
#btn_start_step {
margin-top: 25px;
}
.step_info_logo {
width: 50%;
margin-top: -20px;
}
/* END STEP INFO */
#game_control_content {
background: var(--background-whitesmoke);
border-radius: 20px;
padding: 25px;
text-align: center;
}
/* INTRO CAR */
#intro_car_container {
margin-top: 25px;
overflow: hidden;
display: none;
}
#intro_car {
display: inline-block;
position: relative;
width: 500px;
}
#intro_car_base {
width: 100%;
}
#intro_car_chassis {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#intro_car_glow_overlay {
width: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
}
#intro_car_rear_wheel {
width: 61px;
position: absolute;
left: 42px;
bottom: 27px;
}
#intro_car_front_wheel {
width: 59px;
position: absolute;
right: 75px;
bottom: 28px;
}
/* for #intro_car_chassis */
.idle_car {
-webkit-animation: idleCar 0.5s infinite linear;
animation: idleCar 0.5s infinite linear;
}
@-webkit-keyframes idleCar {
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes idleCar {
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-1px);
transform: translateY(-1px);}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.rotate_wheels {
-webkit-animation: rotateWheels 5s ease-in;
animation: rotateWheels 5s ease-in;
}
@-webkit-keyframes rotateWheels {
0%{
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100%{
-webkit-transform: rotateZ(1440deg);
transform: rotateZ(1440deg);
}
}
@keyframes rotateWheels {
0%{
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100%{
-webkit-transform: rotateZ(1440deg);
transform: rotateZ(1440deg);
}
}
/* END INTRO CAR */
/* CONTROL PROGRESS DIAGRAM */
#progress_diagram_container {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/* PROGRESS STEPS */
.step_wrapper {
position: relative;
width: 80px;
height: 80px;
/*border: 1px solid black;*/
}
.step_circle {
width: 72px;
height: 72px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 1;
}
/* END PROGRESS STEPS */
/* END CONTROL PROGRESS DIAGRAM */
/* STEP INFO */
/* END STEP INFO */
/* STARS */
#step_completion_container {
position: fixed;
background-color: rgba(0,0,0,0.75);
display: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: 7;
-webkit-transition: background-color 5s;
transition: background-color 5s;
}
#step_completion_content {
width: 100%;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
left: 0;
}
#step_completion_content h3 {
font-size: 6em;
margin: 20px 0;
font-weight: 900;
letter-spacing: 9px;
cursor: default;
color: white;
text-shadow: 0 0 20px rgba(255,255,255,0.6);
-webkit-animation-name: animationStepCompletionText;
animation-name: animationStepCompletionText;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes animationStepCompletionText {
0%{
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
15%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
85%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes animationStepCompletionText {
0%{
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
15%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
85%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
.step_star_container:nth-child(1){animation-delay: 0.125s;}
.step_star_container:nth-child(2){animation-delay: 0.25s;}
.step_star_container:nth-child(3){animation-delay: 0.375s;}
.step_star_container:nth-child(4){animation-delay: 0.5s;}
.step_star_container:nth-child(5){animation-delay: 0.625s;}
#step_completion_stars_container {
position: relative;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.step_star_container {
width: 200px;
height: 200px;
z-index: 4;
display: none;
opacity: 0;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.star {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.step_star_container.invisible {
opacity: 0 !important;
-webkit-animation-name: unset;
animation-name: unset;
}
@-webkit-keyframes bounceIn{
0%{
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
10%{
opacity: 0.9;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
15%{
opacity: 1;
-webkit-transform: scale(0.89);
transform: scale(0.89);
}
20%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
90%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes bounceIn{
0%{
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
10%{
opacity: 0.9;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
15%{
opacity: 1;
-webkit-transform: scale(0.89);
transform: scale(0.89);
}
20%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
90%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 1;
-webkit-transform: scale(0);
transform: scale(0);
}
}
/* END STARS */
/* ANNOUNCEMENT */
/* STARS */
#announcement_container {
position: fixed;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 12;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#announcement {
font-size: 6.5em;
font-weight: 900;
letter-spacing: 12px;
cursor: default;
color: white;
text-shadow: 0px 0px 25px rgba(255,255,255,0.85),
0px 0px 150px rgba(255,255,255,0.35);
-webkit-animation-name: bounceInAnnouncement;
animation-name: bounceInAnnouncement;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes bounceInAnnouncement {
0%{
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
12.5%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
87.5%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: scale(10);
transform: scale(10);
}
}
/* END ANNOUNCEMENT */
.img_control_wrapper {
width: 100%;
text-align: center;
}
.img_control_fullsize {
width: 100%;
}
.img_control_roadsign {
max-height: 238px;
max-width: 100%;
}
/* END STEP INFO */
/* * * * *
* * * * *
END GAME CONTROL
* * * * *
* * * * */
/* * * * *
* * * * *
* GAME CONTENT *
* * * * *
* * * * */
#game_content {
width: 100%;
display: none;
margin: 40px auto 0 auto;
padding-bottom: 100px;
}
#btn_finish_step, #btn_finish_roadsigns {
width: 25%;
}
#btn_finish_step {
margin-top: 50px;
}
/* * * * * * *
* GAME CONTENT: THEORY *
* * * * * * */
#step_html_container {
width: 50%;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 0;
text-align: left;
}
#step_html_container,
#read_more_container {
line-height: 1.375em;
}
#step_html_container .contents,
#read_more_container .contents {
border-radius: 1em;
border: 1px solid;
padding: 0 0.5em 2em 0.5em;
width: 90%;
}
body.night_mode #step_html_container .contents,
body.night_mode #read_more_container .contents,
body.night_mode #step_html_container .contents ul li,
body.night_mode #read_more_container .contents ul li,
body.night_mode #read_more_container .contents a,
body.night_mode #step_html_container .contents a {
color: var(--text-inverse);
}
#step_html_container h2 {
display: none;
}
#step_html_container .contents ul, #read_more_container .contents ul {
font-weight: bold;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
#step_html_container .contents ul ul, #read_more_container .contents ul ul {
font-weight: normal;
}
#step_html_container .contents ul li, #read_more_container .contents ul li {
font-size: 1.0em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
#step_html_container .contents ul ul li, #read_more_container .contents ul ul li {
font-size: 1em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
#step_html_container .contents h3, #read_more_container .contents h3 {
text-align: center;
}
#step_html_container .contents p, #read_more_container .contents p {
font-size: 1.0em;
}
#step_html_container .equation, #read_more_container .equation {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}
#step_html_container ol, #read_more_container ol {
font-size: 1em;
}
#step_html_container ul, #read_more_container ul {
margin-left: 0em;
}
#step_html_container li, #read_more_container li {
font-size: 1.0em;
margin-left: 0em;
}
#step_html_container a, #read_more_container a {
color: var(--text-default);
}
#step_html_container a:not(.anchor):hover, #read_more_container a:not(.anchor):hover {
color: dodgerblue;
}
#step_html_container table, #read_more_container table {
width: 95%;
border-collapse: collapse;
margin-top: 1em;
}
#step_html_container tr, #read_more_container tr {
vertical-align: top;
}
#step_html_container table, #step_html_container table th, #step_html_container table td,
#read_more_container table, #read_more_container table th, #read_more_container table td {
border-top: 1px dashed silver;
border-bottom: 1px dashed silver;
padding: 1em;
}
#step_html_container table tr h4, #read_more_container table tr h4 {
margin-top: 0;
}
#step_html_container table tr p, #read_more_container table tr p {
margin-top: 0px;
}
#step_html_container table tr img, #read_more_container table tr img {
margin-right: 1em;
}
#step_html_container table img.img_table_illustration,
#read_more_container table img.img_table_illustration {
width: 300px;
}
#step_html_container .headerimage_container,
#read_more_container .headerimage_container {
margin: 2em 0;
}
#step_html_container img.headerimage,
#read_more_container img.headerimage {
display: block;
margin-top: 0.9em;
width: 100%;
height: auto;
}
#step_html_container .headerimage_container em,
#read_more_container .headerimage_container em {
display: block;
background-color: var(--background-whitesmoke);
color: var(--text-lighter);
padding: 0.5em 1em;
font-style: normal;
}
#step_html_container .headerimage_container em a,
#read_more_container .headerimage_container em a {
color: var(--text-lighter);
}
#step_html_container .next, #read_more_container .next {
display: none;
}
/* * * * * * *
END GAME CONTENT: THEORY
* * * * * * */
/* * * * * * *
* GAME CONTENT: QUIZ *
* * * * * * */
#quiz_content {
width: 100%;
margin: auto;
overflow: hidden;
background-color: var(--background-color);
padding: 0 0 80px 0;
}
/* timer graph */
#timer_graph_container {
display: none;
position: relative;
height: 3px;
background-color: #eaeaea;
}
#timer_graph {
height: 100%;
background: #21d350;
width: 0;
}
/* QUIZ QUESTION (center panel) */
#question_container {
width: 40%;
margin: auto;
display: block;
overflow: hidden;
position: relative;
padding: 0;
margin-top: 0;
}
#question_container.timer_graph_visible {
margin-top: 3px;
}
/* Quiz question image*/
#image_container {
padding: 0;
margin: 0;
width: 100%;
position: relative;
overflow: hidden;
background-color: var(--background-color);
}
#question_image {
cursor: default;
}
#question_image.clickable {
cursor: pointer;
}
.quiz_image_jpg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.quiz_image_png {
position: absolute;
max-height: calc(100% - 1em);
max-width: calc(100% - 1em);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding-top: 1em;
}
.dummy{
display: block;
position: relative;
width: 100%;
margin-bottom: -1px;
}
#fullscreen_notification {
position: relative;
color: white;
background: rgba(0,0,0,0.9);
padding: 0.5em;
font-size: 0.875em;
pointer-events: none;
}
#image_container img.icon_fullscreen {
position: absolute;
right: 0.75em;
bottom: 2.5em;
width: 2em;
border-radius: 50%;
padding: 0.25em;
cursor: pointer;
pointer-events: none;
transition: background-color 0.2s ease-out;
}
#image_container img.icon_fullscreen:hover,
#question_image:hover ~ img.icon_fullscreen {
background-color: rgba(1,1,1,0.65);
}
/* VIDEO */
#question_container div.video_container {
display: none;
position: relative;
margin: -2px;
aspect-ratio: 16/9;
}
/* image loader */
.question_image_loader {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 0.5em;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
text-indent: -9999em;
-webkit-animation: image_loader_animation 1.1s infinite ease;
animation: image_loader_animation 1.1s infinite ease;
}
@-webkit-keyframes image_loader_animation {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #1e90ff, 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.5), -1.8em -1.8em 0 0em rgba(30,144,255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.7), 1.8em -1.8em 0 0em #1e90ff, 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.5), 1.8em -1.8em 0 0em rgba(30,144,255, 0.7), 2.5em 0em 0 0em #1e90ff, 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.5), 2.5em 0em 0 0em rgba(30,144,255, 0.7), 1.75em 1.75em 0 0em #1e90ff, 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.5), 1.75em 1.75em 0 0em rgba(30,144,255, 0.7), 0em 2.5em 0 0em #1e90ff, -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.5), 0em 2.5em 0 0em rgba(30,144,255, 0.7), -1.8em 1.8em 0 0em #1e90ff, -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.5), -1.8em 1.8em 0 0em rgba(30,144,255, 0.7), -2.6em 0em 0 0em #1e90ff, -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.5), -2.6em 0em 0 0em rgba(30,144,255, 0.7), -1.8em -1.8em 0 0em #1e90ff;
}
}
@keyframes image_loader_animation {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #1e90ff, 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.5), -1.8em -1.8em 0 0em rgba(30,144,255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.7), 1.8em -1.8em 0 0em #1e90ff, 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.5), 1.8em -1.8em 0 0em rgba(30,144,255, 0.7), 2.5em 0em 0 0em #1e90ff, 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.5), 2.5em 0em 0 0em rgba(30,144,255, 0.7), 1.75em 1.75em 0 0em #1e90ff, 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.5), 1.75em 1.75em 0 0em rgba(30,144,255, 0.7), 0em 2.5em 0 0em #1e90ff, -1.8em 1.8em 0 0em rgba(30,144,255, 0.2), -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.5), 0em 2.5em 0 0em rgba(30,144,255, 0.7), -1.8em 1.8em 0 0em #1e90ff, -2.6em 0em 0 0em rgba(30,144,255, 0.2), -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.5), -1.8em 1.8em 0 0em rgba(30,144,255, 0.7), -2.6em 0em 0 0em #1e90ff, -1.8em -1.8em 0 0em rgba(30,144,255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(30,144,255, 0.2), 1.8em -1.8em 0 0em rgba(30,144,255, 0.2), 2.5em 0em 0 0em rgba(30,144,255, 0.2), 1.75em 1.75em 0 0em rgba(30,144,255, 0.2), 0em 2.5em 0 0em rgba(30,144,255, 0.2), -1.8em 1.8em 0 0em rgba(30,144,255, 0.5), -2.6em 0em 0 0em rgba(30,144,255, 0.7), -1.8em -1.8em 0 0em #1e90ff;
}
}
/* End quiz question image*/
/* Picture question*/
#picture_question_container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: rgba(0, 0, 0, 0.9);
overflow: hidden;
display: none;
z-index: 10001;
animation: bounceIn 0.1s;
}
#picture_question_zoom_wrapper {
position: absolute;
top: 0;
bottom: 3.5em;
left: 0;
right: 0;
overflow-x: auto;
overflow-y: auto;
cursor: grab;
scrollbar-gutter: stable;
}
#picture_question {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
max-width: none;
max-height: none;
/* width/height will be set via JS */
opacity: 0;
transition: opacity 0.1s ease;
}
#fullscreen_picture_controller_container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 3.5em;
background: black;
z-index: 10002;
}
#btn_exit_fullscreen_picture {
z-index: 10002;
position: absolute;
left: 50%;
bottom: 0.6125em;
transform: translateX(-50%);
width: auto;
height: auto;
display: flex;
align-items: center;
padding: 0.75em 1.5em;
white-space: nowrap;
}
#btn_exit_fullscreen_picture span {
margin-right: 0.75em;
font-size: 1.25em;
}
#btn_exit_fullscreen_picture img.icon {
height: 1.5em;
width: auto;
}
#picture_question_zoom_slider {
position: absolute;
bottom: 1.375em;
right: 2em;
width: 12em;
z-index: 10002;
margin-bottom: 0;
}
/* End picture question */
/* ANIMATIONS */
@keyframes bouncePictureIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes bouncePictureIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
}
}
/* End picture question */
/* The question */
#puzzle_alts_container {
position:relative;
padding: 0;
margin: 0;
}
#question_puzzle {
width: 100%;
min-height: 100px;
padding-top: 1em;
padding-bottom: 1em;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
pointer-events: none;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
/* developer mode only */
#question_answer {
background-color: #f81b84;
color: white;
text-align: left;
margin: 0.5em 0;
padding: 0.5em 1em;
border-radius: 0.5em;
display: none;
}
/* * * * * * * * *
ANSWER ALTERNATIVE BUTTONS
* * * * * * * * */
.answer_alts_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
.answer_alternative {
width: 49%;
min-height: 100px;
border: 1px solid lightgrey;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
background: var(--background-whitesmoke);
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.answer_alternative:hover {
background: var(--hover-grey);
}
.answer_alternative_clicked {
width: 49%;
min-height: 100px;
border: 1px solid dodgerblue;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #80c3ff;
background: -webkit-gradient(linear, left top, left bottom, from(#80c3ff), to(#55a9f2));
background: -webkit-linear-gradient(#80c3ff, #55a9f2);
background: -moz-linear-gradient(#80c3ff, #55a9f2);
background: -ms-linear-gradient(#80c3ff, #55a9f2);
background: -o-linear-gradient(#80c3ff, #55a9f2);
background: linear-gradient(#80c3ff, #55a9f2); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-animation: buttonArrive 0.3s;
animation: buttonArrive 0.3s;
}
/*This is the same as .answer_alternative_clicked but without animation*/
.answer_alternative_selected {
width: 49%;
min-height: 100px;
border: 1px solid dodgerblue;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #80c3ff;
background: -webkit-gradient(linear, left top, left bottom, from(#80c3ff), to(#55a9f2));
background: -webkit-linear-gradient(#80c3ff, #55a9f2);
background: -moz-linear-gradient(#80c3ff, #55a9f2);
background: -ms-linear-gradient(#80c3ff, #55a9f2);
background: -o-linear-gradient(#80c3ff, #55a9f2);
background: linear-gradient(#80c3ff, #55a9f2); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.answer_alternative_inert {
width: 49%;
min-height: 100px;
border: 1px solid lightgrey;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
background: -webkit-linear-gradient(#fafafa, #eeeeee);
background: -moz-linear-gradient(#fafafa, #eeeeee);
background: -ms-linear-gradient(#fafafa, #eeeeee);
background: -o-linear-gradient(#fafafa, #eeeeee);
background: linear-gradient(#fafafa, #eeeeee); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.answer_alternative_correct {
width: 49%;
min-height: 100px;
border: 1px solid lightgrey;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #80ff80;
background: -webkit-gradient(linear, left top, left bottom, from(#80ff80), to(#59f259));
background: -webkit-linear-gradient(#80ff80, #59f259);
background: -moz-linear-gradient(#80ff80, #59f259);
background: -ms-linear-gradient(#80ff80, #59f259);
background: -o-linear-gradient(#80ff80, #59f259);
background: linear-gradient(#80ff80, #59f259); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/* The same as .answer_alternative_correct but with an intro animation */
.answer_alternative_clicked_correct {
width: 49%;
min-height: 100px;
border: 1px solid lightgrey;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #80ff80;
background: -webkit-gradient(linear, left top, left bottom, from(#80ff80), to(#59f259));
background: -webkit-linear-gradient(#80ff80, #59f259);
background: -moz-linear-gradient(#80ff80, #59f259);
background: -ms-linear-gradient(#80ff80, #59f259);
background: -o-linear-gradient(#80ff80, #59f259);
background: linear-gradient(#80ff80, #59f259); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-animation: buttonArrive 0.3s;
animation: buttonArrive 0.3s;
}
.answer_alternative_incorrect {
width: 49%;
min-height: 100px;
border: 1px solid lightgrey;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #ff6666;
background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#f34d4d));
background: -webkit-linear-gradient(#ff6666, #f34d4d);
background: -moz-linear-gradient(#ff6666, #f34d4d);
background: -ms-linear-gradient(#ff6666, #f34d4d);
background: -o-linear-gradient(#ff6666, #f34d4d);
background: linear-gradient(#ff6666, #f34d4d); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/* Same as .answer_alternative_incorrect but with an intro animation */
.answer_alternative_clicked_incorrect {
width: 49%;
min-height: 100px;
border: 1px solid lightgrey;
border-radius: 10px;
outline: 0;
padding-right: 5px;
margin-bottom: 15px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #ff6666;
background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#f34d4d));
background: -webkit-linear-gradient(#ff6666, #f34d4d);
background: -moz-linear-gradient(#ff6666, #f34d4d);
background: -ms-linear-gradient(#ff6666, #f34d4d);
background: -o-linear-gradient(#ff6666, #f34d4d);
background: linear-gradient(#ff6666, #f34d4d); /* Standard syntax */
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-animation: buttonArrive 0.3s;
animation: buttonArrive 0.3s;
}
body.night_mode .answer_alternative_correct,
body.night_mode .answer_alternative_clicked_correct,
body.night_mode .answer_alternative_incorrect,
body.night_mode .answer_alternative_clicked_incorrect,
body.night_mode .answer_alternative_clicked,
body.night_mode .answer_alternative_selected,
body.night_mode .answer_alternative_inert {
filter: brightness(0.9);
color: var(--text-inverse);
}
.alt_identifier {
width: 15%;
font-size: 2.0em;
font-weight: bold;
pointer-events: none;
/* Force GPU rendering */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.alt_text {
width: 85%;
font-size: 1.0em;
text-align: left;
pointer-events: none;
overflow-wrap: break-word; /* Hyphenation. Hyphenate long words on supported browsers, and words break on others */
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/* End answer alternatives */
/* QUIZ MOBILE NAVIGATION */
#quiz_mobile_navigation_bar {
margin-top: 1.25em;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button {
width: calc(50% - 0.75em);
padding: 1.5em 0;
border-radius: 0.5em;
border: none;
background-color: #45a3ff;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button.disabled {
opacity: 0.5;
cursor: default;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button.disabled,
#quiz_mobile_navigation_bar button.mobile_navigation_button:active {
-webkit-box-shadow: none;
box-shadow: none;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button:not(.disabled):active {
filter: brightness(0.9);
}
#quiz_mobile_navigation_bar button.mobile_navigation_button span.navigation_button_label {
color: var(--text-inverse);
font-weight: 500;
font-size: 1rem;
}
body.night_mode #quiz_mobile_navigation_bar button.mobile_navigation_button span.navigation_button_label {
color: var(--text-default);
}
#quiz_mobile_navigation_bar button.mobile_navigation_button img.navigation_button_icon {
height: 2em;
padding: 0.25em;
border: 1px solid white;
border-radius: 50%;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button img.navigation_button_icon.left {
margin-right: 1em;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button img.navigation_button_icon.right {
margin-left: 1em;
}
/* END QUIZ MOBILE NAVIGATION */
/* * * * * *
* END QUIZ QUESTION
* * * * * */
/* * * * * * * *
OVERVIEW
* * * * * * * * */
/* --------------------------------
"CD PANEL", left slider panel
-------------------------------- */
.cd-panel {
position: fixed;
top: 60px;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
z-index: 100;
}
.cd-panel::after {
/* overlay layer */
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
@-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
@keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
@-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
@keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.cd-panel-header {
position: relative;
width: 90%;
height: 80px;
line-height: 80px;
background-color: var(--background-color);
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
border-bottom: 2px solid black;
}
.cd-panel-header h3 {
font-size: 1.5em;
position: absolute;
margin-top: 0;
margin-bottom: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-default);
padding-left: 5%;
}
.cd-panel-header a {
background: rgba(0, 0, 0, 0.0);
}
.cd-panel-header a:hover {
background: rgba(0, 0, 0, 0.0);
}
.from-right .cd-panel-header, .from-left .cd-panel-header {
top: -100px;
}
.from-right .cd-panel-header {
right: 0;
}
.from-left .cd-panel-header {
left: 0;
top: -80px;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
.cd-panel-close {
position: absolute;
top: 15px;
right: 0;
height: 100%;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
content: '';
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: var(--text-default);
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-panel-container {
position: absolute;
width: 90%;
height: 100%;
top: 80px;
background-color: var(--background-color);
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
box-shadow: 20px 0px 30px rgba(0, 0, 0, 0.5);
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
@media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
.cd-panel-header {
width: 70%;
}
}
@media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 29%;
}
.cd-panel-header {
width: 29%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 0px;
padding-bottom: 60px;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
/* END CD PANEL */
/* OVERVIEW ITEMS */
.overview_item {
/* Flexbox for vertical centering */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
cursor: default;
/* End flexbox */
width: 100%;
height: 80px;
overflow: hidden;
border-bottom: 1px solid #ccc;
padding: 10px;
background: #7f7f7f; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#7f7f7f, #565656); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#7f7f7f, #565656); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#7f7f7f, #565656); /* For Firefox 3.6 to 15 */
background: linear-gradient(#7f7f7f, #565656); /* Standard syntax */
font-weight: normal;
}
.overview_item:hover {
background: var(--background-whitesmoke);
}
body.night_mode .overview_item:hover {
background: #aaa;
}
.overview_item:hover span {
color: var(--text-default);
text-align: left;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.night_mode .overview_item:hover span {
color: var(--text-inverse);
}
.overview_item:hover .number_circle {
border: 2px solid var(--text-default);
}
.overview_item:hover div {
color: var(--text-default);
}
.overview_item span {
color: var(--text-inverse);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.overview_item img {
height: 30px;
padding-right: 10px;
}
.overview_item_clicked {
/* Flexbox for vertical centering */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
cursor: default;
/* End flexbox */
width: 100%;
height: 80px;
padding: 10px;
background: #cccccc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#cccccc, #cccccc); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#cccccc, #cccccc); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#cccccc, #cccccc); /* For Firefox 3.6 to 15 */
background: linear-gradient(#cccccc, #cccccc); /* Standard syntax */
font-weight: normal;
}
.overview_item_clicked span {
color: var(--text-default);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.night_mode .overview_item_clicked span {
color: var(--text-inverse);
}
.overview_item_inactive {
/* Flexbox for vertical centering */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
text-align: left;
cursor: default;
/* End flexbox */
width: 100%;
height: 80px;
overflow: hidden;
border-bottom: 1px solid #ccc;
padding: 10px;
/* fallback */
background-color: #7eff7d;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7eff7d), to(#41e93a));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #7eff7d, #41e93a);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #7eff7d, #41e93a);
/* IE 10 */
background: -ms-linear-gradient(top, #7eff7d, #41e93a);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #7eff7d, #41e93a);
color: var(--text-default);
font-weight: normal;
}
.overview_item_inactive div, .overview_item_inactive span, .overview_item_inactive img {
}
/* CIRCLED NUMBERS, USED IN OVERVIEW */
.number_circle_wrapper {
width: 35px;
height: 35px;
min-width:35px;
min-height: 35px;
margin-right: 20px;
position: relative;
display: inline-block;
}
.number_circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border: 2px solid white;
color: var(--text-inverse);
}
body.night_mode .number_circle {
color: var(--text-default);
}
.number_circle_label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
font-weight: 500;
}
.number_circle_selected {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
}
body.night_mode .number_circle_selected .number_circle_label {
color: black;
}
.number_circle_answered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background-color: var(--background-color);
border: 2px solid white;
}
.number_circle_answered_selected {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background-color: var(--background-color);
border: 2px solid black;
}
.number_circle_correct {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
/* fallback */
background-color: #7eff7d;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7eff7d), to(#41e93a));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #7eff7d, #41e93a);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #7eff7d, #41e93a);
/* IE 10 */
background: -ms-linear-gradient(top, #7eff7d, #41e93a);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #7eff7d, #41e93a);
}
.number_circle_incorrect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
/* fallback */
background-color: #ff6565;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f34d4d), to(#ff6565));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff6565, #f34d4d);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6565, #f34d4d);
/* IE 10 */
background: -ms-linear-gradient(top, #ff6565, #f34d4d);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6565, #f34d4d);
}
/* END CIRCLED NUMBERS */
/* * * * * * * *
END OVERVIEW (left panel)
* * * * * * * * */
/* * * * * * * *
QUESTION EXPLANATION
* * * * * * * * */
#question_explanation_container {
width: 100%;
margin: 3em auto 0 auto;
padding: 0;
overflow: hidden;
text-align: left;
vertical-align: top;
}
#question_explanation_container h3 {
font-size: 1.25em;
margin: 0;
margin-bottom: 20px;
pointer-events: none;
position: relative;
}
#question_explanation_content {
position: relative;
padding: 0;
text-align: left;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
font-size: 1.0em;
}
#question_explanation_content * {
font-size: 1.0em;
}
#question_explanation_content img {
max-width: 100%;
}
#question_explanation_content div.headerimage_container {
position: relative;
margin: 1.5em 0;
}
#question_explanation_content div.headerimage_container img {
display: block;
width: 100%;
}
#question_explanation_content div.headerimage_container img.roadsign {
display: block;
width: auto;
max-height: 12em;
max-width: min(25em, 100%);
}
#question_explanation_content div.headerimage_container p.caption {
position: relative;
background-color: var(--background-whitesmoke);
color: var(--text-lighter);
width: 100%;
padding: 0.75em 1em;
font-size: 0.95em;
margin: 0;
}
#question_explanation_content div.headerimage_container.roadsign p.caption {
background-color: var(--background-color);
color: var(--text-default);
font-style: italic;
margin: 0.75em 0 2em 0;
padding: 0;
}
.readmore {
background-color: #fff0b2;
margin-top: 30px;
width: 100%;
padding: 10px;
border-radius: 10px;
border: 1px solid;
border-color: #f0d500;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
div.rm_icon {
padding-right: 25px;
}
div.rm_icon img {
width: 60px;
}
div.rm_text {
}
div.rm_text p {
font-size: 1em;
color: #665a29;
}
div.rm_text p a {
/*color: #ffba00;*/
/*font-weight: bold;*/
font-size: 1em;
color: #665a29;
}
div.rm_text a:hover {
color: dodgerblue;
}
/* * * * * * * *
END QUESTION EXPLANATION
* * * * * * * * */
/* * * * * * * *
QUIZ - READ MORE
* * * * * * * * */
#read_more_container {
width: 45%;
margin: auto;
padding-top: 1px;
padding-bottom: 100px;
text-align: center;
}
#read_more_content {
text-align: left;
margin-bottom: 50px;
}
/* * * * * * * *
END QUIZ READ MORE
* * * * * * * * */
/* * * * * * * *
REPORT QUESTION
* * * * * * * * */
#report_question_container {
width: 40%;
margin: 20px auto 20px auto;
padding: 2em 0 0 0;
overflow: hidden;
background-color: var(--background-color);
text-align: left;
display: none;
}
#report_question_container h3 {
font-size: 1.25em;
}
#report_question_container p, #report_question_container ul, #report_question_container li {
font-size: 1.0em;
}
#report_question_container img {
max-width: 100%;
}
/* report question & game feedback form */
#report_question_form, #game_feedback_form {
padding-top: 20px;
}
#report_question_form label, #game_feedback_form label {
display: block;
margin: 10px 0;
}
#report_question_form input, #game_feedback_form input {
width: 100%;
padding: 15px;
margin-bottom: 10px;
border-radius: 10px;
outline: none;
border: 1px solid silver;
}
#report_question_form textarea, #game_feedback_form textarea {
font-family: 'Roboto', sans-serif;
width: 100%;
height: 150px;
border-radius: 10px;
padding: 15px;
outline: none;
border: 1px solid silver;
margin-bottom: 20px;
}
body.night_mode #report_question_form input,
body.night_mode #game_feedback_form input,
body.night_mode #report_question_form textarea,
body.night_mode #game_feedback_form textarea {
background-color: var(--background-whitesmoke);
color: var(--text-default);
}
#report_question_form input:focus, #report_question_form textarea:focus,
#game_feedback_form input:focus, #game_feedback_form textarea:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
#report_question_form .submit_button, #game_feedback_form .submit_button {
width: 100%;
margin-top: 25px;
}
.report_question_comments, .game_feedback_comments {
width: 90%;
font-family: 'Roboto', sans-serif;
width: 100%;
height: 160px;
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
outline: none;
border: 1px solid silver;
}
.report_question_comments:focus, .game_feedback_comments:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
#post_report_question_container {
margin-top: 2em;
border: 1px solid silver;
padding: 2em;
border-radius: 1em;
background-color: var(--background-whitesmoke);
}
#title_comments_thank_you, #game_feedback_thank_you {
font-size: 1.0em;
color: var(--text-default);
}
#title_comments_thank_you {
margin-top: 0;
}
#btn_post_report_question_exit {
text-align: center;
margin-top: 2.5em;
}
/* * * * * * * *
END REPORT QUESTION
* * * * * * * * */
/* * * * * * * *
QUIZ RESULTS
* * * * * * * * */
#quiz_results_container {
width: 100%;
overflow: hidden;
padding: 0;
}
#results_overview_container {
width: 100%;
text-align: center;
padding: 16em 0;
margin-bottom: 1.5em;
background-image: url(/images/img_failed.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
#results_icon {
height: 7em;
margin-right: 2em;
}
#results_grade {
font-weight: bold;
color: var(--text-inverse);
font-size: 6em;
text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
body.night_mode #results_grade {
color: var(--text-default);
}
#results {
width: 40%;
background-color: var(--background-color);
margin: auto;
text-align: left;
margin-bottom: 3.5em;
}
.grade_incoming{
width: 50%;
-webkit-animation: fallIn 1.5s;
animation: fallIn 1.5s;
}
/* TEST RESULT GRAPHS */
.result_wrapper {
width:100%;
background: var(--background-whitesmoke);
border-radius: 20px;
padding: 25px;
margin-bottom: 20px;
overflow: hidden;
}
.results_graph_container {
/* Flexbox for vertical centering */
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
/* End flexbox */
width: 50%;
height:100%;
text-align: center;
}
.chart_container {
position: relative;
width: 100%;
}
.result_chart {
height: 160px;
z-index: 1;
}
.chart_percentage {
position: absolute;
top: 50%;
left: 50%;
color: var(--text-default);
transform: translate(-50%, -50%);
z-index: 2;
}
#graphs_titles {
width: 100%;
text-align: center;
}
div.results_section_header {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
margin: 2.5em 0 1em 0;
}
div.results_section_header img.header_icon {
height: 1.5em;
margin-right: 1.0em;
}
div.results_section_header h3.results_graph_title {
margin: 0.125em 0 0 0;
padding: 0;
color: var(--text-lighter);
font-weight: 500;
font-size: 1.375em;
}
h3.results_graph_title_centered {
width: 50%;
margin-top: 1em;
}
div.results_graph_description {
color: var(--text-lighter);
margin-top: 0.75em;
}
/* END TEST RESULT GRAPHS */
/* TEST RESULT TIME */
#results_time_container {
width:100%;
border-bottom: 1px solid black;
overflow: hidden;
padding-top: 15px;
padding-bottom: 15px;
background-color: var(--background-color);
}
.results_time_wrapper {
/* Flexbox for vertical centering */
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/* End flexbox */
width: 50%;
height:100%;
padding: 0;
text-align: center;
}
.quiz_time {
font-weight: bold;
}
/* END TEST RESULT TIME */
#results_categories_container {
}
/* category progressbars */
.category_results_container {
position: relative;
margin: 15px auto;
width: 100%;
height: 35px;
}
.results_progressbar_container {
position: relative;
margin-left: auto;
width: 100%;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
background: #ff6666;
border-radius: 15px;
}
.results_progressbar {
width: 0%;
height: 100%;
border-radius: 15px;
background: #7fff7e; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#7fff7e, #36e52e); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#7fff7e, #36e52e); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#7fff7e, #36e52e); /* For Firefox 3.6 to 15 */
background: linear-gradient(#7fff7e, #36e52e); /* Standard syntax */
}
.results_progressbar_text {
position: absolute;
top: 50%;
left: 25px;
transform: translate(0, -50%);
}
/* RESULT BUTTONS */
#result_buttons_container,
#question_marking_buttons {
padding: 2em 2em 0.5em 2em;
margin-bottom: 1.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.marking_question_item {
position: relative;
width: 8%;
margin: 0 1% 0.75em 1%;
}
.marking_question_item .result_button_wrapper {
position: relative;
width: 100%;
}
.marking_question_item .result_button_wrapper:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.marking_question_item .result_button {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
cursor: pointer;
z-index: 0;
}
.marking_question_item .result_button.selected:after {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
content: '';
pointer-events: none;
z-index: -1;
-webkit-animation: pulse 1.5s linear;
animation: pulse 1.5s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.marking_question_item .result_button.incorrect.selected:after {
background-color: #f34d4d;
}
.marking_question_item .result_button.correct.selected:after {
background-color: #41e93a;
}
.marking_question_item .result_button.unanswered.selected:after {
background-color: #cbcbcb;
}
@-webkit-keyframes pulse {
0% {
opacity: 0.99;
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
50% {
opacity: 0.4;
}
100% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
opacity: 0.1;
}
}
@keyframes pulse {
0% {
opacity: 0.99;
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
50% {
opacity: 0.4;
}
100% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
opacity: 0.1;
}
}
.unanswered {
/* fallback */
background-color: #dadada;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cbcbcb), to(#dadada));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #dadada, #cbcbcb);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #dadada, #cbcbcb);
/* IE 10 */
background: -ms-linear-gradient(top, #dadada, #cbcbcb);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #dadada, #cbcbcb);
}
.unanswered:hover {
/* fallback */
background-color: #858585;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#858585), to(#dadada));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #dadada, #858585);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #dadada, #858585);
/* IE 10 */
background: -ms-linear-gradient(top, #dadada, #858585);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #dadada, #858585);
}
.correct {
/* fallback */
background-color: #7eff7d;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7eff7d), to(#41e93a));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #7eff7d, #41e93a);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #7eff7d, #41e93a);
/* IE 10 */
background: -ms-linear-gradient(top, #7eff7d, #41e93a);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #7eff7d, #41e93a);
}
.correct:hover {
/* fallback */
background-color: #10930a;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7eff7d), to(#10930a));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #7eff7d, #10930a);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #7eff7d, #10930a);
/* IE 10 */
background: -ms-linear-gradient(top, #7eff7d, #10930a);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #7eff7d, #10930a);
}
.incorrect {
/* fallback */
background-color: #ff6565;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f34d4d), to(#ff6565));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff6565, #f34d4d);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6565, #f34d4d);
/* IE 10 */
background: -ms-linear-gradient(top, #ff6565, #f34d4d);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6565, #f34d4d);
}
.incorrect:hover {
/* fallback */
background-color: #ff6565;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b21010), to(#ff6565));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff6565, #b21010);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6565, #b21010);
/* IE 10 */
background: -ms-linear-gradient(top, #ff6565, #b21010);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6565, #b21010);
}
.marking_question_item .result_button .result_button_label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-lighter);
pointer-events: none;
font-weight: normal;
z-index: 1;
}
body.night_mode .marking_question_item .result_button .result_button_label {
color: var(--text-inverse);
}
.marking_question_item .result_button.selected .result_button_label,
.marking_question_item .result_button:hover .result_button_label{
color: var(--text-default);
font-weight: bold;
}
.marking_question_item .saved_status_indicator {
position: relative;
height: 1.0em;
margin-top: 0.25em;
text-align: center;
}
.marking_question_item .saved_status_indicator img.saved {
height: 100%;
}
/* RESULT BUTTONS */
/* TAG BUTTONS */
#results_tags_content_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em 2em;
}
#results_tags_content_container button.tag_item_button {
cursor: pointer;
padding: 0.75em;
border-radius: 0.5em;
border: none;
margin: 0.375em;
outline: none;
color: var(--text-inverse);
background-color: #8e8e93;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
body.night_mode #results_tags_content_container button.tag_item_button {
filter: brightness(0.85);
color: var(--text-default);
}
#results_tags_content_container button.tag_item_button:hover {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
/* RESULTS STARS */
#result_stars_container {
position: relative;
width: 100%;
}
#result_stars_container img {
width: 10%;
}
/* END RESULTS STARS */
/* QUIZ RESULT ACTION BUTTONS */
#btn_restart_quiz {
margin-bottom: 25px;
}
#exit_marking {
margin-top: 30px;
}
/* * * * * * * *
END QUIZ RESULTS
* * * * * * * * */
/* * * * * * *
END GAME CONTENT: QUIZ *
* * * * * * */
/* * * * * * *
GAME CONTENT: ROADSIGNS *
* * * * * * */
#step_roadsigns_container {
width: 40%;
margin: 0 auto;
padding: 0 0 300px 0;
text-align: center;
}
#roadsign_image {
max-height: 200px;
max-width: 66.66%;
margin-top: 2em;
margin-bottom: 2em;
}
#roadsign_title {
margin-top: 0;
margin-bottom: 1.5em;
}
#btn_finish_roadsigns {
display: block;
width: 50%;
margin-top: 50px;
}
/* * * * * * * *
END GAME CONTENT: ROADSIGNS *
* * * * * * * */
/* TUTORIAL */
#quiz_tutorial_container, #game_tutorial_container {
position: fixed;
background: rgba(0,0,0,0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 13;
display: none;
}
#exit_tutorial_container {
position: fixed;
left: 0;
top: 60px;
right: 0;
height: 3em;
background-color: var(--background-color);
display: none;
z-index: 100000;
}
#exit_tutorial_container .exit_tutorial_button_wrapper {
height: 100%;
width: 100%;
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
#exit_tutorial_container .exit_tutorial_button_wrapper button.btn_exit_tutorial {
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
border-radius: 0.5em;
padding: 0.5em 1.5em;
width: unset;
}
#exit_tutorial_container .exit_tutorial_button_wrapper button.btn_exit_tutorial span {
font-weight: 500;
font-size: 1.125em;
margin-right: 1em;
}
#exit_tutorial_container .exit_tutorial_button_wrapper button.btn_exit_tutorial img {
height: 1.5em;
}
.tutorial_item {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
font-weight: 500;
cursor: default;
color: white;
font-size: 1.5em;
line-height: 1.25em;
text-align: left;
text-shadow:
0px 0px 10px rgba(0, 0, 0, 1),
0px 0px 20px rgba(0, 0, 0, 1),
0px 0px 30px rgba(0, 0, 0, 0.5);
}
#quiz_tutorial_item_1 {
max-width: 600px;
}
#quiz_tutorial_item_2 {
max-width: 600px;
}
#quiz_tutorial_item_3 {
position: absolute;
right: 50px;
width: 100%;
text-align: right;
}
#quiz_tutorial_mobile_item_3 {
position: absolute;
right: 2em;
width: 100%;
text-align: right;
}
#game_tutorial_item_1 {
position: absolute;
top: 180px;
left: 20%;
max-width: 500px;
}
.tutorial_target {
opacity: 0;
font-size:0.1em;
pointer-events: none;
margin-right: 5px;
}
#quiz_tutorial_target_1 {
display: block;
margin-left: 40px;
}
#quiz_tutorial_target_2 {
margin-top: 0;
}
#quiz_tutorial_target_3 {
margin-top: -10px;
}
.on_top {
z-index: 3000;
}
#question_explanation_title.up_front {
z-index: 3000;
color: var(--text-inverse);
}
#question_explanation_content.up_front {
background-color: var(--background-color);
color: var(--text-default);
z-index: 3000;
border-radius: 1em;
padding: 1em 2em;
border: 3px solid dodgerblue !important;
-webkit-box-shadow: 0 4px 3px rgba(0,0,0,0.35);
box-shadow: 0 4px 3px rgba(0,0,0,0.35);
}
.animate_tutorial_link {
pointer-events: none !important;
-webkit-animation-name: animateTutorialLink;
animation-name: animateTutorialLink;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 0;
animation-delay: 0;
}
@-webkit-keyframes animateTutorialLink {
0% {
color: #665a29;
z-index: 3000;
}
100% {
color: #665a29;
z-index: 3000;
}
}
@keyframes animateTutorialLink {
0% {
color: #665a29;
z-index: 3000;
}
/*50% {
color: #665a29;
}
62.5% {
color: dodgerblue;
}
75% {
color: #665a29;
}
87.5% {
color: dodgerblue;
}*/
100% {
color: #665a29;
z-index: 3000;
}
}
.focus_arrow:hover {
background: transparent !important;
}
.animate_tutorial_arrow {
-webkit-filter: invert(100%);
filter: invert(100%);
-webkit-animation-name: animateTutorialArrow;
animation-name: animateTutorialArrow;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes animateTutorialArrow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animateTutorialArrow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* END TUTORIAL */
/* * * * *
* * * * *
END GAME CONTENT
* * * * *
* * * * */
/* GAME FEEDBACK */
#game_feedback {
width: 40%;
margin: 0 auto;
display: none;
text-align: left;
padding-top: 70px;
}
#game_feedback_content {
padding-bottom: 120px;
}
#game_feedback_result {
padding-bottom: 300px;
}
/* GAME RATING */
.rating {
margin-top: -10px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.rating span {
position:relative;
}
.rating span input {
position:absolute;
top:0;
left:0px;
opacity:0;
}
.rating span label {
display:inline-block;
width:64px;
height:64px;
color: transparent;
background:url("/graphics/ic_star_negative.png");
background-repeat: no-repeat;
background-size: contain;
margin-right:8px;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
background:url("/graphics/ic_star_positive.png");
background-repeat: no-repeat;
background-size: contain;
}
/* END GAME RATING */
/* END GAME FEEDBACK */
/* LOADING SCREEN*/
#game_splash {
width: 100%;
height: 100%;
position: relative;
top: -35px;
left: 0;
background-color: rgba(255,255,255,1);
z-index: 99;
}
body.night_mode #game_splash {
background-color: #666;
}
#game_splash_content {
position: absolute;
top: 80px;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#game_splash_logo {
display: block;
width: 800px;
margin: 0 auto 60px auto;
}
#game_loading {
position: relative;
}
#exit_splash_screen {
opacity: 0;
padding: 20px 80px !important;
}
/* LOADING PROGRESS BAR */
#loader_container_black {
display: block;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
.sk_fading_circle_black {
margin: 0 auto;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#loading_progress_bar {
position: relative;
height: 50px;
}
#exit_loading_screen {
}
/* END LOADING SCREEN*/
/* ACHIEVEMENTS */
#game_achievement_container {
position: fixed;
left: 0;
right: 0;
top: -2em;
z-index: 12;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
transition: top 0.5s ease-out;
}
#game_achievement_container.visible {
top: 9em;
}
#game_achievement_container .game_achievement_content {
position: relative;
width: 25em;
max-width: calc(100% - 1em);
padding: 0.375em 1.5em;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5edf4d), to(#06b602));
background-image: -o-linear-gradient(#5edf4d, #06b602);
background-image: linear-gradient(#5edf4d, #06b602);
border: 2px solid #0f7701;
border-radius: 1.25em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.5);
box-shadow: 0 3px 6px rgba(0,0,0,0.5);
cursor: pointer;
}
#game_achievement_container .game_achievement_content div.medal_container {
position: relative;
height: 3.5em;
margin-right: 1.5em;
z-index: 2;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#game_achievement_container .game_achievement_content div.medal_container img.medal {
height: 100%;
-webkit-filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.75));
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.75));
}
#game_achievement_container .game_achievement_content div.medal_container img.medal.medal_grow {
-webkit-animation: medalGrow 8s linear 0s 1 normal;
animation: medalGrow 8s linear 0s 1 normal;
}
#game_achievement_container .game_achievement_content .achievement_info_container {
font-family: 'Raleway', sans-serif;
text-align: left;
color: #0c6200;
z-index: 2;
}
#game_achievement_container .game_achievement_content .achievement_info_container .info_title {
display: none;
font-weight: bold;
font-size: 1.5em;
text-align: left;
color: rgba(0,0,0,0.6);
text-shadow: 0px 0px 6px rgba(255,255,255,0.75);
}
#game_achievement_container .game_achievement_content .achievement_info_container .info_message {
display: none;
font-weight: bold;
font-size: 1.125em;
text-shadow: 0px 0px 6px rgba(255,255,255,0.75);
}
#game_achievement_container .game_achievement_content .achievement_starshine,
#confirmBox .medal_starshine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
#game_achievement_container .game_achievement_content .achievement_starshine .shine,
#confirmBox .medal_starshine .shine {
display: block;
position: absolute;
top: 50%;
left: 50%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAMAAACJuGjuAAADAFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/LkhhAAAA/3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1O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);
background-repeat: no-repeat;
background-position:center;
background-size: 100% 100%;
overflow: hidden;
z-index: 2;
color: transparent;
opacity: 0.0;
-webkit-animation: glitter 2s linear 0s 1 normal;
animation: glitter 2s linear 0s 1 normal;
}
#game_achievement_container .game_achievement_content .achievement_starshine .shine.small,
#confirmBox .medal_starshine .shine.small {
width: 15px;
height: 15px;
}
#game_achievement_container .game_achievement_content .achievement_starshine .shine.medium,
#confirmBox .medal_starshine .shine.medium {
width: 25px;
height: 25px;
}
#game_achievement_container .game_achievement_content .achievement_starshine .shine.large,
#confirmBox .medal_starshine .shine.large {
width: 30px;
height: 30px;
}
#game_achievement_container .game_achievement_content .achievement_starshine .shine.larger,
#confirmBox .medal_starshine .shine.larger {
width: 40px;
height:40px;
}
#game_achievement_container .game_achievement_content .achievement_starshine .shine.x-large,
#confirmBox .medal_starshine .shine.x-large {
width: 60px;
height:60px;
}
/*CSS3 keyframes for medal grow effect */
@-webkit-keyframes medalGrow {
0% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
/*CSS3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
0% {
-webkit-transform: scale(0.3) rotate(0deg);
opacity: 0;
}
50% {
-webkit-transform: scale(1) rotate(360deg);
opacity: 1;
}
100% {
-webkit-transform: scale(0.3) rotate(720deg);
opacity: 0;
}
}
/* OVERVIEW ACHIEVEMENTS */
#game_overview_medals_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#game_overview_medals_container .achievement_item {
width: calc(20% - 0.5em);
margin: 0 0.5em 0 0;
padding: 1em 0.5em;
cursor: pointer;
border-radius: 0.5em;
}
#game_overview_medals_container .achievement_item.locked {
}
#game_overview_medals_container .achievement_item:hover {
background-color: var(--text-lighter);
}
body.night_mode #game_overview_medals_container .achievement_item:hover {
background-color: var(--hover-grey);
}
#game_overview_medals_container .achievement_item div.medal_title {
color: var(--text-lighter);
font-weight: 500;
font-size: 1em;
margin-bottom: 0.75em;
}
#game_overview_medals_container .achievement_item:not(.locked):hover div.medal_title {
color: white;
}
#game_overview_medals_container .achievement_item.locked div.medal_title {
color: grey;
}
#game_overview_medals_container .achievement_item.locked:hover div.medal_title {
color: #ccc;
}
#game_overview_medals_container .achievement_item img.medal {
transition: all .2s ease-in-out;
}
#game_overview_medals_container .achievement_item:not(.locked) img.medal {
-webkit-filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.75));
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.75));
}
#game_overview_medals_container .achievement_item/*:not(.locked)*/:hover img.medal {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
#game_overview_medals_container .achievement_item.locked img.medal {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#game_overview_medals_container .achievement_item img.medal.level5 {
height: 5em;
}
#game_overview_medals_container .achievement_item img.medal.level4 {
height: 4.6em;
}
#game_overview_medals_container .achievement_item img.medal.level3 {
height: 4.2em;
}
#game_overview_medals_container .achievement_item img.medal.level2 {
height: 3.8em;
}
#game_overview_medals_container .achievement_item img.medal.level1 {
height: 3.2em;
}
/* END OVERVIEW ACHIEVEMENTS */
/* END ACHIEVEMENTS */
/* TIPS */
div.tip {
background-color: #f81b84;
color: var(--text-inverse);
padding: 0.75em 1em;
border-radius: 1em;
box-shadow: 0 3px 6px rgba(248,27,132, 0.5);
cursor: pointer;
}
#picture_question_zoom_tip {
display: none;
width: 20em;
max-width: calc(100% - 1em);
position: absolute;
right: 5.5em;
bottom: 4.5em;
}
#picture_question_zoom_tip:before {
content: '';
position: absolute;
right: 2px;
bottom: -1em;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-top: 26px solid #f81b84;
border-right: 13px solid transparent;
}
/* END TIPS */
/********************
MEDIA QUERIES
*********************/
/* Larger Devices, Wide Screens */
@media only screen and (max-width : 1600px) {
#game_splash_content {
top: 70px;
}
#game_splash_logo {
width: 700px;
}
#results_overview_container {
padding: 9em 0;
}
#results_icon {
height: 5em;
margin-right: 1.25em;
}
#results_grade {
font-size: 4em;
}
}
/* Larger Devices, Wide Screens */
@media only screen and (max-width : 1500px) {
#top_bar_content {
width: 80%;
}
.game_overview_column {
width: 45%;
}
.overview_bottom_button, #btn_finish_step {
width: 33.33%;
}
#step_html_container, #read_more_container, #steps_content {
width: 55%;
}
#question_container, .control_bar, #report_question_container, #game_feedback, #results {
width: 50%;
}
#step_info {
width: 55%;
}
.arrow_forward {
right:5%;
}
.arrow_back {
left:5%;
}
#game_tutorial_item_1 {
left: 13%;
}
#step_completion_content h3 {
font-size: 5em;
}
#announcement {
font-size: 5.5em;
letter-spacing: 8px;
}
.game_settings_button {
width: 30%;
margin: 1%;
}
#results_overview_container {
padding: 8em 0;
}
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
#top_bar_content {
width: 95%;
}
#game_splash_logo {
width: 600px;
}
.game_overview_column {
width: 48%;
}
.overview_bottom_button, #btn_finish_step {
width: 40%;
}
.player_chart_wrapper {
width: 48%;
}
#step_html_container, #read_more_container, #steps_content {
width: 65%;
}
#question_container, .control_bar, #report_question_container, #game_feedback, #results, #step_roadsigns_container {
width: 60%;
}
.chapter_data_title {
bottom: 62px;
font-size: 0.8em;
}
#step_info {
width: 65%;
}
#announcement {
font-size: 5em;
letter-spacing: 5px;
}
.step_star_container {
width: 200px;
height: 200px;
}
.arrow_forward {
right:0.25em;
}
.arrow_forward img, .arrow_back img {
width: 120px;
}
.arrow_back {
left:0.25em;
}
#game_tutorial_item_1 {
left: 40px;
}
#chapters_container {
padding-left: 50px;
padding-right: 50px;
}
.game_overview_item_heading {
font-size: 2.0em;
}
#results_overview_container {
padding: 6em 0;
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
#top_bar_content {
width: 100%;
}
#top_bar_rewards_status_container:hover {
background: unset;
color: unset;
}
.control_panel_item img {
height: 1.25em;
margin: 3px;
}
.control_panel_item.listen img {
height: 1.5em;
margin: 3px;
}
#btn_player:hover, #btn_continue_game:hover {
background: unset;
color: unset;
}
#step_html_container, #read_more_container, #steps_content {
width: 80%;
}
#question_container, .control_bar, #report_question_container, #game_feedback, #results, #step_roadsigns_container {
width: 70%;
}
.chapter_data_title {
width: 70%;
font-size: 0.7em;
}
.chapter_data_title_vertical {
width: 80%;
}
#step_info {
width: 75%;
}
.overview_bottom_button, #btn_finish_step {
width: 50%;
}
.step_star_container {
width: 128px;
height: 128px;
}
.arrow_forward img, .arrow_back img {
width: 90px;
}
#game_tutorial_item_1 {
left: 20px;
}
#announcement {
font-size: 6em;
letter-spacing: 6px;
}
#game_splash_logo {
width: 90%;
}
.game_overview_item_heading {
font-size: 1.6em;
}
#readspeaker_container {
top: 8.9em;
}
#game_achievement_container.visible {
top: 10em;
}
#exit_tutorial_container {
top: 60px;
height: 3.5em;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 820px) {
body {
padding-top: 90px;
}
#game_control_top_bar {
height: 70px;
}
#top_bar_title {
font-size: 1.25em;
margin-bottom: 3px;
}
#top_bar_subtitle {
font-size: 1.125em;
}
#player_avatar, #car_avatar {
width: 42px;
}
#rewards_progress_container {
height:40px;
width: 72px;
}
.screen_buttons_text {
font-size: 0.625em;
}
.game_overview_column {
width: 95%;
}
.chapter_data_title {
width: 75%;
font-size: 0.875em;
}
.chapter_data_title_vertical {
width: 90%;
}
.overview_bottom_button, #btn_finish_step {
width: 95%;
}
#btn_return_to_game {
}
.player_chart_wrapper {
width: 31%;
}
.player_chart_wrapper .player_stat_title {
}
#chart_quiz_history_box {
right: 20px;
top: 20px;
left: 35px;
bottom: 20px;
}
#step_html_container, #read_more_container, #question_container, #report_question_container,
#game_feedback, #results, #step_roadsigns_container {
width: 90%;
}
.control_bar {
width: 100%;
}
.control_bar .subtitle {
font-size: 0.875em;
}
#step_info {
width: 85%;
}
.step_info_logo {
width: 66.67%;
margin-top: -20px;
}
#step_description ul li {
margin-left: 30%;
}
.btn_step_action {
padding: 20px 40px;
}
.overview_item, .overview_item_clicked {
height: 60px;
}
.number_circle_wrapper {
width: 30px;
height: 30px;
min-width:30px;
min-height: 30px;
margin-right: 15px;
}
.step_item, #next_chapter {
width: 12.5%;
}
.car_container {
height: 30px;
}
.car {
height: 20px;
}
.result_wrapper {
padding: 20px;
}
.result_chart {
height: 140px;
}
#announcement {
font-size: 6em;
letter-spacing: 6px;
}
.step_star_container {
width: 128px;
height: 128px;
}
#btn_finish_roadsigns {
width: 66.67%;
}
#star_click_me {
height: 420px;
}
.arrow_forward img, .arrow_back img {
width: 25px;
}
#quiz_tutorial_item_3 {
right: 5px;
}
#game_tutorial_item_1 {
top: 170px;
left: 15px;
max-width: 450px;
}
#chapters_container {
padding-left: 70px;
padding-right: 70px;
}
#step_completion_content h3 {
font-size: 4em;
letter-spacing: 5px;
}
#intro_car {
width: 400px;
}
#intro_car_rear_wheel {
width: 49px;
left: 34px;
bottom: 22px;
}
#intro_car_front_wheel {
width: 47px;
right: 60px;
bottom: 23px;
}
#game_feedback {
padding-top: 60px;
}
.game_settings_button {
width: 33%;
margin: 0;
}
.game_overview_item_heading {
font-size: 2.0em;
}
#step_html_container table img,
#read_more_container table img {
margin-right: 0;
}
#step_html_container table img.img_table_illustration,
#read_more_container table img.img_table_illustration {
width: 200px;
}
#readspeaker_container {
top: 8.6em;
}
#roadsign_title,
#roadsign_description {
padding-left: 3em;
padding-right: 3em;
}
#results_overview_container {
padding: 6em 0;
}
#results_icon {
height: 4em;
margin-right: 1em;
}
#results_grade {
font-size: 3em;
}
}
@media only screen and (max-width : 620px) {
#btn_player, #btn_continue_game {
margin-right: 5px;
}
.screen_buttons_text {
display: none;
}
#announcement {
font-size: 4.5em;
text-shadow: 0px 0px 20px rgba(255,255,255,0.85);
}
#steps_content {
width: 95%;
}
.step_item, #next_chapter {
width: 12.5%;
}
.step_star_container {
width: 96px;
height: 96px;
}
.arrow_forward img, .arrow_back img {
width: 20px;
}
.chapter_data_title {
width: 70%;
font-size: 0.8em;
}
.chapter_data_title_vertical {
width: 90%;
}
#chapters_container {
padding-left: 50px;
padding-right: 50px;
}
#step_completion_content h3 {
font-size: 3em;
}
#intro_car {
width: 300px;
}
#intro_car_rear_wheel {
width: 37px;
left: 25px;
bottom: 17px;
}
#intro_car_front_wheel {
width:35px;
right: 45px;
bottom: 17px;
}
#game_achievement_container.visible {
top: 9em;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
body {
padding-top: 75px;
font-size: 0.95em;
}
#game_control_top_bar {
top: 60px;
height: 55px;
}
#top_bar_title {
font-size: 1.0em;
margin-bottom: 2px;
}
#top_bar_subtitle {
font-size: 0.875em;
}
#btn_player {
margin-right: 0;
padding: 0.375em 0.25em;
}
#player_avatar {
width: 2.25em;
margin: 0;
}
#btn_player, #btn_continue_game {
margin-right: 0;
padding: 0.25em 0.5em;
}
#car_avatar {
width: 3.25em;
margin: -0.6125em 0;
}
#rewards_progress_container {
height: 38px;
width: 54px;
margin-bottom: 0;
}
#rewards_progress_foreground, #rewards_progress_background {
top: 0;
}
.control_panel_item_text {
display: none;
}
#step_description ul li {
margin-left: 25%;
}
.game_overview_item {
padding: 1.25em 0.75em;
border-radius: 20px;
}
.game_overview_item.reduced_horizontal_padding {
padding: 1.25em 0.25em;
}
.player_chart_wrapper {
width: 46%;
margin-left: 2%;
margin-right: 2%;
}
.leaderboard_selector_button {
width: 100%;
}
.leaderboard_selector_button:first-child {
margin-right: 0;
margin-bottom: 15px;
}
.leaderboard tbody, #rewards tbody {
font-size: 0.75em;
}
.leaderboard th, #rewards th {
font-size: 0.75em;
}
.leaderboard_avatar, .reward_icon {
max-height: 24px;
}
#game_content {
margin-top: 30px;
}
#step_html_container, #read_more_container, #question_explanation_container, #steps_content,
#report_question_container, #game_feedback, #results {
width: 95%;
}
#step_html_container,
#read_more_container {
padding-left: 0.75em;
padding-right: 0.75em;
}
#step_html_container {
padding-top: 25px;
}
#picture_question_zoom_slider {
bottom: 4.5em;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
}
#picture_question_zoom_tip {
right: unset;
left: 50%;
bottom: 8.5em;
transform: translateX(-50%);
}
#picture_question_zoom_tip:before {
right: unset;
left: 50%;
transform: translateX(-50%);
}
#question_container {
width: 100%;
margin-top: 10px;
}
#question_container.timer_graph_visible {
margin-top: 13px;
}
#read_more_container {
padding-top: 10px;
}
#control_bar_center div {
font-size: 1.0em;
}
.control_panel_item {
padding: 0.5em;
text-align: center;
margin: 0 0.375em;
}
.control_panel_item img {
height: 1.375em;
margin: 0;
}
.control_panel_item.listen img {
height: 1.75em;
margin: 0 2px 0 0;
}
.step_item, #next_chapter {
width: 15%;
margin-left: 2.5%;
margin-right: 2.5%;
margin-bottom: 0px;
}
.answer_alts_container {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#question_puzzle {
width: calc(100% - 2em);
min-height: 6em;
margin: auto;
}
.quiz_image_jpg {
padding: 0;
}
.answer_alternative, .answer_alternative_clicked, .answer_alternative_selected, .answer_alternative_inert,
.answer_alternative_correct, .answer_alternative_clicked_correct, .answer_alternative_incorrect, .answer_alternative_clicked_incorrect {
width: calc(100% - 1.5em);
min-height: 4.5em;
margin-bottom: 0.5em;
padding: 0.5em 0.5em 0.5em 0;
border-radius: 0.5em;
}
#question_explanation_container {
width: 100%;
padding-left: 1em;
padding-right: 1em;
margin-top: 1em;
}
#question_explanation_content div.headerimage_container:not(.roadsign) {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
#roadsign_image {
max-height: 180px;
max-width: 80%;
}
#step_info_container {
padding: 25px 0;
}
#step_info {
width: 95%;
padding: 25px;
}
.step_info_logo {
width: 80%;
margin-top: -20px;
}
#step_subtitle {
margin: 0 auto 15px auto;
}
.chapter_row_container:not(:last-child) {
margin-bottom: 16px;
}
.chapter_circle {
height: 46px;
width: 46px;
}
.circle_left {
left: -23px;
}
.circle_right {
right: -23px;
}
#chapter_data_3, #chapter_data_6, #chapter_data_9 {
width: 80px;
top: 18px;
}
#chapter_data_3, #chapter_data_9 {
right: -80px;
}
.chapter_data_title {
font-size: 0.7em;
}
.progress_container_left {
margin-left: 18px;
margin-right: 18px;
}
.progress_container_right {
margin-right: 18px;
margin-left: 18px;
}
.cd-panel-header {
height: 60px;
line-height: 60px;
}
.cd-panel-close {
top: 13px;
width: 40px;
}
.cd-panel-close::before, .cd-panel-close::after {
top: 15px;
left: 14px;
height: 3px;
width: 15px;
}
.cd-panel-container {
top: 60px;
}
.result_wrapper {
padding: 15px;
}
.result_chart {
height: 110px;
}
#result_buttons_container,
#question_marking_buttons {
padding: 1em 1em 0 1em;
}
.marking_question_item {
width: 10.25%;
margin: 0 2% 0.75em 2%;
}
#announcement {
font-size: 4.5em;
letter-spacing: 5px;
}
#step_completion_content h3 {
font-size: 3em;
letter-spacing: 3px;
}
.step_star_container {
width: 82px;
height: 82px;
}
#btn_finish_roadsigns {
width: 100%;
}
#star_click_me {
height: 400px;
}
.arrow_forward img, .arrow_back img {
width: 15px;
}
.tutorial_item {
font-size: 1.25em;
line-height: 1.125em;
}
#game_tutorial_item_1 {
top: 140px;
left: 15px;
max-width: 400px;
}
#quiz_tutorial_target_1 {
margin-left: 25px;
}
#quiz_tutorial_item_1 {
max-width: 400px;
margin-right: 10px;
}
.rating span label {
width:52px;
height:52px;
}
.game_settings_button img {
height: 48px;
}
#game_splash_content {
top: 80px;
}
#step_html_container .headerimage_container,
#read_more_container .headerimage_container {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
#step_html_container .headerimage_container em,
#read_more_container .headerimage_container em {
padding: 0.5em 1.5em;
}
#step_html_container table img.img_table_illustration,
#read_more_container table img.img_table_illustration {
width: 150px;
}
#readspeaker_container {
top: 8.0em;
}
#roadsign_title,
#roadsign_description {
padding-left: 2em;
padding-right: 2em;
}
#game_overview_medals_container .achievement_item {
width: calc(20% - 0.25em);
margin: 0 0.25em 0 0;
padding: 1em 0.125em;
}
#game_overview_medals_container .achievement_item div.medal_title {
font-size: 0.95em;
}
#game_overview_medals_container .achievement_item img.medal.level5 {
height: 4.8em;
}
#game_overview_medals_container .achievement_item img.medal.level4 {
height: 4.4em;
}
#game_overview_medals_container .achievement_item img.medal.level3 {
height:4.0em;
}
#game_overview_medals_container .achievement_item img.medal.level2 {
height: 3.6em;
}
#game_overview_medals_container .achievement_item img.medal.level1 {
height: 3.2em;
}
#results_overview_container {
padding: 4em 0;
}
#results_icon {
height: 3em;
margin-right: 0.75em;
}
#results_grade {
font-size: 2.5em;
}
#quiz_mobile_navigation_bar {
padding: 0 0.75em;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button {
padding: 0.75em 0;
}
#quiz_mobile_navigation_bar button.mobile_navigation_button img.navigation_button_icon {
height: 1.75em;
}
}
@media only screen and (max-width : 420px) {
.step_star_container {
width: 78px;
height: 78px;
}
#star_click_me {
height: 350px;
}
#chapters_container {
padding-left: 35px;
padding-right: 35px;
}
#announcement {
font-size: 4em;
letter-spacing: 5px;
}
#step_completion_content h3 {
font-size: 2.5em;
letter-spacing: 3px;
}
.game_overview_item_heading {
font-size: 1.8em;
margin-bottom: 20px;
}
#chapters_container .game_overview_item_heading {
margin: 0 0 10px 0;
}
}
@media only screen and (max-width : 380px) {
.step_item, #next_chapter {
width: 18%;
margin-left: 3.5%;
margin-right: 3.5%;
margin-bottom: 0px;
}
.step_star_container {
width: 64px;
height: 64px;
}
.tutorial_item {
font-size: 1.0625em;
line-height: 1.0em;
}
#star_click_me {
height: 256px;
}
.chapter_data_title {
width: 65%;
font-size: 0.625em;
}
.result_button_wrapper {
width: 10%;
margin: 8px 2%;
}
#step_completion_content h3 {
font-size: 3em;
letter-spacing: 3px;
}
#announcement {
font-size: 3em;
letter-spacing: 4px;
}
.game_settings_button img {
height: 36px;
}
.game_overview_item_heading {
font-size: 1.6em;
}
#step_html_container table img.img_table_illustration,
#read_more_container table img.img_table_illustration {
width: 120px;
}
}
@media only screen and (max-width : 320px) {
.step_star_container {
width: 48px;
height: 48px;
}
#game_overview_medals_container .achievement_item {
width: calc(33% - 0.5em);
margin: 0 0.5em 0 0;
padding: 1em 0.25em;
}
}
/********************
END MEDIA QUERIES
********************