/**
// 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, .cheese, .letsPlay, .mouseQuiz, .giantGeorge, .chant, .blackboard, .b1u1a6, .b1u1s7 {
  width: 1000px;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: auto;
  margin-right: auto;
}

.game-container, .cheese, .letsPlay, .mouseQuiz, .giantGeorge, .chant, .blackboard, .b1u1a6, .b1u1s7 {
  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;
}
/*****************
b1u1.scss
Should contain style rules specific to b1u1.
*****************/
/*****************
CHEESE
******************/
.cheese {
  background-image: url("../assets/book1/unit1/cheese/background.jpg");
}
.cheese .large-speech-bubble {
  background-image: url("../assets/book1/unit1/cheese/cheese-speechBubble.png");
  background-size: 315px 240px;
  background-repeat: no-repeat;
  width: 315px;
  height: 240px;
  padding-left: 60px;
  font-size: 2em;
  padding-top: 55px;
  position: absolute;
  left: 463px;
  top: 50px;
}
.cheese .large-speech-bubble .yes, .cheese .large-speech-bubble .no {
  cursor: pointer;
  margin-top: 30px;
  width: 94px;
  height: 61px;
  background-size: 94px 61px;
}
.cheese .large-speech-bubble .yes {
  background-image: url("../assets/common/messaging/buttons/yes.png");
  float: left;
}
.cheese .large-speech-bubble .yes:hover {
  background-image: url("../assets/common/messaging/buttons/yes_hover.png");
}
.cheese .large-speech-bubble .yes:focus {
  background-image: url("../assets/common/messaging/buttons/yes_click.png");
}
.cheese .large-speech-bubble .no {
  background-image: url("../assets/common/messaging/buttons/no.png");
  float: right;
  margin-right: 50px;
}
.cheese .large-speech-bubble .no:hover {
  background-image: url("../assets/common/messaging/buttons/no_hover.png");
}
.cheese .large-speech-bubble .no:focus {
  background-image: url("../assets/common/messaging/buttons/no_click.png");
}

/*****************
LET'S PLAY
******************/
.letsPlay .speechBubble {
  position: absolute;
  left: 520px;
  top: 80px;
  cursor: pointer;
}
.letsPlay .letsPlayMouse {
  position: absolute;
  left: 360px;
  top: 130px;
}

/*****************
MOUSE QUIZ
******************/
.mouseQuiz {
  background-image: url('../assets/common/mouse-quiz/mouse-quiz-background.jpg?1742470475');
  padding-top: 1px;
  background-size: 1000px 600px;
}

.circle-container {
  position: relative;
  width: 60em;
  height: 38em;
  padding: 2.8em;
  /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
 /* border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;*/
  margin-top: 10px;
}
.circle-container div {
    /*margin-left:500px;
width:100%;*/
}

.circle-container span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}
.circle-container span input {
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 155px;
  background-color: #ffffff;
  color: #000000;
  height: 80px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 1.3em;
  text-align: center;
  border: none;
  white-space: normal;
}
.circle-container span .disabled {
  background-color: #D0D0D0;
  color: #eee;
}

.circle-container input {
  display: block;
  width: 100%;
}
.circle-container input:disabled {
  background-color: #D0D0D0;
  color: #eee;
}

.questions-container {
  /*.question{
  margin-left:220px;
}*/
}

