/* ==========================================================================
   BASE STYLES
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #333;
}

html {
	height: 100%;
}

body {
	height:100%;
	width:100%;
	position: fixed;
	overflow: hidden;
	font-size: 1em;
	line-height: 1.4;
	background: url(img/bg_default.gif) repeat 0 0;
}

body.login { overflow: auto; }
body.login.persiangreen {background-image: url(img/bg_persiangreen.gif) }
body.login.limegreen {background-image: url(img/bg_limegreen.gif) }
body.sepia {background-image: url(img/bg_sepia.gif) }
body.black { background-image: url(img/bg_black.gif) }

figure {
  margin: 0;
  padding: 0;
  text-align: center;
  display: block; /* For IE8 */
}
figure figcaption {
  font-weight: normal;
  font-family: Segoe, sans-serif;
  font-size: 10px;
  font-style:italic;
  margin: 0;
  padding: 0;
  text-align: center;
  display: block; /* For IE8 */
}
/* CKEditor converts /r & /n to <br /> before and after captions which we don't want */
figure > br,
figcaption br:first-child {
  display: none;
}

table,
table thead,
table tbody {
	border: none;
}
/* ==========================================================================
   FONTS
   ========================================================================== */

h1, h2 {
	font-family: 'Source Sans Pro', sans-serif;
}
.opensans {
	font-family: 'Open Sans', sans-serif;
}
.sourcesans {
	font-family: 'Source Sans Pro', sans-serif;
}
.droid {
	font-family: 'Droid Serif', serif;
}
@font-face { font-family: 'Open Dyslexic'; src: url(fonts/OpenDyslexic-Regular.otf);}
@font-face { font-family: 'Open Dyslexic Bold'; src: url(fonts/OpenDyslexic-Bold.otf);}
@font-face { font-family: 'Open Dyslexic BoldItalic'; src: url(fonts/OpenDyslexic-BoldItalic.otf);}
@font-face { font-family: 'Open Dyslexic Italic'; src: url(fonts/OpenDyslexic-Italic.otf);}

.opendyslexic, .opendyslexic span{
	font-family: 'Open Dyslexic', sans-serif !important; /* Needs important so overrides font family set in editors */
}
.opendyslexic strong, .opendyslexic b,
.opendyslexic span strong, .opendyslexic span b, .opendyslexic strong span, .opendyslexic b span{
	font-family: 'Open Dyslexic Bold', sans-serif !important; /* Needs important so overrides font family set in editors */
}
.opendyslexic em, .opendyslexic i,
.opendyslexic span em, .opendyslexic span i, .opendyslexic em span, .opendyslexic i span {
	font-family: 'Open Dyslexic Italic', sans-serif !important; /* Needs important so overrides font family set in editors */
}
.opendyslexic b em, .opendyslexic b i, .opendyslexic em b, .opendyslexic i b,
.opendyslexic strong em, .opendyslexic strong i, .opendyslexic em strong, .opendyslexic i strong,
.opendyslexic span b em, .opendyslexic span b i, .opendyslexic span em b, .opendyslexic span i b,
.opendyslexic span strong em, .opendyslexic span strong i, .opendyslexic span em strong, .opendyslexic span i strong,
.opendyslexic b span em, .opendyslexic b span i, .opendyslexic em span b, .opendyslexic i span b,
.opendyslexic b em span, .opendyslexic b i span, .opendyslexic em b span, .opendyslexic i b span {
	font-family: 'Open Dyslexic BoldItalic', sans-serif !important; /* Needs important so overrides font family set in editors */
}

/* ==========================================================================
   ALT FONT OVERRIDES
   ========================================================================== */
.droid #answers_pane h2,
.opendyslexic #answers_pane h2 {
	padding-right: 12px;
}
.droid #answers_pane h2 .change_answer,
.opendyslexic #answers_pane h2 .change_answer {
	font-size: 0.44em;
}
.bigger.droid #answers_pane h2 .change_answer,
.bigger.opendyslexic #answers_pane h2 .change_answer {
	font-size: 0.48em;
}

/* ==========================================================================
   LOGIN OVERRIDES
   ========================================================================== */

body.login.persiangreen h1, body.login.persiangreen h2,
body.login.limegreen h1, body.login.limegreen h2,
body.login.purple h1, body.login.purple h2,
body.login.vidaloca h1, body.login.vidaloca h2,
body.login.zest h1, body.login.zest h2 {
	color: #fff;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

body .container {
	width: 980px;
	margin: 0 auto;
	position: relative;
}
body section:first-of-type {
	top: 50px; /* height of the header */
	z-index: 0;
}
body section.bigger{
	font-size: 1.2em;
}
header .corners,
footer .corners {
	position: absolute;
	top: 50px;
	width: 100%;
}
header .corners div,
footer .corners div {
	position: absolute;
	background: url(img/sprite.png) no-repeat -40px -129px;
	display: block;
	width: 6px;
	height: 6px;
}
footer .corners { top: -6px; }
header .corners .top_right{ right: 0; background-position: -46px -129px;}
footer .corners .bottom_left{ left: 0; background-position: -40px -135px;}
footer .corners .bottom_right{ right: 0; background-position: -46px -135px;}

/* ==========================================================================
   DEBUGGING
   ========================================================================== */
#debug div.inner {
	position: absolute;
	top: 60px;
	left: 10px;
	width: 250px;
	height: 100%;
	overflow: hidden;
	padding: 10px;
	border: 1px solid #d9d9d9;
	border-right: 4px solid #d6d6d6;
	border-radius: 10px 10px 0 0;
	background-color: white;
}
#debug div.inner div.debug_scroller {
	width: 100%;
	height: 100%;
	font-size: 10px;
	padding: 0;
	margin: 0;
}
#debug div.inner div.debug_scroller h3{
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   LOGIN / CONFIRMATION
   ========================================================================== */

 body.login .logo {
	display: block;
	/*width: 248px;
	height: 58px;
	background: url(img/sprite.png) no-repeat 0 0;*/
	margin: 0;
	padding: 0;
}

 body.login .body {
	clear: both;
	margin: 0;
	padding-top: 25px;
}

body.login h1 {
	margin-left: 20px;
	font-size: 2.7em;
	line-height: 1.1em;
}
body.login .container{
	display: table; height: 75%;
	margin: 0 auto;
	width: 660px;
}
.middle {
	display: table-cell;
	vertical-align: middle;
}
#stimulus_pane .middle {
	display: inline;
	vertical-align: inherit;
}
.greeting_text {
	display: table-cell;
	vertical-align: middle;
}
.wrapper {
	position: relative;
}
body.login form {
	border-top: 5px solid #e1e1e1;
	margin-top: 25px;
}
body.login h2 {
	font-size: 2.5em;
	margin: .5em 0 0;
}
body.login label {
	display: block;
	margin: 5px 0 10px;
	font-size: 0.9em;
}
body.login input[type="text"] {
	padding: 9px 5px;
	border-radius: 8px;
	border: 2px solid #b3b3b3;
	width: 225px;
	color: #000;
	font-weight: 700;
	float: left;
	margin-right: 10px;
	text-transform: uppercase;
}
body.login input[type="submit"] {
	display: block;
	width: 132px;
	height: 70px;
	background: url(img/sprite.png) no-repeat 0 -58px;
	border: 0;
	margin: -15px 0 0;
	padding: 0;
	float: left;
}
footer  {
	position: absolute;
	bottom: 0;
	background: #333 url(img/bg_footer.gif);
	width: 100%;
	text-align: center;
	height: 60px;
	line-height: 60px;
	z-index: 1;
}
body.login footer {
	height: 115px;
	line-height: 115px;
}
body.login footer .bottom_nav{
	text-align: center;
}
footer a.btn {
	border-radius: 10px;
	color: #fff;
	height: 43px;
	background-color: #323233;
	position: relative;
	margin-right: 10px;
	z-index: 1;
}
footer a.back,
footer a.restart {
	padding: 10px 15px 10px 40px;
	background-image: url(img/btn_back.png);
	background-repeat: no-repeat;
	background-position: 10px 14px;
	margin-right: 10px;
}
footer a.restart {
	padding-left: 49px;
	background-image: url(img/btn_restart.png);
	background-position: 6px 4px;
}
footer a.share,
footer a.finish,
footer a.next {
	padding: 10px 65px 10px 10px;
}
footer a.share span,
footer a.finish span,
footer a.next span{
	display: block;
	width: 62px;
	height: 70px;
	background: url(img/btn_next.png) no-repeat 100% 50%;
	position: absolute;
	right: -10px;
	top: -15px;
}
footer a.finish span {
	background: url(img/btn_finish.png) no-repeat 100% 50%;
}
footer a.share span {
	background: url(img/btn_share.png) no-repeat 100% 50%;
}

