/* 
    Generic ISS Common UI Bootstrap Overrides
    2014-11 Michael Van Devender

    bootstrap-isstheme.css is auto-generated from LESS via Bootswatchr.com 
    To avoid overwriting critical adjustments if the color scheme is updated, 
    general bootstrap tweaks to implement the ISS Common UI are placed here.

    IMPORTANT:
    This file is for applying the ISS Common UI to MVC with Bootstrap and KendoUI.
    DO NOT put *any* site-specific CSS in this file -- that's what Site.css is for.

    Please keep this organized.
*/


/* **************** NAVBAR ****************** */

/* 
   Slim down the navbar 
   Note: Is overridden if an element with navbar-brand exists
*/
.navbar-nav > li > a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.navbar {
    min-height: 32px !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 0;
}
/* Non-normal line height prevents right-aligned nav items from aligning all the way to the right */
body{ 
    line-height: normal;
}

/* **************** ABOVE-NAVBAR HEADER **************** */
.navbar-iss-header {
    min-height: 145px;
    color: #505050;
    font-size: 16px;
    max-height: 145px;
}
body {
    padding-top: 0 !important;
}

/* **************** TEXT AND IMAGES INSIDE ABOVE-NAVBAR HEADER **************** */
.iss-department-logo{
    margin: 20px 20px 0 20px;
}
.iss-title {
    font-size: 58pt;
    font-stretch: expanded;
    font-weight: 300;
    letter-spacing: -5px;
    margin: 0 0 -30px -20px;
    text-transform: uppercase;
    
    /* Ideal text spacing */
    line-height: 1.42857; 
}
.iss-subtitle {
    /* Escapes the bounding box in IE... float: right; */
    font-size: 30pt;
    font-stretch: condensed;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}
.iss-navbar-right{
    margin-top: 10px;
    margin-right: 10px;
    text-align:right;
}
.iss-logo-container {
    
}
.iss-logo {
    margin: 10px 25px 10px 0;
}
.iss-date {
    color: #ffffff;
    float:right;
    margin-top:9%;
    position:relative;
}

/* **************** BODY **************** */


/* **************** FOOTER **************** */
/*
    Forces the footer to fill the bottom of the page
    Source: http://getbootstrap.com/examples/sticky-footer/
*/
html {
    min-height: 100%;
    position: relative;
}
body {
    margin-bottom: 60px;
}
footer.footer {
    background-color : #4f6f8f;
    color: #ffffff;
    font-size: 16px;
    padding-top: 20px;

    bottom: 0;
    height: 60px;
    position: absolute;
    width: 100%;
}
body > .container {
    /* Padding reduces usable screen real estate when at mobile resolutions */
    padding-left: 15px;
    padding-right: 0;
}
.container .text-muted {
    margin: 20px 0;
}
.footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* **************** TABLES/GRIDS **************** */
th, .k-grid-pager, .k-grid-header .k-link:link, .k-state-selected{
    background-color: #4f6f8f !important;
    color: #fff !important;
}
.k-grid-toolbar
{
    /* Just to reduce wasted space */
    padding: 0;
}
.k-grid-toolbar .k-button
{
    margin: 0;
}

/* **************** KENDOUI SITE-WIDE ELEMENT MODIFICATIONS **************** */

.k-icon,.k-tool-icon,.k-grouping-dropclue,.k-drop-hint,.k-column-menu .k-sprite,.k-grid-mobile .k-resize-handle-inner:before,.k-grid-mobile .k-resize-handle-inner:after,
.k-mobile-list .k-check:checked,.k-mobile-list .k-edit-field [type=checkbox]:checked,.k-mobile-list .k-edit-field [type=radio]:checked,
.k-tool-icon,
.k-icon:not(.k-loading), .k-grouping-dropclue, .k-drop-hint, .k-callout, .k-tool-icon, .k-state-hover .k-tool-icon, .k-state-active .k-tool-icon, .k-state-active.k-state-hover .k-tool-icon, .k-state-selected .k-tool-icon, .k-state-selected.k-state-hover .k-tool-icon, .k-column-menu .k-sprite, .k-mobile-list .k-check:checked, .k-mobile-list .k-edit-field [type=checkbox]:checked, .k-mobile-list .k-edit-field [type=radio]:checked
{
    background-image: url('/Images/sprite.png');
}

/* 
    Kendo UI's themes are careful to set element backcolors so as to only use one sprite color.
    Some backcolors in this theme conflict, however, so they are here set to use inverted sprites.
*/
.k-i-seek-w, .k-i-arrow-w, .k-i-arrow-e, .k-i-seek-e, .k-button:not(.k-primary) .k-icon, .k-i-collapse, .k-i-expand, .k-plus, .k-minus
{
    background-image: url('/Images/sprite_black.png') !important;
}


.k-select
{
    background-color: #4f6f8f;
}
.k-primary{
    background-color: #4f6f8f;
}

