/************* GENERAL STYLES ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline; }

:focus { outline: 0; }

body {
    background: #e5f1f4;
	font-family: 'Cabin', Helvetica, Arial sans-serif;
	font-size: 18px;
	line-height: 1.4;
	color: #506165;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

    body.bg1 {
        background: url(../images/bg.jpg) bottom center fixed no-repeat #e5f1f4;
        -webkit-background-size: cover;
        background-size: cover; }

    body.bg2 {
        background: url(../images/bg2.jpg) left center fixed no-repeat #e5f1f4;
        -webkit-background-size: cover;
        background-size: cover; }

    body.bg3 {
        background: url(../images/bg3.jpg) left center fixed no-repeat #e5f1f4;
        -webkit-background-size: cover;
        background-size: cover; }

    body.bg4 {
        background: url(../images/bg4.jpg) left center fixed no-repeat #e5f1f4;
        -webkit-background-size: cover;
        background-size: cover; }

html, body { height: 100%; }

ul { list-style: none; }

ul.list {
	list-style: disc;
	padding: 0 0 25px 15px; }
	
	ul.list li { margin: 0 0 5px; }

    ul.list ul.list { padding: 5px 0 0 15px; }

ol { padding: 0 0 25px 23px; }

ol.abc { list-style: lower-alpha; }

    ol li { 
        padding: 0 0 0 5px;
        margin: 0 0 5px; }

#display_slider_full_answer { text-align: center; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0; }

caption, th, td {
	text-align: left;
	font-weight: normal; }

blockquote:before, blockquote:after,
q:before, q:after {
	content: ""; }

blockquote, q { quotes: "" ""; }

strong { font-weight: bold; }

em { font-style: italic; }

.hidden { display: none; }

dt { margin: 0 0 10px; }

dd { 
    padding: 0 0 0 20px;
    margin: 0 0 25px;
    border-left: 5px solid #9fb7bd;
    font-style: italic; }

    dd div { margin: 0 0 5px; }

.key { 
    margin: 0 10px 0 0;
    vertical-align: bottom; }

/*** FONT STYLES ***/
h1 { 
	font-size: 60px; 
	font-weight: bold;
	color: #333;
    line-height: 60px;
	margin: 0 0 30px; }

    h1 .questionNum { 
        float: right;
        margin: 12px 0 0;
        font-size: 24px;
        color: #9fb7bd; }

h4 {
    font-size: 22px; 
	font-weight: normal;
	color: #9fb7bd;
    line-height: normal;
	margin: 0 0 5px; }

a:link, a:visited { 
	color: #677fa5;
	text-decoration: none; }
	
a:hover { text-decoration: underline; }

a.btn_blue {
    display: inline-block;
    padding: 12px 40px;
    margin: 30px 0 0;
    background: #36859a;
    border-radius: 5px;
    border-bottom: 3px solid #1e687c;
    color: #fff;
    font-weight: bold; }

    a.btn_blue:hover { 
        background: #297589;
        text-decoration: none; }

p { margin-bottom: 25px; }

.txt_center { text-align: center; }

/************* STRUCTURE STYLES ***/
#pageOverlay {
    width: 100%;
    min-height: 100%;
    float: left;
    background: #007896;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    opacity: 0.65;
    position: fixed;
    z-index: -1; }

.wrapper {
	width: 960px;
	margin: 0 auto; }

/*** LOGIN ***/
#loginError {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 15px 0;
    background: #004151;
    border-top: 1px solid #2a8aac;
    text-align: center;
    color: #fff; }

