/*

Able Player core styles

Default z-index map:

* Modal dialog

div.able-modal-dialog = 10000

div.able-modal-overlay = 9500

* Items that should always be on top (9000):

#able-vts = 9400

.able-alert = 9400

.able-window-toolbar .able-button-handler-preferences = 9300

.able-popup = 9200

.able-volume-head = 9175

.able-volume-slider = 9150

.able-tooltip = 9000

* Pop-ups with critical content: (7000 - 8000):

.able-sign-window = 8000

.able-transcript-area = 7000

* Player controls: (5000 - 6000)

.able-controller .able-seekbar = 6900

.able-controller .buttonOff = 6800

.able-controller div[role="button"] > img = 6700

.able-controller div[role="button"] > span = 6700

.able-controller div[role="button"] = 6600

.able-big-play-button = 6500

div.able-captions-wrapper = 6000

.able-seekbar-head = 5500

.able-seekbar-played = 5200

.able-seekbar-loaded = 5100

.able = 5000

*/

.able-wrapper {

position: relative;

margin: 1em 0;

padding: 0;

max-width: 100%;

height: auto;

box-sizing: content-box !important;

text-align: left;

}

.able {

position: relative;

margin: 0;

padding: 0;

width: 100%; /* will be changed dynamically as player is contructed */

background-color: #000;

box-shadow: 0px 0px 16px #262626;

z-index: 5000;

}

.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 .able-audcap-container {

background-color: black;

position: relative;

margin: 0;

padding: 1.5em 0.25em;

}

.able-player {

font-family: Arial, Helvetica, sans-serif;

background-color: #262626; /* background color of player (appears on top & bottom) */

}

.able-audio {

padding-top: 1em;

}

.able-offscreen {

position: absolute;

left: -10000px;

top: auto;

width: 1px;

height: 1px;

overflow: hidden;

}

.able-media-container audio {

display: none !important;

}

.able-controller {

position: relative;

border-bottom: 1px 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;

width: 100% !important;

height: auto !important;

}

.able .able-vidcap-container {

overflow: visible;

}

.able .able-vidcap-container video {

max-width: 100%;

}

/*

YouTube and Vimeo

*/

.able-media-container iframe {

max-width: 100%;

}

/*

Controller Buttons & Controls

*/

.able-big-play-button {

position: absolute;

font-size: 8em;

color: #fdfdfd;

background-color: transparent;

border: none;

outline: none;

left: 0;

top: 0;

padding: 0;

z-index: 6500;

/*

Opacity value chosen to achieve a

contrast ratio of 5.63 in the worst case.

*/

opacity: 0.75;

filter:alpha(opacity=75); /* for IE */

}

.able-big-play-button:hover, .able-big-play-button:focus {

opacity: 100;

filter:alpha(opacity=100); /* for IE */

}

.able-big-play-button .icon-play,

.able-big-play-button svg {

background-color: black;

padding: 1rem 2rem;

}

.able-big-play-button:hover .icon-play,

.able-big-play-button:hover svg {

outline-style: solid;

outline-width: medium;

outline-color: #8AB839 !important; /* green */

}

.able-big-play-button:focus .icon-play,

.able-big-play-button:focus svg {

outline-style: solid;

outline-width: medium;

outline-color: #ffbb37 !important; /* yellow */

}

.able-left-controls, .able-right-controls {

overflow: visible;

}

.able-left-controls div[role="button"], .able-right-controls div[role="button"] {

vertical-align: middle;

}

.able-left-controls {

float: left;

}

.able-right-controls {

float: right;

}

.able-black-controls,

.able-black-controls div[role="button"],

.able-black-controls label {

color: #000 !important;

}

.able-black-controls .able-seekbar {

border: 1px solid #000;

}

.able-white-controls,

.able-white-controls div[role="button"],

.able-black-controls label {

color: #FFF !important;

}

.able-white-controls .able-seekbar {

border: 1px solid #FFF;

}

.able-controller div[role="button"] {

background: none;

position: relative;

display: inline-block;

border-style: none;

margin: 3px;

padding: 0;

font-size: 20px;

min-width: 24px;

/* outline: 2px solid #464646; */ /* same color as .able-controller background-color */

border: none;

overflow: visible !important;

z-index: 6600;

}

.able-controller div[role="button"] > span,

.able-controller div[role="button"] > img {

width: 20px;

margin: 0 auto;

padding: 0;

z-index: 6700;

}

.able-controller .buttonOff {

opacity: 0.5;

filter:alpha(opacity=50); /* for IE */

z-index: 6800;

}

.able-controller .able-seekbar {

margin: 0 5px;

z-index: 6900;

}

.able-controller div[role="button"]:hover,

