/* 
	Able Player core styles
	
	z-index Map: 
	div.modalDialog = 6000
	div.modalOverlay = 5000
	.able-sign-window .able-button-handler-preferences = 4500
	.able-sign-window = 4000
	.able-alert = 3500
  .able-popup = 3200 
  .able-tooltip = 3000
  .able-controller .able-seekbar = 1970
  .able-controller .buttonOff = 1965
  .able-controller button > img = 1960
  .able-controller button > span = 1955
	.able-controller button = 1950 
	.able-big-play-button = 1900
	div.able-captions = 1000
  .able-seekhead = 300
  .able-seekbar-played = 200 
	.able-seekbar-loaded = 100 
	.able = 100 
	.able-sign-window (if sent to back) = 0 

*/
.able { 
  position: relative;
  margin: 1em 0;
  width: 100%; /* will be changed dynamically as player is contructed */
  box-shadow: 0px 0px 16px #262626;
  z-index: 100; 
}
.able-column-left {
    float: left;
}
.able-column-right {
    float: left;
}
.able .able-vidcap-container {
  background-color: black;
  height: 360px;
  left: 0;
  margin: 0;
  position: relative;
  top: 0;
}
.able-player { 
	font-family: Arial, Helvetica, sans-serif;
	background-color: #262626; /* background color of player (appears on top & bottom) */
}
.able-offscreen { 
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.able-video { 
/*	margin-top: -0.75em;*/
}
.able-video .able-now-playing { 
	display: none; /* not currently used for video */
}
.able-controller { 
	position: relative;
	border-top: 2px solid #4c4c4c; 
	border-bottom: 2px solid #4c4c4c; 
	background-color: #464646; /* background color of controller bar */
	min-height: 38px; /* height of button (20px) + 4px border + 4px padding */
	padding: 0; 
}
.able-poster { 
  position: absolute; 
  top: 0;
  left: 0;
}

/* 
  Controller Buttons & Controls 
*/
.able-big-play-button {
    position: absolute;
    font-size: 8em;
    opacity: 0.5;
    filter:alpha(opacity=50); /* for IE */
    color: #fdfdfd;
    background-color: transparent;
    border: none;
    outline: none;
    z-index: 1900;
    left: 0;
    top: 0;
    padding: 0;
}
.able-big-play-button:hover {
    opacity: 100;
    filter:alpha(opacity=100); /* for IE */
}
.able-left-controls, .able-right-controls { 
    overflow: visible;
}
.able-left-controls button, .able-right-controls button {
    vertical-align: middle;
}
.able-left-controls { 
  float: left;
}
.able-right-controls { 
  float: right;
}
.able-left-controls span,
.able-right-controls span {
  color: #fdfdfd;
}
.able-controller button {
  background: none;
  position: relative;
  display: inline-block;
  border-style: none;
  margin: 0;
  padding: 0;
  color: #fdfdfd;
  min-width: 20px;
  overflow: hidden !important;
  z-index: 1950;
}
.able-controller button > span { 
  /* icomoon font icon */
  font-size: 20px; 
  width: 24px;
  margin: 0 5px;
  padding: 0;
  z-index: 1955;
}
.able-controller button > img { 
  /* image icon */
  margin: 0 2px;
  padding: 0;
  z-index: 1960;
}
.able-controller .buttonOff { 
	opacity: 0.5;
	filter:alpha(opacity=50); /* for IE */
    z-index: 1965;
}
.able-controller .able-seekbar {
  margin: 0 5px;
  z-index: 1970;
}
.able-controller button:hover, 
.able-controller button:focus { 
  outline-style: solid;
  outline-width: medium;
}  
.able-controller button:hover {  
	outline-color: #8AB839 !important; /* green */
}
.able-controller button:focus { 
	outline-color: #ffbb37 !important; /* yellow */
}

/* 
  Seekbar 
*/
.able-seekbar-wrapper { 
  display: inline-block;
  vertical-align: middle;
}
.able-seekbar {
  position: relative;
  height: 0.5em;
  border: 1px solid;
  background-color: #000000;
  margin: 0 3px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}
.able-seekbar-loaded { 
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5em;
  background-color: #464646;
  z-index: 100;
}
.able-seekbar-played { 
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5em;
  background-color: #DADADA;
  z-index: 200;
}
.able-seekhead { 
  display: inline-block;
  position: relative;
  left: 0;
  top: -0.45em;
  border: 1px solid;
  background-color: #FDFDFD;
  z-index: 300;
}

/* 
  Status Bar 
*/

.able-status-bar { 
	height: 1.5em;
	min-height: 1.5em;
	color: #FFFFFF;
	font-size: 1.0em;
	background-color: transparent;
	padding: 0.5em 0.5em 0.25em;
}	
.able-status-bar span.able-timer { 
	/* contains both span.elapsedTime and span.duration */	
	color: #ffffff;
	text-align: left;
	float: left;
	width: 32%;
}
.able-status-bar span.able-speed { 
  float: left;
  width: 32%;
  text-align: center;
}
.able-status { 
	font-style: italic;
	float: right;
	width: 32%;
	text-align :right;
}

/* 
  Captions and Descriptions 
*/

div.able-captions {
  bottom: 0;
  margin: 0;
  padding: 0.5em 0;
  position: absolute;
  text-align: center;
  display: none;
  z-index: 1000;
  line-height: 1.15em;
  /* settings that are overridden by user prefs */
  background-color: black;
  font-size: 1.1em;
  color: white;
  opacity: 0.75;
  
}
div.able-descriptions { 
  position: relative;
  color: #FF6; /* yellow, to differentiate it from captions */
  background-color: #262626;
  min-height: 3em; 
  border-top: 1px solid #666;
  margin: 0;
  padding: 3%;
  width: 94%;
  text-align: center;
}

/* 
  Now Playing 
*/

div.able-now-playing {
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	color: #FFFFFF;
	background-color: transparent; 
	padding: 0.5em 0.5em 1em;
}
div.able-now-playing span { 
	font-size: 0.9em;
}
div.able-now-playing span span { 
	display: block;
}

/* 
  Modal Dialogs 
*/ 

div.modalDialog { 
  position: absolute;
  z-index: 6000;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  left: 0px;
  right: 0px;
  outline: 0px none;
  display: none;
}
div.modalOverlay { 
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background-color: #000;
  opacity: 0.5;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
}
button.modalCloseButton { 
  position: absolute;
  top: 5px;
  right: 5px;
}
button.modal-button { 
  margin-right: 5px;
}
div.modalDialog input:hover, 
div.modalDialog input:focus,   
div.modalDialog button:hover,
div.modalDialog button:focus {  
  outline-style: solid;
  outline-width: 2px;
}
div.modalDialog input:hover, 
div.modalDialog button:hover { 
	outline-color: #8AB839; /* green */
}
div.modalDialog input:focus, 
div.modalDialog button:focus { 
	outline-color: #ffbb37; /* yellow */
}
.able-prefs-form, 
.able-help-div, 
.able-resize-form { 
	background-color: #F5F5F5; 
	border: medium solid #ccc;
	padding: 0.5em 1em;
	margin: 0 0 0 1em; 
	width: 25em;
	display: none;
}

/* 
  Preferences Form 
*/ 

.able-prefs-form fieldset { 
	border: none;
}
.able-prefs-form legend { 
	color: black;
	font-weight: bold;	
}
.able-prefs-form fieldset div { 
  display: table; 
}
.able-prefs-form fieldset div input { 
  display: table-cell;
	width: 1em;
	vertical-align: middle;
}
.able-prefs-form fieldset div label { 
  display: table-cell;
	padding-left: 0.5em;
}
fieldset.able-prefs-keys div { 
  float: left;
  margin-right: 1em; 
}
div.able-desc-pref-prompt { 
  font-weight: bold;
  font-style: italic;
  margin-left: 1em !important;
}
div.able-prefDescFormat > div { 
  margin-left: 1.5em;
}
.able-prefs-captions label, 
.able-prefs-captions select { 
  display: block; 
  float: left;  
  margin-bottom: 0.25em;
}
fieldset.able-prefs-captions label { 
  width: 6em; 
  text-align: right; 
  padding-right: 1em;  
}
fieldset.able-prefs-captions select { 
  width: 10em;
  font-size: 0.9em;
  border-radius: none; 
}
.able-prefs-form div.able-captions-sample { 
  padding: 0.5em;
  text-align: center;
}

/* 
  Help Dialog 
*/ 

.able-help-div { 
	background-color: #F5F5F5; 
	border: medium solid #ccc;
	width: 25em;
}
.able-help-div ul { 
	list-style-type: none;
}
.able-help-modifiers { 
  font-weight: bold;
}

/* 
  Resize Window Dialog
*/ 

.able-resize-form h1 { 
  font-size: 1.15em;
}
.able-resize-form div div { 
  margin: 1em;
}
.able-resize-form label { 
  padding-right: 0.5em;
  font-weight: bold;
}
.able-resize-form input[type="text"] { 
  font-size: 1em;
}

/* 
  Sign Language Window 
*/
.able-sign-window { 
  position: relative;
  margin: 1em;
  width: 480px;
  z-index: 4000;
}
.able-sign-window .able-button-handler-preferences { 
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5em;
  opacity: 0.85;
  filter:alpha(opacity=85); /* for IE */
  color: #fdfdfd;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 4500;
  padding: 0;
}
.able-sign-window .able-popup { 
  position: absolute; 
  right: 0;
  top: 0;
}
.able-sign-window:focus { 
  outline: none;
}
.able-sign-window button:hover, 
.able-sign-window button:focus { 
  outline-style: solid;
  outline-width: medium;
}  
.able-sign-window button:hover {  
	outline-color: #8AB839 !important; /* green */
}
.able-sign-window button:focus { 
	outline-color: #ffbb37 !important; /* yellow */
}

/* 
  icomoon.io font styling 
*/

@font-face {
	font-family: able;
	src:url('../fonts/able.eot?sn5rkg');
	src:url('../fonts/able.eot?#iefixsn5rkg') format('embedded-opentype'),
		url('../fonts/able.woff?sn5rkg') format('woff'),
		url('../fonts/able.ttf?sn5rkg') format('truetype'),
		url('../fonts/able.svg?sn5rkg#able') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: able;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
	content: "\f04b";
}
.icon-pause:before {
	content: "\f04c";
}
.icon-stop:before {
	content: "\f04d";
}
.icon-fullscreen-expand:before {
	content: "\f065";
}
.icon-fullscreen-collapse:before {
	content: "\f066";
}
.icon-pipe:before {
	content: "\e600";
}
.icon-captions:before {
	content: "\e601";
}
.icon-descriptions:before {
	content: "\e602";
}
.icon-transcript:before {
	content: "\f15c";
}
.icon-slower:before {
	content: "\f0dd";
}
.icon-faster:before {
	content: "\f0de";
}
.icon-help:before {
	content: "\f128";
}
.icon-close:before {
	content: "\f00d";
}
.icon-rewind:before {
	content: "\e603";
}
.icon-forward:before {
	content: "\e604";
}
.icon-volume-loud:before {
	content: "\e60b";
}
.icon-volume-medium:before {
	content: "\e605";
}
.icon-volume-soft:before {
	content: "\e60c";
}
.icon-volume-mute:before {
	content: "\e606";
}
.icon-volume-up:before {
	content: "\e607";
}
.icon-volume-down:before {
	content: "\e608";
}
.icon-chapters:before {
	content: "\e609";
}
.icon-preferences:before {
	content: "\e60d";
}
.icon-sign:before {
	content: "\e60a";
}

/* 
  Fullscreen settings 
  In v2.2.4b commented out :-webkit-full-screen style 
  This was causing the toolbar in fullscreen mode to be positioned slightly offscreen in webkit browsers 
  Safari had an additional problem in window height was being calculated (see event.js > onWindowResize()) 
  Commenting out this style appears have no adverse effect in any browser
  All other fullscreen styles were already commented out, and left here solely for reference 
*/
/*
:-webkit-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: none;
}
:-moz-full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 20;
  background: none;
}

:-ms-fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: none;
}

:fullscreen {
  position: fixed;
  width: 100%;
  height: 80%;
  top: 0;
  background: none;
}
*/

/* 
  Tooltips & Alerts
*/
.able-tooltip, .able-alert {
  position: absolute;
  padding: 5px 10px;
  border-color: black;
  border-width: 1px;
  background-color: #CCCCCC;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: none;
}
.able-alert { 
  background-color: #FFFFCC;
  z-index: 3500; 
}
.able-popup { 
  z-index: 3200; 
}
.able-tooltip { 
  z-index: 3000; 
}

/* 
  Popup Menus
*/
.able-popup {
  position: absolute;
  margin: 0;
  padding: 0;
  border-color: black;
  border-width: 1px;
  background-color: #000;
  opacity: 0.85;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: none;
  z-index: 3000;
}
.able-popup ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.able-popup li { 
  padding: 0.25em 1em 0.25em 0.25em;
  margin: 1px;
}
.able-popup label { 
  padding-left: 0.25em;
  color: #FFF;
}
.able-popup li.able-focus { 
  background-color: #CCC;
}
.able-popup li.able-focus label { 
  color: #000;
}

/* 
  Drag & Drop 
*/
.able-drag { 
  border: 2px dashed #F90; 
  cursor: move;
}

/* 
  Misc 
*/

.able-clipped { 
	/* hide from sighted users, but not screen reader users */
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);	
}
.able-error { 
	display: block;
	background: #ffc;
	border: 2px solid #000;
	color: #FF0000;
	margin: 0.75em;
	padding: 0.5em;
}
.able-fallback { 
  display: block;
  text-align: center;
  border: 2px solid #333355;
  background-color: #EEE;
  color: #000;
  font-weight: bold;
  font-size: 1.1em;
  padding: 1em;  
  margin-bottom: 1em;
}
.able-fallback div, 
.able-fallback ul, 
.able-fallback p { 
  text-align: left;
} 
.able-fallback li  { 
  font-weight: normal;
}
.able-fallback img { 
  width: 90%; 
  margin: 1em auto;
  opacity: 0.3;
}