/* ==========================================================================
   NAVIGATION GRID | two_column, four_column and six_column
   ========================================================================== */

/* nav page header elements */
.nav_toggle {
	float: right;
	position: relative;
	height: 50px;
	margin-right: 50px;
}
body.four_column .nav_toggle{
	display: none;
}
.nav_toggle a {
	display: block;
	width: 69px;
	height: 38px;
	background: url(img/sprite.png) no-repeat -180px -250px;
	position: absolute;
	right: 0;
	bottom: 0;
	outline: 0;
}
.nav_toggle #toggle_two_column {
	right: 70px;
}
.nav_toggle #toggle_six_column.active {
	background-position: -180px -290px;
}
.nav_toggle #toggle_two_column {
	background-position: -180px -170px;
}
.nav_toggle #toggle_two_column.active {
	background-position: -180px -210px;
}

/* nav grid elements */
.nav_grid_scroller {
	padding: 10px 0;
}
.nav_grid_scroller .mCSB_scrollTools {
	margin-right: -25px; /* Push scrollbar off the side of the div so it's not visible*/
}
.nav_grid li {
	width: 218px;
	height: 138px;
	float: left;
	margin: 10px 20px 10px 0;
	padding: 0;
	border-radius: 8px;
	position: relative;
	background-clip: border-box;
	overflow: hidden;
	transition: all .2s;
}
.in_transition .nav_grid li {
	background-image: none !important; /* stops flashing of repeated background images when transitioning */
}
body.two_column .nav_grid li:nth-child(2n+2),
body.four_column .nav_grid li:nth-child(4n),
body.six_column .nav_grid li:nth-child(6n+6) {
	margin-right: 0;
}
.nav_grid li.unanswered {
	width: 220px;
	height: 140px;
	box-shadow: 4px 4px #d6d6d6;
	background: #fff;
}
body.six_column .nav_grid li.unanswered {
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid #ccc;
}
.nav_grid li.answered {
	border: 1px solid #ccc;
}
.nav_grid.short li {
	height: 118px;
}
body.nav_page .answered .img_outer {
	display: block;
	opacity: .5;
}
body.nav_page .img_outer img{
	width: 100%;
}
.nav_grid li a {
	width: 220px;
	height: 125px; /* weird things happening with bg image ignoring overflow on hover, so position this to avoid corrners */
	position: absolute;
	top: 8px;
	left: 0px;
	z-index: 1;
}
.nav_grid.short li a {
	height: 102px;
}
.nav_grid li div.info{
	position: absolute;
	z-index: 0;
	width: 218px;
	border-radius: 0 0 8px 8px;
	left: -1px; bottom: -1px; /* make sure background image doesn't peek through corners */
}
body.two_column .nav_grid li.unanswered div.info,
body.six_column .nav_grid li.unanswered div.info{
	background: none;
	border: 0;
}
body.four_column .nav_grid li.answered div.info {
	background: #e8e8e8;
	border: 1px solid #d6d6d6;
	color: #999;
}
body.four_column .nav_grid li.unanswered div.info{
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid #333333;
	left: 0;
}
.nav_grid li div h3 {
	padding: 0;
	margin: 10px 8px;
}
.nav_grid.short li div h3 {
	margin: 8px;
}
.nav_grid li div h3 span{
	display: block;
	float: left;
	font-size: .75em;
	line-height: 1.2em;
}
.nav_grid li div h3 span.number {
	color: #999;
}
.nav_grid li div h3 span.title {
	margin: 0 30px 0 20px;
	float: none;
	font-weight: 400;
/*	color: #000;*/
}
.nav_grid li.unanswered div h3 span.title {
	color: #fff;
}
body.two_column .nav_grid li.unanswered div h3 span.title {
	color: #000;
}
.nav_grid li:nth-child(1n+10) div h3 span.title {
	margin-left: 25px; /* need a bit more room for double-digit numbers */
}
.nav_grid li div > span {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 16px;
	height: 16px;
	background: #fff url(img/sprite.png) no-repeat -97px -315px;
	padding: 5px 6px;
	border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-radius: 16px 0 8px 0;
}
.nav_grid li.unanswered div > span {
	display: none;
}

body.two_column .nav_grid li {
	width: 458px;
	height: 158px;
	background: #fff;
	border: 1px solid #d0d0d0;
}
body.two_column .nav_grid li.unanswered {
	width: 460px;
	height: 160px;
	border: 0;
}
body.six_column .nav_grid li {
	width: 144px;
	height: 62px;
}
body.six_column .nav_grid.short li {
	height: 55px;
}
body.six_column.show_titles .nav_grid li div.info {
	display: table;
	width: 100%;
}
body.six_column.show_titles .nav_grid li div.info h3{
	display: table-row;
	width: 100%;
	height: 62px;
}
body.six_column.show_titles .nav_grid li div.info .number{
	bottom: -42px !important;
    left: 10px;
    top: inherit;
}
body.six_column.show_titles .nav_grid li div.info .title {
	display: table-cell;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

body.two_column .nav_grid li div.info {
	width: 100%;
	position: initial;
}
body.six_column .nav_grid li .title,
body.six_column .nav_grid li .img_outer {
	display: none;
}
body.six_column .nav_grid li .number {
	position: relative;
	font-size: 0.75em;
	top: -3px;
	left: 2px;
}
body.two_column .nav_grid li .title {
	font-family: 'Source Sans Pro', sans-serif;
	color: #000;
	width: 185px;
	position: relative;
	top: 3px;
	left: -8px;
	font-size: 0.9em;
	line-height: 1.5em;
	font-weight: 600;
}
body.two_column .nav_grid li.algebra .title {
	width: 400px; /* algebra questions don't have images, so expand text. always true? @TODO - check */
}
body.two_column .nav_grid li .number {
	position: absolute;
	bottom: -1px;
	left: -1px;
	width: 440px;
	background: #e8e8e8;
	border: 1px solid #d6d6d6;
	border-radius: 0 0 8px 8px;
	height: 16px;
	padding: 10px 0 10px 20px;
}
body.two_column .img_outer {
	position: absolute;
	left: 230px;
	top: 0;
	text-align: center;
	width: 200px;
}
body.two_column .img_inner {
	height: 125px;
	line-height: 125px; /* vertically centers image */
}
body.two_column .answered,
body.two_column .answered .img_outer {
	opacity: .5;
}

/* ==========================================================================
   PROCESS PAGE - MOST STYLES INHERITED FROM NAVIGATION GRID ABOVE
   ========================================================================== */
body.nav_page #answers_wrapper .tab {
	display: none;
}
#answers_pane .nav_grid .answered {
	padding-bottom: 0;
}

