/*
This CSS document contains all of the course standard styles for the courses of TSD.

The styles in this document are organized by section as found below in the Table of Contents and in alphabetical order based on the first selector in each rule.

Table of Contents
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
| I. Browser Resets							|
| 		A. General and Misc					|
| 		B. Buttons/Inputs					|
| II. Page Structure Classes					|
| 		A. General Page Classes				|
| 		B. Index Page Classes				|
| 		C. Landing Page Classes				|
| 		D. Question Page Classes				|
|		E. Video Layout Classes				|
| III. Typography							|
| 		A. General Text Styles				|
| 		B. Font Alignment Classes			|
| 		C. Link Styles						|
| 		D. List Styles						|
| IV. Layout/Design Modifiers					|
| 		A. Layout Classes					|
| 		B. Design Classes					|
| 		C. Helper Classes					|
| V. Grid Systems							|
| 		A. Rows and Basic Misc				|
| 		B. 12 Column Grid  					|
|		C. 12 Column Offsets 				|
| 		D. 8 Column Grid Override			|
|		E. 8 Column Offsets 				|
| 		F. 10 Column Grid Override			|
|		G. 10 Column Offsets 				|
| VI. Activity Specific Classes				|
|										|
| VII. MISC CLASSES							|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-------------------------------------------------*/


/*===========================================================
* I. Browser Resets
* 	This is the area for any default browser resets.  These
* 	standardize the html of the page before any other styles
*	are applied.
*===========================================================*/

/*--------------------------------------*/
/* A. General and Misc 				*/
/*--------------------------------------*/
html {
    box-sizing: border-box;
    *behavior: url(../scripts/boxsizing.htc);
}

*,
*:before,
*:after {
    box-sizing: inherit;
    *behavior: url(../scripts/boxsizing.htc);
}