.deg0, .deg36, .deg72, .deg108, .deg144, .deg180, .deg216, .deg252, .deg288, .deg324 {
  border: none;
  background-color: #fff;
  width: 155px !important;
  height: 60px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.deg0 {
  transform: translate(22em);
  -webkit-transform: translate(22em);
  -moz-transform: translate(22em);
  -ms-transform: translate(22em);
  -o-transform: translate(22em);
}

/* 20em = half the width of the wrapper */
.deg36 {
  transform: rotate(36deg) translate(20em) rotate(-36deg);
  -webkit-transform: rotate(36deg) translate(20em) rotate(-36deg);
  -moz-transform: rotate(36deg) translate(20em) rotate(-36deg);
  -ms-transform: rotate(36deg) translate(20em) rotate(-36deg);
  -o-transform: rotate(36deg) translate(20em) rotate(-36deg);
}

.deg72 {
  transform: rotate(72deg) translate(14em) rotate(-72deg);
  -webkit-transform: rotate(72deg) translate(14em) rotate(-72deg);
  -moz-transform: rotate(72deg) translate(14em) rotate(-72deg);
  -ms-transform: rotate(72deg) translate(14em) rotate(-72deg);
  -o-transform: rotate(72deg) translate(14em) rotate(-72deg);
}

.deg108 {
  transform: rotate(108deg) translate(14em) rotate(-108deg);
  -webkit-transform: rotate(108deg) translate(14em) rotate(-108deg);
  -moz-transform: rotate(108deg) translate(14em) rotate(-108deg);
  -ms-transform: rotate(108deg) translate(14em) rotate(-108deg);
  -o-transform: rotate(108deg) translate(14em) rotate(-108deg);
}

.deg144 {
  transform: rotate(144deg) translate(19em) rotate(-144deg);
  -webkit-transform: rotate(144deg) translate(19em) rotate(-144deg);
  -moz-transform: rotate(144deg) translate(19em) rotate(-144deg);
  -ms-transform: rotate(144deg) translate(19em) rotate(-144deg);
  -o-transform: rotate(144deg) translate(19em) rotate(-144deg);
}

.deg180 {
  transform: rotate(180deg) translate(21em) rotate(-180deg);
  -webkit-transform: rotate(180deg) translate(21em) rotate(-180deg);
  -moz-transform: rotate(180deg) translate(21em) rotate(-180deg);
  -ms-transform: rotate(180deg) translate(21em) rotate(-180deg);
  -o-transform: rotate(180deg) translate(21em) rotate(-180deg);
}

.deg216 {
  transform: rotate(216deg) translate(19em) rotate(-216deg);
  -webkit-transform: rotate(216deg) translate(19em) rotate(-216deg);
  -moz-transform: rotate(216deg) translate(19em) rotate(-216deg);
  -ms-transform: rotate(216deg) translate(19em) rotate(-216deg);
  -o-transform: rotate(216deg) translate(19em) rotate(-216deg);
}

.deg252 {
  transform: rotate(252deg) translate(15em) rotate(-252deg);
  -webkit-transform: rotate(252deg) translate(15em) rotate(-252deg);
  -moz-transform: rotate(252deg) translate(15em) rotate(-252deg);
  -ms-transform: rotate(252deg) translate(15em) rotate(-252deg);
  -o-transform: rotate(252deg) translate(15em) rotate(-252deg);
}

.deg288 {
  transform: rotate(288deg) translate(15em) rotate(-288deg);
  -webkit-transform: rotate(288deg) translate(15em) rotate(-288deg);
  -moz-transform: rotate(288deg) translate(15em) rotate(-288deg);
  -ms-transform: rotate(288deg) translate(15em) rotate(-288deg);
  -o-transform: rotate(288deg) translate(15em) rotate(-288deg);
}

.deg324 {
  transform: rotate(324deg) translate(19em) rotate(-288deg);
  -webkit-transform: rotate(324deg) translate(19em) rotate(-324deg);
  -moz-transform: rotate(324deg) translate(19em) rotate(-324deg);
  -ms-transform: rotate(324deg) translate(19em) rotate(-324deg);
  -o-transform: rotate(324deg) translate(19em) rotate(-324deg);
}

/*****************
GIANT GEORGE
******************/
.giantGeorge {
  background-image: url("../assets/book1/unit1/giantGeorge/ggBackground.jpg");
  background-size: 1000px 600px;
  overflow: hidden;
}
.giantGeorge .chip {
  position: relative;
  height: 240px;
  margin-left: 600px;
  margin-top: 240px;
}
.giantGeorge .ropeDrop {
  position: relative;
  margin-top: -500px;
}
.giantGeorge .ropeDrop div {
  top: -200px;
  width: 120px;
  position: relative;
  left: 525px;
}
.giantGeorge .ropeDrop .up-arrow {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Safari and Chrome */
  position: relative;
  margin-top: -900px;
  margin-left: 580px;
  width: 80px;
  cursor: pointer;
}

/*****************
CHANT
******************/
.chant {
  background-size: 1000px 600px;
  background-color: black;
  /*.chant-again {
  position: relative;
  margin-left: 430px;
  margin-top: -450px;
  div {

    width: 100px;
    height: 50px;
    position: relative;

    cursor: pointer;
  }

  .yes {
    margin-top: -100px;
    margin-left: 40px
  }

  .no {
    margin-left: 200px;
    margin-top: -50px;
  }
}*/
}
.chant #videoContainer {
  z-index: 1;
}
.chant .giantGeorge {
  background-image: url("../assets/book1/unit1/chant/ggBackground.jpg");
  overflow: hidden;
}
.chant .giantGeorge .chip {
  position: relative;
  height: 240px;
  margin-left: 600px;
  margin-top: 240px;
}
.chant .giantGeorge .ropeDrop {
  position: relative;
  margin-top: -500px;
}
.chant .giantGeorge .ropeDrop div {
  top: -200px;
  width: 120px;
  height: 600px;
  position: relative;
  left: 525px;
}
.chant .giantGeorge .ropeDrop .up-arrow {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Safari and Chrome */
  position: relative;
  margin-top: -900px;
  margin-left: 580px;
  width: 80px;
  cursor: pointer;
}

/*****************
BLACKBOARD
******************/
.blackboard {
  background-image: url("../assets/book1/unit1/blackboard/classroom-background.jpg");
  overflow: hidden;
}
.blackboard .blackboard-word-done {
  color: #ffffff;
  text-shadow: 0 0 1px #ffffff;
}
.blackboard .firstLetterFlashcard {
  position: absolute;
  top: 0;
}
.blackboard .firstLetterFlashcard .alphabet {
  font-size: 3em;
  width: 30%;
  text-align: center;
  float: right;
  padding-top: 20px;
}
.blackboard .firstLetterFlashcard .alphabet span {
  padding: 10px;
  cursor: pointer;
}
.blackboard .firstLetterFlashcard .alphabet .ng-binding:hover {
  text-shadow: 0px 2px 3px #333;
}
.blackboard .firstLetterFlashcard .flashcard-display img {
  margin-right: auto;
  margin-left: auto;
  margin-top: 5%;
}
.blackboard .chip {
  height: 240px;
  position: absolute;
  top: 310px;
  left: 175px;
}

