/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
select,
textarea {
    color: #222;
}

html {background: #2c3c4a url(../img/body-bg.png) repeat-x top; margin: 0;}

body {
    font-size: 13px;
    line-height: 1.4;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	background: url(../img/top-line.png) no-repeat top center;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations 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;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
#page {width:960px; margin:0 auto; padding: 12px 0  50px 0;}

#login { width: 692px; margin: 30px auto;}
#login h1 { text-align: center; text-transform: uppercase; font-size: 24px; color: #1d4971; font-weight: normal; text-shadow:0 1px 1px #fff; margin: 0;}
#login .login-form { background:url(../img/login-bg-no-kick.png) no-repeat top center; height: 405px; margin-top: -15px;}
#login form { display:block; padding: 45px 0 0;}
#login p { width: 340px; margin: 8px auto;}
#login p label { display: block; color: #ffba00; text-shadow:none; font-size: 16px;}
#login p input { width: 325px; height: 24px; line-height: 24px; padding: 3px 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #5b7da2 !important}
#login input:focus {border: 1px solid #2c4b6c !important}
#login form a { font-size: 14px; text-shadow:none; text-decoration: none; color: #ffbaaa; } 
#login .form-submit a, #reset-password .form-submit a { width: 80px; margin: 0 auto; float: none; height: 34px !important; line-height: 34px !important; font-size: 16px; text-align: center}

#reset-password {border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #315678; -moz-box-shadow: 0 0 10px #1e282f; -webkit-box-shadow: 0 0 10px #1e282f; box-shadow: 0 0 10px #1e282f; background: #fff url(../img/content-pattern.gif); padding: 15px; width: 500px; margin: 45px auto 100px auto;  }

.clearfix:after {content: "."; display: block;  clear: both; visibility: hidden;}
.clr { clear:both;}
.fll {float:left !important;}
.flr {float:right !important;}
.ofl { overflow:hidden;}
.scroll {overflow-y: auto; overflow-x: none;}
.order1 { z-index: 1;}
.order2 { z-index: 2;}
.order3 { z-index: 3;}
.order4 { z-index: 4;}
.order5 { z-index: 5;}
.order6 { z-index: 6;}
.order7 { z-index: 7;}
.order8 { z-index: 8;}
.order9 { z-index: 9;}

/*--- Form ---*/
label, input, textarea, select { font: bold 14px/22px Arial, Helvetica, sans-serif; text-shadow: 0 0 1px #fff;}
input, select, textarea { height: 20px; line-height: 20px; padding: 2px 4px; background: #f2f2f2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #a8a8a8; }
input:focus, textarea:focus { background: #fff; border: 1px solid #7d7d7d}
select { height: 24px; line-height: 24px; text-shadow: none; 
	}

#calendarFilter { position:absolute; right: 10px; top: 7px; z-index: 5; border-left: 1px solid #7d7d7d; padding-left: 12px;}
#calendarFilter label { padding-right: 8px; text-shadow: 0 0 1px #fff}
#calendarFilter select {
	-moz-box-shadow:    inset 0 0 3px #898989;
	-webkit-box-shadow: inset 0 0 3px #898989;
	box-shadow:         inset 0 0 3px #898989;}

a.form-btn { display:block; margin-right: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #365b7d; height: 30px; line-height: 30px; padding: 0 30px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 1px #000; text-decoration: none; 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#154f84,endColorstr=#458ac7);
background-image: linear-gradient(bottom, rgb(14,78,137) 0%, rgb(44,107,162) 54%, rgb(73,150,201) 100%);
background-image: -o-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(44,107,162) 54%, rgb(73,150,201) 100%);
background-image: -moz-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(44,107,162) 54%, rgb(73,150,201) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(44,107,162) 54%, rgb(73,150,201) 100%);
background-image: -ms-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(44,107,162) 54%, rgb(73,150,201) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(14,78,137)),
	color-stop(0.54, rgb(44,107,162)),
	color-stop(1, rgb(73,150,201))
);

}

a.form-btn:hover{

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1d588e,endColorstr=#4c93d3);
background-image: linear-gradient(bottom, rgb(14,78,137) 0%, rgb(45,120,161) 54%, rgb(81,175,219) 100%);
background-image: -o-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(45,120,161) 54%, rgb(81,175,219) 100%);
background-image: -moz-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(45,120,161) 54%, rgb(81,175,219) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(45,120,161) 54%, rgb(81,175,219) 100%);
background-image: -ms-linear-gradient(bottom, rgb(14,78,137) 0%, rgb(45,120,161) 54%, rgb(81,175,219) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(14,78,137)),
	color-stop(0.54, rgb(45,120,161)),
	color-stop(1, rgb(81,175,219))
);

}