a {
    background: 0 0;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

b,
strong {
    font-weight: 700;
}

body {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.ie8 body {
    overflow-y: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

dfn {
    font-style: italic;
}

figure {
    margin: 1em 40px;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #dddddd;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

iframe {
    border: 0;
}

img {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    border: 0;
    display: block;
}

[hidden],
template {
    display: none;
}

mark {
    background: #ff0;
    color: #000;
}

optgroup {
    font-weight: 700;
}

small {
    font-size: 80%;
}

svg:not(:root) {
    overflow: hidden;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/*--------------------------------------*/
/* B. Buttons/Inputs 				*/
/*--------------------------------------*/

button {
    overflow: visible;
    padding: 0;
    border: 0;
    line-height: normal;
}

button,
html input[type=button],
input[type=reset],
input[type=submit],
input[type=text] {
    -webkit-appearance: button;
    cursor: pointer;
}

.page-dropdown label {
    width: 0;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button,
select {
    text-transform: none;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-ms-clear {
    display: none;
}

/* Do not group these rules */
.page-dropdown input[type="text"].dd-norm::-webkit-input-placeholder {
    color: #999999 !important;
}

.page-dropdown input[type="text"].dd-norm::-moz-placeholder {
    color: #999999 !important;
}

.page-dropdown input[type="text"].dd-norm:-ms-input-placeholder {
    color: #999999 !important;
}

.page-dropdown input[type="text"].dd-norm:-moz-placeholder {
    color: #999999 !important;
}

textarea {
    overflow: auto;
}

/*===========================================================
* II. Page Structure Classes
* 	This section is for classes used in the layout of the
*	pages in the course.  Generally, these consist of the
*	classes that make up the basics of the page and not ones
*	that the programmer will be using to modify the page.
*===========================================================*/

/*--------------------------------------*/
/* A. General Page Classes 			*/
/*--------------------------------------*/
body,
html {
    height: 100%;
}

body {
    color: #545454;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    cursor: default;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* Used on each page. */
.contentWindow {
    height: auto;
    position: relative;
    top: 0;
    width: 100%;
    display: inline-block;
}

/* Used on the iFrame only (Dynamically added)*/
.contentWindowSize {
    width: 100%;
    min-width: 790px;
    -webkit-overflow-scrolling: touch;
}

.header {
    position: relative;
    width: 100%;
}

html {
    overflow: hidden;
    box-sizing: border-box;
}

.ie7 html {
    box-sizing: border-box;
    behavior: url(../scripts/boxsizing.htc);
}

.main-content {
    position: relative;
    top: 0;
    height: 97%;
    width: 100%;
    max-height: 97%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background-image: url(../images/1x1trans.gif);
    background-repeat: repeat;
}

.header~.main-content {
    max-height: 89%;
    clear: both;
}

.page_sizer {
    vertical-align: top;
    position: relative;
}

/*--------------------------------------*/
/* B. Index Page Classes 			*/
/*--------------------------------------*/

/*--------------------------------------*/
/* C. Landing Page Classes 			*/
/*--------------------------------------*/

/*--------------------------------------*/
/* D. Question Page Classes 			*/
/*--------------------------------------*/

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

legend {
    border: 0;
    padding: 0;
}

.is8 legend {
    position: relative;
    left: -6px;
}


/*===========================================================
* III. Typography
* 	This section is for any classes related to text in the
*	course.
*===========================================================*/

/*--------------------------------------*/
/* A. General Text Styles			*/
/*--------------------------------------*/
b,
strong {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.125em;
    line-height: 1em;
}

h2 {
    font-size: 0.875em;
    margin-bottom: .5em;
}

h3 {
    color: #0068B3;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1.5em 0;
    font-size: 1em;
}

p {
    margin: 0 0 .5em 0;
}

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

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

/*--------------------------------------*/
/* B. Font Alignment Classes			*/
/*--------------------------------------*/
.txt-center {
    text-align: center !important;
}

.txt-justify {
    text-align: justify !important;
}

.txt-left {
    text-align: left !important;
}

.txt-right {
    text-align: right !important;
}

/*--------------------------------------*/
/* C. Link Styles					*/
/*--------------------------------------*/
a {
    background: transparent;
    color: #545454;
}

a:active,
a:hover {
    outline: 0;
}

a:hover {
    text-decoration: none;
}

/*--------------------------------------*/
/* D. List Styles					*/
/*--------------------------------------*/
li {
    margin-bottom: .5em;
}

ul,
ol {
    padding-left: 2.5em;
    margin-top: 0;
    margin-bottom: .5em;
}

/* Clear margins for sublists */
ul>li>ul,
ul>li>ol,
ol>li>ol,
ol>li>ul {
    margin: 0;
}

/*===========================================================
* IV. Layout/Design Modifiers
* 	This section is for any classes used in the layout of
*	the various pages in the course with the exception of
*	the grid systems.
*===========================================================*/

/*--------------------------------------*/
/* A. Layout Classes 				*/
/*--------------------------------------*/

/* Use to apply absolute positioning.  -full will retain the parent's height for positioning elements within  */
.abs,
.abs-full,
.frame-content {
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    width: auto;
}

.abs-full,
.frame-content {
    height: 100%;
    width: 100%;
}

/* Use to apply relative positioning.  -full will retain the parent's height for positioning elements within  */
.rel,
.rel-full {
    height: auto;
    position: relative !important;
    width: auto;
    overflow: hidden;
}

img.rel,
img.rel-full {
    width: 100% !important;
    overflow: hidden;
}

.rel-full {
    height: 100%;
    width: 100%;
}

.frame-content button {
    position: relative;
    display: block;
    width: 100%;
}

/*--------------------------------------*/
/* B. Design Classes 				*/
/*--------------------------------------*/

/*--------------------------------------*/
/* C. Helper Classes 				*/
/*--------------------------------------*/

/* Change the font-family, color, and line-height for this course
*  To change the default font-size set the font-size in body based on em's
*  then edit the following styles:
*  	fontSizeSmall
*  	fontSizeSmaller
*  	fontSizeSmallest
*  	fontSizeLarge
*  	fontSizeLarger
*  	fontSizeLargest
*/
.final {
    margin-bottom: 0 !important;
}

.fontSizeSmall {
    font-size: 0.875em !important;
    line-height: 1.2em !important;
}

.fontSizeSmaller {
    font-size: 0.75em !important;
    line-height: 1.2em !important;
}

.fontSizeSmallest {
    font-size: 0.625em !important;
    line-height: 1.2em !important;
}

.fontSizeLarge {
    font-size: 1.125em !important;
    line-height: 1.2em !important;
}

.fontSizeLarger {
    font-size: 1.25em !important;
    line-height: 1.2em !important;
}

.fontSizeLargest {
    font-size: 1.375em !important;
    line-height: 1.2em !important;
}

.fpo:after {
    position: absolute;
    content: "FPO";
    color: red;
    top: 40%;
    width: 100%;
    font-size: 5em;
    text-align: center;
}

.h-100 {
    height: 100% !important;
}

.z-1 {
    z-index: 1 !important;
}

.z-2 {
    z-index: 2 !important;
}

.z-3 {
    z-index: 3 !important;
}

.z-4 {
    z-index: 4 !important;
}

.z-5 {
    z-index: 5 !important;
}

/*Position Item to Top of Relative Container*/
.top {
    position: absolute;
    top: 2% !important;
    bottom: auto !important
}

/*Position Item to Bottom of Relative Container*/
.bottom {
    position: absolute;
    bottom: 0 !important;
    top: auto !important;
}

/* Classes for overlaying text on various background colors.  Note: Achieve this with a 1x1trans image with the correct opacity */
.text-overlay-white {
    position: absolute;
    width: 90%;
    left: 5%;
    background-image: url(../images/1x1trans-white.png);
    padding: .5em;
}

.text-overlay-white.bold,
.text-overlay-white .bold {
    font-weight: bold;
    color: #000000;
}

.text-overlay-white>p {
    color: #000000;
}

.bold {
    font-weight: bold;
}

/*===========================================================
* V. Grid Systems
* 	This section contains all of the classes for the grid
*	systems used in the layout of pages.
*===========================================================*/

/*--------------------------------------*/
/* A. Rows and Basic Misc			*/
/*--------------------------------------*/
/* Setup row spacing */
.row {
    position: relative;
    width: 100%;
    margin-top: 1%;
}

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

.row:after {
    clear: both;
}

[class*='col-'].centered {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

[class*='col-'] {
    position: relative;
    min-height: 1px;
    height: auto;
    float: left;
    padding: 0 .25%;
}

/*--------------------------------------*/
/* B. 12 Column Grid 				*/
/*--------------------------------------*/
.col-12,
.grid-8 .grid-12.col-12,
.grid-10 .grid-12.col-12 {
    width: 100%;
}

.ie7 .col-12,
.ie7 .grid-8 .grid-12.col-12,
.ie7 .grid-10 .grid-12.col-12 {
    width: 98%;
}

.col-11,
.grid-8 .grid-12.col-11,
.grid-10 .grid-12.col-11 {
    width: 91.66666667%;
}

.ie7 .col-11,
.ie7 .grid-8 .grid-12.col-11,
.ie7 .grid-10 .grid-12.col-11 {
    width: 90.66666667%;
}

.col-10,
.grid-8 .grid-12.col-10,
.grid-10 .grid-12.col-10 {
    width: 83.33333333%;
}

.ie7 .col-10,
.ie7 .grid-8 .grid-12.col-10,
.ie7 .grid-10 .grid-12.col-10 {
    width: 82.33333333%;
}

.col-9,
.grid-8 .grid-12.col-9,
.grid-10 .grid-12.col-9 {
    width: 75%;
}

.ie7 .col-9,
.ie7 .grid-8 .grid-12.col-9,
.ie7 .grid-10 .grid-12.col-9 {
    width: 73.5%;
}

.col-8,
.grid-8 .grid-12.col-8,
.grid-10 .grid-12.col-8 {
    width: 66.66666667%;
}

.ie7 .col-8,
.ie7 .grid-8 .grid-12.col-8,
.ie7 .grid-10 .grid-12.col-8 {
    width: 65%;
}

.col-7,
.grid-8 .grid-12.col-7,
.grid-10 .grid-12.col-7 {
    width: 58.33333333%;
}

.ie7 .col-7,
.ie7 .grid-8 .grid-12.col-7,
.ie7 .grid-10 .grid-12.col-7 {
    width: 56%;
}

.col-6,
.grid-8 .grid-12.col-6,
.grid-10 .grid-12.col-6 {
    width: 50%;
}

.ie7 .col-6,
.ie7 .grid-8 .grid-12.col-6,
.ie7 .grid-10 .grid-12.col-6 {
    width: 47%;
}

.col-5,
.grid-8 .grid-12.col-5,
.grid-10 .grid-12.col-5 {
    width: 41.66666667%;
}

.ie7 .col-5,
.ie7 .grid-8 .grid-12.col-5,
.ie7 .grid-10 .grid-12.col-5 {
    width: 40.66666667%;
}

.col-4,
.grid-8 .grid-12.col-4,
.grid-10 .grid-12.col-4 {
    width: 33.33333333%;
}

.ie7 .col-4,
.ie7 .grid-8 .grid-12.col-4,
.ie7 .grid-10 .grid-12.col-4 {
    width: 31%;
}

.col-3,
.grid-8 .grid-12.col-3,
.grid-10 .grid-12.col-3 {
    width: 25%;
}

.ie7 .col-3,
.ie7 .grid-8 .grid-12.col-3,
.ie7 .grid-10 .grid-12.col-3 {
    width: 24%;
}

.col-2,
.grid-8 .grid-12.col-2,
.grid-10 .grid-12.col-2 {
    width: 16.66666667%;
}

.ie7 .col-2,
.ie7 .grid-8 .grid-12.col-2,
.ie7 .grid-10 .grid-12.col-2 {
    width: 15.66666667%;
}

.col-1,
.grid-12.col-1,
.grid-8 .grid-12.col-1,
.grid-10 .grid-12.col-1 {
    width: 8.33333333%;
}

.ie7 .col-1,
.ie7 .grid-12.col-1,
.ie7 .grid-8 .grid-12.col-1,
.ie7 .grid-10 .grid-12.col-1 {
    width: 7.33333333%;
}

/*--------------------------------------*/
/* C. 12 Column Offsets 		 		*/
/*--------------------------------------*/
.col-offset-12 {
    margin-left: 100%;
}

.col-offset-11 {
    margin-left: 91.66666667%;
}

.col-offset-10 {
    margin-left: 83.33333333%;
}

.col-offset-9 {
    margin-left: 75%;
}

.col-offset-8 {
    margin-left: 66.66666667%;
}

.col-offset-7 {
    margin-left: 58.33333333%;
}

.col-offset-6 {
    margin-left: 50%;
}

.col-offset-5 {
    margin-left: 41.66666667%;
}

.col-offset-4 {
    margin-left: 33.33333333%;
}

.col-offset-3 {
    margin-left: 25%;
}

.col-offset-2 {
    margin-left: 16.66666667%;
}

.col-offset-1 {
    margin-left: 8.33333333%;
}

.col-offset-0 {
    margin-left: 0;
}

/*--------------------------------------*/
/* D. 8 Column Grid Override 			*/
/*--------------------------------------*/

.grid-8 .col-8 {
    width: 100%;
}

.grid-8 .col-7 {
    width: 87.5%;
}

.grid-8 .col-6 {
    width: 75%;
}

.grid-8 .col-5 {
    width: 62.5%;
}

.grid-8 .col-4 {
    width: 50%;
}

.grid-8 .col-3 {
    width: 37.5%;
}

.grid-8 .col-2 {
    width: 25%;
}

.grid-8 .col-1 {
    width: 12.5%;
}

.grid-8 .col-offset-1 {
    margin-left: 12.5%;
}

/*--------------------------------------*/
/* D. 8 Column Grid Override IE7			*/
/*--------------------------------------*/

.ie7 .grid-8 .col-8 {
    width: 99%;
}

.ie7 .grid-8 .col-7 {
    width: 86.5%;
}

.ie7 .grid-8 .col-6 {
    width: 74%;
}

.ie7 .grid-8 .col-5 {
    width: 61.5%;
}

.ie7 .grid-8 .col-4 {
    width: 49%;
}

.ie7 .grid-8 .col-3 {
    width: 36.5%;
}

.ie7 .grid-8 .col-2 {
    width: 24%;
}

.ie7 .grid-8 .col-1 {
    width: 11.5%;
}

.ie7 .grid-8 .col-offset-1 {
    margin-left: 11.5%;
}

/*--------------------------------------*/
/* E. 8 Column Offsets 		 		*/
/*--------------------------------------*/

/*--------------------------------------*/
/* F. 10 Column Grid Override 		*/
/*--------------------------------------*/
.grid-10 .col-10 {
    width: 100%;
}

.grid-10 .col-9 {
    width: 90%;
}

.grid-10 .col-8 {
    width: 80%;
}

.grid-10 .col-7 {
    width: 70%;
}

.grid-10 .col-6 {
    width: 60%;
}

.grid-10 .col-5 {
    width: 50%;
}

.grid-10 .col-4 {
    width: 40%;
}

.grid-10 .col-3 {
    width: 30%;
}

.grid-10 .col-2 {
    width: 20%;
}

.ie7 .grid-10 .col-2,
.ie8 .grid-10 .col-2 {
    width: 19%;
}

.grid-10 .col-1 {
    width: 10%;
}

/*--------------------------------------*/
/* G. 10 Column Offsets 		 		*/
/*--------------------------------------*/


/*===========================================================
* VI. Activity Specific Classes
* 	This section is for classes that are activity related.  Most
*    of these classes are nested to specifically target elements
*	within the activity.
*
*	NOTE:  This section was created: 2/22/2017 by Jeremy
*===========================================================*/
/*--------------------------------------
* A. Basic score meter classes 
*	 Used by tsd_scoreMeter widget 
--------------------------------------*/
.tsd_scoreMeter {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
}

.tsd_scoreMeter-empty {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

.tsd_scoreMeter-up {
    bottom: 0;
    left: 0;
    height: 0%;
    width: 100%;
}

.tsd_scoreMeter-down {
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
}

.tsd_scoreMeter-left {
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
}

.tsd_scoreMeter-right {
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
}

.tsd_scoreMeter-fill {
    position: absolute;
    z-index: 20;
    overflow: hidden;
}

.tsd_scoreMeter-left>img,
.tsd_scoreMeter-right>img {
    width: auto !important;
    height: 100% !important;
}

/*--------------------------------------
* B. Basic timer classes 
*	Used by tsd_timer widget 
* 	Images require more width than text
--------------------------------------*/

.timer {
    position: relative !important;
    background-color: #000000;
    text-align: center;
    width: 100%;
    padding: 0em;
    font-size: 2.5em;
    line-height: 1em;
    color: #ffffff;
}

.timer.timerText {
    width: 10%;
    top: 20%
}

.timer>div {
    float: left;
    height: 100%;
    /* Added for text */
    display: table;
}

.timer div:nth-child(odd) {
    width: 43.95%;
}

.timer div:nth-child(even) {
    width: 10.3%;
}

.timer p {
    display: table-cell;
    vertical-align: middle;
    margin: 0 0 0 0;
    float: left;
    font-size: 2.25em;
    line-height: 1em;
}

.timer .js-sep p {
    text-align: center;
    margin-top: -0.05em;
}

.timer div img {
    height: auto;
    width: 50%;
    float: left;
}

.timer div:nth-child(even) img {
    width: 100% !important;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

/*===========================================================
* VII. MISC CLASSES
* 	This section is for classes that have no place anywhere
*	else in this CSS document.  This section should not
*	exist for long as any classes placed here should have
*	a permanant home found for them before long.
*
*	NOTE:  This section was created: 9/29/2015 by Jeremy
*===========================================================*/













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

.cf:after,
.row:after {
    clear: both;
}

.cm {
    margin: 0 !important;
}

.cm-top {
    margin-top: 0 !important;
}

.cm-right {
    margin-right: 0 !important;
}

.cm-bottom {
    margin-bottom: 0 !important;
}

.cm-left {
    margin-left: 0 !important;
}

.cp {
    padding: 0 !important;
}

.cp-top {
    padding-top: 0 !important;
}

.cp-right {
    padding-right: 0 !important;
}

.cp-bottom {
    padding-bottom: 0 !important;
}

.cp-left {
    padding-left: 0 !important;
}

.v-center {
    /* IE8+ */
    position: absolute !important;
    left: 0%;
    top: 50%;
    width: 100%;
    -webkit-transform: translate(-0%, -50%);
    -o-transform: translate(-0%, -50%);
    -ms-transform: translate(-0%, -50%);
    transform: translate(-0%, -50%);
}

/* Helper Classes */
.fl-left {
    float: left;
}

.fl-right {
    float: right;
}

.hidden,
.hideIt {
    display: none;
}

.noWrap {
    white-space: nowrap;
}

.shown {
    display: inherit;
}

.showIt {
    display: block;
}

.vis-show {
    visibility: visible !important;
}

.vis-hide {
    visibility: hidden !important;
}

.desktop {
    display: inline-block;
}

.mobile {
    display: none;
}

.center {
    display: block;
    margin: auto;
}

.screen-reader-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Rounded Corners */
.brd-circle {
    border-radius: 50%;
}

/* All Four Rounded Corners */
.brd-round {
    -moz-border-radius: .4em .4em .4em .4em;
    -webkit-border-radius: .4em .4em .4em .4em;
    border-radius: .4em .4em .4em .4em;
    z-index: 1000;
}

.brd-left {
    -webkit-border-top-left-radius: .4em;
    -webkit-border-bottom-left-radius: .4em;
    -moz-border-radius-topleft: .4em;
    -moz-border-radius-bottomleft: .4em;
    border-top-left-radius: .4em;
    border-bottom-left-radius: .4em;
}

.brd-right {
    -webkit-border-top-right-radius: .4em;
    -webkit-border-bottom-right-radius: .4em;
    -moz-border-radius-topright: .4em;
    -moz-border-radius-bottomright: .4em;
    border-top-right-radius: .4em;
    border-bottom-right-radius: .4em;
}

.brd-bottom {
    -webkit-border-bottom-left-radius: .8em;
    -moz-border-radius-bottomleft: .8em;
    border-bottom-left-radius: .8em;
    -webkit-border-bottom-right-radius: .8em;
    -moz-border-radius-bottomright: .8em;
    border-bottom-right-radius: .8em;
}

/* Default Drop Shadow */
.shadow {
    -moz-box-shadow: 1px 1px .2em #0B0B0B;
    -webkit-box-shadow: 1px 1px .2em #0B0B0B;
    box-shadow: 1px 1px .2em #0B0B0B;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=1, Color='#0B0B0B')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=1, Color='#0B0B0B');
}

/* Text Shadow */
.txt-shadow {
    text-shadow: 1px 1px 1px #545454;
}

/* Page Loading Styles */
.page-loading {
    position: absolute;
    color: #0068b3;
    top: 30%;
    text-align: center;
    z-index: 1001;
    background: #FFF;
    max-width: 10em;
    left: 44%;
    padding: 1.25em 2.5em;
    border: 1px solid #DDD;
    height: auto !important;
    font-size: 1em;
}

.page-loading img {
    display: block;
    margin: 0 auto 1em;
}



/* Structure Styles */
#courseContainer,
#startCourse {
    height: 100%;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*fix for IE7*/
     !height: 100%;
}

#pageContainer {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    /* Hides bg-index */
}

#pageContainer iFrame {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*padding-bottom: 40px;*/
}

/* Optimal window Size: Used by localstart.htm to open a window properly sized.  May be used to attempt to resize window. */
.courseWindowSize {
    width: 1000px;
    height: 600px;
    overflow: hidden;
}

/*******************
* Gutters for the course window and content
*******************/
#courseContainer {
    position: relative;
    width: 100%;
    overflow-x: auto;
}

.gutter {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/*******************
* Navbar
* To keep buttons from sizing and wrapping use px units
*******************/
/* Main Nav Menu - Fixed */
.navbar {
    background: rgba(204, 204, 204, 1);
    width: inherit;
    min-width: 790px;
    z-index: 1100;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                             supported by Chrome and Opera */
}

.fixed-bottom {
    position: absolute;
    bottom: 0px;
}

.navbar nav {
    /*Same width as .wrapper*/
    max-width: 98%;
    margin: 0 auto;
    position: relative;
}

nav span,
nav button {
    display: inline-block;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 6px 6px;
    /*margin-top: 5px;*/
    margin-top: 1px;
    /* For SVG */
    /*zoom: 1;*/
    position: relative;
}

nav button {
    border: none;
    background-color: transparent;
    color: #ffffff;
}

nav button img {
    width: 30px;
    height: 30px;
}

nav .row {
    margin-top: 0;
}

nav span:hover,
nav button:hover {
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

nav span[class*='-dis'],
nav button[class*='-dis'] {
    opacity: 0.3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    cursor: default;
}

nav span[class*='-ovr'],
nav button[class*='-ovr'] {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    color: #FEC345;
}

nav span[class*='-norm'],
nav button[class*='-norm'] {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    cursor: pointer;
}

nav span span {
    padding: 0;
}

/*nav span:hover span { opacity: 1; }*/

nav .fa {
    font-size: 15px;
}

nav .grid+.grid {
    margin: 0px
}

nav .row .row,
nav .row+.row {
    margin-top: 0;
}

.navCol1 {
    min-width: 150px;
    padding-right: 10px;
}

.navCol2 {
    min-width: 259px;
    padding-right: 10px;
}

.navCol3 {
    min-width: 176px;
    padding-right: 10px;
}

.navCol4 {
    min-width: 158px;
    padding-right: 0px;
}

/* Help/Nav Arrow */
.nav-arrow {
    color: #FF0000;
    text-shadow: 0 0px 1px #333;
}

/* Transcript */
.transcript {
    border-left: 1px solid #B9B9B9;
    height: 100%;
    background: #F5F5F5;
    overflow-y: auto !important;
    width: 25%;
    float: right;
    box-shadow: inset 5px 0 10px -5px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 1;
}

.transcript .container {
    padding: 12px .5em 3.125em 1em;
    font-size: 14px;
}

/* custom scrollbars for transcript- webkit only */
.transcript::-webkit-scrollbar {
    background-color: #EEE;
    width: 10px;
}

.transcript::-webkit-scrollbar-thumb {
    border: 1px #EEE solid;
    border-radius: 2px;
    background: #DDD;
    -webkit-box-shadow: 0 0 8px #AAA inset;
    box-shadow: 0 0 8px #AAA inset;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.transcript::-webkit-scrollbar-track {
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}

.ts-margin {
    margin-bottom: 200px;
}

.ts-meta {
    color: #999;
}

/* Postion of transcript to right side */
.use-sidebar {
    width: 75% !important;
    float: left;
}

.use-sidebar+.transcript {
    display: block;
    width: 25%;
}

/* Green Mac Icon on SoundCheck Page */
.symbol.fa-plus-circle {
    color: #009602;
}

/* Course Index Starts Here
============================================*/
/* Menu Specific Styles */

.bg-index {
    position: fixed;
    bottom: 0;
    z-index: -1;
}

.landing-header {
    padding: 3.125em 0 3.75em 0;
    background-color: transparent;
}

#promptsStart {
    margin-bottom: 0.5em;
}

.overlay {
    position: relative;
    width: 100%;
    height: 100%;
}

#lb-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("../images/1x1trans-gray.png");
    background-repeat: repeat;
    display: none;
    z-index: 1001;
}

.prompt {
    margin: 0 auto 3px auto;
    position: absolute;
    right: 21px;
    max-width: 25em;
    width: auto;
    font-size: .85em;
    bottom: 0;
}

.prompt.preloaded {
    right: -1em;
}

.scrollarrow {
    width: 100%;
    position: relative;
    height: 0;
    overflow: visible;
    bottom: 0;
}

.scrollarrow div {
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 1.2em solid #ccc;
    border-left: 7em solid transparent;
    border-right: 7em solid transparent;
    line-height: 0;
}

.screenID {
    margin: 0 auto 3px auto;
    position: absolute;
    left: 4px;
    max-width: 200px;
    font-size: 14px;
    bottom: 0;
}

.screenID.preloaded {
    left: -1em;
}

.alert {
    background: rgba(233, 233, 233, 0.8);
    border: 1px solid #CCC;
    border-radius: 0.25em;
    padding: 0.3em 0.3em;
    margin: 0;
}

.alert a {
    color: inherit;
    text-decoration: none;
}

.alert a:hover {
    text-decoration: underline;
}

/*No Theme Default*/
.alert-info {
    background-color: rgba(233, 233, 233, 0.8);
    border-color: #CCC;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

/* Questions */
#qstnText .row,
#qstnFeedback.row {
    margin-top: .5em;
}

#qstnText h2 {
    line-height: 1.2em;
    margin-bottom: .5em;
}

#qstnText:last-child,
#qstnText #qstnAnswers {
    margin-top: 0em;
    margin-bottom: 0em;
}

.qstn-Feedback {
    position: relative;
    width: 100%;
    left: 0;
}

.qstn-answer {
    position: relative;
    margin-left: 1em;
    text-indent: 0;
    padding-bottom: 0.25em;
}

.qstn-answer input {
    float: left;
}

.qstn-answer label {
    text-indent: 0em !important;
    margin-left: 1.5em;
    display: block;
}

.qstn-row .ans-arrow-right:before {
    top: 0em;
    left: 0em;
    /*margin-top: 0.15em;*/
}

/* Arrows indicating correct answer for Questions */
.ans-arrow {
    position: absolute;
    top: -.1em;
    left: -1.5em;
    color: #009900;
    visibility: hidden;
}

.ans-arrow.vis-show {
    visibility: visible;
}

.ans-arrow-top:before {
    position: absolute;
    top: 0;
    left: 50%;
    content: "\f063";
    /*fa-arrow-down*/
}

.ans-arrow-bottom:before {
    position: absolute;
    bottom: -1.1em;
    left: 50%;
    margin-left: -0.5em;
    content: "\f062";
    /*fa-arrow-up*/
}

.ans-arrow-bottom,
    {
    *zoom: expression(this.runtimeStyle['zoom']="1", this.innerHTML='');
    font-style: normal;
    position: absolute;
    bottom: -1.1em;
    left: 50%;
    margin-left: -0.5em;
}

.ans-arrow-left:before {
    position: absolute;
    right: -1em;
    top: 50%;
    /*margin-top: -0.5em;*/
    content: "\f060";
    /*fa-arrow-left*/
}

.ans-arrow-left,
    {
    *zoom: expression(this.runtimeStyle['zoom']="1", this.innerHTML='');
    font-style: normal;
    position: absolute;
    right: -30%;
    /* top: -20%;*/
    margin-top: -0.5em;
}

.ans-arrow-left.ie7,
    {
    position: absolute;
    top: 60%;
    right: -1em;
}

.ans-arrow-right:before {
    position: absolute;
    left: -.25em;
    /*top: 20%;*/
    /*margin-top: -0.25em;*/
    content: "\f061";
    /*fa-arrow-right*/
}

.ans-arrow-right,
    {
    *zoom: expression(this.runtimeStyle['zoom']="1", this.innerHTML='');
    font-style: normal;
    position: absolute;
    margin-left: .5em;
    margin-top: 3px;
}

.fa-plus,
    {
    *zoom: expression(this.runtimeStyle['zoom']="1", this.innerHTML='');
    font-style: normal;
}

/* Positioning for Font Awesome Status Symbol */
[class*='tsd-menuItem-'],
[class*='tsd-buttonItem-'] {
    position: absolute;
    /*right: 1%;*/
}

/* Adds an arrow to show which hotspot answer was selected. */
.hs-sel.js-selected:before,
.hs-dis.js-selected:before {
    font-family: fontawesome;
    font-size: 2em;
    color: #cc0033;
    position: absolute;
    right: -0.35em;
    top: 23%;
    top: 50%;
    -webkit-transform: translate(-0%, -50%);
    -o-transform: translate(-0%, -50%);
    -ms-transform: translate(-0%, -50%);
    transform: translate(-0%, -50%);
    content: "\f0d9";
    /*fa-caret-left*/
}

/* Changes the background to show which hotspot answer was selected. */
.hs-ovr,
.hs-sel,
.js-selected.hs-dis {
    color: #eeeeee;
    background-color: #548254;
    border: .1em solid #548254;
    line-height: 1.2em;
}

/* Status for Buttons and Menu Items */
.tsd-menuItem {
    position: relative;
}

[class*='tsd-menuItem-']:before,
[class*='tsd-buttonItem-']:before {
    position: absolute;
    right: .2em;
    top: 88%;
    margin-top: -0.5em;
}

.tsd-menuItem-n:before,
.tsd-buttonItem-n:before {
    visibility: hidden
}

.tsd-menuItem-c:before,
.tsd-buttonItem-c:before {
    color: #06F856;
    content: "\f058";
    /*fa-check-circle []*/
}

.tsd-menuItem-i:before,
.tsd-buttonItem-i:before {
    color: #A2A2A2;
    content: "\f138";
    /*fa-chevron-circle-right []*/
}

.tsd-menuItem-p:before,
.tsd-buttonItem-p:before {
    color: #06F856;
    content: "\f058";
    /*fa-check-circle []*/
}

.tsd-menuItem-f:before,
.tsd-buttonItem-f:before {
    color: #A2A2A2;
    content: "\f138";
    /*fa-chevron-circle-right []*/
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    padding-left: 10px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}

/* Base style for every key icon */
kbd,
.key {
    display: inline;
    display: inline-block;
    min-width: 1.125em;
    /*font-size: 12px;
  line-height:14px;
  font-family:Arial, Helvetica, sans-serif;*/
    text-align: center;
    text-decoration: none;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em;
    border: none;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    background: rgb(80, 80, 80);
    background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
    color: rgb(250, 250, 250);
    text-shadow: -1px -1px 0 rgb(70, 70, 70);
    -moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 1px .6px rgb(80, 80, 80), 0 2px 0 rgb(30, 30, 30), 0 2px 2px rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 1px 6px rgb(80, 80, 80), 0 2px 0 rgb(30, 30, 30), 0 2px 2px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -1px 8px rgb(80, 80, 80), 0 2px 0 rgb(30, 30, 30), 0 2px 2px rgba(0, 0, 0, .3);
    padding: 2px 10px;
}

/*Set the location and style for the background image*/
#backgroundimage {
    /*display: none;*/
}

.addTouch {
    z-index: 10;
}

.arrowCursor {
    cursor: default;
}

.clickable {
    cursor: pointer;
}

#speaker1 {
    position: relative;
}

#speaker2 {
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;
}

#note1 {
    position: absolute;
    top: -5px;
    left: 20px;
    padding: 0px;
    margin: 0px;
    z-index: 10;
}

#note2 {
    position: absolute;
    top: 5px;
    left: 20px;
    padding: 0px;
    margin: 0px;
    z-index: 10;
}

