/* DESIGN PACK VERSION: 3.0.4 */
/**
 * Big Writing Adventures - task feed
 *
 * Fonts: 'Heinemann-Roman', 'Heinemann-Bold'
 *
 * File structure:
 *   0) Set / reset
 *   1) Block setup
 *   2) Loading screen
 *   3) Welcome scene
 *   4) Task generics
 *   5) Task feed skins
 *   6) Task feed open states
 *   7) Animation keyframes
 */


/**
 * 0) Set / reset
 */
body {
  font-family: heinemann-special, sans-serif;
  width: 1024px;
  height: 768px;
  padding: 0;
  margin: 0 auto;
  background: url(../images/wallpaper.png) repeat center top;
  position: relative;
}

/**
 * 1) Block setup
 */
.scene {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left top;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.task-feed {
  width: 200px;
  height: 200px;
}

nav ul {
  margin: 0;
  padding: 0;
}

.close-button, .bwa-close-button {
  display: block;
  width: 30px;
  height: 30px;
  background: url(../images/button-close.png) no-repeat center top;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  cursor: pointer;
}

.close-button:hover, .bwa-close-button:hover {
  background-position: center bottom;
}

.csstransitions .close-button, .csstransitions .bwa-close-button {
  transition: left .3s ease, top .3s ease;
}

/**
 * 2) Loading screen
 */
body.loading {
  background-image: none;
}

.loading .scene {
  display: none;
}

.loading:after {
  position: absolute;
  width: 100px;
  height: 75px;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background-image: url(../images/loader.gif);
  display: block;
  content: " ";
}

/**
 * 3) Welcome scene
 */
#scene-welcome {
  background-image: url(../images/intro-screen-background.jpg);
}

/**
 * 3.1) Welcome scene navigation
 */
#welcome-controls {
  position: absolute;
  bottom: 65px;
  width: 100%;
}
#welcome-controls ul {
  text-align: center;
}
#welcome-controls li {
  display: inline-block;
}
#welcome-controls a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  background-position: left top;
}
#welcome-controls a:hover {
  background-position: left bottom;
}
#welcome-controls .nav-open-task-feed.resume a {
  background-position: right top;
}
#welcome-controls .nav-open-task-feed.resume a:hover {
  background-position: right bottom;
}
#welcome-controls li {
  position: relative;
}
#welcome-controls .nav-teacher-area,
#welcome-controls .nav-welcome-video {
  width: 137px;
  height: 137px;
  top:30px;
  z-index: 1;
}
#welcome-controls .nav-open-task-feed {
  width: 198px;
  height: 198px;
  margin: 0 65px;
  z-index: 2;
}

.csstransitions #welcome-controls .nav-open-task-feed {
  transform-origin: center 135px;
  transition: transform .5s ease;
}

#welcome-controls .nav-teacher-area a {
  background-image: url(../images/button-teacher-area.png);
}
#welcome-controls .nav-welcome-video a {
  background-image: url(../images/button-welcome-video.png);
}
#welcome-controls .nav-open-task-feed a {
  background-image: url(../images/button-start-mission.png);
}

/**
 * 3.2 Welcome video
 */

#intro-video {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  margin: 30px;
}

#overlayBG {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 998;
  cursor: pointer;
}

#intro-video span.close-button, #intro-video span.bwa-close-button {
  left: auto;
  right: 12px;
  cursor: pointer;
}

/**
 * 4) Task feed generics
 */
#mission-frame {
  z-index: 5;
  background-color: transparent;
}
.csstransitions #mission-frame {
  opacity: 0;
  transform: scale(0);
  transition: transform .3s ease-out, opacity .3s;
}

.no-csstransitions #mission-frame {
  display: none;
}

.no-csstransitions #mission-frame.open{
  display: block;
}

#mission-frame iframe {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#scene-task-feed {
  z-index: 3;
}

.csstransitions #scene-task-feed {
  opacity: 0;
  transform: scale(0);
  transform-origin: center 610px;
  transition: transform .3s ease-out, opacity .3s;
}

.no-csstransitions #scene-task-feed {
  display: none;
}

.no-csstransitions #scene-task-feed.open{
  display: block;
}

#scene-task-feed video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.task-feed {
  width: 945px;
  height: 776px;
  position: absolute;
  top: -5px;
  left: 20px;
  z-index: 2;
  user-select: none;
}

.csstransitions .task-feed {
  transform-origin: center 610px;
  transition: transform .3s ease-out, opacity .3s;
}