#login {
    width: 100%;
    height: 100%;
    display: table;
    padding: 50px 0;
    font-size: 20px;
    box-sizing: border-box;
    color: #fff; }

    #login h1 { color: #fff; } 

    #login > div { 
        display: table-cell;
        vertical-align: middle; }

    #login .half {
        width: 50%;
        float: left; }

    #login .left { text-align: center; }

        #login .left img { margin: 60px 0 0; }
    
    #login form { 
        width: 80%;
        float: left;
        margin: 25px 0 0; }

    #login form .row {
        width: 100%;
        float: left;
        margin: 0 0 10px;
        position: relative; }

    #login form .row div { padding: 0 15px; } 

    #login form .row span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: #fff;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
        filter: alpha(opacity=65);
        opacity: 0.65;
        border-radius: 5px; }

    #login form input.text {
        width: 100%;
        float: left;
        padding: 15px 0 15px 30px;
        background: none;
        position: relative;
        z-index: 2;
        border: none;
        font: inherit;
        font-size: 16px;
        box-sizing: border-box; }

        #login form input.email { background: url(../images/icon_email.png) left no-repeat; }
        #login form input.password { background: url(../images/icon_password.png) left no-repeat; }

    #login form input.submit {
        width: 150px;
        float: left;
        padding: 15px 0;
        margin: 10px 0 0;
        background: #f4982c;
        background: -webkit-linear-gradient(top, #ffb43f, #e97b1a);
        background: -moz-linear-gradient(top, #ffb43f, #e97b1a);
        background: -ms-linear-gradient(top, #ffb43f, #e97b1a);
        background: -o-linear-gradient(top, #ffb43f, #e97b1a);
        border: none;
        border-bottom: 3px solid #b1551a;
        border-radius: 5px;
        font: inherit;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        cursor: pointer; }
        
        #login form input.submit:hover { background: #e97b1a; }

/*** HEADER ***/
header#main {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    color: #346b94; }
    
    header#main img.logo { 
        float: left;
        margin: 30px 0 0 45px; }
    
    header#main nav { 
        width: 50%;
        min-width: 700px;
        float: right;
        padding: 30px 45px 30px 0;
        background: #e5f1f4;
        border-bottom: 1px solid #d0e1e5;
        box-sizing: border-box;
        text-align: right; }

    header#main nav a:link, header nav a:visited {
        padding: 12px 25px;
        margin: 0 0 0 20px;
        background: #9bb7bf;
        border-radius: 5px;
        color: #fff;
        transition: all 0.3s ease; }
    
        header#main nav a:hover { 
            background: #6c909b;
            text-decoration: none; }

header#small {
    width: 100%;
    height: 250px;
    float: left;
    display: none; }

    body.bg2 header#small { 
        background: url(../images/bg2_small.jpg) bottom no-repeat;
        background-size: cover; }

    body.bg3 header#small { 
        background: url(../images/bg3_small.jpg) bottom no-repeat;
        background-size: cover; }

    body.bg4 header#small { 
        background: url(../images/bg4_small.jpg) bottom no-repeat;
        background-size: cover; }

