/* Standard a link settings */
a:link, a:active, a:visited {
    font-size: inherit;
    background-color: transparent;
    text-decoration: none;
    color: #00f;
    padding: 1px;
}

a:hover {
    text-decoration: none;
    background-color: #fc4;
    padding: 1px;
}



/*========================================================================================================================================*/
/* Floating buttons on screen */

/* 
    float-div-menubar 
    This panel floats in the top section of the screen where the program menu buttons appear.
    It is used to display save buttons or the risk assessment paramater blocks
*/
div .float-div-menubar {
    display: block;
    position: absolute;
    height: 40px;
    margin: 0px;
    top: 16px;
    left: 380px;
    z-index: 40;
}

    div .float-div-menubar:active {
    }

        div .float-div-menubar .button26 img {
            height: 24px;
        }
    
        div .float-div-menubar .button32 img {
            height: 32px;
        }

    div .float-div-menubar ul #submenu {
        margin: 0px 0px 30px -300px;
        padding: 20px 20px 30px 20px;
        height: auto;
        z-index: 35 !important;
    }

/* 
    float-div-absolute 
    This panel floats on the screen inline with the current line on the screen.  
    It can be floated across the screen by using a style left and padding.  eg: style="left: 600px; margin-top:5px"
*/
div .float-div-absolute {
    display: block;
    position: absolute;
    margin: 0px;
    text-align: center;
    z-index: 30;
}

    div .float-div-absolute img {
    }

    div .float-div-absolute:active {
    }

    div .float-div-absolute .text {
        position: absolute;
        margin: 0px;
        text-align: center;
        font-weight: bold;
        color: #00f;
        background-color: #eee;
        top: 44%; /* Adjust this value to move the positioned div up and down */
        width: 52%; /* Set the width of the positioned div */
        z-index: 32;
    }

/* 
    float-div-absolute 
    This panel floats on the screen inline with the current line on the screen.  
    It can be floated across the screen by using a style left and padding.  eg: style="left: 600px; margin-top:5px"
*/
div .float-div-fixed {
    display: block;
    position: fixed;
    margin: 0px;
    text-align: center;
    z-index: 30;
}

    div .float-div-fixed img {
    }

    div .float-div-fixed:active {
    }

    div .float-div-fixed .text {
        position: fixed;
        margin: 0px;
        text-align: center;
        font-weight: bold;
        color: #00f;
        background-color: #eee;
        top: 44%; /* Adjust this value to move the positioned div up and down */
        width: 52%; /* Set the width of the positioned div */
        z-index: 32;
    }


/* float-div-relative */
div .float-div-relative {
    display: inline-block;
    position: relative;
    margin: 0px;
    text-align: center;
    z-index: 30;
}

    div .float-div-relative img {
        height: 32px;
    }

    div .float-div-relative:active {
    }


div .float-div-bottom {
    display: block;
    position: absolute;
    bottom: 0;
    color: #00f;
    left: 20px;
    min-width: 300px !important;
    max-width: 1000px !important;
    margin-bottom: 10px;
    padding: 15px 25px;
    text-align: left;
    line-height: 18px;
    font-weight: normal;
    border: #888 solid 1px;
    background-color: rgb(252 255 150 / 0.85);
    border-radius: 5px;
    letter-spacing: -0.2px;
    z-index: 40
}

div .float-div-footer {
    display: block;
    position: absolute;
    bottom: 0;
    color: #ccc;
    left: 20px;
    min-width: 300px !important;
    max-width: 800px !important;
    margin-bottom: 0px;
    padding: 2px;
    text-align: left;
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    letter-spacing: -0.2px;
    z-index: 39; /*40px*/
}

/*========================================================================================================================================*/
/* online help text navigation */
div .float-div-helptext {
    display: block;
    position: unset;
    margin: 0px;
    padding: 0px;
    left: 0px;
    z-index: 50;
}

    div .float-div-helptext ul {
        display: block;
        position: relative;
        list-style-type: none;
        margin: 0;
        padding: 0px;
        z-index: 50;
    }

        div .float-div-helptext ul li {
            list-style-type: none;
        }

        div .float-div-helptext ul #submenu {
            margin: 0px 0px 30px 0px;
            padding: 20px 20px 40px 20px;
            width: 800px;
            height: auto;
            min-height: 400px;
            text-align: left;
            line-height: 24px;
            z-index: 52;
        }

            div .float-div-helptext ul #submenu img {
                height: 18px;
            }

div .help-image-size img {
    height: 18px;
}
ul #submenu {
    z-index: 52;
    background-color: antiquewhite !important;
}


/*========================================================================================================================================*/
/* add footnotee to bottom left of screen */

.footnote {
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 5px 10px;
    padding: 5px;
    border: 1px dotted #888;
    z-index: 10;
}


/*========================================================================================================================================*/
/* W#Schools  https://www.w3schools.com/howto/howto_js_tabs.asp (with mods) */
/* Style the tab using button format */

.div-page-tab {
    overflow: hidden;
    border-bottom: 2px solid #000;
    padding-bottom: 1px;
    margin-bottom: 1px;
}
    .div-page-tab:active {
        padding-bottom: 1px;
    }
    .div-page-tab button {
        font-size: 12px;
        display: inline-block;
        margin: 2px;
        padding: 2px;
        color: #000; /* black */
        min-height: 28px;
        letter-spacing: -0.3px;
        background-color: #f7ff93;
        border-top: 1px solid #ddf !important;
        border-right: 1px solid #ddf !important;
        border-left: 6px solid #333 !important;
        border-bottom: 1px solid #333 !important;
        box-shadow: 4px 2px 2px grey;
        border-radius: 4px 4px 0px 0px;
    }
        .div-page-tab button:hover {
            background-color: #ffd45b !important;
        }
        .div-page-tab button:link {
            background-color: #ffab5b !important;
        }
        .div-page-tab button:focus {
            background-color: #ffd45b !important;
        }
        .div-page-tab button:active {
            border-top: 1px solid #ddf !important;
            border-right: 0px solid #ddf !important;
            border-left: 7px solid #333 !important;
            border-bottom: 1px solid #333 !important;
            background-color: #fb0 !important;
            box-shadow: 0px 0px 0px grey;
        }