/*#start{
	display:block;
	margin-left:auto;
	margin-right:auto;
    }*/
/* End of styles for Start Course page */







.drag {
    margin-left: -30px;
    margin-top: -30px;
    color: #FFF;
    font: bold 16px Helvetica, Arial, Sans-serif;
    text-align: center;
    background-color: #ABF;
    border: 3px solid #669;
    z-index: 10;
}

.rotate {
    -ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
    -moz-transform: rotate(90deg) translate(165px, -530px);
    -moz-transform-origin: 0% 0%;
    -webkit-transform: rotate(90deg) translate(165px, -530px);
    -webkit-transform-origin: 0% 0%;
    -o-transform: rotate(90deg) translate(165px, -530px);
    -o-transform-origin: 0% 0%;
    -ms-transform: rotate(90deg) translate(165px, -530px);
    -ms-transform-origin: 0% 0%;
    transform: rotate(90deg) translate(165px, -530px);
    transform-origin: 0% 0%;
    zoom: 1;
}

a.lb.btn {
    width: 100%;
    float: left;
    /* padding: 0; */
    /* margin: 0; */
    /* text-align: left; */
    padding: 2px !important;
    font-size: .9em !important;
}

/* Classes to over-ride default jQuery UI classes */
.no-close .ui-dialog-titlebar-close {
    display: none
}

