/*********************************************************************************
/								GLOBAL
/*********************************************************************************/

body {
	background:#5c9cbc;
	font-family: 'Lato', sans-serif;
	font-size:16px;
	color:#333333;
  min-height: 700px;
}
img {
	max-width:100%;
	height:auto;
}
.clear {
	clear:both;
}
.floated {
	overflow:auto;
}

.textright {
	text-align: right;
}
.textcenter {
	text-align: center;
}
.alignleft { float:left }
.alignright { float:right }
img.alignleft {
	margin: .4em 1em .4em 0;
}
img.alignright {
	margin:.4em 0 .4em 1em;
}
/*********************************************************************************
/								FONTS
/*********************************************************************************/
h1, h2, h3, h4, h5, h6 {
	font-family: 'Exo 2', sans-serif;
	font-weight:100;
}

.titleFont {
	font-family: 'Exo 2', sans-serif;
}
.bodyFont {
	font-family: 'Lato', sans-serif;
}
/*********************************************************************************
/								GRID
/*********************************************************************************/

.grid_1 { width: 6.5%; } 
.grid_2 { width: 15%; } 
.grid_3 { width: 23.5%; } 
.grid_4 { width: 32%; } 
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; } 
.grid_7 { width: 57.5%; } 
.grid_8 { width: 66%; } 
.grid_9 { width: 74.5%; } 
.grid_10 { width: 83%; } 
.grid_11 { width: 91.5%; } 
.grid_12 { width: 100%; } 

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 1% 0;
	float: left;
	display: block;
}

.alpha{margin-left:0;}
.omega{margin-right:0;}

.container{
	width: 90%; 
	max-width: 960px;
	margin: auto;
}

/*********************************************************************************
/								GLOBAL CLASSES
/*********************************************************************************/

/*** backgrounds ***/
.blueBg, .level3 {
	background-color:#71b6d7;
}
.darkBlueBg {
	background-color:#336680;
}
.lightBlueBg {
	background-color:#8fc9e0;
}
.blueFadeBg {
	background: #8fc9e0; /* Old browsers */
background: -moz-linear-gradient(top,  #8fc9e0 71%, #6ea4b9 93%, #6ea4b9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(71%,#8fc9e0), color-stop(93%,#6ea4b9), color-stop(100%,#6ea4b9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8fc9e0 71%,#6ea4b9 93%,#6ea4b9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8fc9e0 71%,#6ea4b9 93%,#6ea4b9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8fc9e0 71%,#6ea4b9 93%,#6ea4b9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8fc9e0 71%,#6ea4b9 93%,#6ea4b9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc9e0', endColorstr='#6ea4b9',GradientType=0 ); /* IE6-9 */
}
.yellowBg, .level1 {
	background-color:#f1c40f;
}
.purpleBg, .level4 {
	background-color:#9b59b6;
}
.redBg {
	background-color:#e74c3c;
}
.greenBg, .level2 {
	background-color:#16a085;
}
/** text colours ***/
.brandBlue {
	color:#282165;
}
.brandRed {
	color:#ff180a;
}
.white {
	color:white;
}
.black {
	color:#333333;
}
.green {
	color:#009245;
}
.red {
	color:#f00;
}
.orange {
	color:#f05a23;
}
.level5 {
  background-color: brown;
}
/** tooltip **/
.atooltip {
	display:none;
	position:absolute;
	width:150px;
}
.atooltipcontent {
	border:1px solid #333;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px;
	background-color:#333333;
	text-align:center;
}
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #333333;
	margin:auto;
}

/** forms ***/
input.orangeSubmit[type="submit"] {
	background-color:#f05a23;
	border-radius:2px;
	border:0;
	color:#ffffff;
	padding-left:1em;
	padding-right:1em;
	border-bottom:solid 4px #c14112;
	vertical-align: top;
}
input.orangeSubmit[type="submit"]:active {
	border-bottom:none;
	margin-top:4px;
}

/*** buttons and links ***/
.butn {
	border-radius:2px;
	border:0;
	color:#ffffff;
	padding:.3em 1em;
	border-bottom:solid .2em transparent;
	vertical-align: top;
	border-radius:2px;
	display:inline-block;
}
.butn:hover {
	text-decoration:none;
	color:#ffffff;
}
.butn:active {
	border-bottom:0;
	margin-top:.2em;
}
.butnMedium {
	font-size:1.2em;
	border-radius:3px;

}

