<!DOCTYPE html>
<!--
 | Absolutely positioned elements have their containing blocks set to their
 | first ancestor with a position of 'absolute', 'relative' or 'fixed'.  They
 | should inherit CSS properties from their parent, as usual, even though their
 | percentage-based used values are calculated based on their containing block.
 -->
<html>
<head>
  <style>
    .outer-absolute-block {
      position: absolute;
      left: 120px;
      top: -130px;
      width: 300px;
      height: 300px;
      font-size: 10px;
      font-weight: bold;
      color: rgb(0, 0, 255);
    }

@font-face {
  font-family: 'roboto-regular';
  src: url('../assets/Roboto-Regular.ttf') format('truetype');
}

body {
  font-family: 'roboto-regular';
  margin: auto;
  background-color: #222222;
}

div {
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#fps {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: center;
  padding-top: 0.3em;
  width: 5em;
  height: 1.7em;
  background-color: #00ff00;
  z-index: 100;
}

.menu {
  position: absolute;
  overflow: hidden;
  background: #ce292d;
  color: #333;
  height: 100%;
  z-index: 10;
}

.icon-focus {
  position: absolute;
  width: 94%;
  height: 4em;
}
.menu.focus .icon-focus {
  background-color: #ffffff;
}

.lozenge {
  padding: 1.3em 0 0 1.5em;
  line-height: 3em;

  -moz-transition: opacity 100ms;
  -webkit-transition: opacity 100ms;
  transition: opacity 100ms;
  transition-delay: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.menu.focus .lozenge {
  opacity: 0;

  -moz-transition: opacity 100ms;
  -webkit-transition: opacity 100ms;
  transition: opacity 100ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.column {
  position: absolute;
  left: 1em;
  top: 1em;
  width: 30em;
}

.icon {
  position: absolute;
  width: 94%;
  height: 4em;
}

.icon-content {
  display: inline-block;
  font-family: 'youtube-icons';
  font-size: 3em;
  text-align: center;
  line-height: 1.33em;
  color: #ffffff;
  width: 1.66em;
  vertical-align: middle;
}

.icon .icon-content {
  -moz-transition: color 200ms;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}
.icon .label {
  display: inline-block;
  color: #FF0000;
  font-size: 1.5em;
  vertical-align: middle;

  -moz-transition: color 200ms;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.icon-content.hidden {
  display: none;
}
.icon.focus .icon-content {
  color: #444444;

  -moz-transition: color 200ms;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}
.icon.focus .label {
  color: #444444;

  -moz-transition: color 200ms;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.icon-content.icon-youtube-logo {
  padding-left: .5em;
  font-size: 2em;
  line-height: 2.5em;
}

.icon.locked .label {
  line-height: 3.5em;
  padding-left: 1em;
  font-weight: bold;
}

.main {
  position: absolute;
  left: 10%;
  width: 100%;
  height: 100%;
}

.anchor {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.anchor.focus .fade {
  opacity: 0;

  -moz-transition: opacity 200ms;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
  transition-delay: 50ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}
.fade {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;

  -moz-transition: opacity 200ms;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
  transition-delay: 50ms;
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.header {
  position: absolute;
  overflow: visible;
  width: 90%;
  height: 60%;
}

.headerbuttons {
  position: absolute;
  width: 37em;
  height: 6em;
  bottom: 24%;
  right: 1em;
  background: #000;
}

.button,
.button-focus,
.button-background {
  position: absolute;
  display: inline-block;
  margin: 1em 0 0 1em;
  width: 17em;
  height: 4em;

  color: #fff;
}
.button-background {
  background: #444;
  position: initial;
}
.button-background-container {
  position: absolute;
}
.button-focus {
  background: #ffffff;
  opacity: 0;
}
.headerbuttons.focus .button-focus {
  opacity: 1;
}

.button .icon-content {
  display: inline-block;
  font-size: 2em;
  padding: .33em 0 0 .5em;
  vertical-align: top;
}
.button .label {
  display: inline-block;
  font-size: 1.5em;
  width: 7em;
  text-align: center;
  padding-top: .66em;
}

.button .icon-content,
.button .label {
  color: #f00;
}
.button.focus .icon-content,
.button.focus .label {
  color: #400;
}

.content {
  position: absolute;
  overflow: hidden;
  width: 90%;
  top: 45%;
  height: 180%;
}

.row-container {
  position: absolute;
  width: 100%;
  height: 20em;
}

.row-label {
  width: 30em;
  height: 1em;
  font-size: 2em;
  padding-left: 1em;
}

.row {
  position: absolute;
  margin: 1em 0;
  padding-left: 1em;
  width: 100%;
  height: 20em;
  overflow: hidden;
}

.item-focus {
  position: absolute;
  width: 20em;
  height: 20em;
  z-index: -1;
  background: #ffffff;
}

.item {
  position: absolute;
  margin: 0 1em 0 0;
  width: 20em;
  height: 20em;
  color: #999999;
}
.item.hidden {
  display: none;
}
.item .top {
  width: 100%;
  height: 55%;
}
.item .thumbnail {
  width: 100%;
  height: 100%;

  background-position: center;
  background-size: 100%;
}

.title {
  padding: .5em;
  font-size: 1.4em;
  overflow: hidden;
  height: 2.1em;
  text-overflow: ellipsis;
}

.info {
  position: absolute;
  bottom: .5em;
  font-size: 1em;
  padding: 0 0.8em;
}

.viewCount,
.date {
  display: inline-block;
  margin-right: 2em;
}
.viewCount:empty,
.date:empty,
.by:empty {
  display: none;
}

.playlist {
  position: absolute;
  width: 10em;
  height: 9em;
  right: 0em;
  top: 0em;
  text-align: center;
  line-height: 1.5em;
  padding-top: 2em;
  background: rgba(0, 0, 0, .8);
}
.playlist .number {
  font-size: 2.5em;
  font-weight: bold;
}
.playlist .icon-playlist {
  line-height: 1.5em;
  font-size: 2.5em;
  text-align: center;
}
.playlist:empty {
  display: none;
}

.duration {
  position: absolute;
  top: 9em;
  right: .4em;
  height: 1em;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  padding: .2em .5em .5em .5em;
  border-radius: 0.2em;
}
.duration:empty {
  display: none;
}

.second-button {
  -webkit-transform: translateX(11em)
}

  </style>
</head>

<body>
  <div class="outer-absolute-block">

    <div class="hbox headerbuttons focusable">
      <div class="button-background-container">
        <div class="inert locked leaf button-background"></div>
        <div class="inert locked leaf button-background"></div>
      </div>
      <div class="inert button-focus"></div>
      <div class="leaf button focusable">
        <div class="icon-content icon-player-play"></div>
        <div class="label">Watch</div>
      </div>
      <div class="leaf button focusable">
        <div class="icon-content icon-logo-lozenge"></div>
        <div class="label second-button">Subscribe</div>
      </div>
    </div>

  </div>
</body>

</html>