.tabcontent {
    display: none;
    background-color: transparent;
    padding-right: 1px;
    padding-bottom: 2px;
}

.fixedWidth {
    min-width: 100px;
}



/*========================================================================================================================================*/
/* This button was generated using CSSButtonGenerator.com */
/* General button format */

.button16, .button20, .button26, .button32 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    font-family: inherit;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-style: outset;
    padding: 1px !important;
    letter-spacing: -0.3px;
    border-top: 1px solid #999 !important;
    border-right: 2px solid #999 !important;
}

    .button16:active, .button20:active, .button26:active, .button32:active {
        position: relative;
        top: 1px;
        border-style: inset;
    }

/* Used for option buttons on pages */
.button16, .button20, .button26, .button32 {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fffffe), color-stop(1, #d9d9d9) );
    background: -moz-linear-gradient( center top, #fffffe 5%, #d9d9d9 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffffe', endColorstr='#d9d9d9');
    background-color: #fffffe;
    border: 2px solid #c2c2c2;
    color: #444;
    margin: 0px 8px;
    border-style: outset;
}

    .button16:hover, .button20:hover, .button26:hover, .button32:hover {
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #fffffe) );
        background: -moz-linear-gradient( center top, #e9e9e9 5%, #fffffe 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#fffffe');
        background-color: #e9e9e9;
    }

a.button16 {
    height: 18px !important;
    min-width: 18px;
}

button.button16 {
    height: 22px !important;
    min-width: 24px;
    vertical-align: central;
}
    .button16 img {
        height: 16px;
        background-color: transparent
    }

a.button20 {
    height: 20px !important;
    min-width: 20px;
}
button.button20 {
    height: 26px !important;
    min-width: 28px;
    vertical-align: central;
}
    .button20 img {
        height: 18px;
        background-color: transparent
    }

a.button26 {
    height: 26px !important;
    min-width: 26px;
}
button.button26 {
    height: 32px !important;
    min-width: 34px;
    vertical-align: central;
}
    .button26 img {
        height: 26px;
        background-color: transparent
    }

a.button32 {
    height: 32px !important;
    min-width: 32px;
}
button.button32 {
    height: 38px !important;
    min-width: 40px;
    vertical-align: central;
}
    .button32 img {
        height: 30px;
        background-color: transparent
    }


.ButtonLock {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 32px !important;
    min-width: 32px;
    display: inline-block;
    border: 1px dashed #f60;
    padding: 3px;
    margin: 0px 8px;
    background-color: #eee;
}




/*========================================================================================================================================*/
/* Used in Hazard Improvement and Risk Management systems */

/* Mouse over links to display information (used for risk matirx and help display) */
ul#submenu, div#nav ul#myul {
    list-style-type: none;
    margin: 1px;
    padding: 0px;
    background-color: #ff9;
    border: 1px solid #000;
    display: inline-table;
    border-radius: 2px;
}


div#nav {
    text-align: center;
    list-style: none;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    float: left
}

    div#nav a {
        text-decoration: none;
        color: #000;
        display: block;
        margin: 0px;
        padding: 3px;
    }

    div#nav li {
        text-decoration: none;
        display: block;
        border-radius: 2px;
    }

        div#nav li a:hover {
            color: #fff;
            background-color: #35af3b;
        }

    ul#submenu li, div#nav li {
        background-color: #ff9;
        border: 0px solid #000;
        float: left;
        margin: 0px;
        padding: 0px;
    }

ul#submenu {
    display: none;
    position: absolute;
    font-size: 12px;
    margin-left: -300px;
    padding: 0px;
    height: auto;
}

    ul#submenu li:hover {
        color: #fff;
    }

    ul#submenu li a {
        display: block;
        margin: 0px;
        padding: 0px;
        color: #757575;
        text-decoration: none;
    }

    ul#submenu table tr td {
        font-size: 12px;
        padding: 3px;
        text-align: left;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-bottom-color: #666666;
        border-left-color: #666666;
    }

ul#myul li:hover > ul#submenu {
    display: block;
}



/*========================================================================================================================================*/
/* Only used in old Training system - section to be phased out when remaining programs are updated */
/*========================================================================================================================================*/



/* Navigation for general page operations */
.linkS:link, .linkS:visited {
    width: 70px;
    height: 20px;
    line-height: 20px;
}

.linkS:link, .linkS:visited {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dcfa89), color-stop(1, #b3e04a) );
    background: -moz-linear-gradient( center top, #dcfa89 5%, #b3e04a 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcfa89', endColorstr='#b3e04a');
    background-color: #dcfa89;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-indent: 0;
    border: 1px solid #666;
    display: inline-block;
    color: #0026ff;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    text-shadow: 0px 0px 0px #73ad00;
    border-style: outset;
}

.linkS:hover {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b3e04a), color-stop(1, #dcfa89) );
    background: -moz-linear-gradient( center top, #b3e04a 5%, #dcfa89 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3e04a', endColorstr='#dcfa89');
    background-color: #b3e04a;
}

.linkS:active {
    position: relative;
    top: 1px;
    border-style: inset;
}