/** TODO this can be cleaned up, LESSified, and minimized **/

/* just commit to showing the scroll on the right.  otherwise looks funny when
   navbar is resized horizonally when vertical scroll appears */
html {
    overflow-y: scroll;
}

/** this allows us to display nothing until angular has applied changes to the dom
    without this we see what the dom wants to display first, and then get an update
    within milliseconds once angular is finished. -- it's the "funny flicker effect"
 **/
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

.change-password-table{
	margin: 10px auto;
}

.change-password-table tr td span{
	margin-right: 12px;
}

.errors{
	color: #FF0000;
}

.messages{
	
}

.navbar-inner {
    background-color: #005FC3;
    background-image: linear-gradient(to bottom, #0064CD, #0058B4);
    background-repeat: repeat-x;
    border: 1px solid #003A76;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 35px;
    padding-left: 20px;
    padding-right: 20px;
}
/** supports mail/messaging feature **/
.mailSection:hover {
    background-color: #0E68A0;
    color: white;
}

.mailSection .unreadMail {
    color: white;
}

.mailDropdown, hr {
    margin: 0px;
}

.mailText {
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 5px;
    margin-right: 5px;
}

.mailSection {
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}

.mailDropdown {
    border-bottom-color: rgb(233, 233, 233);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: rgb(51, 51, 51);
    border-top-style: none;
    border-top-width: 0px;
    color: rgb(51, 51, 51);

    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    left: 0px;
    width: 352px;
}

/** **
supports grid feature
**/

/******** Grid Global ********/

.ngPagerControl .ngPagerButton {
    /** pagination buttons are pushed down 10px... fix that here... **/
    margin-top: -10px;

    /** and a little space in between  **/
    margin-left: 2px;
    margin-right: 2px;
}

.nglabel {
    display: block;
    float: left;
    font-weight: bold;
    padding-right: 5px;
}

.ngNoSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** better position ngGrid cell contents **/
.ngCell div {
    margin-top: 5px;
    margin-left: 5px;
}

/******** Grid ********/

.gridStyle {
    border: 1px solid rgb(212, 212, 212);
    /* width: none !important; */
    height: 420px;
}

.ngGrid {
    background-color: rgb(253, 253, 253);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/******** Header ********/

.ngGroupPanel {
    background-color: rgb(234, 234, 234);
    overflow: hidden;
    border-bottom: 1px solid rgb(212, 212, 212);
}

.ngGroupPanelDescription {
    margin-top: 5px;
    margin-left: 5px;
}

.ngGroupList {
    list-style-type: none;
}

/******** Footer ********/
.ngFooterPanel {
    /** height: 30px !important; **/
}


                     /***
                        modal / login / password
                     **/

.modal-body{
    display:block;
    margin:0 auto;
    width:80%;
}

.modal-body *{
    display:block;
    margin: 10px 0 5px 0;
    width:95%;
}
#password{
    display:inline;
    float: left;
    max-width:69%;
    min-width:63px;
}

@media (max-width: 767px) {
    .modal{
        margin: 0 auto;
        width:80%;
    }
    #password{
        width:50%;
    }
}

@media (max-width: 480px) {
    .modal{
        width:93%;
    }
}