/**
 * @name Penguin Random House Portal
 * @version 0.1.2
 * @link https://developer.penguinrandomhouse.com/
 * @author Chris Ferdinandi
 * @updated November 5, 2014 at 5:35pm EST
 */
/**
 * Fonts
 */
@font-face {
  font-family: "Shift";
  src: url(https://developer.penguinrandomhouse.com/files/Shift-Light.eot);
  src: url(https://developer.penguinrandomhouse.com/files/Shift-Light.eot?#iefix) format('embedded-opentype'), url(https://developer.penguinrandomhouse.com/files/Shift-Light.woff) format('woff'), url(https://developer.penguinrandomhouse.com/files/Shift-Light.svg) format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Fort";
  src: url(https://developer.penguinrandomhouse.com/files/Fort-Light.eot);
  src: url(https://developer.penguinrandomhouse.com/files/Fort-Light.eot?#iefix) format('embedded-opentype'), url(https://developer.penguinrandomhouse.com/files/Fort-Light.woff) format('woff'), url(https://developer.penguinrandomhouse.com/files/Fort-Light.svg) format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Fort";
  src: url(https://developer.penguinrandomhouse.com/files/Fort-LightItalic.eot);
  src: url(https://developer.penguinrandomhouse.com/files/Fort-LightItalic.eot?#iefix) format('embedded-opentype'), url(https://developer.penguinrandomhouse.com/files/Fort-LightItalic.woff) format('woff'), url(https://developer.penguinrandomhouse.com/files/Fort-LightItalic.svg) format('svg');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Fort";
  src: url(https://developer.penguinrandomhouse.com/files/Fort-Bold.eot);
  src: url(https://developer.penguinrandomhouse.com/files/Fort-Bold.eot?#iefix) format('embedded-opentype'), url(https://developer.penguinrandomhouse.com/files/Fort-Bold.woff) format('woff'), url(https://developer.penguinrandomhouse.com/files/Fort-Bold.svg) format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Fort";
  src: url(https://developer.penguinrandomhouse.com/files/Fort-BoldItalic.eot);
  src: url(https://developer.penguinrandomhouse.com/files/Fort-BoldItalic.eot?#iefix) format('embedded-opentype'), url(https://developer.penguinrandomhouse.com/files/Fort-BoldItalic.woff) format('woff'), url(https://developer.penguinrandomhouse.com/files/Fort-BoldItalic.svg) format('svg');
  font-weight: bold;
  font-style: italic;
}
body {
  color: #454545;
  font-family: "Fort", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Shift", Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin-bottom: 1em;
}

a:link, a:visited {
  color: #3d5a75;
}
a:hover, a:active {
  color: #000000;
}

/* All the input fields (text input, textareas, selects) */
table thead th {
  border-bottom: 1px solid #999;
}
table td {
  border-bottom: 1px solid #ddd;
}

/* Set the overall width */
div#page,
div#header,
div#content,
div#local,
div#user,
div#user-menu,
div#sub,
div#footer,
div#footer ul {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

div#header,
div#user-nav ul,
div#local ul,
div#content,
div#main,
.page-page div#page.no_sub div#main,
#page-ioDocs div#page.no_sub div#main,
#page-login div#page.no_sub div#main,
div#siteinfo,
div#footer ul {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 1024px;
}

div#page.no_sub div#main,
.page-docs div#main,
#page-member div#main {
  float: left;
  margin-left: 0;
  margin-right: 0;
  width: 682px;
}

div#main {
  margin-bottom: 40px;
}

div#sub {
  float: right;
  width: 270px;
}

/* For pages without navigation (you can set which pages you do not want to have navigation on, for whatever reason) */
/* For pages without a side column, you can set which pages do or do not have side columns. */
/**
 *
 * HEADER
 *
 * The header is where your logo, login links, search, and user control links should go.
 *
 */
div#header {
  background: transparent;
}

/* Here is where you put your logo! Yes, it is the background of a div. This div is special because Javascript makes it behave
   like a Home link by default, you can change this in the settings if you absolutely must.

   You must change the width and height of this div to the same size as your logo. */
div#branding-logo {
  background: #ffffff url(https://developer.penguinrandomhouse.com/files/logo.png) no-repeat;
  background-size: 196px 95px;
  height: 95px;
  width: 196px;
  margin: 70px auto 0;
}

div#branding-mashery {
  right: 0;
  top: 3px;
}

/**
 * Search Styling
 */
div#search {
  top: 200px;
}

form#search-input input#search-box {
  background: url(https://developer.penguinrandomhouse.com/files/search.png) no-repeat 6px 5px #f5f5f5;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  font-size: 13px;
  height: 21px;
  border: none;
  padding: 2px 0 2px 26px;
  -moz-transition-property: width, background;
  -o-transition-property: width, background;
  -webkit-transition-property: width, background;
  transition-property: width, background;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  width: 193px;
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.75);
}

form#search-input input#search-box:active,
form#search-input input#search-box:focus {
  background-color: #f8f9fa;
  outline: 0;
  width: 280px;
}