.butnLarge {
	font-size:1.6em;
	border-radius:3px;

}
.orangeBtn {
	background-color:#f05a23;
	border-bottom:solid .2em #c14112;
}
.greenBtn {
	background-color:#01773f;
	border-bottom:solid .2em #024b27;
}
.redBtn {
	background-color:#d9534e;
	border-bottom:solid .2em #ac3a36;
	color:#ffffff;
}
.blackBtn {
	background-color:#333333;
	border-bottom:solid .2em #000000;
	color:#ffffff;
}
.blueBtn {
	background-color:#336680;
	border-bottom:solid .2em #336680;
	color:#ffffff;
}
.grayBtn {
	background-color:#CCCCCC;
	border-bottom:solid .2em #999999;
	color:#ffffff;
}
.inactiveBtn {
	background-color:#CCCCCC;
	border-bottom:solid .2em #999999;
	color:#999999;
}
.yellowBtn {
  background-color:#FFCC33;
  color: #ffffff;	
}
.yellowBtn.showing {
  background-color:#FFCC33;
  color: #222222;	
}
form input[type='text'].correct, .mainBlock input.ml_input.correct{
  color: #0000FF;
}
form input[type='text'].incorrect, ul.ml_toolbar li #in.incorrect, input.ml_input.incorrect{
  color: #FF0000;
}
#last_work_swatch{
  display: inline-block;
  width: 5em;
  background: #ff7f7f;
  margin-left: 3em;
}
#concern_swatch{
  display: inline-block;
  width: 5em;
  background: #00D8E6;
  margin-left: 3em;
}
div#key{
  text-align: right;
  display:none;
}
/*********************************************************************************
/								HEAD LOGIN FORM
/*********************************************************************************/
#loginForm {
	background:#444444;
	color:#ffffff;
	padding:1em 0;
	text-align:right;
	display:none;
	-webkit-box-shadow:inset -1px 0 3px #000000;
	-moz-box-shadow:inset -1px 0 3px #000000;
	box-shadow:inset -1px 0 3px #000000;
}
#loginForm label {
	font-size:14px;
	font-weight:normal;
}
#loginForm input {
	margin-left:.3em;
}
.userInput, .passwordInput {
	padding-right:1em;
}
/*********************************************************************************
/								HEADER AND MAIN NAV
/*********************************************************************************/

#loginMenu {
	background-color:#333333;
	padding:.5em 0;
	text-align: right;
	line-height: 18px
}
#loginMenu a {
	color:#ffffff;
	padding-right:30px;
	font-size:12px;
	display: inline-block;
}
#loginMenu a:last-child {
	background:url(../images/global/lock-icon.png) no-repeat right;
}
.pageHeader {
	border-radius:0;
	margin-bottom:0;
}
ul.mainNav {
	margin-top:1.8em;
	font-family: 'Exo 2', sans-serif;
	position: relative;

}
.mainNav li a {
	padding:.6em;
	margin-right:.3em;
	color:#ffffff!important;
}
.mainNav.nav-pills li a:hover, .mainNav.nav-pills li a.current {
	background-color:#cfe3eb;
	color:#333333!important;
}
.mainNav li.loginLink a {
	position: absolute;
	width:55px;
	height:126px;
	background:url(../images/global/login-tab.png) no-repeat; /**fallback for non svg browsers ***/
  	background-image: url(../images/global/login-tab.svg), none;
	text-indent: -99999px;
	top:-2.6em;
	right:-4em;
}
.mainNav.nav-pills li.loginLink a:hover {
	background-color:transparent;
}
.mainNav li.abphysicsLink a {
	background-color:#f15a23;
	color:#ffffff;
	border-bottom:.3em solid #c14212;
}
.mainNav li.abphysicsLink a:hover {
	background-color:#f15a23;
	}
.mainNav li.subscribeLink a {
	background-color:#6ba23a;
	color:#ffffff;
	border-bottom:solid .3em #598a2d;
}
.mainNav li.subscribeLink a:hover {
	background-color:#6ba23a;
}
.mainNav li.abphysicsLink a:active, .mainNav li.subscribeLink a:active {
	border-bottom:0;
	margin-top:.3em;
}

/*********************************************************************************
/								PAGE SUB MENUS
/*********************************************************************************/
.subMenu {
	padding:1em 0;
	border-bottom:solid 1px #65a5c5;
}
.subMenu ul {
	padding:0;
	margin:0;
	list-style-type: none;
	text-align: center;
}
.subMenu ul li {
	display:inline-block;
}
.subMenu ul li a {
	display:inline-block;
	background-color:#65a5c5;
	color:#ffffff;
	padding:.4em .8em;
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	border-radius:1em;
	margin:.4em .2em;
	-webkit-box-shadow:-1px -1px 0 #5c99b8;
	-moz-box-shadow:-1px -1px 0 #5c99b8;
	box-shadow:-1px -1px 0 #5c99b8;
	text-transform: uppercase;
	font-size:14px;
}
.subMenu ul li a:hover, .subMenu ul li.current a {
	background-color:#528ca9;
	text-decoration: none;
	-webkit-box-shadow:1px 1px 0 #80c5e6;
	-moz-box-shadow:1px 1px 0 #80c5e6;
	box-shadow:1px 1px 0 #80c5e6;
	color:#96cce7;
}

/*********************************************************************************
/								HERO
/*********************************************************************************/
.heroBanner {
	padding-bottom:3em;
	margin-top:3em;
	position: relative;
}
.heroBanner h1 {
	color:white;
	font-size:4.5em;
	font-weight:300;
	text-align: center;
	text-shadow:1px 1px 1px #999;
}

.homePupil {
	position: absolute;
	bottom:0;
	left:-3em;
	z-index: 200;
	max-width:40%;
}
/*********************************************************************************
/								VIDEO
/*********************************************************************************/
.videoPop {
	position: fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:url(../images/global/black-trans-tile.png);
	display:none;
	z-index: 99999
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 56.25 is 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top:5%;
	left: 5%;
	width: 90%;
	height: 90%;
}
.closeVid {
	position: absolute;
	top:5px;
	right:5px;
	z-index: 99999;
	background:red;
	color:#ffffff;
	font-size::2em;
	font-weight:bold;
	width:30px;
	height:30px;
	display: block;
	line-height: 30px;
	text-align: center;
}

