:root {
  --header-size: 48px;
  --header-top-padding: 8px;
  --anim-delay: 250ms;
  --comments-width: 400px;
  --comments-horiz-padding: 12px;
}

body {
  overflow: hidden;
}

.container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

.navbar-inner {
  border-radius: 0;
}

#pageheader {
  color: #EEE;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-size) - var(--header-top-padding));
  min-height: calc(var(--header-size) - var(--header-top-padding));
  padding: var(--header-top-padding) 12px 0 12px;
  z-index: 10;
}

#pagefooter {
  min-height: 40px;
  position: absolute;
}

#branding h1 {
  color: #EEE;
}
#branding h1 #R {
  font-weight: 700;
  color: orange;
}
#branding #tagline {
  font-size: 10pt;
  color: #999;
}

#identity {
  color: #EEE;
}

#breadcrumb {
  font-family: Helvetica;
  font-weight: 400;
  color: #EEE;
  border-top: 1px dotted #555;
  margin: 0 -10px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: bold;
}
#breadcrumb a {
  color: inherit;
}

#payload {
  position: absolute;
  left: 0;
  top: var(--header-size);
  right: 0;
  bottom: 40px;
}
#payload iframe {
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 768px) {
  #payload {
    bottom: 0;
  }
  #pagefooter {
    display: none !important;
  }
}

span#comment-verb-hide {
  display: none;
}
#btn-show-toolbars {
  visibility: hidden;
  position: absolute;
  bottom: 16px;
  right: 24px;
  opacity: 0;
  -webkit-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  -moz-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
}
#btn-show-toolbars:hover {
  opacity: 1.0 !important;
  -webkit-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  -moz-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
}

#pubmeta #pubtitle {
  max-width: 350px;
}
#pubmeta #pubtitle label,
#pubmeta #pubtitle a {
  font-weight: bold;
}
#pubmeta form {
  margin-bottom: 0;
}

#comment-wrapper {
  z-index: 5;
  position: absolute;
  top: var(--header-size);
  width: 0;
  right: 0;
  bottom: 40px;
  -webkit-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  -moz-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  background-color: #EEE;
  background-image: url("fabric_plaid.png");
  border-left: 1px solid #CCC;
  overflow-x: hidden;
}
#disqus_thread {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: var(--comments-horiz-padding) !important;
  visibility: hidden;
  overflow: auto;
  margin: 0 !important;
}
#disqus_thread h3 {
  font-size: 120%;
}
#disqus_thread #dsq-sort-by {
  display: none;
}
body.show-comments #payload {
  right: var(--comments-width);
}
body.show-comments span#comment-verb-hide {
  display: inline;
}
body.show-comments #comment-wrapper {
  width: var(--comments-width);
}
body.show-comments #disqus_thread {
  visibility: visible;
}

#pageheader, #payload, #pagefooter, #comment-wrapper, #disqus_thread, #btn-show-toolbars {
  -webkit-transition: visibility 0s linear 0s, top var(--anim-delay), bottom var(--anim-delay), right var(--anim-delay), height var(--anim-delay), width var(--anim-delay), opacity var(--anim-delay);
  -moz-transition: visibility 0s linear 0s, top var(--anim-delay), bottom var(--anim-delay), right var(--anim-delay), height var(--anim-delay), width var(--anim-delay), opacity var(--anim-delay);
  transition: visibility 0s linear 0s, top var(--anim-delay), bottom var(--anim-delay), right var(--anim-delay), height var(--anim-delay), width var(--anim-delay), opacity var(--anim-delay);
}

body.hide-toolbars #pageheader,
body.hide-toolbars #pagefooter,
body.hide-toolbars #comment-wrapper,
body.hide-toolbars #disqus_thread {
  visibility: hidden;
  -webkit-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  -moz-transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
  transition-delay: var(--anim-delay), 0, 0, 0, 0, 0, 0;
}
body.hide-toolbars #pageheader {
  top: calc(-1 * var(--header-size) - 5px); /* 5px is for shadow */
}
body.hide-toolbars #payload {
  top: 0;
  bottom: 0;
  right: 0;
}
body.hide-toolbars #pagefooter {
  bottom: -40px;
  height: 0;
}
body.hide-toolbars #comment-wrapper {
  width: 0;
  top: 0;
  bottom: 0;
}
body.hide-toolbars #disqus_thread {
  visibility: hidden;
}
body.hide-toolbars #btn-show-toolbars {
  visibility: visible;
  opacity: 0.3;
}

body.show-toolbars #btn-show-toolbars {
  opacity: 0.0 !important;
}

#modal-share {
  width: 450px;
}
#modal-share h2 {
  margin: 16px 0 0 0;
}
#modal-share h2.first {
  margin: 0;
}
#modal-share .btn {
  margin-right: 6px;
}
#modal-share input {
  width: 375px;
}