/* Base colours */
html {
    background-color: #CCC;
    color: #333;
}

a:link, a:visited {
    text-decoration: none;
    color: Blue;
}

    a:link:hover, a:visited:hover {
        text-decoration: underline;
    }

#footer {
    font-family: Arial;
    font-size: 12px;
}

#footer {
    color: Gray;
    background-color: White;
}

    #footer > div.links > a {
        color: Gray;
    }

#page.application #footer {
    background-color: transparent;
}

    #page.application #footer,
    #page.application #footer > div.links > a {
        color: #555;
    }

a.tab,
a.page-number {
    background-color: #3D80B7;
    color: White;
}

#header {
}

.button {
    border-width: 0;
    background-color: #D0660B;
    background: linear-gradient(to bottom, #ff880e 0%,#e8700d 100%);
}

    .button.save {
        background-color: #108020;
        background: linear-gradient(to bottom, #10C820 0%,#10C020 100%);
    }

        .button.save.report.error {
            /*background-image: url(images/alert.svg), linear-gradient(to bottom, #10C820 0%,#10C020 100%); /*used 'URL-encoder for SVG' on github to convert the svg */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Ccircle cx='256' cy='256' r='246' stroke='darkred' stroke-width='20' fill='yellow' /%3E%3C/g%3E%3Cg%3E%3Crect x='214.3' y='63.08' style='fill:%23F92814;' width='83.4' height='226.29' /%3E%3Crect x='214.3' y='365.52' style='fill:%23F92814;' width='83.4' height='83.4' /%3E%3C/g%3E%3Cg%3E%3Crect x='256' y='63.08' style='fill:%23DB0404;' width='41.702' height='226.29' /%3E%3Crect x='256' y='365.52' style='fill:%23DB0404;' width='41.702' height='83.4' /%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, #10C820 0%,#10C020 100%);
            background-color: #108020;
            background-repeat: no-repeat, repeat;
            background-position-x: 99%;
            background-position-y: 6%;
            background-origin: border-box;
            background-size: 10px;
            padding-right: 12px;
        }

        .button.save:hover {
            background-color: #10C820;
            background: linear-gradient(to bottom, #10C820 0%,#108020 100%);
        }
            a .button.cancel, a.button.reset {
    background: #E00000;
    background: linear-gradient(to bottom, #FF4020 0%,#F02010 100%);
}

    a.button.cancel:hover,
    a.button.reset:hover {
        background: #FF4020;
        background: linear-gradient(to bottom, #FF4020 0%,#d00000 100%);
    }

a.button.reset {
    float: right;
}

#page {
    background-color: #8CB6D8;
}



.document {
    background-color: white;
}






div.dropdown-menu, div.dropdown-control {
    background-color: White;
    z-index: 100;
}

div#suggest_dropdown {
    background-color: White;
    z-index: 1;
}

div.image-box > label {
    background-color: #c4e4ff;
    color: #505050;
}


div.display-box,
a.tab.selected,
a.tab.selected:hover {
    background: none;
    background-color: #ECF3FA;
}

#page.content div.display-box { /* 8C B6 D8 */
    background-color: #eff4fb;
    background-color: rgba(230, 240, 250, 0.6);
}

div.table-box {
    overflow: auto;
}


#userProfile {
    background-color: #ECF3FA;
}


span.message-error {
    color: Red;
}

span.message-success {
    color: #008800;
}

h1, h2, h3, h4, h5, h6 {
    color: #29557a;
}

#page.content #main h2 {
    color: #246;
}

h5, h6 {
    color: Black;
    margin: 0;
}

img.feature-image {
    background-color: White;
}

/* Borders */
#suggest_dropdown,
a.page-number,
div.dropdown-control,
div.image-box,
img.feature-image,
input[type=text], input[type=password], input[type=number] {
    border: 1px solid #9bd;
}

div.dropdown-menu {
    border: 1px solid #9bd;
    border-radius: 0 0 4px 4px;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=text]:hover,
input[type=number]:hover
input[type=number]:focus {
    border: 1px solid #4DAFFF;
    outline: none;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(77,175,255,0.3);
    outline: none;
}

div.image-box > label,
div.image-view {
    border-top: 1px solid #29557a;
}

#page,
#suggest_dropdown,
a.button, .button,
a.tab,
div.prover-map, input, div.display-box,
div.dropdown-control, div.image-box,
img.feature-image {
    border-radius: 2px;
}

div.tab_container > div.display-box, div.prover-map {
    border-top-left-radius: 0;
}


#page,
div.prover-map, input, div.display-box, div.dropdown-menu,
div.dropdown-control, div.image-box {
    overflow: hidden;
}

div.dropdown-control,
#page {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* hover styles */
#footer > div.links > a.selected,
#footer > div.links > a:hover,
#suggest_dropdown a.selected,
#suggest_dropdown a:hover,
div.dropdown-menu > a.selected,
div.dropdown-menu > a:hover,
a.page-number:hover {
    background-color: #4da0e6;
    text-decoration: none;
    color: White;
}

a.tab:hover {
    background: linear-gradient(to bottom, #4da0e6 0%,#3d80b7 80%);
}

html.cssgradients a.tab:hover {
    background-color: #3D80B7;
}

html.cssgradients a.tab.selected:hover {
    background-color: #F0F8FF;
}

a.button, .button
a.tab,
a.page-number,
#suggest_dropdown a.selected,
div.dropdown-menu > a:hover {
    color: White;
}

a.tab.selected, a.tab.selected:hover {
    color: #29557a;
}

a.button:hover, .button:hover {
    background-color: #ff880e;
    background: linear-gradient(to bottom, #ff880e 0%,#d0660b 100%);
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
}

a.page-number.selected,
a.page-number.selected:hover {
    background-color: white;
    color: Black;
}

/* dialog styles */
div.dropdown-control,
div.popup-menu {
    box-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}

div.popup-menu {
    max-height: 200px;
    overflow: auto !important;
    white-space: nowrap;
}