/*!
 * THIS FILE HAS BEEN GENERATED BY AN AUTOMATED TOOL.
 * DO NOT MODIFY DIRECTLY. INSTEAD, MODIFY THE APPROPRIATE SOURCE CODE.
 *
 * west-academic v1.0.0 (dev)
 * Example project for Client.
 * Build Date: 2015-01-02
 */

/* ---------------------------------------------------------------------
 Modern Styles
------------------------------------------------------------------------ */
/*

This file should only be used to import various modules.
All style rule sets should live in module-specific files.

*/
/* ---------------------------------------------------------------------
Variables
------------------------------------------------------------------------ */
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
*/
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
*/
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
*/
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
*/
/* ---------------------------------------------------------------------
Mixins
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Appearance

Remove default button styling for icons
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
CSS Circle

Create a circle using CSS.

@param $size pixel value
@param $color hex value
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
CSS Triangle (pseudo element)

Create a triangle using CSS.
Includes properties for pseudo elements (::before, ::after).

@param $direction up, down, left, right
@param $size pixel value
@param $color hex value

Example:  @include pseudo-triangle(7px, 14px, #ffffff, right);
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Vendor Prefixes
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
Target Browsers: All
Media Type: Screen, Projection
Breakpoint: All Sizes (Mobile First)
------------------------------------------------------------------------ */
/* ---
Landmark Styles
--- */
/* ---------------------------------------------------------------------
Footer
Breakpoint: Default
------------------------------------------------------------------------ */
.footer
{
   position: relative;
   margin: 70px 0 100px;
   padding: 17px 0 86px;
   background: #7e8083;
}

.footer-logo, .footer-logo-link
{
   display: block;
}

.footer-logo
{
   width: 147px;
   height: 20px;
   margin-bottom: 3px;
}

.footer-logo-link
{
   background-image: url(../media/images/sprites/global/sprite-core.png);
   background-position: 0px 0px;
   width: 147px;
   height: 20px;
   text-indent: -9999px;
}

.footer-bug
{
   background-image: url(../media/images/sprites/global/sprite-core.png);
   background-position: 0px -21px;
   width: 138px;
   height: 175px;
   position: absolute;
   bottom: -92px;
   left: 50%;
   margin-left: -76px;
}

/* ---------------------------------------------------------------------
Footer Navigation
Breakpoint: Default
------------------------------------------------------------------------ */
.footerNav
{
   margin: 30px 0 0;
   padding: 0;
   list-style: none;
}

.footerNav:before, .footerNav:after
{
   content: " ";
   display: table;
}

.footerNav:after
{
   clear: both;
}

.footerNav-item-link
{
   color: #FFFFFF;
   color: rgba(255, 255, 255, 0.7);
   font-size: 11px;
   line-height: 1.6;
}

.footerNav-item-link:focus
{
   outline: 0;
   color: #FFFFFF;
   text-decoration: underline;
}

.footerNav-item-link:hover
{
   color: #FFFFFF;
   text-decoration: none;
}

/* ---
Container Styles
--- */
/* ---------------------------------------------------------------------
Banner
Breakpoint: Default
------------------------------------------------------------------------ */
.banner
{
   padding: 20px 0 10px;
   border-top: 14px solid #133d8d;
}

.banner-container > .row > * + *
{
   margin-top: 30px;
}

/* ---------------------------------------------------------------------
Banner Item
Breakpoint: Default
------------------------------------------------------------------------ */

.bannerItem-bd
{
   margin-top: 7px;
}

/* ---------------------------------------------------------------------
Box
Breakpoint: Default
------------------------------------------------------------------------ */

.box-hd
{
   margin-bottom: 10px;
}

.box-hd-xs
{
   margin-bottom: 2px;
}

.box-md
{
   margin-top: 10px;
   margin-bottom: 30px;
}

/* ---------------------------------------------------------------------
Book
Breakpoint: Default
------------------------------------------------------------------------ */
.book-hd
{
   margin-bottom: 35px;
}