/*
    The next three rules
    Override KendoUI's outdated box model inside Kendo windows since it conflicts with Bootstrap 
    Found at http://stackoverflow.com/questions/21625780/kendo-ui-bootstrap-theme-not-working-well-with-bootstrap-3-1-0
*/
.k-widget select, .k-widget textarea, .k-widget input[type="text"]:not(.k-input), .k-widget input[type="password"], .k-widget input[type="datetime"], .k-widget input[type="datetime-local"], .k-widget input[type="date"], .k-widget input[type="month"], .k-widget input[type="time"], .k-widget input[type="week"], .k-widget input[type="number"], .k-widget input[type="email"], .k-widget input[type="url"], .k-widget input[type="search"], .k-widget input[type="tel"], .k-widget input[type="color"], .k-widget .uneditable-input {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.k-window .row, .k-window .row *:not(.k-widget, .k-widget *, .k-animation-container *) { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.k-widget .col-md-1, .k-widget .col-md-2, .k-widget .col-md-3, .k-widget .col-md-4, .k-widget .col-md-5, .k-widget .col-md-6, .k-widget .col-md-7, .k-widget .col-md-8, .k-widget .col-md-9, .k-widget .col-md-10, .k-widget .col-md-11, .k-widget .col-md-12 { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* Kendo DDLs don't size right in Bootstrap forms without this */
.k-dropdown{
    width: 100%;
    padding: 0;
}

/* 
    Bootstrap modifies textboxes in KendoUI forms to have excessive padding (12px), which in chrome obscures text on blur.
    Datepickers also appear to have a bizarre border due to that padding.
    The below fixes the above. 
*/
.k-edit-form-container .form-control{
    padding: 0;
}

/* Datepickers appear to have excess padding-bottom without the following (note: assumes .form-control has a height of 34px) */
.k-edit-form-container .k-picker-wrap .k-input.form-control{
    height: 32px;
}

/* Bootstrap's form layout clashes with Kendo's popup form here and elements flow off the page unless overrridden */
/* No!  Don't mess with the margins here -- just need to add the Container class at the top of form templates! */
.k-edit-form-container .form-horizontal .form-group{
    /*margin-left: 15px !important;
    margin-right: 15px !important;*/
}
/* .container defaults to full-screen, but needs to exist.  Inside a k-edit-form-container, which is constrained to 400px, constrain containers */
.k-edit-form-container .container, .k-edit-form-container textarea {
    width: 350px;

    /* Textarea needs constrained so it cannot be sized to larger than the k-edit-form-container */
    max-width: 350px;
}

/* Style the Switch control to look similar to other controls */
.km-switch
{
    height: 34px;
    margin-right: 15px;
}
.km-switch-label-on, .km-switch-label-off
{
    font-size: 14px;
    line-height: 34px;
}
.km-switch-handle
{
    background-color: #4f6f8f;
}
.km-switch-background /* Something was causing it to lose its background color when On, this restores it */
{
    background-position: 0 4em !important;
}

/* 
    Add support for long labels on KendoUI Mobile Switch widgets 
    Adapted from http://www.telerik.com/forums/long-custom-labels
*/
.long-switch .km-switch {
    width: 15em !important;
}
.long-switch .km-switch-background {
    background-position: 0 4em !important;
    width: 19em;
}
.long-switch .km-switch-label-on,
.long-switch .km-switch-label-off {
    white-space: nowrap;
}
.long-switch .km-switch-label-off {
    left:35px;
}
.long-switch .km-switch-label-on {
    left: -410%;
}


/* **************** MOBILE VIEW TWEAKS **************** */

/* 
    For some reason KendoUI's grid's mobile style conflicts with its normal style
    in a few places, producing visual inconsistencies.  This fixes that.
*/
.km-pane-wrapper .k-pager-numbers
{
    float: left;
}
.km-pane-wrapper .k-pager-numbers .k-link, .km-pane-wrapper .k-pager-numbers .k-state-selected, .km-pane-wrapper .k-pager-wrap>.k-link
{
    border-radius: 0;
}
/* 
    KendoUI hides some types of form elements in mobile popup editor windows by giving them the same background-color as the window.
    This causes the user to have to hunt-and-peck.  Compounding the misery, they're way off to the side.
*/
.km-pane-wrapper .km-pane .k-mobile-list input:not([type="checkbox"]):not([type="radio"]), .km-pane-wrapper .km-pane .k-mobile-list select:not([multiple]), .km-pane-wrapper .km-pane .k-mobile-list textarea, .km-pane-wrapper .k-mobile-list .k-widget, .km-pane-wrapper .k-edit-field > *:not([type="checkbox"]):not([type="radio"]):not(.k-button) {
    background-color: white;
    width: 100%;
}

/* quit messing with  my scrollz */
.km-content{
    /*flex: none !important;*/
}

/* 
    Drop-down lists are taller than all other form elements in mobile view and overlap the next line some.
    For now, just fix the overlap.  TODO: Fix the height
*/
.km-pane-wrapper .k-dropdown{
    margin-bottom:1px !important;
}
/* Similarly, the distance between one form element and the next one's label is less than the distance between a form element and its own label.  Fix that. */
.km-pane-wrapper .control-label{
    margin-top: 6px;
}

/* 
    Maybe KendoUI assumes that switch controls will only be within absolutely-positioned controls?
    Without removing the top:50% style, all switches will be behind other controls on long forms.
*/
.km-pane-wrapper .km-switch {
    top: auto;
}