/** COMMON NAVIGATION LAYOUTS **/

/* aspnetForm is used in place of the body to center the background image on the page, 
	 then the #container is centered within this.  This method is used to avoid the 1 pixel alignment "jog"
	 that is caused by the non-standard ways that browsers round the width while centering.
	 Remove the 3 background-* styles if you are not using the background image. */
#aspnetForm {
    min-height: 100%;
}

#aspnetForm {
    min-width: 320px;
}

.header {
    height: 100px;
    width: 100%;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    position: relative;
}

.headerLogo {
    left: 50px;
    top: 3px;
    position: absolute;
}

.headerTitle, .headerSubTitle {
    margin-left: 5px;
    left: 20%;
}

.headerTitle {
    font-size: 1.1em;
    position: absolute;
    top: 25px
}

.headerSubTitle {
    font-size: 1.5em;
    font-weight: bold;
    position: absolute;
    top: 45px;
}

.headerLink {
    position: absolute;
    right: 5px;
    bottom: 0px;
}

    .headerLink a:link, .headerLink a:visited, .headerLink a:hover {
        text-decoration: none;
        font-size: 0.9em;
        padding: 2px 0 2px 3px;
    }

    .headerLink a:hover {
        text-decoration: underline;
    }

.headerLogout {
    position: absolute;
    top: 5px;
    right: 5px;
}

.navigation .name {
    font-size: 1.1em;
}

.headerWelcome, .headerUserName {
    margin-left: 5px;
}

.headerWelcome {
    margin-top: 0px;
}

.headerUserName {
    font-size: 0.9em;
    font-weight: bold;
}

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

.menu li {
    padding: 7px;
}

.menu a[disabled], .menu a[disabled] li, .menu a[disabled]:hover li {
    font-weight: bold;
    vertical-align: middle;
    text-decoration: none;
}

.menu a:hover li {
    text-decoration: underline;
}


.PaymentMethodsList {
    width: 30%;
}

.footer {
    width: 100%;
    clear: both;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .footer .divSection {
        text-align: center;
    }

        .footer .divSection .divCell {
            float: none;
            display: inline;
        }

/********** Modal Popup **********/
.SecureDiv div {
    position: static;
}

/********** Modal Popup **********/
.popup {
    border-width: 1px;
    border-style: solid;
    border-top-width: 10px;
    width: 400px;
    padding: 5px;
}

    .popup p {
        text-align: left;
    }

    .popup .icon {
        float: left;
        height: 20px;
        width: 25px;
        vertical-align: sub;
        margin: 10px 20px 0px 5px;
    }

    .popup .rightCol {
        padding: 5px 5px 10px 20px;
        margin-left: 30px;
    }

.modalBackground {
    filter: alpha(opacity=70);
    opacity: 0.7;
    MozOpacity: 0.0;
}

/********** Progress Dialog **********/
.UpdateProgressBackground {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    padding-top: 15%;
    margin: 0;
    z-index: 1000;
    text-align: center;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

    .UpdateProgressBackground div {
        width: 30%;
        background-color: #FFFFFF;
        margin: auto;
        margin-bottom: 2em;
        border: 0.2em solid black;
        padding: 1em;
    }

/** END COMMON NAVIGATION LAYOUTS **/

/** TOP NAVIGATION LAYOUT **/
.navigationTop {
    display: table;
    border-collapse: collapse; /* Need this to show borders for the child divs */
    height: 100%;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
}

    .navigationTop .name {
        display: table-header-group;
        float: left;
        vertical-align: top;
    }

    .navigationTop .menu {
        display: table-header-group;
        float: right;
        width: 85%;
        margin: 0;
        padding: 0;
    }

        .navigationTop .menu ul {
            height: auto;
            width: 100%;
            margin: auto;
        }

        .navigationTop .menu a {
            float: left;
            margin: 0;
            padding: 10px;
        }

            .navigationTop .menu a:visited {
                display: block;
                vertical-align: middle;
                text-decoration: underline;
            }

            .navigationTop .menu a:hover {
                display: block;
                vertical-align: middle;
                text-decoration: underline;
            }

    .navigationTop .mainPage {
        border-top-width: 1px;
        border-top-style: solid;
        display: table-row;
        height: 100%;
        vertical-align: bottom;
        width: auto;
        align-content: center;
        margin-left: 5px;
        width: 100%;
    }

    .navigationTop .SecureDiv {
        display: table-footer-group;
        width: 20%;
    }

    .navigationTop .optionalHTML {
        display: none;
    }

    .navigationTop .footer {
        font-size: 1em;
        display: table-footer-group;
    }

/** END TOP NAVIGATION LAYOUT **/

/** LEFT NAVIGATION LAYOUT **/
.navigationLeft:after {
    content: " ";
    display: block;
    height: 0px;
    clear: both;
}

.navigationLeft .navigation {
    float: left;
    width: 18%;
    margin: 10px 0 0 0px;
    list-style-type: none;
    padding-left: 5px;
    padding-right: 5px;
}

.navigationLeft .menu ul {
    padding-left: 0px;
}

form.Authenticated .navigationLeft div.navigation .menu ul {
    border-top-width: 1px;
    border-top-style: solid;
}

.navigationLeft .mainPage {
    float: right;
    width: 100%;
    margin-right: 0px;
}

.navigationLeft .SecureDiv {
    float: left;
    padding-left: 10px;
    margin-top: 5px;
    clear: left;
}

.navigationLeft a.bookMark {
    float: left;
    clear: left;
    margin-left: 10px;
    cursor: pointer;
    margin-top: 5px;
}

.navigationLeft .optionalHTML {
    float: left;
    width: 18%;
    margin-left: 5px;
}
/** END LEFT NAVIGATION LAYOUT **/