section[role="region"] header:first-child h1 {
  margin: 0;
}

body {
  background-color: #1c2124;
}

#player-view.disabled .video-controls {
  pointer-events: none;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */
body:not(.pick-activity) gaia-header.thumbnails-list,
#thumbnail-list-title {
  display: inherit !important; /* 1 */
}

/* app name field is shown at non-pick mode and list view */
body.pick-activity #thumbnail-list-title {
  display: none !important; /* 1 */
}

/* moves thumbnails down to 5rem for thumbnail list title showing */
#thumbnails {
  top: 5rem;
}

/* change bottom of thumbnails to 11rem (5rem of top + 6rem of footer) */
#thumbnails>li:last-child,
#thumbnails.select>li:last-child{
  margin-bottom: 11rem;
}

/* pick activity only has top: 5rem */
body.pick-activity #thumbnails>li:last-child {
  margin-bottom: 5rem;
}

#thumbnails-bottom {
  background-color: rgba(26, 33, 36, 0.9);
}


#videoBar {
  background: none;
  box-shadow: none;
  height: 8rem;
  background-image: url(images/tablet_player_mask.png);
  background-repeat: repeat-x;;
  background-size: 100% 8rem;
  border: 0;
}

.player-controls-button {
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: none;
}

/* player-view of background */
#player-view {
  background-color: #1c2124;
}

/* play/pause button */
#play:before {
  border: 0;
}

#play:active {
  background: none;
}

#play:after {
  background-image: url("images/tablet_pause.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 4.6rem;
  display: block;
  z-index: 10;
}

#play.paused:after {
  background-image: url("images/tablet_play.png");
  background-size: 4.6rem;
}

#play:active:after {
  background-image: url("images/tablet_pause_pressed.png");
}

#play.paused:active:after {
  background-image: url("images/tablet_play_pressed.png");
}

/* time slider */
#timeSlider {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
}

/* slider text */
#timeSlider span {
  display: block;
  height: 100%;
  line-height: 8rem;
  color: #FFFFFF;
  position: absolute;
  font-size: 1.8rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  text-align: left;
}

span#elapsed-text {
  width: 6rem;
}

#duration-text {
  right: 0;
  top: 0;
  padding: 0;
}

.progress {
  border-radius: 0.2rem;
  height: 0;
}

/* slider */
#slider-wrapper {
  top: 0;
  left: 6rem;
  height: 100%;
}

#slider-wrapper div{
  left: 0;
}

#elapsedTime {
  background-color: #00CAF2;
  border: 0.2rem solid #00CAF2;
  z-index: 30;
}

#bufferedTime {
  background-color: #00CAF2;
  border: 0.2rem solid #00CAF2;
  z-index: 20;
}

#timeBackground {
  background-color: rgba(255, 255, 255, 0.3);
  border: 0.2rem solid rgba(255, 255, 255, 0.3);
  z-index: 10;
}

/* player head */
#playHead {
  position: absolute;
  background: url(images/tablet_scrubber.png) no-repeat center center;
  margin: 0 0 0 -2.3rem;
  background-size: 4.6rem;
  pointer-events: none;
  border: none;
  display: block;
  height: 100%;
  width: 4.6rem;
  z-index: 100;
  top: 0;
}

#playHead.active {
  background: url(images/tablet_scrubber_pressed.png) no-repeat center center;
  width: 4.6rem;
  height: 100%;
  margin: 0 0 0 -2.3rem;
  top: 0;
}

footer {
  height: 6rem;
}

/* selected thumbnail */
.thumbnail.selected > .inner {
  outline: solid #00caf2 0.4rem;
  outline-offset: -0.4rem;
}

/* unwatched bar */
.thumbnail .unwatched {
  background-image: none;
  background-color: #00CAF2;
}

.thumbnail .details .title {
  margin-bottom: 1rem;
}

