/*
	COLORS OF NOTE:
		#4b0000: subheader background
		#7b0000: content separator
		#f44   : rightbar headline background
		#181818: rightbar gray background
	*/
@font-face {
  font-family: 'Silent Hell';
  src: url("fonts/silenthell.ttf") format("truetype");
  /*
    src: url('../typeface/creatinin/creatinin-pro-webfont.eot?#iefix') format('embedded-opentype'),
         url('../typeface/creatinin/creatinin-pro-webfont.woff') format('woff'),
         url('../typeface/creatinin/creatinin-pro-webfont.ttf') format('truetype'),
         url('../typeface/creatinin/creatinin-pro-webfont.svg') format('svg'); */
  font-weight: normal;
  font-style: normal; }

* {
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: "Noto Sans","Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; }

/* Globals */
a {
  color: #f44; }

/* HEADER NAV */
#header_container {
  position: relative;
  background-position: center 30%;
  background-size: cover;
  height: 30em;
  min-width: 58em; }

#header_logo {
  border: none;
  position: absolute;
  width: 26em;
  bottom: -1em;
  z-index: 20; }

#header_botbar {
  position: absolute;
  bottom: 0;
  z-index: 0;
  background-image: url("images/header_bg.png");
  background-size: auto 15px;
  background-position: bottom left;
  background-repeat: repeat-x;
  height: 41px;
  width: 100%; }

#header_navbar {
  position: absolute;
  bottom: -3.5em;
  right: 0;
  text-align: right;
  padding: 2em 1em 1.5em 3em;
  min-width: 44em;
  z-index: 10;
  background-image: url("images/navbar_bg.png");
  background-size: auto 100%;
  background-repeat: no-repeat; }

#header_navbar_sub {
  text-align: right;
  font-size: 1.4em;
  margin: 0.5em 0 0 auto; }

.header_nav {
  color: #fff;
  font-family: "Silent Hell";
  text-decoration: none;
  margin: 0 0.4em; }

.header_nav:hover {
  color: #ab0000; }

.header_nav_main {
  font-size: 1.8em; }

.header_nav_sub {
  margin: 0 0.6em; }

.header_nav.active {
  background-color: #9a0000;
  text-decoration: underline;
  cursor: default; }

.header_nav.active:hover {
  color: #fff; }

/* This is the right side of the content, a major section */
#container_right {
  background-color: #181818;
  margin: 0 0 0 auto;
  width: 42em;
  padding-left: 40px;
  background-image: url("images/grayblack_bg.gif");
  background-position: top left;
  background-repeat: repeat-y; }

#container_headline {
  padding: 50px 20px 40px 20px;
  margin: 0 0 1em auto;
  background-image: url("images/redgray_bg.gif");
  background-color: #4b0000;
  background-position: bottom left;
  background-repeat: no-repeat; }

/* This is the top paragraph of a page */
#container_headline p {
  padding: 0 3em; }

#content_right {
  text-align: center;
  padding-bottom: 2em; }

.content_sep {
  width: 80%;
  border-color: #7b0000; }

/* RED LIGHTBOX */
/* The main box itself, full-screen */
#redbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(123, 0, 0, 0.7);
  z-index: 100; }

/* The container, centered within the main box */
.redbox_content {
  margin: 0 auto;
  text-align: center;
  white-space: nowrap; }

/* REDBOX for CAST */
#redbox_castimagecontainer {
  text-align: right;
  display: inline-block;
  vertical-align: middle; }

.redbox_textcontainer {
  display: inline-block;
  background-color: #311;
  padding: 1em 1.5em;
  vertical-align: middle;
  white-space: normal;
  text-align: justify; }

#redbox_casttextcontainer {
  width: 28em; }

#redbox_issuetextcontainer {
  width: 50%;
  max-width: 540px; }

/* ISSUES REDBOX */
.issue_container {
  padding: 30px;
  margin: 10px auto;
  display: inline-block;
  background-size: 100% 100%;
  background-image: url("images/frame_cover.png"); }