.touchTrans .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Classes to over-ride default jQuery UI classes */
.no-close .ui-dialog-titlebar-close {
    display: none
}

#contentFrame body {
    overflow: hidden;
}

/* Responsive Styles
============================================*/
/*Adjust max-width to prevent scrolling */
@media only screen and (min-height: 1px) {
    .navbar {
        max-width: 726px;
    }

    .contentWindowSize {
        max-width: 726px !important;
    }

    #contentFrame body {
        overflow-y: auto;
    }
}

/*@media only screen and (min-height: 526px) {
	.navbar {max-width:726px;}
	.contentWindowSize {max-width:726px !important;}
}*/
@media only screen and (min-height: 530px) {
    .navbar {
        max-width: 883.333px;
    }

    .contentWindowSize {
        max-width: 883.333px !important;
    }

    #contentFrame body {
        overflow-y: auto;
    }
}

@media only screen and (min-height: 540px) {
    .navbar {
        max-width: 900px;
    }

    .contentWindowSize {
        max-width: 900px !important;
    }
}

@media only screen and (min-height: 550px) {
    .navbar {
        max-width: 916.6667px;
    }

    .contentWindowSize {
        max-width: 916.6667px !important;
    }
}

@media only screen and (min-height: 560px) {
    .navbar {
        max-width: 933.333px;
    }

    .contentWindowSize {
        max-width: 933.333px !important;
    }
}

