/************************************
*   Client specific customization   *
************************************/

/*
    HeaderLogo
    Menu
    Menu Hover Over
    Menu Selected
    Header background?
    header HR line

    slickgrid elements
    button BG color?
    footer, HR (?)
  */


/******************************
 * Page Header and Menu styles
 ******************************/

/* bootstrap nav bar / menuing */
.navbar {
    border-color: #0E487A;
    background-color: white;
    height: 60px;
}

.navbar .navbar-text {
    color: #0E487A;
}

.nav-pills > li > a {
    color: #0E487A;
    font-weight: bold;
}

a.navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a,
.navbar-nav > li > a:visited {
    color: #0E487A;
    padding: 10px 5px;
    font-weight: bold;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:active, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: transparent;
    color: #0E487A;
    padding: 10px 5px;
    font-weight: bold;
    text-decoration: underline;
}

/* right hand menu (user/logoff) */
.navbar-right {
    padding-right: 20px;
}

/* nav bar branding (img or txt)*/
.navbar-brand {
    height: auto;
    padding: 0px 20px;
}

/* to display an image as branding, set the URL and Height/Width here*/
.brand-img{
    background-image: url('/Content/images/BargeOps-257x40.png');
    background-repeat: no-repeat;
    height: 40px;
    width: 257px;
    margin-top: 15px;
}

.user-options {
    padding: 0 5px 0 5px;
    margin: 22px -22px 0 0;
}

/*only add margin on big screens - suppress when nav bar collapses*/
@media (min-width: 768px) {
    .navbar-nav > li {
        /*adjust this to account for LOGO height*/
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    .navbar-collapse ul li.navbar-text {
        padding-left: 15px;
    }
}


/**************************
 * Body and Content styles
 **************************/
/* body style - set padding-top to avoid content overrunning navbar */
body {
    padding-top: 80px;
}

/* paragraph style */
p {
}

/* HTML Headings, both TAG and CLASS */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: #044074;
    font-weight: 700;
}

/* HTML Headings secondary text, both TAG and CLASS */
h1 small, h1 .small, .h1 small, .h1 .small,
h2 small, h2 .small, .h2 small, .h2 .small,
h3 small, h3 .small, .h3 small, .h3 .small,
h4 small, h4 .small, .h4 small, .h4 .small,
h5 small, h5 .small, .h5 small, .h5 .small,
h6 small, h6 .small, .h6 small, .h6 .small {
}

/* alerts */
.alert-success {
}
.alert-info {
}
.alert-warning {
}
.alert-danger {
}

/* Paged Observables */
.pager-numbers {
    font-size: 1.4em;
    width: 100%;
}
.pager-previous {
    font-size: 1.6em;
}
.pager-next {
    font-size: 1.6em;
    float: right;
}

.right-align{
    text-align: right;
}

/* Barge Search custom styles */
.filter-container {
    position: absolute;
    top: 95px; /* offset for NavBar, BrandImage, Alert bar */
    bottom: 35px; /* offset for Footer */
    width: 285px;
    /*left: 0px;
    right: 300px;*/
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

body.message-padding .filter-container {
    top: 140px; /* offset for NavBar, BrandImage, Alert bar */
}

.filter-group {
    padding-bottom: 5px;
}

.filter-header {
    font-weight: bold;
    display: inline-block; /* allow CLEAR link to be on same line */
    padding-top: 5px;
}

.filter-item {
    padding-left: 10px;
}

/* Barge search - barge # text box */
.filter-item > .form-control.barge-number {
    display: inline-block;
    width: 200px;
    margin-top: 5px;
}

.checkbox.filter-item {
    padding-left: 30px; /* need 20px for checkbox */
    margin-top: 5px;
    margin-bottom: 0px;
}

.filter-header + .filter-action {
    padding-left: 10px;
}

.filter-action {
}

.search-grid-full {
    position: absolute;
    top: 95px; /* offset for NavBar, BrandImage, Alert bar */
    bottom: 35px; /* offset for Footer */
    left: 325px; /* offset for filter area */
    right: 0px;
}

body.message-padding .search-grid-full {
    top: 140px; /* offset for NavBar, BrandImage, Alert bar */
}

.search-grid-full .slickgrid-wrapper {
    margin-bottom: 0px;
}


.search-grid-full .slickgrid {
    min-height: 0px;
    margin-top: 5px;
    position: absolute;
    top: 80px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}   

/*.no-message-pad {
    top: 95px;
}*/

.inline-control {
    display: inline-block;
}

/****************
 * Footer styles 
 ****************/
.footer {
    border-top-color: #0E487A;
    border-top-style: solid;
    border-top-width: 1px;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: white;
    z-index: 100;
}

/*********************
 * SlickGrid stylings
 *********************/
.slickgrid {
    min-height: 0px;
    margin-top: 15px;
}   

.slickgrid-wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
}

.slickgrid-wrapper .slickgrid-toolbar {
    margin: 0;
    background-color: #EDF1F1;
    padding: 5px;
}

.slickgrid-wrapper .slickgrid-toolbar li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0 4px 0 0;    
    white-space: nowrap;
}

.slickgrid-wrapper .slickgrid-toolbar li a {
    display: inline-block;
    padding: 0px 0px 0px 5px;
    margin: 0;
    text-decoration: underline;
}

.slickgrid-wrapper .slickgrid-header {
    font-weight: bold;
    font-size: 14pt;
}


li.slickgrid-status-text {
    float: right;
}

.slickgrid-status-text {
    padding-right: 20px;
}

/* Modals */
.modal-body {
    padding: 20px;
}

.modal-header {
    padding-bottom: 5px;
}

.modal-footer {
    margin-top: 0px;
    padding: 10px;
}

/* Extra-large Modal for Barge Events */
@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}