﻿body {
}
#RemoteControl {
    position:absolute;
}
.remotenormal {
    top: 0px; 
    right: 3%; 
    float:right;
}
.remoteclear {
    top: 0px;
    right: 3%;
    float: right;
}
.remotenormal .first,
.remotenormal .prevpage,
.remotenormal .prev,
.remotenormal .pause,
.remotenormal .play,
.remotenormal .playback,
.remotenormal .next,
.remotenormal .nextpage,
.remotenormal .last,
.remotenormal .fullscreen-button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid white;
    display: inline-block;
}
    .remotenormal .first:hover,
    .remotenormal .prevpage:hover,
    .remotenormal .prev:hover,
    .remotenormal .pause:hover,
    .remotenormal .play:hover,
    .remotenormal .playback:hover,
    .remotenormal .next:hover,
    .remotenormal .nextpage:hover,
    .remotenormal .last:hover,
    .remotenormal .fullscreen-button:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }
.remoteclear .first,
.remoteclear .prevpage,
.remoteclear .prev,
.remoteclear .pause,
.remoteclear .play,
.remoteclear .playback,
.remoteclear .next,
.remoteclear .nextpage,
.remoteclear .last,
.remoteclear .fullscreen-button {
    background-color: transparent;
    color: black;
    border: 1px solid black;
    display: inline-block;
}
    .remoteclear .first:hover,
    .remoteclear .prevpage:hover,
    .remoteclear .prev:hover,
    .remoteclear .pause:hover,
    .remoteclear .play:hover,
    .remoteclear .playback:hover,
    .remoteclear .next:hover,
    .remoteclear .nextpage:hover,
    .remoteclear .last:hover,
    .remoteclear .fullscreen-button:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }
.first, .prevpage, .prev, .pause, .play, .playback, .next, .nextpage, .last, .fullscreen-button {
    cursor: pointer;
    position: relative;
    width: auto;
    padding: 16px;
    /*margin-top: -50px;*/
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
}

.play {
    /*float: right;*/
    /*top: 76px;*/
    border-radius: 3px 0 0 3px;
    font-size: 1.3em;
    /*right: 16vw;*/
    position: relative;
}
.playback {
    /*float: right;*/
    /*top: 76px;*/
    border-radius: 3px 0 0 3px;
    font-size: 1.3em;
    /*right: 16vw;*/
    position: relative;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.pause {
    /*float: right;*/
    /*top: 76px;*/
    /*right: 20vw;*/
    position: relative;
    border-radius: 3px 0 0 3px;
}
.first {
    /*float: right;*/
    /*top: 76px;*/
    /*right: 30vw;*/
    position: relative;
    border-radius: 3px 0 0 3px;
}

.prevpage {
    /*float: right;*/
    /*top: 76px;*/
    /*right: 26vw;*/
    position: relative;
    border-radius: 3px 0 0 3px;
}

.next {
    /*float: right;*/
    /*top: 50vh;*/
    /*right: 0px;*/
    border-radius: 3px 0 0 3px;
    /*font-size: xx-large;*/
}

.last {
    /*float: right;*/
    /*top: 76px;*/
    border-radius: 3px 0 0 3px;
    /*font-size: 1.3em;*/
    /*right: 5vw;*/
    position: relative;
}

.nextpage {
    /*float: right;*/
    /*top: 76px;*/
    border-radius: 3px 0 0 3px;
    /*font-size: 1.3em;*/
    /*right: 9vw;*/
    position: relative;
}

.prev {
    /*float: left;*/
    /*top: 50vh;*/
    /*left: 0;*/
    border-radius: 3px 0 0 3px;
    /*font-size: xx-large;*/
}
.fullscreen-button {
    /*float: right;
    */
    /*top: 76px;*/
    border-radius: 3px 0 0 3px;
    font-size: 1.3em;
    /*right: 5vw;*/
    position: relative;
    cursor: pointer;
    z-index: 1;
}