form#search-input input.search-button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

form#search-input input.search-button:active,
form#search-input input.search-button:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/**
 *
 * USER
 *
 * User information and actions
 *
 */
div#user {
  /* position: relative; This causes issues in IE6 */
}

/**
 *
 * USER NAV
 *
 * Login, logout, register, and My Account links.
 *
 */
div#user-nav {
  background-color: #000000;
  color: #b5b5b5;
  float: none;
  margin-top: -88px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}
div#user-nav ul {
  list-style: inline;
}
div#user-nav ul li {
  list-style: inherited;
  float: none;
  margin-right: 10px;
  padding: 0;
}
div#user-nav ul li:after {
  content: "|";
  margin-left: 10px;
}
div#user-nav ul li:last-child {
  margin-right: 0;
}
div#user-nav ul li:last-child:after {
  content: "";
  margin-left: 0;
}
div#user-nav ul a {
  color: #ffffff;
}
div#user-nav ul a:hover {
  text-decoration: underline;
}

/**
 *
 * LOCAL NAV
 *
 * This is the main navigation bar. You can customize your links in the Settings page.
 *
 * The div#local appears AFTER the content for accessbility reasons. Please see
 * http: //www.contentwithstyle.co.uk/Articles/17/ for details.
 *
 * Because the navigation is placed below the content, you will most likely need
 * to use absolute positioning. Please make sure you understand positioning before
 * trying to customize it!
 *
 */
div#local {
  background: transparent;
  left: 0;
  top: 0;
}
div#local ul {
  margin-left: auto;
  margin-right: auto;
}
div#local li {
  text-transform: uppercase;
}
div#local li a {
  background: transparent;
  color: #000000;
  padding: 0 10px 0 0;
}
div#local li a:after {
  content: "|";
  font-weight: normal;
  padding-left: 10px;
}
div#local li:last-child a {
  padding-right: 0;
}
div#local li:last-child a:after {
  content: "";
  padding-left: 0;
}
div#local li.active a {
  background: transparent;
  color: #ff6f00;
}
div#local li.active a:after {
  color: #000000;
}

/**
 *
 * SUB LOCAL NAVIGATION
 *
 * Links under each primary navigation section.
 *
 */
div#user-menu {
  display: none;
}

/**
 *
 * CONTENT
 *
 * Where the magic happens (Content of page)
 *
 */
div#content {
  margin-top: 150px;
  padding-top: 70px;
}

/**
 *
 * MAIN
 *
 * This is where almost all the content for every page is.
 *
 */
div#main {
  background: transparent;
  display: block;
  float: none;
  margin-top: 0;
  padding: 0;
}

/**
 *
 * BLOG, WIKI, FORUM, and DOCS
 *
 * Styling for the sections, meta info, file tables, and other parts of these apps.
 *
 * Remember, there are usually different states of each app type! For example, when browsing the forum the body will have
 * an id of #page-forum and a class of .browse. If you click on a forum post to view it, the body will still have the same
 * id, but the class will change to .read. This way you can control the different views of each app.
 *
 */
/* Comments in all sections except the forum. */
.section-meta * {
  font-size: 13px;
}

/**
 *
 * FORUM
 *
 * The forum is very different than the blog, wiki, docs, etc. Be sure to check out the markup, the default styling
 * should be ok for most people, but you may need to override some of your list (ul, ol) rules that you set in this
 * stylesheet.
 *
 */