/* ==========================================================================
   QUESTION - DEFAULT
   ========================================================================== */
header {
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
	background: #333 url(img/bg_footer.gif);
	height: 50px;
}
body header h1 {
	float: left;
	color: #ccc;
	text-transform: uppercase;
	font-size: 1.3em;
	line-height: 1em;
}
body header h2,
body header h3 {
	float: left;
	color: #999;
	font-size: 0.95em;
	border-left: 1px solid #333;
	margin: 15px 0 0 15px;
	padding-left: 15px;
	font-weight: 400;
}
body header h3 {
	float: none;
	font-size: 0.85em;
	position: absolute;
	right: 200px;
}

body header .avatar {
	float: left;
	margin: 0.67em 0.67em 0.67em 0em;
	height: 32px;
	width: 32px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
	-moz-border-radius: 6px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-background-clip: padding-box;
}

header .counter_number {
	margin: 11px 0 0 38px;
	float: left;
	color: #666666;
	text-transform: uppercase;
	line-height: 1.3em;
	font-size: 0.7em;
}
header .counter_number strong{
	display: block;
	font-size: 1em;
}
header .counter_number span {
	float: left;
	display: block;
	margin: -4px 10px 0 0;
	width: 36px;
	height: 36px;
	line-height: 36px;
	color: #ffe13b;
	font-weight: 700;
	font-size: 1.65em;
	text-align: center;
	background: url(img/sprite.png) no-repeat 0 -129px;
}
header .continue_later {
	position: absolute;
	background: #666666;
	color: #fff;
	padding: 6px 8px;
	border-radius: 4px;
	margin-top: 13px;
	text-transform: uppercase;
	font-size: 0.75em;
}
body.nav_page header .continue_later {
	right: 45px;
	right: 0px;
}
body.question header .continue_later {
	right: 105px;
}
body.survey header .continue_later {
	right: 0;
}
header .toggle_stimulus_width {
	position: absolute;
	right: 0;
	top: 13px;
	width: 85px;
	height: 37px;
	background: url(img/sprite.png) no-repeat 0 -170px;
}
.wide_stimulus header .toggle_stimulus_width {
	background-position: -87px -170px;
}

body.question #answers_pane .answer.open{
	box-shadow: none !important;
}

header .answers_remaining_bar {
	position: absolute;
	left: 0;
	top: 0px;
	margin: 0;
	padding: 0;
	width: 100%
}
header .answers_remaining_bar.gutter {
	height: 6px;
	background: transparent;
	background-color: #666;
}
header .answers_remaining_bar.gutter span {
	height: 6px;
	display: block;
	float: left;
	position: relative;
}
header span.timer_left,
header span.timer_right{
	width: 4px;
	background: #ffcd58;
}
header span.timer_bar{
	width: 0%; /* This is dynamically set in the bacbone JS */
	background: #ffcd58;
}

/* ==========================================================================
   STIMULUS - DEFAULTS (questions_right)
   ========================================================================== */

#stimulus_pane_wrapper {
	position: relative;
	width: 510px;
	transition: width .3s, left .3s;
}
#stimulus_pane_wrapper .tab{
	background: url(img/tabs_stimulus.png) no-repeat 0 0;
	height: 11px;
	width: 100%;
	position: absolute;
	z-index: 1;
	left: 0;
}
#stimulus_pane {
	background: #fff;
	width: 100%;
	height: 600px;
	overflow: hidden;
	float: left;
	padding: 20px 6px 20px 20px;
	border-top: 1px solid #d6d6d6;
	border-right: 4px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
	border-radius: 0 10px 10px 10px;
	margin-top: 10px;
	position: relative;
	transition: width .3s;
}
body #stimulus_pane h1 {
	margin: 0 0 0.5em;
	line-height: 1em;
}
.bigger #stimulus_pane h1  {
	font-size: 1.66em !important;
}
#stimulus_pane ul li,
#stimulus_pane p{
	font-size: 1em;
	color: #000;
	padding-right: 32px;
	line-height: 1.8em;
}
#stimulus_pane ul li p {
	font-size: 1em; /* Needed so p tags in lists don't get double resized. */
}
#stimulus_pane img{
	/* @TODO - is this always true? Will there be images that need to appear inline? If so, maybe a "#stimulus_pane p img" style to override this? */
	/*display: block;*/
	/*width: 420px;*/ /* default for left/right stimuli - gets overriden in top/bottom layouts  */
	/*margin: 20px 30px 0 0;*/ /* default for right stimuls - gets overriden in other contexts */
	max-width: 100%;
	margin: 0 auto;
	transition: width .3s,  height .3s;
}
body.wide_stimulus #stimulus_pane img{
	width: 720px;
}
.fader {
	position: absolute;
	top: -9990px;
	height: 58px;
	z-index: 1;
	transition: width .3s;
	left: 0px;
	width: 511px;
}
body.no_faders .fader {
	position: absolute;
	right: -9999px !important;
	left: initial !important;
}
#fader_top {
	background: -webkit-linear-gradient(top, #fff, rgba(255,255,255,0) );
	background: -moz-linear-gradient(top, #fff, rgba(255,255,255,0));
	background: -ms-linear-gradient(top, #fff, rgba(255,255,255,0));
	background: -o-linear-gradient(top, #fff, rgba(255,255,255,0));
	top: 20px;
	display: none; /* gets turned on/off by the custom scroller */
}
#fader_bottom {
	background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff );
	background: -moz-linear-gradient(top, rgba(255,255,255,0), #fff );
	background: -ms-linear-gradient(top, rgba(255,255,255,0), #fff );
	background: -o-linear-gradient(top, rgba(255,255,255,0), #fff );
	display: none; /* gets turned on/off by the custom scroller */
	text-align: center;
}
#fader_bottom .indicator {
	position: absolute;
	margin: 45px 0 0 -45px;
	text-align: left;
	vertical-align: top;
	color: #b3b3b3;
	font-size: 0.75em;
	font-weight: 600;
}
#fader_bottom .indicator:before {
	content: 'Scroll to see more';
}
#fader_bottom .indicator:after {
	/*border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0;
	transform: rotate(135deg);
	vertical-align: top;
	width: 0.45em;
	margin: 1px 0 0 4px;*/
}
.nav_page #fader_bottom .indicator {
	margin-top: 35px;
	color: #666;
}

/* ==========================================================================
   WIDE STIMULUS OVERRIDES
   ========================================================================== */
body.wide_stimulus #stimulus_pane {
	width: 825px !important;
}
body.wide_stimulus #stimulus_pane_wrapper {
	width: 828px !important;
}
body.wide_stimulus #answers_wrapper {
	width: 85px !important;
	padding-top: 0;
}
body.wide_stimulus.questions_right_2 #answers_wrapper {
	left: 895px;
}
body.wide_stimulus #fader_top,
body.wide_stimulus #fader_bottom {
	width: 827px;
}
body.wide_stimulus #answers_pane {
	width: 85px !important;
}
body.wide_stimulus #answers_pane .answer:first-child {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
body.wide_stimulus #answers_pane .answer {
	padding: 15px 17px 15px 12px;
}
body.wide_stimulus #answers_pane label {
	display: none;
}
body.wide_stimulus ul.select_ui .option,
body.wide_stimulus .answer.open ul.select_ui  {
	display: none;
}
body.wide_stimulus .answer.open ul.select_ui  {
	display: none;
}
body.wide_stimulus.questions_left_2 #stimulus_pane_wrapper {
	left: 86px;
}
body.wide_stimulus.question #answers_wrapper .tab {
	display: none;
}
/* ==========================================================================
   ANSWERS - DEFAULTS (questions_right)
   ========================================================================== */

