/**
// 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, .atThePark, .hopscotchIntro, .hopscotch, .whatDoYouHaveIntro, .zapTheYoyo, .whatDoYouHave, .U7S5intro, #roller-skate-race-intro, .roller-skate-race, .ginsYoyo, .wordsMatch, .b1u7a4, .b1u7a2a, .b1u7s9, .b1u7s7 {
  width: 1000px;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: auto;
  margin-right: auto;
}

.game-container, .atThePark, .hopscotchIntro, .hopscotch, .whatDoYouHaveIntro, .zapTheYoyo, .whatDoYouHave, .U7S5intro, #roller-skate-race-intro, .roller-skate-race, .ginsYoyo, .wordsMatch, .b1u7a4, .b1u7a2a, .b1u7s9, .b1u7s7 {
  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;
}
/*****************
AT THE PARK
******************/
.atThePark, .hopscotchIntro, .hopscotch, .whatDoYouHaveIntro {
  overflow: hidden;
}

.atThePark .angledArrow {
  transform: rotate(157deg);
  -ms-transform: rotate(157deg);
  /* IE 9 */
  -webkit-transform: rotate(157deg);
  /* Safari and Chrome */
}

.atThePark .mouse-glowit {
  position: absolute;
  top: 156px;
  left: 828px;
  cursor: pointer;
}

#atTheParkScene {
  position: relative;
  z-index: 1;
}
#atTheParkScene div {
  float: left;
  position: absolute;
  /*cursor: pointer;*/
}
#atTheParkScene div:nth-child(1) {
  margin-left: 723px;
  margin-top: 197px;
}
#atTheParkScene div:nth-child(2) {
  top: 113px;
  left: 28px;
}
#atTheParkScene div:nth-child(3) {
  top: 332px;
  left: 610px;
}
#atTheParkScene div:nth-child(5) {
  top: 160px;
  left: 305px;
}
#atTheParkScene div:nth-child(4) {
  top: 469px;
  left: 525px;
}
#atTheParkScene div:nth-child(6) {
  top: 105px;
  left: 260px;
}
#atTheParkScene div:nth-child(7) {
  top: 225px;
  left: -44px;
}
#atTheParkScene div:nth-child(8) {
  top: 218px;
  left: 475px;
}
#atTheParkScene .mouse {
  top: 156px;
  left: 828px;
}

/*****************
Hopscotch intro
******************/
#hopscotchIntroScene {
  position: relative;
  z-index: 1;
}
#hopscotchIntroScene div {
  float: left;
  position: absolute;
  /*cursor: pointer;*/
}
#hopscotchIntroScene .gin {
  top: 156px;
  left: 72px;
}
#hopscotchIntroScene .user {
  top: 297px;
  left: 782px;
}
#hopscotchIntroScene .trick {
  top: 125px;
  left: 225px;
  width: 600px;
}
#hopscotchIntroScene .trick img {
  float: left;
  position: absolute;
}
#hopscotchIntroScene .trick img:nth-child(1) {
  left: 370px;
  top: 0px;
}
#hopscotchIntroScene .trick img:nth-child(2) {
  left: 245px;
  top: 0px;
}
#hopscotchIntroScene .trick img:nth-child(3) {
  left: 145px;
  top: 0px;
}
#hopscotchIntroScene .trick img:nth-child(4) {
  left: 107px;
  top: 0px;
}
#hopscotchIntroScene .trick img:nth-child(5) {
  left: 45px;
  top: 0px;
}
#hopscotchIntroScene .left {
  position: absolute;
  margin-top: 320px;
  cursor: pointer;
  width: 110px;
  left: 20px;
  z-index: 20;
}

