div, p, header, footer
{
    font-family:'Nunito';
}

h1
{
    font-family:'Nunito';
}

span.online-indicator
{
    display: inline-block;
    vertical-align: baseline;
    height: 1em;
    width: 1em;
    border-radius: 1em;
    background-image: linear-gradient(135deg, white, #666666);
}

span.online-indicator.online
{
    background-image: linear-gradient(135deg, white, #006600);
}

span.online-indicator.stale
{
    background-image: linear-gradient(135deg, white, #FFFF66);
}

.dashboard div
{
    text-align: center;
}
.dashboard .stat-header
{
    font-weight: bold;
}
.dashboard .stat
{
    font-size: 3em;
}
.dashboard .increase
{
    color: green;
}
.dashboard .decrease
{
    color: red;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

footer
{
    text-align: center;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

nav.navbar.navbar-inverse
{
    background-color: #555577;
    background-image: linear-gradient(#555577, #444466);
    color: #DDFFFF;
}

nav.navbar.navbar-inverse .dropdown-menu
{
    background-color: #555577;
}

nav.navbar.navbar-inverse .dropdown-menu a:hover
{
    background-color: #444466;
}

nav.navbar.navbar-inverse a
{
    color: #DDFFFF;
}


.toc
{
    display: flex;
    width: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1 16" height="16" width="1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="8" x2="1" y2="8" stroke="%23555577" /></svg>');
    background-repeat: repeat-x;
    background-position-y: top;
    margin-bottom: 2em;
}

.toc-node
{
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" stroke="%23555577" fill="white" /></svg>');
    background-repeat: no-repeat;
    background-position: top center;
    flex: 1;
    vertical-align: top;
    padding-top: 20px;
    text-align: center;
}

.toc-node i
{
    display: block;
    font-size: 2em;
}

.toc-node.selected
{
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" stroke="%23555577" fill="%23555577" /></svg>');
}

.toc-node.with-button
{
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><line x1=".5" y1="0" x2=".5" y2="16" stroke="%23555577" /></svg>');
}

.dropzone.active
{
    background-color: #669966;
}

.assetList .option
{
    display: inline-block;
}

.assetList .option a
{
    display: block;
}

.wizard-pages
{
    display: flex;
}

.wizard-inputs
{
    flex: 1.5;
    padding: 10px;
}

.wizard-preview
{
    flex: 1;
    height: 100%;
    border: solid 1px black;
}