/** // VARIABLES $gray-darker: lighten(#000, 13.5%) !default; // #222 $gray-dark: lighten(#000, 20%) !default; // #333 $gray: lighten(#000, 33.5%) !default; // #555 $gray-light: lighten(#000, 46.7%) !default; // #777 $gray-lighter: lighten(#000, 93.5%) !default; // #eee $brand-primary: #428bca !default; $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; */ .container, .game-container, .store, .greenhouse, .userGuide, .reportCard, .green-house, .rocket-room, .review, #videoContainer, .books, .laboratory, .schoolyard, .machineRoom, .muralRoom, .second-scene, .flashcards, .firstLetterFlashcard, .colorByNumbers, .storyBook, .storyBook .postAction .man, .wordSearch, .saveTheKing, .save-the-king, .save-the-king-group3, .save-the-king-group3-normal, .cardMatching, .listening, .listening-and-matching-book4, .listening_b1u3a1b, .listening_b1u4a9, .listening_b4u1a9, .listening_b4u4a11, .portraitRoom, .matching, .testBook, .circleMatching, .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0, .flashcard-matching, .signup, .signup-fail, .multipleChoice, .comic-b4u7a6, .comicb4u4a9, .comicb4u1a8, .comic-b4u8a5, .comicb1u8a5, .comic, .hopscotch-book3, .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1, .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2, .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3, .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4, .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5, .b4t1a5, .b4t2a5, .books-store, .video-room, .overlay-container, .disableInteractive { width: 1000px; font-family: Arial, Helvetica, sans-serif; margin-left: auto; margin-right: auto; } .game-container, .store, .greenhouse, .userGuide, .reportCard, .green-house, .rocket-room, .review, #videoContainer, .books, .laboratory, .schoolyard, .machineRoom, .muralRoom, .second-scene, .flashcards, .firstLetterFlashcard, .colorByNumbers, .storyBook, .storyBook .postAction .man, .wordSearch, .saveTheKing, .save-the-king, .save-the-king-group3, .save-the-king-group3-normal, .cardMatching, .listening, .listening-and-matching-book4, .listening_b1u3a1b, .listening_b1u4a9, .listening_b4u1a9, .listening_b4u4a11, .portraitRoom, .matching, .testBook, .circleMatching, .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0, .flashcard-matching, .signup, .signup-fail, .multipleChoice, .comic-b4u7a6, .comicb4u4a9, .comicb4u1a8, .comic-b4u8a5, .comicb1u8a5, .comic, .hopscotch-book3, .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1, .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2, .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3, .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4, .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5, .b4t1a5, .b4t2a5, .books-store, .video-room { position: relative; width: 1000px; height: 600px; font-family: "VNF-ComicSans", sans-serif; } /* 5 layers in game */ .fade-in { -webkit-animation: displayOnce 2s; /* Safari 4+ */ -moz-animation: gdisplayOnce 2s; /* Fx 5+ */ -o-animation: displayOnce 2s; /* Opera 12+ */ animation: displayOnce 2s; /* IE 10+ */ } @keyframes displayOnce { 0% { opacity: 0; z-index: 8000; } 50% { opacity: 1; } 100% { opacity: 0; z-index: 0; } } @-webkit-keyframes displayOnce { 0% { opacity: 0; z-index: 8000; } 50% { opacity: 1; } 100% { opacity: 0; z-index: 0; } } @font-face { font-family: 'Comic Neue'; src: url("../assets/fonts/comicneue-bold.eot"); src: url("../assets/fonts/comicneue-bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/comicneue-bold.woff") format("woff"), url("../assets/fonts/comicneue-bold.ttf") format("truetype"), url("../assets/fonts/comicneue-bold.svg#comic_neuebold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: 'Comic Neue'; src: url("../assets/fonts/comicneue-regular.eot"); src: url("../assets/fonts/comicneue-regular.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/comicneue-regular.woff") format("woff"), url("../assets/fonts/comicneue-regular.ttf") format("truetype"), url("../assets/fonts/comicneue-regular.svg#comic_neueregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'VNF-ComicSans'; src: url("../assets/fonts/VNF-Comic_Sans.eot"); src: url("../assets/fonts/VNF-Comic_Sans.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/VNF-Comic_Sans.woff") format("woff"), url("../assets/fonts/VNF-Comic_Sans.ttf") format("truetype"), url("../assets/fonts/VNF-Comic_Sans.svg#VNF-ComicSans") format("svg"); font-weight: normal; font-style: normal; } /** // VARIABLES $gray-darker: lighten(#000, 13.5%) !default; // #222 $gray-dark: lighten(#000, 20%) !default; // #333 $gray: lighten(#000, 33.5%) !default; // #555 $gray-light: lighten(#000, 46.7%) !default; // #777 $gray-lighter: lighten(#000, 93.5%) !default; // #eee $brand-primary: #428bca !default; $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; */ .container, .game-container, .store, .greenhouse, .userGuide, .reportCard, .green-house, .rocket-room, .review, #videoContainer, .books, .laboratory, .schoolyard, .machineRoom, .muralRoom, .second-scene, .flashcards, .firstLetterFlashcard, .colorByNumbers, .storyBook, .storyBook .postAction .man, .wordSearch, .saveTheKing, .save-the-king, .save-the-king-group3, .save-the-king-group3-normal, .cardMatching, .listening, .listening-and-matching-book4, .listening_b1u3a1b, .listening_b1u4a9, .listening_b4u1a9, .listening_b4u4a11, .portraitRoom, .matching, .testBook, .circleMatching, .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0, .flashcard-matching, .signup, .signup-fail, .multipleChoice, .comic-b4u7a6, .comicb4u4a9, .comicb4u1a8, .comic-b4u8a5, .comicb1u8a5, .comic, .hopscotch-book3, .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1, .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2, .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3, .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4, .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5, .b4t1a5, .b4t2a5, .books-store, .video-room, .overlay-container, .disableInteractive { width: 1000px; font-family: Arial, Helvetica, sans-serif; margin-left: auto; margin-right: auto; } .game-container, .store, .greenhouse, .userGuide, .reportCard, .green-house, .rocket-room, .review, #videoContainer, .books, .laboratory, .schoolyard, .machineRoom, .muralRoom, .second-scene, .flashcards, .firstLetterFlashcard, .colorByNumbers, .storyBook, .storyBook .postAction .man, .wordSearch, .saveTheKing, .save-the-king, .save-the-king-group3, .save-the-king-group3-normal, .cardMatching, .listening, .listening-and-matching-book4, .listening_b1u3a1b, .listening_b1u4a9, .listening_b4u1a9, .listening_b4u4a11, .portraitRoom, .matching, .testBook, .circleMatching, .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0, .flashcard-matching, .signup, .signup-fail, .multipleChoice, .comic-b4u7a6, .comicb4u4a9, .comicb4u1a8, .comic-b4u8a5, .comicb1u8a5, .comic, .hopscotch-book3, .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1, .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2, .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3, .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4, .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5, .b4t1a5, .b4t2a5, .books-store, .video-room { position: relative; width: 1000px; height: 600px; font-family: "VNF-ComicSans", sans-serif; } /* 5 layers in game */ .fade-in { -webkit-animation: displayOnce 2s; /* Safari 4+ */ -moz-animation: gdisplayOnce 2s; /* Fx 5+ */ -o-animation: displayOnce 2s; /* Opera 12+ */ animation: displayOnce 2s; /* IE 10+ */ } @keyframes displayOnce { 0% { opacity: 0; z-index: 8000; } 50% { opacity: 1; } 100% { opacity: 0; z-index: 0; } } @-webkit-keyframes displayOnce { 0% { opacity: 0; z-index: 8000; } 50% { opacity: 1; } 100% { opacity: 0; z-index: 0; } } @font-face { font-family: 'Comic Neue'; src: url("../assets/fonts/comicneue-bold.eot"); src: url("../assets/fonts/comicneue-bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/comicneue-bold.woff") format("woff"), url("../assets/fonts/comicneue-bold.ttf") format("truetype"), url("../assets/fonts/comicneue-bold.svg#comic_neuebold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: 'Comic Neue'; src: url("../assets/fonts/comicneue-regular.eot"); src: url("../assets/fonts/comicneue-regular.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/comicneue-regular.woff") format("woff"), url("../assets/fonts/comicneue-regular.ttf") format("truetype"), url("../assets/fonts/comicneue-regular.svg#comic_neueregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'VNF-ComicSans'; src: url("../assets/fonts/VNF-Comic_Sans.eot"); src: url("../assets/fonts/VNF-Comic_Sans.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/VNF-Comic_Sans.woff") format("woff"), url("../assets/fonts/VNF-Comic_Sans.ttf") format("truetype"), url("../assets/fonts/VNF-Comic_Sans.svg#VNF-ComicSans") format("svg"); font-weight: normal; font-style: normal; } /** Glow Effect for Image **/ .glow-it { -webkit-animation: img-glow 3s infinite; /* Safari 4+ */ -moz-animation: img-glow 3s infinite; /* Fx 5+ */ -o-animation: img-glow 3s infinite; /* Opera 12+ */ animation: img-glow 3s infinite; /* IE 10+ */ } @keyframes img-glow { 0% { opacity: 0; filter: alpha(opacity=0); } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes img-glow { 0% { opacity: 0; filter: alpha(opacity=0); } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 0; filter: alpha(opacity=0); } } /** Glow Effect for text **/ .text-glow { -webkit-animation: text-glow-kf 3s infinite; /* Safari 4+ */ -moz-animation: text-glow-kf 3s infinite; /* Fx 5+ */ -o-animation: text-glow-kf 3s infinite; /* Opera 12+ */ animation: text-glow-kf 3s infinite; /* IE 10+ */ } @keyframes text-glow-kf { 0% { text-shadow: 0 0 2px #a2021c; } 50% { text-shadow: 0 0 2px rgba(162, 2, 28, 0); } 100% { text-shadow: 0 0 2px #a2021c; } } @-webkit-keyframes text-glow-kf { 0% { text-shadow: 0 0 2px #a2021c; } 50% { text-shadow: 0 0 2px rgba(162, 2, 28, 0); } 100% { text-shadow: 0 0 2px #a2021c; } } .text-glow-green { -webkit-animation: text-glow-green-kf 3s infinite; /* Safari 4+ */ -moz-animation: text-glow-green-kf 3s infinite; /* Fx 5+ */ -o-animation: text-glow-green-kf 3s infinite; /* Opera 12+ */ animation: text-glow-green-kf 3s infinite; /* IE 10+ */ } @keyframes text-glow-green-kf { 0% { text-shadow: 0 0 2px #13ce00; } 50% { text-shadow: 0 0 2px rgba(19, 206, 0, 0); } 100% { text-shadow: 0 0 2px #13ce00; } } @-webkit-keyframes text-glow-green-kf { 0% { text-shadow: 0 0 2px #13ce00; } 50% { text-shadow: 0 0 2px rgba(19, 206, 0, 0); } 100% { text-shadow: 0 0 2px #13ce00; } } .text-glow-red { -webkit-animation: text-glow-red-kf 3s infinite; /* Safari 4+ */ -moz-animation: text-glow-red-kf 3s infinite; /* Fx 5+ */ -o-animation: text-glow-red-kf 3s infinite; /* Opera 12+ */ animation: text-glow-red-kf 3s infinite; /* IE 10+ */ } @keyframes text-glow-red-kf { 0% { text-shadow: 0 0 2px #ff9999; } 50% { text-shadow: 0 0 2px rgba(255, 153, 153, 0); } 100% { text-shadow: 0 0 2px #ff9999; } } @-webkit-keyframes text-glow-red-kf { 0% { text-shadow: 0 0 2px #ff9999; } 50% { text-shadow: 0 0 2px rgba(255, 153, 153, 0); } 100% { text-shadow: 0 0 2px #ff9999; } } .text-glow-yellow { -webkit-animation: text-glow-yellow-kf 3s infinite; /* Safari 4+ */ -moz-animation: text-glow-yellow-kf 3s infinite; /* Fx 5+ */ -o-animation: text-glow-yellow-kf 3s infinite; /* Opera 12+ */ animation: text-glow-yellow-kf 3s infinite; /* IE 10+ */ } @keyframes text-glow-yellow-kf { 0% { text-shadow: 0 0 2px #fff200; } 50% { text-shadow: 0 0 2px rgba(255, 242, 0, 0); } 100% { text-shadow: 0 0 2px #fff200; } } @-webkit-keyframes text-glow-yellow-kf { 0% { text-shadow: 0 0 2px #fff200; } 50% { text-shadow: 0 0 2px rgba(255, 242, 0, 0); } 100% { text-shadow: 0 0 2px #fff200; } } .text-glow-blue { -webkit-animation: text-glow-blue-kf 3s infinite; /* Safari 4+ */ -moz-animation: text-glow-blue-kf 3s infinite; /* Fx 5+ */ -o-animation: text-glow-blue-kf 3s infinite; /* Opera 12+ */ animation: text-glow-blue-kf 3s infinite; /* IE 10+ */ } @keyframes text-glow-blue-kf { 0% { text-shadow: 0 0 2px #8080f8; } 50% { text-shadow: 0 0 2px rgba(128, 128, 248, 0); } 100% { text-shadow: 0 0 2px #8080f8; } } @-webkit-keyframes text-glow-blue-kf { 0% { text-shadow: 0 0 2px #8080f8; } 50% { text-shadow: 0 0 2px rgba(128, 128, 248, 0); } 100% { text-shadow: 0 0 2px #8080f8; } } .text-glow-white { -webkit-animation: text-glow-white-kf 3s infinite; /* Safari 4+ */ -moz-animation: text-glow-white-kf 3s infinite; /* Fx 5+ */ -o-animation: text-glow-white-kf 3s infinite; /* Opera 12+ */ animation: text-glow-white-kf 3s infinite; /* IE 10+ */ } @keyframes text-glow-white-kf { 0% { text-shadow: 0 0 2px white; } 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0); } 100% { text-shadow: 0 0 2px white; } } @-webkit-keyframes text-glow-white-kf { 0% { text-shadow: 0 0 2px white; } 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0); } 100% { text-shadow: 0 0 2px white; } } @-webkit-keyframes inglow { 0% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 1; filter: alpha(opacity=100); } } .fade-in { -webkit-animation: displayOnce 1s; /* Safari 4+ */ -moz-animation: displayOnce 1s; /* Fx 5+ */ -o-animation: displayOnce 1s; /* Opera 12+ */ animation: displayOnce 1s; /* IE 10+ */ } @keyframes displayOnce { 0% { opacity: 0; filter: alpha(opacity=0); z-index: 8000; } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 1; filter: alpha(opacity=100); z-index: 0; } } @-webkit-keyframes displayOnce { 0% { opacity: 0; filter: alpha(opacity=0); z-index: 8000; } 50% { opacity: 1; filter: alpha(opacity=100); } 100% { opacity: 1; filter: alpha(opacity=100); z-index: 0; } } #robot.portraitRoomAnimate { -webkit-animation: move-robot 2s linear 1 alternate; -moz-animation: move-robot 2s linear 1 alternate; -ms-animation: move-robot 2s linear 1 alternate; -o-animation: move-robot 2s linear 1 alternate; animation: move-robot 2s linear 1 alternate; transform: scale(0.25); -ms-transform: scale(0.25); /* IE 9 */ -moz-transform: scale(0.25); /* Firefox */ -webkit-transform: scale(0.25); /* Safari and Chrome */ -o-transform: scale(0.25); /* Opera */ } @keyframes move-robot { /*0% { top:150px } 50% {top:620px;}*/ 100% { left: 80px; } } @-webkit-keyframes move-robot { /*0% { top:150px } 50% {top:620px;}*/ 100% { left: 80px; } } /************* * ROPE CLIMB CHIP **************/ @-webkit-keyframes chip-climb-up { from { background-position: 0px; } to { background-position: -450px; } } @-moz-keyframes chip-climb-up { from { background-position: 0px; } to { background-position: -450px; } } @-ms-keyframes chip-climb-up { from { background-position: 0px; } to { background-position: -450px; } } @-o-keyframes chip-climb-up { from { background-position: 0px; } to { background-position: -450px; } } @keyframes chip-climb-up { from { background-position: 0px; } to { background-position: -450px; } } @-webkit-keyframes chip-climb-up { from { background-position: 0px; } to { background-position: -450px; } } /*@-moz-keyframes chip-climb-second { from { background-position: -450px; } to { background-position: -900px; } } @-ms-keyframes chip-climb-up-second{ from { background-position: -209px; } to { background-position: -627px; } } @-o-keyframes chip-climb-up-second{ from { background-position: -209px; } to { background-position: -627px; } } @keyframes chip-climb-up-second{ from { background-position: -209px; } to { background-position: -627px; } } */ /************* * SAVE THE KING **************/ @-webkit-keyframes king-first-step { from { background-position: 0px; } to { background-position: -232px; } } @-moz-keyframes king-first-step { from { background-position: 0px; } to { background-position: -232px; } } @-ms-keyframes king-first-step { from { background-position: 0px; } to { background-position: -232px; } } @-o-keyframes king-first-step { from { background-position: 0px; } to { background-position: -232px; } } @keyframes king-first-step { from { background-position: 0px; } to { background-position: -232px; } } @-webkit-keyframes king-second-step { from { background-position: -232px; } to { background-position: -464px; } } @-moz-keyframes king-second-step { from { background-position: -232px; } to { background-position: -464px; } } @-ms-keyframes king-second-step { from { background-position: -232px; } to { background-position: -464px; } } @-o-keyframes king-second-step { from { background-position: -232px; } to { background-position: -464px; } } @keyframes king-second-step { from { background-position: -232px; } to { background-position: -464px; } } @-webkit-keyframes king-thumbs-up { from { background-position: -348px; } to { background-position: -580px; } } @-moz-keyframes king-thumbs-up { from { background-position: -348px; } to { background-position: -580px; } } @-ms-keyframes king-thumbs-up { from { background-position: -348px; } to { background-position: -580px; } } @-o-keyframes king-thumbs-up { from { background-position: -348px; } to { background-position: -580px; } } @keyframes king-thumbs-up { from { background-position: -348px; } to { background-position: -580px; } } /************* * SAVE THE KING GROUP3 **************/ @-webkit-keyframes group3-king-first-step { from { background-position: 0px; } to { background-position: -190px; } } @-moz-keyframes group3-king-first-step { from { background-position: 0px; } to { background-position: -190px; } } @-ms-keyframes group3-king-first-step { from { background-position: 0px; } to { background-position: -190px; } } @-o-keyframes group3-king-first-step { from { background-position: 0px; } to { background-position: -190px; } } @keyframes group3-king-first-step { from { background-position: 0px; } to { background-position: -190px; } } @-webkit-keyframes group3-king-second-step { from { background-position: -190px; } to { background-position: -380px; } } @-moz-keyframes group3-king-second-step { from { background-position: -190px; } to { background-position: -380px; } } @-ms-keyframes group3-king-second-step { from { background-position: -190px; } to { background-position: -380px; } } @-o-keyframes group3-king-second-step { from { background-position: -190px; } to { background-position: -380px; } } @keyframes group3-king-second-step { from { background-position: -190px; } to { background-position: -380px; } } @-webkit-keyframes group3-king-thumbs-up { from { background-position: -285px; } to { background-position: -475px; } } @-moz-keyframes group3-king-thumbs-up { from { background-position: -285px; } to { background-position: -475px; } } @-ms-keyframes group3-king-thumbs-up { from { background-position: -285px; } to { background-position: -475px; } } @-o-keyframes group3-king-thumbs-up { from { background-position: -285px; } to { background-position: -475px; } } @keyframes group3-king-thumbs-up { from { background-position: -285px; } to { background-position: -475px; } } /************* * b1u2s7 FISH ANIMATION **************/ @-webkit-keyframes fish-shake { from { background-position: 0px; } to { background-position: -864px; } /*-1729px*/ } @-moz-keyframes fish-shake { from { background-position: 0px; } to { background-position: -864px; } } @-ms-keyframes fish-shake { from { background-position: 0px; } to { background-position: -864px; } } @-o-keyframes fish-shake { from { background-position: 0px; } to { background-position: -864px; } } @keyframes fish-shake { from { background-position: 0px; } to { background-position: -864px; } } @keyframes changeParrot { 0% { top: 200px; left: 900px; } 100% { top: 200px; left: -400px; } } @-moz-keyframes changeParrot { 0% { top: 200px; left: 900px; } 100% { top: 200px; left: -400px; } } @-webkit-keyframes changeParrot { 0% { top: 200px; left: 900px; } 100% { top: 200px; left: -400px; } } @-moz-keyframes changeParrotBg { 0% { background-position: 0 0; } 50% { background-position: 0 -171px; } } @keyframes changeParrotBg { 0% { background-position: 0 0; } 50% { background-position: 0 -171px; } } @-webkit-keyframes changeParrotBg { 0% { background-position: 0 0; } 50% { background-position: 0 -171px; } } /***************** permanentFeatures.scss Should contain style rules for the Permanent Features of the application *****************/ /***************** PERMANENT ******************/ .top-navigation { float: right; color: #fff; padding-top: 10px; cursor: pointer; font-family: "VNF-ComicSans", sans-serif; } /***************** PERMANENT ******************/ .permanent { position: absolute; z-index: 30; width: 300px; height: 70px; float: left; top: 520px; margin-left: 20px; } .permanent button { cursor: pointer; border: none; width: 70px; height: 70px; margin-right: -10px; } .albumBtn { background: url("../assets/buttons/btn-album.png"); } .albumBtn:active { background: url("../assets/buttons/btn-album-press.png"); } .albumBtn:hover { background: url("../assets/buttons/btn-album-hover.png"); } .storeBtn { background: url("../assets/permanent/buttons/btn-store.png"); } .storeBtn:active { background: url("../assets/permanent/buttons/btn-store-press.png"); } .storeBtn:hover { background: url("../assets/permanent/buttons/btn-store-hover.png"); } .practiceBtn { background: url("../assets/permanent/buttons/btn-practice.png"); } .practiceBtn:active { background: url("../assets/permanent/buttons/btn-practice-press.png"); } .practiceBtn:hover { background: url("../assets/permanent/buttons/btn-practice-hover.png"); } .reviewBtn { background: url("../assets/permanent/buttons/btn-review.png"); } .reviewBtn:active { background: url("../assets/permanent/buttons/btn-review-press.png"); } .reviewBtn:hover { background: url("../assets/permanent/buttons/btn-review-hover.png"); } .greenhouseBtn { background: url("../assets/permanent/buttons/btn-greenhouse.png"); } .greenhouseBtn:active { background: url("../assets/permanent/buttons/btn-greenhouse-press.png"); } .greenhouseBtn:hover { background: url("../assets/permanent/buttons/btn-greenhouse-hover.png"); } .homeBtn { background: url("../assets/permanent/buttons/btn-home.png"); } .homeBtn:active { background: url("../assets/permanent/buttons/btn-home-press.png"); } .homeBtn:hover { background: url("../assets/permanent/buttons/btn-home-hover.png"); } .store, .greenhouse, .userGuide, .reportCard { background-color: #ffffff; } .store .content, .greenhouse .content, .userGuide .content, .reportCard .content { width: 340px; float: left; padding: 20px; } .store img, .greenhouse img, .userGuide img, .reportCard img { padding-top: 20px; } .store button, .greenhouse button, .userGuide button, .reportCard button { margin: 10px; float: right; } .greenhouse img { width: 580px; } .green-house .door { cursor: pointer; } .green-house .door.open { position: relative; top: 1px !important; left: -19px !important; } .green-house .door.true { cursor: default; } .green-house .pNumber { position: absolute; z-index: 100; } .green-house .exitRoom { position: absolute; cursor: pointer; left: 10px; top: 220px; height: 50px; } .green-house .bookCover { cursor: pointer; } .green-house .exitBtn { position: absolute; cursor: pointer; left: 965px; top: 5px; width: 30px; height: 30px; } .green-house .exitBtn:hover { background-image: url("../assets/permanent/store/rocket-room/x-hover.png"); background-size: 30px 30px; background-repeat: no-repeat; } .green-house .exitBtn:focus { background-image: url("../assets/permanent/store/rocket-room/x-press.png"); background-size: 30px 30px; background-repeat: no-repeat; } .rocket-room { background-image: url("../assets/permanent/store/rocket-room/background-1.jpg"); } .rocket-room .countUp { position: absolute; left: 710px; top: 470px; background: transparent; border: none; box-shadow: none; color: transparent; } .rocket-room .close { position: absolute; top: 0px; left: 980px; } .rocket-room .rocket { cursor: pointer; } .rocket-room .rocket span { display: inline-block; } .rocket-room .rocket .down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .rocket-room .rocket .right { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .rocket-room .rocket .left { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .rocket-room .letterR { cursor: pointer; position: absolute; top: 65px; left: 40px; color: #0000ff; font-size: 30px; } .rocket-room .letterR.letterR-down { top: 73px; } .rocket-room .letterR.letterR-right { top: 70px; left: 45px; } .rocket-room .letterR.letterR-left { top: 70px; left: 35px; } .rocket-room .strike { position: absolute; left: 20px; top: 35px; } .rocket-room .strike div { float: left; margin-left: 5px; } .rocket-room .alphabets { position: absolute; width: 690px; height: 50px; left: 20px; top: 540px; background-color: white; opacity: 0.5; border-radius: 10px; color: black; } .rocket-room .alphabets span { float: left; margin-left: 5px; font-size: 30px; } .rocket-room .level { position: absolute; cursor: pointer; left: 30px; top: 0px; font-size: 22px; color: #00ff00; } .rocket-room .exitBtn { position: absolute; cursor: pointer; left: 965px; top: 5px; width: 30px; height: 30px; } .rocket-room .exitBtn:hover { background-image: url("../assets/permanent/store/rocket-room/x-hover.png"); background-size: 30px 30px; background-repeat: no-repeat; } .rocket-room .exitBtn:focus { background-image: url("../assets/permanent/store/rocket-room/x-press.png"); background-size: 30px 30px; background-repeat: no-repeat; } .rocket-room .message { position: absolute; top: 0px; left: 0px; z-index: 100; } .rocket-room .messageTitle { position: absolute; top: 220px; left: 280px; z-index: 100; font-size: 34px; color: white; } .rocket-room .messageTitle.end { color: #ffff00; top: 270px; } .rocket-room .messageTitle.over, .rocket-room .messageTitle.exit { color: #3aff00; } .rocket-room .okbtn { left: 450px; top: 320px; position: absolute; cursor: pointer; z-index: 101; background-image: url("../assets/permanent/store/rocket-room/ok.png"); } .rocket-room .okbtn:hover { background-image: url("../assets/permanent/store/rocket-room/ok_hover.png"); } .rocket-room .okbtn:focus { background-image: url("../assets/permanent/store/rocket-room/ok_click.png"); } .rocket-room .okbtn.blue2 { left: 480px; top: 360px; } .rocket-room .yesbtn { left: 400px; top: 320px; position: absolute; cursor: pointer; z-index: 101; } .rocket-room .yesbtn:hover { background-image: url("../assets/common/messaging/buttons/yes_hover.png"); } .rocket-room .yesbtn:focus { background-image: url("../assets/common/messaging/buttons/yes_click.png"); } .rocket-room .yesbtn.end { top: 360px; } .rocket-room .nobtn { left: 520px; top: 320px; position: absolute; cursor: pointer; z-index: 101; } .rocket-room .nobtn:hover { background-image: url("../assets/common/messaging/buttons/no_hover.png"); } .rocket-room .nobtn:focus { background-image: url("../assets/common/messaging/buttons/no_click.png"); } .rocket-room .nobtn.end { top: 360px; } .playAgain .yes_book0 { background-image: url("../assets/common/messaging/buttons/book0/yes.png"); left: 172px; top: 200px; } .playAgain .yes_book0:hover { background-image: url("../assets/common/messaging/buttons/book0/yes_hover.png"); } .playAgain .yes_book0:focus { background-image: url("../assets/common/messaging/buttons/book0/yes_click.png"); } .playAgain .no_book0 { background-image: url("../assets/common/messaging/buttons/book0/no.png"); left: 290px; top: 200px; } .playAgain .no_book0:hover { background-image: url("../assets/common/messaging/buttons/book0/no_hover.png"); } .playAgain .no_book0:focus { background-image: url("../assets/common/messaging/buttons/book0/no_click.png"); } .playAgain .ok_book0 { background-image: url("../assets/common/messaging/buttons/book0/ok.png"); left: 450px; top: 330px; } .playAgain .ok_book0:hover { background-image: url("../assets/common/messaging/buttons/book0/ok_hover.png"); } .playAgain .ok_book0:focus { background-image: url("../assets/common/messaging/buttons/book0/ok_click.png"); } .review { font-family: "VNF-ComicSans", sans-serif; /** Mix up with grids **/ } .review .b-arrow { display: none !important; } .review .booklet .b-arrow-prev { left: 10px !important; } .review .booklet .b-arrow-next { right: 10px !important; } .review .tableOfContents { width: 50%; float: right; } .review .tableOfContents ul li a { background-color: #f79f70; margin-bottom: 10px; } .review .tableOfContents .unit-list { margin-top: 10%; width: 38%; margin-left: 6%; float: left; } .review .tableOfContents .unit-list .unit { width: 150px; height: 40px; margin-bottom: 10px; background-color: #c49a6c; padding-top: 6px; text-align: center; font-size: 1.1em; cursor: pointer; } .review .titlePage { width: 50%; float: left; } .review .review .storyBook { background-image: none; } .review .nav { background: none; margin-left: 27%; margin-top: 10%; } .review .nav-stacked { width: 100px; float: left; } .review .nav-tabs { border-bottom: none; } .review .nav-tabs li { cursor: pointer; background-color: #9b8579; text-align: center; padding: 10px; color: white; margin-bottom: 8px; } .review .nav-tabs li.active, .review .nav-tabs li:hover { background-color: #ef4136; } .review .b1page1, .review .b1page2, .review .b1u1Vocabulary, .review .b1u2Vocabulary, .review .b1u3Vocabulary, .review .b1u4Vocabulary, .review .b1u5Vocabulary, .review .b1u6Vocabulary, .review .b1u7Vocabulary, .review .b1u8Vocabulary { overflow: hidden; margin-left: 75px; font-size: 1.4em; } .review .b1u1Vocabulary, .review .b1u4Vocabulary, .review .b1u5Vocabulary { width: 400px; } .review .b1u2Vocabulary, .review .b1u3Vocabulary, .review .b1u6Vocabulary, .review .b1u7Vocabulary { width: 450px; } .review .vocabulary-item { width: 130px; text-align: center; float: left; margin-right: 10px; } .review .intro-left, .review .intro-right { width: 440px; } .review .intro-left .vocabulary-item, .review .intro-right .vocabulary-item { width: 200px; margin: 40px 0; text-align: center; } .review .intro-left .vocabulary-item .img, .review .intro-right .vocabulary-item .img { display: block; } .review .intro-left .vocabulary-item .call-me, .review .intro-right .vocabulary-item .call-me { display: block; text-align: center; } .review .intro-left .vocabulary-item .call-me .speaker, .review .intro-right .vocabulary-item .call-me .speaker { float: left; } .review .intro-left { margin-left: 60px; } .review .intro-right { margin-right: 60px; } .review .b1u8Vocabulary { width: 420px; } .review .b1u8Vocabulary .vocabulary-item { width: 50px; margin-right: 15px; margin-bottom: 15px; } .review .b1u8Vocabulary .vocabulary-item-img { width: 50px !important; } .review .title { text-align: center; font-size: 1.8em; text-decoration: underline; margin-top: 15px; margin-bottom: 15px; height: 40px; } .review .page-left { width: 440px; margin-left: 60px; } .review .page-left.cols-2 .vocabulary-item { width: 220px; margin: 10px 0; text-align: left; } .review .page-right { width: 460px; } .review .page-right .grammar { margin-top: 120px; text-align: center; } .review .speaker { cursor: pointer; } .review.book1 .speaker { float: left; margin-right: 6px; } .review.book1 .text { margin-top: -4px; float: left; } .review.book4 .click-me { display: inline-block; vertical-align: middle; padding-left: 10px; } .review.book4 .img { display: inline-block; } .settings { font-family: "VNF-ComicSans", sans-serif; width: 1000px; height: 600px; margin-left: auto; margin-right: auto; z-index: 1050; position: relative; background-color: #ffffff; } .settings .closeButton { float: right; margin: 10px; } .settings .pattern-box { cursor: pointer; /* width:580px; height:100%; */ margin-left: auto; margin-right: auto; } .settings .pattern-box .pattern { width: 16.66666667%; float: left; } .settings label, .settings .alert { font-family: "VNF-ComicSans", sans-serif; } .userGuide { width: 1000px; height: 600px; margin-left: auto; margin-right: auto; z-index: 1050; position: relative; background-image: url("../assets/permanent/userGuide/userGuide-background.jpg"); } .userGuide .en-btn, .userGuide .vn-btn { margin: 0; background-width: 50px; background-height: 50px; border: none; width: 50px; height: 50px; } .userGuide .closeButton { float: right; margin-right: 100px; } .userGuide .en-btn { background: url("../assets/permanent/userGuide/en.png") no-repeat top center; } .userGuide .vn-btn { background: url("../assets/permanent/userGuide/vn.png"); } .userGuide .title { color: white; text-transform: uppercase; font-size: 1.75em; margin-left: 160px; padding-top: 10px; } .userGuide .contentContainer { width: 78%; margin-left: 11%; padding-top: 60px; } .userGuide .contentContainer .contentDetails { width: 75%; vertical-align: middle; margin-left: 5%; font-size: 1.4em; font-weight: normal; float: left; position: relative; padding-top: 40px; } .userGuide .contentContainer .contentDetails a:link { color: blue; } .userGuide .contentContainer .arrowLeft, .userGuide .contentContainer .arrowRight { cursor: pointer; width: 60px; padding-top: 120px; height: 60px; position: relative; } .userGuide .contentContainer .arrowLeft { float: left; } .userGuide .contentContainer .arrowLeft .left { background-image: url("../assets/storyBook/preview-normal.png"); display: block; width: 69px; height: 81px; } .userGuide .contentContainer .arrowLeft .left:hover { background-image: url("../assets/storyBook/preview-over.png"); } .userGuide .contentContainer .arrowRight { float: right; } .userGuide .contentContainer .arrowRight .right { background-image: url("../assets/storyBook/next-normal.png"); display: block; width: 69px; height: 81px; } .userGuide .contentContainer .arrowRight .right:hover { background-image: url("../assets/storyBook/next-over.png"); } /***************** Main.scss Should contain application wide style rules and rules for activities that are reused throughout the application. *****************/ html, body { /*background: url('../assets/common/pattern06.png'); background-repeat: repeat;*/ } .home { background-color: #ffffff; } .header, .footer { color: #e6e6e6; } .header a, .footer a { color: #ffffff; } .navbar-nav a { color: #ffffff; } .navbar-nav a:hover, .navbar-nav a:active, .navbar-nav a:focus { color: #006b2a; } .navbar-brand { background: url('../assets/common/logo.png?1742470475') no-repeat left center; padding-left: 80px; } .navbar-brand:hover, .navbar-brand:active, .navbar-brand:focus { color: #ffffff; text-shadow: 1px 1px rgba(0, 0, 0, 0.8), 2px 2px rgba(255, 255, 255, 0.4); } button:focus, button:active { outline: 0; } .unselectable, div { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } .header { background-color: #006b2a; /* height: 45px; */ /* width: 100%; */ /* position: relative; */ /* z-index: 100; */ /* color: $white; */ /* margin-bottom: 10px; */ /* a:link { */ /* color: $white; */ /* } */ /* a:visited { */ /* color: $white; */ /* } */ /* a:hover { */ /* color: $white; */ /* } */ /* a:active { */ /* color: $white; */ /* } */ } .main-content { width: 1000px; min-height: 600px; margin-left: auto; margin-right: auto; background: #ffffff; /* border: 1px solid #ddd; */ /* border-color: #eee #ddd #ddd #eee; */ -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } #main-content { overflow: hidden; } .container, .game-container, .store, .greenhouse, .userGuide, .reportCard, .green-house, .rocket-room, .review, #videoContainer, .books, .laboratory, .schoolyard, .machineRoom, .muralRoom, .second-scene, .flashcards, .firstLetterFlashcard, .colorByNumbers, .storyBook, .storyBook .postAction .man, .wordSearch, .saveTheKing, .save-the-king, .save-the-king-group3, .save-the-king-group3-normal, .cardMatching, .listening, .listening-and-matching-book4, .listening_b1u3a1b, .listening_b1u4a9, .listening_b4u1a9, .listening_b4u4a11, .portraitRoom, .matching, .testBook, .circleMatching, .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0, .flashcard-matching, .signup, .signup-fail, .multipleChoice, .comic-b4u7a6, .comicb4u4a9, .comicb4u1a8, .comic-b4u8a5, .comicb1u8a5, .comic, .hopscotch-book3, .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1, .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2, .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3, .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4, .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5, .b4t1a5, .b4t2a5, .books-store, .video-room, .overlay-container, .disableInteractive { width: 1000px; margin-left: auto; margin-right: auto; } .footer { margin-top: 3em; padding: 1.5em; background: #006b2a; color: #fff; text-align: center; z-index: -1; } /** Story Book **/ .booklet .b-p0 { background-image: url("../assets/storyBook/booklet/shadow.png"); background-repeat: repeat-y; background-position: 100% 10px; } .booklet .b-p3 { background-image: url("../assets/storyBook/booklet/shadow.png"); background-repeat: repeat-y; background-position: 0 10px; } /** Spinner CSS **/ .spinner { margin: 50px auto; width: 50px; height: 30px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } .modal.loader .modal-dialog { position: absolute; top: 50%; left: 50%; width: 300px; height: 240px; margin-left: -150px; margin-top: -120px; } /** End of spinner animation **/ .row { margin: 0 !important; } .game-container, .store, .greenhouse, .userGuide, .reportCard, .green-house, .rocket-room, .review, #videoContainer, .books, .laboratory, .schoolyard, .machineRoom, .muralRoom, .second-scene, .flashcards, .firstLetterFlashcard, .colorByNumbers, .storyBook, .storyBook .postAction .man, .wordSearch, .saveTheKing, .save-the-king, .save-the-king-group3, .save-the-king-group3-normal, .cardMatching, .listening, .listening-and-matching-book4, .listening_b1u3a1b, .listening_b1u4a9, .listening_b4u1a9, .listening_b4u4a11, .portraitRoom, .matching, .testBook, .circleMatching, .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0, .flashcard-matching, .signup, .signup-fail, .multipleChoice, .comic-b4u7a6, .comicb4u4a9, .comicb4u1a8, .comic-b4u8a5, .comicb1u8a5, .comic, .hopscotch-book3, .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1, .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2, .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3, .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4, .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5, .b4t1a5, .b4t2a5, .books-store, .video-room { position: relative; width: 1000px; height: 600px; font-family: "VNF-ComicSans", sans-serif; overflow: hidden; } #videoContainer { position: absolute; top: 0; left: 0; } .overlay-container { width: 1000px; height: 600px; margin-top: -600px; font-family: "VNF-ComicSans", sans-serif; position: relative; z-index: 30; } .showItem { visibility: visible; } .hideItem { visibility: hidden; } .linkPointer { cursor: pointer; } .noPointer { cursor: initial; } .disableInteractive { position: absolute; width: 1000px; height: 600px; left: 0px; top: 0px; z-index: 30; } .loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100; background-color: white; opacity: .6; /* @extend .game-container; background-color:rgba(255,255,255,0.5); position:absolute; top: 0px; left: 0px;*/ } .loading .bar { position: absolute; left: 50%; top: 50%; margin-left: -20px; /* -1 * image width / 2 */ margin-top: -20px; /* -1 * image height / 2 */ display: block; /* background: #ff0000; height: 50px;*/ /*background-image: url(http://www.mariusposthumus.nl/stageVerslag/img/progressBar.png); width: 600px; overflow: hidden; height: 31px; position: absolute; background-position: initial initial; background-repeat: no-repeat no-repeat;*/ } .double-up { position: absolute; top: 0; left: 0; } img.mark { background: transparent; padding: 0; } /***************** BOOKS ******************/ .books { background-color: #fff; } .books .nav-tabs > li { width: 10%; padding: 2px; } .books .nav-tabs > li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ width: 96px; height: 133px; } .books .nav-tabs > li.active img { -webkit-filter: grayscale(0%); filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); } .books .nav-tabs > li:hover img { -webkit-filter: grayscale(50%); filter: grayscale(50%); filter: url("data:image/svg+xml;utf8,#grayscale"); } .books .nav-tabs > li > img:hover { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 96px; height: 133px; padding-left: 96px; } .books .nav-tabs > li > img#book1:hover { background: url("../assets/unit/book1-hover.png") no-repeat; } .books .nav-tabs > li > img#book2:hover { background: url("../assets/unit/book2-hover.png") no-repeat; } .books .nav-tabs > li > img#book3:hover { background: url("../assets/unit/book3-hover.png") no-repeat; } .books .nav-tabs > li > img#book4:hover { background: url("../assets/unit/book4-hover.png") no-repeat; } .books .nav-tabs > li > img#book5:hover { background: url("../assets/unit/book5-hover.png") no-repeat; } .books .nav-tabs > li > img#book6:hover { background: url("../assets/unit/book6-hover.png") no-repeat; } .books .nav-tabs > li > img#book7:hover { background: url("../assets/unit/book7-hover.png") no-repeat; } .books .nav-tabs > li > img#book8:hover { background: url("../assets/unit/book8-hover.png") no-repeat; } .books .nav-tabs > li > img#book9:hover { background: url("../assets/unit/book9-hover.png") no-repeat; } .books .nav-tabs > li > img#book10:hover { background: url("../assets/unit/book10-hover.png") no-repeat; } .books .nav-tabs > li > a { padding: 0; } .books .unit { float: left; width: 220px; height: 200px; margin-right: 10px; margin-left: 10px; position: relative; margin-top: 10px; } .books .unit img { position: absolute; left: 0; top: 0; width: 200px; height: 200px; } .books .unit.disabled img { -webkit-filter: grayscale(30%); filter: grayscale(30%); } #tabs { width: 95%; margin-left: auto; margin-right: auto; margin-top: 10px; } .tab-content, .tab-pane { height: 430px; } /***************** ARROWS ******************/ .arrows { position: absolute; width: 1000px; margin-top: 261px; cursor: pointer; } .arrows .left, .arrows .right { position: absolute; width: 110px; height: 73px; } .arrows .glow-it { z-index: 5; } .arrows .left { left: 0; } .arrows .right { right: 0; } /***************** LABORATORY ******************/ .laboratory .left, .schoolyard .left { position: absolute; margin-top: 320px; cursor: pointer; width: 110px; left: 20px; z-index: 20; } .laboratory .right, .schoolyard .right { position: absolute; margin-top: 320px; cursor: pointer; width: 110px; left: 870px; z-index: 20; } /***************** MACHINE ROOM ******************/ /***************** MURAL ROOM ******************/ /***************** Second Scene ******************/ /***************** FLASHCARDS ******************/ .flashcards .flashcards-box { margin-left: 130px; padding-top: 50px; width: 770px; position: relative; z-index: 100; height: 500px; } .flashcards .flashcards-box div { width: 150px; float: left; } .flashcards .flashcards-box div:nth-child(6) { margin-left: 150px; } /***************** MODAL ESSENTIAL ******************/ .modal-content { position: relative; z-index: 1000; } .modal { display: block; } .modal-body:before, .modal-body:after { display: table; content: " "; } .modal-header:before, .modal-header:after { display: table; content: " "; } .large { width: 1000px; height: 600px; left: -250px; margin-left: auto; margin-right: auto; } .modal-header, .modal-footer { border: none; } .modal-dialog { width: 1000px; } /***************** TOKENS ******************/ .tokenContainer { position: absolute; z-index: 30; width: 120px; height: 40px; float: right; margin-top: 10px; margin-left: 870px; } .tokens { font-size: 1.4em; padding: 5px; color: #000; background-color: #fff; background: rgba(255, 255, 255, 0.5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Safari 1.x */ -khtml-opacity: 1; /* Good browsers */ opacity: 1 !important; } .tokens span { width: 90px; /*padding-right: 38px;*/ text-align: right; } .tokens img { float: right; width: 34px; padding: 1px; margin-right: 0; } /***************** MISSING WORD ******************/ .missingWord { background: rgba(255, 255, 255, 0.75); position: absolute; bottom: 10px; right: 10px; color: #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 0px 30px; z-index: 99; } .missingWord .letter { float: left; width: 50px; font-size: 3.5em; padding: 1px 5px; text-shadow: 1px 1px white; } .missingWord .letterShow { position: absolute; } .readySetGo { position: absolute; top: 20%; left: 37%; text-align: center; width: 25%; margin-left: auto; margin-right: auto; } .mobilePlay { position: absolute; text-align: center; display: inline-block; width: 100%; height: 100%; z-index: 30; } .mobilePlay img { display: inline-block; vertical-align: middle; position: absolute; cursor: pointer; top: 50%; left: 50%; width: 300px; height: 300px; margin-top: -150px; /* Half the height */ margin-left: -150px; /* Half the width */ } /***************** FIRST LETTER FLASHCARD ******************/ .firstLetterFlashcard { background: url("../assets/firstLetterFlashcard/firstLetterFlashcard-background.png"); } .firstLetterFlashcard .flashcard { float: left; margin-top: 80px; margin-left: 50px; } .firstLetterFlashcard .alphabet { float: right; width: 380px; height: 500px; font-size: 4em; font-family: "VNF-ComicSans", sans-serif; margin-right: 80px; text-align: center; margin-top: 80px; } .firstLetterFlashcard .alphabet div { cursor: pointer; width: 75px; height: 70px; float: left; } /***************** COLOR BY NUMBERS ******************/ .colorByNumbers { background: url('../assets/common/color-by-numbers-background.jpg?1742470475') repeat; padding-top: 20px; } .colorByNumbers .color-me { position: relative; background-color: #fff; border: #000 solid 1px; overflow: hidden; } .colorByNumbers .colorbox img { padding: 5px; cursor: pointer; } .colorByNumbers.default .color-me { width: 550px; height: 550px; float: left; margin-left: 20px; } .colorByNumbers.default .colorbox { margin-right: 75px; width: 300px; height: 600px; float: right; } .colorByNumbers.default #colorByNumberPic { height: 550px; width: 550px; margin-top: -550px; } .colorByNumbers.wide .color-me { width: 640px; height: 384px; margin: 10px auto; } .colorByNumbers.wide .colorbox { text-align: center; padding-left: 45px; margin-top: 1.5em; } .colorByNumbers.wide .colorbox img { width: 90px; height: 90px; } .colorByNumbers.wide #colorByNumberPic { width: 640px; height: 384px; margin-top: -384px; } .colorByNumbers.wide #colorByNumberPic-b1u6s3 { height: 515px; margin-top: -384px; float: center; } .colorByNumbers.wide .colorByNumbers-img, .colorByNumbers.wide .colorByNumbers-part-img { width: 640px; height: 384px; } .colorByNumbers.wide .colorByNumbers-img-b1u6s3, .colorByNumbers.wide .colorByNumbers-part-img-b1u6s3 { float: center; height: 515px; } .number { width: 150px; height: 150px; padding-top: 70px; text-align: center; font-weight: bold; color: #006b2a; z-index: 1; font-size: x-large; } .visible { visibility: visible; } .hidden { visibility: hidden; } /***************** MATCHING GAME ******************/ .matchingGame { width: 1000px; height: 600px; /*background-image: url('../assets/matching/matching-background.jpg');*/ overflow: hidden; position: relative; z-index: 101; } .lowerLetterContainer { div: nth-child(1); div-display: none; div-background-color: #000 !important; } .capitalLetter { div: nth-child(1); /*display:none;*/ div-background-color: #000 !important; } .capital-container { background-image: url("../assets/matching/splatter.png"); } /***************** STORY BOOK ******************/ .storyBook { background: #ba6628 url('../assets/storyBook/background.jpg?1742470476') no-repeat center center; z-index: zindex-gameLevel1; } .storyBook .postAction { position: absolute; top: 0px; left: 0px; width: 1000px; height: 600px; z-index: 20; } .storyBook .postAction .man .soundbutton { position: absolute; cursor: pointer; top: 5px; left: 0px; width: 38px; height: 38px; background-image: url("../assets/storyBook/sounds-normal.png"); } .storyBook .postAction .man .soundbutton:hover { background-image: url("../assets/storyBook/sounds-hover.png"); } .storyBook .postAction .man .wordbutton, .storyBook .postAction .man .manbutton, .storyBook .postAction .man .boysbutton, .storyBook .postAction .man .parkbutton, .storyBook .postAction .man .stickbutton, .storyBook .postAction .man .stringbutton, .storyBook .postAction .man .oldbutton, .storyBook .postAction .man .longbutton, .storyBook .postAction .man .strongbutton, .storyBook .postAction .man .happybutton { position: absolute; cursor: pointer; top: 0px; left: 25px; width: 104px; height: 38px; } .storyBook .postAction .man .manbutton { background-image: url("../assets/storyBook/ant/act/ant-normal.png"); } .storyBook .postAction .man .manbutton:hover { background-image: url("../assets/storyBook/ant/act/ant-hover.png"); } .storyBook .postAction .man .boysbutton { background-image: url("../assets/storyBook/ant/act/duck-normal.png"); } .storyBook .postAction .man .boysbutton:hover { background-image: url("../assets/storyBook/ant/act/duck-hover.png"); } .storyBook .postAction .man .parkbutton { background-image: url("../assets/storyBook/ant/act/hunter-normal.png"); } .storyBook .postAction .man .parkbutton:hover { background-image: url("../assets/storyBook/ant/act/hunter-hover.png"); } .storyBook .postAction .man .stickbutton { background-image: url("../assets/storyBook/ant/act/river-normal.png"); } .storyBook .postAction .man .stickbutton:hover { background-image: url("../assets/storyBook/ant/act/river-hover.png"); } .storyBook .postAction .man .stringbutton { background-image: url("../assets/storyBook/ant/act/river-normal.png"); } .storyBook .postAction .man .stringbutton:hover { background-image: url("../assets/storyBook/ant/act/river-hover.png"); } .storyBook .postAction .man .oldbutton { background-image: url("../assets/storyBook/ant/act/river-normal.png"); } .storyBook .postAction .man .oldbutton:hover { background-image: url("../assets/storyBook/ant/act/river-hover.png"); } .storyBook .postAction .man .longbutton { background-image: url("../assets/storyBook/ant/act/river-normal.png"); } .storyBook .postAction .man .longbutton:hover { background-image: url("../assets/storyBook/ant/act/river-hover.png"); } .storyBook .postAction .man .strongbutton { background-image: url("../assets/storyBook/ant/act/river-normal.png"); } .storyBook .postAction .man .strongbutton:hover { background-image: url("../assets/storyBook/ant/act/river-hover.png"); } .storyBook .postAction .man .happybutton { background-image: url("../assets/storyBook/ant/act/river-normal.png"); } .storyBook .postAction .man .happybutton:hover { background-image: url("../assets/storyBook/ant/act/river-hover.png"); } .storyBook .postAction .man .colorbutton, .storyBook .postAction .man .blueButton, .storyBook .postAction .man .brownButton, .storyBook .postAction .man .pinkButton { width: 98px; height: 84px; position: absolute; } .storyBook .postAction .man .blueButton { background-image: url("../assets/storyBook/ant/act/blue-normal.png"); } .storyBook .postAction .man .blueButton:hover { background-image: url("../assets/storyBook/ant/act/blue-click.png"); } .storyBook .postAction .man .brownButton { background-image: url("../assets/storyBook/ant/act/brown-normal.png"); } .storyBook .postAction .man .brownButton:hover { background-image: url("../assets/storyBook/ant/act/brown-click.png"); } .storyBook .postAction .man .pinkButton { background-image: url("../assets/storyBook/ant/act/red-normal.png"); } .storyBook .postAction .man .pinkButton:hover { background-image: url("../assets/storyBook/ant/act/red-click.png"); } .storyBook .audioAction { width: 1000px; height: 600px; position: absolute; top: 0px; left: 0px; } .storyBook .audioAction .prevPage { position: absolute; top: 50%; left: 10px; width: 69px; height: 81px; margin-top: -41px; z-index: 20; cursor: pointer; background-image: url("../assets/storyBook/preview-normal.png"); } .storyBook .audioAction .prevPage:hover { background-image: url("../assets/storyBook/preview-over.png"); } .storyBook .audioAction .dispPage1 { position: absolute; top: 0px; left: 0px; width: 50%; height: 100%; } .storyBook .audioAction .dispPage2 { position: absolute; top: 0px; left: 50%; width: 50%; height: 100%; } .storyBook .audioAction .nextPage { position: absolute; top: 50%; left: 100%; width: 69px; height: 81px; margin-top: -41px; margin-left: -85px; z-index: 20; cursor: pointer; background-image: url("../assets/storyBook/next-normal.png"); } .storyBook .audioAction .nextPage:hover { background-image: url("../assets/storyBook/next-over.png"); } /***************** * Wordsearch game ******************/ .wordSearch { background-size: 1000px 600px; overflow: hidden; } .wordSearch .resultsPanel { width: 40%; height: 100%; float: left; padding-top: 60px; position: relative; } .wordSearch .resultsPanel .results { width: 100%; height: 100%; } .wordSearch .resultsPanel .results .resultImg { width: 120px; height: 120px; margin: 5px; position: absolute; } .wordSearch .resultsPanel .results .resultImg_ext { width: 100px; height: 100px; margin: 5px; position: absolute; } .wordSearch .resultsPanel .results .checkMark { color: #008000; font-size: 6em; margin-left: 40px; position: absolute; } .wordSearch .resultsPanel .results .wordBound { cursor: pointer; width: 170px; height: 35px; margin: 6px; font-size: 1.5em; color: black; text-align: left; background: white; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-left: 10px; float: left; } .wordSearch .leftPanel { width: 61%; height: 100%; padding: 35px; padding-top: 60px; float: left; /* background: rgb(0, 128, 0); background: rgba(0, 128, 0, .5);*/ } .wordSearch .leftPanel .cell { font-weight: bold; padding: 4px; display: inline-block; text-align: center; position: relative; cursor: pointer; border: 1px solid #5B5752; } .wordSearch .leftPanel .wordDot { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 5px; height: 5px; border-style: solid; position: absolute; } .wordSearch .leftPanel .wordBox { height: 30px; border: 3px solid; z-index: 30; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: absolute; } .wordSearch .leftPanel .dir_90 { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .wordSearch .leftPanel .dir_45 { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .wordSearch .leftPanel .dir_m45 { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } /***************** * Wordsearch Hint button ******************/ .hintWSContainer { position: absolute; } .hintWSContainer .buttonHintWS { background-image: url("../assets/book1/wordSearch/hint.png"); display: inline-block; width: 95px; height: 40px; cursor: pointer; } .hintWSContainer .buttonHintWS:hover { background-image: url("../assets/book1/wordSearch/hint-glow.png"); } .hintWSContainer .dotHintWS { margin-left: 15px; } .hintWSContainer .circleHintWSSelect { float: left; margin-left: -10px; margin-top: -40px; color: #ffff00; font-size: 40px; } .hintWSContainer .circleHintWS { float: left; margin-left: -10px; margin-top: -40px; color: white; font-size: 40px; } /***************** SAVE THE KING ******************/ .saveTheKing { position: relative; background-image: url("../assets/saveTheKing/saveTheKing-background.jpg"); } .saveTheKing .alphabet-container { background-image: url("../assets/saveTheKing/alphabet-container.png"); background-repeat: no-repeat; position: relative; margin-left: 485px; margin-top: 10px; height: 290px; } .saveTheKing .alphabet-container div { width: 290px; margin-left: 60px; padding-top: 10px; } .saveTheKing .alphabet-container div:disabled { color: red !important; } .saveTheKing .alphabet-container div disabled { color: purple !important; } .saveTheKing .alphabet-container div .disabled { color: orange !important; } .saveTheKing .alphabet-container div input { font-family: "VNF-ComicSans", sans-serif; font-size: 2.3em !important; background-color: transparent !important; border: none !important; cursor: pointer; padding: 4px; padding-right: 10px; } .saveTheKing .alphabet-container div input:active, .saveTheKing .alphabet-container div input:hover, .saveTheKing .alphabet-container div input:focus { background: none transparent; border: none; outline: none; } .saveTheKing .alphabet-container div input input:disabled { color: #333333; } .saveTheKing .alphabet-container div input:disabled { color: #666666 !important; } .saveTheKing .target-word { background-image: url("../assets/saveTheKing/target-word-container.png"); position: relative; background-repeat: no-repeat; margin-left: 390px; margin-top: -60px; width: 645px; height: 200px; padding-top: 30px; padding-left: 60px; /*margin-left: 500px; margin-top: -60px; width: 470px; height: 200px; padding-top: 30px; padding-left: 30px;*/ } .saveTheKing .king-container { position: relative; margin-left: 0px; margin-top: 0px; width: 130px; float: left; display: none; } .saveTheKing .king-container #abe-king { background: url("../assets/saveTheKing/king-step-5.png") 0 0 no-repeat; width: 116px; height: 186px; margin-top: -19px; margin-left: 168px; } .saveTheKing .king-container .abe-first-step { -webkit-animation: king-first-step 0.3s steps(2); -moz-animation: king-first-step 0.3s steps(2); -ms-animation: king-first-step 0.3s steps(2); -o-animation: king-first-step 0.3s steps(2); animation: king-first-step 0.3s steps(2); } .saveTheKing .king-container .abe-second-step { -webkit-animation: king-second-step 0.3s steps(2); -moz-animation: king-second-step 0.3s steps(2); -ms-animation: king-second-step 0.3s steps(2); -o-animation: king-second-step 0.3s steps(2); animation: king-second-step 0.3s steps(2); } .saveTheKing .king-container .abe-thumbs-up { -webkit-animation: king-thumbs-up 1s steps(2); -moz-animation: king-thumbs-up 1s steps(2); -ms-animation: king-thumbs-up 1s steps(2); -o-animation: king-thumbs-up 1s steps(2); animation: king-thumbs-up 1s steps(2); } .saveTheKing #hint-bubble { position: relative; background: url("../assets/saveTheKing/hint-bubble.png") 0 0 no-repeat; width: 149px; height: 129px; margin-left: 60px; margin-top: 40px; text-align: center; } .saveTheKing #hint-bubble img { padding-top: 15px; } /** Save the king style rules for books 2, 5 & 8 */ .save-the-king { position: relative; background-image: url("../assets/common/group2/save-the-king/saveTheKing-background.jpg"); } .save-the-king .alphabet-container { background-image: url("../assets/saveTheKing/alphabet-container.png"); background-repeat: no-repeat; position: absolute; width: 500px; margin-left: -30px; margin-top: 140px; height: 310px; } .save-the-king .alphabet-container div { width: 290px; margin-left: 60px; padding-top: 10px; } .save-the-king .alphabet-container div:disabled { color: red !important; } .save-the-king .alphabet-container div disabled { color: purple !important; } .save-the-king .alphabet-container div .disabled { color: orange !important; } .save-the-king .alphabet-container div input { font-family: "VNF-ComicSans", sans-serif; font-size: 2.3em !important; background-color: transparent !important; border: none !important; cursor: pointer; padding: 4px; padding-right: 10px; } .save-the-king .alphabet-container div input:active, .save-the-king .alphabet-container div input:hover, .save-the-king .alphabet-container div input:focus { background: none transparent; border: none; outline: none; } .save-the-king .alphabet-container div input input:disabled { color: #333333; } .save-the-king .alphabet-container div input:disabled { color: #666666 !important; } .save-the-king .target-word { background-image: url("../assets/saveTheKing/target-word-container.png"); position: relative; background-repeat: no-repeat; margin-left: -30px; margin-top: -10px; width: 645px; height: 150px; padding-top: 40px; padding-left: 60px; /*margin-left: 500px; margin-top: -60px; width: 470px; height: 200px; padding-top: 30px; padding-left: 30px;*/ } .save-the-king .king-container { position: absolute; margin-left: 425px; margin-top: 0px; width: 130px; float: right; display: none; } .save-the-king .king-container #abe-king { background: url("../assets/saveTheKing/king-step-5.png") 0 0 no-repeat; width: 116px; height: 186px; margin-top: -19px; margin-left: 168px; } .save-the-king .king-container .abe-first-step { -webkit-animation: king-first-step 0.3s steps(2); -moz-animation: king-first-step 0.3s steps(2); -ms-animation: king-first-step 0.3s steps(2); -o-animation: king-first-step 0.3s steps(2); animation: king-first-step 0.3s steps(2); } .save-the-king .king-container .abe-second-step { -webkit-animation: king-second-step 0.3s steps(2); -moz-animation: king-second-step 0.3s steps(2); -ms-animation: king-second-step 0.3s steps(2); -o-animation: king-second-step 0.3s steps(2); animation: king-second-step 0.3s steps(2); } .save-the-king .king-container .abe-thumbs-up { -webkit-animation: king-thumbs-up 1s steps(2); -moz-animation: king-thumbs-up 1s steps(2); -ms-animation: king-thumbs-up 1s steps(2); -o-animation: king-thumbs-up 1s steps(2); animation: king-thumbs-up 1s steps(2); } .save-the-king #hint-bubble { position: relative; background: url("../assets/saveTheKing/hint-bubble.png") 0 0 no-repeat; width: 149px; height: 129px; margin-left: 60px; margin-top: 40px; text-align: center; z-index: 100; } .save-the-king #hint-bubble img { padding-top: 15px; } /** Save the king style rules for books 3, 6 & 9 */ .save-the-king-group3 { position: relative; background-image: url("../assets/common/group3/save-the-king/saveTheKing-background.jpg"); } .save-the-king-group3 .alphabet-container { background-image: url("../assets/saveTheKing/alphabet-container.png"); background-repeat: no-repeat; position: relative; margin-left: 485px; margin-top: 60px; height: 290px; } .save-the-king-group3 .alphabet-container div { width: 290px; margin-left: 60px; padding-top: 10px; } .save-the-king-group3 .alphabet-container div:disabled { color: red !important; } .save-the-king-group3 .alphabet-container div disabled { color: purple !important; } .save-the-king-group3 .alphabet-container div .disabled { color: orange !important; } .save-the-king-group3 .alphabet-container div input { font-family: "VNF-ComicSans", sans-serif; font-size: 2.3em !important; background-color: transparent !important; border: none !important; cursor: pointer; padding: 4px; padding-right: 10px; } .save-the-king-group3 .alphabet-container div input:active, .save-the-king-group3 .alphabet-container div input:hover, .save-the-king-group3 .alphabet-container div input:focus { background: none transparent; border: none; outline: none; } .save-the-king-group3 .alphabet-container div input input:disabled { color: #333333; } .save-the-king-group3 .alphabet-container div input:disabled { color: #666666 !important; } .save-the-king-group3 .target-word { background-image: url("../assets/saveTheKing/target-word-container.png"); background-repeat: no-repeat; margin-left: 320px; margin-top: -60px; width: 680px; height: 160px; padding-top: 64px; padding-left: 49px; background-size: 720px 185px; } .save-the-king-group3 .king-container { position: relative; margin-left: 0px; margin-top: 0px; width: 130px; float: left; display: none; } .save-the-king-group3 .king-container #abe-king { background: url("../assets/common/group3/save-the-king/king-step-5.png") 0 0 no-repeat; width: 94px; height: 152px; margin-top: -30px; margin-left: 265px; } .save-the-king-group3 .king-container .abe-first-step { -webkit-animation: group3-king-first-step 0.3s steps(2); -moz-animation: group3-king-first-step 0.3s steps(2); -ms-animation: group3-king-first-step 0.3s steps(2); -o-animation: group3-king-first-step 0.3s steps(2); animation: group3-king-first-step 0.3s steps(2); } .save-the-king-group3 .king-container .abe-second-step { -webkit-animation: group3-king-second-step 0.3s steps(2); -moz-animation: group3-king-second-step 0.3s steps(2); -ms-animation: group3-king-second-step 0.3s steps(2); -o-animation: group3-king-second-step 0.3s steps(2); animation: group3-king-second-step 0.3s steps(2); } .save-the-king-group3 .king-container .abe-thumbs-up { -webkit-animation: group3-king-thumbs-up 1s steps(2); -moz-animation: group3-king-thumbs-up 1s steps(2); -ms-animation: group3-king-thumbs-up 1s steps(2); -o-animation: group3-king-thumbs-up 1s steps(2); animation: group3-king-thumbs-up 1s steps(2); } .save-the-king-group3 #hint-bubble { position: relative; background: url("../assets/saveTheKing/hint-bubble.png") 0 0 no-repeat; width: 149px; height: 129px; margin-left: 140px; margin-top: 10px; text-align: center; } .save-the-king-group3 #hint-bubble img { padding-top: 15px; } .save-the-king-group3 .firework { position: absolute; top: 0px; } .save-the-king-group3-normal { position: relative; background-image: url("../assets/common/group3/save-the-king/saveTheKing-background.jpg"); } .save-the-king-group3-normal .alphabet-container { background-image: url("../assets/saveTheKing/alphabet-container.png"); background-repeat: no-repeat; position: relative; margin-left: 485px; margin-top: 60px; height: 290px; } .save-the-king-group3-normal .alphabet-container div { width: 290px; margin-left: 60px; padding-top: 10px; } .save-the-king-group3-normal .alphabet-container div:disabled { color: red !important; } .save-the-king-group3-normal .alphabet-container div disabled { color: purple !important; } .save-the-king-group3-normal .alphabet-container div .disabled { color: orange !important; } .save-the-king-group3-normal .alphabet-container div input { font-family: "VNF-ComicSans", sans-serif; font-size: 2.3em !important; background-color: transparent !important; border: none !important; cursor: pointer; padding: 4px; padding-right: 10px; } .save-the-king-group3-normal .alphabet-container div input:active, .save-the-king-group3-normal .alphabet-container div input:hover, .save-the-king-group3-normal .alphabet-container div input:focus { background: none transparent; border: none; outline: none; } .save-the-king-group3-normal .alphabet-container div input input:disabled { color: #333333; } .save-the-king-group3-normal .alphabet-container div input:disabled { color: #666666 !important; } .save-the-king-group3-normal .target-word { background-image: url("../assets/saveTheKing/target-word-container.png"); background-repeat: no-repeat; margin-left: 360px; margin-top: -60px; width: 680px; height: 160px; padding-top: 37px; padding-left: 49px; } .save-the-king-group3-normal .king-container { position: relative; margin-left: 0px; margin-top: 0px; width: 130px; float: left; display: none; } .save-the-king-group3-normal .king-container #abe-king { background: url("../assets/common/group3/save-the-king/king-step-5.png") 0 0 no-repeat; width: 94px; height: 152px; margin-top: -30px; margin-left: 265px; } .save-the-king-group3-normal .king-container .abe-first-step { -webkit-animation: group3-king-first-step 0.3s steps(2); -moz-animation: group3-king-first-step 0.3s steps(2); -ms-animation: group3-king-first-step 0.3s steps(2); -o-animation: group3-king-first-step 0.3s steps(2); animation: group3-king-first-step 0.3s steps(2); } .save-the-king-group3-normal .king-container .abe-second-step { -webkit-animation: group3-king-second-step 0.3s steps(2); -moz-animation: group3-king-second-step 0.3s steps(2); -ms-animation: group3-king-second-step 0.3s steps(2); -o-animation: group3-king-second-step 0.3s steps(2); animation: group3-king-second-step 0.3s steps(2); } .save-the-king-group3-normal .king-container .abe-thumbs-up { -webkit-animation: group3-king-thumbs-up 1s steps(2); -moz-animation: group3-king-thumbs-up 1s steps(2); -ms-animation: group3-king-thumbs-up 1s steps(2); -o-animation: group3-king-thumbs-up 1s steps(2); animation: group3-king-thumbs-up 1s steps(2); } .save-the-king-group3-normal #hint-bubble { position: relative; background: url("../assets/saveTheKing/hint-bubble.png") 0 0 no-repeat; width: 149px; height: 129px; margin-left: 140px; margin-top: 10px; text-align: center; } .save-the-king-group3-normal #hint-bubble img { padding-top: 15px; } .save-the-king-group3-normal .firework { position: absolute; top: 0px; } /***************** CARD MATCHING ******************/ .cardMatching .markContainer { width: 200px; height: 200px; position: absolute; left: 358px; top: 230px; opacity: 0; z-index: 0; } .cardMatching .results { width: 180px; height: 300px; position: absolute; right: 0; top: 120px; } .cardMatching .results div { height: 110px; font-size: 1.6em; text-align: center; } .cardMatching .results div span { font-size: 1.5em; } .cardMatching .countUp { position: absolute; right: 21px; top: 507px; height: 60px; width: 150px; color: #000000; background: #ffffff; font-size: 2em; text-align: center; border: #000000 1px solid; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-top: 8px; } .cardGame div { font-size: 30px; } .cardGame .container, .cardGame .game-container, .cardGame .store, .cardGame .greenhouse, .cardGame .userGuide, .cardGame .reportCard, .cardGame .green-house, .cardGame .rocket-room, .cardGame .review, .cardGame #videoContainer, .cardGame .books, .cardGame .laboratory, .cardGame .schoolyard, .cardGame .machineRoom, .cardGame .muralRoom, .cardGame .second-scene, .cardGame .flashcards, .cardGame .firstLetterFlashcard, .cardGame .colorByNumbers, .cardGame .storyBook, .cardGame .storyBook .postAction .man, .storyBook .postAction .cardGame .man, .cardGame .wordSearch, .cardGame .saveTheKing, .cardGame .save-the-king, .cardGame .save-the-king-group3, .cardGame .save-the-king-group3-normal, .cardGame .cardMatching, .cardGame .listening, .cardGame .listening-and-matching-book4, .cardGame .listening_b1u3a1b, .cardGame .listening_b1u4a9, .cardGame .listening_b4u1a9, .cardGame .listening_b4u4a11, .cardGame .portraitRoom, .cardGame .matching, .cardGame .testBook, .cardGame .circleMatching, .cardGame .report-card-base, .cardGame .reportListClass, .cardGame .report-card-b1t1, .cardGame .report-card-b1t2, .cardGame .report-card-b1t0, .cardGame .flashcard-matching, .cardGame .signup, .cardGame .signup-fail, .cardGame .multipleChoice, .cardGame .comic-b4u7a6, .cardGame .comicb4u4a9, .cardGame .comicb4u1a8, .cardGame .comic-b4u8a5, .cardGame .comicb1u8a5, .cardGame .comic, .cardGame .hopscotch-book3, .cardGame .b4t1a1, .cardGame .b4t2a1, .cardGame .b7t1a1, .cardGame .b7t2a1, .cardGame .b10t1a1, .cardGame .b10t2a1, .cardGame .b4t1a2, .cardGame .b4t2a2, .cardGame .b7t1a2, .cardGame .b7t2a2, .cardGame .b10t1a2, .cardGame .b10t2a2, .cardGame .b4t1a3, .cardGame .b4t2a3, .cardGame .b7t1a3, .cardGame .b7t2a3, .cardGame .b10t1a3, .cardGame .b10t2a3, .cardGame .b4t1a4, .cardGame .b4t2a4, .cardGame .b7t1a4, .cardGame .b7t2a4, .cardGame .b10t1a4, .cardGame .b10t2a4, .cardGame .b7t1a5, .cardGame .b7t2a5, .cardGame .b10t1a5, .cardGame .b10t2a5, .cardGame .b4t1a5, .cardGame .b4t2a5, .cardGame .books-store, .cardGame .video-room, .cardGame .overlay-container, .cardGame .disableInteractive { position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .cardGame .card { -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .cardGame .card.flipped { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .cardGame .card img { display: block; height: 100%; width: 100%; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .cardGame .card .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); z-index: 50; } .cardGame .card .front { z-index: 55; } .cardGame .card.flipped .front { z-index: 45; } /***************** LISTENING ******************/ .listening { background-image: url("../assets/common/backgrounds/purple-background.jpg"); width: 1000px; height: 600px; position: relative; top: 0; left: 0; } .listening .pic-item-img { width: 120px; height: 120px; position: absolute; } .listening .speakercontainer { padding-left: 100px; padding-top: 30px; } .listening .imgspeaker { cursor: pointer; background-size: 67px 68px; background-image: url("../assets/book4/unit4/listening/speaker_off.png"); } .listening .imgspeaker:hover { background-image: url("../assets/book4/unit4/listening/speaker_on.png"); background-repeat: no-repeat; } .listening .listeningbox-ext { margin-left: 10px; margin-top: 80px; } .listening .listeningbox { margin-left: 50px; margin-top: 0px; } .listening .pull-left { padding: 40px; } .listening .pull-left-b1u4a9 { padding: 1px; } .listening .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .listening .roundTitle span { font-size: 1.5em; } .listening .imgbox { width: 140px; height: 140px; cursor: pointer; } .listening-and-matching-book4 { background-image: url("../assets/book4/unit6/listening/b4u6a9/b4u6a9-listening-and-matching-background.jpg"); width: 1000px; height: 600px; position: relative; top: 0; left: 0; } .listening-and-matching-book4 .imgspeaker-ext { left: 220px; top: 15px; cursor: pointer; position: absolute; background-image: url("../assets/book4/unit4/listening/speaker_off.png"); } .listening-and-matching-book4 .imgspeaker-ext:hover { background-image: url("../assets/book4/unit4/listening/speaker_on.png"); background-repeat: no-repeat; } .listening-and-matching-book4 .imgClass { position: absolute; cursor: pointer; } .listening-and-matching-book4 .check { position: absolute; top: 255px; left: 580px; } .listening-and-matching-book4 .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .listening-and-matching-book4 .roundTitle span { font-size: 1.5em; } .listening-and-matching-book4 .count-down { position: absolute; left: 44px; top: 19px; height: 60px; width: 150px; background-color: #f5f951; color: #000; font-size: 2em; text-align: center; border: #000 1px solid; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-top: 8px; } .listening_b1u3a1b { background-image: url("../assets/common/backgrounds/abes-ears-background.jpg"); width: 1000px; height: 600px; position: relative; top: 0; left: 0; } .listening_b1u3a1b .speakercontainer { padding-left: 100px; padding-top: 30px; } .listening_b1u3a1b .imgspeaker { cursor: pointer; background-size: 67px 68px; background-image: url("../assets/book4/unit4/listening/speaker_off.png"); } .listening_b1u3a1b .imgspeaker:hover { background-image: url("../assets/book4/unit4/listening/speaker_on.png"); background-repeat: no-repeat; } .listening_b1u3a1b .listeningbox { margin-left: 50px; } .listening_b1u3a1b .pull-left { padding: 10px; } .listening_b1u3a1b .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .listening_b1u3a1b .roundTitle span { font-size: 1.5em; } .listening_b1u3a1b .imgbox { width: 140px; height: 140px; cursor: pointer; } .listening_b1u4a9 { background-image: url("../assets/common/backgrounds/abes-ears-background.jpg"); width: 1000px; height: 600px; position: relative; top: 0; left: 0; } .listening_b1u4a9 .speakercontainer { padding-left: 100px; padding-top: 30px; } .listening_b1u4a9 .imgspeaker { padding-left: 100px; padding-top: 30px; cursor: pointer; width: 67px; height: 68px; background-image: url("../assets/book4/unit4/listening/speaker_off.png"); } .listening_b1u4a9 .imgspeaker:hover { background-image: url("../assets/book4/unit4/listening/speaker_on.png"); background-repeat: no-repeat; } .listening_b1u4a9 .listeningbox { margin-left: 50px; } .listening_b1u4a9 .pull-left { padding: 1px; } .listening_b1u4a9 .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .listening_b1u4a9 .roundTitle span { font-size: 1.5em; } .listening_b1u4a9 .imgbox { width: 140px; height: 140px; cursor: pointer; } .listening_b4u1a9 { background-image: url("../assets/common/backgrounds/purple-background.jpg"); width: 1000px; height: 600px; position: relative; top: 0; left: 0; } .listening_b4u1a9 .speakercontainer { padding-left: 100px; padding-top: 30px; } .listening_b4u1a9 .imgspeaker { cursor: pointer; width: 67px; height: 68px; background-image: url("../assets/book4/unit4/listening/speaker_off.png"); } .listening_b4u1a9 .imgspeaker:hover { background-image: url("../assets/book4/unit4/listening/speaker_on.png"); background-repeat: no-repeat; } .listening_b4u1a9 .listeningbox { margin-left: 20px; margin-top: 25px; } .listening_b4u1a9 .pull-left { padding: 10px; } .listening_b4u1a9 .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .listening_b4u1a9 .roundTitle span { font-size: 1.5em; } .listening_b4u1a9 .imgbox { width: 140px; height: 140px; cursor: pointer; } .listening_b4u4a11 { background-image: url("../assets/common/backgrounds/abes-ears-background.jpg"); width: 1000px; height: 600px; position: relative; top: 0; left: 0; } .listening_b4u4a11 .speakercontainer { padding-left: 100px; padding-top: 30px; } .listening_b4u4a11 .imgspeaker { cursor: pointer; width: 67px; height: 68px; background-image: url("../assets/book4/unit4/listening/speaker_off.png"); } .listening_b4u4a11 .imgspeaker:hover { background-image: url("../assets/book4/unit4/listening/speaker_on.png"); background-repeat: no-repeat; } .listening_b4u4a11 .listeningbox { margin-left: 20px; margin-top: 25px; } .listening_b4u4a11 .pull-left { padding: 15px; } .listening_b4u4a11 .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .listening_b4u4a11 .roundTitle span { font-size: 1.5em; } .listening_b4u4a11 .imgbox { width: 140px; height: 140px; cursor: pointer; background-image: url("../assets/book4/unit4/listening/cloud-bg.png"); background-repeat: round; } /***************** PORTRAIT ROOM ******************/ .portraitRoom { background-image: url("../assets/book1/unit1/portraitRoom/b1u1s3/b1u1s3-portraitRoom-background.jpg"); } .portraitRoom #robot { width: 240px; } #portrait-wall { margin-top: -230px; overflow: hidden; position: relative; z-index: 50; } #portrait-wall div { float: left; /*cursor: pointer;*/ } #portrait-wall div:nth-child(1) { margin-left: 200px; } #portrait-wall div:nth-child(2) { width: 600px !important; } #portrait-wall div:nth-child(8) { margin-top: -40px; margin-left: 70px; } #portrait-wall div:nth-child(9) { margin-top: -40px; } .angledArrow { transform: rotate(310deg); -ms-transform: rotate(310deg); /* IE 9 */ -webkit-transform: rotate(310deg); /* Safari and Chrome */ } /***************** * Matching letter, number ******************/ /***************** * Matching letter, number ******************/ .matching { background-size: 1000px 600px; overflow: hidden; } .matching.b2u1a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/orange-stars.jpg?1742470475') no-repeat center center; } .matching.b2u1a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; line-height: 100px; } .matching.b2u1a1 .spanAnswersText { display: inline-block; vertical-align: middle; line-height: normal; } .matching.b2u2a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/pink-waves.jpg?1742470475') no-repeat center center; } .matching.b2u2a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 26px; color: black; border: none; } .matching.b2u4a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/light-sky.jpg?1742470474') no-repeat center center; } .matching.b2u4a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 20px; color: black; background-color: white; border: #000000 2px solid; height: 100px; width: 100px; padding-top: 30px; } .matching.b2u6a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/butterfly.jpg?1742470474') no-repeat center center; } .matching.b2u6a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 26px; color: black; border: none; } .matching.b2u6a1 .roundTitleUnit { font-size: 16px; width: 120px; border: #629ed3 2px solid; background: #aadff0; } .matching.b2u8a3 { background: #fab9e3 url('../assets/../assets/common/backgrounds/panda.jpg?1742470475') no-repeat center center; } .matching.b2u8a3 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: #db4197; line-height: 70px; width: 110px; height: 70px; background-image: url("../assets/book2/unit8/matching/b2u8a3/ring.png"); } .matching.b2u8a3 .roundTitleUnit { font-size: 16px; color: #e70b61; width: 120px; border: #75cce0 2px solid; background: #f7ef37; } .matching.b2u8a10 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-animate.jpg?1742470475') no-repeat center center; } .matching.b2u8a10 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; } .matching.b2u8a10 .roundTitleUnit { font-size: 16px; color: #fff200; } .matching.b4u1a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background.jpg?1742470475') no-repeat center center; } .matching.b4u1a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 24px; } .matching.b4u2a2 { background: #fab9e3 url('../assets/../assets/matching/b4u2a2/B4U2A2_BG-01.jpg?1742470475') no-repeat center center; } .matching.b4u2a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 24px; } .matching.b4u3a2 { background: #fab9e3 url('../assets/../assets/matching/b4u3a2/B4U3A1_BG-01.png?1742470475') no-repeat center center; } .matching.b4u3a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 24px; } .matching.b4u5a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background-2.jpg?1742470475') no-repeat center center; } .matching.b4u5a2 .roundTitleUnit { font-size: 16px; color: white; } .matching.b4u5a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 24px; } .matching.b4u7a1 { font-family: "VNF-ComicSans", sans-serif; text-align: center; background: #fab9e3 url('../assets/../assets/matching/b4u7a1/background.jpg?1742470476') no-repeat center center; } .matching.b4u7a1 .resultSrc { font-weight: bold; font-size: 45px; width: 250px; } .matching.b4u7a1 .itemResult { font-weight: bold; font-size: 22px; } .matching.b4u7a1 .answersText { font-weight: bold; font-size: 25px; } .matching.b4u8a10 { background: #fab9e3 url('../assets/../assets/matching/b4u8a10/background.jpg?1742470476') no-repeat center center; } .matching.b4u8a10 .roundTitleUnit { font-size: 16px; color: white; } .matching.b4u6a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/under-the-sea2.jpg?1742470475') no-repeat center center; } .matching.b4u6a1 .roundTitleUnit { font-size: 16px; color: black; } .matching.b7u1a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background-2.jpg?1742470475') no-repeat center center; } .matching.b7u1a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; line-height: 100px; } .matching.b7u1a1 .spanAnswersText { display: inline-block; vertical-align: middle; line-height: normal; } .matching.b7u2a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/orange-stars.jpg?1742470475') no-repeat center center; } .matching.b7u2a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; } .matching.b10u2a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/orange-stars.jpg?1742470475') no-repeat center center; } .matching.b10u2a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; } .matching.b7u3a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background.jpg?1742470475') no-repeat center center; } .matching.b7u5a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background-2.jpg?1742470475') no-repeat center center; } .matching.b7u5a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; padding-top: 15px; } .matching.b10u5a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background-2.jpg?1742470475') no-repeat center center; } .matching.b10u5a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; padding-top: 15px; } .matching.b7u7a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background.jpg?1742470475') no-repeat center center; } .matching.b7u7a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; padding-top: 30px; } .matching.b10u7a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background.jpg?1742470475') no-repeat center center; } .matching.b10u7a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; padding-top: 30px; } .matching.b10u3a2 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background.jpg?1742470475') no-repeat center center; } .matching.b10u3a2 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; display: table; } .matching.b10u3a2 .spanAnswersText { display: table-cell; vertical-align: middle; } .matching.b7u8a10 { background: #fab9e3 url('../assets/../assets/common/backgrounds/sunrise-on-the beach.jpg?1742470475') no-repeat center center; } .matching.b7u8a10 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 26px; color: black; border: none; } .matching.b10u8a10 { background: #fab9e3 url('../assets/../assets/common/backgrounds/sunrise-on-the beach.jpg?1742470475') no-repeat center center; } .matching.b10u8a10 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 26px; color: black; border: none; } .matching.b7u6a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/under-the-sea2.jpg?1742470475') no-repeat center center; } .matching.b7u6a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 20px; color: black; background-color: #fc92db; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; padding-top: 15px; } .matching.b10u1a1 { background: #fab9e3 url('../assets/../assets/common/backgrounds/purple-background-2.jpg?1742470475') no-repeat center center; } .matching.b10u1a1 .answersText { font-family: "VNF-ComicSans", sans-serif; text-align: center; font-size: 18px; color: black; background-color: white; border: #000000 2px solid; line-height: 100px; } .matching.b10u1a1 .spanAnswersText { display: inline-block; vertical-align: middle; line-height: normal; } .matching.b10u1a1 .resultSrc { font-weight: bold; font-size: 34px; width: 200px; height: 200px; text-align: center; padding-top: 60px; background-color: white; border: #000000 2px solid; } .matching .resultsPanel { position: absolute; } .matching .resultsPanel .results { width: 100%; height: 100%; /*background: rgb(255, 255, 255); background: rgba(255, 255, 255, .5); @include border-radius(6px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);*/ } .matching .resultsPanel .result { overflow: hidden; float: left; } .matching .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; text-align: center; font-size: 1.5em; } .matching .roundTitle span { font-size: 1.5em; } .matching .leftPanel, .matching .rightPanel { width: 240px; position: absolute; } .matching .dropArea { height: 100%; width: 20%; padding-top: 20%; padding-bottom: 25%; float: left; position: relative; } .matching .dropArea img { width: 100%; padding: 20px; } .matching .circleCheck { position: absolute; top: -10px; left: -12px; width: 120px; } .matching .dropChangeBox { position: absolute; } .matching .dropChange { position: absolute; } .matching .countUp { position: absolute; height: 60px; width: 150px; color: #000000; background: #ffffff; font-size: 2em; text-align: center; border: #000000 1px solid; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-top: 8px; } .matching .resultItem { position: absolute; } .matching .dragItem { position: absolute; cursor: pointer; } .matching .dragItem .checkMark { margin-top: -5px; font-size: 2em; position: absolute; } .matching .dragImg { width: 88px; height: 88px; margin: 0px; margin-top: 5px; margin-right: 15px; float: left; } .matching .dragSpan { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; margin: 0px; margin-top: 5px; margin-right: 15px; float: left; } .matching .resultImg { float: left; } .matching .resultSpan { height: 100%; display: inline-block; text-align: center; width: 100px; text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; float: left; } /***************** * Test in unit ******************/ .testBook { background-size: 1000px 600px; overflow: hidden; } .testBook .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .testBook .roundTitle span { font-size: 1.5em; } .testBook .dragItem { cursor: pointer; display: inline-block; margin-right: 10px; text-align: center; padding-left: 10px; font-size: 1.4em; } .testBook .dropItem { display: inline-block; position: absolute; text-align: center; font-size: 1.4em; cursor: pointer; } .testBook .dropPanel { position: absolute; display: inline-block; top: 500px; left: 200px; width: 600px; height: 30px; background-color: #ffffff; border: solid 1px #000000; } .testBook .parrotFly { background-position: 0 0; height: 171px; width: 412px; position: absolute; -webkit-animation: changeParrot 6s linear 1 normal, changeParrotBg 1.5s steps(1) infinite normal; /* Safari 4+ */ -moz-animation: changeParrot 6s linear 1 normal, changeParrotBg 1.5s steps(1) infinite normal; /* Fx 5+ */ -o-animation: changeParrot 6s linear 1 normal, changeParrotBg 1.5s steps(1) infinite normal; /* Opera 12+ */ animation: changeParrot 6s linear 1 normal, changeParrotBg 1.5s steps(1) infinite normal; /* IE 10+ */ } .testBook .containerAnswer { position: absolute; top: 100px; left: 100px; } .testBook .checkButton { position: absolute; cursor: pointer; top: 540px; left: 680px; width: 122px; height: 48px; background-image: url("../assets/book1/testBook/checkbutton.png"); /* &:hover { background-image: url("../assets/book1/test/check.png"); }*/ } .testBook .dropChangeBox { position: absolute; } .testBook .dropChange { position: absolute; } .testBook .countUp { position: absolute; height: 60px; width: 150px; color: #000000; background: #ffffff; font-size: 2em; text-align: center; border: #000000 1px solid; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-top: 8px; } .testBook .spanBW { position: absolute; top: 70%; text-align: center; width: 100%; color: black; font-size: 1.5em; } .testBook .dragItemBW { position: absolute; cursor: pointer; color: black; background-color: #ffffff; border: solid 2px #000000; text-align: center; font-size: 1.5em; height: 40px; } /***************** * Animated Matching letter, number ******************/ .circleMatching { background: url('../assets/book1/matching/b1u3a1/b1u3a1-matching-background.jpg?1742470460') no-repeat center center; } .circleMatching .resultsPanel { width: 30%; height: 100%; float: left; padding: 20px; padding-left: 30px; position: relative; } .circleMatching .resultsPanel .results { width: 100%; height: 100%; /*background: rgb(255, 255, 255); background: rgba(255, 255, 255, .5); @include border-radius(6px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);*/ } .circleMatching .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .circleMatching .roundTitle span { font-size: 1.5em; } .circleMatching .circlePanel { width: 60%; height: 100%; padding-left: 10px; padding-right: 10px; /* background: #008000;*/ position: relative; float: left; } .circleMatching .circlePanel .dropArea { height: 160px; width: 160px; top: 260px; left: 260px; position: absolute; } .circleMatching .circlePanel .dropArea img { width: 100%; padding: 20px; } .circleMatching .circlePanel .dragImg { width: 80px; height: 80px; margin: 0px; position: absolute; } .circleMatching .countUp { position: absolute; left: 820px; top: 520px; height: 60px; width: 150px; color: #000000; background: #ffffff; font-size: 2em; text-align: center; border: #000000 1px solid; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-top: 8px; } .circleMatching .resultImg { width: 80px; height: 80px; margin-top: 15px; margin-left: 10px; margin-right: 25px; margin-bottom: 10px; float: left; } /***************** * REPORT CARD ******************/ .report-card-base, .reportListClass, .report-card-b1t1, .report-card-b1t2, .report-card-b1t0 { /*.item { position: absolute; text-align: right; }*/ } .report-card-base .comment, .reportListClass .comment, .report-card-b1t1 .comment, .report-card-b1t2 .comment, .report-card-b1t0 .comment { position: absolute; } .report-card-base .star, .reportListClass .star, .report-card-b1t1 .star, .report-card-b1t2 .star, .report-card-b1t0 .star { position: absolute; height: 30px; width: 32px; background-image: url("../assets/permanent/report/star.png"); } .report-card-base .prevPage, .reportListClass .prevPage, .report-card-b1t1 .prevPage, .report-card-b1t2 .prevPage, .report-card-b1t0 .prevPage { position: absolute; top: 50%; left: 10px; width: 69px; height: 81px; margin-top: -50px; margin-left: -15px; z-index: 20; cursor: pointer; background-image: url("../assets/storyBook/preview-normal.png"); } .report-card-base .prevPage:hover, .reportListClass .prevPage:hover, .report-card-b1t1 .prevPage:hover, .report-card-b1t2 .prevPage:hover, .report-card-b1t0 .prevPage:hover { background-image: url("../assets/storyBook/preview-over.png"); } .report-card-base .nextPage, .reportListClass .nextPage, .report-card-b1t1 .nextPage, .report-card-b1t2 .nextPage, .report-card-b1t0 .nextPage { position: absolute; top: 50%; left: 100%; width: 69px; height: 81px; margin-top: -50px; margin-left: -60px; z-index: 20; cursor: pointer; background-image: url("../assets/storyBook/next-normal.png"); } .report-card-base .nextPage:hover, .reportListClass .nextPage:hover, .report-card-b1t1 .nextPage:hover, .report-card-b1t2 .nextPage:hover, .report-card-b1t0 .nextPage:hover { background-image: url("../assets/storyBook/next-over.png"); } .report-card-base .item, .reportListClass .item, .report-card-b1t1 .item, .report-card-b1t2 .item, .report-card-b1t0 .item { position: absolute; font-size: 1.3em; text-align: right; } .reportListClass { background-color: #672D93; position: absolute; top: 0px; left: 0px; } .reportListClass .item { font-size: 2em; position: absolute; color: #FFFFFF; text-align: left; cursor: pointer; } .report-card-b1t1 { background-image: url("../assets/permanent/report/b1/middle.jpg"); } .report-card-b1t2 { background-image: url("../assets/permanent/report/b1/final.jpg"); } .report-card-b1t0 { background-image: url("../assets/permanent/report/b1/overview.jpg"); } /***************** * LISTENING MATCHING ******************/ .flashcard-matching { overflow: hidden; } .flashcard-matching .wordsPanel { width: 20%; height: 100%; float: left; padding-left: 50px; padding-top: 15px; position: relative; } .flashcard-matching .wordsPanel .words { width: 100%; height: 100%; } .flashcard-matching .wordsPanel .words .wordBound { cursor: pointer; width: 140px; height: 45px; margin: 6px; font-size: 2em; color: black; text-align: center; background: white; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); float: left; } .flashcard-matching .verAlign { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .flashcard-matching .roundTitle { position: absolute; display: inline; padding: 5px; width: 260px; top: 30px; text-align: center; font-size: 1.5em; } .flashcard-matching .roundTitle span { font-size: 1.5em; } .flashcard-matching .imagePanel { float: left; width: 80%; height: 100%; padding-top: 15%; padding-right: 10px; padding-left: 20px; } .flashcard-matching .imagePanel img { width: 130px; height: 130px; margin: 10px; float: left; } .flashcard-matching .countUp { position: absolute; left: 52%; top: 500px; height: 60px; width: 150px; color: #000000; background: #ffffff; font-size: 2em; text-align: center; border: #000000 1px solid; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding-top: 8px; } /***************** PAINT SPLATTER ******************/ .playAgain { position: absolute; /*top: ($view-height - 565) / 2; left: ($view-width - 843) /2;*/ z-index: 40; opacity: 1; filter: alpha(opacity=100); } .playAgain .messageContainer { width: 565px; height: 185px; line-height: 185px; text-align: center; position: absolute; font-size: 2.6em; text-transform: uppercase; margin-left: 228px; margin-top: 20px; top: 150px; } .playAgain .messageContainer .modalTitle { font-weight: bold; } .playAgain .messageContainer .modalMessage { /*font-size: 1.6em;*/ font-weight: normal; top: 210px; } .playAgain .playAgainContainer { width: 565px; height: 185px; line-height: 90px; text-align: center; position: absolute; font-size: 2.6em; text-transform: uppercase; margin-left: 227px; margin-top: 20px; top: 150px; } .playAgain .playAgainContainer .playAgainTitle { font-weight: bold; } .playAgain .playAgainContainer .playAgainMessage { font-size: 0.8em; } .playAgain .colorbook1 { color: #ff0000; } .playAgain .colorbook4 { color: #0000ff; } .playAgain .colorbook10 .modalTitle { margin-top: -96px; } .playAgain .colorbook10 .playAgainMessage { margin-top: 104px; margin-left: -116px; } .playAgain .colorbook10 .playAgainTitle { margin-top: -40px; } .playAgain img { position: relative; } .playAgainButton, .playAgain .yes_book0, .playAgain .no_book0, .playAgain .ok_book0, .playAgain .yes_book1, .playAgain .no_book1, .playAgain .ok_book1, .playAgain .yes_book2, .playAgain .no_book2, .playAgain .ok_book2, .playAgain .yes_book3, .playAgain .no_book3, .playAgain .ok_book3, .playAgain .yes_book4, .playAgain .no_book4, .playAgain .ok_book4, .playAgain .yes_book5, .playAgain .no_book5, .playAgain .ok_book5, .playAgain .yes_book6, .playAgain .no_book6, .playAgain .ok_book6, .playAgain .yes_book7, .playAgain .no_book7, .playAgain .ok_book7, .playAgain .yes_book8, .playAgain .no_book8, .playAgain .ok_book8, .playAgain .yes_book9, .playAgain .no_book9, .playAgain .ok_book9, .playAgain .yes_book10, .playAgain .no_book10, .playAgain .ok_book10 { position: absolute; z-index: 41; width: 94px; height: 61px; background-size: 94px 61px; /*width: 115px; height: 65px;*/ cursor: pointer; } .playAgain .yes_book1 { background-image: url("../assets/common/messaging/buttons/book1/yes.png"); left: 320px; /*top: 360px;*/ } .playAgain .yes_book1:hover { background-image: url("../assets/common/messaging/buttons/book1/yes_hover.png"); } .playAgain .yes_book1:focus { background-image: url("../assets/common/messaging/buttons/book1/yes_click.png"); } .playAgain .no_book1 { background-image: url("../assets/common/messaging/buttons/book1/no.png"); left: 440px; /*top: 360px;*/ } .playAgain .no_book1:hover { background-image: url("../assets/common/messaging/buttons/book1/no_hover.png"); } .playAgain .no_book1:focus { background-image: url("../assets/common/messaging/buttons/book1/no_click.png"); } .playAgain .ok_book1 { background-image: url("../assets/common/messaging/buttons/book1/ok.png"); left: 550px; top: 360px; } .playAgain .ok_book1:hover { background-image: url("../assets/common/messaging/buttons/book1/ok_hover.png"); } .playAgain .ok_book1:focus { background-image: url("../assets/common/messaging/buttons/book1/ok_click.png"); } .playAgain .yes_book2 { background-image: url("../assets/common/messaging/buttons/book2/yes.png"); left: 170px; /*top: 360px;*/ } .playAgain .yes_book2:hover { background-image: url("../assets/common/messaging/buttons/book2/yes_hover.png"); } .playAgain .yes_book2:focus { background-image: url("../assets/common/messaging/buttons/book2/yes_click.png"); } .playAgain .no_book2 { background-image: url("../assets/common/messaging/buttons/book2/no.png"); left: 305px; /*top: 360px;*/ } .playAgain .no_book2:hover { background-image: url("../assets/common/messaging/buttons/book2/no_hover.png"); } .playAgain .no_book2:focus { background-image: url("../assets/common/messaging/buttons/book2/no_click.png"); } .playAgain .ok_book2 { background-image: url("../assets/common/messaging/buttons/book2/ok.png"); left: 460px; top: 330px; } .playAgain .ok_book2:hover { background-image: url("../assets/common/messaging/buttons/book2/ok_hover.png"); } .playAgain .ok_book2:focus { background-image: url("../assets/common/messaging/buttons/book2/ok_click.png"); } .playAgain .yes_book3 { background-image: url("../assets/common/messaging/buttons/book3/yes.png"); left: 172px; top: 200px; } .playAgain .yes_book3:hover { background-image: url("../assets/common/messaging/buttons/book3/yes_hover.png"); } .playAgain .yes_book3:focus { background-image: url("../assets/common/messaging/buttons/book3/yes_click.png"); } .playAgain .no_book3 { background-image: url("../assets/common/messaging/buttons/book3/no.png"); left: 290px; top: 200px; } .playAgain .no_book3:hover { background-image: url("../assets/common/messaging/buttons/book3/no_hover.png"); } .playAgain .no_book3:focus { background-image: url("../assets/common/messaging/buttons/book3/no_click.png"); } .playAgain .ok_book3 { background-image: url("../assets/common/messaging/buttons/book3/ok.png"); left: 463px; top: 360px; } .playAgain .ok_book3:hover { background-image: url("../assets/common/messaging/buttons/book3/ok_hover.png"); } .playAgain .ok_book3:focus { background-image: url("../assets/common/messaging/buttons/book3/ok_click.png"); } .playAgain .yes_book4 { background-image: url("../assets/common/messaging/buttons/book4/yes.png"); left: 170px; /*top: 360px;*/ } .playAgain .yes_book4:hover { background-image: url("../assets/common/messaging/buttons/book4/yes_hover.png"); } .playAgain .yes_book4:focus { background-image: url("../assets/common/messaging/buttons/book4/yes_click.png"); } .playAgain .no_book4 { background-image: url("../assets/common/messaging/buttons/book4/no.png"); left: 305px; /*top: 360px;*/ } .playAgain .no_book4:hover { background-image: url("../assets/common/messaging/buttons/book4/no_hover.png"); } .playAgain .no_book4:focus { background-image: url("../assets/common/messaging/buttons/book4/no_click.png"); } .playAgain .ok_book4 { background-image: url("../assets/common/messaging/buttons/book4/ok.png"); left: 460px; top: 330px; } .playAgain .ok_book4:hover { background-image: url("../assets/common/messaging/buttons/book4/ok_hover.png"); } .playAgain .ok_book4:focus { background-image: url("../assets/common/messaging/buttons/book4/ok_click.png"); } .playAgain .yes_book5 { background-image: url("../assets/common/messaging/buttons/book5/yes.png"); left: 170px; /*top: 360px;*/ } .playAgain .yes_book5:hover { background-image: url("../assets/common/messaging/buttons/book5/yes_hover.png"); } .playAgain .yes_book5:focus { background-image: url("../assets/common/messaging/buttons/book5/yes_click.png"); } .playAgain .no_book5 { background-image: url("../assets/common/messaging/buttons/book5/no.png"); left: 305px; /*top: 360px;*/ } .playAgain .no_book5:hover { background-image: url("../assets/common/messaging/buttons/book5/no_hover.png"); } .playAgain .no_book5:focus { background-image: url("../assets/common/messaging/buttons/book5/no_click.png"); } .playAgain .ok_book5 { background-image: url("../assets/common/messaging/buttons/book5/ok.png"); left: 460px; top: 330px; } .playAgain .ok_book5:hover { background-image: url("../assets/common/messaging/buttons/book5/ok_hover.png"); } .playAgain .ok_book5:focus { background-image: url("../assets/common/messaging/buttons/book5/ok_click.png"); } /************ book6 **************/ .playAgain .yes_book6 { background-image: url("../assets/common/messaging/buttons/book5/yes.png"); left: 170px; /*top: 360px;*/ } .playAgain .yes_book6:hover { background-image: url("../assets/common/messaging/buttons/book5/yes_hover.png"); } .playAgain .yes_book6:focus { background-image: url("../assets/common/messaging/buttons/book5/yes_click.png"); } .playAgain .no_book6 { background-image: url("../assets/common/messaging/buttons/book5/no.png"); left: 305px; /*top: 360px;*/ } .playAgain .no_book6:hover { background-image: url("../assets/common/messaging/buttons/book5/no_hover.png"); } .playAgain .no_book6:focus { background-image: url("../assets/common/messaging/buttons/book5/no_click.png"); } .playAgain .ok_book6 { background-image: url("../assets/common/messaging/buttons/book5/ok.png"); left: 460px; top: 330px; } .playAgain .ok_book6:hover { background-image: url("../assets/common/messaging/buttons/book5/ok_hover.png"); } .playAgain .ok_book6:focus { background-image: url("../assets/common/messaging/buttons/book5/ok_click.png"); } .playAgain .yes_book7 { background-image: url("../assets/common/messaging/buttons/book4/yes.png"); left: 185px; /*top: 360px;*/ } .playAgain .yes_book7:hover { background-image: url("../assets/common/messaging/buttons/book4/yes_hover.png"); } .playAgain .yes_book7:focus { background-image: url("../assets/common/messaging/buttons/book4/yes_click.png"); } .playAgain .no_book7 { background-image: url("../assets/common/messaging/buttons/book4/no.png"); left: 315px; /*top: 360px;*/ } .playAgain .no_book7:hover { background-image: url("../assets/common/messaging/buttons/book4/no_hover.png"); } .playAgain .no_book7:focus { background-image: url("../assets/common/messaging/buttons/book4/no_click.png"); } .playAgain .ok_book7 { background-image: url("../assets/common/messaging/buttons/book4/ok.png"); left: 456px; top: 330px; } .playAgain .ok_book7:hover { background-image: url("../assets/common/messaging/buttons/book4/ok_hover.png"); } .playAgain .ok_book7:focus { background-image: url("../assets/common/messaging/buttons/book4/ok_click.png"); } .playAgain .yes_book8 { background-image: url("../assets/common/messaging/buttons/book8/yes.png"); left: 170px; /*top: 360px;*/ } .playAgain .yes_book8:hover { background-image: url("../assets/common/messaging/buttons/book8/yes_hover.png"); } .playAgain .yes_book8:focus { background-image: url("../assets/common/messaging/buttons/book8/yes_click.png"); } .playAgain .no_book8 { background-image: url("../assets/common/messaging/buttons/book8/no.png"); left: 305px; /*top: 360px;*/ } .playAgain .no_book8:hover { background-image: url("../assets/common/messaging/buttons/book8/no_hover.png"); } .playAgain .no_book8:focus { background-image: url("../assets/common/messaging/buttons/book8/no_click.png"); } .playAgain .ok_book8 { background-image: url("../assets/common/messaging/buttons/book8/ok.png"); left: 460px; top: 330px; } .playAgain .ok_book8:hover { background-image: url("../assets/common/messaging/buttons/book8/ok_hover.png"); } .playAgain .ok_book8:focus { background-image: url("../assets/common/messaging/buttons/book8/ok_click.png"); } .playAgain .yes_book9 { background-image: url("../assets/common/messaging/buttons/book5/yes.png"); left: 170px; /*top: 360px;*/ } .playAgain .yes_book9:hover { background-image: url("../assets/common/messaging/buttons/book5/yes_hover.png"); } .playAgain .yes_book9:focus { background-image: url("../assets/common/messaging/buttons/book5/yes_click.png"); } .playAgain .no_book9 { background-image: url("../assets/common/messaging/buttons/book5/no.png"); left: 305px; /*top: 360px;*/ } .playAgain .no_book9:hover { background-image: url("../assets/common/messaging/buttons/book5/no_hover.png"); } .playAgain .no_book9:focus { background-image: url("../assets/common/messaging/buttons/book5/no_click.png"); } .playAgain .ok_book9 { background-image: url("../assets/common/messaging/buttons/book5/ok.png"); left: 460px; top: 330px; } .playAgain .ok_book9:hover { background-image: url("../assets/common/messaging/buttons/book5/ok_hover.png"); } .playAgain .ok_book9:focus { background-image: url("../assets/common/messaging/buttons/book5/ok_click.png"); } .playAgain .yes_book10 { background-image: url("../assets/common/messaging/buttons/book4/yes.png"); left: 105px; top: 240px; } .playAgain .yes_book10:hover { background-image: url("../assets/common/messaging/buttons/book4/yes_hover.png"); } .playAgain .yes_book10:focus { background-image: url("../assets/common/messaging/buttons/book4/yes_click.png"); } .playAgain .no_book10 { background-image: url("../assets/common/messaging/buttons/book4/no.png"); left: 222px; top: 240px; } .playAgain .no_book10:hover { background-image: url("../assets/common/messaging/buttons/book4/no_hover.png"); } .playAgain .no_book10:focus { background-image: url("../assets/common/messaging/buttons/book4/no_click.png"); } .playAgain .ok_book10 { background-image: url("../assets/common/messaging/buttons/book4/ok.png"); left: 390px; top: 360px; } .playAgain .ok_book10:hover { background-image: url("../assets/common/messaging/buttons/book4/ok_hover.png"); } .playAgain .ok_book10:focus { background-image: url("../assets/common/messaging/buttons/book4/ok_click.png"); } /****** * MODAL *******/ .ng-modal-overlay { /* A dark translucent div that covers the whole screen */ position: absolute; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.8; } .ng-modal-dialog { /* A centered div above the overlay with a box shadow. */ z-index: 10000; position: absolute; width: 50%; /* Default */ /* Center the dialog */ top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #fff; box-shadow: 4px 4px 80px #000; } .ng-modal-dialog-content { padding: 10px; text-align: left; } .ng-modal-close { position: absolute; top: 3px; right: 5px; padding: 5px; cursor: pointer; font-size: 120%; display: inline-block; font-weight: bold; font-family: 'arial', 'sans-serif'; } .modal { display: block; } /***************** * SIGN UP ******************/ .signup { background-color: #ffffff; } .signup .robotDisplay { width: 35%; height: 100%; float: left; } .signup label { font-size: 1.3em; font-weight: bold; line-height: 2em; } .signup .fieldValid { border: 1px solid #00ff00; } .signup .fieldInvalid { border: 1px solid #ff0000 !important; } .signup .progress { background-color: #fff; } .signup .progress .circle { border-radius: 50%; width: 20px; height: 20px; border: 1px solid #006b2a; } .signup .progress .incomplete { background-color: #ffffff; } .signup .progress .complete { background-color: #006b2a; } .signup-fail { background-color: #ffffff; font-size: 2em; font-family: "VNF-ComicSans", sans-serif; } .help-message { position: absolute; display: inline-block; float: left; left: 510px; top: 90px; } .ng-valid .ng-dirty { border-color: #eeeeee; } .ng-invalid .ng-dirty { border-color: red; } /***************** MULTIPLE CHOICE - STUDY WITH TRICK ******************/ .multipleChoice { background-size: 1000px 600px; } .multipleChoice .roundTitle { position: absolute; display: inline; padding: 2px; width: 100px; text-align: center; font-size: 20px; background-color: mediumpurple; } .multipleChoice .questionImg_book1 { float: left; margin-top: -85px; width: 520px; } .multipleChoice .questionImg_book1 img { -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ -moz-transform: scale(0.5); /* FF3.5+ */ -ms-transform: scale(0.5); /* IE9 */ -o-transform: scale(0.5); /* Opera 10.5+ */ transform: scale(0.5); /* IE6 - IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713, SizingMethod='auto expand'); } .multipleChoice .questionImg_book7 { float: left; margin-top: -85px; width: 520px; } .multipleChoice .questionImg_book7 img { margin-left: 100px; -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ -moz-transform: scale(0.5); /* FF3.5+ */ -ms-transform: scale(0.5); /* IE9 */ -o-transform: scale(0.5); /* Opera 10.5+ */ transform: scale(0.5); /* IE6 - IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713, SizingMethod='auto expand'); } .multipleChoice .questionImg_book2 { float: left; margin-top: 150px; width: 260px; } .multipleChoice .questionImg_book2 img { margin-left: 80px; } .multipleChoice .questionImg_audio { width: 150px; position: absolute; left: -150px; padding-left: 50px; } .multipleChoice .questionImg_audio img { position: absolute; -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ -moz-transform: scale(0.5); /* FF3.5+ */ -ms-transform: scale(0.5); /* IE9 */ -o-transform: scale(0.5); /* Opera 10.5+ */ transform: scale(0.5); /* IE6 - IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713, SizingMethod='auto expand'); } .multipleChoice .answers_audio { position: absolute; left: -60px; top: 290px; width: 400px; float: left; margin-left: 470px; color: #52437e; font-size: 2em; text-align: center; } .multipleChoice .questionText_audio { position: absolute; left: 210px; top: 190px; font-weight: bold; font-family: "VNF-ComicSans", sans-serif; color: white; font-size: 34px; width: 70%; text-align: center; } .multipleChoice .questionText { position: absolute; left: 0px; top: 125px; font-weight: bold; font-family: "VNF-ComicSans", sans-serif; color: white; font-size: 3em; width: 100%; text-align: center; } .multipleChoice .questionText_choice_picture_b10u6a2 { position: absolute; width: 100%; color: black; bottom: 10px; font-weight: bold; font-family: "VNF-ComicSans", sans-serif; font-size: 22px; text-align: center; height: 70px; } .multipleChoice .questionText_choice_picture_b10u6a2 .questionTextSpan { background-color: white; border: solid #426cb4 2px; padding-left: 15px; padding-right: 15px; margin-right: 10px; margin-left: 10px; } .multipleChoice .questionText_choice_picture_b10u6a2 .answersSpan_choice_picture { cursor: pointer; } .multipleChoice .questionText_choice_picture_b10u6a2 .answersSpan_choice_picture:hover { background-color: #5666b0; } .multipleChoice .questionText_choice_picture_b10u6a2 .answersSpan_choice_picture:active { background-color: #8055a3; } .multipleChoice .questionText_choice_picture_b10u4s9 { position: absolute; width: 100%; color: black; bottom: 10px; font-weight: bold; font-family: "VNF-ComicSans", sans-serif; font-size: 2.5em; text-align: center; height: 70px; } .multipleChoice .questionText_choice_picture_b10u4s9 .questionTextSpan { background-color: #9bdae7; border: solid #426cb4 2px; padding-left: 15px; padding-right: 15px; margin-right: 10px; margin-left: 10px; } .multipleChoice .questionText_choice_picture_b10u4s9 .answersSpan_choice_picture { cursor: pointer; } .multipleChoice .questionText_choice_picture_b10u4s9 .answersSpan_choice_picture:hover { background-color: #5666b0; } .multipleChoice .questionText_choice_picture_b10u4s9 .answersSpan_choice_picture:active { background-color: #8055a3; } .multipleChoice .questionText_choice_picture_b7u6a8 { position: absolute; width: 100%; color: black; bottom: 10px; font-weight: bold; font-family: "VNF-ComicSans", sans-serif; font-size: 2.5em; text-align: center; height: 70px; } .multipleChoice .questionText_choice_picture_b7u6a8 .questionTextSpan { background-color: #9bdae7; border: solid #426cb4 2px; padding-left: 15px; padding-right: 15px; margin-right: 10px; margin-left: 10px; } .multipleChoice .questionText_choice_picture_b7u6a8 .answersSpan_choice_picture { cursor: pointer; } .multipleChoice .questionText_choice_picture_b7u6a8 .answersSpan_choice_picture:hover { background-color: #5666b0; } .multipleChoice .questionText_choice_picture_b7u6a8 .answersSpan_choice_picture:active { background-color: #8055a3; } .multipleChoice .questionImg_book4 { float: left; margin-top: 100px; margin-left: 200px; width: 520px; } .multipleChoice .questionImg_book4 img { -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ -moz-transform: scale(0.5); /* FF3.5+ */ -ms-transform: scale(0.5); /* IE9 */ -o-transform: scale(0.5); /* Opera 10.5+ */ transform: scale(0.5); /* IE6 - IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713, SizingMethod='auto expand'); } .multipleChoice .answers { margin-top: 130px; width: 400px; float: left; margin-left: 60px; color: #52437e; font-size: 2em; text-align: center; } .multipleChoice .answers .answer { -moz-border-radius: 15px; border-radius: 15px; border: solid #000000 1px; } .multipleChoice .answers_book1 { margin-top: 130px; width: 400px; float: left; margin-left: 60px; color: #52437e; font-size: 2em; text-align: center; } .multipleChoice .answers_book1 .answer { -moz-border-radius: 15px; border-radius: 15px; border: solid #000000 1px; } .multipleChoice .answers_book4 { margin-top: 290px; width: 300px; float: left; margin-left: -87px; color: #52437e; font-size: 2em; text-align: center; } .multipleChoice .answers_book4 .answer { -moz-border-radius: 15px; border-radius: 15px; border: solid #000000 1px; } .multipleChoice .answers_book7 { margin-top: 130px; width: 300px; float: left; margin-left: 140px; color: #52437e; font-size: 2em; text-align: center; } .multipleChoice .answers_book7 .answer { -moz-border-radius: 15px; border-radius: 15px; border: solid #000000 1px; } .multipleChoice .answers_book2 { width: 300px; float: left; margin-left: 360px; color: #52437e; font-size: 2em; text-align: center; } .multipleChoice .answers_book2 .answer { -moz-border-radius: 15px; border-radius: 15px; border: solid blue 1px; } .multipleChoice .answers_book2_2 { margin-top: 190px; } .multipleChoice .answers_book2_3 { margin-top: 173px; } .multipleChoice .answers_book2_4 { margin-top: 143px; } .multipleChoice .mark { width: 80px; height: 50px; float: right; } .multipleChoice .mark img { float: right; width: 40px; opacity: 0; } /*********************** LOG IN ************************/ .login-form { font-family: "VNF-ComicSans", sans-serif; text-align: center; float: left; width: 350px; border: 1px solid #000000; padding-top: 20px; padding-bottom: 20px; } .login-form .loginButton { -moz-box-shadow: inset 0px 1px 0px 0px #c1ed9c; -webkit-box-shadow: inset 0px 1px 0px 0px #c1ed9c; box-shadow: inset 0px 1px 0px 0px #c1ed9c; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b)); background: -moz-linear-gradient(center top, #9dce2c 5%, #8cb82b 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b'); background-color: #9dce2c; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px; border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; text-indent: 0; border: 1px solid #83c41a; display: inline-block; color: #ffffff; font-family: Comic Sans MS; font-size: 22px; font-weight: bold; font-style: normal; height: 40px; line-height: 40px; width: 200px; text-decoration: none; text-align: center; text-shadow: 1px 1px 0px #689324; } .login-form .loginButton:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c)); background: -moz-linear-gradient(center top, #8cb82b 5%, #9dce2c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c'); background-color: #8cb82b; } .login-form .loginButton:active { position: relative; top: 1px; } .drag-me, .ui-sortable, .ui-sortable-helper, .ui-draggable, .ui-draggable-dragging, .click-me { cursor: pointer; } .row-centered { text-align: center; } .col-centered { display: inline-block; float: none; /* reset the text-align */ text-align: left; /* inline-block space fix */ margin-right: -4px; } /***************** COMIC ******************/ .comic-b4u7a6 { background: url("../assets/book4/unit7/comicOrdering/comic-background.jpg"); overflow: hidden; } .comic-b4u7a6 .btn-info { background-color: transparent; border-color: none; } .comic-b4u7a6:hover, .comic-b4u7a6:focus, .comic-b4u7a6:active { background-color: transparent; border-color: none; } .comic-target-b4u7a6 { margin-top: 4px; margin-left: -22px; width: 221px; height: 226px; position: relative; z-index: 1; } .comic-target-b4u7a6 .btn-draggable { position: relative; top: -2px; left: -2px; z-index: 2; } .comic-color-holder-b4u7a6 { width: 200px; height: 200px; text-align: center; margin: 0px; position: relative; top: 70px; left: 0px; } .comic-color-holder-b4u7a6 .comic-color-img { width: 150px; height: 150px; } .comic-color-brush-b4u7a6 { width: 115px; top: -130px; position: relative; cursor: pointer; } .comic-color-b4u7a6 { background: url("../assets/book4/unit4/comicOrdering/comic-background.jpg") no-repeat; background-size: contain; width: 1000px; height: 600px; z-index: 60; } .target-container-b4u7a6 { padding-top: 59px; } .target-container-b4u7a6 .column { background: url("../assets/book4/unit7/comicOrdering/comic-box-bw.png") no-repeat; background-size: contain; } .comic-image-img-b4u7a6, .comic-target-img-b4u7a6 { width: 200px; height: 200px; } .btn-check-b4u7a6 { background-color: #1dae29; position: absolute; left: 460px; top: 20px; } .comicb4u4a9 { background: url("../assets/book4/unit4/comicOrdering/comic-background.jpg"); overflow: hidden; } .comicb4u4a9 .btn-info { background-color: transparent; border-color: none; } .comicb4u4a9:hover, .comicb4u4a9:focus, .comicb4u4a9:active { background-color: transparent; border-color: none; } .comic-target-b4u4a9 { margin-top: 4px; margin-left: -22px; width: 221px; height: 226px; position: relative; z-index: 1; } .comic-target-b4u4a9 .btn-draggable { position: relative; top: -2px; left: -2px; z-index: 2; } .comic-color-holder-b4u4a9 { width: 200px; height: 200px; text-align: center; margin: 15px; position: relative; top: 94px; left: 40px; } .comic-color-holder-b4u4a9 .comic-color-img { width: 100%; } .comic-color-brush-b4u4a9 { width: 150px; top: -170px; position: relative; cursor: pointer; } .comic-color-b4u4a9 { background: url("../assets/book4/unit4/comicOrdering/comic-background.jpg") no-repeat; background-size: contain; width: 1000px; height: 600px; z-index: 60; } .target-container-b4u4a9 { padding-top: 59px; } .target-container-b4u4a9 .column { background: url("../assets/book4/unit4/comicOrdering/comic-box-bw.png") no-repeat; background-size: contain; } .comic-image-img-b4u4a9, .comic-target-img-b4u4a9 { width: 200px; height: 200px; } .btn-check-b4u4a9 { background-color: #1dae29; position: absolute; left: 460px; top: 20px; } .comicb4u1a8 { background: url("../assets/book4/unit1/comicOrdering/comic-background.jpg"); overflow: hidden; } .comicb4u1a8 .btn-info { background-color: transparent; border-color: none; } .comicb4u1a8:hover, .comicb4u1a8:focus, .comicb4u1a8:active { background-color: transparent; border-color: none; } .comic-target-b4u1a8 { margin-top: 4px; margin-left: -22px; width: 221px; height: 226px; position: relative; z-index: 1; } .comic-target-b4u1a8 .btn-draggable { position: relative; top: -2px; left: -2px; z-index: 2; } .comic-color-holder-b4u1a8 { width: 200px; height: 200px; text-align: center; margin: 15px; position: relative; top: 94px; left: 40px; } .comic-color-holder-b4u1a8 .comic-color-img { width: 100%; } .comic-color-brush-b4u1a8 { width: 150px; top: -170px; position: relative; cursor: pointer; } .comic-color-b4u1a8 { background: url("../assets/book4/unit1/comicOrdering/comic-background.jpg") no-repeat; background-size: contain; width: 1000px; height: 600px; z-index: 60; } .target-container-b4u1a8 { padding-top: 83px; padding-left: 13px; } .target-container-b4u1a8 .column { background: url("../assets/book4/unit1/comicOrdering/comic-box-bw.png") no-repeat; background-size: contain; padding-left: 45px; } .comic-image-img-b4u1a8, .comic-target-img-b4u1a8 { width: 200px; height: 200px; } .btn-check-b4u1a8 { background-color: #1dae29; position: absolute; left: 460px; top: 30px; } .comic-b4u8a5 { background: url("../assets/book4/unit8/comicOrdering/comic-background.jpg"); overflow: hidden; } .comic-b4u8a5 .btn-info { background-color: transparent; border-color: none; } .comic-b4u8a5:hover, .comic-b4u8a5:focus, .comic-b4u8a5:active { background-color: transparent; border-color: none; } .comic-image-b4u8a5 { width: 150px; height: 150px; margin: 0px 8px; } .comic-target-b4u8a5 { margin-top: 4px; margin-left: -22px; width: 185px; height: 185px; position: relative; z-index: 1; } .comic-target-b4u8a5 .btn-draggable { top: 0px; left: 29px; z-index: 2; } .comic-color-holder-b4u8a5 { width: 155px; height: 155px; text-align: center; margin: 5px; position: relative; top: 94px; left: 5px; } .comic-color-holder-b4u8a5 .comic-color-img { width: 100%; } .comic-color-brush-b4u8a5 { width: 120px; top: -140px; position: relative; cursor: pointer; } .comic-color-b4u8a5 { background: url("../assets/book4/unit8/comicOrdering/comic-background.jpg") no-repeat; background-size: contain; width: 1000px; height: 600px; z-index: 60; } .target-container-b4u8a5 { padding-top: 105px; padding-left: 10px; } .target-container-b4u8a5 .column { background: url("../assets/book4/unit8/comicOrdering/comic-box-bw.png") no-repeat; background-size: contain; padding-left: 0px; } .comic-image-img-b4u8a5, .comic-target-img-b4u8a5 { width: 150px; height: 150px; } .btn-check-b4u8a5 { background-color: #1dae29; position: absolute; left: 460px; top: 20px; } .comicb1u8a5 { background: url("../assets/book1/unit8/comicStripOrdering/comic-background.jpg"); overflow: hidden; } .comicb1u8a5 .btn-info { background-color: transparent; border-color: none; } .comicb1u8a5:hover, .comicb1u8a5:focus, .comicb1u8a5:active { background-color: transparent; border-color: none; } .comic-target-b1u8a5 { margin-top: 4px; margin-left: -22px; width: 221px; height: 226px; position: relative; z-index: 1; } .comic-target-b1u8a5 .btn-draggable { position: relative; top: -2px; left: -2px; z-index: 2; } .comic-color-holder-b1u8a5 { width: 200px; height: 200px; text-align: center; margin: 15px; position: relative; top: 94px; left: 40px; } .comic-color-holder-b1u8a5 .comic-color-img { width: 100%; } .comic-color-brush-b1u8a5 { width: 150px; top: -170px; position: relative; cursor: pointer; } .comic-color-b1u8a5 { background: url("../assets/book1/unit8/comicStripOrdering/comic-background.jpg") no-repeat; background-size: contain; width: 1000px; height: 600px; z-index: 60; } .target-container-b1u8a5 { padding-top: 105px; padding-left: 50px; } .target-container-b1u8a5 .column { background: url("../assets/book1/unit8/comicStripOrdering/comic-box-bw.png") no-repeat; background-size: contain; padding-left: 30px; } .comic-image-img-b1u8a5, .comic-target-img-b1u8a5 { width: 200px; height: 200px; } .btn-check-b1u8a5 { background-color: #1dae29; position: absolute; left: 460px; top: 60px; } .comic { background: url("../assets/book1/unit1/comic/comic-background.jpg"); overflow: hidden; } .comic .btn-info { background-color: transparent; border-color: none; } .comic .btn-info:hover, .comic .btn-info:focus, .comic .btn-info:active { background-color: transparent; border-color: none; } .column { float: left; } .column-color { display: inline-block; } .row-3-columns { width: 825px; margin: 0 auto; } .row-3-columns .column { margin: 0 15px 0 0; } .row-3-columns .column:last-child { margin: 0; } .row-4-columns { width: 870px; margin: 0 auto; } .row-4-columns .column { width: 210px; margin: 0 10px 0 0; } .row-4-columns .column:last-child { margin: 0; } .source-container-row-4 { margin: 0px 50px; } .comic-target { margin: 15px; width: 235px; height: 235px; position: relative; z-index: 1; } .comic-target .btn-draggable { position: relative; top: -2px; left: -2px; z-index: 2; } .comic-target-marks { width: 70px; margin: -50px 0 0 35px; } .comic-target-marks .img-mark { width: 50px; height: 50px; } .comic-image { width: 235px; height: 235px; margin: 5px 15px; } .comic-image-inner { z-index: 2; } .comic-color .row-3-columns { width: 948px; padding-top: 118px; margin: 0 auto; } .comic-color .row-3-columns .column { background: url("../assets/book1/unit1/comic/comic-box-bw.png") no-repeat; background-size: contain; margin: 0 5px 0 0; } .comic-color .row-3-columns .column:last-child { margin: 0; } .comic-color .row-4-columns { width: 958px; padding-top: 118px; margin: 0 auto; } .comic-color .row-4-columns .column { background: url("../assets/book1/unit1/comic/comic-box-bw.png") no-repeat; background-size: contain; width: auto; margin: 0 3px 0; } .comic-color .row-4-columns .column:last-child { margin: 0; } .comic-color-holder { width: 300px; height: 300px; text-align: center; margin: 6px; position: relative; top: -3px; left: -3px; } .comic-color-holder .comic-color-img { width: 100%; } .comic-color-holder-b1u7a6 { width: 200px; height: 200px; text-align: center; margin: 0px; position: relative; top: 70px; left: 0px; } .comic-color-holder-b1u7a6 .comic-color-img { width: 150px; height: 150px; } .comic-color-brush-b1u7a6 { width: 115px; top: -130px; position: relative; cursor: pointer; } .comic-image-img-b1u7a6, .comic-target-img-b1u7a6 { width: 200px; height: 200px; } .btn-check-b1u7a6 { background-color: #1dae29; position: absolute; left: 460px; top: 20px; } .comic-color-holder-b1u4a8 { width: 180px; height: 180px; text-align: center; margin: 25px; position: relative; top: 15px; left: 0px; } .comic-color-holder-b1u4a8 .comic-color-img { width: 150px; height: 150px; } .comic-color-brush-b1u4a8 { width: 115px; top: -130px; position: relative; cursor: pointer; } .comic-color-brush { width: 235px; margin-top: -325px; position: relative; cursor: pointer; } .comic-color { background: url("../assets/book1/unit1/comic/comic-background.jpg") no-repeat; background-size: contain; width: 1000px; height: 600px; z-index: 60; } .target-container { padding-top: 64px; } .target-container .column { background: url("../assets/book1/unit1/comic/comic-box-bw.png") no-repeat; background-size: contain; } .comic-image-img, .comic-target-img { width: 235px; height: 235px; } .comic-image-img-b1u4a8, .comic-target-img-b1u4a8 { width: 180px; height: 180px; } .btn-info:hover, .btn-droppable:hover { background-color: transparent; border: none; } .btn-check { background-color: #1dae29; position: absolute; right: 14px; top: 60px; } .btn-check-b1u4a8 { background-color: #1dae29; position: absolute; left: 460px; top: 20px; } /***************** SKIP CHANTS ******************/ .skipContainer { position: absolute; z-index: 30; width: 83px; height: 40px; float: left; margin-top: 10px; margin-left: 10px; } .skip { font-size: 1.4em; padding: 5px; color: #000; background-color: #fff; background: rgba(255, 255, 255, 0.5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Safari 1.x */ -khtml-opacity: 1; /* Good browsers */ opacity: 1 !important; text-align: center; } .skip span { text-transform: uppercase; cursor: pointer; } .abs { position: absolute; } /***************** HOPSCOTCH ******************/ .hopscotch { background: url("../assets/book1/unit7/hopscotch/hopscotch-background.jpg"); } .hopscotch-book3 { background: url("../assets/common/group3/hopscotch/background.jpg"); } .hopscotch-intro { background: url("../assets/common/group1/hopscotch-intro/hopscotch-intro-background.jpg"); } /***************** ZAP THE YOYO ******************/ .zapTheYoyo { background: url("../assets/common/backgrounds/zaptheyoyo-background.jpg"); } /***************** TEST BOOK ******************/ .b4t1a1, .b4t2a1, .b7t1a1, .b7t2a1, .b10t1a1, .b10t2a1 { background: url("../assets/common/backgrounds/hot-wave.jpg"); } .b4t1a2, .b4t2a2, .b7t1a2, .b7t2a2, .b10t1a2, .b10t2a2 { background: url("../assets/common/backgrounds/rainbow-waterdrops.jpg"); } .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3 { background: url("../assets/common/backgrounds/pale-orange-spiral.jpg"); } .b4t1a3, .b4t2a3, .b7t1a3, .b7t2a3, .b10t1a3, .b10t2a3 { background: url("../assets/common/backgrounds/pale-orange-spiral.jpg"); } .b4t1a4, .b4t2a4, .b7t1a4, .b7t2a4, .b10t1a4, .b10t2a4 { background: url("../assets/common/backgrounds/pink-verticallines-flowers.jpg"); } .b7t1a5, .b7t2a5, .b10t1a5, .b10t2a5 { background: url("../assets/common/backgrounds/blue-box-spiral.jpg"); } .b4t1a5, .b4t2a5 { background: url("../assets/common/backgrounds/green-box-spiral.jpg"); } .books-store { background: url("../assets/permanent/store/background.jpg"); overflow: hidden; background-size: contain; } .books-store .coverMessage { background: url("../assets/permanent/store/background.jpg"); overflow: hidden; background-size: contain; background-size: 1000px 600px; } .books-store .images { position: absolute; } .books-store .image-bw { position: absolute; cursor: pointer; z-index: 30; } .books-store .image-color { position: absolute; cursor: pointer; } .books-store .imageBW { position: absolute; top: 44px; left: 462px; cursor: pointer; } .books-store .imageColor { position: absolute; top: 44px; left: 462px; } .books-store .message { position: absolute; top: 0px; left: 0px; z-index: 100; } .books-store .okbtn { left: 450px; top: 390px; position: absolute; cursor: pointer; z-index: 101; background-size: 92px 55px; background-image: url("../assets/permanent/store/OK-active.png"); } .books-store .okbtn:hover { background-image: url("../assets/permanent/store/OK-hover.png"); background-repeat: no-repeat; } .books-store .okbtn:focus { background-image: url("../assets/permanent/store/OK-press.png"); background-repeat: no-repeat; } .books-store .rocketRoom { left: 0px; top: 422px; position: absolute; cursor: pointer; z-index: 101; } .books-store .videoRoom { left: 850px; top: 422px; position: absolute; cursor: pointer; z-index: 101; } .books-store .yesbtn { left: 350px; top: 390px; position: absolute; cursor: pointer; z-index: 101; } .books-store .rusure { left: 300px; top: 180px; position: absolute; cursor: pointer; z-index: 101; width: 360px; font-size: 30px; text-align: center; } .books-store .nobtn { left: 550px; top: 390px; position: absolute; cursor: pointer; z-index: 101; } .books-store .apples { position: absolute; cursor: pointer; top: 335px; left: 540px; } .books-store .robot { position: absolute; top: 320px; left: 700px; z-index: 50; } .books-store .parrot { position: absolute; top: 210px; left: 657px; z-index: 51; cursor: pointer; } .books-store .turtle { position: absolute; top: 0px; left: 0px; z-index: 0; width: 1000px; height: 600px; } .books-store .prices { position: absolute; cursor: pointer; z-index: 10; font-size: 16px; text-align: left; margin: 120px 0px 0px -10px; background-size: 38px 21px; background-image: url("../assets/permanent/store/tokens.png"); width: 38px; height: 21px; } .books-store .applePrice { position: absolute; cursor: pointer; z-index: 10; font-size: 16px; text-align: left; background-size: 38px 21px; background-image: url("../assets/permanent/store/tokens.png"); width: 38px; height: 21px; top: 410px; left: 578px; } .books-store .parrotPrice { position: absolute; cursor: pointer; z-index: 10; font-size: 16px; text-align: left; background-size: 38px 21px; background-image: url("../assets/permanent/store/tokens.png"); width: 38px; height: 21px; top: 365px; left: 685px; } .video-room { background: url("../assets/common/backgrounds/circles.jpg"); overflow: hidden; } .video-room .imagebox { margin-left: 15px; margin-top: 0px; display: inline-table; text-align: center; width: 950px; } .video-room .imgbox { width: 120px; cursor: pointer; } .video-room .imgbox-inactive { width: 120px; opacity: 0.2; } .video-room .pull-left-img { width: 120px; height: 80px; display: inline-block; margin: 5px 0px 0px 15px; } .video-room .closeButton { float: right; margin: 10px; }