#hopscotchScene {
  width: 1000px;
  height: 600px;
  position: relative;
}
#hopscotchScene div.alphabetical {
  font-family: "VNF-ComicSans", sans-serif;
  color: white;
  font-size: 6em;
  position: absolute;
}
#hopscotchScene .text-glow {
  color: yellow !important;
  /*text-shadow: 0 0 30px red !important;*/
}
#hopscotchScene .start-text, #hopscotchScene .stop-text {
  font-family: "VNF-ComicSans", sans-serif;
  color: white;
  font-size: 4em;
  position: absolute;
  -ms-transform: rotate(270deg);
  /* IE 9 */
  -moz-transform: rotate(270deg);
  /* Firefox */
  -webkit-transform: rotate(270deg);
  /* Safari and Chrome */
  -o-transform: rotate(270deg);
  /* Opera */
}
#hopscotchScene .start-text.level0 {
  top: 260px;
  left: 245px;
}
#hopscotchScene .stop-text.level0 {
  top: 260px;
  left: 620px;
}
#hopscotchScene .start-text.level1 {
  top: 260px;
  left: 200px;
}
#hopscotchScene .stop-text.level1 {
  top: 260px;
  left: 660px;
}
#hopscotchScene .start-text.level2 {
  top: 260px;
  left: 160px;
}
#hopscotchScene .stop-text.level2 {
  top: 260px;
  left: 710px;
}
#hopscotchScene .start-text.level3 {
  top: 260px;
  left: 105px;
}
#hopscotchScene .stop-text.level3 {
  top: 260px;
  left: 755px;
}
#hopscotchScene .start-text.level4 {
  top: 260px;
  left: 10px;
}
#hopscotchScene .stop-text.level4 {
  top: 260px;
  left: 850px;
}
#hopscotchScene .start-text.level5 {
  top: 260px;
  left: -20px;
}
#hopscotchScene .stop-text.level5 {
  top: 260px;
  left: 880px;
}
#hopscotchScene .start-text.level7 {
  top: 260px;
  left: 60px;
}
#hopscotchScene .stop-text.level7 {
  top: 260px;
  left: 805px;
}
#hopscotchScene .gameboard-counter {
  font-family: "VNF-ComicSans", sans-serif;
  color: white;
  font-size: 2em;
  position: absolute;
  top: 50px;
  left: 100px;
}

#whatDoYouHaveIntroScene {
  width: 1000px;
  height: 600px;
  position: relative;
}
#whatDoYouHaveIntroScene .whatDoYouHaveText img {
  position: absolute;
  left: 280px;
  top: 0;
}
#whatDoYouHaveIntroScene .bag img {
  position: absolute;
  left: 500px;
  top: 335px;
}

#whatDoYouHaveScene {
  width: 1000px;
  height: 600px;
  position: relative;
}
#whatDoYouHaveScene .questionText {
  position: absolute;
  left: 430px;
  top: 165px;
}
#whatDoYouHaveScene .answersText {
  position: absolute;
  left: 435px;
  top: 210px;
  font-family: "VNF-ComicSans", sans-serif;
  color: white;
  font-size: 2em;
}
#whatDoYouHaveScene .answers {
  position: absolute;
  left: 430px;
  top: 300px;
  widt: 350px;
  height: 120px;
}
#whatDoYouHaveScene .answers div.ng-scope {
  float: left;
  margin-right: 20px;
}
#whatDoYouHaveScene .answers .mark {
  width: 118px;
  position: relative;
}
#whatDoYouHaveScene .answers .mark img {
  position: absolute;
  left: 45px;
  top: 5px;
}

/*****************
FLASHCARD MATCHING
******************/
.b1u7a1 {
  background: url("../assets/common/backgrounds/blue-carousel.jpg");
}

/*****************
Zap the Yoyo
******************/
.zapTheYoyo {
  overflow: hidden;
}
.zapTheYoyo .yoyoAnswers {
  position: absolute;
  left: 25%;
  height: 100%;
  width: 60%;
}
.zapTheYoyo .yoyoAnswers .answer {
  width: 33%;
  height: 100%;
  float: left;
}
.zapTheYoyo .yoyoAnswers .answer img {
  margin-left: 35px;
  position: absolute;
  cursor: pointer;
}
.zapTheYoyo .yoyoAnswers .answer .answerWord {
  font-size: 2.5em;
  color: #ffffff;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
  margin-top: -30px;
}
.zapTheYoyo .yoyoAnswers .yoyoString {
  width: 2px;
  background-color: #ffffff;
  margin-left: 47%;
}
.zapTheYoyo .yoyoQuestions {
  position: absolute;
  left: 83%;
  top: 23%;
  width: 120px;
  height: 120px;
}

/*****************
What Do You Have
******************/
.whatDoYouHave {
  overflow: hidden;
}
.whatDoYouHave .question {
  color: white;
  font-size: 2.8em;
  margin-left: 35%;
  width: 60%;
}
.whatDoYouHave .answer {
  color: white;
  margin-left: 40%;
  font-size: 2em;
  margin-top: 26%;
}
.whatDoYouHave .dull {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=50);
  /* Netscape */
  -moz-opacity: 0.5;
  /* Safari 1.x */
  -khtml-opacity: 0.5;
  /* Good browsers */
  opacity: 0.5;
}
.whatDoYouHave .bright {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* IE 5-7 */
  filter: alpha(opacity=100);
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1;
}

