/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 31, 2017, 10:51:57 AM
    Author     : nguyen
*/

:root {
    --content-width: 75rem;
    --form-width: 56rem;
}

html {font-size: 0.9375rem;}
.uomcontent h1, .uomcontent h2 {margin-top: 1rem;}
.uomcontent h1.no-padding-bottom, .uomcontent h2.no-padding-bottom {padding-bottom: 0; margin-top: 0}
.uomcontent h4.panel-title {
    max-width: var(--content-width);
    font-weight: 500;
}
.panel-title a {text-decoration: none;}

/*.btn {
    padding: .5rem 1rem;
}
.uomcontent a.btn , button.btn{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 16px;
}*/
a.btn-success, button.btn-success,  a.btn-primary, button.btn-primary, button.btn-default, a.btn-danger {
    color: #fff;
    background-color: #0076de;
    border-color: #0070a3;
    border-radius: .3125rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 2px;
    outline-offset: 1px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 16px;
}
a.btn-success:hover {
    background-color: #9DF;
    border-color: #0070a3;
}

/*  MAIN MENU slyle */
#mainmenu
{
    background:#fff url(/lib/images/uom_menu_bg.gif) repeat-x left top;
 /*   height: 50px;
        width: 100%;*/
}
/*#mainmenu.bottom-menu {margin-bottom: 1rem;}*/

#mainmenu.second-bar
{
    background:#fff url(/lib/images/bg-6.gif) repeat-x left top;
 /*    height: 50px;
       width: 100%;*/
}

.navbar {border: none; border-radius: 0;}
.navbar-default {margin-bottom: 0;}
.container > .navbar-collapse {
    margin: 0 auto;
    width: var(--content-width);
    height: 50px !important;
}

#mainmenu ul
{
    padding: 6px 10px;
    margin: 0 auto;
    align-self: center;
    vertical-align: middle;
    text-align: center;
    max-width: 100%;       
}
/*#mainmenu2 ul {text-align: left; max-width: 40rem;}*/
.uomcontent #mainmenu ul li {
    display: inline !important; 
    list-style-type: none;
    float: none;
    width: auto;
    max-width: 12rem !important;
    /*margin-top: 0.3rem;*/
}

#mainmenu ul li form {
    background-color: transparent; 
    padding: 0;
}
#mainmenu ul li a, .nav ul li a, .nav li > form > button.logout
{
/*        font-family: Arial Tahoma;*/
/*    display: inline !important;
    float: left;*/
    color: #FFF;
    background-color: transparent;
    text-decoration: none;
    font-size:1.125rem;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 500;
    padding: 5px 8px;
}
.nav li > form > button.logout{padding-top: 7px; float: right;}
.nav > li > a {display: inline-block;}

#mainmenu ul li a:hover, #mainmenu ul li.active a, #mainmenu2 ul li a:hover, #mainmenu2 ul li.active a
{
    color: #9DF;
    background-color: transparent;
    text-decoration:none;
    font-weight: 600;
/*        padding: 8px 10px 9px 10px;*/
}

.uomcontent #mainmenu ul li.no-link2 {margin-left: 0;}
#mainmenu ul li a.no-link2, #mainmenu ul li a:hover.no-link2 {
    cursor: not-allowed;
    color: #999;
    font-weight: 500;
    text-transform: capitalize;
}

@media only screen and (max-width: 769px) {
    #mainmenu, #mainmenu2 {display: none}
    .uomcontent input[type=reset], .uomcontent input[type=submi], .uomcontent input[type=file] {max-width: 20rem;}
    .uomcontent [role=main] table.mobile-friendly tr td {
        display: table-cell;
    }
}

