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

#toolsPanel {

}

.centreContentContainer {
	max-height: 600px;
}

.circle_button,.text_i,#page_numbers {
	display:none;
}

.bottom_nav_bar{
	position:fixed;
	top: 640px;
	width:100%;
	height:33px;
	z-index:3;
}

.profile_selection:hover{
	background-color:#5d9731;
}

.layer_profile {
	bottom: 0px;
	top: inherit;
	height: 40px;
	
	background-color: #3e97d1;
	/*background-repeat:no-repeat;
	background-position:0px bottom;*/
	/*height:33px; 
	margin:auto;
	min-width: 320px;
	max-width: 1024px;
	z-index: 5;
	overflow:visible;*/
}

.layer2 {
	background-color: #0067ac;
	background-repeat:no-repeat;
	background-position:0px bottom;
	height:33px; 
	margin:auto;
	min-width: 320px;
	max-width: 1024px;
	z-index: 5;
	overflow:visible;
}


.navBtnHolder{
	margin: auto;
	width: 260px;
	float: right;
}

body.touch_device .backBtn:hover{
}

.navBtnHolder > div.backBtn.disabled{
	
}

.audioBtn {
	float: left;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	cursor: default;
	padding-left: 10px;
}


.audioBtn:hover{
	
}

body.touch_device .audioBtn:hover{
	
}

.audioBtn.paused{
	
}

.audioBtn.paused:hover{
	
}

body.touch_device .audioBtn.paused:hover{
	
}

.navBtnHolder > div.audioBtn.disabled{
	
}

.nextBtn{
	float: left;
	cursor: default;
	padding-left: 10px;
}

.nextBtn:hover{
	
}

body.touch_device .nextBtn:hover{
	
}

.navBtnHolder > div.nextBtn.disabled{
	color: #e5e5e5;
}

.layer2 .circle_button {
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
}

.menuBtn{
	float:left;
	background-repeat:no-repeat;
	background-position:0px 0px;
	padding-right: 0px;
	font-family: font-family: "helvetica_neue_45_light", Helvetica ,Arial, sans-serif;;
	font-size: 15px;
	color: #fff;
	font-weight:bold;
	margin-left:3%;
	cursor:default;
}

.menuBtn .menu, .backBtn .circle_button, .nextBtn .circle_button {
	width: 50px;
	height: 50px;
	background-color: #3d94cd;
	background-clip: content-box;
	border: 2px solid #3d94cd;
	padding: 2px;
	margin-top: -25px;
	position: relative;
	z-index: 4;
	cursor: pointer;

}

.nextBtn .circle_button {
	width:60px;
	height:60px;
	margin-top:-30px;
}

.circle_button.menu img {
	margin-top: 13px;
}
.circle_button.menu svg {
	margin-top:13px;
}

.menu_indicator img.menu_img {
	margin-top:0px;
}

.audio img {
	margin-top: 7px;
	margin-left: 0px;
}

.backBtn .circle_button img {
	margin-top: 8px;
	margin-right: 3px;
}

.nextBtn .circle_button img {
	margin-top: 11px;
}


.backBtn {
	float: left;
	height: 33px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 35px;
	font-family: "helvetica_neue_45_light", Helvetica ,Arial, sans-serif;
	font-size: 15px;
	color: #fff;
	font-weight: bold;
	cursor: default;
}

.navBtnHolder > div.backBtn.disabled {
	
}

