/* 
  Modified CSS for "Accessible Controls for the YouTube Embedded Video Player"
 
*/

figure.video {
	padding: 1.5em;
	position: relative;
    border: 1px solid #CCC;
	}
	
	[id^=thisytp]{
	margin-left:auto;
	margin-right:auto;
	height: 480px !important;
	display:block;
	}
	
.ytpvideo span, .ytpvideo object, .ytplayerbox{
	width: 100% !important;
}

	.ytpvideo p, .ytplayerbuttons, .ytplayerbox h4 {
		display: block;
		}
		
		.content .ytpvideo a:hover, .content .ytpvideo a:focus {
			background-color:inherit !important;
			text-decoration:underline !important;
			color:#555;
		}
		
	.ytpvideo .vidTitle {
		margin-top: -0.75em;
		font-size: 1.2em;
		color: #c06;
		}
	
	.videoNavigateWrapper {
		position: relative;
		width: 55%;
		float: left;
		margin: 1em 0px;
		}
	
	.videoNavigate {
		display: table;
		position: relative;
		z-index: 1;
		}
	
	.videoNavigate a {
		width: 15%;
		padding-top: 50px;
		display: table-cell;
		}
	
		.videoNavigate a b {
			display: block;
			font-weight: 400;
			font-size: 0.9em;
			color: #666;
			line-height: 1.25em;
			height: 2.1em;
			padding: 0.2em 0.5em;
			text-align: center;
			border-left: 1px solid #BBB;
			}
		
		.videoNavigate a:first-child b {
			border-left: 0px;
			}
		
		.videoNavigate .play {
			background: transparent url('i-play.png') no-repeat center 6px;
			}
		
		.videoNavigate .stop {
			background: transparent url('i-stop.png') no-repeat center 3px;
			}
		
		.videoNavigate .back {
			background: transparent url('i-back.png') no-repeat center 6px;
			}
		
		.videoNavigate .forward {
			background: transparent url('i-forward.png') no-repeat center 6px;
			}
	
	.videoNavigateInsemanticBackgroundThingWrapper {
		position: absolute;
		z-index: 0;
		top: 0px;
		left: 0px;
		right: 5%;
		height: 45px;
		background: #BBB;
		-webkit-box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
		box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
		border-radius: 20px;
		}
		
		.videoNavigateInsemanticBackgroundThing {
			position: absolute;
			z-index: 0;
			top: 3px;
			left: 48%;
			right: 3px;
			height: 39px;
			background: #BBB;
			-webkit-box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.05);
			box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.05);
			border-radius: 16px;
			}
	
	.videoVolume {
		float: right;
		position: relative;
		width: 42%;
		padding: 8px;
		margin: 1em 0px;
		background: #dbdbdb;
		border: 1px solid #c4c4c4;
		border-radius: 18px;
		}
		
		.videoVolumeInsemanticBackgroundThing {
			position: absolute;
			z-index: 0;
			top: 4px;
			left: 4px;
			width: 35px;
			background: #ccc;
			height: 4.75em;
			border-radius: 15px;
			}
		
		.videoVolume a {
			display: block;
			position: relative;
			z-index: 1;
			width: 20%;
			height: 2.2em;
			padding-left: 37px;
			margin-bottom: 0.75em;
			float: left;
			font-size: 0.85em;
			color: #666;
			}
		
		.videoVolume .vUp {
			background: transparent url('i-vUp.png') no-repeat 0px center;
			}
		
		.videoVolume .vDown {
			background: transparent url('i-vDown.png') no-repeat 0px center;
			clear: left;
			margin-bottom: 0px;
            padding-bottom: 6px;
		}
		
		.videoVolume .mute {
			background: transparent url('i-mute.png') no-repeat 10px center;
			padding-top: 0.5em;
			height: 1.7em;
			float: right;
			margin-right:20px
		}
		
		.videoVolume .loop {
			background: transparent url('i-loop.png') no-repeat 8px center;
			padding-top: 0.5em;
			height: 1.7em;
			float: right;
			margin-bottom: 0px;
			margin-right:20px
			}
	
	.ytpvideo .vidTime {
		clear: both;
		font-size: 1.2em;
		/*text-transform: uppercase;*/
		background: #ccc;
		padding: 1.2em 0.3em;
		color: #222;
		}
	
	.audiovideohelp {
		
		right: 1em;
		bottom: -0.5em;
		}