@import "../../styles/commonStyleMixins.less";
@import "glossary.less";
@import "notes.less";

@imagesPath: "player/styles/images";

@commonImagesPath: "styles/images";

@playerTopPadding: 25px;
@playerBottomPadding: 25px;
@playerSidePadding: 25px;

@titleHeight: 58px;
@toolBarHeight: 39px;
@surroundingBorderWidth: 3px;

@toolBarButtonWidth: 90px;
@toolBarNavigationButtonWidth: 60px;

html
{
	height: 100%;
	overflow: hidden;
	background:#F0F0F0 url("@{commonImagesPath}/page-loader.gif") center no-repeat;
	
	body
	{
		height: 100%;
		overflow: hidden;
	}
	
}

#playerContainer
{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	display:none;
	height: 100%;
	padding-top: 0;
	padding-right: @playerSidePadding;
	padding-bottom: @playerBottomPadding;
	padding-left: @playerSidePadding;
}

html.loaded
{
	background: none;
	
	#playerContainer
	{
		display: block;
	}
}

/* ******************* */
/* BREADCRUMB STYLINGS */
/* ******************* */

#breadcrumbTrail
{
	padding: 0;
	margin: 0 10px;
	line-height: @playerTopPadding;
	overflow: hidden;
}

/* *************** */
/* PLAYER STYLINGS */
/* *************** */

#playerWrapper
{
	margin: 0;
	height: 100%;
	
	#titleContainer
	{
		position: fixed;
		left: @playerSidePadding;
		right: @playerSidePadding;
		top: @playerTopPadding;
		
		
		#titleWrapper
		{
			margin: 0;
			height: @titleHeight - @surroundingBorderWidth;
		}
		
		#learningObjectiveTitle
		{
		    line-height: @titleHeight;
		    padding: 0 15px;
		}
	}
	
	#toolBarContainer
	{
		position: fixed;
		left: @playerSidePadding;
		right: @playerSidePadding;
		bottom: @playerBottomPadding;
		
		height: @toolBarHeight;
		
		#toolBarWrapper
		{
			position: relative;
			margin: 0;
			padding: 0 3px;
			height: @toolBarHeight;
		}
		
		.playerToolBarButton
		{
			display: block;
			height: @toolBarHeight;
			width: @toolBarButtonWidth;
			padding: 0;
			margin: 0;
					
			.ui-button-text
			{
				display: block;
				height: @toolBarHeight;
				width: @toolBarButtonWidth;
			}
			
		}
		
		.toolBarButtontip
		{
			display: none;
			
			z-index: 1000;
			
			p
			{
				padding: 10px;
				margin-bottom: 8px;
				line-height: 1;
			}
		}
		
		.toolBarOperationsWrapper
		{
			float: left;
			
			&#helpWrapper
			{
				float: right;
			}
		}
		
		#pageListWrapper
		{
			@menuItemHeight: 25px;
			
			position: relative;
			
			#pageListPanel
			{
				display: none;
				
				position: absolute;
				bottom: @toolBarHeight;
				left: 10px;
				padding: 10px;
				
				z-index: 99;
				
				#pageListTitle
				{
					margin: 0;
					padding: 0;
					line-height: 30px;
					padding: 0 7px;
				}
			}
			
			#pageListScroller
			{
				height: (@menuItemHeight * 4);
				position: relative;
				overflow: auto;
				width: 456px;
			}
			
			#pageList
			{
				margin: 0;
				padding: 0;
				list-style: none;
				width: 456px;
				
				li
				{
					padding: 0;
					margin: 0;
				}
				
				.pageListItem a
				{
					line-height: @menuItemHeight;
					display: block;
					padding: 0 16px;
					width: 420px;
				}
			}
		}
		

		
	
		
		#pageNavigationWrapper
		{
			float: right;
			
			#btnPreviousPage, #btnNextPage
			{
				float: left;
				.playerToolBarButton;
				
				width: @toolBarNavigationButtonWidth;
				
				.ui-button-text
				{					
					width: @toolBarNavigationButtonWidth;
				}
			}
						
			#pageTrackingStatus
			{
				float: left;
				line-height: @toolBarHeight; 
			}
		}
		
		#volumeWrapper
		{
			float: right;
			position: relative;
			
			#volumeControlPanelOverlay
			{
				display: none;
				
				position: fixed;

				top: @playerTopPadding + @surroundingBorderWidth;
				right: @playerSidePadding + @surroundingBorderWidth;
				bottom: @playerBottomPadding + @toolBarHeight; 
				left: @playerSidePadding + @surroundingBorderWidth;
				
				z-index: 99;
			}
			
			#volumeControlPanel
			{
				@volumeControlPanelWidth: 57px;
				
				position: absolute;
				
				bottom: @toolBarHeight;
				left: (@toolBarButtonWidth - @volumeControlPanelWidth) / 2;
				
				z-index: 99;
			}
			
			#volumeControl
			{
				width: 12px;
				height: 100px;
				padding: 0px;
				position: relative;
				
				margin: 10px 22px;
				
				.ui-slider-range
				{
					position: absolute;
					width: 12px;
					bottom: 0;
				}
				
				.ui-slider-handle
				{
					position: absolute;
					width: 12px;
					height: 12px;
					margin-bottom: -6px;
				}
				
			}
			
			#summaryAudioMuteToggleContainer
			{
				margin: 5px;
				
				padding-top: 2px;
				
				#summaryAudioMuteToggle
				{
					position: absolute;
					top: 1px;
					left: 0px;
					margin: 0;
					padding: 0;
				}
				
				label
				{
					margin: 0;
					position: relative;
					padding-left: 18px;
				}
			}
		}
		
		
		#summaryAudioContainer 
		{ 
			.jp-progress 
			{
				width: 125px;
			}

			.jp-volume
			{
				display: none;
				
				bottom: 39px;
				left: -66px;
			}
			
			div.jp-interface ul.jp-controls
			{
				width: @toolBarNavigationButtonWidth;
			} 
			
			.jp-controls li a, .jp-controls li span
			{
				width: @toolBarNavigationButtonWidth;
			}
		}
		
		#summaryAudioContainer
		{
			float: right;
		}
	}
	
	#currentPageContainer
	{
		position: fixed;
		left: @playerSidePadding;	
		right: @playerSidePadding;	
		top: @playerTopPadding + @titleHeight;	
		bottom: @playerBottomPadding + @toolBarHeight;
	}
	
	#currentPageWrapper
	{
		height: 100%;
		
		margin: 0 @surroundingBorderWidth;
		
		position: relative;
	}
	
	#pageLoader
	{
		padding: 0;
		margin: 0;
		width: 100%;	
		border: none;
		
		position: relative;
	}	
}

