/*
	Copyright © Interactive Services 2013 - 2015 All Rights Reserved.  
	No part of this code may be used, with or without modification, without prior consent from Interactive Services. 
	Version 2.1, 01 March 2015
*/
.col5 {
	width: 20%;
}
.span1 {
  width: 16.66666667%;
	box-sizing:border-box;
}

.span2 {
  width: 16.66666667%;
	box-sizing:border-box;
}

.span3 {
	width: 25%;
	box-sizing:border-box;
}

.span4 {
  width: 33.33333333%;
	box-sizing:border-box;
}

.span5 {
  width: 41.66666667%;
	box-sizing:border-box;
 }

.span6 {
	width:50%;
	box-sizing:border-box;
}

.span7 {
  width: 58.33333333%;
	box-sizing:border-box;
}

.span8 {
  width: 66.66666667%;
	box-sizing:border-box;
}

.span9 {
	width:75%;
	box-sizing:border-box;
}

.span10 {
  width: 83.33333333%;
	box-sizing:border-box;
}

.span11{
	width: 91.66666667%;
	box-sizing:border-box;
}

.span12 {
	width:100%;
	box-sizing:border-box;
}

.phonePanel{
	display: none;
}

@media (max-width: 768px) {

	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11{
		width:50%;
		box-sizing:border-box;
	}
	.span12-t {
		width: 100%;
	}
	
	.col3-t {
		width: 33.33333333%;
		box-sizing:border-box;
	}
	.col3-t-offset {
		margin-left: 33.33333333%;
		box-sizing:border-box;
	}
	
	
	.menu_key_bg{
		display: none;
	}
	.static-t {
		position: static;
	}
	.margin_left_learnImg_holder{
		margin-left: 0px;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ VIDEOS ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.videoFrame.vimeo {
		padding: 14.25%;
	}
	.videoFrame.videoLarge {
		max-width: 480px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++ COURSE MENU ++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#menu_Panel > .menuHolder > .menu_header > .menuIndicatorHolder{
		display: none;
	}
	
	#menu_Panel{
		width: 450px;
		margin-left: -225px;
	}
	
}



