/**
 * Copyright 2017 Bit Vortex Ltd.
 *
 * Created by matt@bitvortex.co.uk.
 */
*, :after, :before {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    font-family: Arial,sans-serif;
}

body {
    display: block;
    border: 0;
    margin: 0;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-size: 16px;
    font-family: Arial,sans-serif;
}

button:focus {
    outline-color: #ff8c00;
}

/* BEGIN: Renderer styles. */
.renderer-container {
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    position: relative;
    background-color: black;
}

div.entry-content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
}

.renderer-overlay, .renderer-canvas {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.renderer-background {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.hidden {
    display: none;
}

.renderer-toolbar {
    padding: 4px;
    height: 48px;
}

.renderer-button {
    width: 40px;
    cursor: pointer;
    padding: 4px;
}

.renderer-button-border {
    fill: grey;
}

button.renderer-button {
    margin: 0;
    border: none;
    width: 40px;
    height: 40px;
    padding: 4px;
    color: transparent;
    background-color: transparent;
    position: relative;
    left: 0;
    top: -4px;
}

button.renderer-button.selected {
    background-color: green;
}

.renderer-rotate-button,
.renderer-pan-button,
.renderer-dolly-button,
.renderer-move-light-button,
.renderer-decrease-brightness-button,
.renderer-increase-brightness-button {
    float: left;
}

.renderer-close-button {
    float: right;
}

.renderer-play-button, .renderer-loading-animation {
    width: 10%;
    margin: 32.5% 45% 2.5% 45%;
    float: none;
}

.renderer-statistics {
    padding: 4px 8px 4px 8px;
    width: 144px;
}

.renderer-statistic {
    padding: 4px;
    background-color: white;
}

.renderer-progress-message {
    color: #fff;
    text-align: center;
}

/* Makes default range inputs invisible. */
input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #fff;
}

/* Input range track style */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #fff;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
    background: #fff;
}
input[type=range]::-ms-fill-upper {
    background: #fff;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
    background: #fff;
}

/* Range input thumb style. */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}