.book-meta
{
   margin: 0 22px 10px;
}

/* ---------------------------------------------------------------------
Book Cover
Breakpoint: Default
------------------------------------------------------------------------ */
.bookCover
{
   display: block;
   text-align: center;
}

.bookCover:focus
{
   outline: none;
}

.bookCover:hover
{
   text-decoration: none;
}

.bookCover-md
{
   position: relative;
   margin-bottom: 11px;
}

.bookCover-md-container
{
   display: inline-block;
   position: relative;
}

.bookCover-md > img
{
   margin: 0 auto;
}

.bookCover-md-badge
{
   position: absolute;
   bottom: 4px;
   right: 0;
}

/* ---------------------------------------------------------------------
Button List
Breakpoint: Default
------------------------------------------------------------------------ */

.btnList > *
{
   display: block;
}

.btnList > * + *
{
   margin-top: 10px;
}

/* ---------------------------------------------------------------------
Horizontal List
Breakpoint: Default
------------------------------------------------------------------------ */
.hList
{
   font-size: 0;
}

.hList > *
{
   display: inline-block;
   vertical-align: middle;
   margin-left: 30px;
}

.hList > *:first-child
{
   margin-left: 0;
}

.hList-sm > *
{
   margin-left: 10px;
}

/* ---------------------------------------------------------------------
Hook
Breakpoint: Default
Desc: Very similar to .box or .section but content is always centered
------------------------------------------------------------------------ */
.hook
{
   margin-bottom: 29px;
}

.hook-md, .hook-bd
{
   text-align: center;
}

.hook-md > img, .hook-md-link > img
{
   margin: 0 auto;
}

.hook-md-link
{
   display: block;
}

.hook-bd
{
   margin-top: 20px;
}

/* ---------------------------------------------------------------------
Hero
Breakpoint: Default
------------------------------------------------------------------------ */
.hero
{
   padding: 15px 20px 20px;
   background: #eeeeee;
   border: 1px solid #dddddd;
}

/* ---------------------------------------------------------------------
Hero Content
Breakpoint: Default
------------------------------------------------------------------------ */


.heroContent-meta
{
   margin-top: 17px;
   padding: 12px 0;
   border-top: 1px solid #dddddd;
   border-bottom: 1px solid #dddddd;
}

.heroContent-bd
{
   margin-top: 20px;
}

/* ---------------------------------------------------------------------
Hero Image
Breakpoint: Default
------------------------------------------------------------------------ */
.heroImage
{
   display: inline-block;
   position: relative;
   margin-top: 5px;
}

.heroImage-md
{
   display: block;
}

.heroImage-md:focus
{
   outline: 0;
}

.heroImage-md:focus *
{
   border-color: #969696;
}

.heroImage-badge
{
   position: absolute;
   right: 14px;
   bottom: 2px;
}

/* ---------------------------------------------------------------------
jPlayer styles
------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
jPlayer layout
------------------------------------------------------------------------ */
/* Container for audio player */
.jp-wrapper
{
   color: #636567;
   padding-bottom: 20px;
}

.jp-wrapper button
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: 0;
   outline: none;
   font-size: 0;
}

/* Container for title and number of tracks */
.jp-header
{
   border: 1px solid #636567;
   padding: 10px 5px;
   font-size: 15px;
}

/* Title of subject area */
.jp-topic
{
   font-size: 18px;
   font-weight: bold;
}

/* Container for playlist */
.jp-list
{
   border: 1px solid #eeeeee;
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 14px;
}

.jp-list li
{
   padding: 8px;
}

/* Alternate row color for quicker track identification */
.jp-list li:nth-child(odd)
{
   background: #eeeeee;
}

/* Vertically center content inside list items */
.jp-list li > *
{
   height: 40px;
}

/* Link/target for individual track */
.jp-playlist-item
{
   color: #636567;
}

.jp-playlist-item:hover, .jp-playlist-item:active
{
   color: #3463a8;
   text-decoration: none;
}

/* Indicator for currently playing track */
.jp-playlist-current
{
   font-weight: bold;
}

