﻿/* We apply all styles to the ug class (user guide) to prevent possible conflicts or overrides in a website */
body
{
    margin: 5px;
}

.ug
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    padding: 0px;
    margin: 0px;
    color: Black;
    height: 100%;
    background-color: white;
}

    .ug h1
    {
        font-family: Arial;
        font-weight: bold;
        font-size: 2em;
        color: #0065A2;
    }

    .ug h2
    {
        font-family: Arial;
        font-size: 1.4em;
        color: #0065A2;
    }

    .ug h3
    {
        font-family: courier new;
        font-size: 1.2em;
        color: black;
        text-decoration: underline;
    }

    .ug img
    {
        max-width: 100%;
        height: auto;
    }


    .ug .contents
    {
        width: 100%;
        height: 100%;
    }

        .ug .contents .navCell
        {
            font-size: .9em;
            vertical-align: top;
            width: 300px;
            border-top: solid 3px #0065A2;
            border-right: solid 3px #0065A2;
        }

    .ug .divNav
    {
        background-color: white;
        font-family: Arial, sans-serif;
        font-size: 1.1em;
        float: left;
        width: 298px;
        height: 100%;
        overflow: scroll;
        padding-left: 10px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .ug .divNavModal
    {
        background-color: white;
        font-family: Arial, sans-serif;
        font-size: 1.1em;
        width: 298px;
        max-width: 100%;
        padding-left: 10px;
    }

        .ug .divNav a, .ug .divNav a:visited, .ug .divNavModal a, .ug .divNavModal a:visited
        {
            color: #0065A2;
            text-decoration: none;
            padding: 2px;
            padding-left: 5px;
            padding-right: 10px;
        }

            .ug .divNav a:hover, .ug .divNavModal a:hover
            {
                background-color: #0065A2;
                color: white;
            }

        .ug .divNav ul, .ug .divNavModal ul
        {
            list-style-type: none;
            margin-left: 10px;
            padding-left: 15px;
        }

        .ug .divNav .folder, .ug .divNavModal .folder
        {
            font-weight: bold;
            list-style-image: url('../images/folder-horizontal.png');
        }

        .ug .divNav .file, .ug .divNavModal .file
        {
            font-weight: normal;
            list-style-image: url('../images/document.png');
        }

    .ug .divContents
    {
        height: 100%;
        margin-left: 300px;
        overflow: hidden;
    }

    .ug .contents iframe
    {
        border: solid 0px black;
    }

    .ug .header
    {
        width: 100%;
        margin: 0px;
        /*margin-bottom: 10px;*/
        padding: 0px;
        color: White;
        background-color: #0065A2;
    }

        .ug .header td
        {
            padding: 5px;
        }

        .ug .header .iconCell
        {
            width: 35px;
        }

        .ug .header .urlCell
        {
            text-align: right;
            padding-right: 10px;
        }

        .ug .header a
        {
            color: White;
        }

    .ug .divNavBar
    {
        width: 100%;
        color: white;
        padding: 0;
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 20px;
        margin: 0;
    }

        .ug .divNavBar a
        {
            color: #FFF;
            font-weight: bold;
            text-decoration: none;
            background-color: #AAA;
            padding: 3px;
            padding-right: 10px;
            padding-left: 10px;
            border-top: solid 2px #DDD;
            border-left: solid 2px #DDD;
            border-right: solid 2px black;
            border-bottom: solid 2px black;
        }

            .ug .divNavBar a:hover
            {
                border-top: solid 2px black;
                border-left: solid 2px black;
                border-right: solid 2px #DDD;
                border-bottom: solid 2px #DDD;
            }

    .ug .accessTable
    {
        border-spacing: 1px;
        border-collapse: separate;
        font-size: 1em;
        background-color: #0065A2;
    }

        .ug .accessTable .labelCell
        {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            padding: 2px 15px 2px 5px;
            background-color: white;
            color: #0065A2;
        }

        .ug .accessTable .valCell
        {
            font-size: .9em;
            padding: 2px 15px 2px 5px;
            font-style: italic;
            background-color: white;
            color: #0065A2;
            color: black;
        }

        .ug .accessTable .descCell
        {
            font-size: .9em;
            padding: 2px 15px 2px 5px;
            background-color: white;
            color: #0065A2;
            color: black;
        }

        .ug .accessTable .rowSpacer
        {
            padding: 2px 15px 2px 5px;
            background-color: white;
            color: #0065A2;
            height: 15px;
        }

    .ug .section
    {
        font-size: 1.1em;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 30px;
    }

    .ug .sectionCenter
    {
        font-size: 1.1em;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 30px;
        text-align: center;
    }

    .ug .smallFont
    {
        font-size: .9em;
    }


/* -------------------------------------------- */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px)
{
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px)
{
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px)
{
    .btn
    {
        max-width: 100%;
    }

    .ug .divContents
    {
        margin-left: 0px;
    }
    /*#divUgNav
    {
        position:fixed;
        left: 0px;
        top: 50px;
    }*/
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px)
{
    .ug .header .urlCell
    {
        display: none;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px)
{
}