.able-controller div[role="button"]:focus {

outline-style: solid;

outline-width: medium;

}

.able-controller div[role="button"]:hover {

outline-color: #8AB839 !important; /* green */

}

.able-controller div[role="button"]:focus {

outline-color: #ffbb37 !important; /* yellow */

}

.able-controller button::-moz-focus-inner,

.able-search-results button::-moz-focus-inner {

border: 0;

}

/*

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: 5100;

}

.able-seekbar-played {

display: inline-block;

position: absolute;

left: 0;

top: 0;

height: 0.5em;

background-color: #DADADA;

z-index: 5200;

}

.able-seekbar-head {

display: inline-block;

position: relative;

left: 0;

top: -0.4em;

background-color: #FDFDFD;

width: 0.8em;

height: 0.8em;

border: 1px solid;

border-radius: 0.8em;

z-index: 5500;

}

/*

Volume Slider

*/

.able-volume-slider {

width: 34px;

height: 80px;

background-color: #464646; /* same as .able-controller */

margin: 0;

padding: 5px 0;

position: absolute;

right: 0px;

bottom: 60px;

display: block;

z-index: 9100;

}

.able-volume-help { /* not visible; used in aria-describedby */

display: none;

}

.able-volume-slider input[type="range"] {

appearance: slider-vertical;

writing-mode: bt-rl;

/* -webkit-appearance: none; */ /* Hides the slider so that custom slider can be made */

width: 28px;

height: 100%;

background: transparent; /* Otherwise white in Chrome */

}

/*

Style slider in Firefox

*/

.able-volume-slider input[type=range]::-moz-range-track {

border: 1px solid white;

width: 7px;

cursor: pointer;

background: #000;

}

input[type=range]::-moz-range-thumb {

background-color: #fdfdfd;

outline: 1px solid #333;

height: 16px;

width: 24px;

z-index: 9175;

}

/*

TODO: Style the slider in webkit to match the one in Mozilla

First attempt at this was unsuccessful; it's quite fussy

Placeholder selectors are provided below

Also, will need to uncomment -webkit-appearance: none in slider rule above

*/

.able-volume-slider input[type=range]::-webkit-slider-runnable-track {}

.able-volume-slider input[type=range]::-webkit-slider-thumb {}

/*

TODO: Style the slider for IE (not a high priority)

*/

input[type=range]::-ms-track {}

input[type=range]::-ms-fill-lower {}

input[type=range]::-ms-fill-upper {}

input[type=range]::-ms-thumb {}

input[type=range]:focus::-ms-fill-lower {}

input[type=range]:focus::-ms-fill-upper {}

/*

Status Bar

*/

.able-status-bar {

height: 1.5em;

min-height: 1.5em;

color: #CCC;

font-size: 0.9em;

background-color: transparent;

padding: 0.5em 0.5em 0.25em;

box-sizing: content-box;

}

.able-status-bar span.able-timer {

/* contains both span.elapsedTime and span.duration */

text-align: left;

float: left;

width: 32%;

}

.able-status-bar span.able-speed {

float: left;

width: 33%;

text-align: center;

}

.able-status {

font-style: italic;

float: right;

width: 32%;

text-align :right;

}

/*

Captions and Descriptions

*/

div.able-captions-wrapper {

width: 100%;

margin: 0;

padding: 0;

text-align: center;

display: block;

z-index: 6000;

}

div.able-captions {

display: none;

padding: 0.15em 0.25em;

line-height: 1.35em;

/* settings that are overridden by user prefs */

background-color: black;

font-size: 1em;

color: white;

opacity: 0.75;

}

div.able-vidcap-container div.able-captions-overlay {

position: absolute;

margin: 0;

bottom: 0.5em;

}

div.able-vidcap-container div.able-captions-below {

position: relative;

min-height: 3.2em;

}

div.able-audcap-container.captions-off {

display: none;

}

div.able-descriptions {

position: relative;

color: #FF6; /* yellow, to differentiate it from captions */

background-color: #262626;

min-height: 2.8em;

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;

}

div.able-video div.able-now-playing {

display: none;

}

/*

Modal Dialogs

*/

div.able-modal-dialog {

position: absolute;

height: auto;

max-width: 90%;

margin-left: auto;

margin-right: auto;

top: 5%;

left: 0px;

right: 0px;

outline: 0px none;

display: none;

color: #000;

background-color: #FAFAFA;

box-sizing: content-box !important;

z-index: 10000;

max-height: 90%;

overflow: scroll;

}

@supports (transform: translate(-50%,-50%)) {

div.able-modal-dialog {

top: 50%;

left: 50%;

transform: translate(-50%,-50%) !important;

}

}

