#chapters {
  background-image: url("../images/chapters/background.jpg");
}

/* Chapters */

#chapters > .title {
  position: absolute;
  left: 100px;
  top: 100px;
}

/* Buttons */

#chapters > .buttons > .home {
  left: 40px;
  top: 20px;
}

#chapters > .buttons > .resume {
  right: 40px;
  top: 20px;
  -webkit-transition: opacity 0.25s;
}

#chapters > .buttons > .resume.tk-inactive {
  opacity: 0;
}

/* Sliding View */

#chapters .sliding-view {
  position: absolute;
  left: 0px;
  top: 180px;
  width: 1280px;
  height: 380px;
  overflow: hidden;
  z-index: 0;
}

#chapters .sliding-view-element {
  position: absolute;
  top: 10px;
  left: 340px;
  width: 600px;
  height: 338px;
  -webkit-transition: -webkit-transform 500ms, opacity 250ms;
  cursor: pointer;
  z-index: 0;
}

#chapters .sliding-view-element div {
  width: 600px;
  height: 338px;
  -webkit-transition: -webkit-transform 500ms, opacity 250ms;
  -webkit-transform: scale(0.8);
  opacity: 0.5;
}


#chapters .sliding-view-element-focused div {
  -webkit-transform: scale(1);
  opacity: 1;
}

#chapters .sliding-view-element div img:nth-child(1) {
  position: absolute;
}

#chapters .sliding-view-element div img:nth-child(2) {
  position: absolute;
  left: 250px;
  top: 210px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
}

#chapters .sliding-view-element-focused div:hover img:nth-child(2) {
  opacity: 1;
}

#chapters .sliding-view-element-hidden {
  display: none;
}

/* Page Control */

.slider {
  position: absolute;
  left: 378px;
  top: 610px;
  width: 524px;
  height: 48px;
  z-index: 0;
}

#chapters .page-control {
  position: absolute;
  left: 396px;
  top: 610px;
  width: 488px;
  height: 48px;
  cursor: pointer;
  z-index: 1;
}

#chapters .page-control-indicator-element {
  background: url('../images/interface/sliderPill.png') no-repeat center center;
  position: absolute;
  top: 12px;
  left: -3px;
  width: 44px;
  height: 24px;
}

/* Label */

#chapters .label {
  position: absolute;
  left: 360px;
  top: 540px;
}

/* Arrows */

#chapters .left-arrow {
  left: 300px;
  top: 595px;
}

#chapters .right-arrow {
  left: 900px;
  top: 595px;
}

#chapters .left-arrow,
#chapters .right-arrow {
  -webkit-transition: opacity 500ms;
}

#chapters .inactive {
  opacity: 0;
  pointer-events: none;
}

/* dim the arrows when they're inactive on Apple TV */
@media (-webkit-apple-tv) {
  #chapters .inactive {
    opacity: 1;
  }
  
  #chapters .sliding-view-element-focused.tk-highlighted div img:nth-child(2) {
  	opacity: 1;
  }
  
}