@media only screen and (min-height: 570px) {
    .navbar {
        max-width: 950px;
    }

    .contentWindowSize {
        max-width: 950px !important;
    }
}

@media only screen and (min-height: 580px) {
    .navbar {
        max-width: 966.6667px;
    }

    .contentWindowSize {
        max-width: 966.6667px !important;
    }
}

@media only screen and (min-height: 590px) {
    .navbar {
        max-width: 983.333px;
    }

    .contentWindowSize {
        max-width: 983.333px !important;
    }
}

@media only screen and (min-height: 600px) {
    .navbar {
        max-width: 1000px;
    }

    .contentWindowSize {
        max-width: 1000px !important;
    }
}

@media only screen and (min-height: 610px) {
    .navbar {
        max-width: 1016.6667px;
    }

    .contentWindowSize {
        max-width: 1016.6667px !important;
    }
}

@media only screen and (min-height: 620px) {
    .navbar {
        max-width: 1033.333px;
    }

    .contentWindowSize {
        max-width: 1033.333px !important;
    }
}

@media only screen and (min-height: 630px) {
    .navbar {
        max-width: 1050px;
    }

    .contentWindowSize {
        max-width: 1050px !important;
    }
}

@media only screen and (min-height: 640px) {
    .navbar {
        max-width: 1066.6667px;
    }

    .contentWindowSize {
        max-width: 1066.6667px !important;
    }
}