/*****************
Roller Skate Race intro
******************/
.U7S5intro {
  overflow: hidden;
  background: url('../assets/book1/unit7/whatDoYouHaveIntro/b1u7s5/b1u7s5-whatDoYouHaveIntro-background.jpg?1742470463');
}
.U7S5intro .bag img {
  position: absolute;
  left: 500px;
  top: 335px;
}

#roller-skate-race-intro {
  background: url('../assets/book1/unit7/roller-skate-race-intro/b1u7s6-background.jpg?1742470463');
}
#roller-skate-race-intro div.boy {
  position: absolute;
  left: 110px;
  top: 125px;
}
#roller-skate-race-intro div.marybeth {
  position: absolute;
  left: 700px;
  top: 70px;
}
#roller-skate-race-intro div.bubbleText {
  position: absolute;
  left: 375px;
  top: 0px;
}

/*****************
Roller Skate Race
******************/
.roller-skate-race {
  overflow: hidden;
  background: url('../assets/book1/unit7/roller-skate-race/b1u7a5-background.jpg?1742470463');
}
.roller-skate-race .answerList {
  position: absolute;
  top: 480px;
  left: 45px;
  font-size: 38px;
  width: 400px;
  height: 130px;
  color: #000000;
  float: right;
}
.roller-skate-race .answerList .word {
  margin: 0px 15px;
  cursor: pointer;
  float: right;
  background-color: #ffffff;
  width: 70px;
  display: inline-table;
  text-align: center;
}
.roller-skate-race .answerList .word:hover, .roller-skate-race .answerList .word:active, .roller-skate-race .answerList .word.active {
  background: #d3d3d3;
  color: darkgreen;
}
.roller-skate-race .questionList {
  position: absolute;
  top: 470px;
  left: 450px;
  font-size: 45px;
  width: 600px;
  height: 130px;
  color: #000000;
}
.roller-skate-race .questionList .word {
  margin: 0px 10px;
  cursor: pointer;
  float: left;
  width: 400px;
}
.roller-skate-race .questionList .question {
  cursor: pointer;
  float: left;
  text-align: center;
  width: 115px;
  height: 78px;
  background-color: white;
  border: solid 1px black;
}
.roller-skate-race .roundDisplay {
  margin: 35px;
}
.roller-skate-race .roundDisplay div {
  color: #fff;
  width: 200px;
  font-size: 2em;
  float: left;
}
.roller-skate-race .roundDisplay img {
  width: 40px;
  margin-top: -22px;
}

/*****************
Gin's Yoyo
******************/
.ginsYoyo {
  background: url('../assets/book1/unit7/ginsYoyo/b1u7s8-ginsYoyo-background.jpg?1742470463');
  overflow: hidden;
}

.wordsMatch {
  overflow: hidden;
}
.wordsMatch .roundTitle {
  position: absolute;
  display: inline;
  padding: 2px;
  width: 160px;
  text-align: center;
  font-size: 20px;
  background-color: mediumpurple;
  border: #ffffff 1px solid;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.wordsMatch .countDown {
  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;
  background-color: #ffff00;
}
.wordsMatch .countDown-ext {
  position: absolute;
  left: 108px;
  top: 10px;
  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;
  background-color: #ffff00;
}
.wordsMatch .words {
  position: absolute;
  height: 30px;
  width: 90px;
  cursor: pointer;
  text-align: center;
  font-size: 50px;
}
.wordsMatch .words-ext {
  position: absolute;
  height: 30px;
  width: 300px;
  cursor: pointer;
  text-align: left;
  font-size: 30px;
}
.wordsMatch .completed {
  position: absolute;
  height: 30px;
  width: 150px;
  cursor: pointer;
  text-align: center;
  font-size: 40px;
}
.wordsMatch .completed-ext {
  position: absolute;
  height: 30px;
  width: 200px;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
}
.wordsMatch .letters {
  position: absolute;
  text-align: center;
  font-size: 140px;
  left: 535px;
  top: 165px;
  width: 200px;
  height: 200px;
}
.wordsMatch .letters-ext {
  position: absolute;
  text-align: left;
  font-size: 40px;
  left: 511px;
  top: 290px;
  width: 210px;
  height: 100px;
  display: inline-table;
  text-align: center;
}

