/*=====================================================================
 *
 * Filename: screen.css
 * Author: Sean Dunwoody
 * Date Created: 25/09/2014
 * Media: Screen
 *
 * Description
 * -----------
 * Site Specific Styles
 *
 *=====================================================================*/
/* Normalize ==========================================================*/
/* Header Styles ======================================================*/
/* HTML5 display definitions ==========================================*/
/**
             * Correct `block` display not defined in IE 8/9.
             */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}
/**
             * Correct `inline-block` display not defined in IE 8/9.
             */

audio,
canvas,
video {
	display: inline-block;
}
/**
             * Prevent modern browsers from displaying `audio` without controls.
             * Remove excess height in iOS 5 devices.
             */

audio:not([controls]) {
	display: none;
	height: 0;
}
/**
             * Address `[hidden]` styling not present in IE 8/9.
             * Hide the `template` element in IE, Safari, and Firefox < 22.
             */

[hidden],
template {
	display: none;
}

* {
	-ms-user-select: none;
	/* IE 10+ */
	
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.selectable {
	-ms-user-select: auto;
	-moz-user-select: auto;
	-khtml-user-select: auto;
	-webkit-user-select: auto;
	user-select: auto;
}
/* Base ===============================================================*/
/**
             * 1. Set default font family to sans-serif.
             * 2. Prevent iOS text size adjust after orientation change, without disabling
             *    user zoom.
             */

html {
	font-family: sans-serif;
	/* 1 */
	
	-ms-text-size-adjust: 100%;
	/* 2 */
	
	-webkit-text-size-adjust: 100%;
	/* 2 */
}
/**
             * Remove default margin.
             */

body {
	margin: 0;
}
/* Links ==============================================================*/
/**
             * Remove the gray background color from active links in IE 10.
             */

a {
	background: transparent;
}
/**
             * Address `outline` inconsistency between Chrome and other browsers.
             */

a:focus {
	outline: thin dotted;
}
/**
             * Improve readability when focused and also mouse hovered in all browsers.
             */

a:active,
a:hover {
	outline: 0;
}
/* Typography =========================================================*/
/**
             * Address variable `h1` font-size and margin within `section` and `article`
             * contexts in Firefox 4+, Safari 5, and Chrome.
             */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
/**
             * Address styling not present in IE 8/9, Safari 5, and Chrome.
             */

abbr[title] {
	border-bottom: 1px dotted;
}
/**
             * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
             */

b,
strong {
	font-weight: bold;
}
/**
             * Address styling not present in Safari 5 and Chrome.
             */

dfn {
	font-style: italic;
}
/**
             * Address differences between Firefox and other browsers.
             */

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}
/**
             * Address styling not present in IE 8/9.
             */

mark {
	background: #ff0;
	color: #000;
}
/**
             * Correct font family set oddly in Safari 5 and Chrome.
             */

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}
/**
             * Improve readability of pre-formatted text in all browsers.
             */

pre {
	white-space: pre-wrap;
}
/**
             * Set consistent quote types.
             */

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
             * Address inconsistent and variable font size in all browsers.
             */

small {
	font-size: 80%;
}
/**
             * Prevent `sub` and `sup` affecting `line-height` in all browsers.
             */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}
/* Embedded content ===================================================*/
/**
             * Remove border when inside `a` element in IE 8/9.
             */

img {
	border: 0;
}
/**
             * Correct overflow displayed oddly in IE 9.
             */

svg:not(:root) {
	overflow: hidden;
}
/* Figures ============================================================*/
/**
             * Address margin not present in IE 8/9 and Safari 5.
             */

figure {
	margin: 0;
}
/* Forms ==============================================================*/
/**
             * Define consistent border, margin, and padding.
             */

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
/**
             * 1. Correct `color` not being inherited in IE 8/9.
             * 2. Remove padding so people aren't caught out if they zero out fieldsets.
             */

legend {
	border: 0;
	/* 1 */
	
	padding: 0;
	/* 2 */
}
/**
             * 1. Correct font family not being inherited in all browsers.
             * 2. Correct font size not being inherited in all browsers.
             * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
             */