@media only screen and (min-width: 800px) {
    /*.uomcontent #mainmenu2 ul li, .uomcontent #mainmenu3 ul li {padding-bottom: 20px;}*/
    .uomcontent .main-content {
        max-width: var(--content-width);
        margin: 0 auto;
        
    }
    .uomcontent [role=main]>header:first-child h1, .uomcontent [role=main] form, 
    .uomcontent [role=main] fieldset, 
    .uomcontent .site-contact, .uomcontent .site-contact h1, .uomcontent .site-contact p,
    .uomcontent .main-content p, .uomcontent .main-content h1, .uomcontent .main-content h2, 
    .uomcontent .main-content h3, .main-content ol, 
    .uomcontent ol li 
    {
        max-width: var(--form-width);
    }
    .uomcontent .main-content h1, .uomcontent .main-content h2, .uomcontent .main-content h3, .uomcontent .main-content p
    {
        max-width: var(--content-width);
        
    }
    
    .uomcontent ul{
        margin: 0;
    }
   
    
    .uomcontent fieldset input[type=text], .uomcontent fieldset textarea, .uomcontent .styled-select.alt  {font-size: 0.9375rem;  width: 40rem !important;}
    .uomcontent .styled-select.alt {height: 2.8rem;}
    .uomcontent div.form select.alt.error { 
            border-color: #C00; 
            background-color: #FEE; 
            background-repeat: no-repeat ; 
            background-position: 97%; 
    }
    .uomcontent fieldset input[type=text].smTxtFld, .uomcontent fieldset input[type=password].smTxtFld {width: 40rem; font-size: 0.9375rem}
    .uomcontent fieldset textarea {height: 5rem;}
    .uomcontent fieldset textarea.bigTxtArea {height: 18rem;}
    .uomcontent fieldset label {width: 54.25rem; margin: 0 auto; text-align: left;}
    label {margin-right: 0.6rem;}
    .uomcontent div.img {
    /*        display: inherit;*/
            margin: 1rem auto;
            max-width: var(--content-width);
    }
    .uomcontent .w75rem ol, .uomcontent [role=main] table.items, .w75rem, .w75rem h1, .w75rem h2{
            max-width: 75rem; 
    /*        height: 1rem; */
            margin: 0 auto;}
    .uomcontent [role=main] table.items {margin-bottom: 1rem;}
    .uomcontent [role=main] table, .uomcontent [role=main] table.mobile-friendly {max-width: var(--content-width);}

    .grid-view div.summary, .grid-view .pager, .grid-view ul.pagination {
            max-width: var(--content-width);
            margin: 1rem auto;
            margin-bottom: 1rem;
    }
    .grid-view table th.action-column {width: 100px;}

    ul.pagination li {
        display: inline;
    }

    div.w56rem {
        max-width: 56.25rem;
/*                height: 1rem;*/
        margin: 0 auto;
    }
    
    div.w75rem {
        max-width: 75rem;
/*                height: 1rem;*/
        margin: 0 auto;
    }
}

.uomcontent [role=main] form {padding: 0.625rem 0;}

.uomcontent input[type=button], .uomcontent input[type=submit], .uomcontent input[type=reset], .uomcontent input[type=file], .uomcontent input[type=button]:hover, 
    .uomcontent input[type=button]:focus, .uomcontent input[type=submit]:hover, .uomcontent input[type=submit]:focus, .uomcontent input[type=reset]:hover, 
    .uomcontent input[type=reset]:focus, .uomcontent input[type=file]:hover, .uomcontent input[type=file]:focus, .uomcontent .button, .uomcontent .button:hover
{
    margin: 10px 20px 10px 0;
    padding: 10px 16px;
    border-bottom: none;
}

.in {z-index: auto;}    /* Fix issue with bootstrap modal greyed out */
.modal-dialog {top: 100px;}
.username {text-transform: lowercase;}

.testWarning {
    font-size: 18px;
    font-weight: bold;
    color: red;
    text-align: center;
    position: relative;
    display: block;
    padding: 10px;
    border: 2px solid #369;
    background-color: #eee;
}

.navbar-toggle {display: none;}

.page-note {
    display: block;
    border: 2px solid red;
    background-color: #eee;
    overflow: hidden;
    padding: 0.8rem;
}

.green-txt {color: green;}
.red-txt {color: red;}
.lab-index h2 {
    font-size: 1.1rem;
    padding-bottom: 0;
}

.funding-form .spending-form {
    
    border: solid;
}

table.budget tr.account-heading {
    
    background-color: #337ab7;
    color: white;
}

table.budget tr.account-funding {
    
    background-color: #bcf9a2;
}

table.budget tr.account-funding-total {
    
    background-color: #75c653;
}

table.budget tr.account-spending-subtotal {
    
    background-color: #f5e79e;
}

table.budget tr.account-spending-total {
    
    background-color: #e38d13;
}

.menu-link-button a {
    margin-right: 5px;
}

.uomcontent [role="main"] table tr td.money, .uomcontent [role="main"] table tr th.money {
    text-align: right;
}

.uomcontent a.glyphicon {
    text-decoration: none;
}

.uomcontent [role="main"] .notice {
    max-width: 100%;
}

.uomcontent [role="main"] .layout-sidebar__main, .uomcontent [role="main"] .layout-sidebar__side {
    padding: 4.5rem 1rem;
}

/*.uomcontent [role="main"] .layout-sidebar__side {
    width: 40%;
}*/

.uomcontent [role="main"] .layout-sidebar__side__inner {

    max-width:23rem;
}

.uomcontent [role="main"] div.form-group table.mobile-friendly {
 
    margin: 0;
}

.uomcontent [role="main"] div.staff-progress table.mobile-friendly {
 
    margin: 0;
}