.issue_cover {
  margin: 0 auto; }

#issue_preview {
  width: 100%; }

/* these are issue covers found within the book redboxes */
.book_content {
  display: inline-block; }

.book_contentthumb {
  height: 100px;
  margin: 0 2px; }

/* this is the pop-in name of the hovered issue */
#book_contenttitle {
  font-family: "Silent Hell"; }

#cast_name, #issue_title {
  font-family: "Silent Hell";
  font-size: 2em;
  margin-bottom: 0.8em; }

/* The home page */
.title_headline {
  font-family: "Silent Hell";
  text-align: center; }

/* PARALLAX IMAGES */
.plx_container {
  width: 275px;
  height: 400px;
  position: relative;
  margin: 3em auto; }

.plx_frame {
  width: 275px;
  height: 400px;
  background-image: url("images/frame.png");
  background-size: 275px 400px;
  position: absolute;
  z-index: 10; }

.plx_bg, .plx_content {
  width: 255px;
  height: 380px;
  background-size: 250px auto;
  background-position: 50% 50%;
  position: absolute;
  left: 10px;
  top: 10px; }

.plx_bg {
  z-index: 4; }

.plx_content {
  z-index: 5; }

/* Global thumbnails */
.thumb_container {
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 5;
  display: inline-block;
  margin: 1em;
  cursor: pointer; }

/* GALLERY CONTENT */
.gallery_container {
  width: 900px;
  height: 600px;
  padding: 25px;
  max-width: 100%;
  position: relative;
  margin: 0 auto;
  background-image: url("images/frame_gallery.png");
  background-size: 100% 100%;
  background-position: bottom left; }

.gallery_image {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; }

/* GALLERY THUMBNAILS */
.thumbcont_gallery {
  width: 200px;
  height: 133px;
  background-size: auto 123px; }

.thumbframe_gallery {
  width: 200px;
  height: 133px; }

/* EPISODE PAGES */
.episode_table {
  width: 550px;
  margin: 1.5em auto;
  text-align: center; }

.cover_thumb {
  width: 10%;
  margin: 0.2em 0.3%;
  border: solid 3px #000;
  cursor: pointer; }

.cover_thumb:hover {
  border-color: #a00; }

#hovertitle {
  font-family: "Silent Hell";
  text-align: center;
  font-size: 1.4em; }

/* BOOK COLLECTIONS */
a.link_purchase {
  color: #a00;
  font-family: "Silent Hell", "Arial", sans-serif;
  text-align: center;
  font-size: 1.6em;
  text-decoration: none;
  display: inline-block;
  background-image: url("images/link_underb.png");
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: bottom left;
  padding: 6px 16px;
  margin: 10px;
  cursor: pointer; }

a.link_purchase:hover {
  background-position: top left;
  color: #fff; }

.link_purchase.link_alt {
  background-position: bottom right; }

.link_purchase.link_alt:hover {
  background-position: top right; }

/* Our font doesn't have a dollar sign... ugh */
.dollarsign {
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  padding-top: 0.4em;
  font-size: 0.6em;
  margin-right: 0.2em; }

/* CAST THUMBNAILS */
.thumbcont_cast {
  width: 110px;
  height: 160px;
  background-size: 100px auto; }

.thumbframe_cast {
  width: 110px;
  height: 160px; }

/* Rotate some frames, for diversity */
.castthumb_container:nth-child(even) .castthumb_frame {
  transform: rotate(180deg); }

.castthumb_container:nth-child(3n) .castthumb_frame {
  transform: matrix(-1, 0, 0, 1, 0, 0); }

.castbio_hidden {
  display: none; }

.ibookstore_link {
  width: 140px; }

/* ABOUT PAGES */
.header_about {
  font-family: "Silent Hell";
  clear: both; }

.blurb_about {
  text-align: justify;
  padding: 0 1em; }

.contact_submit {
  font-size: large;
  padding: 0.4em 1em;
  background-color: #4b0000;
  border-color: #900;
  color: #fff;
  border-radius: 8px; }