.audioBtn .audio {
	position: relative;
	width: 36px;
	height: 36px;
	padding: 2px;
	margin-top: -18px;
	background-image:url(images/audio_off_icon.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-color: #3d94cd;
	background-clip: content-box;
	border: 2px solid #3d94cd;
	z-index: 4;
	cursor: pointer;
}

.audioBtn.paused > .audio {
	background-image:url(images/audio_on_icon.png);
	background-position: center;
}

.audioBtn.component_paused > .audio {
	background-image:url(images/audio_on_icon.png);
	background-position: center;
}


.replayBtn{
	float:left;
	height:33px;
	cursor:default;
}

.replayBtn:hover{
	
}

body.touch_device .replayBtn:hover{
	
}

.navBtnHolder > div.replayBtn.disabled{

}

.replayBtn .replay{
	width: 36px;
	height: 36px;
	background-color: #3d94cd;
	background-clip: content-box;
	border: 2px solid #3d94cd;
	padding: 2px;
	margin-top: -18px;
	margin-left: 15px;
	
	position: relative;
	z-index: 4;
	cursor: pointer;
}

.replay img {
	margin-top: 4px;
	margin-left: -2px;
	width: 20px;
	height: 20px;
}

.layer2 .replayBtn span {
	text-transform:none;
	padding-left: 5px;
}


.layer2 .audioBtn span {
	text-transform:none;
	padding-left: 5px;
}

.layer2 span {
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 11px;
	font-weight:bold;
	cursor: default;
}

.menuBtn span {
	padding-right: 4px;
}

.backBtn span {
	padding-right: 4px;
}

.nextBtn span {
	padding-left: 5px;
}


.layer1 {
	background-image:url(images/topbarbg.png);
	background-repeat:no-repeat;
	background-position: right bottom;
	height:60px;
	margin:auto;
	min-width: 320px;
	max-width: 1024px;
	z-index: 5;
	overflow:hidden;
	border-bottom: 1px solid #DEDEDE;
	background-color: #fff;
}


.logo{
	float: left;
	padding-top:20px;
	padding-left:19px;
	padding-right:30px;
	min-height: 60px;
}

.main_text {
	float:left;
	padding-left: 10px;
	padding-top: 10px;
	min-height: 60px;
}

.gui_heading{
	font-family: "helvetica_neue_45_light", Helvetica ,Arial, sans-serif;
	font-size: 18px;
	color: #333333;
	margin:0px;
	font-weight:bold;
	text-align: left;
}

.gui_subheading{
	font-family: "helvetica_neue_45_light", Helvetica ,Arial, sans-serif;
	font-size:16px;
	color: #7c828f;
	margin-top: 5px;
	font-weight:normal;
	text-align: left;
}

.gui_pageNum{
	position: absolute;
	left: 50%;
	top: 0%;
	margin-left: -75px;
	width: 150px;
	height: 33px;
	font-family: "helvetica_neue_45_light", Helvetica ,Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
}

.main_buttons{
	float:right;
	min-height: 60px;
	width: 260px;
	padding-top: 5px;
}

.pageNum{
	float: right;
	width:100%;
	height: 50%;
	min-height: 25px;
}

.mobile_navigation{
	float:right;
	min-height: 60px;
	width:50%;
}

.topBtns{
	float: right;
	width:365px;
	height: 100%;
	margin-top: 24px;
	min-height: 25px;
	padding-right:2px;
}

.topBtnWide{
	font-family: "Helvetica Neue", Helvetica ,Arial, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: center;
	color: #fffefe;
	padding-top: 7px;
	margin-right: 5px;
	float:right;
	height:29px;
	width:65px;
	cursor:pointer;
}

#resources.topBtnWide.currentPU{
	background-color: #7d7d7d;
}

#glossary.topBtnWide.currentPU{
	background-color: #72a6d1;
}

#transcript.topBtnWide.openTranscript{
	background-color: #7d7d7d;
}

.topBtnWide:hover{
	color: #333;
}

body.touch_device topBtnWide:hover{
	color:#fffefe;
}

.topBtns > div.topBtnWide.disabled{
	color: #f3f3f3;
}

.topBtn{
	font-family: Arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	color: #fff;
	padding-top: 5px;
	margin-right: 5px;
	float:right;
	height:30px;
	width:66px;
	cursor:pointer;
}
.topBtn:hover{
	
}

.topBtns > div.topBtn.disabled{
}



.circle_button:hover {
	background-color:#6BD0D0 !important;
	border: 2px solid #6BD0D0 !important;
}

.circle_button.disable_cb {
	background-color:#3d94cd;
	cursor: default;
	opacity: 0.7;
	border: 2px solid #3d94cd;
}

.circle_button.androidBtn{
	background-clip: initial;
}

body.touch_device .circle_button:hover{
	background-color:#c2c2c2;
}

body.touch_device .circle_button.disable_cb:hover{
	background-color:#000000;
}

/************************************************************************************/
/***************************** PHONE NAVIGATION (BOTTOM) ****************************/
/************************************************************************************/
.phone_nav{
	position: relative;
	display: none;
	background-image:url(images/interface-panel.gif);
	background-repeat:no-repeat;
	background-position:0px bottom;
	height:40px; 
	margin:auto;
	min-width: 320px;
	max-width: 1024px;
	z-index: 5;
	overflow:hidden;
}

.leftGrp{
	position: absolute;
	top: 0px;
	left: 0px;
}

.rightGrp{
	position: absolute;
	top: 0px;
	left: 100%;
	margin-left: -130px;
}

