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

/************************************************/
/* Begin audio and transcript controller styles */
/************************************************/

#AudioTranscriptContainer {
	background-color: #F2F2F2;
	border: 1px solid #F2F2F2;
    margin-left: auto;
    margin-right: auto;
}

#AudioPlayPause {
    font-size: 1.4em;
}

#AudioPlayPause a {
	color: #000000;
}

#AudioPlayPause span {
	cursor: pointer;
}

#AudioTimeDisplay {
 max-width: 100px;
}

#AudioProgressDisplay {
	width: 100%;
}

#AudioProgressDisplay progress {
	cursor: pointer;
}

/* Customize the <progress> tag. Step 1, turn off all styling. Step 2, style the bar background. Step 3, style the bar value. */

/* Step 1, turn off all styling and give it dimensions */
	#AudioProgressDisplay progress,          /* All HTML5 progress enabled browsers */
	#AudioProgressDisplay progress[role]     /* polyfill */
	{
	
		/* Turns off styling - not usually needed, but good to know. */
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	
		/* gets rid of default border in Firefox and Opera. */ 
		border: none;
	
		/* Needs to be in here for Safari polyfill so background images work as expected. */
		background-size: auto;
		
		/* Dimensions */
		width: 100%;
		height: 1.0em;
		
		/* Padding */
		/*padding-top: 1.0em;
		padding-bottom: 1.0em;*/
		
	}
	
	/* Polyfill */
	#AudioProgressDisplay progress[role]:after {
		background-image: none; /* removes default background from polyfill */
	}
	
	/* Ensure fallback text doesn't appear in polyfill */
	#AudioProgressDisplay progress[role] strong {
		display: none;
	}
	
/* Step 2, style the progress bar background */
	#AudioProgressDisplay progress,                          /* Firefox  */ 
	#AudioProgressDisplay progress[role][aria-valuenow] {    /* Polyfill */
	   background: #FFFFFF !important; /* !important is needed by the polyfill */
	}
	
	/* Chrome */
	#AudioProgressDisplay progress::-webkit-progress-bar {
		background: #FFFFFF;
	}
	
/* Step 3, style the progress bar value */
	/* IE10 */
	#AudioProgressDisplay progress {
		color: #333333;
	}
	
	/* Firefox */
	#AudioProgressDisplay progress::-moz-progress-bar { 
		background: #333333;	
	}
	
	/* Chrome */
	#AudioProgressDisplay progress::-webkit-progress-value {
		background: #333333;
	}
	
	/* Polyfill */
	#AudioProgressDisplay progress[aria-valuenow]:before  {
		background: #333333;
	}
	/* Special style for browsers that don't support the <progress> tag (e.g. Safari prior to version 6) */
	#AudioProgressDisplay progress strong {
		color: #000000;
	}
	
/* End styles for <progress> tag */

#AudioVolume {
	font-size: 1.4em;
    max-width: 30px;
}

#AudioVolume a {
	color: #000000;
}

#AudioVolume span {
	cursor: pointer;
	
}

#AudioTranscript {
	
}

#AudioTranscript button {
	background-color: #F2F2F2;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 0.5em;
}

#AudioTranscript button:hover {
	background-color: #000000;
	color: #FFFFFF;
}

#AudioTranscript a {
	cursor: pointer;
}

#transcriptBox {
    border-color: #F2F2F2;
    border-style: solid;
    border-width: 2px;
	margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
	display: none;
}

#TranscriptText {
	max-height: 140px;
	overflow-y: auto;
    font-size: 1.1em;
}

/*#TranscriptText ol, #TranscriptText ul {
    font-size: 1.0em;
}

#TranscriptText ol li, #TranscriptText ul li {
    font-size: 1.0em;
}*/

#TranscriptText * {
    font-size: 1.0em;
}

@media only screen and (min-width: 1280px) {
	
#AudioTranscriptContainer {
	width: 80%;
}

#transcriptBox {
	width: 80%;
}
#TranscriptText {
	max-height: 160px;
	overflow-y: auto;

}    
}

/**********************************************/
/* End audio and transcript controller styles */
/**********************************************/


/* Circle audio control stuff */
/*
#RTAudioControl {
	position: relative;
	width: 33px;
	height: 37px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#audioCanvas {
}

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

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

#audioControl {
	width: 33px;
	height: 37px;
	padding-top: 10px;
}

#audioControl a {
	display: block;
	width: 33px;
	height: 32px;
	margin-bottom: 4px;
	padding-top: 19px;
}

#audioControl label {
	position: absolute;
	left: -3000px;
	top: -3000px;
}

#audioControl input[type="image"]:focus {
	outline: 3px solid #FFD700;
}

#audioControlLabel {
	position: relative;
	top: -10px;
}

@media ( max-width: 767px) {

	#RTAudioControl {
		padding-top: 0px;
		top: 4px;
	}
	
	#audioControlLabel {
		font-size: 0.8em;
	}
	
	#audioControl {
		padding-top: 0px;
	}

	#audioControl {
		padding-top: 0px;
	}
	
}
*/