div.able-modal-overlay {

position: fixed;

width: 100%;

height: 100%;

background-color: #000;

opacity: 0.5;

margin: 0;

padding: 0;

top: 0;

left: 0;

display: none;

z-index: 9500;

}

button.modalCloseButton {

position: absolute;

top: 5px;

right: 5px;

}

button.modal-button {

margin-right: 5px;

}

div.able-modal-dialog input:hover,

div.able-modal-dialog input:focus,

div.able-modal-dialog button:hover,

div.able-modal-dialog button:focus {

outline-style: solid;

outline-width: 2px;

}

div.able-modal-dialog input:hover,

div.able-modal-dialog button:hover {

outline-color: #8AB839; /* green */

}

div.able-modal-dialog input:focus,

div.able-modal-dialog button:focus {

outline-color: #ffbb37; /* yellow */

}

div.able-modal-dialog h1 {

font-weight: bold;

font-size: 1.8em;

line-height: 1.2em;

margin: 0.75em 0;

color: #000;

text-align: center;

}

.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 div[role="group"] {

margin: 1em 0;

padding: 0;

border: none;

}

.able-prefs-form h2 {

color: black;

font-weight: bold;

font-size: 1.1em;

}

.able-prefs-form div[role="group"] > div {

display: table;

margin-left: 1em;

}

.able-prefs-form div[role="group"] > div > input {

display: table-cell;

width: 1em;

vertical-align: middle;

}

.able-prefs-form div[role="group"] > div > label {

display: table-cell;

padding-left: 0.5em;

}

.able-desc-pref-prompt {

font-weight: bold;

font-style: italic;

margin-left: 1em !important;

}

.able-prefDescFormat > div {

margin-left: 1.5em;

}

.able-prefs-captions label,

.able-prefs-captions select {

display: block;

float: left;

margin-bottom: 0.25em;

}

.able-prefs-captions label {

width: 6em;

text-align: right;

padding-right: 1em;

}

.able-prefs-captions select {

width: 10em;

font-size: 0.9em;

border-radius: none;

}

.able-prefs-descriptions > div.able-prefs-select {

margin: 0.5em 1em;

}

.able-prefs-descriptions > div.able-prefs-select > label,

.able-prefs-descriptions > div.able-prefs-slider > label {

width: 6em;

text-align: right;

padding-right: 1em;

}

.able-prefs-descriptions > div.able-prefs-select > select,

.able-prefs-descriptions > div.able-prefs-slider > select {

width: 10em;

font-size: 0.9em;

border-radius: none;

}

div.able-prefDescPause {

margin-top: 1em;

}

.able-prefs-form div.able-captions-sample {

padding: 0.5em;

text-align: center;

}

.able-prefs-form div.able-desc-sample {

padding: 0.5em;

text-align: center;

color: #FFF;

background-color: #000;

}

.able-prefs-form h2 {

margin-top: 0;

margin-bottom: 0.5em;

font-size: 1.1em;

}

.able-prefs-form ul {

margin-top: 0;

}

/*

Keyboard Preferences Dialog

*/

able-prefs-form-keyboard ul {

list-style-type: none;

}

span.able-modkey-alt,

span.able-modkey-ctrl,

span.able-modkey-shift {

color: #666;

font-style: italic;

}

span.able-modkey {

font-weight: bold;

color: #000;

font-size: 1.1em;

}

/*

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;

}

.able-resize-form input[readonly] {

color: #AAA;

}

/*

Drag & Drop

*/

.able-window-toolbar {

background-color: #464646;

min-height: 15px;

padding: 10px;

border-style: solid;

border-width: 0 0 1px 0;

}

.able-draggable:hover {

cursor: move;

}

.able-window-toolbar .able-button-handler-preferences {

position: absolute;

top: 0;

right: 0;

font-size: 1.5em;

background-color: transparent;

border: none;

outline: none;

padding: 0;

z-index: 9300;

}

.able-window-toolbar .able-button-handler-preferences:hover,

.able-window-toolbar .able-button-handler-preferences:focus {

outline-style: solid;

outline-width: medium;

}

.able-window-toolbar .able-button-handler-preferences:hover {

outline-color: #8AB839 !important; /* green */

}

.able-window-toolbar .able-button-handler-preferences:focus {

outline-color: #ffbb37 !important; /* yellow */

}

.able-window-toolbar .able-popup {

position: absolute;

cursor: default;

right: 0;

top: 0;

display: block;

}

.able-drag {

border: 2px dashed #F90;

cursor: move;

}

.able-resizable {

position: absolute;

width: 20px;

height: 20px;

padding: 5px 2px;

bottom: 0;

right: 0;

cursor: nwse-resize;

}