#answers_wrapper {
	width: 420px;
	float: right;
	padding-top: 10px;
	position: relative;
	transition: width .3s, left .3s;
}
body.question #answers_wrapper .tab {
	height: 11px;
	width: 100%;
	position: absolute;
	top: 0;
	right: -3px; /* takes the drop shadow into account */
	z-index: 1;
	background: url(img/tabs_questions_default.png) no-repeat 100% 0;
}
#result_answers_wrapper {
	width: 970px;
	padding-top: 170px;
	position: relative;
	transition: width .3s, left .3s;
}
body.question #result_answers_wrapper .tab {
	height: 11px;
	width: 100%;
	position: absolute;
	top: 0;
	right: -3px; /* takes the drop shadow into account */
	z-index: 1;
	background: url(img/tabs_questions_default.png) no-repeat 100% 0;
	display:none;
}
#result_answers_wrapper .tcenter {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	color: #333;
	font-size: 32px;
}
body.plainfinish #answers_wrapper {
	border-radius: 0 10px 10px 0;
	width: 970px;
  margin-top: 170px;
  padding: 20px 0;
}
body.plainfinish #answers_wrapper .tab {
	background-position: 0 0;
	top: -10px;
	right: 1px;
	display:block;
}
body.plainfinish #answers_wrapper .tcenter {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	color: #333;
	font-size: 32px;
}
body.plainfinish #answers_wrapper ul.select_ui {
	display: inline-block;
}
#answers_pane {
	position: relative;
	z-index: 0;
}
#answers_pane .answer {
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #cdcccc;
	overflow: hidden;
	box-shadow: 3px 3px #d6d6d6;
	background: #fff;
}
#answers_pane .answer.open {
	padding-bottom: 10px;
}
#answers_pane .answer.open{
	box-shadow: none;
}
#answers_pane  .answer:nth-child(1n+2){
	border-top-width: 0 !important;
}
body.multiple #answers_pane .answer_header,
body.single.wide_stimulus #answers_pane .answer_header {
	cursor: pointer;
}
/*#answers_pane .answer_body {
	display: none;
}
#answers_pane .open .answer_body {
	display: block;
}*/
#answers_pane .answered {
	padding-bottom: 15px;
	box-shadow: none !important;
}
#answers_pane .answered.open {
	padding-bottom: 10px;
}
#answers_pane h2 {
	background: #666 url(img/sprite.png) no-repeat 0 -238px;
	border-radius: 5px;
	box-shadow: 3px 3px #eee;
	color: #fff;
	float: left;
	font-size: 1.3em;
	font-weight: 600;
	height: 14px;
	line-height: 14px;
	margin: 0;
	padding: 7px 7px 7px 29px;
	transition: box-shadow .2s, background-color .2s;
	width: 25px;
	text-align: center;
}
body.single #answers_pane h2 {
	background-image: none !important; /* don't need the minus sign on a single question page */
	padding: 7px 18px;
}
body.single #answers_pane .closed.answered h2 {
	padding: 7px 7px 7px 29px;
}
body.questions_center #answers_pane h2,
body.questions_top #answers_pane h2 {
	background-image: none !important; /* don't need the minus sign on a single question page */
	padding: 7px 18px;
}
.bigger #answers_pane h2 {
	font-size: 1.1em !important;
}
#answers_pane .open h2 {
	background-position: 0 -208px;
	background-color: #000;
	box-shadow: none !important;
}
#answers_pane .closed.answered h2 {
	background-position: 0 -316px !important;
	background-color: #fff !important;
	height: 40px;
	color: #000;
	box-shadow: 3px 3px #cfcfcf !important;
}
#answers_pane h2 .change_answer {
	color: #747474;
	display: none;
	font-size: 0.5em;
	font-weight: 400;
	left: -20px;
	line-height: 1em;
	position: relative;
	text-transform: uppercase;
	top: 8px;
}
.bigger #answers_pane h2 .change_answer {
	font-size: 0.5em;
}
#answers_pane .closed.answered h2 .change_answer {
	display: block;
}
#answers_pane label {
	margin-left: 77px;
	display: block;
	/*font-size: 0.85em;*/
	position: relative;
	top: 0px;
	font-weight: normal;
}
#answers_pane label p {
	padding: 0;
	margin: 0;
}
body.multiple #answers_pane label {
	cursor: pointer;
}
ul.select_ui  {
	display: none;
}
.answer.open ul.select_ui  {
	display: block;
	margin: 10px 0;
}
ul.select_ui .option {
	border: 2px solid #fff;
	border-radius: 5px;
	background: #fff;
	margin-bottom: 1px;
	box-shadow: 4px 4px #999;
	cursor: pointer;
	color: #666;
}
ul.select_ui .option.selected {
	color: #000;
}
ul.select_ui .option .checkbox {
	display: table-cell;
	background: #f2f2f2;
	vertical-align: middle;
	transition: background-color 0.2s linear;
	border-radius: 5px 0 0 5px;
}
ul.select_ui .option.selected .checkbox {
	background: #f9ae00
}
ul.select_ui .checkbox  span {
	display: block;
	float: left;
	width: 19px;
	min-height: 25px;
	background: url(img/sprite.png) no-repeat 0 -290px; /* default - should get overridden by appropriate color */
	margin: 9px 9px 11px;
}
ul.select_ui .option.selected .checkbox  span {
	background-position: 0 -128px; /* default - should get overridden by appropriate color */
}
ul.select_ui .option  img{
	display: block;
	margin: 0 auto;
}
ul.select_ui .label  {
	display: table-cell;
	vertical-align: middle;
}
ul.select_ui .label  p{
	/*font-size: 0.8em;*/
	font-size: 0.85em;
	margin: 0 10px;
}
ul.select_ui .label > img{
	display: block;
	margin: 0 auto;
}

/* ==========================================================================
   OVERLAYS
   ========================================================================== */

body .overlay {
	position: absolute;
	top: 50px;
	left: 0;
	background: rgba(0,184,139,.9);
	width: 100%;
	height: 100%;
	z-index: 9;
	display: none;
}
body .overlay .container{
	text-align: center;
	display: table;
	height: 75%;
}
body .overlay h1{
	color: #fff;
}

body .overlay .bordered_text {
	width: 660px;
	margin: 0 auto;
	text-align: left;
}
body .overlay .overlay_nav {
	position: absolute;
	bottom: 50px;
	width: 100%;
	height: 110px;
	background: #333 url(img/bg_footer.gif);
	color: #fff;
	text-align: center;
}
body .overlay .overlay_nav .btn{
	border-radius: 10px;
	color: #fff;
	background: #323233;
	box-shadow: 4px 4px #242424;
	position: relative;
	top: 43px;
	padding: 15px 25px 14px 25px;
	margin: 0 5px;
	text-align: center;
	z-index: 1;
	font-weight: 700;
}
body .overlay .overlay_nav .btn.yes{
	background: #1a9c00;
}

/* ==========================================================================
   FOOTER / NAV / UTILITIES
   ========================================================================== */

footer .back_btn.btn {
	display: block;
	width: 36px;
	height: 40px;
	position: absolute;
	left: 40px;
	top: 13px;
	background: transparent url(img/sprite.png) no-repeat 0 -510px;
	z-index: 1;
	border-radius: 0;
}
footer .bottom_nav {
	text-align: right;
	position: relative;
}
footer .bottom_nav.center {
	text-align: center;
}
footer .utilities {
	position: absolute;
	top: 13px;
	text-align: center;
	width: 100%;
	height: 40px;
	z-index: 0;
}
footer .utilities.share {
	top: 0;
}
footer .utility {
	display: inline-block;
	margin: 0 15px;
	background: url(img/sprite.png) no-repeat 500px 0px;
	line-height: 1em;
}
footer #timer{
	width: 36px;
	height: 36px;
	background-position: 0 -435px;
}
footer #qtn_selector{
	width: 56px;
	height: 35px;
	background-position: 0 -475px;
}
footer #theme{
	width: 36px;
	height: 36px;
	background-position: 0 -395px;
}

