@charset "UTF-8";
/* CSS Document */

.interfaceContainer, .interfaceWelcome{ width:100%; max-width:84em; margin-left:auto; margin-right:auto; height:95%;   }
.interfaceContainer1, .interfaceWelcome1{background:url(../img/background5.jpg); background-image: url(../img/background5.jpg); background-color:#A74100;   }
.interfaceContainer2, .interfaceWelcome2{background:url(../img/background2.jpg); background-image: url(../img/background2.jpg); background-color:#A74100; background-size:100% auto; }
.interfaceContainer3, .interfaceWelcome3{background:url(../img/background3.jpg); background-image: url(../img/background3.jpg); background-color:#B3561B;  background-size:100% auto;}
.interfaceContainer4, .interfaceWelcome4{background:url(../img/background4.jpg); background-image: url(../img/background4.jpg); background-color:#99774A; background-size:100% auto; }
.interfaceContainer5, .interfaceWelcome5{background:url(../img/background1.jpg); background-image: url(../img/background1.jpg); background-color:#99774A; background-size:100% auto;}
.interfaceContainer, .interfaceWelcome{ background-repeat:no-repeat; background-position:right top;   }
.interfaceContainer{clear:both; display:none; }
.interfaceWelcome {height:100%; display:block; padding-top:2%;display:none;  }
.interfaceWelcomeContent{width:85%; min-height:80%; margin-left:auto; margin-right:auto;padding:2%;  background-color:#FFF;
background: rgb(255, 255, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(255, 255, 255, 0.85);  border:1em solid #BF301A; position:relative; z-index:101;  }
.interfaceWelcomeContent li{color:#FFF; padding-bottom:1em;}
 .interfaceWelcomeContent li.on{font-weight:700; cursor:pointer; list-style-image:url(../img/icon_arrow2.png); font-size:110%;}
.interfaceWelcomeContentHeader{background-color:#FFF;padding:2%;}	
.interfaceWelcomeContent h1{color:#000; font-size:130%;}
.interfaceWelcomeLogos {text-align:center; background-color:#FFF;} .interfaceWelcomeLogo {margin-right:1em;}

.interfaceHeader{background-color:#BF301A; min-height:15%; cursor:pointer; }
.interfaceHeaderTitle{font-size:130%; color:#FFF; font-weight:700; padding:1% 0 1% 1%; float:left; }
.interfaceHeaderBack{float:left;padding:1% 0 0 1.5em; width:4em; text-align:left; display:none;}

.interfaceLeftContentHolder, .interfaceLeftContentHolderQuiz{clear:both; float:left; height:85%; width:35em; background-color:#FFF;
background: rgb(255, 255, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(255, 255, 255, 0.6);overflow-y:scroll; scrollbar-highlight-color: #DE671B;scrollbar-face-color: #BF301A;scrollbar-arrow-color: #BF301A;}

/*SCROLLBAR*/
.interfaceLeftContentHolder::-webkit-scrollbar, .interfaceLeftContentHolderQuiz::-webkit-scrollbar {  width: 12px;  }  
.interfaceLeftContentHolder::-webkit-scrollbar-track, .interfaceLeftContentHolderQuiz::-webkit-scrollbar-track  {  background-color:#DE671B;  }  
.interfaceLeftContentHolder::-webkit-scrollbar-thumb, .interfaceLeftContentHolderQuiz::-webkit-scrollbar-thumb {   background-color: #BF301A;  }  
.interfaceLeftContentHolder::-webkit-scrollbar-thumb:hover, .interfaceLeftContentHolderQuiz::-webkit-scrollbar-thumb:hover {   background-color: #A02816;  } 

.interfaceLeftContent {}
.interfaceLeftContent ul, .interfaceLeftContent ol {padding:0 0 0 1.8em; margin:0.5em 0 0.5em 0;}
.interfaceLeftContent li { margin:0 0 0.3em 0;}
.interfaceLeftContent li.on  {background-color:#EB1C2E; cursor:default; } 
.interfaceLeftContent li a{color:#FFF; text-decoration:none;}
.interfaceLeftContentKeyPointsSectionText li a {color:#003554;  text-decoration:underline;}
.interfaceLeftContentInfoSectionText li a{color:#005180; text-decoration:underline;}

.interfaceLeftContentSection{clear:both; text-align:center; }
.interfaceLeftContentSectionItem{padding:0.7em 0 0 0; min-height:41px;  float:left; }
.interfaceLeftContentSectionItemIcon{padding:0.4em 0 0.3em 0; width:15%; }
.interfaceLeftContentSectionItemRight{float:right;}
.interfaceLeftContentSectionSmallItem {width:10%;}
.interfaceLeftContentSectionMediumItem {width:74%; text-align:left;}
.interfaceLeftContentSectionMiddleItem {width:64%; text-align:left;}
.interfaceLeftContentSectionItemContent{width:85%;}
.interfaceLeftContentIcon{ }

#showKeyPoints, #showNotes, #showVideo, .linkPrevTopic, .linkPrevTopic2, .linkFirstTopic, .linkNextTopic, .linkNextTopic2, #topicName, .interfaceTopicIcon {cursor:pointer;}

/*Text formatting for left hand content*/
.interfaceLeftContentTopicSectionText{ color:#FFF; font-size:120%; font-weight:400; padding: 0 0.5em 0.5em 0.5em;}
.interfaceLeftContentInfoSectionText{ text-align:left; padding: 0 0.5em 0.8em 0.5em;  }
.interfaceLeftContentQuestionSectionText{ text-align:left; padding:0 0.5em 0.8em 0.5em; font-weight:400; color:#FFF; font-size:120%; }
.interfaceLeftContentKeyHeadSectionText{ text-align:left; padding:0 0.5em 0.5em 0.5em;  font-weight:400; color:#FFF; }
.interfaceLeftContentKeyPointsSectionText{ text-align:left; padding:0 0.5em 0.5em 0.5em;  color:#000; }

.interfaceTopicNav{background-color:#DE671B; }
.interfaceTopicNavNext, .interfaceTopicNavBack{float:right; background-color:#BF301A; color:#FFF; height:100%; padding:0 2%; line-height:2em; text-transform:uppercase; font-size:110%; text-align:center; cursor:pointer;}
.interfaceTopicNavBack{float:left; background-color:#999;}

.interfaceTopicMenu {display:none; position:absolute; width:35em; z-index:200; }

.interfaceTopicMenu .interfaceLeftContentSectionItem { clear:both; cursor:pointer;  min-height:31px; width:98%; padding:0.5em 0 0 2%; text-align:left; margin:0;}
.interfaceTopicMenu .interfaceLeftContentSectionItem .interfaceLeftContentTopicSectionText { padding:0; font-size:100%;}
.interfaceLeftContentTopicSectionMenu{color:#FFF; font-size:120%; font-weight:400; padding: 0; }
.interfaceTopicMenu .interfaceLeftContentSectionItem {border-top:1px solid #DB7F1A; } #interfaceTM1{border-top:0;}
.resource1topic, .resource2topic, .resource3topic, .resource4topic, .resource5topic {display:none; border-top:0 !important; }
#hideTopicMenuDiv{display:none;}

/*Right hand content*/
.interfaceRightContentHolder{float:right;  height:85%;  }
.interfaceRightContent {height:100%;overflow:hidden; }
.interfacePersonDiv{cursor:pointer; float:right; margin-top:10em;  text-align:center;  }
.interfacePersonDivSolo{margin-right:150px;}
.interfacePersonImg{width:110px; height:293px; }
.interfacePersonAudio{margin-top:-1em;}
.interfacePersonName{font-size:65%; width:90%; margin:auto; line-height:1.2em; margin-top:-8em; padding:1%; background-color:#FF931E; position:relative; z-index:100;}

/*AUDIO*/
.interfacePersonAudioPlayer{display:none;width:30em; position:absolute; margin-left:35em; height:75%;  padding:1em; background-color:#FF931E;z-index:110; }
.interfacePersonAudioPlayerShow{display:block;}
.audioPlayer{max-height:20%;}
.audioPlayerFlash{display:none; max-height:20%;width:100%; background-color:#FFF; margin-bottom:0.3em;}
.audioPlayeriDevice{display:none; width:100%; background-color:#FFF; margin-bottom:0.3em;}
.transcript{  background-color:#FFF;
background: rgb(255, 255, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(255, 255, 255, 0.8);padding: 0.5em 1em; max-height:68%; overflow:scroll; overflow-x:hidden; border:thin solid #E5E5E5; border-radius:0.3em;}

/*VIDEO*/
.videoFrame {width:440px; height:247px;}

/*COLOURS*/
.interfaceColourRed{ background-color:#BF301A;}
.interfaceColourOrange{ background-color:#FF931E;}
.interfaceColourOrangeOver{ background-color:#DB7F1A;}
.interfaceColourYellow{ background-color:#FCEEB5;}
.interfaceColourYellowOver{ background-color:#C2B37A;}
.interfaceColourBlue{ background-color:#005180;}
.interfaceColourBlueOver{ background-color:#003554;}
.interfaceColourOchre{ background-color: #DE671B;}
.interfaceColourOchreOver{ background-color: #9E4913;}
.interfaceColourBlack{ background-color: #000;}
.interfaceColourWhite{ background-color: #FFF;}

/*FOOTER*/
.interfaceFooter{height:5%; clear:both; background-color:#FF931E; width:100%; max-width:84em; margin-left:auto; margin-right:auto; text-align:center; z-index:100; position:relative; }
.interfaceFooterContent{padding:0.5em; text-transform:uppercase; font-size:80%; color:#FFF;}
.interfaceFooterContent a{color:#FFF;}
.interfaceFooterIcon {vertical-align:middle; cursor:pointer;}
.interfaceFooterContentItem{display:inline; padding: 0 0.5em 0 0.5em; border-right:1px dashed #FFF;}

.interfaceButton {color:#FFF;  background-color:#005180; border:none; color:#FFF; text-align:center; padding:0.5em; cursor:pointer;  -webkit-appearance: none; margin:0 1em 0.5em 0.5em; display:inline; float:right; text-transform:uppercase;}
.interfaceCloseButton {color:#FFF; background-color:#BF301A;  margin:0; max-height:10%; }
.interfaceWelcomeStartButton { margin:2%;background-color:#39B44A; padding: 0.5em 1.5em; font-weight:400; font-size:110%;}
.popupCloseButton{}
.interfaceiDeviceTranscriptCloseButton{ display:none;}
.interfaceTextArea{width:95%; height:10em; margin-bottom:1em; padding:2%; font-family: 'Open Sans', sans-serif; font-size:90%;}



/*Smaller screens*/
@media only screen and (max-width: 67em) {
	.videoFrame {width:300px; height:168px;}
	.interfaceLeftContentHolder, .interfaceTopicMenu{width:25em;}
	.interfacePersonAudioPlayer{margin-left:25em;}
	.interfaceHeaderBack{width:3.5em; padding-left:0.7em;}
}

/*Smaller screens*/
@media only screen and (max-width: 65em) {
	/*.interfaceLeftContentHolder {width:25em;}*/
	.interfacePersonImg{width:75px; height:200px;}
	.interfacePersonDivSolo{margin-right:100px;}
	.interfacePersonDiv{ margin-top:13em;}
	.interfaceFooterContent{font-size:60%;}
	.interfaceFooter{height:auto; }
}

/*Smaller screens*/
@media only screen and (max-width: 57em) {
	.audioPlayer{max-height:none;}
	.interfacePersonAudioPlayer{width:25em; margin-left:0;}
	.interfacePersonImg{width:70px; height:187px;}
	.interfacePersonDivSolo{margin-right:70px;}
	.interfacePersonDiv{ margin-top:15em; }
	.interfacePersonName{font-size:50%; margin-top:-9em;}
	
}

/*MOBILE SPECIFIC STYLES*/
@media only screen and (max-width: 45em) {
	body{background-color:#A74100;}
	.interfacePersonAudioPlayer{clear:both;width:100%; position:relative; top:0; margin:0; padding:0; }
	.transcript{overflow:visible; max-height:none; background:none; background-color:#FFE9D2;}
	.interfaceiDeviceTranscriptCloseButton{ display:block;}
	.interfaceWelcomeContent h1{line-height:1.5em;}
	.interfaceHeaderBack{display:none;}
	.interfaceHeader{height:auto; min-height:none;padding-bottom:1%; float:none;}
	.interfaceHeaderTitle{font-size:120%; width:90%; padding:2% 0 0 1%; }
	.interfaceContainer{border:none; width:100%; margin:0; background-image:none; background-color:inherit;} 
	.interfaceLeftContentHolder, .interfaceLeftContentHolderQuiz, .interfaceRightContentHolder, .interfaceTopicMenu {width:100%; float:none; height:auto; border:none; overflow-y:visible;min-width:0;}
	#hideTopicMenuDiv{display:block;}
	.interfaceRightContent {height:auto; overflow:visible; clear:both;}
	.interfacePersonImg{width:110px; height:293px;}
	.interfacePersonDivSolo{margin-right:150px;}
	.interfacePersonDiv{ margin-top:2em; float:left; }
	.videoFrame {width:100%; height:auto;}
	.interfacePersonName{color:#333; font-size:100%; margin:0; margin-bottom:1em;}
 }

/*SMALL MOBILE SPECIFIC STYLES iphone 4, iphone 5 portrait, nexus 4 portrait, all small phones */
@media only screen and (max-width: 30em) {
	.interfaceWelcome{padding-top:0; background-image:none; background-color:#FFF; height:auto;}
	.interfaceWelcomeContent{width:90%; background-color:#FFF; border:none;}
	.interfaceWelcomeLogo{max-width:90%; height:auto;}
	.interfaceWelcomeStartButton {width:100%; margin:0.5em 0 0.5em 0; padding-left:0; padding-right:0; float:none; display:block;}
	.interfaceFooterContentItem{display:block; padding: 0; border:none; margin-bottom:1em;}
	.interfaceFooterIcon{width:40px; height:40px; margin-left:1em;}
	.interfacePersonDiv {width:32%;}
	.interfacePersonImg{width:100%; height:auto;}
	.interfaceTopicNavNext, .interfaceTopicNavBack{float:none; width:96%;}
	.interfaceTopicMenu .interfaceLeftContentSectionItem .interfaceLeftContentTopicSectionText { padding:0 0 1em 0;}
	.interfaceFooter{display:none;}
	#hideTopicMenuDiv{display:block;}
	
}

/*DESKTOP SPECIFIC STYLES LAST*/
@media all and (min-width: 50em) {

}