/* Common */

.media-collection { background-color: #eee; box-shadow: 0 3px 6px 0 #aaa; }
.media-collection .playlist li { font-size: 1.0em; line-height: 2.0em; margin: 0; padding: 4px 12px; }
.media-collection .playlist li:hover { background-color: #ccc; }
.media-collection .playlist li a { text-decoration: none; }
.media-collection .playlist li.selected a { font-weight: bold; }

#media-ui-dialog { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; z-index: 9999; background-color: rgba(124, 124, 124, 0.5) }
#media-ui-dialog-content { width: 500px; margin: 100px auto; box-shadow: 0 3px 6px 0 #aaa; text-align: left; background: #fff; }
#media-ui-dialog .media-collection { box-shadow: none; }

/* Default Audio */

.dms-audio audio { width: 100%; }

/* Default Audio Collections */

.media-collection.audio audio { width: 100%; }

/* Default Video */

/* Default Video Collections */

/* Vimeo Video */
.vimeo { position: relative; width: 100%; height: 0; overflow: hidden;
    /* This part is key, this value must be equal to the desired aspect ratio, and is generally set per element
       closer to runtime via javascript, a style attribute, or an overriding css rule. */
    padding-bottom: 75.0%; }
.vimeo iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; overflow: hidden; }

/* Vimeo Video Collections */

.media-collection.vimeo .player { position: relative; padding-bottom: 56.25%; /* 16/9 */ height: 0; overflow: hidden; }
.media-collection.vimeo .player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Default Image */

/* Default Image Collections */
/* https://github.com/leemark/better-simple-slideshow */

.bss-slides { position: relative; display: block; background: #eee; }
.bss-slides:focus { outline: 0; }
.bss-slides figure { position: absolute; top: 0; width: 100%; }
.bss-slides figure:first-child { position: relative; }
.bss-slides figure img { opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bss-slides .bss-show { z-index: 2; }
.bss-slides .bss-show img { opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; }
.bss-slides figcaption { position: absolute; font-family: sans-serif; font-size: .8em; bottom: .75em; right: .35em; padding: .25em; color: #fff; background: #000; background: rgba(0,0,0, .25); border-radius: 2px; opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; }
.bss-slides .bss-show figcaption { z-index: 3; opacity: 1; }
.bss-slides figcaption a { color: #fff; }
.bss-next, .bss-prev { color: #fff; position: absolute; background: #000; background: rgba(0,0,0, .6); top: 50%; z-index: 4; font-size: 2em; margin-top: -1.2em; opacity: .3; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.bss-next:hover, .bss-prev:hover { cursor: pointer; opacity: 1; }
.bss-next { right: -1px; padding: 10px 5px 15px 10px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.bss-prev { left: 0; padding: 10px 10px 15px 5px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.bss-fullscreen { display: block; width: 32px; height: 32px; background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); -webkit-background-size: contain; background-size: contain; position: absolute; top: 5px; left: 5px; cursor: pointer; opacity: .3; }
.bss-fullscreen:hover { opacity: .8; }
:-webkit-full-screen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; }
:-moz-full-screen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; }
:-ms-fullscreen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; }
:full-screen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; }
:-webkit-full-screen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; }
:-moz-full-screen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; }
:-ms-fullscreen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; }
:fullscreen .bss-fullscreen { background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; }

/* Default Document */

/* Default Document Collections */