/* utility popups default to the 'theme/font' options */
footer .utility_popup_wrapper {
	position: relative;
	margin: 0;
}
footer .utility_popup {
	background: #ac0b45;
	width: 275px;
	border: 10px solid #860433;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	position: absolute;
	bottom: 51px;
	left: -112px;
	display: none;
}
footer .calculator_popup {
	position: absolute;
	cursor:move;
	bottom: 60px;
	left: 400px;
    border: 0px;
    outline: none;
    display: none;
    z-index: 9999;
}
footer .utility_popup.timer {
	border-color: #1358a5;
	background: #277edf;
	color: #fff;
}
footer .utility_popup > div {
	text-align: left;
	margin: 0 auto;
	width: 230px;
}
footer .utility_popup .style {
	border-bottom: 1px solid #98053a;
	padding: 20px 0 10px;
}
footer .utility_popup .style a{
	display: block;
	background: url(img/sprite.png) no-repeat -150px -120px;
	color: #fff;
	padding-left: 30px;
	line-height: 24px;
	font-size: 0.9em;
	margin-bottom: 10px;
}
footer .utility_popup .style a.active{
	background: url(img/sprite.png) no-repeat -150px -90px;
}
footer .utility_popup .font_size {
	padding: 25px 0;
}
footer .utility_popup .font_size a{
	display: block;
	width: 105px;
	height: 38px;
	line-height: 38px;
	background: #fff;
	color: #000;
	text-align: center;
	margin-right: 20px;
	box-shadow: 2px 2px #6e0d40;
	border-radius: 5px;
	float: left;
}
footer .utility_popup .font_size a.smaller{
	font-size: .8em;
}
footer .utility_popup .font_size a.bigger{
	font-size: 1.2em;
	margin-right: 0;
}
footer .utility_popup .font_size a.active{
	background: #f9ae00;
	box-shadow: -2px -2px #6e0d40;
}
footer .utility_popup .theme {
	border-top: 1px solid #98053a;
	padding: 25px 0;
	text-align: center;
}
footer .utility_popup .theme a{
	display: block;
	width: 46px;
	border: 6px solid #fff;
	border-radius: 5px;
	float: left;
	color: #000;
	border-radius: 5px;
	background: #fff url(img/sprite.png) no-repeat -60px -435px;
	margin-right: 25px;
	padding-top: 38px;
	font-size: 0.8em;
	box-shadow: 2px 2px #6e0d40;
}
footer .utility_popup .theme a.active {
	border-color: #f9ae00;
	background-color: #f9ae00;
	box-shadow: -2px -2px #6e0d40;
}
footer .utility_popup .theme a.dark{
	background-position: -120px -435px;
}
footer .utility_popup .theme a.brown{
	background-position: -180px -435px;
	margin-right: 0;
}
footer .utility_popup .gutter {
	height: 12px;
	background: #1358a5;
	border-radius: 4px;
	padding: 1px 0 1px 2px;
}
footer .utility_popup .gutter span {
	height: 11px;
	display: block;
	float: left;
	position: relative;
}
footer .utility_popup span.timer_left,
footer .utility_popup span.timer_right{
	width: 4px;
	background: url(img/sprite.png) no-repeat -80px -414px;
}

footer .utility_popup span.timer_right{
	background-position: -86px -414px;
}
footer .utility_popup span.timer_bar{
	width: 50%; /* @TODO - need to update this dynamically - just giving it some width here so we can see it. */
	background: url(img/timer_bar.png) repeat-x;
	transition: width .2s;
}
footer .utility_popup .time_remaining {
	border-bottom: 1px solid #2272cb;
	padding-bottom: 20px;
}
footer .utility_popup h5 {
	font-weight: 400;
	font-size: 0.8em;
	margin: 20px 0 10px;
	position: relative;
}
footer .utility_popup h5 > span{
	float: right;
	font-size: 1.8em;
	font-weight: 700;
	position: relative;
	top: -5px;
}
footer .utility_popup h5 span span{
	font-size: 0.5em;
	font-weight: 700;
	margin-left: 3px;
}
footer .answered_questions {
	padding-bottom: 20px;
}
footer .utility_popup .triangle{
	display: block;
	width: 16px;
	height: 9px;
	background: url(img/sprite.png) no-repeat -40px -145px;
	position: absolute;
	left: 126px;
	bottom: -9px;
}
footer .utility_popup.timer .triangle{
	background-position: -60px -145px;
}


/* ==========================================================================
   HELPER CLASSES
   ========================================================================== */

.bordered_text {
	background: #ededed;
	border: 10px solid #fff;
	border-radius: 10px;
	padding: 25px 20px;
}
.bordered_text ul,
.bordered_text p{
	/*font-size: 0.9em;*/
	margin: 0;
}
.bordered_text ul {
	margin: 15px 0;
	padding-left: 20px;
	font-weight: bold;
}
.drop_text {
	/* text-shadow: 3px 3px 1px rgba(0,0,0,0.1); */
}
.drop_box {
	box-shadow: 3px 3px 1px rgba(0,0,0,0.1);
}
body.login.persiangreen .inner .drop_text {
	text-shadow: 4px 4px #01a17a;
}
body.login.persiangreen .inner .drop_box {
	box-shadow: 4px 4px #01a17a;
}
body.login.limegreen .inner .drop_text {
	text-shadow: 4px 4px #01a17a;
}
body.login.limegreen .inner .drop_box {
	box-shadow: 4px 4px #01a17a;
}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

.tcenter {
	text-align: center;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}


/* ==========================================================================
   404 page not found / 500 server error / no internet
   ========================================================================== */
body.error_page {
	background-position: 95% 100%, 0 0;
	background-repeat: no-repeat, repeat;
}
body.error_page_inquiz {
	background-position: 95% 80%, 0 0;
}
body.not_found {
	background-image: url(img/404-dishes.png), url(img/bg_default.gif);
}
body.server_error {
	background-image: url(img/500-devices.png), url(img/bg_default.gif);
}
body.no_connection {
	background-image: url(img/no_connection.png), url(img/bg_default.gif);
}
body.error_page h2 {
	border-top: 5px solid #e1e1e1;
	margin-top: 31px;
	padding-top: 18px;
}
body.error_page p{
	font-size: 0.85em;
	margin: 0.5em 0 1em;
}
body.error_page .inner .btn {
	background: #323233;
	padding: 4px 15px 0 10px;
	border-radius: 6px;
	color: #fff;
	margin-top: 7px;
	margin-right: 20px;
	display: inline-block;
	line-height: 33px;
}
body.error_page .inner .btn span{
	width: 38px;
	height: 38px;
	background: url(img/sprite.png) no-repeat -210px -395px;
	display: block;
	float: left;
	margin-right: 8px;
}
body.error_page .inner .to_prev span{
	background-position: 0 -510px;
}
body.error_page .inner .resume span{
	background-position: -40px -510px;
}

/* ==========================================================================
   FORM AND NAV ERRORS
   ========================================================================== */