/*********************************************************************************
/								MAIN CONTAINER
/*********************************************************************************/
#main {
	padding-top:1em;
	padding-bottom:3em;
	position: relative;
}
.page #main {
	padding-top:2em;
}
.pageTitle {
	margin-top:0;
	margin-bottom:.8em;
}
#main a {
	
}
#q_number {
	position: absolute;
	top:1.4em;
	left:5.5em;
	color:#999999;
	font-style: italic;
}
.subMenu .container ul{
text-align: left;
}
/*********************************************************************************
/								HOME
/*********************************************************************************/
.carouselContainer {
	border-bottom:solid 10px #736256;
	position: relative;
	padding-left:6px;
	padding-right:6px;
}
.tryDemo {
	padding:2em 0;
	position: relative;

}
.tryDemo .grid_4{
	text-align: right;
}
.tryDemo h2 {
	font-weight:100;
	color:white;
	margin:0;
	padding:0;
}
.tryIt {
	position: absolute;
	right:50%;
	margin-right:-300px;
	top:-2.2em;
}
.homeDemoBtn {
		padding-top:.3em;
}

.homeInfoBox {
	width: 32%;
	margin:0 2% 1% 0;
	float:left;
	background:white;
	box-shadow:1px 1px 1px #777;
  min-height: 500px;
}
.homeInfoBox img {
		width:100%;

	}
.homeInfoBox.omega {
	margin-right:0;
}
.homeInfoBox-text {
	padding:0 2em 2em;
	display:table-cell;
}
.homeShelf {
	padding-top:3em;
}

/*********************************************************************************
/								QUESTIONS
/*********************************************************************************/
.blocksContainer {
	position: relative;
}
.overlay {
	position: absolute;
	width:100%;
	height:100%;
	background:#8fc9e0;
	z-index: 101;
	zoom: 1;
	filter: alpha(opacity=70);
	opacity: 0.7;
	display:none;
}
.usefulTips {
	width:82px;
	height:77px;
	text-indent: -99999px;
	background:url(../images/questions/useful-tips.png) no-repeat; /**fallback for non svg browsers ***/
  	background-image: url(../images/questions/useful-tips.svg), none;
	position: absolute;
	top:-20px;
	left:-10px;
	z-index: 100
}
.whiteBoard {
	border-bottom:solid 20px #736256;
  position: relative;
}
.mainBlock {
	width:69%;
	float:left;
	background:transparent;
	position: relative;
	font-family: 'Times new roman', serif;
	font-size:1.4em;
}
.mainBlock-inner {
	margin:0 1em;
	padding:2em;
	border-left:solid 10px #998575;
	border-right:solid 10px #998575;
	border-top:solid 10px #998575;
	min-height: 350px;
	-webkit-box-shadow:inset 1px 1px 2px #333;
	-moz-box-shadow:inset 1px 1px 2px #333;
	box-shadow:inset 1px 1px 2px #333;
  background: #FFFFFF;
}
.mainBlock-inner p, .mainBlock-inner h1, .mainBlock-inner h2, .mainBlock-inner h3, .mainBlock-inner h4, .mainBlock-inner h5, .mainBlock-inner h6 {
	font-family: 'Times New Roman';
	font-weight:100;
}
.mainBlock-inner p {
	margin:0;
	padding:.3em 0;
}
.mainBlock input[type="text"]{
  font-size: 0.95em;
}
.scoreBlock {
	width:30%;
	float:right;
	border-bottom:solid 20px #736256;
}
.scoreBlock-inner {
	background:#333333;
	border-left:solid 10px #998575;
	border-right:solid 10px #998575;
	border-top:solid 10px #998575;
	margin:0 .5em;
}
.scoreBlock ul {
	margin:0;
	padding:0;
	list-style-type: none;
	font-weight:400;
	color:white;
}
.scoreBlock ul li {
	border-bottom:solid 3px #998575;
	padding:.5em 0.9em;
	font-family: 'Coming Soon', cursive;
	font-size:1.2em;
	-webkit-box-shadow:inset 0px 1px 1px #000;
	-moz-box-shadow:inset 0px 1px 1px #000;
	box-shadow:inset 0px 1px 1px #000;
}
.scorelabel {
	font-size:.6em;
	font-weight:400;
	font-family: "Helvetica Neue", Arial, Sans-serif;
	width:58%;
	display: inline-block;
}
.scorelabelnarrow {
	font-size:.6em;
	font-weight:400;
	font-family: "Helvetica Neue", Arial, Sans-serif;
	width:28%;
	display: inline-block;
}
.scoreToggleTab {
	text-align: right;
	display:none;
}
.mainBlock input {
	width:60px;
	margin-bottom:10px;
	text-align: center; 
}
.questionBlock {
	position: relative;
	margin-top:20px;
}
.questionBlock input {
	position: absolute;
	line-height:1em;
	height:25%;
	border:solid 1px #333;
	margin:0;
	max-height:35px;
	text-align: center;
}
.useme {
	position: absolute;
	top:0.5em;
	right:1.5em;
	z-index: 5;
}
.avatar {
	position: absolute;
	bottom:2em;
	right:-3em;
}
.revision.avatar {
	position: absolute;
	bottom:0;
	right:-5em;
}
.questions-pens {
		max-width:250px;
		max-height:89px;
		margin:2em 0 0 0 ;
	}