@media (min-width: 768px)
{
  /* Indicator for previously played track */
  /* use JS to display when played */
   .jp-listened_atSmall
   {
      display: none;
      margin-right: 15px;
      padding: 2px 6px;
      vertical-align: top;
      background-color: #bdbdbd;
      color: white;
      font-size: 12px;
      font-weight: normal;
   }
}

/* ---------------------------------------------------------------------
jPlayer controls
------------------------------------------------------------------------ */
/* Container for all controls */
.jp-interface
{
   margin: 30px 0;
}

/* Center control buttons */
.jp-controls
{
   text-align: center;
}

/* Play button - circle shape */
.jp-play, .jp-pause
{
   position: relative;
   border: 0;
   margin-left: 8px;
   margin-right: 8px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #4e84c4;
}

/* Play button - CSS triangle */
.jp-play::before
{
   top: 11px;
   left: 17px;
   width: 0;
   height: 0;
   content: '';
   position: absolute;
   z-index: 2;
   border-top: 14px solid transparent;
   border-bottom: 14px solid transparent;
   border-left: 23px solid #ffffff;
}

/* Play button - drop shadow effect */
.jp-play::after, .jp-pause::after
{
   content: '';
   position: absolute;
   z-index: -1;
   top: 2px;
   left: 0;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #3463a8;
}