.error_wrapper {
	color: #d10202;
	float: left;
	position: relative;
}
footer .error_wrapper {
	float: none;
}
.error_wrapper input,
.error_wrapper textarea{
	border-color: #d10202 !important;
	border-width: 5px !important;
	color: #d10202 !important;
	float: none !important; /* allows the position absolute on the error_messages to work */
}
.error_wrapper .error_messages{
	position: absolute; /* allows width to auto-set itself based on width of input sibling - see http://stackoverflow.com/questions/14832760/constraining-a-divs-width-to-a-sibling-divs-width */
	list-style-type: none;
	margin: 0 15px 0 7px;
	background: #d10202 url(img/bg_error.png) no-repeat 10px 50%;
	color: #fff;
	border-radius: 0 0 5px 5px;
	clear: left;
	padding: 10px 8px 10px 50px;
	font-size: 0.9em;
}
footer .error_wrapper .error_messages{
	right: -30px;
	bottom: 60px;
	border-radius: 5px 5px 0 0;
	line-height: 1.5em;
	padding: 20px 20px 20px 50px;
	border: 4px solid #ae0000;
	border-bottom: 0;
	width: 227px;
	text-align: left;
}
footer .error_wrapper .error_messages:before {
	display: inline-block;
	position: absolute;
	top: 4px;
	right: 8px;
	content: "\00d7"; /* This will render the 'X' */
	font-weight: 300;
	font-size: 1.8em;
	font-family: Arial, sans-serif;
	cursor: pointer;
}
.error_wrapper .error_messages li {
	margin-bottom: 5px;
}
body.login .error_wrapper .error_messages {
	right: 3px;
	bottom: 45px;
	border-radius: 5px 5px 5px 0;
	border: 4px solid #ae0000;
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Style selector help tool. Can delete this once we go to production.
   ========================================================================== */

#styleSelector {
	position: absolute;
	left: 0px;
	top: 10px;
	background: #eee;
	border: 1px solid #333;
	padding: 5px 20px;
	width: 160px;
	border-radius: 0 10px 10px 0;
	transition: left .1s linear;
	font-size: 10px;
	z-index: 999;
}
#styleSelector.closed {
	left: -180px;
}
#styleSelector strong{
	display: block;
	font-size: 12px;
	margin: 15px 0 5px;
	clear: left;
}
#styleSelector input{

}
#styleSelector label{
	display: inline-block;
	margin: 0 0 5px 5px;
}
#styleSelector a{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 20px;
	background: #999;
	border-radius: 0 10px 10px 0;
	border-left: 1px solid green;
	font-size: 20px;
	color: #fff;
}
#styleSelector a span {
	display: none;
	position: absolute;
	top: 40%;
	left: 25%;
}
#styleSelector.open a span.open,
#styleSelector.closed a span.closed {
	display: block;
}

/* ==========================================================================
   Marking for backbone
   ========================================================================== */
div.correct, span.correct,
ul.select_ui .option.selected .checkbox span.correct,
body.results ul.select_ui .option.selected .checkbox span.correct {
	background: url(img/marking-icons.png) no-repeat 0 0 !important;
	display: inline-block;
	width: 32px;
	height: 32px;
}

div.incorrect, span.incorrect,
ul.select_ui .option.selected .checkbox span.incorrect,
body.results ul.select_ui .option.selected .checkbox span.incorrect  {
	background: url(img/marking-icons.png) no-repeat -32px 0 !important;
	display: inline-block;
	width: 32px;
	height: 32px;
}

/* ==========================================================================
   Sharing results
   ========================================================================== */

.reveal-modal input[type="text"] {
	padding: 9px 5px;
	border-radius: 8px;
	border: 2px solid #b3b3b3;
	max-width: 90%;
	color: #000;
	margin-right: 10px;
}
.reveal-modal .submit {
	margin-top: 60px;
	margin-bottom: 30px;
}
.reveal-modal a.btn {
	border-radius: 10px;
	color: #fff;
	height: 43px;
	background-color: #323233;
	padding: 10px 65px 10px 10px;
	position: relative;
	margin-right: 10px;
	z-index: 1;
}
.reveal-modal a span {
	display: block;
	width: 62px;
	height: 70px;
	position: absolute;
	right: -10px;
	top: -15px;
}
.reveal-modal a.download span {
	background: url(img/btn_download.png) no-repeat 100% 50%;
}
.reveal-modal a.email span {
	background: url(img/btn_email.png) no-repeat 100% 50%;
}
.reveal-modal a.logout span {
	background: url(img/btn_next.png) no-repeat 100% 50%;
}
.reveal-modal a.cancel span {
	background: url(img/btn_back.png) no-repeat 100% 50%;
}
.reveal-modal div.error_wrapper {
	float: none;
}

/* ==========================================================================
   Custom font sizes used by ckeditor styles
   ========================================================================== */
.size-1 {font-size: 0.7em !important}
.size-2 {font-size: 0.8em !important}
.size-3 {font-size: 0.9em !important}
.size-4 {font-size: 1em !important}
.size-5 {font-size: 1.2em !important}
.size-6 {font-size: 1.4em !important}
.size-7 {font-size: 1.6em !important}
.size-8 {font-size: 1.8em !important}

/* ==========================================================================
   Ajax loading.
   ========================================================================== */
#loading {
   position:fixed;
   z-index:999;
   top:0;
   left:0;
   width:100%;
   height: 100%;
   /*background:rgba(255,255,255,0.5);*/
   background: transparent;
}

/* ==========================================================================
   Login proteciton.
   ========================================================================== */
#loginProtection {
  clear: both;
}

/* ==========================================================================
   Notifications.
   ========================================================================== */
