/* Theme & landing page */
body {
  color: #333;
  padding-top: 100px;
}
@media (max-width:991px) {
  body {
    padding-top: 150px;
  }
}
@media (max-width:767px) {
  body {
    padding-top: 76px;
  }
}
.navbar-brand > img,
#main-footer .logo-link img {
  display: inline-block;
}
.navbar-brand,
#main-footer .logo-link {
  font-weight: bold;
}
.navbar-brand {
  font-size: 20px;
}
#main-footer .logo-link {
  font-size: 14px;
}
a.navbar-brand,
#main-footer a.logo-link {
  color: #777;
  text-shadow: 0px 1px 0px #fff;
  letter-spacing: normal;
  text-transform: none;
}
h1 small,
h2 small,
h3 small,
h4 small {
  color: inherit;
  font-weight: inherit;
  font-size: 80%;
}
.breadcrumb {
  margin: 20px 0 0;
  padding: 0;
  background-color: inherit;
}
.breadcrumb + h1 {
  margin-top: 0;
}
.highlight pre {
  background-color: #fff;
}
.highlight pre code {
  white-space: pre;
}
.highlight table pre {
  border: none;
  margin: 0;
}
code {
  color: #333;
  background-color: #fff;
  padding: 2px;
}
a code {
  color: inherit;
}
.m-t-1 {
  /* Utility class back-ported from bootstrap v4.
   * See https://getbootstrap.com/docs/4.4/utilities/spacing/
   */
  margin-top: 20px;
}
.m-b-2 {
  margin-bottom: 32px;
}
.p-t-1 {
  padding-top: 20px;
}
/* Callouts like in the bootstrap docs, but not provided by bootstrap itself.
   Copied from https://cpratt.co/twitter-bootstrap-callout-css-styles/ */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  background-color: #f7f7f7;
}
.bs-callout h4 {
  margin-top: 0 !important;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout+.bs-callout {
  margin-top: -5px;
}
.bs-callout code {
  background-color: transparent;
}
.bs-callout-default {
  border-left-color: #777;
}
.bs-callout-default h4 {
  color: #777;
}

/* Landing page */
#landing #home .container {
  /* For "scroll to top" link to go all the way up, accounting for navbar. */
  margin-top: -100px;
  padding-top: 100px;
}
#landing .header-img {
  border: 1px solid #ccc;
}
#landing #stb-tester-hdmi img,
#landing #services img,
#landing #open-source img {
  margin: 0 auto;
}
#landing #services h2 {
  margin-top: 60px;
}
@media (max-width:1499px) {
  #landing #services h2:first-child {
    margin-top: 30px;
  }
}
@media (max-width:1199px) {
  #landing #services h2:first-child {
    margin-top: inherit;
  }
}
#testimonials img {
  margin-top: 40px;
}
#testimonials .testimonial::after {
  line-height: 1;
}

/* Pricing table */
#pricing table th,
#pricing table td {
  width: 18.75%;
  text-align: center;
}
#pricing table th:first-child,
#pricing table td:first-child {
  width: 25%;
  text-align: left;
}
#pricing table thead {
  background-color: white;
}
#pricing table th {
  vertical-align: top;
}
#pricing table td {
  vertical-align: top;
}
#pricing table th .fa {
  display: block;
  font-size: 64px;
}
#pricing table th a {
  color: #333;
}
#pricing table th a .fa {
  color: #F58026;
}
#pricing table th img {
  display: block;
  max-width: 180px;
  max-height: 64px;
  margin: 0 auto;
}
#pricing table th:last-child img {
  border-radius: 50%;
}
#pricing table tbody:first-of-type tr {
  background-color: inherit;
}
#pricing table tbody:first-of-type strong {
  font-size: 1.5em;
  line-height: 0;
}
#pricing table tbody:first-of-type tr:nth-child(2) td {
  border-top: none;
}
#pricing table tbody:last-child tr:last-child td {
  border-bottom: 1px solid #ddd;
}
#pricing table .fa-check {
  display: block;
  padding: 3.4px 0;
  color: #72c02c;
}
#pricing a.footnote {
  font-style: italic;
}
#pricing a.footnote:before {
  content: "[";
}
#pricing a.footnote:after {
  content: "]";
}

