/* - ++resource++umich_css/vidplaylist.css - */
@media screen {
/* http://www.engin.umich.edu/portal_css/++resource++umich_css/vidplaylist.css?original=1 */
/* */
.playlist-container {
position: relative;
padding-bottom: 56.25%;
margin-top: 30px;
overflow: hidden;
}
.playlist-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.playlist-container.bottom {
margin-top: 15px;
}
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: #333;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: #333;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #333;
position: relative;
}
.jspDrag
{
background: #555;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
/* */
/* */
/* */
.fsOverflow #contentWrap {
max-width: none;
}
.playlist-parent-info {
background-color: #1a1a1a;
padding: 20px;
margin-bottom: 10px;
text-align: left;
}
p + .playlist-parent-info {
margin-top: 10px;
}
h3.playlist-parent-title {
margin: 0;
padding: 0;
color: #fafafa;
font-weight: normal;
font-size: 30px;
font-family: 'HelveticaNeueW01-57Cn', "Roboto Condensed", arial, sans-serif;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
p.playlist-parent-desc {
margin: 0;
padding: 0;
padding-bottom: 1em;
color: #fafafa;
font-size: .9rem;
}
.pl-total {
font-weight: 100;
}
/* */
.componentWrapper .playerHolder {
position: relative;
padding-top: 56.25%;
background: #000;
overflow: hidden;
border: 1px solid #111; }
/* */
.componentWrapper .playerHolder_fs {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
z-index: 10000; }
/* */
.componentWrapper .mediaHolder,
.componentWrapper .mediaPreview,
.componentWrapper .youtubeIframeMain {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
display: none; }
/* */
.flashMain {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
outline: none;
/**/ }
/* */
.flashPreview {
position: absolute;
top: 0px;
left: 0px;
width: 120px;
height: 68px;
outline: none;
/**/ }
.fsOverflow {
overflow: hidden !important; }
/* */
.fsOverflow #contentWrap {
z-index: 1000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
/* */
.componentWrapper .preloader {
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0px 0px -25px;
background: #000 url(++resource++umich_images/loader.gif) no-repeat center center;
width: 50px;
height: 50px;
z-index: 9999;
opacity: 0.7; }
/* */
.ap_cc, .ap_qual {
color: #ccc;
font-size: 18px;
position: absolute;
top: 7px;
left: 11px; }
.ap_cc_on, .pa_qual_on {
color: #C66;
font-size: 18px;
position: absolute;
top: 7px;
left: 11px; }
.ap_vol, .ap_mute {
color: #ccc;
font-size: 18px;
position: absolute;
top: 7px;
left: 9px; }
.ap_vol_on, .ap_mute_on {
color: #C66;
font-size: 18px;
position: absolute;
top: 7px;
left: 9px; }
.ap_play {
color: #ccc;
font-size: 16px;
position: absolute;
top: 8px;
left: 11px; }
.ap_play_on {
color: #C66;
font-size: 16px;
position: absolute;
top: 8px;
left: 11px; }
.ap_pause {
color: #ccc;
font-size: 14px;
position: absolute;
top: 9px;
left: 11px; }
.ap_pause_on {
color: #C66;
font-size: 14px;
position: absolute;
top: 9px;
left: 11px; }
.ap_down, .ap_fs_ent {
color: #ccc;
font-size: 16px;
position: absolute;
top: 8px;
left: 12px; }
.ap_down_on, .ap_fs_ent_on {
color: #C66;
font-size: 16px;
position: absolute;
top: 8px;
left: 12px; }
.ap_fs_exit {
color: #ccc;
font-size: 16px;
position: absolute;
top: 8px;
left: 12px; }
.ap_fs_exit_on {
color: #c66;
font-size: 16px;
position: absolute;
top: 8px;
left: 12px; }
.ap_pl_back {
color: #ccc;
font-size: 23px;
position: absolute;
top: 12px;
left: 15px; }
.ap_pl_forw {
color: #ccc;
font-size: 23px;
position: absolute;
top: 13px;
left: 15px; }
.ap_pl_info, .ap_pl_share {
color: #ccc;
font-size: 19px;
position: absolute;
top: 9px;
left: 11px; }
.ap_pl_info_on, .ap_pl_share_on {
color: #C66;
font-size: 19px;
position: absolute;
top: 9px;
left: 11px; }
/* */
.componentWrapper .playerControls {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 33px;
/**/ }
.componentWrapper p {
padding: 0px;
margin: 0px; }
.playerControls p {
color: #ccc;
}
.componentWrapper .player_toggleControl {
position: relative;
top: 0px;
left: 0px;
width: 36px;
height: 33px;
background: #111;
float: left;
border-right: 1px solid #222; }
.componentWrapper .player_mediaTime_current {
position: relative;
top: 0px;
left: 0px;
height: 33px;
width: 50px;
padding-top: 8px;
line-height: 33px;
text-align: center;
float: left;
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #111;
border-right: 1px solid #222;
pointer-events: none; }
.componentWrapper .player_seekbar {
position: relative;
top: 0px;
left: 0px;
width: 390px;
height: 33px;
background: #111;
float: left;
border-right: 1px solid #222; }
.componentWrapper .progress_bg {
position: absolute;
top: 13px;
left: 15px;
width: 362px;
height: 7px;
background: #333333;
overflow: hidden; }
.componentWrapper .load_level {
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 7px;
background: #ffffff; }
.componentWrapper .progress_level {
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 7px;
background: #999; }
/* */
.componentWrapper .player_progress_tooltip {
position: absolute;
top: 0px;
width: 1px;
height: 1px;
background: #111;
display: none; }
.componentWrapper .player_mediaTime_total {
position: relative;
top: 0px;
height: 33px;
width: 50px;
left: 0px;
padding-top: 8px;
line-height: 33px;
text-align: center;
float: left;
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #111;
border-right: 1px solid #222;
pointer-events: none; }
/* */
.componentWrapper .player_captions {
position: relative;
top: 0px;
height: 33px;
width: 36px;
left: 0px;
line-height: 13px;
text-align: center;
float: left;
background: #111;
border-right: 1px solid #222;
display: none; }
.componentWrapper .caption_btn {
height: 33px;
width: 36px; }
.componentWrapper .caption_holder {
position: relative;
height: 100%;
display: none;
float: right; }
.componentWrapper .captions_menu {
border: 1px solid #222;
background: #111; }
.componentWrapper .captions_menu li {
display: block;
width: 100%;
list-style: none;
text-align: left;
padding: 5px 10px;
background: #111;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.captionOver {
color: #c66;
font-size: 13px;
text-decoration: none;
white-space: nowrap; }
.captionOut {
color: #ccc;
font-size: 13px;
text-decoration: none;
white-space: nowrap; }
/* */
.componentWrapper .player_quality {
position: relative;
top: 0px;
height: 33px;
width: 36px;
left: 0px;
line-height: 13px;
text-align: center;
float: left;
background: #111;
border-right: 1px solid #222;
display: none; }
/* */
#contentHolder ul.quality_menu {
padding: 0px 0px 0px 0px;
list-style-type: none; }
.componentWrapper .quality_btn {
height: 33px;
width: 36px; }
.componentWrapper .quality_holder {
position: relative;
height: 100%;
display: none;
float: right; }
.componentWrapper .quality_menu {
border: 1px solid #222;
background: #111; }
.componentWrapper .quality_menu li {
display: block;
width: 100%;
list-style: none;
text-align: left;
padding: 5px 10px;
background: #111;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.componentWrapper .qualityOver {
color: #c66;
font-size: 13px;
text-decoration: none;
white-space: nowrap; }
.componentWrapper .qualityOut {
color: #ccc;
font-size: 13px;
text-decoration: none;
white-space: nowrap; }
/* */
.componentWrapper .player_download {
position: relative;
top: 0px;
left: 0px;
width: 36px;
height: 33px;
background: #111;
border-right: 1px solid #222;
float: left;
display: none; }
/* */
.componentWrapper .player_volume_wrapper {
position: relative;
top: 0px;
left: 0px;
width: 36px;
height: 33px;
float: left;
background: #111;
border-right: 1px solid #222; }
.componentWrapper .player_volume {
position: absolute;
top: 0px;
left: 0px;
width: 36px;
height: 33px; }
.componentWrapper .volume_seekbar {
position: absolute;
top: -70px;
left: 1px;
width: 36px;
height: 70px;
background: #111;
border-bottom: 1px solid #222;
display: none; }
.componentWrapper .volume_bg {
position: absolute;
bottom: 10px;
left: 14px;
width: 7px;
height: 50px;
background: #333; }
.componentWrapper .volume_level {
position: absolute;
bottom: 10px;
left: 14px;
width: 7px;
height: 25px;
background: #999; }
/* */
.componentWrapper .player_volume_tooltip {
position: absolute;
top: 0px;
left: 0px;
width: 35px;
height: 1px;
background: #111;
display: none; }
/* */
.componentWrapper .player_fullscreen {
position: relative;
top: 0px;
left: 0px;
width: 36px;
height: 33px;
background: #111;
z-index: 2000;
float: left; }
.componentWrapper .player_youtube {
position: relative;
top: 0px;
left: 0px;
width: 36px;
height: 33px;
background: #111;
z-index: 2000;
float: left;
}
.componentWrapper .player_infoToggle {
position: relative;
top: 0px;
left: 0px;
width: 36px;
height: 33px;
background: #111;
z-index: 2000;
float: left;
}
@media only screen and (max-width: 600px) {
.componentWrapper .player_mediaTime_current, .componentWrapper .player_mediaTime_total {
display: none; }
#videoSearch {
display: none; } }
/* */
.componentWrapper .big_play {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(++resource++umich_images/clickblocker.png) repeat;
display: none; }
.componentWrapper .big_play_bg {
position: absolute;
width: 76px;
height: 76px;
top: 50%;
left: 50%;
margin-left: -37px;
margin-top: -37px;
behavior: url(includes/PIE.php); }
.ap_bplay {
color: #ccc;
font-size: 72px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -36px;
margin-top: -36px; }
/* */
.ap-context-menu {
display: none;
position: absolute;
padding: 10px;
font: 12px Arial, Helvetica, sans-serif;
white-space: nowrap;
z-index: 10000;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
background: #f5f5f5; }
/* */
.p-context-menu ul {
margin: 0px;
padding: 0;
list-style-type: disc;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.ap-context-menu li {
list-style: none;
border-top: 1px solid #FFF;
border-bottom: 1px solid #DDD;
padding: 5px; }
.ap-context-menu li:first-child {
border-top: none; }
.ap-context-menu li:last-child {
border-bottom: none; }
.ap-context-copyright span {
background-color: #666;
color: #E5E5E5;
font-size: 10px; }
.ap-context-menu li:hover > span {
opacity: 0.5; }
.componentWrapper .player_addon {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
display: none; }
.title_inner, .total_inner {
float: left;
padding: 0 12px;
font-size: 0.75em;
line-height: 36px;
color: #fff; }
/* */
.componentWrapper .info_toggle {
position: relative;
float: right;
bottom: 0px;
right: 0px;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.5);
display: none; }
.componentWrapper .infoHolder {
position: absolute;
width: 100%;
height: 100%;
max-height: 200px;
top: 36px;
left: 0px;
overflow: hidden;
display: none; }
.componentWrapper .info_inner {
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 0 20px 12px;
background: rgba(0, 0, 0, 0.5);
text-align: left; }
.componentWrapper .infoTitle {
color: #c66;
font-size: 25px; }
.componentWrapper .infoHolder a {
color: #FF6; }
/* */
.componentWrapper .playlistHolder {
position: relative;
clear: both;
max-width: 720px;
height: 272px;
background: #333;
overflow: hidden;
margin-top: 0;
border: 1px solid #111; }
.componentWrapper .playlistHolder * {
box-sizing: border-box; }
.componentWrapper .playlistHolder_small {
position: absolute;
top: 0px;
left: 641px;
width: 100%;
height: 100%;
background: #000;
overflow: hidden; }
.componentWrapper .componentPlaylist {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden; }
.componentWrapper .playlist_inner {
position: relative;
top: 0px;
left: 0px;
height: 100%; }
/* */
#playlist_list {
display: none; }
/* */
.componentWrapper .playlistNonSelected {
position: relative;
top: 0px;
left: 0px;
max-width: 712px;
height: 90px;
background: #232323;
margin-bottom: 1px;
list-style: none;
overflow: hidden;
cursor: pointer; }
.componentWrapper .playlistSelected {
position: relative;
top: 0px;
left: 0px;
max-width: 722px;
height: 90px;
background: #171717;
margin-bottom: 1px;
list-style: none;
overflow: hidden;
cursor: pointer; }
/* */
.componentWrapper .hitdiv {
position: absolute;
top: 0px;
left: 0px;
display: block;
max-width: 600px;
height: 90px; }
/* */
.componentWrapper .playlistThumb {
position: relative;
top: 11px;
left: 12px;
width: 120px;
height: 68px;
float: left;
background: #222;
border: 3px solid #fff;
overflow: hidden; }
/* */
.componentWrapper .playlistThumb .thumb {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 120px;
height: 68px;
/* */
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0; }
/* */
.componentWrapper .playlistThumb .thumb_vid {
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 120px;
height: 68px; }
/* */
.componentWrapper .playlistThumb .thumb_yt {
position: relative;
top: -11px;
left: 0px;
display: block;
width: 120px;
height: 90px;
/* */
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0; }
/* */
.componentWrapper .youtubeIframePreview {
position: absolute;
top: 11px;
left: 12px;
width: 120px;
height: 68px;
opacity: 0.01;
/**/ }
/* */
.componentWrapper .yt_overlay_blocker {
position: absolute;
top: 0px;
left: 0px;
width: 120px;
height: 68px;
background: red; }
.componentWrapper .thumbPreloader {
position: absolute;
width: 16px;
height: 11px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -6px;
display: none; }
.componentWrapper .playlistInfo {
position: relative;
top: 5px;
height: 80px;
padding-left: 160px;
padding-right: 12px;
text-align: left; }
/* */
.componentWrapper .playlistTitle {
color: #efefef;
font-family: Arial, Helvetica, sans-serif;
font-size: .95rem;
font-weight: 700;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; }
/* */
.componentWrapper .playlistContent {
color: #fafafa;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: 400; }
@media only screen and (max-width: 500px) {
.componentWrapper .playlistNonSelected {
width: 100%; }
.componentWrapper .playlistSelected {
width: 100%; }
.componentWrapper .playlistTitle {
font-size: 1em;
}
/* */
.componentWrapper .playlistContent {
display: none; }
}
/* */
.componentWrapper .playerLogo {
position: absolute;
width: 64px;
height: 45px;
top: 10px;
left: 10px; }
/* */
.ap_adv {
display: none; }
.skip_out {
left: 0px !important;
top: 360px !important; }
/* */
.ap_elem {
display: none;
opacity: 0.7;
border: 1px solid transparent; }
.ap_elem_hover {
opacity: 1;
border: 1px solid #fff; }
.ap_el_close {
display: none; }
.crb {
position: absolute;
right: -9px;
bottom: -9px;
width: 18px;
height: 18px; }
.crt {
position: absolute;
right: -9px;
top: -9px;
width: 18px;
height: 18px; }
.clt {
position: absolute;
left: -9px;
top: -9px;
width: 18px;
height: 18px; }
.clb {
position: absolute;
left: -9px;
bottom: -9px;
width: 18px;
height: 18px; }
#elem1 {
position: absolute;
top: 0px;
left: 130px;
background: #ccc;
color: white;
padding: 5px; }
#elem2 {
position: absolute;
top: 200px;
left: 0px;
background: #669;
color: white;
padding: 5px; }
#elem3 {
position: absolute;
top: 0px;
right: 0px;
background: #36C;
color: white;
padding: 5px; }
#elem4 {
position: absolute;
top: 200px;
right: 0px;
background: #699;
color: white;
padding: 5px; }
/* */
.subtitles {
display: none; }
.ap_sub {
position: absolute;
bottom: 40px;
left: 0px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #fff;
background: #111;
background: rgba(0, 0, 0, 0.5);
text-align: center;
display: none; }
.red {
color: red;
text-transform: uppercase;
font-weight: lighter; }
.ap_sub a {
color: #FF0; }
.jspDrag {
background-color: #ccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px; }
.jspTrack {
background-color: #666; }
/* */
.download_confirm {
position: absolute;
width: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
display: none; }
.download_confirm p {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
background: #ccc;
text-align: center; }

}