/* The "Start new topic" button */
body.page-forum a.create-new {
  /* Subject of a thread */
  /* The "original post" in each thread looks different by default */
}

/**
 *
 * SUB
 *
 * The sub div is usually the small sidebar on the blog/wiki/forum, although some may prefer to hide it altogether.
 *
 * In the Dashboard, the sub is also where the form lives to add new content in the Content page.
 *
 */
/**
 *
 * FOOTER
 *
 * Contains your site-info as well as your footer links.
 *
 */
div#footer {
  background: #000000;
  color: #b5b5b5;
  padding-top: 40px;
  padding-bottom: 16px;
}
div#footer ul {
  margin-bottom: 16px;
}
div#footer ul li {
  margin-right: 8px;
}
div#footer ul li:after {
  content: "|";
  margin-left: 8px;
}
div#footer ul li:last-child {
  margin-right: 0;
}
div#footer ul li:last-child:after {
  content: "";
  margin-left: 0;
}
div#footer ul li a {
  color: #ffffff;
}
div#footer ul li a:hover {
  text-decoration: underline;
}

/**
 *
 * SITEINFO
 *
 * The siteinfo you can edit from the Settings page in the Dashboard.
 * Usually this contains copyright stuff and credits.
 *
 */
div#siteinfo p {
  font-size: 1em;
}

/**
 * EDITS
 */
h1 a.edit {
  opacity: 1;
}

/**
 * Inline Lists
 */
.list-inline {
  list-style: none;
  margin-left: -8px;
  margin-right: -8px;
  padding: 0;
}
.list-inline > li {
  display: inline-block;
  margin-left: 8px;
}
.list-inline > li:after {
  content: "|";
  margin-left: 8px;
}
.list-inline > li:last-child {
  margin-right: 0;
}
.list-inline > li:last-child:after {
  content: "";
  margin-left: 0;
}

/**
 * Grid
 */
.row {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: -1.4%;
  margin-right: -1.4%;
}

.grid-fourth, .grid-third, .grid-half, .grid-two-thirds, .grid-three-fourths, .grid-full, .grid-dynamic {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 100%;
  padding-left: 1.4%;
  padding-right: 1.4%;
}

/**
 * Reverses order of grid for content choreography
 */
.grid-flip {
  float: right;
}

/**
 * Grid widths
 */
.grid-fourth {
  width: 25%;
}

.grid-third {
  width: 33.33333%;
}

.grid-half {
  width: 50%;
}

.grid-two-thirds {
  width: 66.66667%;
}

.grid-three-fourths {
  width: 75%;
}

.grid-full {
  width: 100%;
}

/**
 * Clearfix
 */
.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

/**
 * Helper Classes
 */
.text-center {
  text-align: center;
}

.text-title, .text-section {
  font-weight: bold;
  text-transform: uppercase;
}

.text-orange, .text-section {
  color: #ff6f00;
}

.text-section {
  border-top: 1px solid #000000;
  font-size: 15px;
  margin-bottom: 20px;
  padding-top: 10px;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.margin-bottom {
  margin-bottom: 40px;
}

.margin-bottom-small {
  margin-bottom: 20px;
}

.margin-bottom-xsmall {
  margin-bottom: 10px;
}

.img-fullscreen {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.btn-play {
  display: inline-block;
  position: absolute;
  top: 42%;
  left: 42%;
}

a:hover .btn-play {
  fill: #ff6f00;
}

.position-relative {
  position: relative;
}

/**
 * SVG Icons
 */
/**
 * Hide icons by default to prevent blank spaces in unsupported browsers
 */
.icon {
  height: 0;
  width: 0;
}

/**
 * Display icons when browser supports SVG.
 * Inherit height, width, and color.
 */
.svg .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.svg .icon-medium {
  width: 4em;
  height: 4em;
}

.svg .icon-large {
  width: 4em;
  height: 4em;
}

/**
 * Hide fallback text if browser supports SVG
 */
.svg .icon-fallback-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/**
 * Link Modules
 */
.link-module .icon {
  fill: #999999;
}

.link-module:hover .icon {
  fill: #000000;
}

.link-module-body {
  color: #00000