.ie7 
{
	#playerWrapper
	{
		#currentPageWrapper
		{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
}

#transcriptPanel
{
	display: none;
	
	position: absolute;
	bottom: @toolBarHeight;
	left: 10px;
	width: 30%;

	min-height: 72px;
				
	#transcriptScroller
	{
		position: relative;
		height: 72px;
	}
	
	#transcript
	{
		position: absolute;
		
		padding: 3px 7px;
		margin: 2px;
	}
}

@media all and (max-width: 800px) 
{
	#transcriptPanel
	{
		width: 40%;
	}
}

@media all and (max-width: 1280px) 
{
	@toolBarButtonWidth: 79px;
	@toolBarNavigationButtonWidth: 49px;
	
	#playerWrapper #toolBarContainer .playerToolBarButton
	{
		width: @toolBarButtonWidth; 
		
		.ui-button-text
		{
			width: @toolBarButtonWidth;
		}
	}
	
	#playerWrapper #toolBarContainer
	{
		#btnPreviousPage, #btnNextPage
		{	
			width: @toolBarNavigationButtonWidth;
			
			.ui-button-text
			{					
				width: @toolBarNavigationButtonWidth;
			}
		}
		
		#volumeWrapper #volumeControlPanel
		{
			@volumeControlPanelWidth: 57px;
			
			left: (@toolBarButtonWidth - @volumeControlPanelWidth) / 2;
		}
		
		#summaryAudioContainer 
		{
			.jp-progress 
			{
				width: 105px;
			}
			
			.jp-volume
			{
				left: -60px;
			}
			
			div.jp-interface ul.jp-controls
			{
				width: @toolBarNavigationButtonWidth;
			} 
			
			.jp-controls li a, .jp-controls li span
			{
				width: @toolBarNavigationButtonWidth;
			}
		}
	}
}

@media all and (max-width: 800px) 
{
	@toolBarButtonWidth: 60px;
	@toolBarNavigationButtonWidth: 39px;
	
	#playerWrapper #toolBarContainer .playerToolBarButton
	{
		width: @toolBarButtonWidth; 
		
		.ui-button-text
		{
			width: @toolBarButtonWidth;
		}
	}
	
	#playerWrapper #toolBarContainer
	{
		#pageNavigationWrapper #btnPreviousPage, #pageNavigationWrapper #btnNextPage
		{	
			width: @toolBarNavigationButtonWidth;
			
			.ui-button-text
			{					
				width: @toolBarNavigationButtonWidth;
			}
			
		}
		
		#volumeWrapper
		{
			display: none;
		}
		
		#summaryAudioContainer 
		{
			width: 125px;
			
			.jp-progress 
			{
				width: 61px;
			}
			
			.jp-volume
			{
				display: none;
			}
			
			div.jp-interface ul.jp-controls
			{
				width: @toolBarNavigationButtonWidth;
			} 
			
			.jp-controls li a, .jp-controls li span
			{
				width: @toolBarNavigationButtonWidth;
			}
		}
		
		#glossaryButtonWrapper
		{
			
		}
	}
}

.hidden
{
	display: none;
}

/* ************************************ */
/* HIDING UNWANTED BUTTONS FROM TOOLBAR */
/* ************************************ */

.no-navigation
{
	#pageListWrapper, #pageNavigationWrapper
	{
		display: none !important;
	}
	
	#summaryAudioContainer
	{
		border-right: solid 1px black;
	}
}