/* Blog posts */
#blog-index input[type="submit"] {
  margin-right: 1em;
  color: #fff;
  background-color: #f58026;
  border-color: #c46500;
}
#blog-index input[type="submit"]:active,
#blog-index input[type="submit"]:focus,
#blog-index input[type="submit"]:hover {
  background-color: #c46500;
}
#blog-index form a {
  font-size: 18px;
  color: #abb3ba;
}
#blog-index form a:hover {
  color: #f58026;
}
#blog-index .post .date {
  float: left;
  margin-right: 0.2em;
}
#blog-index .post h4 {
  margin-top: 2em;
}
#blog-index .footnotes {
  display: none;
}
#mc_embed_signup {
  margin-bottom: 1.5em;
}
.tags {
  font-size: 75%;
  margin: 1.33em 0;
}
.tags .label {
  font-size: 100%;
  background-color: #777;
}
.tags .label-announcements {
  background-color: #f74;
}
.tags .label-device-setup {
  background-color: #37b;
}
.tags .label-test-development {
  background-color: #3b4;
}
.tags .label-test-strategy {
  background-color: #fa4;
}
div.blog-post {
  max-width: 750px;
}
.blog-post h4 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 1.5em;
}
.blog-post .summary {
  font-style: italic;
}
figure,
video {
  text-align: center;
  margin-bottom: 1em;
}
figure pre {
  text-align: left;
}
figure.pull-right {
  margin: 0 0 1em 1em;
}
figure.w60 {
  width: 60%;
}
figure img {
  max-width: 100%;
}
.border {
  border: 1px solid #ccc;
}
figure.border {
  padding: 1em;
}
figure.noborder pre {
  border: none;
  padding-top: 0;
}
figcaption {
  font-size: 10pt;
  line-height: 10pt;
  text-align: center;
  font-weight: bold;
}
figcaption.left {
  text-align: left;
}
.blog-post .table .fa {
  display: block;
  padding: 3.4px 0;
}
.blog-post .table .fa-check {
  color: #72c02c;
}
.blog-post .table .fa-times {
  color: #c0722c;
}

/* Videos & tutorials */
#tutorials-index,
.tutorial-post {
  max-width: 750px;
}
#tutorials-index ul {
  padding-left: 148px;
  list-style: none;
}
#tutorials-index li {
  position: relative;
  margin-bottom: 20px;
  min-height: 72px;
}
#tutorials-index li > *:first-child {
  position: absolute;
  left: -148px;
  top: 5px;
  width: 128px;
  height: auto;
  text-align: center;
}
#tutorials-index li .duration {
  position: absolute;
  left: 5px;
  bottom: 5px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
  padding: 2px 5px 3px;
  border-radius: 2px;
  background-color: rgba(119,119,119,.7);
}
#tutorials-index li img {
  border: 1px solid #ccc;
}
#tutorials-index li h3 {
  margin-bottom: 0;
}
.tutorial-post .embed-responsive {
  border: 1px solid #ccc;
  margin: 20px 0;
}
.tech-blog pre,
.tutorial-post pre {
  background-color: #fff;
  margin-bottom: 20px;
}
.tech-blog pre code,
.tutorial-post pre code {
  color: #000;
}
.tutorial-post .pull-right {
  margin: 0 0 1em 1em;
}
.tutorial-post img {
  max-width: 80%;
  height: auto;
}
.tutorial-post p.caption {
  margin-top: -10px;
  font-weight: bold;
  font-size: 12px;
}
.tech-blog p > code,
.tech-blog li > code,
.tutorial-post p > code,
.tutorial-post li > code,
#fire-tv p > code,
#fire-tv li > code,
#roku-http p > code,
#roku-http li > code {
  font-weight: bold;
  white-space: nowrap;
}

.screenshot {
  text-align: center;
  max-width: 95%;
}
.screenshot img {
  box-shadow: 5px 5px 8px #888888;
  border: solid 1px black;
}

/* Individual articles */
#casestudy blockquote footer a {
  color: inherit;
}
#casestudy blockquote footer a:hover {
  color: #f58026;
}
#howitworks strong {
  font-size: 14pt;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}