.blackboard-words {
  text-align: center;
  position: relative;
  margin-left: 280px;
  padding-top: 70px;
  width: 500px;
  height: 400px;
}
.blackboard-words p {
  color: #ffffff;
  float: left;
  text-align: center;
  font-size: 2em;
  width: 135px;
  height: 50px;
  cursor: pointer;
}
.blackboard-words div {
  float: left;
    /*padding-left:25px;
padding-top:10px;
padding-bottom:20px;*/
}

.missingLetter {
  font-family: "VNF-ComicSans", sans-serif;
  position: relative;
  font-size: 8em;
  z-index: 2000;
  margin-top: -100px;
}

#alphabet {
  width: 300px;
  height: 500px;
  float: left;
  font-size: 4em;
  font-family: "VNF-ComicSans", sans-serif;
  margin-left: 25px;
}
#alphabet div {
  cursor: pointer;
  width: 75px;
  height: 70px;
  float: left;
}

.hangWordBackground {
  background-color: #eaeaea;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: absolute;
  width: 400px;
  height: 100px;
  right: 40px;
  top: 180px;
  margin-left: 10px;
  padding: 20px;
}

.up-arrow {
  transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  /* IE 9 */
  -webkit-transform: rotate(120deg);
  /* Safari and Chrome */
  margin-top: -150px;
}

/*****************
ROPE CLIMB
******************/
.ropeClimb.multiple-choice {
  background: url("../assets/book1/unit1/ropeClimb/rope-climb-background.jpg");
}
.ropeClimb.multiple-choice .question, .ropeClimb.multiple-choice .answer {
  font-size: 35px;
}
.ropeClimb.multiple-choice .rope {
  background: transparent url('../assets/book1/unit7/rope-climb/rope.png?1742470463') repeat-y center center;
  width: 226px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.ropeClimb.multiple-choice .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;
}
.ropeClimb.multiple-choice .answers {
  list-style-type: lower-alpha;
  list-style-position: inside;
  position: absolute;
}
.ropeClimb.multiple-choice .answers .answer {
  cursor: pointer;
  position: absolute;
  width: 310px;
  left: 596px;
  text-align: center;
}
.ropeClimb.multiple-choice .answers.answers-2 .answer-0 {
  top: 140px;
}
.ropeClimb.multiple-choice .answers.answers-2 .answer-1 {
  top: 390px;
}
.ropeClimb.multiple-choice .answers.answers-3 .answer-0 {
  top: 120px;
}
.ropeClimb.multiple-choice .answers.answers-3 .answer-1 {
  top: 240px;
}
.ropeClimb.multiple-choice .answers.answers-3 .answer-2 {
  top: 360px;
}
.ropeClimb.multiple-choice .question-0 {
  font-size: 25px;
  position: absolute;
  left: 20px;
  top: 100px;
  width: 490px;
  text-align: left;
}
.ropeClimb.multiple-choice .question-1 {
  font-size: 25px;
  position: absolute;
  left: 20px;
  top: 150px;
  width: 490px;
  text-align: left;
}
.ropeClimb.multiple-choice .question-2 {
  font-size: 25px;
  position: absolute;
  left: 20px;
  top: 200px;
  width: 490px;
  text-align: left;
}
.ropeClimb.multiple-choice .question-3 {
  font-size: 25px;
  position: absolute;
  left: 20px;
  top: 250px;
  width: 490px;
  text-align: left;
}
.ropeClimb.multiple-choice .question-4 {
  font-size: 25px;
  position: absolute;
  left: 20px;
  top: 350px;
  width: 490px;
  text-align: left;
}
.ropeClimb.multiple-choice .question-5 {
  font-size: 25px;
  position: absolute;
  left: 20px;
  top: 400px;
  width: 490px;
  text-align: left;
}
.ropeClimb.multiple-choice .question {
  font-size: 2.7em;
  position: absolute;
  left: 20px;
  top: 190px;
  width: 350px;
  text-align: center;
}

.unit1 .tickMouse {
  position: absolute;
  top: 14%;
  left: 411px;
  width: 70px;
}
.unit1 .tickSpeech {
  position: absolute;
  top: 9%;
  left: 630px;
  width: 70px;
}

/*****************
LETS LEARN
******************/
.b1u1s4 {
  background: url("../assets/book1/unit1/letsPlay/b1u1s4/b1u1s4-letsPlay-background.jpg");
}

/*****************
 CARD MATCHING
 ****************/
.b1u1a1a {
  background: url('../assets/common/backgrounds/purple-background.jpg?1742470475');
}

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

/*****************
CHANT
******************/
.b1u1s7 {
  background: url("../assets/book1/unit1/chant/ggBackground.jpg");
}