@media (max-width: 480px) {

	
	body {
		width:100%;
		min-width:100%;
		max-width:100%;
		/*overflow: initial; TO REMOVE SAFARI TOP/BOTTOM BARS*/
	}
	
	.centreContentContainer {
		/*overflow: initial; TO REMOVE SAFARI TOP/BOTTOM BARS*/
	}
	
	.nonCriticalElement{
		display: none;
	}
	
	#textArea, .textArea {
		padding-left: 7px !important;
		padding-right: 7px !important;
	}
	
	#debugWindow {
		display:none;
	}

	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
		width:100%;
		box-sizing:border-box;
	}
	.col2-m {
		width:50%;
		box-sizing:border-box;
		margin: 0;
	}
	
	.learnImgQuestion_holder{
		position: initial;
    width: 100%;
	}
	
	.learnImg_holder{
		position: initial;
    width: 100%;
	}
	
	.padding_right_learnImg_holder{
		padding-right: 0px;
	}
	
	.learnImg_holder img {
    display:block;
    margin:auto;
    width: 20%;
	}
	
	.learnImgQuestion_holder img {
    display:block;
    margin:auto;
    width: 20%;
	}

	.titleHolder{
		padding-top: 5px;
		padding-left: 7px;
		padding-right: 7px;
	}
	
	.padding_right_20{
		padding-right: 0px;
	}
	
	.padding_left_20{
		padding-left: 0px;
	}
	
	.core_image_right{
		padding-left: 0px;
		padding-top: 20px;
	}
	
	.core_image_left{
		padding-right: 0px;
		padding-top: 20px;
	}
	
	.core_image_center{
		padding-right: 0px;
	}
	
	.margin_top_100{
		margin-top: 0px;
	}
	
	#wrapper {
		padding-bottom: 20px;
	}
	
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++ QUESTIONS +++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.optBox {
		padding: 0px;
	}
	
	#onScreenFeedback {
		margin: 0px;
	}
	
	#sortable > .options_container{
		padding: 0px 30px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ VIDEOS ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.videoFrame{
		width: 100%; 
		margin-left: 0%;
	}
	.videoFrame.vimeo {
		padding: 28.25%;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ PHONE GUI AND MENU +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.phonePanel{
		display: table;
	}
	
	.top_nav_bar {
		display: none;
	}
		
	.pm_tools{
		position: fixed;
		top: 20px;
		left: 20px;
		width: 22px;
		height:17px;
		background-position: top center;
		background-repeat: no-repeat;
		background-image: url(../framework_images/toolsBtn.jpg);
		cursor: pointer;
	}
	
	.pm_feedback{
		position: fixed;
		display: none;
		top: 14px;
		left: 50%;
		margin-left: -16px;
		width: 33px;
		height: 32px;
		background-position: top center;
		background-repeat: no-repeat;
		background-image: url(../framework_images/guifb_tmb.jpg);
	}
	
	.pm_feedback.selectable{
		cursor: pointer;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++ CONVERSATION SCREEN +++++++++++++++++++++++ */
	/* The ZOOM functionality was having unexpected results in IE8		*/
	/* and IE9 so it was removed.																			*/
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	.cb_btnHolder {
		padding-left: 0px !important;
	}

	.conversationBtn {
		float: none;
		margin: 0px auto;
	}
	
	/* Firefox couldn't position the elements so this soultion had to be developed */
	.conversationBtn.conversationOpen.conver_1 {
		position: absolute;
		float: left;
		zoom: 0.45;
		-moz-transform: scale(0.45);
		-moz-transform-origin: -60px 0px;
		left: 45px;
		min-width: 208px;
	}
	
	.conversationBtn.conversationOpen.conver_2 {
		position: absolute;
		float: left;
		zoom: 0.45;
		-moz-transform: scale(0.45);
		-moz-transform-origin: -275px 0px;
		left: 260px;
		min-width: 208px;
	}
	
	.conversationBtn.conversationOpen.conver_3 {
		position: absolute;
		float: left;
		zoom: 0.45;
		-moz-transform: scale(0.45);
		-moz-transform-origin: -475px 0px;
		left: 470px;
		min-width: 208px;
	}
	
	
	body.ie8 .conversationBtn.conversationOpen, body.ie9 .conversationBtn.conversationOpen  {
		position: relative;
		float: none;
		zoom: 1;
		-moz-transform: scale(1);
	}
	
	.conversationBtn.conversationOpen > .cb_description > .cb_header_txt_1, .conversationBtn.conversationOpen > .cb_description > .cb_header_txt_2{
		font-size: 6px;
	}
	
	body.ie8 .conversationBtn.conversationOpen > .cb_description > .cb_header_txt_1, body.ie8 .conversationBtn.conversationOpen > .cb_description > .cb_header_txt_2, body.ie9 .conversationBtn.conversationOpen > .cb_description > .cb_header_txt_1, body.ie9 .conversationBtn.conversationOpen > .cb_description > .cb_header_txt_2{
		font-size: 17px;
	}
	
	.cb_converHolder{
		display: none;
		position: absolute;
		left: 0px;
		top: 125px;
		padding: 0px 3%;
	}
	
	body.ie8 .cb_converHolder, body.ie9 .cb_converHolder{
		position: relative;
		left: initial;
		top: 0px;
		padding: initial;
	}
	
	.converHoldAll {
		width: 94%;
		margin-left: 3%;
	}
	
	.cb_close{
		display: block;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++ MULTIQUESTION +++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.mq .cnPanelImg {
		padding: 20px 0;
	}
	
	.mq #multiBtns {
		padding: 0px 5px;
	}
	
	.mq .cn_sub_info {
		text-align: center;
		margin: 10px 0px 10px 0px;
		padding-right: 0px;
	}
	
	.mq .cn_sub_info img {
		top: -4px;
		left: 58%;
		margin-left: 0px;
	}
	
	.mq .cnPanel {
		width: 100%;
		padding: 0px 10px;
	}
	
	#qFeedback{
		display: none;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ SCENARIO ++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.sc_questionBlock{
		min-height: 0px;
	}
	
	.sc_btnHolder {
		margin-top: 0px;
		padding: 0px;
	}
	
	.scenarioSlide .sc_whiteline{
		display: none;
	}
	
	.sc_btn.btn_right, .sc_btn.sc_email{
		margin:10px auto;
	}
	
	.sc_introBlock{
	 padding: 10px 7px 20px 7px;
	}
	
	.sn_feedbackTxt{
	 padding: 10px 7px 20px 7px;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ MENU ++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#menu_Panel{
		width: 90%;
		top: 40px;
		margin-left: -45%;
	}
	
	.menuHolder {
		min-height: 200px;
	}	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++ TIMELINE ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#timeSlider {
		margin-top: 30px;
	}
	
	.timeline .textArea{
		padding-left: 37px !important;
		padding-right: 37px !important;
	}
	
	.timeline .titleHolder{
		padding-left: 37px;
		padding-right: 37px;
	}
	
	.timelineArrows{
		display: block;
		position: fixed;
		top: 50%;
		margin-top: -30px;
		width: 100%;
	}
	
	#timeSlider {
		display: none;
	}
	
	.tl_head{
		margin: 15px auto;
		display: block;
		text-align: center;
	}
	
	.timeContent {
		max-width: 100%;
	}
	
	.timeTarget {
		display: none;
		visibility: visible !important;
		position: absolute;
		overflow: hidden;
		opacity: 1 !important;
		transform: initial !important;
		-webkit-transform: initial !important;
		padding: 0px 30px;
	}
	
	body.ie8  .timeTarget > .videoFrame, 	body.ie9  .timeTarget > .videoFrame{
		width: 340px;
		height: 230px;
	}
	
	.timeTarget > .videoFrame{
		margin-top:65px;
	}
	
	.tl_visble, .tl_crumb{
		display: block;
	}
	
	
	.tl_hidden{
		left: -2000px;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++++ SLIDESHOW ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.ss_text{
		display: block;
		padding: 10px 30px;
	}
	
	.ss_img{
		display: block;
		height: 150px;
	}
	
	.slideImg{
		display: block;
		max-height: 130px;
		padding-top: 20px;
		margin: 0px auto;
	}
	
	.scene_back, .scene_next {
		width: 25px;
		background-size: 15px 25px;
	}
	
	.arrowHolder{
		position: fixed;
		top: 50%;
		margin-top: -30px;
	}
	
	.phone_breadcrumb{
		display: block;
	}
	
	.slideBreadCrumb{
		padding-top: 10px;
	}
	
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++ POPUPS ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	
	.popBtn {
		width: 90%;
		max-width:500px;
		margin-left: 5%;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++++ BOOKMARK PROMPT ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#bookmark_prompt{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 50px;
		height: 200px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++++++ MULTIMEDIA PROMPT ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#audioOverlay{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 30px;
		height: 290px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++ SCORM ERROR REPORTING ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#scormErrorPanel{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 30px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++++ SCORM ERROR REPORTING ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#certificateName{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 90%;
		margin-left: 5%;
		margin-top: 30px;
		height: 190px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++ TRANSCRIPT ++++++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	#transcript_Panel{
		position: absolute;
		top: inherit;
		left: 0px;
		bottom: 0px;
		margin-bottom: 40px;
		margin-left: 0px;
		width: 100%;
		z-index: 2;
	}

	#transcript_Panel > .transcriptHolder > div > .transcript_header{
		background-image: none;
		cursor: default;
	}
	
	#centreContent.trans_open{
		padding-bottom: 170px;
	}
	
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* +++++++++++++ QUESTION SLIDE FEEDBACK ++++++++++++++++++++++++ */
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.screenfeedback {
		padding: 0px 10px;
	}
	
	.txt_fb{
		width: 100%;
		padding: 0px;
	}
	
	.img_fb {
		width: 100%;
		background-position-x: center;
	}
	
	.img_fb .animationPath {
		margin-left: -10px;
		width: 100%;
	}
	
	#wrapper.linear_scenario	#slide_question {
		margin-top: 0px;
	}
	
	#wrapper.linear_scenario .qSlideHolder{
		margin-top: 50px;
	}
	
}