#notifications {
   z-index: 90000025;
   position: fixed;
   top: 0;
   right: 0;
   width: auto;
   height: 0;
   overflow: visible;
   background-color: #fff;
   font-size: 13px;
   text-align: center;
}
#notifications > div:not(.confirmation_container) {
  cursor: default;
  display: inline-block;
  zoom: 1;
  *display: inline;
  position: relative;
  background-color: #fff;
  border: solid 1px #fff;
  border-top: solid 1px #646464;
  -webkit-box-shadow: 0 -1px 2px rgba( 100 , 100 , 100 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -1px 2px rgba( 100 , 100 , 100 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 2px rgba( 100 , 100 , 100 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  background-image: -moz-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(100, 100, 100, 0.29)), color-stop(27%, rgba(100, 100, 100, 0.08)), color-stop(100%, rgba(100, 100, 100, 0.01)));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
  /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
  /* IE10+ */
  background-image: linear-gradient(to bottom, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #b8b8b8 , EndColorStr= #ffffff );
  padding: 15px 15px 15px;
  max-width: 460px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#notifications > div.warning {
  border: solid 1px #fff;
  border-top: solid 1px #ffa21d;
  -webkit-box-shadow: 0 -1px 2px rgba( 255 , 162 , 29 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -1px 2px rgba( 255 , 162 , 29 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 2px rgba( 255 , 162 , 29 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  background-image: -moz-linear-gradient(top, rgba(255, 162, 29, 0.29) 0%, rgba(255, 162, 29, 0.08) 27%, rgba(255, 162, 29, 0.01) 100%);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 162, 29, 0.29)), color-stop(27%, rgba(255, 162, 29, 0.08)), color-stop(100%, rgba(255, 162, 29, 0.01)));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, rgba(255, 162, 29, 0.29) 0%, rgba(255, 162, 29, 0.08) 27%, rgba(255, 162, 29, 0.01) 100%);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, rgba(255, 162, 29, 0.29) 0%, rgba(255, 162, 29, 0.08) 27%, rgba(255, 162, 29, 0.01) 100%);
  /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, rgba(255, 162, 29, 0.29) 0%, rgba(255, 162, 29, 0.08) 27%, rgba(255, 162, 29, 0.01) 100%);
  /* IE10+ */
  background-image: linear-gradient(to bottom, rgba(255, 162, 29, 0.29) 0%, rgba(255, 162, 29, 0.08) 27%, rgba(255, 162, 29, 0.01) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #ffe7c5 , EndColorStr= #ffffff );
}
#notifications > div.error {
  border: solid 1px #fff;
  border-top: solid 1px #da4f49;
  -webkit-box-shadow: 0 -1px 2px rgba( 218 , 79 , 73 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -1px 2px rgba( 218 , 79 , 73 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 2px rgba( 218 , 79 , 73 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  background-image: -moz-linear-gradient(top, rgba(218, 79, 73, 0.29) 0%, rgba(218, 79, 73, 0.08) 27%, rgba(218, 79, 73, 0.01) 100%);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 79, 73, 0.29)), color-stop(27%, rgba(218, 79, 73, 0.08)), color-stop(100%, rgba(218, 79, 73, 0.01)));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, rgba(218, 79, 73, 0.29) 0%, rgba(218, 79, 73, 0.08) 27%, rgba(218, 79, 73, 0.01) 100%);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, rgba(218, 79, 73, 0.29) 0%, rgba(218, 79, 73, 0.08) 27%, rgba(218, 79, 73, 0.01) 100%);
  /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, rgba(218, 79, 73, 0.29) 0%, rgba(218, 79, 73, 0.08) 27%, rgba(218, 79, 73, 0.01) 100%);
  /* IE10+ */
  background-image: linear-gradient(to bottom, rgba(218, 79, 73, 0.29) 0%, rgba(218, 79, 73, 0.08) 27%, rgba(218, 79, 73, 0.01) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #f6d6d5 , EndColorStr= #ffffff );
}
#notifications > div.information {
  border: solid 1px #fff;
  border-top: solid 1px #49afcd;
  -webkit-box-shadow: 0 -1px 2px rgba( 73 , 175 , 205 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -1px 2px rgba( 73 , 175 , 205 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 2px rgba( 73 , 175 , 205 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  background-image: -moz-linear-gradient(top, rgba(73, 175, 205, 0.29) 0%, rgba(73, 175, 205, 0.08) 27%, rgba(73, 175, 205, 0.01) 100%);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(73, 175, 205, 0.29)), color-stop(27%, rgba(73, 175, 205, 0.08)), color-stop(100%, rgba(73, 175, 205, 0.01)));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, rgba(73, 175, 205, 0.29) 0%, rgba(73, 175, 205, 0.08) 27%, rgba(73, 175, 205, 0.01) 100%);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, rgba(73, 175, 205, 0.29) 0%, rgba(73, 175, 205, 0.08) 27%, rgba(73, 175, 205, 0.01) 100%);
  /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, rgba(73, 175, 205, 0.29) 0%, rgba(73, 175, 205, 0.08) 27%, rgba(73, 175, 205, 0.01) 100%);
  /* IE10+ */
  background-image: linear-gradient(to bottom, rgba(73, 175, 205, 0.29) 0%, rgba(73, 175, 205, 0.08) 27%, rgba(73, 175, 205, 0.01) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #cde9f1 , EndColorStr= #ffffff );
}
#notifications > div.success {
	/*
  border: solid 1px #fff;
  border-top: solid 1px #1fb900;
  -webkit-box-shadow: 0 -1px 2px rgba( 18, 107, 0 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -1px 2px rgba( 18, 107, 0 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 2px rgba( 18, 107, 0 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
  background-image: -moz-linear-gradient(top, rgba(18, 107, 0, 0.29) 0%, rgba(18, 107, 0, 0.08) 27%, rgba(18, 107, 0, 0.01) 100%);
  */
  /* FF3.6+ */
  /*
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(18, 107, 0, 0.29)), color-stop(27%, rgba(18, 107, 0, 0.08)), color-stop(100%, rgba(18, 107, 0, 0.01)));
  */
  /* Chrome,Safari4+ */
  /*
  background-image: -webkit-linear-gradient(top, rgba(18, 107, 0, 0.29) 0%, rgba(18, 107, 0, 0.08) 27%, rgba(18, 107, 0, 0.01) 100%);
  */
  /* Chrome10+,Safari5.1+ */
  /*
  background-image: -o-linear-gradient(top, rgba(18, 107, 0, 0.29) 0%, rgba(18, 107, 0, 0.08) 27%, rgba(18, 107, 0, 0.01) 100%);
  */
  /* Opera 11.10+ */
  /*
  background-image: -ms-linear-gradient(top, rgba(18, 107, 0, 0.29) 0%, rgba(18, 107, 0, 0.08) 27%, rgba(18, 107, 0, 0.01) 100%);
  */
  /* IE10+ */
  /*
  background-image: linear-gradient(to bottom, rgba(18, 107, 0, 0.29) 0%, rgba(18, 107, 0, 0.08) 27%, rgba(18, 107, 0, 0.01) 100%);
  */
  /* W3C */
  /*
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #f4fff4 , EndColorStr= #ffffff );
  */
}
/* ==========================================================================
   Notifications - Confirmation Dialog.
   ========================================================================== */
#notifications div.confirmation_container {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
}
#notifications div.confirmation {
	cursor: default;
	zoom: 1;
	display: block;
	opacity: 1;
	position: fixed;
	z-index: 10003;
	top: 50%;
	left: 50%;
	width: 420px;
	max-width: 420px;
	padding: 15px 30px 30px;
	margin: -110px 0 0 -241px;
	background-color: #fff;
	border: solid 1px #fff;
	border-top: solid 1px #646464;
	-webkit-box-shadow: 0 -1px 2px rgba( 100 , 100 , 100 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 -1px 2px rgba( 100 , 100 , 100 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 -1px 2px rgba( 100 , 100 , 100 ,.4), 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
	background-image: -moz-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
	/* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(100, 100, 100, 0.29)), color-stop(27%, rgba(100, 100, 100, 0.08)), color-stop(100%, rgba(100, 100, 100, 0.01)));
	/* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
	/* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
	/* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
	/* IE10+ */
	background-image: linear-gradient(to bottom, rgba(100, 100, 100, 0.29) 0%, rgba(100, 100, 100, 0.08) 27%, rgba(100, 100, 100, 0.01) 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #b8b8b8 , EndColorStr= #ffffff );
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#notifications div.confirmation div.title {
  font-weight: bold;
  text-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0px #fff;
  -moz-box-shadow: 0 1px 0px #fff;
  box-shadow: 0 1px 0px #fff;
  border-bottom: solid 1px rgba(0, 0, 0, 0.06);
  margin: 0 -30px 20px;
  padding: 0 33px 10px;
}
#notifications div.confirmation div.message {
	text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#notifications div.confirmation div.message > p:first-child{
	margin-top: 0;
}
#notifications div.confirmation div.message > p:last-child{
	margin-bottom: 0;
}
#notifications div.confirmation div.btns {
  text-align: center;
  background: rgba(255, 255, 255, 0.47);
  padding: 13px 10px 14px 10px;
  -webkit-box-shadow: 0 -1px 0 white, inset 0 2px 3px rgba(185, 185, 185, 0.27);
  -moz-box-shadow: 0 -1px 0 white, inset 0 2px 3px rgba(185, 185, 185, 0.27);
  box-shadow: 0 -1px 0 white, inset 0 2px 3px rgba(185, 185, 185, 0.27);
  border-top: solid 1px rgba(0, 0, 0, 0.14);
  margin: 25px -30px -30px;
}
#notifications div.confirmation div.btns button {
  border: solid 1px #D1D1D1;
  background-color: white;
  padding: 5px 20px;
  margin: 0 40px;
  text-shadow: 0 1px 0 #E9E9E9;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(111, 111, 111, 0.18), inset 0 0 8px rgba(150, 150, 150, 0.21);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(111, 111, 111, 0.18), inset 0 0 8px rgba(150, 150, 150, 0.21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(111, 111, 111, 0.18), inset 0 0 8px rgba(150, 150, 150, 0.21);
}
#notifications div.confirmation div.btns button:hover,
#notifications div.confirmation div.btns button.hover {
  border: solid 1px silver;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 2px rgba(48, 48, 48, 0.21), inset 0 0 8px rgba(117, 117, 117, 0.21);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 2px rgba(48, 48, 48, 0.21), inset 0 0 8px rgba(117, 117, 117, 0.21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 2px rgba(48, 48, 48, 0.21), inset 0 0 8px rgba(117, 117, 117, 0.21);
}
#notifications div.confirmation div.btns button:active,
#notifications div.confirmation div.btns button.active {
  border: solid 1px silver;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(48, 48, 48, 0.4), inset 0 0 20px rgba(117, 117, 117, 0.3);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(48, 48, 48, 0.4), inset 0 0 20px rgba(117, 117, 117, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(48, 48, 48, 0.4), inset 0 0 20px rgba(117, 117, 117, 0.3);
}
 /* ==========================================================================
    Default Jplayer CSS when displayed in the quiz delivery system.
    ========================================================================== */