button,
input,
select,
textarea {
	font-family: inherit;
	/* 1 */
	
	font-size: 100%;
	/* 2 */
	
	margin: 0;
	/* 3 */
}
/**
             * Address Firefox 4+ setting `line-height` on `input` using `!important` in
             * the UA stylesheet.
             */

button,
input {
	line-height: normal;
}
/**
             * Address inconsistent `text-transform` inheritance for `button` and `select`.
             * All other form control elements do not inherit `text-transform` values.
             * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
             * Correct `select` style inheritance in Firefox 4+ and Opera.
             */

button,
select {
	text-transform: none;
}
/**
             * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
             *    and `video` controls.
             * 2. Correct inability to style clickable `input` types in iOS.
             * 3. Improve usability and consistency of cursor style between image-type
             *    `input` and others.
             */

button,
html input[type="button"],
/* 1 */

input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	/* 2 */
	
	cursor: pointer;
	/* 3 */
}
/**
             * Re-set default cursor for disabled elements.
             */

button[disabled],
html input[disabled] {
	cursor: default;
}
/**
             * 1. Address box sizing set to `content-box` in IE 8/9/10.
             * 2. Remove excess padding in IE 8/9/10.
             */

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	/* 1 */
	
	padding: 0;
	/* 2 */
}
/**
             * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
             * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
             *    (include `-moz` to future-proof).
             */

input[type="search"] {
	-webkit-appearance: textfield;
	/* 1 */
	
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	/* 2 */
	
	box-sizing: content-box;
}
/**
             * Remove inner padding and search cancel button in Safari 5 and Chrome
             * on OS X.
             */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
/**
             * Remove inner padding and border in Firefox 4+.
             */

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
/**
             * 1. Remove default vertical scrollbar in IE 8/9.
             * 2. Improve readability and alignment in all browsers.
             */

textarea {
	overflow: auto;
	/* 1 */
	
	vertical-align: top;
	/* 2 */
}
/* Tables =============================================================*/
/**
             * Remove most spacing between table cells.
             */

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* List Styles ========================================================*/