/* Pause button - made using CSS gradient stops */
.jp-pause::before
{
   content: '';
   position: absolute;
   top: 12px;
   left: 13px;
   height: 50%;
   width: 48%;
   background-image: linear-gradient(to right, #ffffff, #ffffff 37.5%, #4e84c4 37.5%, #4e84c4 62.5%, #ffffff 62.5%, #ffffff);
  /* fallback for IE 9 */
   background-image: url(../media/images/global/jp-pause.png);
}

/* Previous and Next buttons - circle shapes */
.jp-previous, .jp-next
{
   position: relative;
   border: 0;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background-color: #4e84c4;
}

/* Previous button - CSS triangles #1 */
.jp-previous-icon::before
{
   top: 6px;
   left: 4px;
   width: 0;
   height: 0;
   content: '';
   position: absolute;
   z-index: 2;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-right: 7px solid #ffffff;
}

/* Previous button - CSS triangle #2 */
.jp-previous-icon::after
{
   top: 6px;
   left: 11px;
   width: 0;
   height: 0;
   content: '';
   position: absolute;
   z-index: 2;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-right: 7px solid #ffffff;
}

/* Next button - CSS triangle #1 */
.jp-next-icon::before
{
   top: 6px;
   left: 7px;
   width: 0;
   height: 0;
   content: '';
   position: absolute;
   z-index: 2;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #ffffff;
}

/* Next button - CSS triangle #2 */
.jp-next-icon::after
{
   top: 6px;
   left: 14px;
   width: 0;
   height: 0;
   content: '';
   position: absolute;
   z-index: 2;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-left: 7px solid #ffffff;
}

/* Previous and Next buttons - drop shadow effect */
.jp-previous::after, .jp-next::after
{
   content: '';
   position: absolute;
   z-index: -1;
   top: 2px;
   left: 0;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background-color: #3463a8;
}

/* Progress bar */
.jp-progress
{
   width: 70%;
   margin: 20px 0;
   border: 1px solid #3463a8;
   border-radius: 5px;
}

.jp-play-bar
{
   height: 8px;
   border-radius: 5px;
   background-color: #3463a8;
}

.jp-now-playing
{
   font-size: 14px;
}

/* Time progress */
.jp-time-elapsed
{
   width: 30%;
   font-size: 12px;
   text-align: center;
}

/* Volume bar */
.jp-volume-controls
{
   display: none;
}

/* ---------------------------------------------------------------------
Section
Breakpoint: Default
------------------------------------------------------------------------ */

.section_relative
{
   position: relative;
}

.section-lg
{
   margin-top: 30px;
}

.section-flush
{
   margin-top: 0;
}

.section-hd, .section-meta, .section-bd, .section-ft
{
   position: relative;
}

.section-hd
{
   z-index: 400;
}

.section-meta
{
   z-index: 300;
   margin-top: 45px;
}

.section-bd
{
   z-index: 200;
   margin-top: 45px;
   margin-bottom: 45px;
}

.section-ft
{
   z-index: 100;
}

/* ---------------------------------------------------------------------
Toggle Content
Breakpoint: Default
------------------------------------------------------------------------ */


.toggleContent-item_isHidden
{
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   border: 0 !important;
   margin: 0 !important;
   clip: rect(1px 1px 1px 1px) !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   overflow: hidden !important;
}

.toggleContent-item_isActive
{
   display: block;
}

/* ---------------------------------------------------------------------
Vertical List
Breakpoint: Default
------------------------------------------------------------------------ */
.vList > *
{
   display: block;
   margin-bottom: 20px;
}

.vList > *:last-child
{
   margin-bottom: 0;
}

/* ---
Content Styles
--- */
/* ---------------------------------------------------------------------
Icon
Breakpoint: Default
------------------------------------------------------------------------ */
.icn
{
   display: inline-block;
   vertical-align: middle;
  /*vertical-align: bottom;*/
   width: 20px;
   height: 20px;
   background-image: url(../media/images/sprites/icn/sprite-core.png);
   background-position: 50px 50px;
   background-repeat: no-repeat;
   background-color: transparent;
   font-size: 0;
}

.icn-add
{
   background-position: 0px -362px;
}

.icn-article
{
   background-position: 0px -185px;
}

.icn-clock
{
   background-position: 0px -320px;
}

.icn-helpOutline
{
   background-position: 0px -242px;
}

.icn-addSm
{
   width: 15px;
   height: 14px;
   background-position: 0px 0px;
}

.icn-loop
{
   width: 20px;
   height: 20px;
   background-position: 0px -299px;
}

.icn-feedback
{
   width: 20px;
   height: 24px;
   background-position: 0px -408px;
}

.icn-logout
{
   width: 20px;
   height: 24px;
   background-position: 0px -433px;
}

.icn-profile
{
   width: 20px;
   height: 24px;
   background-position: 0px -458px;
}

.icn-home
{
   width: 20px;
   height: 24px;
   background-position: 0px -383px;
}

.icn-bookClose
{
   width: 20px;
   height: 24px;
   background-position: 0px -483px;
}

.icn-bookOpen
{
   width: 26px;
   height: 18px;
   background-position: 0px -204px;
}

.icn-bookOpenSm
{
   width: 23px;
   height: 17px;
   background-position: 0px -111px;
}

.icn-bookOpenBlueSm
{
   width: 26px;
   height: 17px;
   background-position: 0px -75px;
}

.icn-bookOpenLinkSm
{
   width: 23px;
   height: 17px;
   background-position: 0px -93px;
}

.icn-bundlesSm
{
   width: 23px;
   height: 17px;
   background-position: 0px -129px;
}

.icn-arrowDown
{
   width: 14px;
   height: 14px;
   background-position: 0px -15px;
}

.icn-triangleDown
{
   width: 18px;
   height: 14px;
   background-position: 0px -45px;
}

.icn-triangleRight
{
   width: 10px;
   height: 20px;
   background-position: 0px -341px;
}

.icn-warning
{
   width: 32px;
   height: 32px;
   background-position: 0px -706px;
}

.icn-flagGrey
{
   width: 32px;
   height: 32px;
   background-position: 0px -739px;
}

.icn-flagBlue
{
   width: 32px;
   height: 32px;
   background-position: 0px -574px;
}

.icn-helpSolid
{
   width: 32px;
   height: 32px;
   background-position: 0px -508px;
}

.icn-helpSolidSm
{
   width: 18px;
   height: 18px;
   background-position: 0px -261px;
}

.icn-checkmark
{
   width: 32px;
   height: 32px;
   background-position: 0px -607px;
}

.icn-alert
{
   width: 32px;
   height: 32px;
   background-position: 0px -673px;
}

.icn-incorrect
{
   width: 32px;
   height: 32px;
   background-position: 0px -640px;
}

.icn-pdf
{
   width: 32px;
   height: 32px;
   background-position: 0px -541px;
}

.icn-lock
{
   width: 14px;
   height: 14px;
   background-position: 0px -60px;
}

.icn-user
{
   width: 14px;
   height: 14px;
   background-position: 0px -30px;
}

.icn-titleBookOpen
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px 0px;
   width: 123px;
   height: 126px;
}