.media_container .jp-audio ul,
.media_container .jp-audio li{
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.media_container .jp-audio .jp-interface {
  width: 84px;
  display: block;
  margin: 0 auto;
  position: relative;
}
.media_container .jp-audio .jp-interface .jp-controls {
	padding: 10px;
}
.media_container .jp-audio .jp-interface .jp-controls a {
  width: 84px;
  height: 84px;
  text-indent:-9999px;
  position: relative;
  display: inline-block;
  background: linear-gradient(#fff, #ccc), #c9c5c9;
  border-radius: 50%;
  border: 0 solid rgba(208,208,208,1.000);
  /*box-shadow: 0 6.24px 7.28px rgba(0,0,0,.4);*/
}
.media_container .jp-audio .jp-interface .jp-controls a:hover {
  /*background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9 ;*/
}
.media_container .jp-audio .jp-interface .jp-controls a:before,
.media_container .jp-audio .jp-interface .jp-controls a:after {
  position: absolute;
  content: " ";
}
/* Play */
.media_container .jp-audio .jp-interface .jp-controls a.jp-play:before {
	z-index: 2;
	width: 0;
	height: 0;
  top: 17px;
  left: 30px;
  border: 26.2px solid transparent;
  border-left-color: #888;
  border-left-width: 36.8px;
}
.media_container .jp-audio .jp-interface .jp-controls a.jp-play:hover:before {
	border-left-color: #333;
}
/* Pause */
.media_container .jp-audio a.jp-pause:before,
.media_container .jp-audio a.jp-pause:after {
  height: 40.88px;
  width: 15.76px;
  top: 21px;
  left: 22px;
  display: block;
  background-color: #888;
}
.media_container .jp-audio a.jp-pause:after {
  left: 48px;
}
.media_container .jp-audio a.jp-pause:hover:before,
.media_container .jp-audio a.jp-pause:hover:after {
  background-color: #333;
}

.media_container .jp-audio .jp-interface .jp-controls a.jp-stop,
.media_container .jp-audio .jp-interface .jp-controls a.jp-mute,
.media_container .jp-audio .jp-interface .jp-controls a.jp-unmute,
.media_container .jp-audio .jp-interface .jp-controls a.jp-previous,
.media_container .jp-audio .jp-interface .jp-controls a.jp-next,
.media_container .jp-audio .jp-interface .jp-progress,
.media_container .jp-audio .jp-interface .jp-volume-bar,
.media_container .jp-audio .jp-interface .jp-current-time,
.media_container .jp-audio .jp-interface .jp-duration,
.media_container .jp-audio .jp-playlist {
  display: none !important; /* Important is needed as the jplayer js adds display: block; into the markup for dynamic buttons. */
}
.media_container .jp-audio .jp-interface .jp-custom-progress {
  position: absolute;
  top: 0;
  left: 0;
}
.media_container .jp-audio .jp-interface .jp-custom-progress canvas {

}

.media_container.played {
  opacity:.50;
  -moz-opacity:.50;
  filter:alpha(opacity=50);
}
.media_container.played .jp-audio a.jp-play:hover:before{
  border-left-color: #888 !important;
}
.media_container.played .jp-audio a.jp-pause:hover:before,
.media_container.played .jp-audio a.jp-pause:hover:after{
  background-color: #888 !important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}

#footer .audio {
  background-image: url(img_2x/audio.png);
  background-size: 36px 36px;
  display: inline-block;
  height: 36px;
  width: 36px;
}

#footer .calculator {
  background-image: url(img/Calculator.png);
  background-size: 36px 36px;
  display: inline-block;
  height: 36px;
  width: 36px;
  background-position-x: 2px;
  background-position-y: 0px;
}

#footer .calculator.disabled {
  background-image: url(img/Calculator_off.png);
}

/* ==========================================================================
    Audio support / text-to-speech enhancements
   ========================================================================== */

.focus {
  /*background: rgb(255,255,255); /* for IE */
  /*background: rgba(255,255,255,1);
  border-radius: 5px;*/
  font-weight: bold;
  /*z-index: 1000;*/
}


/* ==========================================================================
    Demographic questions
   ========================================================================== */
body.demographics .demographic_question {
  padding: 0 0 20px 0;
}
body.demographics .demographic_question input[type="text"] {
  position:relative;
  padding: 9px 5px;
  border-radius: 8px;
  border: 2px solid #b3b3b3;
  width: 92.5%;
  color: #000;
  font-weight: normal;
  float: none;
  margin-right: 10px;
  text-transform: none;
}
body.demographics .demographic_question textarea {
  padding: 9px 5px;
  border-radius: 8px;
  border: 2px solid #b3b3b3;
  width: 92.5%;
  color: #000;
  float: none;
}
body.demographics .mCS_no_scrollbar .demographic_question input[type="text"],
body.demographics .mCS_no_scrollbar .demographic_question textarea {
  width: 97.5%;
}

/* ==========================================================================
    Resources footer popup
   ========================================================================== */
nav.resources {
  display: none;
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
nav.resources a,
nav.resources a:active,
nav.resources a:hover,
nav.resources a:visited {
  color: #fff;
}
nav.resources .container {
  line-height: 50px;
  background: #333 url(img/bg_footer.gif);
  border-radius: 10px;
  border-right: 4px solid #d6d6d6;
  border-radius: 10px 10px 0 0;
}
nav.resources .container .hide {
  font-weight: 500;
  vertical-align: top;
  height: 15px;
  line-height: 15px;
  padding: 8px 8px 0 0;
  float: right;
  cursor: pointer;
}
nav.resources ul,
nav.resources ul li{
  line-height: 25px;
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
}
nav.resources ul {
  clear: both;
  padding: 0 0 15px 0;
}
nav.resources ul li {
  padding: 0 15px;
}
nav.resources ul li a {
  height: 33px;
  line-height: 33px;
  vertical-align: top;
}
nav.resources ul li a span {
  display: inline-block;
  background: url(img/document_icons.png) no-repeat -60px -7px; /*Default to doc*/
  width: 30px;
  height: 33px;
  line-height: 33px;
  padding: 0;
  margin: 0 5px 0 0;
}
nav.resources ul li a.application-pdf span {
  background-position: -10px -7px;
}
nav.resources ul li a.image-jpg span,
nav.resources ul li a.image-jpeg span {
  background-position: -10px -54px;
}
nav.resources ul li a.image-png span {
  background-position: -110px -54px;
}
#footer .show_resources {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  vertical-align: top;
  margin: 0;
  padding: 0 10px;
}