/* main content */

#header {
	height:10%;
	width: 100%;
	position:relative;
	margin: 0;
	padding: 0px;

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f5f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f5f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f5f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f5f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */

}
	#title-image{
		position: relative;
		height:100%;
		width:40%;
		max-width: 40%;
		float: left;
	}
		#header img{
			height:auto;
			max-width: 100%;
			float:left;
			margin-top: 2.6%;
			margin-left: 1.8%;
		}
	#lo-nav {
		position:relative;
		height: 100%;
		width:40%;
		float: left;
		margin-left: 20%;
		padding: 0.9% 0% 0.9% 0%;
	}
		#lo-nav div {
			position: relative;
			height:100%;
			width:32%;
			float: left;
			margin-left:1%;


			display: inline-block;
  			vertical-align: middle;

			font-size: 90%;
		}

		#lo-nav div.normal {
			border: 2px solid #e6e6e6;
			background: -moz-linear-gradient(top,  #f5f6f6 45%, #ffffff 60%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#f5f6f6), color-stop(60%,#ffffff)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #f5f6f6 45%,#ffffff 60%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #f5f6f6 45%,#ffffff 60%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #f5f6f6 45%,#ffffff 60%); /* IE10+ */
			background: linear-gradient(to bottom,  #f5f6f6 45%,#ffffff 60%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
			color: #cccccc;

		}
		#lo-nav div.focused {
			
			border: 2px solid #e6e6e6;
			background: -moz-linear-gradient(top,  #f5f6f6 45%, #ffffff 60%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#f5f6f6), color-stop(60%,#ffffff)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  #f5f6f6 45%,#ffffff 60%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  #f5f6f6 45%,#ffffff 60%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  #f5f6f6 45%,#ffffff 60%); /* IE10+ */
			background: linear-gradient(to bottom,  #f5f6f6 45%,#ffffff 60%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
			color: #0071c5;
			font-weight: bold;

		}

		#lo-nav div:hover {
			/*
			border-top: 2px solid #32B4E5;
			outline: 3px solid rgba(50, 180, 229, .5);
			color: #FFFFFF;
			text-transform: uppercase;
			*/
		}

/* end-main content */




#lo-headings {
	height: 5%;
	width:100%;
	position:relative;
	background-color: #fff;
	padding: 0px;
	padding-top:0.5%;
}
#lo-title{
	height: 96%;
	width:50%;
	margin-left:1.7%;
	float:left;
}
#slide-counter{
	height:96%;
	width:20%;
	float: right;
	text-align: right;
	margin-right: 2%;
	color: #0071c5;

}
#heading-hr{
	height:4%;
	width:98%;
	margin-left:1%;
	float:left;
	background-color:#0071c5;
}

#learn-section, #test-section, #review-section {
	float: left;
	height: 78%;
	width:100%;
	position:relative;
	background:#fff;
}

#footer {
	height:8%;
	width: 100%;
	position:relative;
	clear: both;
	text-align: left;

	background: #28abe2; /* Old browsers */
	background: -moz-linear-gradient(top,  #28abe2 5%, #1f71b8 65%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#28abe2), color-stop(65%,#1f71b8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #28abe2 5%,#1f71b8 65%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #28abe2 5%,#1f71b8 65%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #28abe2 5%,#1f71b8 65%); /* IE10+ */
	background: linear-gradient(to bottom,  #28abe2 5%,#1f71b8 65%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28abe2', endColorstr='#1f71b8',GradientType=0 ); /* IE6-9 */

}

.section {
	width: 100%;
	height: 70%;
	position:relative;

	margin: 0;
	padding: 0px;
	background-color: #555;
	z-index: 1;
}

#test-section {
	float: left;
	display: none;
}
#review-section {
	float: left;
	display: none;
}


#large-play-button {
	position: relative;
	height:60%;
	text-align: center;
	
}
#large-play-button img{
	position: relative;
	cursor: pointer;
	height:100%;
	margin-top:8%;

}


/*  three classes to correctly vertically align text in liquid layout 100% height divs  */
.buttonB{
	text-align: center;
}
.buttonB:before{
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */
}
#lo-nav p, #navbar p{
	display: inline-block;
	vertical-align: middle;
}