.form-submit { padding: 12px 0 0 0;}

/*----Buttons---*/
a.view-detail, a.edit-btn, a.info-btn, a.logout, a.reply-btn { display:block; background:url(../img/sprites/icons.png) no-repeat; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; text-decoration: none; }
	
a.view-detail {background-position: right 2px; padding-right: 30px; text-decoration: none; margin-top: 55px;}
a.edit-btn { background-position: right -114px; padding-right: 32px; height: 25px; line-height: 25px; margin-right: 10px; }
a.info-btn {background-position: left -84px; padding-left: 35px; margin: 45px 0 0 18px;}
a.reply-btn {background-position: -3px -26px; padding-left: 30px; }

/*--- page styles ---*/
#header {}
	.top-header { height: 83px;}
	.portal-tt { margin: 26px 0 0 60px}
	
	#logged {width: 240px; padding-top: 5px;}
	#logged .avatar, .ac-avatar { 
		display:block; 
		width: 55px; 
		height: 55px; 
		border-radius: 5px; 
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px;
		-moz-box-shadow:    0 0 3px #898989;
		-webkit-box-shadow: 0 0 3px #898989;
		box-shadow:         0 0 3px #898989;
		margin-right: 15px
	}
	#logged .avatar img { max-width: 55px;}
	#logged .user { margin: 0; text-align: right; color: #fff;}
	#logged .user a { display:block; overflow:hidden; color: #fff; text-shadow: 0 1px 1px #000; text-decoration: none; cursor: pointer}
	#logged .user span { color: #ffba00; font-size: 14px; font-weight: bold;}
	#logged a.logout {  background-position: right -55px; height: 28px; line-height: 28px; padding-right: 32px; font-weight: normal; margin-top: 5px;}
	
	#menu, #footer { background:url(../img/nav-bar.png) no-repeat top center; height: 48px;}
	.slogan {background: url(../img/moto-merge.png) no-repeat left center; width: 430px; height: 48px;}
	#menu ul { list-style: none; padding: 0; margin: 0;}
	#menu ul li { float:left; display:block; margin-left: 25px; height: 48px;}
	#menu ul li a {display: block; height: 47px; font: bold 17px/47px Arial, Helvetica, sans-serif; text-transform:uppercase; color: #c8c8c8; text-shadow: 1px 1px 2px #000; text-decoration: none}
	#menu ul li a:hover, #logged a.logout:hover {color: #ffba00;}
	#menu ul li.active a {color: #ffba00; background: url(../img/menu-arr.png) no-repeat bottom center;}

