.masthead {
  padding: 0;
}
.tao {
  background: no-repeat 30px 0;
  padding: 55px 0;
}
.logo {
  color: #F7F7F7;
  font-size: 18pt;
}
.copyright .support {
  padding: 5px 0;
}
.tags li a:hover {
  color: #000000;
}
.focused {
  opacity: 1 !important;
}
.footer-gallery img {
  border: 1px solid #999999;
  margin: 3px 1px;
}


/* Style overrides */
p {
    margin: 0 0 15px;
}
h3 {
  font-weight: bold;
}
h4 {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 0.5em;
  margin: 1em 0;
}
.main p a,
.main ul li a,
.main ol li a {
  text-decoration: underline;
}
.blog-aside p a,
.blog-aside ul li a,
.blog-aside ol li a {
  text-decoration: none;
}



/* Search box */
.tales-searchbox {
  opacity: 0.5;
  transition: opacity 0.5s ease;
}
.tales-searchbox:hover {
  opacity: 1;
}


/* Special hacks for small devices */

@media (max-width: 767px) {
  .tales-nav {
    margin-top: 0;
    margin-bottom: 0;
  }
  .tao {
    padding: 20px 0;
    background-position: 20px -20px;
  }
  #mobile-nav-toggle {
    margin-top: 0;
    margin-bottom: 5px;
  }
  .tales-breadcrumb {
    margin-top: 0;
    padding-bottom: 19px;
  }
}


/* Hypothes.is */

.annotator-frame .annotator-bucket-bar {
  background: none !important;
}


/* Debugger */

.debugger {
  display: none;
  padding: 10px;
  background-color: #4682B4;
  border: 1px solid #999;
  border-radius: 100%;
  margin: 10px;
  color: #fff;
  font-weight: bold;
  width: 50px;
  height: 50px;
  text-align: center;
  position: fixed;
  top: 25px;
  left: 25px;
  opacity: 0.8;
}
  @media screen and (max-width: 529px) {
    .debugger.xxs {display: block;}
  }
  @media screen and (min-width: 530px) and (max-width: 767px) {  /* xs */
    .debugger.xs {display: block;}
  }
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .debugger.sm {display: block;}
  }
  @media screen and (min-width: 993px) and (max-width: 1199px) {
    .debugger.md {display: block;}
  }
  @media screen and (min-width: 1200px) and (max-width: 1599px) {
    .debugger.lg {display: block;}
  }
  @media screen and (min-width: 1600px) {
    .debugger.xl {display: block;}
  }

/* There's probably a smarter way to do this in SaSS, but this works for me */
@media (min-width: 1600px) {

  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {float: left;}

  .col-xl-12 {width: 100%;}
  .col-xl-11 {width: 91.66666667%;}
  .col-xl-10 {width: 83.33333333%;}
  .col-xl-9  {width: 75%;}
  .col-xl-8  {width: 66.66666667%;}
  .col-xl-7  {width: 58.33333333%;}
  .col-xl-6  {width: 50%;}
  .col-xl-5  {width: 41.66666667%;}
  .col-xl-4  {width: 33.33333333%;}
  .col-xl-3  {width: 25%;}
  .col-xl-2  {width: 16.66666667%;}
  .col-xl-1  {width: 8.33333333%;}

  .col-xl-pull-12 {right: 100%;}
  .col-xl-pull-11 {right: 91.66666667%;}
  .col-xl-pull-10 {right: 83.33333333%;}
  .col-xl-pull-9  {right: 75%;}
  .col-xl-pull-8  {right: 66.66666667%;}
  .col-xl-pull-7  {right: 58.33333333%;}
  .col-xl-pull-6  {right: 50%;}
  .col-xl-pull-5  {right: 41.66666667%;}
  .col-xl-pull-4  {right: 33.33333333%;}
  .col-xl-pull-3  {right: 25%;}
  .col-xl-pull-2  {right: 16.66666667%;}
  .col-xl-pull-1  {right: 8.33333333%;}
  .col-xl-pull-0  {right: 0;}

  .col-xl-push-12 {left: 100%;}
  .col-xl-push-11 {left: 91.66666667%;}
  .col-xl-push-10 {left: 83.33333333%;}
  .col-xl-push-9  {left: 75%;}
  .col-xl-push-8  {left: 66.66666667%;}
  .col-xl-push-7  {left: 58.33333333%;}
  .col-xl-push-6  {left: 50%;}
  .col-xl-push-5  {left: 41.66666667%;}
  .col-xl-push-4  {left: 33.33333333%;}
  .col-xl-push-3  {left: 25%;}
  .col-xl-push-2  {left: 16.66666667%;}
  .col-xl-push-1  {left: 8.33333333%;}
  .col-xl-push-0  {left: 0;}

  .col-xl-offset-12 {margin-left: 100%;}
  .col-xl-offset-11 {margin-left: 91.66666667%;}
  .col-xl-offset-10 {margin-left: 83.33333333%;}
  .col-xl-offset-9  {margin-left: 75%;}
  .col-xl-offset-8  {margin-left: 66.66666667%;}
  .col-xl-offset-7  {margin-left: 58.33333333%;}
  .col-xl-offset-6  {margin-left: 50%;}
  .col-xl-offset-5  {margin-left: 41.66666667%;}
  .col-xl-offset-4  {margin-left: 33.33333333%;}
  .col-xl-offset-3  {margin-left: 25%;}
  .col-xl-offset-2  {margin-left: 16.66666667%;}
  .col-xl-offset-1  {margin-left: 8.33333333%;}
  .col-xl-offset-0  {margin-left: 0;}

}

/* Don't wrap my code.  That's not nice */

pre code {
  white-space: pre;
}