.icn-titleBookStack
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px -125px;
   width: 123px;
   height: 126px;
}

.icn-titleHelp
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px -250px;
   width: 123px;
   height: 126px;
}

.icn-titleQuiz
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px -375px;
   width: 123px;
   height: 126px;
}

.icn-titleDictionary
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px -631px;
   width: 123px;
   height: 126px;
}

.icn-titleOutline
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px -505px;
   width: 123px;
   height: 126px;
}

.icn-titleLecture
{
   background-image: url(../media/images/sprites/title/sprite-core.png);
   background-position: 0px -765px;
   width: 123px;
   height: 126px;
}


.icn-volumeMute
{
   background-image: url(../media/images/sprites/audioPlayer/sprite-core.png);
   background-position: 0px -105px;
   width: 34px;
   height: 34px;
}

.jp-state-muted .icn-volumeMute
{
   background-image: url(../media/images/sprites/audioPlayer/sprite-core.png);
   background-position: 0px -140px;
   width: 34px;
   height: 34px;
}

.icn-volumeFull
{
   background-image: url(../media/images/sprites/audioPlayer/sprite-core.png);
   background-position: 0px -70px;
   width: 34px;
   height: 34px;
}

@media (max-width: 768px)
{
   .icn_untilSmall
   {
      display: inline-block;
      vertical-align: middle;
    /*vertical-align: bottom;*/
      width: 20px;
      height: 20px;
      background-image: url(../media/images/sprites/icn/sprite-core.png);
      background-position: 50px 50px;
      background-repeat: no-repeat;
      background-color: transparent;
      font-size: 0;
   }

   .icn-listened
   {
      display: none;
      background-image: url(../media/images/sprites/audioPlayer/sprite-core.png);
      background-position: 0px 0px;
      width: 34px;
      height: 34px;
   }

   .icn-transcript
   {
      background-image: url(../media/images/sprites/audioPlayer/sprite-core.png);
      background-position: 0px -35px;
      width: 34px;
      height: 34px;
   }
}

/* ---------------------------------------------------------------------
Icon Badge
Breakpoint: Default
------------------------------------------------------------------------ */
.icnBadge
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
   padding: 6px;
   background: #4e84c4;
   font-size: 12px;
   line-height: 1;
   color: #FFFFFF;
   border: 1px solid #4e84c4;
}

.icnBadge-info
{
   background: #f9f9f9;
   border: 1px solid #dddddd;
}

.icnBadge > *
{
   display: inline-block;
   vertical-align: middle;
}

.icnBadge-hd
{
   position: relative;
   overflow: hidden;
   top: 2px;
}

.icnBadge-container
{
   overflow: hidden;
}

.icnBadge-md
{
   float: right;
   margin-left: 8px;
}

.icnBadge-ft
{
   position: absolute;
   top: -5px;
   right: -5px;
   font-size: 0;
}

.icnBadge-ft-sm
{
   top: 3px;
   right: 3px;
}

/* ---------------------------------------------------------------------
Image
Breakpoint: Default
------------------------------------------------------------------------ */
.image
{
   display: table;
}

.image-circle
{
   display: table-cell;
   width: 190px;
   height: 190px;
   overflow: hidden;
   vertical-align: bottom;
   background: #FFFFFF;
   -webkit-border-radius: 195px;
   border-radius: 195px;
   background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
   border: 2px solid #dddddd;
}

.image-circle-container
{
   display: block;
   height: 190px;
}

