body, #video-container, #popout, #video-controls, #volume, #seek-bar {
    margin: 0;
    padding: 0;
}

body {
    font-family: arial,sans-serif;
    font-size: 13px;
    background-color: #000000;
    color: #555 !important;
}

#video {
    padding: 0;
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
}

:-webkit-full-screen #video {
    width: 100%;
    height: 100%;
}

progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* gets rid of default border in Firefox and Opera. */ 
	border: none;

	/* Needs to be in here for Safari polyfill so background images work as expected. */
	background-size: auto;
	
}

/* Polyfill */
progress[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
	display: none;
}

/* IE10 */
#seek-bar { 
    color: #d00;
}

/* Firefox */
#seek-bar::-moz-progress-bar {  
    background: #d00;
}

/* Chrome */
#seek-bar::-webkit-progress-value {
    background: #d00;
}

/* Polyfill */
#seek-bar[aria-valuenow]:before  {
    background: #d00;
}

#video-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #eee;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s;
    height: 32px;
}
#round-inside {
    background-color: #555;
    border-radius: 6px;
    width: 6px;
    height: 6px;
}
#round-progress {
    background-color: #fdfdfd;
    width: 6px;
    height: 6px;
    border-radius: 15px;
    z-index: 10;
    border: 1px solid #ddd;
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    padding: 4px;
    cursor:pointer;
}

#volume:hover #volume-bar {
    display: inline-block;
}

#round-seek {
}

#seek-bar {
    height: 8px;
    background-color: #777;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Firefox */
    -ms-appearance: none;
    /* Internet Explorer */
    -o-appearance: none;
    /* Opera */
    display: block;
    width: 100%;
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
}

#volume {
    vertical-align: top;
    display: inline-block;
    float: right;
    padding: 0 10px;
}

#volume-bar {
    width: 50px;
    background-color: #999;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Firefox */
    -ms-appearance: none;
    /* Internet Explorer */
    -o-appearance: none;
    /* Opera */
    margin: 10.8px;
    margin-right: 0;
    display: none;
    padding: 0;
}

#volume-bar::-webkit-slider-thumb {
    opacity: 0.5;
    width: 10px;
    height: 10px;
    background-color: #666;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Firefox */
    -ms-appearance: none;
    /* Internet Explorer */
    -o-appearance: none;
    /* Opera */
}

.play {
    background-image: url(images/video_play.png);
    width: 26px;
    height: 26px;
    margin: 3px 10px;
}

.pause {
    background-image: url(images/video_pause.png);
    width: 26px;
    height: 26px;
    margin: 3px 10px;
}

.restart {
    background-image: url(images/video_refresh.png);
    width: 19px;
    height: 19px;
    margin: 6.3px 13.5px;
}

.sound_up {
    background-image: url(images/video_volume_up.png);
    width: 17px;
    height: 17px;
    margin: 7.3px 0;
}

.sound_down {
    background-image: url(images/video_volume_down.png);
    width: 17px;
    height: 17px;
    margin: 7.3px 0;
}

.mute {
    background-image: url(images/video_mute.png);
    width: 17px;
    height: 17px;
    margin: 7.3px 0;
}

.fullscreen {
    background-image: url(images/video_fullscreen.png);
    width: 23px;
    height: 13px;
    margin: 9.4px 10px;
}

.play, .pause, .sound_up, .sound_down, .mute, .fullscreen, .restart {
    background-repeat: no-repeat;
    cursor: pointer;
    padding: 0;
    vertical-align: top;
    display: inline-block;
}

#full-screen {
    float: right;
}

#timer {
    vertical-align: top;
    display: inline-block;
    padding: 7.8px 0;
}

*:focus,
*:active,
a:active,
a:focus,
input:focus,
input:active {
    -moz-outline-style: none;
    outline: none;
    outline: 0;
}