.layout-selection .thumbnails-select,
.layout-list .thumbnails-list {
  display: block;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */
.layout-fullscreen-player .large-only {
  display: block !important; /* 1 */
}

/* we don't need to show toolbar buttons in pick mode */
body.pick-activity .single-delete-button,
body.pick-activity .single-share-button,
body.pick-activity .single-info-button {
  display: none;
}

@media (orientation: landscape) {

  /* panels of selection mode */
  .layout-selection .thumbnails-list {
    display: none !important; /* 1 */
  }

  .layout-selection #switch-fullscreen,
  .layout-selection #player-view > *,
  .layout-selection .single-delete-button,
  .layout-selection .single-share-button,
  .layout-selection .single-info-button {
    display: none;
  }
  /* show player-view for displaying background image, but all decendants are
   * hidden */
  .layout-selection #player-view {
    display: block;
  }

  /* panels of list mode */
  .layout-list #player-view,
  .layout-list #player-view #fullscreen-button {
    display: block;
  }

  .layout-list .thumbnails-select {
    display: none !important; /* 1 */
  }

  .layout-list #switch-fullscreen,
  .layout-list .video-controls #videoActionBar,
  .layout-list .video-controls #close,
  .layout-list .single-delete-button,
  .layout-list .single-share-button,
  .layout-list .single-info-button {
    display: none;
  }

  /* panels of fullscreen player mode */
  .layout-fullscreen-player #player-view {
    display: block;
  }

  .layout-fullscreen-player .thumbnails-list,
  .layout-fullscreen-player .thumbnails-select {
    display: none !important; /* 1 */
  }

  .layout-fullscreen-player #thumbnails,
  .layout-fullscreen-player .video-controls #videoActionBar {
    display: none;
  }

  /* left pane size */
  .thumbnails-select,
  .thumbnails-list,
  #thumbnails {
    left: 0;
    width: 40rem;
  }

  /* player size */
  #player-view {
    left: 40rem;
    width: calc(100% - 40rem);
  }

  .layout-list #video-container {
    margin: 6rem 1rem 1rem 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 7rem); /* top 6rem + bottom 1 rem */
  }

  .layout-fullscreen-player #player-view {
    left: 0;
    width: 100%;
  }

  /* the separator for two panes */
  #two-column-spearator {
    display: block;
    position: absolute;
    left: 40rem;
    width: 0.2rem;
    top: 5rem;
    bottom: 0;
    background-image: url(images/tablet_column_separator.png);
    background-size: 0.2rem 100%
  }

  #two-column-spearator:before {
    content: "";
    display: block;
    position: absolute;
    width: 0.2rem;
    height: 5rem;
    top: -5rem;
    background-image: url(images/tablet_section_divider.png);
    background-size: 0.2rem 100%
  }

  .layout-list #player-view header:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    height: 5rem;
    width: 0.2rem;
    background: url(images/tablet_section_divider.png) no-repeat left;
  }

  #fullscreen-button {
    background-image: url(images/tablet_fullscreen.png);
    background-size: 4.6rem;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 8rem;
    height: 100%;
    right: 0;
  }

  #fullscreen-button:active {
    background-image: url(images/tablet_fullscreen_pressed.png);
  }

  /* disable video controls when selected */
  .layout-selection .video-controls {
    pointer-events: none;
  }

  body:not(.layout-selection):not(.pick-activity) .thumbnail.focused > .inner {
    outline: solid #00caf2 0.4rem;
    outline-offset: -0.4rem;
  }

  /* video controls */
  .layout-list #play{
    width: 10rem;
  }

  .layout-list #timeSlider {
    left: 10rem;
    right: 8rem;
    width: auto;
  }

  .layout-list #slider-wrapper {
    /* duration text and padding */
    right: 7rem;
    /* text at left and right are 6rem and 1rem for additional padding between
     * fullscreen button and duration text */
    width: calc(100% - 6rem - 7rem);
  }

  .layout-list #timeBackground {
    width: 100%;
  }

  .layout-list #duration-text {
    width: 5rem;
  }

  .layout-fullscreen-player #timeSlider {
    left: 20rem;
    right: 0;
  }

  .layout-fullscreen-player #slider-wrapper {
    right: 12rem;
    /* text at left is 6rem, right is 10rem and additional 2rem for padding
     * between edge and duration text */
    width: calc(100% - 6rem - 12rem);
  }

  .layout-fullscreen-player #timeBackground {
    width: 100%;
  }

  .layout-fullscreen-player #duration-text {
    width: 10rem;
  }

  .layout-fullscreen-player #fullscreen-button {
    display: none;
  }

  /* normal case of thumbnail size */
  .thumbnail {
    border: 0;
    margin: 0.2rem 0 0 0;
    overflow: visible;
  }

  .thumbnail:before {
    content: "";
    width: 40rem;
    height: 0.2rem;
    background-image: url(images/tablet_video_divider.png);
    position: absolute;
    top: -0.2rem;
  }

  .thumbnail .details {
    margin: 1.5rem 1.5rem 1rem 1.5rem;
    height: 9.5rem;
    width: calc(100% - 24rem);
    font-size: 1.4rem;
    color: #8A9699;
  }

  .thumbnail .details .title {
    font-size: 2.4rem;
    line-height: 2.4rem;
    color: #FFFFFF;
  }

  /* spinner is only valid for tablet and landscape mode */
  #spinner-overlay {
    display: block;
  }

  /* pick mode */
  body.pick-activity.layout-selection #player-view,
  body.pick-activity.layout-list #player-view {
    display: none;
  }

  body.pick-activity #two-column-spearator {
    display: none;
  }

  /* left pane size */
  body.pick-activity .thumbnails-select,
  body.pick-activity .thumbnails-list,
  body.pick-activity #thumbnails {
    left: 0;
    width: 100%;
  }

  /* pick view of thumbnail size */
  body.pick-activity .thumbnail {
    width: calc(33% - 0.2rem);
    height: 0;
    border: 0;
    margin: 0 0 0.4rem 0;
    overflow: visible;
    float: left;
    /*
     * Why padding-bottom? We need to keep the same image ratio which 7:4.
     * According to MDN padding-top, the percentage is referring to width of the
     * block. So, we use (33% - 0.2rem) to have correct width width and applying
     * 7:4 ratio to get the correct block height.
     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
     **/
    padding-bottom: calc((33% - 0.2rem) * 4 / 7);
  }

  body.pick-activity .thumbnail:nth-child(3n),
  body.pick-activity .thumbnail:nth-child(3n + 2) {
    margin-left: 0.4rem;
  }

  body.pick-activity .thumbnail .inner,
  body.pick-activity .thumbnail .inner .img {
    width: 100%;
    height: 0;
    padding-bottom: calc(100% * 4 / 7);
  }

  body.pick-activity .thumbnail .details {
    margin: 0;
    /*
     * We still need display:flex in this case because we need all elements are
     * vertically aligned to bottom. So, we keep the height as 19.7rem which is
     * the visual spec in 800x1280. If a device's width is less than 768px, it
     * turns into tiny mode. Another 1.5rem is for the padding bottom.
     * The equation is:
     *      padding top = calculated height - detail's height - padding bottom.
     **/
    padding: calc(100% * 4 / 7 - 19.7rem - 1.5rem) 2rem 1.5rem 2rem;
    width: 16.5rem;
    height: 19.7rem;
    font-size: 1.6rem;
    color: #FFFFFF;
    text-shadow:0 0 5px #000000;
    background-image: url(images/tablet_text_mask.png);
    background-repeat: repeat-y;
    background-size: 100%;
    justify-content: flex-end;
    top: auto;
    bottom: 0;
  }

  body.pick-activity .thumbnail .details span {
    bottom: 0;
  }

  body.pick-activity .thumbnail .details .after {
    color: #FFFFFF;
  }

  body.pick-activity .thumbnail .details .title {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }
}

