/*
    Styles to handle videos added to the Intro screen, 
    including Open Video button with thumbnail image, 
    Start button moved to right, and <iframe> to launch 
    video in a popup
*/

/*Start button moved to the right to allow for Open Video button*/
#introButtonThumbnail {
    position: absolute;
    bottom: 50px;
    right: 266px;
}

/*thumbnail image for Open Video button*/
#videoThumbnail {
    position: absolute;
    left: 266px;
    bottom: 138px;
    width: 138px;
    text-align:center;
}
/*posterframe image for button*/
#videoThumbnail .posterFrame  {
    position: absolute;
    left: 0;
    top: 0;
    width: 138px;
    height: 100px;
    border: 1px solid #CCC;
    box-shadow: 4px 4px 4px #EEE;
}
/*play icon overlaid on thumbnail*/
#videoThumbnail .overlayIcon {
    position: absolute;
    width: 138px;
    height: 100px;
    background-size: 50px 50px;
    background-image: url(../img/video_play_icon.png);
    background-position: 44px 25px;
    background-repeat: no-repeat;
    background-image: -webkit-image-set( url(../img/video_play_icon.png) 1x, 
                                        url(../img/video_play_icon_2x.png) 2x);
    opacity: .8;
}
#videoThumbnail .overlayIcon:hover {
    opacity: 1;
}
/*text label below button*/
#videoThumbnail .openVideoLabel {
    width: 138px;
    position: absolute;
    top: 108px;
    left: 0px;
}
/*text decoration for link*/
#videoThumbnail a:link {
    font: 15px Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    color: #2F3E3C;
}
/*iframe to load the video page*/
iframe {
    border:none;
}
#closeVideoButton {
    /* adjustment so close icon is not cut off on iPad */
    margin-top: 10px;
}