#main { padding: 20px 0;}
	.content { overflow:hidden; position:relative;}
	.content-block { background: #fff url(../img/content-pattern.gif); 
		-moz-box-shadow:    0 0 1px #111;
		-webkit-box-shadow: 0 0 1px #111;
		box-shadow:         0 0 1px #111;}
	.content-block-with-sidebar { width: 690px; float: right;}
	.sidebar {width: 250px; position:relative}
	/*---Calendar---*/
	.status-bar {height: 27px; line-height: 27px; text-indent: 15px; background: #fff url(../img/content-pattern.gif)}
	#eventDetail .event-header {background:#e7e7e7; text-shadow: 0 0 1px #fff; padding: 12px 15px 8px 15px; height: 85px;}
	#eventDetail .event-icon { width: 40px;}
	#eventDetail .event-info { margin-left: 40px;}
	#eventDetail .event-info h2 { margin-bottom: 5px;}
	#eventDetail .event-info h1 { margin-bottom: 5px; color: #00518a }
	#eventDetail .event-info h3 span {color: #00518a}
	#eventDetail .event-detail-content { margin: 1px; height: 445px;}
	#eventDetail ul { list-style: none; padding: 0 15px; margin: 0;}
	#eventDetail ul li { padding: 15px 0; border-bottom: 1px solid #e3e3e3; border-top: 1px solid #fff; color: #00518a }
	#eventDetail ul li span { font-weight: bold; text-transform: uppercase; color: #333;}
	
	.day-event-list ul { list-style: none; padding: 0; margin: 0;}
	.day-event-list ul li { border-bottom: 1px solid #e5e5e5; padding: 10px; background: url(../img/event-dot.png) no-repeat 8px center; padding-left: 20px; font-weight: bold; font-size: 14px;}
	.day-event-list ul li span { display:block; text-transform: uppercase; margin-right: 8px; }
	.day-event-list ul li a {color: #00518a; text-decoration: none;}
	.day-event-list ul li a:hover {color: #0061a5}
	.sidebar .status-bar { position:absolute; bottom: 0; left: 0; width: 250px; border-top: 1px solid #ccc}

/*---Profile----*/
	.ac-avatar { 
		width: 125px; 
		height: 125px; 
		overflow:hidden;
		border: 1px solid #CCC;
		margin-right: 20px;
	}
	
	.ac-header { background: #e6ecf1 url(../img/profile-bg.jpg) no-repeat top right; padding: 15px;}
	.ac-header h1 {color: #1d4971; font-size: 26px; margin-bottom: 5px;}
	.ac-header h3 span { font-size: 16px}
	
	.std-list, .std-detail-pane, .std-pretest-header { background: #bbd4ea url(../img/shd-top.png) repeat-x top; border-style: solid; border-width: 1px; border-color: #b6b6b6 #e6ecf1 #e6ecf1; min-height: 392px;}
	.std-detail-pane {min-height: 550px; border: none}
	.std-pretest-header {height: 155px; padding: 20px 15px}
	h2.bl-title { background: #1d4971; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; width: 125px; text-align: center; text-transform: uppercase; text-shadow: 0 0 1px #000; color: #fff; margin-left: 15px; line-height: 32px;}
	.std-item, .std-detail-content {padding: 20px 0; border-bottom: 1px solid #8cafd2; margin: 0 15px; overflow:hidden;}
	.std-item h1, .std-detail-content h1 { font-size: 23px; margin-top: -7px; margin-bottom: 5px; color: #1d4971; text-shadow: 0 0 1px #fff}
	.std-item h1 a { text-decoration:none; color: #1d4971;}
	.std-info { width: 355px; overflow:hidden;}
	
	.status-title {font-size: 16px; color: #1d4971; text-shadow: 0 0 1px #fff; margin: -5px 0 10px; }
	
	.std-detail-content {border: none; padding-bottom: 10px;}	
	.belt-awards .belt-block, .belt-awards .awards-block { position:relative; width: 165px; height: 55px; border: 1px solid #676767;}
	.belt-awards img { width: 165px; height: 55px;}
	.belt-awards .belt-level {position:absolute; z-index: 1; top: 0; left: 0;}
	.belt-awards .stripes {position:absolute; z-index: 2; top: 0; left: 0;}
	.belt-awards .stripes-ctn {position:relative; z-index: 1;}
	.belt-awards .stripes-ctn img { position: absolute; top: 0; left: 0;}
	.belt-awards .awards-block { background: #fff;}
	.belt-awards .awards-block img { position:absolute; top: 0; left: 0;}
	
	.attendance-status { padding-top: 12px; font-weight: bold; text-shadow: 0 0 1px #fff; font-size: 14px; line-height: 24px;}
	.progress-bar { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-style: solid; border-width: 1px; border-color: #5b86aa; height: 24px; width: 205px; background: #fff; -moz-box-shadow:   inset 0 0 6px #bcbcbc;
		-webkit-box-shadow: inset 0 0 6px #bcbcbc;
		box-shadow:         inset 0 0 6px #bcbcbc;}
	.progress-bar .progress { background:url(../img/progress-bar-bg.gif) repeat-x; height: 24px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-size: 16px; color: #fff; text-shadow: 0 1px 1px #000; line-height: 24px; text-align: right; }
	.progress-bar .progress span {padding-right: 10px;}
	.st-status { padding: 10px 0; font-size: 16px; font-weight: bold; color: #1d4971; line-height: 20px; text-shadow: 0 0 1px #fff }
	.st-status span { padding-right: 10px; font-size: 14px; color: #333;}
	
	#editProfile { padding: 15px; overflow:hidden; min-height: 540px}
	.ac-photo { position:relative; padding: 10px 0 10px 10px;}
	.ac-photo p { text-align: center; width: 125px; font-weight: bold; padding-top: 6px; clear: both; font-size: 14px;}
	#avatarEdit { position:absolute; z-index: 5; top: 158px; left: 0; height: 155px; }
	#avatarEdit .point-arrow {display: block; background:url(../img/popup-arrow.png) no-repeat; width: 16px; height: 11px; position: absolute; top: -11px; left: 24px; z-index: 5;}
	#avatarEdit .pane-ctn { 
		margin-top: 10px; border: 1px solid #6d8baa;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9bbcdb,endColorstr=#b5cfe8);
		background-image: linear-gradient(bottom, rgb(155,188,219) 0%, rgb(155,188,219) 54%, rgb(181,207,232) 100%);
		background-image: -o-linear-gradient(bottom, rgb(155,188,219) 0%, rgb(155,188,219) 54%, rgb(181,207,232) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(155,188,219) 0%, rgb(155,188,219) 54%, rgb(181,207,232) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(155,188,219) 0%, rgb(155,188,219) 54%, rgb(181,207,232) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(155,188,219) 0%, rgb(155,188,219) 54%, rgb(181,207,232) 100%);
		
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(155,188,219)),
			color-stop(0.54, rgb(155,188,219)),
			color-stop(1, rgb(181,207,232))
		);
		padding: 20px;
		position:relative;
		
		-moz-box-shadow:    0 2px 5px #858585;
		-webkit-box-shadow: 0 2px 5px #858585;
		box-shadow:         0 2px 5px #858585;
	}
	
	#avatarEdit input { height: auto;}
	#avatarEdit a.close-btn { display:block; position:absolute; right: 8px; top: 8px; width: 22px; height: 22px; background:url(../img/sprites/close-btn.png) no-repeat top center;}
	#avatarEdit a.close-btn:hover {background-position: -2px -23px}
	
	.edit-form { width: 450px; margin-right: 35px}
	.edit-form input { width: 310px;}
	.edit-form p {padding: 4px 0;}
	.edit-form p span { display:block; width:320px;}
	.edit-form select.state { width: 160px;}
	.edit-form select.month { width: 130px;}
	.edit-form select.year { width: 80px; margin-left: 12px;}
	.edit-form input.zip, .edit-form select.day {width: 56px; margin-left: 10px;}
	.edit-form form fieldset {border-bottom: 1px solid #d6d6d6; padding-bottom: 10px;}
	.edit-form form h3 { margin-top: 10px; color: #1D4971}
	.edit-form .form-submit { padding: 12px 0 0 128px;}
	
	/*--- Student profile ---*/
	#knowledgeContent { height: 460px; width: 860px; padding:1px; -moz-box-shadow:  0 2px 5px #383838; -webkit-box-shadow: 0 2px 5px #383838; box-shadow:  0 2px 5px #383838;}
	#knowledgeContent .header-bar { background: #1d4971; height: 38px; line-height: 38px; color: #fff; font-size: 16px; font-weight: bold; text-shadow: 0 1px 1px #000; text-transform: uppercase; text-indent: 15px;}
	#knowledgeContent .content-cnt {height: 420px;}
	#knowledgeContent ul { list-style: none; padding: 25px 0 20px 0; margin: 0;}
	#knowledgeContent ul li { float: left; width: 165px; margin: 0 10px 0 30px; text-align: center; font-size: 14px; font-weight: bold; line-height: 22px;}
	#knowledgeContent ul li p { margin-top: 5px;}
	#knowledgeContent ul li img {border: 1px solid #676767;}
	
	.st-buttons-set {-moz-box-shadow:  inset 0 0 5px #383838; -webkit-box-shadow: inset 0 0 5px #383838; box-shadow: inset  0 0 5px #383838; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #e4eef7; margin-left: 161px; overflow:hidden; background: #627e98; width: 440px; overflow:hidden; padding: 3px 0 9px 7px}
	.st-buttons-set a { display:block; width: 207px; height: 68px; background:url(../img/sprites/st-btn.png) no-repeat 0 -68px; color: #22374e; text-transform: uppercase; font-size: 16px; text-shadow: 0 1px 1px #c6dbee; margin: 7px 5px 0 5px; font-weight: bold; text-decoration: none;}
	.st-buttons-set a:hover { background-position: 0 0; color: #1d4971; text-shadow: 0 1px 1px #fff; }
	.st-buttons-set a img { margin: 5px 10px 0 14px}
	.st-buttons-set a span { display: block; float: left; line-height: 65px; width: 125px}
	.st-buttons-set a.att-report span { line-height: 20px; margin-top: 13px;}

/*--- Notes, Attendance Report, -----*/
	#notes .notes-list, #attReport .report-ctn, 
	#awards .awards-ctn, #testHistory .test-ctn{ min-height: 522px; padding: 0 15px; border-bottom: 1px solid #ccc}
	
	#notes .note-item, #attReport .report-item { background:url(../img/note-icon.png) no-repeat left 10px; padding: 15px 10px 15px 65px; min-height: 60px; border-bottom: 1px solid #ccc}
	#notes .note-item h2, #attReport .report-item h2 {color:#1d4971; margin: 0; font-weight: normal;}
	#notes .note-item h2 span.note-tt { font-weight: bold;}
	#notes .note-item h2 span.date {font: italic normal 13px Arial, Helvetica, sans-serif; color: #5a5a5a;}
	#notes .note-item textarea { width: 485px; height: 120px}
	#notes .note-item .reply-form { display: none}
	#notes .note-item .reply-txt p {margin: 5px 0;}
	#notes .note-item .form-submit {padding: 0 0 0 90px}
	
	#attReport .attendance-status {padding: 15px; float: left; width: 400px;}
	#attReport .report-ctn { min-height: 440px; border-top: 1px solid #ccc}
	#attReport .report-item {background:url(../img/att-report-icon.png) no-repeat left 10px;}
	#attReport .report-item h2 {font-weight: bold;}
	#attReport .report-item h2 span.date {font-size: 14px; font-style: italic}
	h2.list-tt {clear: both;color:#1d4971; text-transform: uppercase; font-size: 15px; padding: 0 15px; }
	#attReport ul {list-style: none; margin: 0; padding: 8px 0 0;}
	#attReport ul li { border-top: 1px dashed #ccc; padding: 8px 0}
	#attReport ul li span.date { float: left; width: 65px; font-weight: bold; font-size: 14px;}
	.missed, .error { color: #F00;}
	
	#awards, #testHistory { padding: 15px 0 0 0;}
	.awards-ctn, #testHistory .test-ctn {min-height: 480px; border-top: 1px solid #ccc}
	.awards-ctn .award-item, #testHistory .test-item {border-bottom: 1px solid #e9e9e9; overflow:hidden; padding: 10px 0 5px 0;}
	.awards-ctn .award-img { width: 40px;}
	.awards-ctn .award-detail { margin-left: 45px;}
	.awards-ctn h2 span.award-tt, #testHistory h2 a.test-tt {color:#1d4971; text-decoration: none;}
	#testHistory h2 a.test-tt:hover {color: #0061b9}
	
	#testHistory .test-item { background:url(../img/test-history-icon.png) no-repeat left 5px; padding-left: 60px; margin: 0 5px;}
	#testHistory a.view-detail {width: 90px; margin-top: 10px; text-align: right} 
	#testHistory .test-detail { width: 440px; min-height: 50px; line-height: 40px;}
	#testHistory .test-detail h2 span.date {font-size: 14px;}
	
	ul.tabs { list-style: none; padding: 5px 15px 0 15px; margin: 0; overflow:hidden; height: 32px;}
	ul.tabs li { float:left; height: 30px; line-height: 30px; margin-right: 3px; }
	ul.tabs li a { display:block; height: 30px; line-height:30px; font-size: 14px; font-weight: bold; text-decoration: none; color: #585858; padding: 0 25px; margin-top: 1px; border: 1px solid #a0a0a0 ; background: #d7d7d7; border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; text-transform: uppercase;}
	ul.tabs li a.selected, ul.tabs li a:hover {color:#1d4971; background: #ccc; border-bottom: 1px solid #fff; background: #fff}
	
	.test-results-ctn { border-top: 1px solid #ccc; margin-top: -1px}
	#testResult .info-header {padding: 15px; height: 70px;}
	#testResult .info-header h4 {font-size: 14px; margin: 0 0 3px 0;}
	#testResult .info-header h1, #testResult .info-header h4 span.judge {color:#1d4971; margin-bottom: 5px;}
	.test-results-content { padding: 15px 15px 0 15px;}
	
	table.test-result { border-collapse:collapse; border: none; width: 99.5%; margin-left: 2px; font-size: 14px; margin-bottom: 15px;}
	table.test-result tr { border: 1px solid #ccc}
	table.test-result tr.label { border: none}
	table.test-result th, table.test-result td { width: 7%; text-align: center; padding: 3px 0;}
	table.test-result th.first, table.test-result td.first { text-align: left; width: 50%; color: #333; font-size: 14px; font-weight: normal; }
	table.test-result th.first {font-weight: bold; text-transform:uppercase}
	table.test-result td.first { border-right: 1px solid #ccc}
	table.test-result td {padding: 6px 8px; color: #b1b1b1; font-size: 16px; font-weight: bold; line-height: 18px;}
	table.test-result tr.odd { background: #f0f0f0}
	table.test-result tr.even { background: #dfdfdf}
	th.na, td.na span.active {color: grey;}
	th.d, td.d span.active {color: red;} 
	th.c, td.c span.active {color: orange;} 
	th.b, td.b span.active {color: green;}
	th.a, td.a span.active {color: black;}
	td span.active { font-size: 30px; font-weight: bold; }
	
	#pretestQualification { padding: 10px 0}
	#pretestQualification .test-results-content {padding: 0; }
	.none-ready, .ready { background:url(../img/status-check-icons.png) no-repeat left 2px; padding-left: 24px; color: #383838; height: 22px;}
	.ready { background-position: 0 -23px;color: #f75d00}
	#pretestQualification h3.status {border-bottom: 1px solid #ccc; padding: 10px 15px 3px 15px; margin: 0; background-color: #fff}
	#pretestQualification h3.status span { display:block; height: 22px;}
	#pretestQualification .tab-detail { padding: 0 0 15px 0; min-height: 500px}
	#pretestQualification .tab-detail h3 { background: #e4e4e4; padding: 2px 10px 2px 15px; text-transform: uppercase; font-size: 14px; text-shadow: 0 0 1px #fff; margin-top: 3px}
	#pretestQualification  .tab-detail ul { list-style:none; padding: 3px 0 8px 15px; margin: 0;}
	#pretestQualification  .tab-detail ul li { margin: 3px 0; line-height: 22px;}
	
	.message-box { width: 434px; height: 245px; position:absolute; top: 140px; left: 263px; z-index: 9999;}
	.message-box.info {background: url(../img/info-message-dialog.png) no-repeat top center;}
	.message-box h2 { text-align:center; text-transform: uppercase; font-size: 20px; text-shadow: 0 1px 1px #fff; margin: 30px 0 10px 0;}
	.message-box p {font-weight: bold; width: 340px; margin: 5px auto; font-size: 14px; text-shadow: 0 0 1px #fff; min-height: 85px;}
	.message-box.warning, .message-box.error {background: url(../img/warning-message-dialog.png) no-repeat top center;}
	.message-box.info h2 {color: #1d4971;}
	.message-box.warning h2 {color: #f16600;}
	.message-box.error h2 {color: #ff0000;}
	.message-box a.form-btn { width: 90px; margin: 0 auto; text-align:center; font-size: 18px;}

#footer {clear: both; color: #fff; text-align: center; line-height: 47px; text-shadow: 0 1px 1px #000;}

.ticket-bar {width: 100%; height: 40px; background:url(../img/body-bg.png) repeat-x top; position:fixed; z-index: 999; bottom: 0; border:2px solid #11171b; -moz-box-shadow: 0 0 10px #181818; -webkit-box-shadow: 0 0 10px #181818; box-shadow: 0 0 10px #181818;}
.ticket-bar .bar-inner { width: 990px; margin: 0 auto; color: #ffba00; font-size: 18px; font-weight: bold; line-height: 18px;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

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

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

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

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

/*
 * 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;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   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;
    }
}