html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/* TODO - Put into some sort of order later */
.xhdr {
  height: 144px;
  margin-top: 31px;
  background: transparent url(/images/intro/header.jpg) no-repeat center right;
}

.xhdr video {
  width: 192px;
  height: 144px;
  background: black;
  margin-left: 12px;
  border: 1px solid #444;
  border-radius: 6px;
}

.videolist figure {
  float: left;
  width: 50%;
  margin: 0px;
  padding: 6px;
}

.videolist figure figcaption {
  font-size: 16px;
  line-height: 25px;
  margin: 25px 0 0 0;
  text-align: center;
}

.videolist figure video {
  width: 100%;
}

#rnsbox[x-dd="ddcode"] ddpw:hover {
  border-bottom: 2px solid red;
  cursor: pointer;
}

#rnsbox[x-dd="plain"] ddw:hover ddpw {
  border-bottom: 2px solid black;
  cursor: pointer;
}

#topbox ddw, [x-dd="ddcode"] ddw {
  color: #222222;
}

#topbox ddv ruby, [x-dd="ddcode"] ddv ruby {
  color: #FA10FA;
}

#topbox ddv rt, [x-dd="ddcode"] ddv rt {
  color: #222222;
}

#topbox ddss, [x-dd="ddcode"] ddss {
  color: #2AA9E0;
}

#topbox dds, [x-dd="ddcode"] dds {
  color: #FFCB05;
}

[x-dd="plain"] ddw {
  color: #222222;
}

[x-dd="plain"] rt {
  color: transparent;
}

#rnsbox[x-dd="key1"] ddc, #rnsbox[x-dd="key1"] ddss, #rnsbox[x-dd="key1"] dds {
  color: rgba(0, 0, 0, 0.15);
}

#rnsbox[x-dd="key1"] ddss rt {
  color: transparent;
}

#rnsbox[x-dd="key1"] ddv ruby {
  color: #FA10FA;
}

#rnsbox[x-dd="key1"] ddv rt {
  color: #222222;
}

#rnsbox[x-dd="key2"] ddv, #rnsbox[x-dd="key2"] ddss, #rnsbox[x-dd="key2"] dds {
  color: rgba(0, 0, 0, 0.15);
}

#rnsbox[x-dd="key2"] rt {
  color: transparent;
}

#rnsbox[x-dd="key2"] ddc {
  color: #222222;
}

#rnsbox[x-dd="key3"] ddv, #rnsbox[x-dd="key3"] ddc, #rnsbox[x-dd="key3"] dds {
  color: rgba(0, 0, 0, 0.15);
}

#rnsbox[x-dd="key3"] ddv rt {
  color: transparent;
}

#rnsbox[x-dd="key3"] ddss, #rnsbox[x-dd="key3"] ddss rt {
  color: #2AA9E0;
}

#rnsbox[x-dd="key4"] ddv, #rnsbox[x-dd="key4"] ddc, #rnsbox[x-dd="key4"] ddss {
  color: rgba(0, 0, 0, 0.15);
}

#rnsbox[x-dd="key4"] rt {
  color: transparent;
}

#rnsbox[x-dd="key4"] dds {
  color: #FFCB05;
}

#rnsbox .text * {
  -webkit-transition: color 0.6s ease-out;
  transition: color 0.6s ease-out;
}

[x-dd-click] {
  cursor: pointer;
}

#rnsbox ddw {
  font-size: 30px;
  line-height: 75px;
}

#rnsbox ddw rt {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: -10px;
}

ddw {
  white-space: nowrap;
  line-height: 25px;
}

ddw rt {
  font-size: 12px;
  line-height: 0px;
  letter-spacing: -1px;
  margin-bottom: -8px;
  font-family: 'Source Sans Pro';
}

#rnsbox {
  margin-top: 0;
}

#rnsbox p.text {
  margin-top: 37px;
  margin-bottom: 13px;
  padding-left: 37.5px;
  padding-right: 37.5px;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#buttonbar {
  margin-top: 13px;
  margin-bottom: 12px;
}

#buttonbar button {
  height: 25px;
  line-height: 16px;
  font-size: 16px;
}

.vidbox {
  width: 128px;
  height: 96px;
  background: white url(images/ddcode.png) no-repeat center center;
  border: 1px solid #222222;
  border-radius: 4px;
}

#topbox {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
}

#topbox::after {
  clear: both;
  content: "";
  display: table;
}

#topbox div#topl {
  float: left;
  display: block;
  margin-right: 2.3576515979%;
  width: 74.4105871005%;
}

#topbox div#topl:last-child {
  margin-right: 0;
}

#topbox div#topr {
  float: left;
  display: block;
  margin-right: 2.3576515979%;
  width: 23.2317613015%;
}

#topbox div#topr:last-child {
  margin-right: 0;
}

#topbox ol {
  margin-top: 0px;
}

#topbox .vidbox {
  margin: 50px auto 4px auto;
}

#topbox #zoombox {
  /*        @include span-columns(2); */
  height: 50px;
  line-height: 50px;
  border: 1px solid black;
}

/*# sourceMappingURL=rns.css.map */