.helpMovie {
	margin-bottom:6em;
}
/*** progress bar ***/
.levelProgress {
	font-family: 'Lato', sans-serif;
	font-size:14px;
	overflow: auto;
	color:#ffffff;
	overflow: auto;
	padding-top:1.4em;
	background:#346781
}
.progressContainer {
	background:url(../images/questions/progress-label.jpg) no-repeat left ;
	padding-left:80px;
	margin-left:1em;

}
.progress {
	box-shadow:inset 1px 1px 3px #000;
	-webkit-box-shadow:inset 1px 1px 3px #000;
}
.progress-bar{
  border-right: 1px solid #ffffff;
}
.progress-bar-red {
  background-color: #d9534e;
}
.progress-bar-orange {
  background-color: #f0ad4f;
}
.progress-bar-purple {
  background-color: #9b59b6;
}
.progress-bar-black {
  background-color: #333333;
}
.progress-bar-green {
  background-color: #5cb95c;
}

.questions-bookstack {
	position: absolute;
	bottom:-2em;
	left:-4em;

}

.answerField {
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:.5em 0 .5em 2em;
	background:#71b6d7;
	box-shadow:-1px -1px 3px #777;
	z-index: 999;
}
.answerField.fixfixed {
  position: fixed!important;
  bottom:0;
}
.answerfieldinner {
	position: relative;
  max-width:940px;
	margin:auto;
  margin-left: 2em;
  margin-right: 3em;
}
.answerField input[type="text"], .answerField input[type="number"] {
	padding:6px;

}
.answerField .kb_drag_arrow {
	position: absolute;
  top: 0;
  left: 0;
}
.timer {
	color:#ffffff;
	font-family:Arial, Sans-serif;
	font-weight:bold;
	font-size:220%;
	margin:0 .3em .5em .3em ;
	text-align: center;
	letter-spacing: 8px;
	position: relative;
}
.time {
	position: absolute;
	top:0;
	left:3px;
	width:100%;
	padding-top:2%;
	text-align: center;
}
.timerline {
	position: absolute;
	top:49%;
	left:0;
	width:100%;
	text-align: center;
}
.scoreBlock .timer.time-panel{
  display: none;
}
.pupilsessions .tabControls li a{
  background-color: #fff;
}
.pupilsessions .tabControls li.active a{
  border-bottom: 1px solid #fff;
}
.pupilsessions .tabControls li:not(.active) a{
  border-bottom: 1px solid #5c9cbc;
}
#todo{
  color: #000;
}
#completed{
  color: #f00;
}
#reviewed{
  color: #00f;
}
@media (max-width:960px) {
	.timer {
		font-size:200%;
		letter-spacing: 8px
	}
}
@media (max-width:900px) {
	.timer {
		font-size:180%;
	}
}
@media (max-width:880px) {
	.timer {
		letter-spacing: 4px
	}
}
/*********************************************************************************
/								MODAL NOTICES
/*********************************************************************************/
.modal-title {
  font-family: 'Times New Roman';
}
.modal-body {
	font-family: 'Times New Roman';
	font-size:1.5em;
	line-height:1.6em;
}
.explanation-body {
	font-family: 'Times New Roman';
	font-size:1em;
	line-height:1.1em;
  padding: 1em;
}
.modal-image {
	width:40%;
	float:left;
}
.modal-text {
	width:50%;
	float:right;
	padding-top:4%;
}

/*********************************************************************************
/								TOOLBARS
/*********************************************************************************/
.toolbar {
	padding:0;
	margin: 0;
  list-style-type: none;
}
.toolbar li, .toolbarBtn li {
	display:inline-block;
	margin-top:0.5em;
	line-height:2em;
  padding: 0;
}
.toolbar li, .toolbarBtn li{
  width: 2em !important;
}
.toolbar li span, .toolbarBtn li span{
	font-size:22px;
}
.ml_toolbar {
	padding:0;
	margin: 0;
	list-style-type: none;
}
.ml_toolbar li {
	display:inline;
	font-size:1em;
	margin-top:1em;
	line-height:2em;
  padding: .5em;
}
.buttonBar {
	font-size:14px;
	margin-bottom:.5em;
	margin-top:1em;
}
.buttonBar li {
	margin-right:.3em;
	color:#ffffff;
}
/*********************************************************************************
/								ADMIN CONTENT
/*********************************************************************************/
.tabs {
	margin:2em 0;
}
.tabControls ul {
	padding:0;
	margin:0;
	list-style-type: none;
}
.tabControls ul li {
	display: inline-block;
}
.tabControls a {
	/*background-color:#65a5c5;*/
	color:#e8e8e8;
	display: inline-block;
	padding:.6em 1em;
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
}
.tabControls ul li.active a {
	/*background-color:#ffffff;
	color:#333333;*/
}
.tabContent {
	background-color:#ffffff;
	-webkit-border-radius:0 5px 5px 5px;
	-moz-border-radius:0 5px 5px 5px;
	border-radius:0 5px 5px 5px;
	padding:3em;
}

/*********************************************************************************
/								RESPONSIVE TABLES
/*********************************************************************************/