@media only screen and (min-height: 650px) {
    .navbar {
        max-width: 1083.333px;
    }

    .contentWindowSize {
        max-width: 1083.333px !important;
    }
}

@media only screen and (min-height: 660px) {
    .navbar {
        max-width: 1100px;
    }

    .contentWindowSize {
        max-width: 1100px !important;
    }
}

@media only screen and (min-height: 670px) {
    .navbar {
        max-width: 1116.6667px;
    }

    .contentWindowSize {
        max-width: 1116.6667px !important;
    }
}

@media only screen and (min-height: 680px) {
    .navbar {
        max-width: 1133.333px;
    }

    .contentWindowSize {
        max-width: 1133.333px !important;
    }
}

@media only screen and (min-height: 690px) {
    .navbar {
        max-width: 1150px;
    }

    .contentWindowSize {
        max-width: 1150px !important;
    }
}

@media only screen and (min-height: 700px) {
    .navbar {
        max-width: 1166.6667px;
    }

    .contentWindowSize {
        max-width: 1166.6667px !important;
    }
}

@media only screen and (min-height: 710px) {
    .navbar {
        max-width: 1183.333px;
    }

    .contentWindowSize {
        max-width: 1183.333px !important;
    }
}

@media only screen and (min-height: 720px) {
    .navbar {
        max-width: 1200px;
    }

    .contentWindowSize {
        max-width: 1200px !important;
    }
}