.task-feed .scroller {
  max-height: 619px;
  height: 619px;
  overflow: hidden;
  position: absolute;
  top: 110px;
  left: 42px;
  width: 820px;
}

.task-feed .task-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


.task-feed .task {
  width: 741px;
  height: 180px;
  padding: 9px 8px 7px 8px;
  background-image: url(../images/task-feed-themes/task-tile.png);
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
}

.task-feed .task-thumbnail {
  width: 160px;
  height: 180px;
  margin: 0;
  float: left;
  position: relative;
}
.task-feed .task-thumbnail img {
  border-radius: 20px;
}
.task-feed .task-thumbnail .indicator {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
}

.task .task-handle,
.current-task .task-handle .indicator {
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  height: 184px;
  width: 84px;
}

.task .task-handle {
  right: 6px;
  top: 7px;
  background-position: 0 -410px;
}

.task .task-handle .indicator {
  right: 0;
  top: 0;
  z-index: 5;
}
.task:hover .task-handle .indicator {
  display: none;
}
.cssanimations .task .task-handle .indicator {
   animation: pulsate 1.5s linear 0 infinite;
}

.task:hover .task-handle {
  background-position: 0 -205px;
}

.task-handle .number {
  position: absolute;
  bottom: 10px;
  right: 13px;
  width: 30px;
  text-align: center;
  z-index: 6;
}

.task-feed-control {
  width: 50px;
  height: 50px;
  position: absolute;
  display: block;
  background-image: url(../images/task-feed-themes/task-feed-controls.png);
  right: 86px;
  cursor: pointer;
  z-index: 3;
}
.task-feed-control.task-feed-more {
  top: 614px;
  background-position: 0 0;
}
.task-feed-control.task-feed-more:hover {
  background-position: 0 -53px;
}
.task-feed-control.task-feed-less {
  top: 680px;
  background-position: -53px 0;
}
.task-feed-control.task-feed-less:hover {
  background-position: -53px -53px;
}

.task .task-description {
  float: left;
  margin: 30px 0 0 20px;
  font-size: 28px;
  width: 450px;
}
.current-task .task-description {
  font-weight: 900;
}

.task-list .hidden {
  display: none;
}

.task.alert.current-task .task-thumbnail .indicator {
  background-image: url(../images/task-feed-themes/alert-indicator.png);
  background-position: 18px 30px;
}
.cssanimations .task.alert.current-task .task-thumbnail .indicator {
  animation: pulsate 1.5s linear 0 infinite;
}
/**
 * 5) Task feed skins
 */

/* blue */
[data-skin=blue] {
  background-image: url(../images/task-feed-themes/wallpapers/blue-sky.jpg);
}
[data-skin=blue] .task-feed {
  background-image: url(../images/task-feed-themes/blue/task-feed.png);
}
[data-skin=blue] .task-handle,
[data-skin=blue] .current-task .task-handle .indicator {
  background-image: url(../images/task-feed-themes/blue/task-feed-handles.png);
}
[data-skin=blue] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #0080d0;
}
[data-skin=blue] .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  /*background-color: #184e62;*/
}

/* green */
[data-skin=green] {
  background-image: url(../images/task-feed-themes/wallpapers/blue-sky.jpg);
}
[data-skin=green] .task-feed {
  background-image: url(../images/task-feed-themes/green/task-feed.png);
}
[data-skin=green] .task-handle,
[data-skin=green] .current-task .task-handle .indicator {
  background-image: url(../images/task-feed-themes/green/task-feed-handles.png);
}
[data-skin=green] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #92d011;
}
[data-skin=green] .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  /*background-color: #406f00;*/
}

/* orange */
[data-skin=orange] {
  background-image: url(../images/task-feed-themes/wallpapers/blue-sky.jpg);
}
[data-skin=orange] .task-feed {
  background-image: url(../images/task-feed-themes/orange/task-feed.png);
}
[data-skin=orange] .task-handle,
[data-skin=orange] .current-task .task-handle .indicator {
  background-image: url(../images/task-feed-themes/orange/task-feed-handles.png);
}
[data-skin=orange] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #e84f16;
}
[data-skin=orange] .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  /*background-color: #ad3814;*/
}