table.resultsTable { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
table.resultsTable tr:nth-of-type(odd) { 
  background: #eee; 
}
table.resultsTable th { 
  background: #333; 
  color: white; 
  /*font-weight: bold;*/ 
}
table.resultsTable td, table.resultsTable th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
table.resultsTable .gotd, 
table.resultsTable .reviewtd,
table.resultsTable .leveltd,
table.resultsTable .yrtd,
table.resultsTable .abscoretd,
table.resultsTable .targettd,
table.resultsTable .leveltd,
table.resultsTable .targetdatetd {
	text-align:center;
}
table.resultsTable th.m-hide, table.resultsTable td.m-hide{ 
    display: table-cell; 
  }
table.resultsTable td.performance-blue, table.resultsTable tr.repeat td:not(.leveltd){
  background: #00D8E6;
}
table.resultsTable td.performance-red{
  background: #FFC0CB;
}
@media (max-width:768px) {
  table.resultsTable th.m-hide, table.resultsTable td.m-hide{ 
    display: none; 
  }
}
/*********************************************************************************
/								AVATAR
/*********************************************************************************/
.avatarHolder {
	background-color:#ffffff;
	padding-top:3.4em;
	padding-bottom:3.4em;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	margin-top:3em;
	-webkit-box-shadow:inset 1px 1px 0 #65a5c5;
	-moz-box-shadow:inset 1px 1px 0 #65a5c5;
	box-shadow:inset 1px 1px 0 #65a5c5;
}
.avatarAccessories {
	overflow: auto;
	margin-top:3em;
}
.avatarExtra {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    background-color:#8fd0ef;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	min-height:140px;
	float:left;
	width:23.5%;
	margin:0 2% 2% 0;
	-webkit-box-shadow:inset 1px 1px 0 #65a5c5;
	-moz-box-shadow:inset 1px 1px 0 #65a5c5;
	box-shadow:inset 1px 1px 0 #65a5c5;
	position: relative;
	text-align: center;
}
.avatarExtra.omega {
	margin-right:0;
}
.avatarExtra-label {
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	background-color:#333333;
	color:#ffffff;
	font-size:14px;
	text-align:center;
	line-height: 1.2em;
	padding:5px 0;
}
.credits h3 {
	margin-top:0;
}
.avbutton{
  position: absolute;
  top:0;
  right:0;
}
/*********************************************************************************
/								SINGLE CONTENT
/*********************************************************************************/
.singleContainer {
	background:#ffffff;
	border:solid 1px #cccccc;
	-webkit-border-radius:.5em;
	-moz-border-radius:.5em;
	border-radius:.5em;
	margin-bottom:2em;
	padding: 1em;
}
.singleHeader {
	text-align: center;
	font-weight:100;

	border-bottom:solid 1px #cccccc;
	padding-bottom:.8em;
	margin-bottom:0;

}
.singleContent {
	position: relative;
	line-height:1.6em;
  padding: 1em;
}
.singleContentRight {
	padding: 5% 5% 7% 32%;
}
.singleSidebar {
	width:25%;
	position: absolute;
	top:0;
	height:100%;
	left:0;
	border-right:solid 1px #cccccc;
}
.singleSidebar ul {
	list-style-type: none;
	padding:0;
	margin:0;
	text-align: center;
}
.singleSidebar ul li {
	position: relative;
}
.singleSidebar ul li a {
	display: block;
	padding:1em;
	font-size:1.1em;
	font-family: 'Exo 2', sans-serif;
	border-bottom:1px solid #cccccc;
	color:#666666;
}
.singleSidebar ul li a:hover {
	background-color:#e8e8e8;
	text-decoration: none;
}
.singleSidebar ul li.current a {
	background-color:#e8e8e8;
}
.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid #e8e8e8;
	position: absolute;
	right:-30px;
	top:0;
}
/*********************************************************************************
/								FOOTER
/*********************************************************************************/
.footer {
	background:#333333;
	padding:4em 0;
	color:white;
}
.footer ul {
	list-style-type: none;
	padding:0;
	margin:3em 0 0 0;
	font-family: 'Exo 2', sans-serif;
}
.footer ul li {
	display: inline-block;
	font-size:.86em;
}
.footer ul li a {
	color:white;
	padding-right: 1em;
	padding-left: 1em;
	border-right:solid 1px white;
}
.footer ul li:first-child a {
	padding-left: 0;
}
.footer ul li:last-child a {
	border:0;
}
.socialLinks {
	font-size:.7em;
}
.socialLinks img {
	margin-right:1em;
	vertical-align: top
}
.trinitySchool {
	font-size: .7em;
	text-align: center;
}
.trinitySchool img {
	padding-top:1em;
}
/*about page demo*/
p.about {
  text-align: center;
  min-height: 4.5em;
}
.about-box div:nth-child(3n+1) p.about {  /* or 4n+1 */
  background-color: gold;
  padding: 1em;
  font-size: 1.2em;   
}
.about-box div:nth-child(3n+2) p.about {  /* or 4n+1 */
  padding-top: 0.5em;  
}
.about-box div:nth-child(3n+3) p.about {  /* or 4n+1 */
  background-color: #ccffcc;
  padding: 1em;   
}
/*time remaining messages in tests*/
.message{
  clear: left;
  width: 100%;
  height: 45px;
  text-align: center;
  font-size: 30px;
  padding: 0;
  margin: 0;
  border: 1px solid #ffffff;
  margin-bottom: 15px;
}
.message p.green{background: #5d78ef; color: #ffffff;}
.message p.peach{background: #5d78ef; color: #ffffff;}
.message p.pink{background: #5d78ef; color: #ffffff;}
.message p.red{background: #5d78ef; color: #ffffff;}
.message p.red-border{background: #5d78ef; color: #ffffff; border: 2px solid #FF0000;}
/*********************************************************************************
/								MEDIA QUERIES
/*********************************************************************************/
@media (max-width:800px) {

	.mainNav li a {
		margin-right:.1em;
		padding-right:.5em;
		padding-left:.5em;
	}

}

@media (max-width:768px) {

	.homeDemoBtn {
		padding-top:2em;
	}

	.tryIt {
		margin-right:-240px;
	}
}
@media (max-width: 767px) {

	.mobHide {
		display:none;
	}

	/*********************************************************************************
	/								HEADERS
	/*********************************************************************************/
	h1 {
		font-size:1.6em;
	}
	h2 {
		font-size:1.4em;
	}
	h3 {
		font-size:1.2em;
	}
	h4 {
		font-size:1.2em;
	}
	h5 {
		font-size:1em;
	}
	h6 {
		font-size:1em;
	}

	/*********************************************************************************
	/								GRID
	/*********************************************************************************/
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		width:100%;
	}
	.container {
		width:90%;
	}
	.question-page #main.container, .admin-page #main.container {
		width: 95%;
	}

	/*********************************************************************************
	/								HEAD LOGIN FORM
	/*********************************************************************************/
	#loginForm {
		text-align:left;
	}
	#loginForm label {
		width:6em;
	}
	#loginForm input[type="submit"] {
		margin-top:.5em;
	}
	.passwordInput {
		clear:both;
	}

	/*********************************************************************************
	/								HEADER AND MAIN NAV
	/*********************************************************************************/

	ul.mainNav {
		background-color:#71b6d7;
		padding:0;
		margin:0 0 1em 0;
	}
	.nav-pills > li {
	  float: none;
	  text-align: center;
	  border-bottom:solid 1px #3392aa;
	}
	.mainNav li.loginLink a {
		position: relative;
		width:auto;
		height:auto;
		background:none;
		text-indent: 0;
		top:auto;
		right:auto;
		background-color:#f05a23;
		color:#ffffff;
		border-radius:0;
		margin:0;

	}
	.mainNav.nav-pills li.loginLink a:hover {
		background-color:#cfe3eb;
		color:#f05a23;
	}
	.mainNav li.subscribeLink, .mainNav li.abphysicsLink {
		border-bottom:0;
		margin-top:.5em;
	}

	/*********************************************************************************
	/								HERO
	/*********************************************************************************/
	.heroBanner h1 {
		font-size:3.5em;
	}
	/*********************************************************************************
	/								HOME
	/*********************************************************************************/
	.tryDemo {
		text-align: center;
	}
	.tryDemo .grid_4{
		text-align: center;
	}
	.tryDemo h2 {
		font-size:1.4em;
		margin-bottom:1em;
	}
	.tryDemo h2 {
		text-align: center;
	}
	.tryIt {
		display:none;
	}
	.homeInfoBox {
		width: 100%;
		margin:0 0% 2em 0;
		float:none;
	}

	/*********************************************************************************
	/								QUESTIONS
	/*********************************************************************************/

	.question-page #main, .admin-page #main {
		overflow:hidden;
	}
	.mainBlock {
		width:100%;
		float:none;
	}
	.mainBlock-inner {
		margin:0 .5em;
		padding:2em 1em;

	}
	.questions-bookstack {
		bottom:-1em;
		left:-2em;
		max-width:55%;
	}
	.questions-pens {
		max-width:45%;
	}
	.fieldtext {
		display:none;
	}
	.answerField input[type="text"], .answerField input[type="number"] {
	padding:4px;

	}
	.answerField .butnMedium {
		font-size:16px;
	}

	/**scoreblock**/
	.blocksContainer {
		max-width:100%;
		position: relative;
		 
	}
	.scoreBlock {
		position: absolute;
		top:0;
		right:0;
		width:100%;
		float:none;
		border-bottom:0;
		z-index: 101;
	}

	.scoreBlock-inner {
		border:0;
		margin:0 0;
	}
	.scoreBlock ul {
		border-top:solid 3px #998575;
		border-left:solid 3px #998575;
		border-right:solid 3px #998575;
		box-shadow:1px 0 3px #333;
	}
	.timer {
		margin-top:.7em;
	}
	.time {
		position: absolute;
		top:0;
		left:3px;
		width:100%;
		padding-top:10px;
		text-align: center;
	}
	.timerline {
		display:none;
	}
	.avatar {
		display:none;
	}
	.useme {
		top:-2em;
	}
		

	/*********************************************************************************
	/								AVATAR
	/*********************************************************************************/
	.avatarHolder {
		padding-top:2em;
		padding-bottom:2em;

	}
	.avatarAccessories {
		overflow: auto;
		margin-top:3em;
	}
	.avatarExtra {
		width:49%;
	}
	.avatarExtra.delta {
		margin-right:0;
	}
	.credits {
		padding-top:1em;
		text-align: center;
	}

	/*********************************************************************************
	/								SINGLE CONTENT
	/*********************************************************************************/
	.singleContentRight {
		padding: 5% 10% 7% 10%;
	}
	.singleSidebar {
		width:100%;
		position: relative;
		top:auto;
		height:auto;
		left:auto;
		border-right:0;
		border-top:solid 1px #cccccc;
	}
	.arrow-right {
		width: 0; 
		height: 0; 
		border-top: 0;
		border-bottom: 0;
		border-left: 0;

	}
	/*********************************************************************************
	/								FOOTER
	/*********************************************************************************/
	.footer ul {
		font-size:.86em;
		text-align: center;
	}
	.socialLinks {
		text-align: center;
	}
	.trinitySchool {
		padding-top:4em;
	
	}
	
		





}