.pMenuBtn{
	float:left;
	display: block;
	height: 30px;
	width:30px;
	margin: 5px 5px;
	margin-left: 10px;
	background-image:url(images/pmenu.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size: 100% 100%;
	cursor: pointer;
}

.pMenuBtn.selected, .pMenuBtn:hover{
	background-image:url(images/pmenu_over.gif);
}



body.touch_device .pMenuBtn.selected, body.touch_device .pMenuBtn.selected:hover, body.touch_device .pMenuBtn:hover{
	background-image:url(images/pmenu.gif);
}

.pAudioBtn{
	float:left;
	display: block;
	height: 30px;
	width:30px;
	margin: 5px 5px;
	background-image:url(images/audioOn.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size: 100% 100%;
	cursor: pointer;
}

.pAudioBtn:hover{
	background-image:url(images/audioOn_over.gif);
}

body.touch_device .pAudioBtn:hover{
	background-image:url(images/audioOn.gif);
}

.pAudioBtn.paused, .pAudioBtn.component_paused{
	background-image:url(images/audioOff.gif);
}

.pAudioBtn.paused:hover, .pAudioBtn.component_paused:hover{
	background-image:url(images/audioOff_over.gif);
}

body.touch_device .pAudioBtn.paused:hover, body.touch_device .pAudioBtn.component_paused:hover{
	background-image:url(images/audioOff.gif);
}

.pReplayBtn{
	float:left;
	display: block;
	height: 30px;
	width:30px;
	margin: 5px 5px;
	background-image:url(images/replay.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size: 100% 100%;
	cursor: pointer;
}

.pReplayBtn:hover{
	background-image:url(images/replay_over.gif);
}

body.touch_device .pReplayBtn:hover{
	background-image:url(images/replay.gif);
}

.pNextBtn{
	float:left;
	display: block;
	height: 35px;
	width:35px;
	margin: 2px 5px;
	background-image:url(images/next.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size: 100% 100%;
	cursor: pointer;
}
	
.pNextBtn.disabled, .pNextBtn.disabled:hover{
	background-image:url(images/next_disabled.gif);
	cursor:default;
}

.pNextBtn:hover{
	background-image:url(images/next_over.gif);
}

body.touch_device .pNextBtn:hover{
	background-image:url(images/next.gif);
}

body.touch_device .pNextBtn.disabled, body.touch_device .pNextBtn.disabled:hover{
	background-image:url(images/next_disabled.gif);
	cursor:default;
}

.pBackBtn{
	float:left;
	display: block;
	height: 30px;
	width:30px;
	margin: 5px 5px;
	background-image:url(images/back.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size: 100% 100%;
	cursor: pointer;
}
	
.pBackBtn:hover{
	background-image:url(images/back_over.gif);
}
.pBackBtn.disabled, .pBackBtn.disabled:hover{
	background-image:url(images/back_disabled.gif);
	cursor:default;
}

body.touch_device .pBackBtn:hover{
	background-image:url(images/back.gif);
}	

body.touch_device .pBackBtn.disabled, body.touch_device .pBackBtn.disabled:hover{
	background-image:url(images/back_disabled.gif);
	cursor:default;
}

.phonecrumb{
	float: left;
	width: 40px;
	margin-top: 14px;
	margin-right: 5px;
}

.pFeedback{
	display: none;
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: -22px;
	height: 35px;
	width:45px;
	background-image:url(images/feedback.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size: 100% 100%;
	cursor: pointer;
}

.pFeedback.disabled{
	cursor: default;
}

/************************************************************************************/
/*************************** PHONE COMPONENT MENU ***********************************/
/************************************************************************************/
.phoneMenu{
	display: none;
	position: fixed;
	top: 60px;
	left: 50%;
	margin-left: -45%;
	width: 90%;
	max-width: 400px;
	min-height: 100px;
	background-color: #FFF;
	z-index: 10;
	border: 1px solid #54B948;
}

.phoneMenu div.closeButton {
	position: absolute;
	top: 0%;
	left: 100%;
	margin-left: -100px;
	margin-top: -30px;
	width: 100px;
	height: 30px;
	padding-right: 33px;
	padding-top: 6px;
	background-color: #323949;
	background-image: url(images/popup_close.png);
	background-position: 77px center;
	background-repeat: no-repeat;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-top: 1px solid #FFF;
	box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}



.phone_divider{ 
	display: block; 
	width: 80%;
	height: 1px;
	border: 0; 
	border-top: 1px solid #dedede;
}

.phoneMenu_logo{
	margin: 10px 0px;
}


.pmenuBtn{
	text-align: center;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
}



.iOS8 .bottom_nav_bar {
	bottom: 0px;
	top: inherit;
}

.iOS8 .centreContentContainer {
	max-height: none;
}






@media only screen and (max-height: 675px), only screen and  (max-width: 480px) {
	.bottom_nav_bar {
		bottom: 0px;
		top: inherit;
	}
}

@media only screen and  (max-width: 720px) {
	.title {
		font-size: 22px !important;
	}
}


@media only screen and  (max-width: 480px) {

	.bottom_nav_bar {
		bottom: 0px;
		top: inherit;
		height: 40px;
	}
	
	.navBtnHolder {
		width: 250px;
	}
	
	.layer2{
		min-width: 350px;
		display: none;
	}
	
	.phone_nav{
		display: block;
	}
	
	.centreContentContainer {
		max-height: none;
	}
}

@media only screen and (max-width: 700px) {
	.menuBtn span, .audioBtn span, .replayBtn span, .nextBtn span, .backBtn span, .gui_pageNum, .main_text {
		display: none!important;
	}
	
	.navBtnHolder {
		width: 170px;
	}
}

@media all and (orientation:portrait){
	.bottom_nav_bar {
		bottom: 0px;
		top: inherit;
	}
	
	.centreContentContainer {
		max-height: none;
	}
}