@media (orientation: portrait) {
  .inner {
    position: relative;
  }

  /* we don't need fullscreen button in this mode */
  #fullscreen-button {
    display: none;
  }

  /* selection mode */
  .layout-selection .thumbnails-list {
    display: none !important; /* 1 */
  }

  .layout-selection #player-view {
    display: none;
  }

  /* list mode */
  .layout-list .thumbnails-select {
    display: none !important; /* 1 */
  }

  .layout-list #player-view {
    display: none;
  }

  /* player mode / fullscreen-player mode */
  .layout-fullscreen-player .thumbnails-select,
  .layout-fullscreen-player .thumbnails-list {
    display: none !important; /* 1 */
  }

  .layout-fullscreen-player #thumbnails,
  .layout-fullscreen-player .video-controls #videoActionBar {
    display: none;
  }

  /* spinner is only valid for tablet and landscape mode */
  #spinner-overlay {
    display: none;
  }

  .layout-fullscreen-player #timeSlider {
    left: 14rem;
    right: 0;
  }

  .layout-fullscreen-player #slider-wrapper {
    right: 10rem;
    /* text at left is 6rem, right is 8rem and additional 2rem for padding
     * between edge and duration text */
    width: calc(100% - 16rem);
  }

  .layout-fullscreen-player #timeBackground {
    width: 100%;
  }

  .layout-fullscreen-player #duration-text {
    width: 8rem;
  }

  /* thumbnail size */
  .thumbnail {
    width: calc(50% - 0.2rem);
    height: 0;
    border: 0;
    margin: 0 0 0.4rem 0;
    overflow: visible;
    float: left;
    padding-bottom: calc((50% - 0.2rem) * 4 / 7);
  }

  .thumbnail:nth-child(even) {
    margin-left: 0.4rem;
  }

  .thumbnail .inner,
  .thumbnail .inner .img {
    width: 100%;
    height: 0;
    padding-bottom: calc(100% * 4 / 7);
  }

  .thumbnail .details {
    margin: 0;
    /*
     * We still need display:flex in this case because we need all elements are
     * vertically aligned to bottom. So, we keep the height as 19.7rem which is
     * the visual spec in 800x1280. If a device's width is less than 768px, it
     * turns into tiny mode. Another 1.5rem is for the padding bottom.
     * The equation is:
     *      padding top = calculated height - detail's height - padding bottom.
     **/
    padding: calc(100% * 4 / 7 - 19.7rem - 1.5rem) 2rem 1.5rem 2rem;
    width: 16.5rem;
    height: 19.7rem;
    font-size: 1.6rem;
    color: #FFFFFF;
    text-shadow:0 0 5px #000000;
    background-image: url(images/tablet_text_mask.png);
    background-repeat: repeat-y;
    background-size: 100%;
    justify-content: flex-end;
    top: auto;
    bottom: 0;
  }

  .thumbnail .details span {
    bottom: 0;
  }

  .thumbnail .details .after {
    color: #FFFFFF;
  }

  .thumbnail .details .title {
    font-size: 2.6rem;
    line-height: 2.6rem;
    color: #FFFFFF;
  }
}