/*** EXAM STRATEGIES ***/
section {
	width: 50%;
	min-width: 700px;
	height: 100%;
	float: right;
    padding: 180px 5% 0;
    background: #e5f1f4;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden; }

article {
    width: 100%;
    min-height: 80%;
    float: left;
    padding: 0 0 70px; }
    
.progressBar { 
	width: 100%;
	float: left;
	margin: 0 0 50px;
    font-size: 15px; }
	
	.progressBar label { float: left; }

    .progressBar div { 
        margin: 3px 0 0 70px;
        background: #fff;
        border: 1px solid #d0e1e5;
        border-radius: 20px;
        overflow: hidden; }

    .progressBar span {
		height: 15px;
		display: block;
		background: #36859a; }

.question {
    width: 100%;
    float: left;
    position: relative;
    padding: 40px 40px 50px;
    background: #fff;
    border: 1px solid #c7d2d4;
    box-sizing: border-box;
    box-shadow: 0 3px 3px #c7d2d4; }

.question.inline { margin: 30px 0 0; }

    .question .questionWrap { 
        width: 100%;
        float: left;
        margin: 0 0 15px; }

    .question .questionWrap2 { 
        width: 100%;
        float: left;
        margin: 0 0 50px; }

    .question .continue {
        color: #ef8718;
        position: absolute;
        bottom: 20px;
        right: 25px; }

    .question .blankSpace {
        width: 60px;
        display: inline-block;
        border-bottom: 1px solid #506165; }

    .question .highlight {
        color: #36859a;
        text-decoration: underline; }

    .question .col1 { 
        width: 60%;
        float: left; }

    .question .col2 { 
        width: 30%;
        float: right; }
    
        .question .col2 .val { float: left; }

#preTestWrap {
    width: 100%;
    min-height: 100px;
    float: left; }

/*** FORMS ***/
.rangesliderWrap { 
    width: 50%;
    padding: 20px 0 0;
    margin: 0 auto;
    position: relative; }

.rangesliderWrap .pole {
    width: 100px;
    position: absolute;
    top: 5px;
    text-align: center; }

    .rangesliderWrap .pole1 { left: -110px; }

    .rangesliderWrap .pole2 { right: -110px; }

output { 
    display: block;
    margin: 20px 0 0;
    text-align: center;
    font-weight: bold; }

label { display: block; }

label.radio { margin: 0 0 5px 0; }

form .val {
    display: block;
    padding: 3px;
    margin: 0 0 5px;
    border: 1px solid #fff;
    border-radius: 3px; }

    form .val_correct { 
        background: #e3f2e1;
        border: 1px solid #6dc15e; }

    form .val_wrong { 
        background: #f2dcdc;
        border: 1px solid #db5351; }

form .answer {
    display: none;
    padding: 20px 0 0;
    margin: 20px 0 0;
    border-top: 1px solid #ccc; }


/*** MEDIA QUERIES ***/

/*** RETINA ***/
@media all and (-webkit-min-device-pixel-ratio: 1.5) {

    #login form input.email { 
        background: url(../images/icon_email@2x.png) left no-repeat;
        background-size: 18px; }
    
    #login form input.password { 
        background: url(../images/icon_password@2x.png) left no-repeat;
        background-size: 18px; }
    
    body.bg2 header#small { background: url(../images/bg2_small@2x.jpg) bottom no-repeat; }
    body.bg3 header#small { background: url(../images/bg3_small@2x.jpg) bottom no-repeat; }
    body.bg4 header#small { background: url(../images/bg4_small@2x.jpg) bottom no-repeat; }

}

/*** 1000px ***/
@media all and (max-width: 1000px) {

    .wrapper { width: 90%; }
    
}

/*** 900px ***/
@media all and (max-width: 900px) {

    #login .half { width: 100%; }
    
    #login .left img { 
        display: none;
        margin: 0 0 50px; }
    
        #login .left img.hidden { display: inline; }
    
    #login form { width: 100%; }
    
    body:not(.bg1) { background: #e5f1f4; }
    
    body:not(.bg1) #pageOverlay { display: none; }
        
    header#main { 
        float: left;
        padding: 20px 0;
        border-bottom: 1px solid #d0e1e5;
        position: static; } 
    
        header#main img.logo { margin: 0 0 0 5%; }

        header#main nav { 
            width: auto;
            min-width: 1px;
            padding: 20px 5% 0 0;
            border: none; }
            
            header#main nav a { padding: 10px 20px !important; }
    
    header#small { display: block; }
    
    section { 
        width: 100%;
        min-width: 1px;
        height: auto;
        padding: 50px 5% 0;
        overflow: visible; }
    
    article { padding: 0 0 50px; }
    
}

/*** 500px ***/
@media all and (max-width: 600px) {

    .question .col1, .question .col2 { width: 100%; }
    
    .question .col1 { margin: 0 0 10px; }
    
        .question .col2 .val { float: none; }

}

/*** 500px ***/
@media all and (max-width: 500px) {
    
    h1 { 
        font-size: 50px;
        line-height: 45px; }
    
    #login .left img { width: 70%; }
    
    header#small { height: 200px; }
    
    .rangesliderWrap { width: 100%; }
    
    .rangesliderWrap .pole { display: none; }
    
}

/*** 400px ***/
@media all and (max-width: 400px) {
    
    h1 { font-size: 45px; }
    
    #login { 
        padding: 18px 0;
        font-size: 17px; }
    
        #login .left img { margin: 0 0 12px; }

        #login h1 { 
            font-size: 40px;
            margin: 0 0 8px; }
    
        #login p { margin-bottom: 16px; }

        #login form { margin: 0; }

        #login form input.text { padding: 9px 0 9px 30px; }
    
        #login form input.submit { 
            width: 100%;
            padding: 8px 0;
            margin: 0; }
    
    header#main { font-size: 15px; }
    
    header#small { display: none; }
    
    .progressBar { margin: 0 0 30px; }
    
}