/*
font-family: 'Raleway', sans-serif; 500 - 600 - 700
*/

/* #Basic Styles
================================================== */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { min-width: 320px; color: #5B5B5B; background: #FAFAFA; text-align: left; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-size: 13px; line-height: 1.5em; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-weight: 500; }
.hidden { display: none !important; visibility: hidden; }
.outline { outline: 1px solid red; }
.overflow { overflow: hidden; }

/* #Links
================================================== */
a, a:visited { color: #3C3D3C; text-decoration: none; outline: 0; font-weight: 500; color: #4A90E2; }
a:hover, a:focus, a:active { text-decoration: underline; color: #92BAB2; }
a, a:hover, a:active { transition: .2s all ease; }

/* #TEXT FORMATS
================================================== */
p, address { font-size: 0.833em; line-height: 1.5em; margin: 0.5em 0; letter-spacing: 0.02em; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2em; padding: 0; margin: 0.25em 0; }

/* #CONTENT
================================================== */

/*--- Login Page ---*/
.login-form { background: url('../images/bck.jpg') no-repeat center center fixed; background-size: cover; height: 100vh; min-height: 400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.ie8 .login-form { height: 100%; }
.form-box { height: 380px; width: 340px; margin: 0 auto; position: relative; top: 35%; transform: translateY(-35%); background: url('../images/login-bck.png') no-repeat; border: 1px solid #E3E3E3; box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.50); border-radius: 8px; }
.ie8 .form-box { margin: 120px auto 0 auto; }
.form-box img { display: block; margin: 30px auto; }
.form-box form { width: 100%; text-align: center; margin: 0 auto; font-size: 14px; }
.form-box form fieldset { border: 0; margin: 0; padding: 0; position: relative; }
.form-box form input[type="text"],input[type="password"], .form-box form input[type="email"] { border-radius: 4px; background: #FFF; border: 1px solid #CCCCCC; text-indent: 32px; padding: 13px 4px; outline: none; margin: 0 auto; display: block; width: 260px; margin-bottom: 20px; }
.form-box form input[type="text"]:focus,input[type="password"]:focus, .form-box form input[type="email"]:focus { border: 1px solid #888; box-shadow: none; background: #FFF; color: #1A1A1A; }
.form-box form fieldset:after { content: ''; display: block; position: absolute; top: 12px; left: 51px; }
.form-box form fieldset.user:after { width: 15px; height: 17px; background: url('../images/user-ico.png') no-repeat; }
.form-box form fieldset.pass:after { width: 14px; height: 18px; background: url('../images/pass-ico.png') no-repeat; }
::-webkit-input-placeholder { color: #999999; line-height: 1.25em; }
:-moz-placeholder { color: #999999; line-height: 1.25em; }
::-moz-placeholder { color: #999999; line-height: 1.25em; } 
:-ms-input-placeholder { color: #999999; line-height: 1.25em; }
.form-box form .send-btn { transition: .4s all ease; border: 0; background: #FF406A; box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.50), inset 0px 1px 3px 0px rgba(0,0,0,0.15); border-radius: 4px; font-weight: 700; color: #FFFFFF; letter-spacing: 1px; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); width: 260px; font-size: 20px; padding: 9px 0 8px 0; }
.form-box form .send-btn:hover { background: #D00000; }
.form-box form label.error { display: block; width: 100%; line-height: 1em; margin: -15px 0 10px 0; color: #FF406A; font-weight: 700; }
.form-box a.forgot { display: block; margin: 15px auto 0 auto; text-align: center; font-size: 14px; font-weight: 600; color: #4A90E2; text-shadow: 0px 1px 0px rgba(255,255,255,0.50); }
.form-box a.forgot:hover { text-decoration: underline; color: #9013FE; }

/*--- Detail Pages ---*/
.container { margin: 0 auto; max-width: 620px; background: #FFFFFF; border: 1px solid #E3E3E3; box-shadow: 0px 1px 0px 0px #FFFFFF; border-radius: 2px; }
.video-container { max-width: 780px; }
.container h3 { font-weight: 500; font-size: 24px; color: #FF406A; letter-spacing: 1px; text-align: center; margin: 0; padding: 21px 0 16px 0; position: relative; z-index: 1; }
.container h3:after { content: ''; display: block; position: absolute; background: url('../images/shadow.png') repeat-x; width: 100%; left: 0; height: 7px; bottom: -7px;}
.video-container h3 { font-size: 20px; text-align: left; padding: 16px 0 11px 15px; }

.container a > * { transition: all 0.25s ease; }
.container a.module-list-item { padding: 15px; overflow: hidden; display: block; background: #FFF; position: relative; z-index: 0; }
.container a.zebra { background: #F2F2F2; }
.container a.module-list-item .module-ico { padding: 11px; background: #FFF; border: 1px solid #D9D9D9; border-radius: 2px; float: left; margin-right: 17px; }
.container a.module-list-item span { font-weight: 600; font-size: 16px; color: #5B5B5B; display: block; margin-top: 3px; }
.container a.module-list-item small { display: block; font-size: 13px; color: #5B5B5B; }
.container a.module-list-item:hover, .container a.module-list-item:focus { text-decoration: none; padding-left: 25px; }
.container a.module-list-item:hover small, .container a.module-list-item:hover span { color: #FF406A; }
.container a.module-list-item:after { content: ''; position: absolute; background: url('../images/right-arrowi-ico.png'); width: 14px; height: 25px; display: block; right: 20px; top: 26px; transition: all 0.25s ease; }
.container a.module-list-item:hover:after { right: 10px; }

/*--- Video Iframe ---*/
.vid-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.vid-container iframe, .vid-container object, .vid-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*--- Text Iframe ---*/
.text-container { position: relative; padding-bottom: 75%; padding-top: 30px; height: 0; overflow: hidden; }
.text-container iframe, .text-container object, .text-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*--- Exam Button ---*/
button.exam-btn { display: block; margin: 30px auto 70px auto; border: 0; padding: 11px 25px 9px 25px; line-height: 1; transition: all 0.25s ease; background: #FF406A; box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.50), inset 0px 1px 3px 0px rgba(0,0,0,0.15); border-radius: 4px; font-weight: 700; font-size: 20px; color: #FFFFFF; letter-spacing: 1px; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); }
.ie8 .exam-btn { width: 280px; }
button.exam-btn:hover { background: #D00000; }

/*--- Bottom Buttons ---*/
a.btn-link { text-align: center; display: block; margin: 25px auto; padding: 13px; line-height: 1; font-size: 14px; font-weight: 600; color: #808080; text-shadow: 0px 1px 0px rgba(255,255,255,0.50); background: #E2E2E2; box-shadow: 0px 1px 0px 0px #FFFFFF; border-radius: 100px; text-decoration: none; position: relative; border: 1px solid #E2E2E2; }
a.btn-link:hover { background: #FFF; text-decoration: none; color: #808080; }

a.logout { width: 120px; text-indent: 15px; }
a.logout:after { content: ''; position: absolute; background: url('../images/logout-ico.png') no-repeat; display: block; width: 12px; height: 13px; left: 25px; top: 14px;}

a.back { width: 190px; text-indent: 13px; }
.ie8 a.back { width: 220px; }
a.back:after { content: ''; position: absolute; background: url('../images/left-arrow-ico.png') no-repeat; display: block; width: 12px; height: 13px; left: 15px; top: 14px;}

/* #HEADER
================================================== */
header { background: url('../images/header-bck.png') no-repeat top center; border: 1px solid #E3E3E3; padding: 20px 0; overflow: hidden; text-align: center; transition: all 0.4s ease; box-shadow: 0px 1px 0px 0px #FFFFFF; max-width: 620px; border-radius: 0 0 6px 6px; margin: 0 auto 30px auto; }
header img { width: auto; height: 70px; }