/* Override header bar of building block */
/* XXX: the following css styles should be moved to building blocks,
 * bug 905056 */
section[role="region"] > header:first-child > button,
section[role="region"] > header:first-child > a {
  position: relative;
  width: 5rem;
  height: 4.9rem;
  background: none;
  float: left;
  overflow: visible;
  margin: 0;
}

section[role="region"].skin-organic > header:first-child,
.skin-organic section[role="region"] > header:first-child,
section[role="region"].skin-dark  > header:first-child,
.skin-dark  section[role="region"] > header:first-child {
  background: url("images/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
}
section[role="region"] > header:first-child h1 {
  padding: 0 1rem 0 2rem;
}
section[role="region"] > header:first-child .icon {
  width: 5rem;
}
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"] > header:first-child > button:not(:disabled):active:after,
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"] > header:first-child > button:not(:disabled):hover:after,
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
  background: url("images/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
}
section[role="region"] > header:first-child menu[type="toolbar"] a,
section[role="region"] > header:first-child menu[type="toolbar"] button {
  width: 8.2rem;
}
section[role="region"].skin-organic > header:first-child a:after,
.skin-organic section[role="region"] > header:first-child a:after,
section[role="region"].skin-dark > header:first-child a:after,
.skin-dark section[role="region"] > header:first-child a:after,
section[role="region"].skin-organic > header:first-child button:after,
.skin-organic section[role="region"] > header:first-child button:after,
section[role="region"].skin-dark > header:first-child button:after,
.skin-dark section[role="region"] > header:first-child button:after {
  background: url("images/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
}

section[role="region"] > header:first-child > button:after,
section[role="region"] > header:first-child > a:after {
  width: 5.2rem;
}

section[role="region"] > header:first-child menu[type="toolbar"] a:after,
section[role="region"] > header:first-child menu[type="toolbar"] button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 5rem;
  width: 8.2rem;
  background: url("images/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
}