@media only screen and (min-height: 730px) {
    .navbar {
        max-width: 1216.6667px;
    }

    .contentWindowSize {
        max-width: 1216.6667px !important;
    }
}

@media only screen and (min-height: 740px) {
    .navbar {
        max-width: 1233.333px;
    }

    .contentWindowSize {
        max-width: 1233.333px !important;
    }
}

@media only screen and (min-height: 750px) {
    .navbar {
        max-width: 1250px;
    }

    .contentWindowSize {
        max-width: 1250px !important;
    }
}

@media only screen and (min-height: 760px) {
    .navbar {
        max-width: 1266.6667px;
    }

    .contentWindowSize {
        max-width: 1266.6667px !important;
    }
}

@media only screen and (min-height: 770px) {
    .navbar {
        max-width: 1283.333px;
    }

    .contentWindowSize {
        max-width: 1283.333px !important;
    }
}

@media only screen and (min-height: 780px) {
    .navbar {
        max-width: 1300px;
    }

    .contentWindowSize {
        max-width: 1300px !important;
    }
}

@media only screen and (min-height: 790px) {
    .navbar {
        max-width: 1316.6667px;
    }

    .contentWindowSize {
        max-width: 1316.6667px !important;
    }
}

@media only screen and (min-height: 800px) {
    .navbar {
        max-width: 1333.333px;
    }

    .contentWindowSize {
        max-width: 1333.333px !important;
    }
}

@media only screen and (min-height: 810px) {
    .navbar {
        max-width: 1350px;
    }

    .contentWindowSize {
        max-width: 1350px !important;
    }
}

@media only screen and (min-height: 820px) {
    .navbar {
        max-width: 1366.6667px;
    }

    .contentWindowSize {
        max-width: 1366.6667px !important;
    }
}

@media only screen and (min-height: 830px) {
    .navbar {
        max-width: 1383.333px;
    }

    .contentWindowSize {
        max-width: 1383.333px !important;
    }
}

@media only screen and (min-height: 840px) {
    .navbar {
        max-width: 1400px;
    }

    .contentWindowSize {
        max-width: 1400px !important;
    }
}

@media only screen and (min-height: 850px) {
    .navbar {
        max-width: 1416.6667px;
    }

    .contentWindowSize {
        max-width: 1416.6667px !important;
    }
}

@media only screen and (min-height: 860px) {
    .navbar {
        max-width: 1433.333px;
    }

    .contentWindowSize {
        max-width: 1433.333px !important;
    }
}

@media only screen and (min-height: 870px) {
    .navbar {
        max-width: 1450px;
    }

    .contentWindowSize {
        max-width: 1450px !important;
    }
}

@media only screen and (min-height: 880px) {
    .navbar {
        max-width: 1466.6667px;
    }

    .contentWindowSize {
        max-width: 1466.6667px !important;
    }
}

@media only screen and (min-height: 890px) {
    .navbar {
        max-width: 1483.333px;
    }

    .contentWindowSize {
        max-width: 1483.333px !important;
    }
}

@media only screen and (min-height: 900px) {
    .navbar {
        max-width: 1500px;
    }

    .contentWindowSize {
        max-width: 1500px !important;
    }
}

@media only screen and (min-height: 910px) {
    .navbar {
        max-width: 1516.6667px;
    }

    .contentWindowSize {
        max-width: 1516.6667px !important;
    }
}

@media only screen and (min-height: 920px) {
    .navbar {
        max-width: 1533.333px;
    }

    .contentWindowSize {
        max-width: 1533.333px !important;
    }
}

@media only screen and (min-height: 930px) {
    .navbar {
        max-width: 1550px;
    }

    .contentWindowSize {
        max-width: 1550px !important;
    }
}

@media only screen and (min-height: 940px) {
    .navbar {
        max-width: 1566.6667px;
    }

    .contentWindowSize {
        max-width: 1566.6667px !important;
    }
}

@media only screen and (min-height: 950px) {
    .navbar {
        max-width: 1583.333px;
    }

    .contentWindowSize {
        max-width: 1583.333px !important;
    }
}

@media only screen and (min-height: 960px) {
    .navbar {
        max-width: 1600px;
    }

    .contentWindowSize {
        max-width: 1600px !important;
    }
}

@media only screen and (min-height: 970px) {
    .navbar {
        max-width: 1616.6667px;
    }

    .contentWindowSize {
        max-width: 1616.6667px !important;
    }
}

@media only screen and (min-height: 980px) {
    .navbar {
        max-width: 1633.333px;
    }

    .contentWindowSize {
        max-width: 1633.333px !important;
    }
}

@media only screen and (min-height: 990px) {
    .navbar {
        max-width: 1650px;
    }

    .contentWindowSize {
        max-width: 1650px !important;
    }
}