/*********************
**     ROPE CLIMB    *
**********************/
.rope-climb {
  background: #79c6e8 url('../assets/book1/unit7/rope-climb/background.jpg?1742470463') no-repeat center center;
}
.rope-climb .mark {
  width: 60px;
}
.rope-climb .quiz {
  font-size: 36px;
  font-weight: bold;
  float: right;
  width: 684px;
  margin-right: 50px;
}
.rope-climb .quiz span {
  display: inline-block;
  cursor: pointer;
  background: #fff;
  margin: 5px;
  padding: 5px 10px;
  line-height: 72px;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.rope-climb .quiz span:hover, .rope-climb .quiz span:active, .rope-climb .quiz span.active {
  background: #f7f763;
}
.rope-climb.fill-word .quiz {
  margin-top: 150px;
  text-align: center;
}
.rope-climb.fill-word .quiz .ask {
  margin-bottom: 60px;
}
.rope-climb.fill-word .quiz .answers {
  /*       width: 300px; */
  margin-left: auto;
  margin-right: auto;
}
.rope-climb.fill-word .quiz .ui-sortable-placeholder {
  margin: 0 1.5em;
}
.rope-climb.fill-word .quiz .answer {
  background: #f7f763;
}
.rope-climb.fill-word .quiz .mark {
  position: absolute;
}
.rope-climb.extra-word .quiz {
  margin-top: 150px;
  text-align: right;
  position: relative;
}
.rope-climb.extra-word .quiz .answers {
  margin-right: 100px;
  position: relative;
}
.rope-climb.extra-word .quiz .btn-deactive {
  outline: 0;
  margin-top: 50px;
  width: 170px;
  height: 60px;
  background: transparent url('../assets/book1/unit7/rope-climb/b1u7a9/btn-check-hover.png?1742470463') no-repeat center center;
}
.rope-climb.extra-word .quiz .xclass {
  position: absolute;
  margin: -104px 0px 0px -15px;
  background: transparent;
  color: #008000;
  font-size: 20px;
}
.rope-climb.extra-word .quiz .btn {
  outline: 0;
  margin-top: 50px;
  width: 170px;
  height: 60px;
  background: transparent url('../assets/book1/unit7/rope-climb/b1u7a9/btn-check-click.png?1742470463') no-repeat center center;
}
.rope-climb.extra-word .quiz .btn:hover {
  background: transparent url('../assets/book1/unit7/rope-climb/b1u7a9/btn-check-hover.png?1742470463') no-repeat center center;
}
.rope-climb.extra-word .quiz .btn:active, .rope-climb.extra-word .quiz .btn:focus {
  background: transparent url('../assets/book1/unit7/rope-climb/b1u7a9/btn-check-normal.png?1742470463') no-repeat center center;
}
.rope-climb.extra-word .quiz .mark {
  position: absolute;
  right: -60px;
}
.rope-climb.match-sentence .quiz {
  margin-top: 10px;
  text-align: center;
}
.rope-climb.match-sentence .quiz span {
  line-height: 1.5em;
  font-size: 24px;
  font-weight: normal;
}
.rope-climb.match-sentence .quiz .ask {
  width: 320px;
  height: 320px;
  margin-left: auto;
  margin-right: auto;
}
.rope-climb.match-sentence .quiz .answers {
  margin-top: 10px;
  position: relative;
}
.rope-climb.match-sentence .quiz .mark {
  position: absolute;
  right: 180px;
  top: 80px;
}
.rope-climb .rope {
  background: transparent url('../assets/book1/unit7/rope-climb/rope.png?1742470463') repeat-y center center;
  width: 226px;
  height: 600px;
  float: left;
  margin-left: 30px;
  position: relative;
}
.rope-climb .rope .chip {
  position: absolute;
  left: 0;
  width: 226px;
  height: 395px;
  -moz-transition: top 3s;
  -o-transition: top 3s;
  -webkit-transition: top 3s;
  transition: top 3s;
}

/*****************
MULTIPLE CHOICE
******************/
.b1u7a4 {
  background: url("../assets/common/backgrounds/bag-grass.jpg");
}

/*****************
WORD SEARCH
******************/
.b1u7a2a {
  background: url("../assets/book1/wordSearch/b1u7a2a/b1u7a2a-wordSearch-background.jpg");
}

/*****************
TRANSITION ANIMATIONS
******************/
.b1u7s9 {
  background: url("../assets/book1/unit7/final/b1u7-final-animation-background.jpg");
}

/*****************
CHANT
******************/
.b1u7s7 {
  background: url("../assets/book1/unit7/chant/chant-unit7-background.jpg");
}