.able-resizable svg line {

stroke: #595959;

stroke-width: 2px;

}

/*

Sign Language Window

*/

.able-sign-window {

position: relative;

margin: 1em;

/* max-width: 100%; */

z-index: 8000;

}

.able-sign-window video {

width: 100%;

}

.able-sign-window:focus {

outline: none;

}

/*

External chapters div

*/

div.able-chapters-div {

padding: 0;

}

div.able-chapters-div .able-chapters-heading {

margin: 1em 0.75em;

font-size: 1.1em;

font-weight: bold;

}

div.able-chapters-div ul {

list-style-type: none;

padding-left: 0;

}

div.able-chapters-div ul li {

max-width: 100%;

padding: 0;

height: 2em;

}

div.able-chapters-div button {

width: 100%;

height: 100%;

border: none;

background-color: transparent;

color: #000;

font-size: 1em;

text-align: left;

padding: 0.15em 1em;

}

div.able-chapters-div li.able-current-chapter {

background-color: #000 !important;

}

div.able-chapters-div li.able-current-chapter button {

color: #FFF !important;

}

div.able-chapters-div li.able-focus {

background-color: #4C4C4C;

}

div.able-chapters-div button:focus,

div.able-chapters-div button:hover,

div.able-chapters-div button::-moz-focus-inner {

border: 0;

outline: none;

color: #FFF !important;

}

/*

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

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

*/

div.able-wrapper.fullscreen {

margin: 0 !important;

position: fixed !important;

top: 0 !important;

background: none !important;

}

/*

:-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;

color: #000 !important;

background-color: #CCCCCC;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

display: block;

}

.able-alert {

background-color: #FFFFCC;

box-shadow: 0px 0px 16px #262626;

z-index: 9400;

position: absolute;

top: 1em;

}

.able-popup {

z-index: 9200;

}

.able-tooltip {

z-index: 9000;

}

/*

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: block;

cursor: default;

}

ul.able-popup {

list-style-type: none;

}

.able-popup li {

padding: 0.25em 1em 0.25em 0.25em;

margin: 1px;

width: auto;

color: #FFF;

}

.able-popup li.able-focus {

background-color: #CCC;

color: #000;

}

.able-popup-captions li {

padding-left: 1em;

}

.able-popup-captions li[aria-checked="true"] {

padding-left: 0;

}

.able-popup-captions li[aria-checked="true"]::before {

content: "\2713 "; /* check mark; for heavier mark us 2714 */

}

/*

Transcript

*/

.able-transcript-area {

border-width: 1px;

border-style: solid;

height: 400px;

z-index: 7000;

outline: none;

padding-bottom: 25px; /* keep content above 16x16px drag icon */

background-color: #FFF;

box-sizing: content-box;

}

.able-transcript {

position: relative; /* must be positioned for scrolling */

overflow-y: scroll;

padding-left: 5%;

padding-right: 5%;

/* width: 90%; */

background-color: #FFF;

height: 350px;

}

.able-transcript div {

margin: 1em 0;

}

.able-transcript-heading {

font-size: 1.4em;

font-weight: bold;

margin: 1em 0;

padding: 0;

}

.able-transcript-chapter-heading {

font-size: 1.2em;

font-weight: bold;

margin: 0;

padding: 0;

}

.able-transcript div.able-transcript-desc {

background-color: #FEE;

border: thin solid #336;

font-style: italic;

padding: 1em;

}

.able-transcript .able-unspoken {

font-weight: bold;

}

.able-transcript .able-hidden {

position: absolute !important;

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

}

.able-highlight,

.able-highlight span:hover,

.able-highlight span:focus,

.able-highlight span:active {

background-color: #000 !important;

color: #FFF !important;

padding: 0.25em 0.10em;

border: none;

outline: none;

}

.able-previous {

background: black !important;

font-style: italic;

}

.able-transcript span:hover,

.able-transcript span:focus,

.able-transcript span:active {

background: #FFC; /* light yellow */

color: #000;

border: none;

outline: none;

border-bottom: 1px solid #000 ;

cursor: pointer;

}

.able-window-toolbar label {

display: inline;

margin-right: 10px;

color: #FFF;

}

.able-window-toolbar input:focus,

.able-window-toolbar input:hover,

.able-window-toolbar select:focus,

.able-window-toolbar select:hover,

.able-controller input:focus,

.able-controller input:hover,

.able-controller div[role="button"]:focus,

.able-controller div[role="button"]:hover,

.able-seekbar-head:focus,

.able-seekbar-head:hover {

outline-style: solid;

outline-width: 2px;

}

.able-window-toolbar input:focus,

.able-window-toolbar select:focus,

.able-controller input:focus,

.able-controller div[role="button"]:focus,