/*
File: master-styles.css
Purpose: Provide standard CSS styling to all elements.
         Styling is anything that changes the look of elements on the page.
Author: Andrew Farris
Date: Jul 31, 2019
Copyright 2019 Group CBS Inc., All rights reserved.
*/

/*******************************************************************************
                                    Fonts
*******************************************************************************/

@font-face {
    font-family: Verdana;
    src: url(fonts/verdana.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Verdana;
    src: url(fonts/verdanab.ttf);
    font-weight: bold;
}

/*******************************************************************************
                              Standard elements
*******************************************************************************/

body {
    background-color: white;
    font-size: 0.75em;
}

img {
    border: 0;
}

a:link, a:visited, a:hover {
    color: #006699;
}

a:active {
    color: white;
}

hr {
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

em {
    font-weight: bold;
    font-style: normal;
    text-decoration:underline;
}

header {
    background-color: black;
    color: white;
}

footer {
    background-color: #212529;
    color: #d0d0d0;
}

small {
    font-size: 0.7em;
}

/*******************************************************************************
                                 Style Classes
*******************************************************************************/

/*-------------------------------- General -----------------------------------*/
.hidden {
}

.result-success {
    font-weight: bold;
    background-color: lightgreen;
    color: green;
}

.result-error {
    font-weight: bold;
    background-color: salmon;
    color: maroon;
}

.result-notice {
    font-weight: bold;
    background-color: #DDD;
    color: gray;
}

.title {
    font-family: Verdana, sans-serif;
}

.content {
    font-family: Arial, sans-serif;
}

.welcome {
    font-size: 2em;
}

.emphasize {
    /*font-size: 1em;*/
    font-weight: bold;
}

.infobox {
}

.fineprint {
    font-size: 0.75em;
}

.notice {
    color: red;
    font-weight: bold;
}

.header {
    font-weight: bold;
    font-style: italic;
}

.subheader {
    font-weight: bold;
    font-style: normal;
}

.normal {
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
}

.menu_header {
    color: blue;
    font-style: normal;
}

.button {
    background-color: #DE0C00;
    border: none;
    border-radius: 0.5em;
    text-decoration: none;
    cursor: pointer;
    color: white;
    display: inline-block;
}

.button:hover {
    background-color: #770000;
    color: white;
}

.button:disabled {
    background-color: #DDD;
    cursor: default;
}

.doc {
    color: black;
    background-color: #DDD;
}

.doc:hover {
    color: black;
    background-color: #989898;
}

.revision {
    font-weight: bold;
    font-size: 0.5em;
}

/*--------------------------------- Header -----------------------------------*/
.header-section {
}

.header-pagetype {
    font-weight: bold;
    min-height: 1.2em;
}

.header-greeting {
    min-height: 1.2em;
}

.header-system {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2em;
    background: url(images/GCBSI_logo_wt_trans.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

.header-nav {
    min-height: 1.2em;
}

/*------------------------------ Instructions --------------------------------*/
table.instructions {
}

td.type, 
td.example, 
td.description {
    background-color: #C0C0C0;
    border-bottom: 5px solid white;
}

td.type {
    font-size: 12pt;
    font-weight: bold;
}

td.example {
}

td.description {
}

table.desc_breakdown {
    border: 0;
}

td.desc_entry {
    background-color: #C0C0C0;

    font-size: 1.2em;
    font-weight: bold;
    font-style: normal;
}

td.desc_text {
    background-color: #C0C0C0;
    border-bottom: 1px solid gray;
}

/*---------------------------------- Menu ------------------------------------*/

#js_gallery_uploader {
    background-color: #DDD;
}

.main {
}

.column_wrapper {
}

.column {
    background-color: #CCC;
}

.pane_user {
}

.ipaddress {
}

.stockcount {
    font-size: 1.25em;
    font-weight: bold;
}

.pane_category {
}

.pane_info {
}

.request_missing {
}

.location {
}

.pane_category ul.menu {
    list-style-type: none;
}

.pane_category ul.menu li {
}

.special_functions ul {
    list-style-type: none;
}

.special_functions ul li {
}

/*--------------------------------- Search -----------------------------------*/
.form {
}

.form-column {
}

.form-actions {
}

.form-actions input {
}

.form-field {
}

.form-field-label {
    background-color: #DDD;
    border: 0.08em solid white;
}

.form-field-entry-sub,
.form-field-entry {
}

@media only screen and (max-width: 695px) {
    .form-column {
    }
    .form-field {
    }
    .form-field-label {
        font-size: 1.2em;
    }
    .form-field-entry {
        font-size: 1.2em;
    }
    input[type=checkbox].form-field-entry {
    }
    .form-actions input {
        font-size: 1.2em;
    }
}

/*--------------------------------- Search -----------------------------------*/
.result-fixed {
    background-color: white;
}

.result-controls {
    background-color: whitesmoke;
}

.result-control-count {
    font-size: 1.25em;
    font-weight: bold;
}

.result-control-nav {
}

.result-table {
}

.result-table th {
    background-color: #DDD;
}

.result-table tr {
    background-color: lightsteelblue;
}

.result-first,
.result-back {
}

.result-last,
.result-next {
}

/* Home/Search link "buttons" */
a.research:link,
a.research:hover,
a.research:active,
a.research:visited,
a.doc:link,
a.doc:hover,
a.doc:active,
a.doc:visited,
a.back-home:link,
a.back-home:hover,
a.back-home:active,
a.back-home:visited {
    vertical-align: middle;
    color: white;
    padding-top: 0.4em;
    padding-bottom: 0.0em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

a.doc:link,
a.doc:hover,
a.doc:active,
a.doc:visited {
    color: black;
}

/* Export button */
.result-xport {
    background-color: #33c480;
    color: white;
}

.result-xport:hover {
    background-color: #185c37;
}

/* Return button */
.result-return {
    background-color: #a3ccb9;
}

.result-return:hover {
    background-color: #8fb3a2;
}

.result-open {
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

/*--------------------------------- login ------------------------------------*/

.gears:before {
    content: "";
    
    background-image: url(images/GCBS_web_banner2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center;

    filter: blur(3px);
}

.loginform {
    background-color: whitesmoke;
    border-radius: 1em;
    box-shadow: 2px 2px 25px 1px #111;
}

.form-row > label {
    font-size: 1.2em;
}

.form-row > input {
    font-size: 1.2em;
}

.login-warn {
    font-size: 1rem;
}

@media only screen and (max-width: 450px) {
    .login-warn {
        font-size: 1em;
    }
}

/*******************************************************************************
                                 Animations  
*******************************************************************************/
.marquee {
    background-color: #99CCFF;
}

.marquee span {
    animation: marqueescroll 40s linear 0s infinite normal;
}

.marquee span:hover {
    animation-play-state: paused;
}

.spin {
    -webkit-animation:spin 0.5s linear infinite;
    -moz-animation:spin 0.5s linear infinite;
    animation:spin 0.5s linear infinite;
}

@keyframes marqueescroll {
    0% {
        transform: translateX(50%); 		
    }
    100% { 
        transform: translateX(-50%); 
    }
}

@-moz-keyframes spin { 
    100% { 
        -moz-transform: rotate(360deg); 
    } 
}
@-webkit-keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
    } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    } 
}