/* purple */
[data-skin=purple] {
  background-image: url(../images/task-feed-themes/wallpapers/blue-sky.jpg);
}
[data-skin=purple] .task-feed {
  background-image: url(../images/task-feed-themes/purple/task-feed.png);
}
[data-skin=purple] .task-handle,
[data-skin=purple] .current-task .task-handle .indicator {
  background-image: url(../images/task-feed-themes/purple/task-feed-handles.png);
}
[data-skin=purple] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #97368e;
}
[data-skin=purple] .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  /*background-color: #4d0b5d;*/
}


/* turquoise */
[data-skin=turquoise] {
  background-image: url(../images/task-feed-themes/turquoise/background.jpg);
}
[data-skin=turquoise] .task-feed {
  background-image: url(../images/task-feed-themes/turquoise/task-feed.png);
}
[data-skin=turquoise] .task-handle,
[data-skin=turquoise] .current-task .task-handle .indicator {
  background-image: url(../images/task-feed-themes/turquoise/task-feed-handles.png);
}
[data-skin=turquoise] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #009da0;
}
[data-skin=turquoise] .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  /*background-color: #016166;*/
}



/**
 * 6) Task feed open states
 */
.csstransitions .task-feed-active #welcome-controls .nav-open-task-feed {
  transform: scale(7);
}

.csstransitions .task-feed-active #scene-task-feed {
  opacity: 1;
}

.csstransitions .task-feed-active #scene-task-feed {
  transform: scale(1);
}

.in-mission #main-task-feed {
  opacity: 1;
}

.csstransitions .in-mission #main-task-feed {
  transform: scale(5);
}

.in-mission .close-button, .in-mission .bwa-close-button {
  top: -30px;
  left: -100px;
}

#mission-frame.open {
  opacity: 1;
}
.csstransitions #mission-frame.open {
  transform: scale(1.005);
}

/**
 * 7) Animation keyframes
 */
@-webkit-keyframes pulsate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes pulsate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulsate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * 8) Custom scrollbar
 */
.mCSB_container{
  width:auto;
  margin-right:0px;
  overflow:hidden;
}
.mCSB_container.mCS_no_scrollbar{
  margin-right:0;
}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
  margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{
  width:30px;
  height: 594px;
  position: absolute;
  top:0;
  right:0;
  margin: 8px 8px 0;
}
.mCSB_scrollTools .mCSB_draggerContainer{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  height:auto;
  width: 30px;
  background:#000; /* rgba fallback */
  background:rgba(0,0,0,0.2);
  filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
  padding-bottom: 6px;
  border-radius: 5px;
}
.mCSB_scrollTools a+.mCSB_draggerContainer{
  margin:20px 0;
}
.mCSB_scrollTools .mCSB_dragger{
  cursor:pointer;
  width:100%;
  height:30px;
  margin: 0 auto;
  margin-top: 3px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  width: 24px;
  height: 100%;
  margin: 0px auto;
  border-radius:4px;
  text-align:center;
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
  display:block;
  position:relative;
  height:20px;
  overflow:hidden;
  margin:0 auto;
  cursor:pointer;
}
.mCSB_scrollTools .mCSB_buttonDown{
  top:100%;
  margin-top:-40px;
}
/* horizontal scrollbar */
.mCSB_horizontal>.mCSB_container{
  height:auto;
  margin-right:0;
  margin-bottom:30px;
  overflow:hidden;
}
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
  margin-bottom:0;
}
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
  margin-right:0;
  margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
  width:100%;
  height:16px;
  top:auto;
  right:auto;
  bottom:0;
  left:0;
  overflow:hidden;
}
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
  margin:0 20px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  width:100%;
  height:2px;
  margin:7px 0;
  border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
  width:30px;
  height:100%;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  width:100%;
  height:4px;
  margin:6px auto;
  border-radius:10px;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
  display:block;
  position:relative;
  width:20px;
  height:100%;
  overflow:hidden;
  margin:0 auto;
  cursor:pointer;
  float:left;
}
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
  margin-left:-40px;
  float:right;
}
.mCustomScrollBox{
  -ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
}

/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox>.mCSB_scrollTools{
  opacity:0.75;
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
  opacity:0.85;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  background-image: url(../images/task-feed-themes/scrollbar-dragger.png);
  background-repeat: no-repeat;
}

.scroller:not(.mCS_no_scrollbar) .mCSB_draggerContainer {
  opacity: 1;
  transition: opacity 0.3s linear;
  transition-delay: 0.6s;
}

.scroller.mCS_no_scrollbar .mCSB_draggerContainer {
  opacity: 0;
}