.list {
	counter-reset: list-counter;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.list li {
	padding: 0 0 0 24px;
	position: relative;
}
/* Again this isn't ideal, but it's the easiest way to do this currently */

.list[start="2"] {
	counter-reset: list-counter 1;
}

.list[start="3"] {
	counter-reset: list-counter 2;
}

.list[start="4"] {
	counter-reset: list-counter 3;
}

.list[start="5"] {
	counter-reset: list-counter 4;
}

.list[start="6"] {
	counter-reset: list-counter 5;
}

.list[start="7"] {
	counter-reset: list-counter 6;
}

.list[start="8"] {
	counter-reset: list-counter 7;
}

.list[start="9"] {
	counter-reset: list-counter 8;
}

.list[start="10"] {
	counter-reset: list-counter 9;
}

.list[start="11"] {
	counter-reset: list-counter 10;
}

.list[start="12"] {
	counter-reset: list-counter 11;
}

.list[start="13"] {
	counter-reset: list-counter 12;
}

.list[start="14"] {
	counter-reset: list-counter 13;
}

.list[start="15"] {
	counter-reset: list-counter 14;
}

.list li:before {
	content: counter(list-counter);
	counter-increment: list-counter;
	display: inline-block;
	font-weight: bold;
	left: 0px;
	position: absolute;
	text-align: right;
	top: 0;
	width: 19px;
	zoom: 1;
}

.list-letters {}

.list-letters li {
	padding: 0 0 0 21px;
}

.list-letters li:before {
	content: counter(list-counter, lower-alpha);
	left: 5px;
	text-align: left;
	width: 9px;
}

.list-roman {}

.list-roman li {
	padding: 0 0 0 21px;
}

.list-roman li:before {
	content: counter(list-counter, lower-roman);
	left: 5px;
	text-align: left;
	width: 9px;
}

.list-inline {
	display: inline-block;
	min-width: 30%;
	zoom: 1;
}

.list-inline:first-of-type {
	padding-right: 6%;
}
/* List Styles LIST-B ========================================================*/

.list-b {
	counter-reset: list-counter;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.list-b li {
	padding: 0 0 0 24px;
	position: relative;
}
/* Again this isn't ideal, but it's the easiest way to do this currently */

.list-b[start="2"] {
	counter-reset: list-counter 1;
}

.list-b[start="3"] {
	counter-reset: list-counter 2;
}

.list-b[start="4"] {
	counter-reset: list-counter 3;
}

.list-b[start="5"] {
	counter-reset: list-counter 4;
}

.list-b[start="6"] {
	counter-reset: list-counter 5;
}

.list-b[start="7"] {
	counter-reset: list-counter 6;
}

.list-b[start="8"] {
	counter-reset: list-counter 7;
}

.list-b[start="9"] {
	counter-reset: list-counter 8;
}

.list-b[start="10"] {
	counter-reset: list-counter 9;
}

.list-b[start="11"] {
	counter-reset: list-counter 10;
}

.list-b[start="12"] {
	counter-reset: list-counter 11;
}

.list-b[start="13"] {
	counter-reset: list-counter 12;
}

.list-b[start="14"] {
	counter-reset: list-counter 13;
}

.list-b[start="15"] {
	counter-reset: list-counter 14;
}

.list-b li:before {
	content: counter(list-counter);
	counter-increment: list-counter;
	display: inline-block;
	font-weight: bold;
	left: 0px;
	position: absolute;
	text-align: right;
	top: 0;
	width: 19px;
	zoom: 1;
}

.list-b li ul li {
	list-style-type: disc;
}

.list-b ul li ul {
	-webkit-padding-start: 11px;
}

.list-b li ul li p{
	float: left;
}
.list-b li ul li:before {
	content: "";
	position: absolute;
}
/* Base Styles ========================================================*/

html {
	height: 100%;
	max-height: 1000000px
}

body {
	font-family: "Times New Roman", serif;
	font-size: 11px;
	min-height: 100%;
}

h1 {
	color: #2181c4;
	line-height: 22px;
	margin: 0 0 14px 0;
}

.smallcaps {
	font-variant: small-caps;
}

p {
	line-height: inherit;
	margin: 0;
	text-indent: 13px;
}

br {
	line-height: inherit;
}

p:first-of-type,
.dictionary-indent p:first-of-type {
	text-indent: 0;
}

.no-indent {
	text-indent: 0;
}

.indented,
p.indented:first-of-type,
p.indented:first-of-type,
.dictionary-content .indented {
	text-indent: 14px;
}
/* apply a natural box layout model to all elements */

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.highlight {
	color: #2181c4;
}

.no-highlight,
.table-definitions .no-highlight {
	color: inherit;
}

.text-justify p {
	text-align: justify;
}

.lfloat {
	float: left;
}

.rfloat {
	float: right;
}

.overflow {
	overflow: hidden;
}

.align-left {
	text-align: left;
}

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

.align-center {
	text-align: center;
}

blockquote {
	font-style: italic;
	font-weight: bold;
	margin: 10px 10px 12px 18px;
}

blockquote p {
	margin: 0;
}

blockquote .blockquote-source {
	font-style: normal;
	text-align: right;
}

.clear {
	clear: both;
}

.clearfix:after,
.fig-list:after,
.vocab-summary:after,
.page-inner:after,
.dictionary:after {
	clear: both;
	content: "";
	display: table;
}

.praclangsub {
	display: inline-block;
	width: 230px;
	zoom: 1;
}
/* Fonts ==============================================================*/
/*
			This font was initially used for the headings on the stage intro pages, but proved to not be a good enough match to the font used in the book
			(the stage intro titles are now images)
        
        @font-face {
            font-family: 'slayerregular';
            src: url('/fonts/slayer11-webfont.eot');
            src: url('/fonts/slayer11-webfont.eot?#iefix') format('embedded-opentype'),
                 url('/fonts/slayer11-webfont.woff2') format('woff2'),
                 url('/fonts/slayer11-webfont.woff') format('woff'),
                 url('/fonts/slayer11-webfont.ttf') format('truetype'),
                 url('/fonts/slayer11-webfont.svg#slayerregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }*/
/* Vocab Styles =======================================================*/

.vocab-summary {
	background: #fff6de;
	padding: 8px 18px 16px 18px;
}

.vocab-summary h1 {
	color: #000;
	font-size: 16px;
	margin: 0;
}

.vocab-summary-section {
	float: left;
	padding: 10px 0 0 0;
	width: 50%;
}

.vocab-summary-section .vocab-def dt,
.vocab-summary-section .vocab-def dd {
	padding-left: 12px;
	/* The negative text indent is so that all lines but the first are indented (due to the padding) */
	
	text-indent: -12px;
	width: 47%;
}

.vocab-summary-section .vocab-def dt {
	vertical-align: top;
}

.vocab-summary-section .vocab-def dd {
	vertical-align: bottom;
}

.vocab-summary-section .vocab-overflow-left dd {
	display: inline-block;
}

.vocab-def {
	line-height: inherit;
	margin: 0;
	white-space: nowrap
}

.vocab-def dt {
	display: inline-block;
	font-weight: bold;
	zoom: 1;
}

.vocab-def dd {
	display: inline-block;
	font-style: italic;
	margin: 0 0 0 5px;
	zoom: 1;
}

.vocab-sep-right dd {
	display: block;
	text-align: right;
}

.vocab-sep-left dd {
	display: block;
	text-align: left;
}

.vocab-overflow dt {
	float: left;
}

.vocab-overflow dd {
	display: block;
	overflow: hidden;
	padding: 0 0 0 9px;
}
/* This is a bit hacky - but I can't think of a better way of accomplishing this */

.vocab-overflow-left {
	padding: 0 0 0 18px;
}

.vocab-overflow-left dt {
	float: left;
	margin: 0 9px 0 -18px;
}

.vocab-overflow-left dd {
	display: inline;
	margin: 0;
}
/* Again, a bit hacky, but I can't think of a better way of doing this */

.vocab-multi dt {
	padding: 0 0 0 18px;
	text-indent: -18px;
	/* The following is to fix an issue in Chrome (http://stackoverflow.com/questions/7855974/width-issue-with-negative-text-indent-in-css) */
	
	white-space: nowrap;
}
/* this is for vocabs where the definition finishes a line lower than the term */

.vocab-def-gap-top dd {
	padding-top: 14px;
}
/* Vocab Checklist Styles =============================================*/

.vocab-checklist-container {
	background: #555;
	padding: 10px 12px;
}

.vocab-checklist-container .vocab-def {}

.vocab-checklist-container .vocab-def dt {
	max-width: 60%;
	vertical-align: top;
}

.vocab-checklist-container .vocab-def dd {
	max-width: 50%;
	vertical-align: top;
}
/* Script Styles ======================================================*/

.scripts-container {
	margin: 10px 0;
}

.script-intro {
	font-style: italic;
}

.script-pair {
	line-height: inherit;
	margin: 0;
}

.script-pair dt {
	float: left;
}

.script-pair dd {
	margin: 0;
	overflow: hidden;
}

.script-pair dd p:first-child {
	margin: 0;
}

.script-pair dd p {
	margin: 8px 0;
	text-indent: 0;
}
/* Questions Styles ===================================================*/

.questions-container {
	background: #c7e1f5;
	padding: 8px 11px 6px 11px;
}

.questions-container h1 {
	color: #000;
	font-size: 15px;
	margin: 0 0 8px 0;
}

.questions-list {}

.questions-container .list li:before {
	width: 11px;
}

.questions-container .list li {
	padding: 0 0 0 19px;
}
/* Questions Styles ===================================================*/

.translations-pair {
	line-height: 14px;
	margin: 0 0 0 15px;
}

.translations-pair dt,
.translations-pair dd {
	display: inline-block;
	max-width: 52.5%;
	min-width: 40%;
	zoom: 1;
}

.translations-pair dt {
	max-width: 46.5%;
}

.translations-pair dd {
	font-style: italic;
	margin-left: 34px;
}

.translations-pair-inline {
	display: inline-block;
	line-height: 14px;
	margin: 0 0 6px 15px;
	min-width: 31%;
	zoom: 1;
}

.translations-pair-inline dt,
.translations-pair-inline dd {
	display: block;
	margin: 0;
}

.translations-pair-inline dd {
	font-style: italic;
}

.translations-pair:last-of-type,
.translations-pair-inline:last-of-type {
	margin-bottom: 14px;
}

.translations-pair-full {
	width: 100%;
}
/* Figure Styles ======================================================*/

figure {
	max-width: 100%;
	position: relative;
}

figure img {
	display: block;
	max-width: 100%;
}

figcaption {
	position: relative;
}

.figs-container {}

.figs-centered {
	text-align: center;
}

.figs-centered figure {
	text-align: left;
}

.fig-inline {
	display: inline-block;
	vertical-align: top;
	zoom: 1;
}
/* For figures with a red figcaption */

.fig-highlight figcaption {
	color: #C50D0D;
	font-style: italic;
	padding: 7px 0;
	font-size: 10px
}

.fig-highlight {
	color: #C50D0D;
	font-style: italic;
	padding: 7px 0;
	font-size: 10px
}

.non-italic,
.table-definitions .non-italic {
	font-style: normal !important;
}

.fig-horiz-right img {
	display: inline-block;
	max-width: 58%;
	zoom: 1;
}

.fig-horiz-right figcaption {
	display: inline-block;
	max-width: 40%;
	padding: 0 0 0 36px;
	vertical-align: bottom;
	zoom: 1;
}

.fig-horiz-cap-right figcaption {
	vertical-align: top;
}

.fig-horiz-top-left img {
	display: inline-block;
	zoom: 1;
}

.fig-horiz-top-left figcaption {
	display: inline-block;
	vertical-align: top;
	zoom: 1;
}

.fig-horiz-left {
	clear: both;
	display: inline-block;
	position: relative;
	zoom: 1;
}

.fig-horiz-left figcaption {
	bottom: 0;
	width: 100%;
	padding: 0 6px 4px 0;
	position: absolute;
	right: 100%;
	text-align: right;
}

.fig-bottom-left {
	bottom: 26px;
	left: 13px;
	position: absolute;
}

.fig-bottom-right {
	bottom: 26px;
	position: absolute;
	right: 13px;
}

.fig-inline figcaption {
	padding-left: 3px;
}

.fig-vert-top {
	text-align: right;
}

.fig-vert-multi img {
	display: inline-block;
	zoom: 1;
}

.fig-vert-multi-cap figcaption {
	display: inline-block;
	padding: 0 0 0 20px;
	vertical-align: top;
	width: 48%;
}

.fig-vert-right figcaption {
	float: right;
}

.inset-content {
	display: inline-block;
	max-width: 210px;
	text-indent: 0;
}

div.inset-content {
	display: block;
}

.fig-inset-content {
	margin: 0 0 0 -90%;
	max-width: 190%;
}

.fig-inset-content-right {
	margin: 0 -90% 0 0;
}
/* For figures without a caption */

.fig-full img {
	max-width: 100%;
}
/* Figure List Styles =================================================*/

.fig-list {
	counter-reset: list-counter;
	font-size: 13px;
	margin: 0;
	list-style: none;
	padding: 0;
}
/* Again this isn't ideal, but it's the easiest way to do this currently */

.fig-list[start="2"] {
	counter-reset: list-counter 1;
}

.fig-list[start="3"] {
	counter-reset: list-counter 2;
}

.fig-list[start="4"] {
	counter-reset: list-counter 3;
}

.fig-list[start="5"] {
	counter-reset: list-counter 4;
}

.fig-list[start="6"] {
	counter-reset: list-counter 5;
}

.fig-list[start="7"] {
	counter-reset: list-counter 6;
}

.fig-list[start="8"] {
	counter-reset: list-counter 7;
}

.fig-list[start="9"] {
	counter-reset: list-counter 8;
}

.fig-list[start="11"] {
	counter-reset: list-counter 10;
}

.fig-list[start="13"] {
	counter-reset: list-counter 12;
}

.fig-list[start="15"] {
	counter-reset: list-counter 14;
}

.fig-list-horizontal li {
	float: left;
	width: 50%;
}

.fig-list-horizontal-multi li {
	float: left;
	width: auto;
}

.fig-list-vertical li {
	width: 100%;
}

.fig-list-vertical .fig-horiz-right img {
	max-width: 47%;
}

.fig-list-vertical .fig-horiz-right figcaption {
	max-width: 52%;
}

.fig-list-vertical .fig-horiz-right figcaption {
	padding-left: 26px;
}

li.fig-item-wide {
	width: 100%;
}

.fig-list li figcaption:before {
	color: #2181c4;
	content: counter(list-counter);
	counter-increment: list-counter;
	font-weight: bold;
	margin-left: -18px;
	top: 0;
	display: inline-block;
	width: 18px;
	/* hs changed this from 14 px*/
	
	zoom: 1;
	position: absolute;
}

.fig-list li figcaption p:first-child {
	display: inline-block;
	vertical-align: top;
}

.fig-list-empty li figcaption:before {
	display: none;
}
/* Table Styles =======================================================*/

table th {
	font-style: italic;
	font-weight: normal;
	text-align: left;
}

table th,
table td {
	padding: 1px 12px 1px 1px;
}

.table-white {
	background: #fff;
	margin: 0 0 6px 0;
}

.table-white td {
	line-height: 13px;
	padding: 0 5px;
}

.table-white tr:first-child td {
	padding-top: 5px;
}

.table-white tr:last-child td {
	padding-bottom: 3px;
}

.table-white td:first-child {
	padding-left: 8px;
}

.table-definitions th {
	font-style: italic;
	padding: 1px 12px;
}

.table-definitions th,
.table-definitions td {
	vertical-align: middle;
}
/* Layout Styles ======================================================*/

body {
	background: #d8d8d8;
}

.pages-container {
	background: url('../img/header_bg.png') repeat-x scroll left top #ffffff;
	border: 2px solid #D8D8D8;
	border-top: 0;
	height: 674px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	width: 1022px;
}

.global-header {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 5;
}

.global-header-inner {
	padding: 7px 18px 3px 18px;
	position: relative;
}

.nav-toggle {
	background: transparent;
	border: 0;
	color: #222;
	font-family: arial;
	font-size: 13px;
	height: 20px;
	line-height: 20px;
	margin: 0;
	padding: 0;
}

.nav-toggle-hide {
	display: none;
}

.activity-nav-toggle {
	float: right;
	margin: 0 18px 0 0;
}

.view-toggle {
	display: none;
	margin: 0 0 0 20px;
	left: 50%;
	margin: 0 0 0 -10px;
	position: absolute;
	top: 7px;
}
/* Menu Icon ==========================================================*/

.nav-icon {
	cursor: pointer;
	display: inline-block;
	height: 20px;
	margin: 0 3px 0 0;
	position: relative;
	vertical-align: middle;
	width: 20px;
	zoom: 1;
}

.resources-nav-icon {
	margin: 0 0 0 3px;
}

.main-nav-icon {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

.main-nav-icon span {
	background: #222;
	border-radius: 3px;
	display: inline-block;
	height: 3px;
	left: 0;
	opacity: 1;
	position: absolute;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
	width: 100%;
	zoom: 1;
}
/* Icon 3 */

.main-nav-icon span:nth-child(1) {
	top: 0;
}

.main-nav-icon span:nth-child(2),
.main-nav-icon span:nth-child(3) {
	top: 7px;
}

.main-nav-icon span:nth-child(4) {
	top: 14px;
}

.nav-toggle-open .main-nav-icon span:nth-child(1) {
	left: 50%;
	top: 18px;
	width: 0%;
}

.nav-toggle-open .main-nav-icon span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-toggle-open .main-nav-icon span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-toggle-open .main-nav-icon span:nth-child(4) {
	left: 50%;
	top: 18px;
	width: 0%;
}

.resources-icon {}

.global-nav-container {
	background: #2181c4;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	left: -266px;
	max-height: 614px;
	opacity: 0;
	overflow-y: scroll;
	position: absolute;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	top: 34px;
	width: 266px;
	z-index: 100;
}

.global-nav-container.nav-direction-ltr {
	left: -225px;
	width: 225px;
}
/* 
            If the nav is meant to come in from the right, then position it accordingly
            (rtl = right to left)
        */

.global-nav-container.nav-direction-rtl {
	border-left: 1px solid #fff;
	border-right: 0;
	left: auto;
	right: -280px;
	width: 280px;
}

.global-nav-container.global-nav-show {
	left: 0;
	opacity: 1.0;
}
/* Code for showing the nav if it comes in from the right as oppposed to the left */

.global-nav-container.nav-direction-rtl.global-nav-show {
	left: auto;
	right: 0;
}

.global-nav,
.global-nav-sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.global-nav-sub {
	border-left: 1px solid #185e8f;
	max-height: 0;
	margin: 0 0 0 18px;
	overflow: hidden;
	position: relative;
	top: -120px;
	-webkit-transition: all 0.38s ease;
	transition: all 0.38s ease;
	z-index: 1;
}

.nav-link-expanded > .global-nav-sub {
	max-height: 1940px;
	top: 0;
}

.global-nav li {
	overflow: hidden;
}

.global-nav a {
	background: #2181c4;
	border-top: 1px solid #185e8f;
	color: #fff;
	display: block;
	font-size: 15px;
	padding: 8px 14px;
	position: relative;
	text-decoration: none;
	-webkit-transition: all 0.38s ease;
	transition: all 0.38s ease;
	z-index: 2;
}

.global-nav li:first-child > a {
	border-top: 0;
}

.global-nav > li:last-child > a {
	border-bottom: 1px solid #185e8f;
}

.global-nav-sub a {
	padding: 7px 15px;
}

.nav-link-expanded > a,
.global-nav .nav-link-selected {
	background: #185e8f;
	padding: 8px 23px;
}
/* The top padding is to accomodate the header height (the header is absolutely positioned) */

.pages-container-inner {
	height: 100%;
	padding: 35px 0 0 0;
}

.loading-message {
	position: absolute;
	left: 0;
	text-align: center;
	top: 42%;
	z-index: 1;
}

.loading-left {
	left: 0;
	right: 0;
}

.loading-right {
	left: 0;
	right: 0;
}

.page-buttons-container {
	position: absolute;
	right: 0;
	top: -28px;
}

.page-container {
	background: #fff;
	height: 100%;
	line-height: 14px;
	padding: 7px 13px 27px 13px;
	position: relative;
	width: 509px;
	z-index: 4;
}

.page-container .global-nav-container {
	top: 28px;
}

.page-pre-footer {
	height: 100%;
}

.page-pre-footer footer {
	display: none;
}

.page-inner {
	height: 100%;
}

.page-odd {
	border-left: 1px solid #D8D8D8;
	float: right;
}

.page-even {
	border-right: 1px solid #D8D8D8;
	float: left;
}

.page-odd .prev-page,
.page-even .next-page {
	display: none;
}

.content-aside {
	float: left;
	line-height: inherit;
	position: relative;
	width: 336px;
}

.content-aside-padded {
	padding: 0 18px 0 0;
}

.line-num {
	font-style: italic;
	position: absolute;
	right: 0;
}

.sidebar {
	float: right;
	line-height: inherit;
	width: 136px;
}

.page-footer {
	border-top: 1px solid #2181c4;
	bottom: 0;
	left: 0;
	line-height: 14px;
	padding: 5px 16px;
	position: absolute;
	right: 0;
}

.prev-page,
.next-page {
	display: block;
}

.prev-page {
	float: left;
}

.next-page {
	float: right;
}

.page-info {
	font-weight: bold;
	text-align: center;
}

.page-half {
	display: inline-block;
	width: 47%;
	zoom: 1;
}
/* Stage Intro Styles =================================================*/

.stage-intro-container .page-container {
	background: #000;
}

.stage-intro-container .page-footer {
	color: #fff;
}

.stage-intro-container .page-footer a {
	color: #fff;
}

.pages-container.book-first-page .page-footer .prev-page,
.pages-container.book-last-page .page-footer .next-page {
	visibility: hidden;
}

.stage-title {
	padding: 44px 0 0 0;
	text-align: right;
}

.stage-title h1 {
	font-family: 'slayerregular';
	font-size: 42px;
}

.stage-title h2 {
	color: #2281c4;
	font-size: 24px;
	margin: 8px 0;
}
/* Stage Summary Styles ==============================================*/

.stage-summary-container .page-container {
	background: #2281c4;
}

.stage-summary-container figcaption {
	F color: #fff;
}

.stage-summary-container .page-footer {
	border-top-color: #fff;
	color: #fff;
}

.stage-summary-container .page-footer a {
	color: #fff;
}

.stage-summary-container .page-footer .highlight {
	color: #fff;
}
/* Dictionary Styles =================================================*/

.dictionary {
	background: #e9e9e1;
}

.dictionary header {
	background: #989576;
	color: #fff;
	font-size: 18px;
	padding: 4px 20px;
}

.dictionary header .highlight {
	color: #a8c0e4;
	font-style: italic;
}

.dictionary header h1 {
	color: #fff;
	font-size: inherit;
	font-weight: normal;
}

.dictionary h1 {
	margin: 0;
}

.dictionary-content {
	padding: 10px 20px 10px 6px;
}

.dictionary-content h1 {
	font-size: 16px;
}

.dictionary-content p {
	margin: 0 0 9px 0;
	text-indent: 0;
}

.dictionary-content .highlight {
	font-weight: bold;
}

.dictionary-indent p {
	text-indent: 14px;
}

.dictionary-content li .list:last-child {
	margin-bottom: 10px;
}
/* If the list is the last element of the last list item in a dictionary, then remove the bottom margin as it makes it look like the dictionary has a lot of bottom padding */

.dictionary-content li:last-child .list:last-child {
	margin-bottom: 0;
}
/* Orange Header*/

.word-pattern header {
	background: #DDA373;
}

@media (min-height: 680px) and (min-width: 520px) {
	.pages-container {
		left: 50%;
		margin: -336px 0 0 -509px;
		position: absolute;
		top: 50%;
	}
	.pages-container-single {
		margin-left: -255px;
	}
}

@media (min-height: 680px) and (max-width: 1018px) and (min-width: 520px) {
	.pages-container {
		left: 50%;
		margin: -336px 0 0 -255px;
	}
}

@media (max-width: 1022px) {
	.pages-container {
		width: 511px;
	}
	/*.page-odd { display: none; }*/
	
	.view-toggle {
		display: block;
	}
	.page-odd {
		border-left: 0;
		float: none;
	}
	.page-even {
		border-right: 0;
		float: none;
	}
	.global-nav-container {
		left: -42%;
		width: 42%;
	}
	.page-container {
		display: none;
	}
	.page-current {
		display: block;
	}
	.page-odd .prev-page,
	.page-even .next-page {
		display: block;
	}
	.pages-container-mobile {
		left: 50%;
		margin: -336px 0 0 -255px;
		position: absolute;
		top: 50%;
		width: 511px;
	}
	.pages-container-mobile .page-odd {
		border-left: 0;
		float: none;
	}
	.pages-container-mobile .page-even {
		border-right: 0;
		float: none;
	}
	.pages-container-mobile .global-nav-show {
		left: 0;
		opacity: 1;
	}
	.pages-container-mobile .global-nav-show {
		left: 0;
		opacity: 1;
	}
	.pages-container-mobile .page-container {
		display: none;
	}
	.pages-container-mobile .page-current {
		display: block;
	}
	.pages-container-mobile .page-odd .prev-page,
	.pages-container-mobile .page-even .next-page {
		display: block;
	}
	.pages-container-full.pages-container {
		left: 0;
		margin: 0 0 0 0;
		position: static;
		top: 0;
		width: 1022px;
	}
	.pages-container-full .page-container {
		display: block;
		float: left;
	}
	.pages-container-full .page-odd {
		border-left: 1px solid #D8D8D8;
		float: right;
	}
	.pages-container-full .page-even .next-page {
		display: none;
	}
	.pages-container-full .page-odd .prev-page {
		display: none;
	}
}

@media (min-height: 680px) and (max-width: 1018px) {
	.pages-container-full.pages-container {
		left: 0;
		margin: -336px 0 0 0;
		position: absolute;
		top: 50%;
	}
}

@media (max-width: 540px) {
	.list li {
		padding-left: 23px;
	}
	.list li:before {
		left: -3px;
	}
	.pages-container-mobile {
		left: 1%;
		margin-left: 0;
	}
}

@media (max-height: 680px) {
	.pages-container-mobile {
		margin-top: 0;
		top: 0;
	}
}
/* Styles for pages that are the first/last page of a stage */

.pages-container-single {
	width: 511px;
}

.pages-container-single .page-container {
	display: none;
}

.pages-container-single .page-current {
	display: block;
}

.pages-container-single .page-odd .prev-page,
.pages-container-single .page-even .next-page {
	display: block;
}