#swiffy-container, #swiffy-container-review{
	height:100%;
	position: relative;
	text-align: center;
}

#swiffy-container-quiz{
	position: relative;
	height:80%;
	/* padding-top: 1.5%; */
}

#swiffy-container-quiz div{
	position: relative;
	padding-top: 1.5%;
	background-color:white;
}

.lo-container{
	position:relative;
	height:100%;
	overflow: hidden;
}

#votext-container {
	font-size: 1em;
	background: white;
	position: absolute;
	top: 75%;
	padding-left: 12%;
	padding-right: 12%;
	height:25%;
	overflow-y: auto;
	line-height: 1.2em;
}
.questionText{
	line-height: 1.2em;
	padding: 1% 0px;
	white-space: pre-wrap;
}

#quiz-container {
	font-size: 1em;
	background: transparent;
	position: absolute;
	top: 3%;
	padding-left: 5%;
	padding-right: 5%;
	width:100%;
	height: 100%;
}

#quiz-container p{
	line-height: 1em;
}

.questions{
	position: relative;
	height: 65%;
	white-space: pre-wrap;
}

.questions div{
	height:21%;
	display: table;
}

.questions span, .questions a{
	display: table-cell;
	vertical-align: middle;
	padding-right: 25px;
}

.questionHeight{
	height:100%;
}

.answerBox{
	height:20%;
	overflow: auto
}

#review-container{
	z-index: 60;
	font-size: 1em;
	background: transparent;
	position: absolute;
	top: 3%;
	padding-left: 5%;
	padding-right: 5%;
	line-height: 2.5em;
	overflow: none;
	width:100%;
	height:100%;
}



#review-container h3{
	color: red;
}

#cdata-section{
	/* height is now set programatically somewhere inside intel.Player.App:populateReview() */
	overflow-y:auto;
	/* height:55%; */
}
/* ---- learning object ---- */

/*------------approved asset styles------------------*/

/*


#swiffy-spacer{
	width: 100%;
	height: 100%;
	float: left;
	margin-top: 10px;
	text-align: center;
	position:absolute;
	z-index: 1;
}



*/



/* ---- controls ---- */
/*
.control-bar {
	width:100%
	height: 2em;
	float: left;
	background-color: #ebf4fb;
	padding: 0.2em;
}

.control-bar a {
	background-color: #4ed7dc;
    background-image: linear-gradient(top, #97e8eb 0%, #4ed7dc 50%, #02c7ce 100%);
	background-image: -o-linear-gradient(top, #97e8eb 0%, #4ed7dc 50%, #02c7ce 100%);
	background-image: -moz-linear-gradient(top, #97e8eb 0%, #4ed7dc 50%, #02c7ce 100%);
	background-image: -webkit-linear-gradient(top, #97e8eb 0%, #4ed7dc 50%, #02c7ce 100%);
	background-image: -ms-linear-gradient(top, #97e8eb 0%, #4ed7dc 50%, #02c7ce 100%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #97e8eb),
		color-stop(0.5, #4ed7dc),
		color-stop(1, #02c7ce)
	);
	
	border: none;
	font-size: 0.5em;
	font-weight: bold;
	
	text-decoration: none;
	color: #fff;
	
	padding: 0.5em;
	margin-right: 1em;
	float: left;
	
	cursor: pointer;
}

.control-bar a:hover {
	background-color: #83e3e7;
    background-image: linear-gradient(top, #b5eff1 0%, #83e3e7 50%, #4ed8dd 100%);
	background-image: -o-linear-gradient(top, #b5eff1 0%, #83e3e7 50%, #4ed8dd 100%);
	background-image: -moz-linear-gradient(top, #b5eff1 0%, #83e3e7 50%, #4ed8dd 100%);
	background-image: -webkit-linear-gradient(top, #b5eff1 0%, #83e3e7 50%, #4ed8dd 100%);
	background-image: -ms-linear-gradient(top, #b5eff1 0%, #83e3e7 50%, #4ed8dd 100%);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #b5eff1),
		color-stop(0.5, #83e3e7),
		color-stop(1, #4ed8dd)
	);
}

.control-bar a.disabled {
	cursor: default;
	background-color: #c8eef3;
	background-image: none;
	pointer-events: none;
   	cursor: default;
}

.control-bar a.disabled:hover {
	background-color: #c8eef3;
	background-image: none;
	pointer-events: none;
   	cursor: default;
}

#sim-info {
	float: right;
	font-size: 12px;
	color: #444;
	width: 630px;
	margin-top: -2px;
	
}


#slide-counter {
	float: right;
	font-size: 0.5em;
	font-weight: bold;

	color: #0071c5;
	min-width: 100px;
	margin:0.5em;
}

*/