#howitworks em {
  font-style: normal;
  font-weight: bold;
}
#howitworks figure pre {
  margin-top: 10px;
}
#howitworks #report {
  height: 1px;
  overflow-y: visible;
}
#howitworks #main-content img,
#howitworks #main-content figure {
  opacity: 0.5;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}
#howitworks #main-content .row:hover img,
#howitworks #main-content .row:hover figure {
  opacity: 1;
}
@media (max-width:767px) {
  #howitworks #report {
    height: auto;
  }
}
#measuring-channel-change-time-with-stb-tester td {
  vertical-align: middle;
}
#precondition .highlight .nf {
  color: #800;
  font-weight: bold;
}
#precondition .highlight .s {
  color: #800;
}
#precondition .added {
  background-color: #b4eeb4;
}
#products #setup-img {
  margin: 1em auto 2em;
}
#ir-post-mortem .blog-post img,
#ir-post-mortem .blog-post iframe,
#ps4-control .blog-post img,
#ps4-control .blog-post iframe,
#mobile-video .blog-post iframe {
  display: block;
  margin: 20px auto;
}
#selenium-match figure pre {
  border: none;
}
#selenium-match code {
  color: #000;
}
#ps4-control td {
  width: 18%;
}
#ps4-control td:first-child {
  width: 28%;
}
#ps4-control figure p {
  font-size: 10pt;
  line-height: 10pt;
  text-align: center;
  font-weight: bold;
  margin: 10px 0 20px;
}
#ps4-control figure p:last-child {
  margin-bottom: 0;
}
@media (min-width:768px) {
  #mobile-video #android-hierarchy-view {
    float: right;
    margin-left: 10px;
  }
}
#mobile-video #android-hierarchy-view {
  margin-bottom: 10px;
}
#mobile-video #android-hierarchy-view img {
  max-width: 100%;
  height: auto;
  border: 1px solid #333;
}
#mobile-video .table td {
  vertical-align: middle;
}
#mobile-video .table img,
#mobile-video .pull-right img {
  max-width: 200px;
  height: auto;
}
#using-match-transparency img {
}
#ninja-docker .flexslider .slides img {
  width: auto;
}
#announcing-the-stb-tester-cloud-platform figcaption {
  margin-bottom: 20px;
}
#announcing-the-stb-tester-cloud-platform #portal-screenshot img {
  border: 1px solid #333;
  margin: 2px 10px 10px 0;
}
#announcing-the-stb-tester-cloud-platform h2 {
  clear: left;
}
#keyboard figure img,
#object-repo-debug figure img {
  max-width: 100%;
}
#keyboard figure.overlap-caption figcaption {
  color: #fff;
  margin-top: -32px;
}
#keyboard figure.overlap-caption figcaption code {
  color: #fff;
  background-color: transparent;
}
#keyboard figure.overlap-caption {
  /* This isn't as big as it looks, because of figcaption's negative margin: */
  margin-bottom: 42px;
}
#keyboard figure.highlight {
  margin-bottom: 1em;
}
#keyboard code,
#keyboard figure figcaption code {
  font-weight: bold;
}
#keyboard figure code {
  font-weight: inherit;
}
#keyboard .pull-right video {
  max-width: 400px;
  height: auto;
}
#keyboard .highlight.bad-example .c1 {  /* Python comment */
  font-weight: bold;
  color: #800;
}
#webrtc-announcement figure {
  text-align: center;
}
#webrtc-announcement figure img {
  max-width: 80%;
}
#test-pack-structure code {
  font-family: "Roboto Mono",Menlo,Monaco,Consolas,"Courier New",monospace;
}
#test-pack-structure code.language-shell .c {
/*
  font-family: "Indie Flower","Roboto Mono",Menlo,Monaco,Consolas,"Courier New",monospace;
*/
}
#test-pack-structure .pull-right img,
#test-pack-structure .pull-right pre {
  max-width: 400px;
}
#test-pack-structure figure + figcaption {
  margin-top: -1em;
}
#test-pack-structure figcaption {
  color: #777;
}