@media only screen and (min-height: 1000px) {
    .navbar {
        max-width: 1666.6667px;
    }

    .contentWindowSize {
        max-width: 1666.6667px !important;
    }
}

@media only screen and (min-height: 1010px) {
    .navbar {
        max-width: 1683.333px;
    }

    .contentWindowSize {
        max-width: 1683.333px !important;
    }
}

@media only screen and (min-height: 1020px) {
    .navbar {
        max-width: 1700px;
    }

    .contentWindowSize {
        max-width: 1700px !important;
    }
}

@media only screen and (min-height: 1030px) {
    .navbar {
        max-width: 1716.6667px;
    }

    .contentWindowSize {
        max-width: 1716.6667px !important;
    }
}

@media only screen and (min-height: 1040px) {
    .navbar {
        max-width: 1733.333px;
    }

    .contentWindowSize {
        max-width: 1733.333px !important;
    }
}

@media only screen and (min-height: 1050px) {
    .navbar {
        max-width: 1750px;
    }

    .contentWindowSize {
        max-width: 1750px !important;
    }
}

@media only screen and (min-height: 1060px) {
    .navbar {
        max-width: 1766.6667px;
    }

    .contentWindowSize {
        max-width: 1766.6667px !important;
    }
}

@media only screen and (min-height: 1070px) {
    .navbar {
        max-width: 1783.333px;
    }

    .contentWindowSize {
        max-width: 1783.333px !important;
    }
}

@media only screen and (min-height: 1080px) {
    .navbar {
        max-width: 1800px;
    }

    .contentWindowSize {
        max-width: 1800px !important;
    }
}

@media only screen and (min-height: 1090px) {
    .navbar {
        max-width: 1816.6667px;
    }

    .contentWindowSize {
        max-width: 1816.6667px !important;
    }
}

@media only screen and (min-height: 1100px) {
    .navbar {
        max-width: 1833.333px;
    }

    .contentWindowSize {
        max-width: 1833.333px !important;
    }
}

/* Desktops - Adjust font scale*/
body {
    font-size: 16px;
}
@media screen and (min-width: 320px) {
    body {
      font-size: 1.55vw;
    }
    .transcript .container {
        padding: 16px 2em 3.125em 2em;
        font-size: .8em;
    }

}
@media only screen and (min-width: 1200px) {
    .use-sidebar {
        width: 70% !important;
    }

    .use-sidebar+.transcript {
        width: 30%;
    }
}


@media only screen and (max-width:800px) and (min-height:900) {

    /*.transcript.mobile, .transcript.desktop { display: none; }*/
    .transcript.mobile {
        width: 100%;
        height: 25%;
    }

    .transcript {
        display: none;
    }

    .use-sidebar {
        width: 100% !important;
        float: none;
        height: 75% !important;
    }

    /*.use-sidebar .navbar { height: 35%; }*/
    .use-sidebar .transcript {
        box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, 0.3);
        border: none;
        border-top: 1px solid #B9B9B9;
        display: block;
    }

    /*.screenID { top:auto; }*/
    .transcript .container {
        padding: 2em 2em 3.5em 2em;
    }

    /* END Responsive Tablet and Smaller */
}

@media only screen and (orientation:portrait) {
    .transcript.mobile {
        width: 100%;
        height: 40%;
    }

    .transcript {
        display: none;
    }

    .use-sidebar {
        width: 100% !important;
        float: none;
        height: 60% !important;
    }

    .use-sidebar .transcript {
        box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, 0.3);
        border: none;
        border-top: 1px solid #B9B9B9;
        display: block;
    }

    .transcript .container {
        padding: 2em 2em 3.5em 2em;
    }

    /* END Responsive Portriat */
}

#qstnFeedback {
    float: left;
}

table {
    padding: 5px;
    border: 1px solid black;
}

.no-pad-right {
    padding-right: 0;
}

legend {
    white-space: normal;
    width: 100%;
}

legend p {
    display: block;
    width: 100%;
}

.indent-left {
    padding-left: 1%;
}

.indent-right {
    padding-right: 1%;
}

.build-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 1px;
}

.build-container>img,
.build-container>div {
    position: absolute;
    top: 0;
    left: 0;
}

.build-container>img {
    width: 100%;
}

.build-container img:first-child {
    position: relative !important;
}

button:focus,
a:focus,
input:focus {
    outline-style: dotted;
    outline-width: thin;
    outline-color: transparent !important;
}

/* Styles for dropdown pages */
.page-dropdown .dropdown {
    margin: 0 .25em;
    padding: 0;
    float: left;
    border: 2px solid transparent;
    border-top: 0px;
    z-index: 1000;
}

.page-dropdown p {
    float: left;
    margin-bottom: 0;
}

.page-dropdown .dropdown dd,
.page-dropdown .dropdown dt,
.page-dropdown .dropdown ul {
    margin: 0px;
    padding: 0px;
    z-index: 1000;
}

.page-dropdown .dropdown dd {
    position: relative;
    z-index: 1000;
}

.page-dropdown .dropdown dt {
    background: url(../images/ddArrow.png) no-repeat scroll right center;
    display: block;
    padding-left: 2px;
    border: 1px solid #333333;
    width: 150px;
    z-index: 1000;
}

.page-dropdown .dropdown dt span {
    display: block;
    padding-left: 2px;
}

.page-dropdown .dropdown dd ul {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #333333;
    color: #333333;
    display: none;
    left: 0px;
    padding: 2px 0px 0px 2px;
    position: absolute;
    top: 1px;
    width: auto;
    min-width: 150px;
    list-style: none;
    z-index: 1000;
}

.page-dropdown .dropdown span.value {
    display: none;
}

.page-dropdown .dropdown dd ul li {
    display: block;
    margin-left: 4px;
    list-style-image: none;
}

/* The roll-over highlight color for hot-spots*/
.page-dropdown .hotspot-highlight {
    /*background-color:#FF6600;*/
    border: 2px solid #FF6600;
    border-top: 0px;
    background-color: transparent;
    padding: 0px;
    margin: 0 .25em;
}

.question .hs-sel:hover,
.question .hs-sel:hover p {
    cursor: pointer !important;
}

.page-dropdown #qstnWindow {
    z-index: 1000;
}

button:focus,
input:focus {
    outline-style: dotted;
    outline-width: thin;
    outline-color: #000000;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

.ui-autocomplete.ui-front {
    z-index: 3000 !important;
}

.pathSelect:disabled {
    color: #CCCCCC;
    border: 1px solid #CCCCCC;
}

.pathSelectCheck+label {
    margin-left: 0.5em;
}