/*

#test-section h3, #review-section h3 {
	font-weight: normal;
	font-size: 15px;
	color: #c36;
	margin: 20px 25px 20px 25px;
}

#review-section p {
	/*font-size: 15px;*/
	/* DO NOT SET FONT SIZE ON P, THE SVG FOR THE IMAGE USES P AND SETS ITS OWN SIZE */
	/* font-size: 15px; */ /*
	color: #036;
	margin: 15px 25px 30px 25px;
}


#test-section p {
	color: #036;
	margin: 5px 25px 5px 25px;
}

#test-feedback-1, #test-feedback-2 {
	min-height: 25px;
}

#test-section label {
	font-size: 16px;
	margin-left: 10px;
}


.questionText{
	color:red;
}

.questions div a{
	float:left;
	color:blue;
}

.questions div{
	padding:0px;
	margin:0px;
	clear: both;
	margin:20px 10px;
	padding:5px;
}

#quiz-container{
	margin:20px;
	position: absolute;
	z-index: 10;
	width:740px;
}
#quiz-controls{

	z-index: 11;	
}
#review-container{
	margin:10px;
	position: absolute;
	z-index: 10;
	width: 740px;
}
*/

.response{
	margin-right:10px;
}
.response img{
	vertical-align: middle;
}

#lo-mov-section, #lo-quiz-controls {
	padding-top:0.8%;
	padding-bottom:0.4%;
	width: 67%;
	margin-left: 18%;
	height: 100%;
}

.control-link {
	position:relative;
	width:12%;
	height:100%;
	float:left;
	margin-left:10%;
}

#button-prev.disabled, #prevQuestion.disabled{
	background: url(../images/rewind-normal.svg) left top no-repeat;
	opacity:0.4;
	pointer-events: none;
   	cursor: default;
}
#button-prev.selected, #prevQuestion.selected{
	background: url(../images/rewind-pressed.svg) left top no-repeat;
}
#button-prev, #prevQuestion{
	background: url(../images/rewind-normal.svg) left top no-repeat;
}
#button-prev:active, #prevQuestion:active{
	background: url(../images/rewind-focused.svg) left top no-repeat;
}


/* stop */
#button-stop.disabled{
	background: url(../images/stop-normal.svg) left top no-repeat;
	pointer-events: none;
	opacity:0.4;
   	cursor: default;
}
#button-stop.selected {
	background: url(../images/stop-pressed.svg) left top no-repeat;
}
#button-stop {
	background: url(../images/stop-normal.svg) left top no-repeat;
}
#button-stop:active {
	background: url(../images/stop-focused.svg) left top no-repeat;
}



/* play */
#button-play.disabled {
	background: url(../images/play-normal.svg) left top no-repeat;
	opacity:0.4;
	pointer-events: none;
   	cursor: default;
}
#button-play {
	background: url(../images/play-normal.svg) left top no-repeat;
}
#button-play:active {
	background: url(../images/play-focused.svg) left top no-repeat;
}



/* next */
#button-next.disabled, #nextQuestion.disabled {
	background: url(../images/next-normal.svg) left top no-repeat;
	opacity:0.4;
	pointer-events: none;
   	cursor: default;
}
#button-next.selected, #nextQuestion.selected {
	background: url(../images/next-pressed.svg) left top no-repeat;
}
#button-next, #nextQuestion {
	background: url(../images/next-normal.svg) left top no-repeat;
}
#button-next:active, #nextQuestion:active {
	background: url(../images/next-focused.svg) left top no-repeat;
}

/* Prevent android image-with-link selection */
*, img, a{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