.image-circle img
{
   display: block;
   margin: 0 auto;
}

/* ---------------------------------------------------------------------
Link Call to Action
Breakpoint: Default
------------------------------------------------------------------------ */
.linkCTA:focus
{
   outline-width: 0;
}

.linkCTA-uNoHover:hover, .linkCTA-uNoHover:focus, .linkCTA-nestedLink:hover
{
   text-decoration: none;
}

.linkCTA-uNoHover:focus
{
   outline-width: 5px;
}

.linkCTA-fSecondary
{
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.linkCTA-fSm
{
   font-size: 14px;
}

.linkCTA-cSecondary
{
   color: #4e84c4;
}

.linkCTA-disabled
{
   color: #707372;
}

.linkCTA-disabled:hover, .linkCTA-disabled:focus
{
   text-decoration: none;
}

.linkCTA-cBlack
{
   color: #000000;
}

.linkCTA-success
{
   color: #3f9e45;
}

.linkCTA-error
{
   color: #c44e4e;
}

.linkCTA-warning
{
   color: #cf7f1e;
}

.linkCTA-txt
{
   color: #707372;
}

.linkCTA:hover .linkCTA-link
{
   text-decoration: underline;
}


/* ---
Layout Styles
--- */
/* ---------------------------------------------------------------------
Blocks
Breakpoint: Default
------------------------------------------------------------------------ */
.blocks
{
   margin: 0;
   padding: 0;
   font-size: 0;
  /* remove inline block whitespace */;
}

.blocks > *
{
   display: block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 30px 0 0;
  /* space blocks horizontally and vertically - offset is handled by .blocks */
   font-size: 16px;
  /* return the font size */;
}

.blocks > *:first-child
{
   padding-top: 0;
}

/* ---------------------------------------------------------------------
gridTable - vertically center child elements using table layout
------------------------------------------------------------------------ */
.gridTable
{
   display: table;
   width: 100%;
}

.gridTable-item
{
   display: table-cell;
   float: none;
   vertical-align: middle;
}

.gridTable-item_1of12
{
   width: 8.33%;
}

.gridTable-item_2of12
{
   width: 16.66%;
}

.gridTable-item_3of12
{
   width: 25%;
}

.gridTable-item_4of12
{
   width: 33.33%;
}

.gridTable-item_5of12
{
   width: 41.66%;
}

.gridTable-item_6of12
{
   width: 50%;
}

.gridTable-item_7of12
{
   width: 58.33%;
}

.gridTable-item_8of12
{
   width: 66.66%;
}

.gridTable-item_9of12
{
   width: 75%;
}

.gridTable-item_10of12
{
   width: 83.33%;
}

.gridTable-item_11of12
{
   width: 91.66%;
}

.gridTable-item_12of12
{
   width: 100%;
}

/* ---------------------------------------------------------------------
Table Row
Breakpoint: Default
------------------------------------------------------------------------ */


.tableRow-item + .tableRow-item
{
   margin-top: 5px;
}

/* ---------------------------------------------------------------------
Site
Breakpoint: Default
------------------------------------------------------------------------ */
.site-container
{
   margin: 0 auto;
}

.site
{
   display: table;
   height: 100%;
   width: 100%;
}

.site-hd, .site-bd, .site-ft
{
   display: table-row;
   height: 1px;
   position: relative;
}

.site-hd
{
   z-index: 400;
}

.site-bd
{
   height: auto;
   z-index: 300;
}

.site-ft
{
   z-index: 100;
}

.site-bar
{
   width: 100%;
   height: 18px;
   background: #7e8083;
}

/* ---------------------------------------------------------------------
Utilities
Breakpoint: Default
------------------------------------------------------------------------ */
.isVisuallyHidden
{
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   border: 0 !important;
   margin: 0 !important;
   clip: rect(1px 1px 1px 1px) !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   overflow: hidden !important;
}

.relative
{
   position: relative;
}

.float-left
{
   float: left;
}

.float-right
{
   float: right;
}

/* ---------------------------------------------------------------------
vCenter - vertically center child elements within a container
------------------------------------------------------------------------ */
.vCenter
{
   font-size: 0;
}

.vCenter > *
{
   display: inline-block;
   float: none;
   vertical-align: middle;
}

/* ---------------------------------------------------------------------
Viewport
Breakpoint: Default
------------------------------------------------------------------------ */

.viewport-sm
{
   max-width: 470px;
   margin-left: auto;
   margin-right: auto;
}

.viewport-lg
{
   max-width: 635px;
}

@media (min-width: 768px)
{
  /* ---------------------------------------------------------------------
Target Browsers: All
Media Type: Screen, Projection
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---
Landmark Styles
--- */
  /* ---------------------------------------------------------------------
Footer Navigation
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---
Container Styles
--- */
  /* ---------------------------------------------------------------------
Banner
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Banner Item
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Book
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Book Cover
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Button List
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Hero Image
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
jPlayer styles
------------------------------------------------------------------------ */
  /* Container for all controls */
  /* Volume bar */
  /* ---
Content Styles
--- */
  /* ---
Layout Styles
--- */
  /* ---------------------------------------------------------------------
Blocks
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Table Row
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Utilities
Breakpoint: $SCREEN_SM (Tablet)
------------------------------------------------------------------------ */
   .footerNav-item
   {
      float: left;
      margin: 0 11px;
   }

   .footerNav-item:first-child
   {
      margin-left: 0;
   }

   .footerNav-item:last-child
   {
      margin-right: 0;
   }

   .banner
   {
      background: url("../media/images/global/banner-book-bg.png") 0 top no-repeat;
   }

   .banner-container > .row > * + *
   {
      margin-top: 20px;
   }

   .bannerItem
   {
      margin-left: 210px;
      margin-right: 0;
   }

   .book-meta
   {
      text-align: right;
   }

   .bookCover-md-container
   {
      width: 100%;
   }

   .btnList
   {
      font-size: 0;
   }

   .btnList > *
   {
      display: inline-block;
      vertical-align: middle;
   }

   .btnList > * + *
   {
      margin-top: 0;
   }

   .btnList > *, .btnList > .btn
   {
      margin-right: 10px;
      vertical-align: middle;
   }

   .btnList-md > *, .btnList-md > .btn
   {
      margin-right: 20px;
   }

   .btnList-lg > *, .btnList-lg > .btn
   {
      margin-right: 30px;
   }

   .btnList > *:last-child, .btnList > .btn:last-child
   {
      margin-right: 0;
   }

   .heroImage
   {
      display: block;
   }

   .jp-interface
   {
      margin: 60px 0;
   }

   .jp-list li
   {
      padding: 0 20px;
   }

   .jp-volume-controls
   {
      display: block;
   }

   .jp-volume-bar
   {
      width: 100%;
      border: 1px solid #3463a8;
      border-radius: 5px;
   }

   .jp-volume-bar-value
   {
      height: 8px;
      border-radius: 5px;
      background-color: #3463a8;
   }

   .blocks
   {
      margin-left: -30px;
   }

   .blocks > *
   {
      display: inline-block;
      vertical-align: top;
      padding-left: 30px;
   }

   .blocks-2up > *
   {
      width: 50%;
   }

   .blocks-2up > *:nth-child(1), .blocks-2up > *:nth-child(2)
   {
      margin-top: 0;
   }

   .blocks-3up > *
   {
      width: 33.33333%;
   }

   .blocks-3up > *:nth-child(1), .blocks-3up > *:nth-child(2), .blocks-3up > *:nth-child(3)
   {
      padding-top: 0;
   }

   .blocks-4up > *
   {
      width: 25%;
      padding-top: 70px;
   }

   .blocks-4up > *:nth-child(1), .blocks-4up > *:nth-child(2), .blocks-4up > *:nth-child(3), .blocks-4up > *:nth-child(4)
   {
      padding-top: 0;
   }

   .tableRow
   {
      display: table;
      width: 100%;
   }

   .tableRow_wAuto
   {
      width: auto;
   }

   .mix-tableRow_sRightSm
   {
      padding-right: 10px;
   }

   .mix-tableRow_sRightLg
   {
      padding-right: 30px;
   }

   .tableRow-item
   {
      display: table-cell;
      vertical-align: middle;
   }

   .tableRow-item_gutter
   {
      padding: 0 10px;
   }

   .tableRow-item_1of10
   {
      width: 10%;
   }

   .tableRow-item_2of10
   {
      width: 20%;
   }

   .tableRow-item_3of10
   {
      width: 30%;
   }

   .tableRow-item_4of10
   {
      width: 40%;
   }

   .tableRow-item_5of10
   {
      width: 50%;
   }

   .tableRow-item_6of10
   {
      width: 60%;
   }

   .tableRow-item_7of10
   {
      width: 70%;
   }

   .tableRow-item_8of10
   {
      width: 80%;
   }

   .tableRow-item_9of10
   {
      width: 100%;
   }

   .tableRow-item_icnXsm
   {
      width: 27px;
   }

   .tableRow-item_icnSm
   {
      width: 32px;
   }

   .tableRow-item_icnMed
   {
      width: 45px;
   }

   .mix-tableRow-item_sSm
   {
      padding: 10px 20px;
   }

   .mix-tableRow-item_sSm:first-child
   {
      padding-left: 0;
   }

   .mix-tableRow-item_sSm:last-child
   {
      padding-right: 0;
   }

   .mix-tableRow-item_vTop
   {
      vertical-align: top;
   }

   .mix-tableRow-item_vBottom
   {
      vertical-align: bottom;
   }

   .mix-tableRow-item_outline
   {
      border: 1px solid #dddddd;
   }

   .mix-tableRow-item_bLeftSm
   {
      border-left: 1px solid #707372;
   }

   .mix-tableRow-item_bRightSm
   {
      border-right: 1px solid #dddddd;
   }

   .mix-tableRow-item_tCenter
   {
      text-align: center;
   }

   .float-sm-left
   {
      float: left;
   }

   .float-sm-right
   {
      float: right;
   }
}

@media (min-width: 992px)
{
  /* ---------------------------------------------------------------------
Target Browsers: All
Media Type: Screen, Projection
Breakpoint: $SCREEN_MD (Desktop)
------------------------------------------------------------------------ */
  /* ---
Landmark Styles
--- */
  /* ---------------------------------------------------------------------
Footer
Breakpoint: $SCREEN_MD (Desktop)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Footer Navigation
Breakpoint: $SCREEN_MD (Desktop)
------------------------------------------------------------------------ */
  /* ---
Container Styles
--- */
  /* ---------------------------------------------------------------------
Banner Item
Breakpoint: $SCREEN_MD (Desktop)
------------------------------------------------------------------------ */
  /* ---------------------------------------------------------------------
Banner Item
Breakpoint: $SCREEN_MD (Desktop)
------------------------------------------------------------------------ */
  /* ---
Content Styles
--- */
  /* ---
Layout Styles
--- */
   .footer
   {
      padding-bottom: 46px;
   }

   .footerNav
   {
      float: right;
      margin-top: 0;
   }

   .banner-container > .row > * + *
   {
      margin-top: 0;
   }

   .bannerItem
   {
      margin-left: 0;
   }

   .bannerItem-left
   {
      margin-left: 210px;
   }

   .bannerItem-container
   {
      padding-right: 20px;
      border-right: 1px solid #707372;
   }
}

@media (min-width: 1200px)
{
}

/* Other Media Queries
@todo - shoudl it be a mixin for inline breakpoitns?
@media (max-width: $SCREEN_XS_MAX) { ... }
@media (min-width: $SCREEN_SM_MIN) and (max-width: $SCREEN_SM_MAX) { ... }
@media (min-width: $SCREEN_MD_MIN) and (max-width: $SCREEN_MD_MAX) { ... }
@media (min-width: $SCREEN_LG_MIN) { ... }
*/