@media (max-width: 600px) {
	/*********************************************************************************
	/								HERO
	/*********************************************************************************/
	.heroBanner h1 {
		font-size:2.5em;
	}

	/*********************************************************************************
	/								HOME
	/*********************************************************************************/
	.homeDemoBtn {
		padding-top:.5em;
	}
	/*********************************************************************************
	/								QUESTIONS
	/*********************************************************************************/
	.questionBlock input {
		max-height:35px;
		line-height:32px;

	}

	
}
@media (max-width: 500px) {
	/*********************************************************************************
	/								HERO
	/*********************************************************************************/
	.heroBanner h1 {
		font-size:2em;
	}
	/*********************************************************************************
	/								QUESTIONS
	/*********************************************************************************/
	.questionBlock input {
		max-height:30px;
		line-height:28px;
		min-height:auto;
	}


	
}
@media (max-width: 400px) {
	/*********************************************************************************
	/								QUESTIONS
	/*********************************************************************************/
	.questionBlock input {
		height:25px;
		line-height: 20px;
	}
	
}

@media (max-width: 321px) {

	
	
}
/***************************************
GENERAL FORM FIELDS
****************************************/
.ab-label{
text-align: right;
}
@media (max-width: 400px) {
	.ab-label{
  text-align: left;
  }
	
}
/***************************************
ADDITIONAL
****************************************/
#box{position: relative;}
.box{background: #FFFFFF!; text-align: center; position: absolute;}
ul.ml_toolbar li #in{
width: 10em;
color: #999999;
}
.admin-page{
background: #FFFFFF;
}
#topic_list .topic{
  font-weight: bold;
}
#topic_list .subtopic{
  font-weight: normal;
  margin-left: 2em;
}
.new_work{
color: #FF7F7F;
}
.login_name{
  color: #FF9900;
  text-transform: uppercase;
  font-size: 12px;
  padding-right: 1em;
}
.stop{
  color: #FF0000;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  padding-right: 1em;
  cursor: pointer;
}
#tiny_avatar_canvas{
  width: 75px;
  height: 75px;
}
/*********************************************************************************
/								TEST SCREEN NAV LINKS
/*********************************************************************************/
#links_container{
  /*position: absolute;
  bottom: .5em;
  left: 1.5em;
  width: 90%;*/
  height: 2em;  
  /*width: 90%;*/
  /*overflow: scroll;*/
}
.navlinks {
  /*white-space: nowrap;*/
	padding:0;
	margin: 0;
	list-style-type: none;  
}  
ul.navlinks li {
	display:inline;
  white-space: normal;
	font-size:1.1em;
	/*margin-top:1em;
	line-height:2em;
  padding: .2em;*/
  padding: 0;
  box-shadow: none;
  border: none;
}
.navlinks li a{
  color: #fff;
  padding: 0;
}
.navlinks li.current {
  border: 2px solid #5c9cbc;
}
.navlinks li.green {
  background: #33CC33;
}
.navlinks li.orange {
  background: #FECB3F;
}
.navlinks li.red {
  background: #FF0000;
}
/**********************************/
.panel-left, .panel-right{
	border:3px solid #333;
	border-radius:15px;
	min-height:210px;
	margin-bottom:30px;
	padding:0 20px 20px 20px;
	/*text-align:center;*/
}
#show_practice_coverage, #show_practice_score{
	margin:0 auto;
}
.panel-left .panel-heading, .panel-right .panel-heading{
	font-size:20px;
	text-align:center;
}
.blue{
	color:#5d78ef;
}
.last_work td{
background: #FF7F7F;
}
#q_number{
font-size: .7em;
}
.ddqs, .ddas{
width: 45%;
float: left;
}
.ddqs{
margin-right: 5px;
vertical-align: middle;
}
.ddqs > ul, .ddas > ul{
list-style-type: none;
}
.ddqs > li, .ddas > li{
padding: 5px;
float: none;
height: auto;
}
.coords{
  border: 1px solid #CCC;
  width: 99%;
  border-collapse: collapse;
  text-align: center;
}
.coords td{
  border: 1px solid #CCC;
}
.coords td:nth-child(1){
  padding-left: 0.5em;
  padding-right: 0.5em;  
}
.coords thead tr:nth-child(1) td{
  background: #FFF;  
}
.coords tbody tr:nth-child(1) td{
  background: #DDD;
  padding: 0;    
  vertical-align: center;
}
.coords input{
  width: 95%;
  background: #DDD;
  border: 0;
  text-align: center;
  margin: 0;
}
.ddgq{
  max-width: 45%;
  display: inline-block;
  position: relative;
  padding-bottom: 2em;
}
.ddgq img{
  max-width: 100%;
}
.ddga{
  width: 24%;
  display: inline-block;
  border: 1px solid #CCC;
  text-align: center;  
}
.ddga h3{
  font-size: 0.8em;
  padding: 0;
  margin: 0.4em 0 0.4em 0;
}
.ddgq div.ddga{
  z-index: 100;
  position: absolute;
  bottom: 0.5em;
  left: 0;
  width: 100%;
  background: #DDD;
  border: none;
}
div.ddga:nth-of-type(2) {
  bottom: 1em;
  left: 0;
  background: #AAA;
}
.modal-open .modal,.btn:focus{
  outline:none!important
}
.mainBlock input.ml_input{
  color: #999;
  font-size: 0.8em;
}
#effort_guage #show_practice_time, #effort_guage #show_practice_average_time{
	float:left;
	margin-bottom:10px;
}
.dash-progress-striped .dash-progress-bar, .dash-progress-bar-striped {
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	-webkit-background-size: 40px 40px;
	background-size: 40px 40px;
}
.dash-progress-bar-section .dash-progress{
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color:#e8e8e8;
}
.time-heading{
	padding-top:20px;
}
@media screen and (min-width: 768px) {
  .scoreToggleTab {
    display: none;
  }
  .scoreBlock, .scoreBlock-inner, .timer {
    display: block;
  }    
}
@media screen and (max-width: 800px) {
  .scoreToggleTab {
    display: block;
	position:relative;
  }
  .scoreBlock {
    display: block;
  }
  .scoreBlock-inner, .timer {
    display: none;
  }  
	.mobHide {
		display:none;
	}  
	.question-page #main, .admin-page #main {
		overflow:hidden;
	}
	.mainBlock {
		width:100%;
		float:none;
	}
	.mainBlock-inner {
		margin:0 .5em;
		padding:2em 1em;

	}
	.questions-bookstack {
		bottom:-1em;
		left:-2em;
		max-width:55%;
	}
	.questions-pens {
		max-width:45%;
	}
	.fieldtext {
		display:none;
	}
	.answerField input[type="text"], .answerField input[type="number"] {
	padding:4px;

	}
	.answerField .butnMedium {
		font-size:16px;
	}

	/**scoreblock**/
	.blocksContainer {
		max-width:100%;
		position: relative;
		 
	}
	.scoreBlock {
		position: absolute;
		top:0;
		right:0;
		width:100%;
		float:none;
		border-bottom:0;
		z-index: 101;
	}

	.scoreBlock-inner {
		border:0;
		margin:0 0;
	}
	.scoreBlock ul {
		border-top:solid 3px #998575;
		border-left:solid 3px #998575;
		border-right:solid 3px #998575;
		box-shadow:1px 0 3px #333;
	}
	.timer {
		margin-top:1.7em;
	}
	.time {
		position: absolute;
		top:0;
		left:3px;
		width:100%;
		padding-top:10px;
		text-align: center;
	}
	.timerline {
		display:none;
	}
	.avatar {
		display:none;
	}
	.useme {
		top:-2em;
	}
	.scoreToggle img{
		position:absolute;
		right:0;
	}
	.show-hide{
		display:block;
	}	
}
.hint{
  font-family: 'Times New Roman';
}
.hint-body{
  padding: 1em;
}
.progressContainer.l1{
  background:url(../images/questions/progress-level1.jpg) no-repeat left ;
}
.progressContainer.l2{
  background:url(../images/questions/progress-level2.jpg) no-repeat left ;
}
.progressContainer.l3{
  background:url(../images/questions/progress-level3.jpg) no-repeat left ;
}
.progressContainer.l4{
  background:url(../images/questions/progress-level4.jpg) no-repeat left ;
}
.progressContainer.l5{
  background:url(../images/questions/progress-level5.jpg) no-repeat left ;
}
input[type=number]{
-moz-appearance: textfield;
}
ul.mobile li.btn{
  width: 2.5em !important;
  height: 2.5em !important;
}
#keyx, #keyy{
  font-family: "Times New Roman";
  font-style: italic;
}
#keyGO{
width: 4em !important;
height: 6em !important;
line-height: 6em !important;
}
.k_btn, .t_btn{
color: #000000;
z-index: 10;
}
.keyTimes{
font-family: "Times New Roman";
}
.st_selection{
  margin-left: 1em;
}
.spacer{
  height: 5em;
}
.fa-play-circle-o{
  color: #000000;
}
.fa-stack{
margin-top: -1em !important;
margin-bottom: -1em !important;
}
#keyGO{
  position: absolute;
  top: 0;
  right: 0;
}
table.dates {
  background-color: #ffffff;
  margin-bottom: 1em;
}
table.dates td{
  padding: 0.5em;
}
@media (max-width: 992px){
	.navbar-default .navbar-collapse.collapse {
		display: none !important;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-header {
	 	float: none; 
	}
}
@media (max-width: 320px){
	.navbar-brand img{
		width: 92%;
	}
	.navbar-brand{
		padding:15px 0 15px 12px;
	}
	#loginMenu a {
		padding-right: 0px;
	}
}