/*Bootstrap Standard Media Query Breaks*****************
 *******************************************************

No media query for phone since styles are mobile first
Media Queries in this document

Portrait tablet to landscape and desktop 
@media (min-width: 768px) 

Desktop and Tablet All 
@media (min-width: 480px) 
    
Tablet Only 
@media (min-width: 480px) and (max-width: 767px)
    

Bootstrap media queries
// Large desktop //
@media (min-width: 1200px) { ... }

// Portrait tablet to landscape and desktop //
@media (min-width: 768px) and (max-width: 979px) { ... }

// Landscape phone to portrait tablet //
@media (max-width: 767px) { ... }

// Landscape phones and down //
@media (max-width: 480px) { ... }

*/

/*Color Guide*******************************************
 *******************************************************
    Branding Bar:        #505060 //branded color//
    Main Navigation:     #6699ff
    Child Navigation:    #505060      
*/

/*Bootstrap Sticky Footer Styles************************
 *******************************************************/

html,
body {
    /*The html and body elements cannot have any padding or margin.*/
    height: 100%;
    font-size:87.25% !important
}

/*Wrapper for page content to push down footer*/
.mainWrap {
    min-height: 100%;
    height: auto;
    /*Negative indent footer by its height*/
    margin: 0 auto -87px;
    /*Pad bottom by footer height*/
    padding: 0 0 87px;
}


/*Set the fixed height of the footer here*/
.footer {
    height: 87px;
    
}

/*Bootstrap Overrides***********************************
 *******************************************************/


/*for IE: min-width line 1095. Test for removal. max-width: 979px?
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 100% !important;
    }
}
*/

/*1258
 *override scaffolding greater than 992*/
@media (min-width: 992px) {
    /* We reset our .container at desktop to remain at 960px per our standard */
    .container {
    width: 960px; /*970px*/
    }
}

/*1421
 *override scaffolding greater than 1200*/
@media (min-width: 1200px){
  .container {
    width: 960px; /*1170px*/
  }
  
}




/*4307
 *Used for branding bar, primary nav and child nav*/

/*Custom Classes Outside of Bootstrap to Create*****
 *the Templates*************************************/


/*decorative border bottom used in .header*/
.bottom-border-accent-A {
     border-bottom: 5px solid #505060; 
}

/*decorative bottom border used in sample form legend*/
.bottom-border-accent-B {
     border-bottom: 5px solid #colorA; 
}

/*footer*/
.footer {
        
    border-top: 1px solid #abacac;
    text-align: center;
        
    }

    /*footer links parent*/
    .footer-links {
        margin: 8px 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }
    .footer-link-trail {
        display: block;
        line-height: 44px;
    }

/*footer for tablet and desktop*/
@media (min-width: 480px) {
    /*footer wrapper*/
    .footer {
        border-top: none;
        background-color: #f5f5f5;
    }
    
    /*footer links child*/
    .footer-link-trail {
        display: inline-block;
        line-height: normal;
    }
    /*footer links grandchild*/
    .footer-link {
        display: block;
        padding: 12px;
    }
}

/*branding bar global links Home, About, Contact*/
.global-links {
        margin-top: 0;
}

/*state icon used in branding bar associated with MI.gov*/
.icons-state {
    float: left;
    margin-right: 5px;
    width: 20px; 
    height: 20px;
    background-image: url(../images/icons-state.png);
}

/*header wrapper which includes logo, website title, and tagline */
.header {
    font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 20px;
}

/*.header a-tag linking to home page which contains logo, LARA and tagline*/
.home-link {
    overflow: hidden;
    padding: 5px 0;
}

/*.header a-tag linking to home page which contains logo, LARA and tagline
 *adjusts .header size on tablet*/
@media (min-width: 480px) {
    .home-link {
        height: 70px; 
        box-sizing: border-box;
        box-sizing: -webkit-border-box;
        box-sizing: -moz-border-box;
    }
}

/*.header a-tag linking to home page which contains logo, LARA and tagline
 *adjusts .header size on desktop*/


/*style for .home-link*/
.home-link,
.home-link:hover,
.home-link:visited {
        color: #333;
        text-decoration: none;     
}

/*.header child which holds bg color for banner on phone*/
.header .header-background {
   
}

/*.header child which holds background image for tablet and desktop*/
@media (min-width: 480px) {
    .header .header-background {
        
    }
}



/*.header child. page LARA font size and margin for phone*/
.header h1.siteTitle {
    /*font-size: 18px;*/
    margin: 0;
    margin-top: 5px;
    margin-left: 40px;
    
}

/*.header child. page LARA for tablet and desktop*/
@media (min-width: 480px) {
    .header h1.siteTitle {
        /*font-size: 30px;*/
        margin-top: 0;
        margin-left: 74px;
        
    }
}

/*.header child. page web site tagline font size and styles phone*/
.header .tagline {
    /*font-size: 13px;*/
    display: block;
    margin-left: 40px;
    line-height: 0.9em;
}

/*.header child. page web site tagline for tablet and desktop*/
@media (min-width: 480px) {
    .header .tagline {
        /*font-size: 17px;*/
        margin-top: 0;
        margin-left: 74px;

    }
} 

/*.header logo on tablet and desktop*/
@media (min-width: 480px) {
    .logo {
        max-height: 100%;
        max-width: 100%;
        
    
    }
}




/*SOM Branding Bar - Theme*/

/*branding bar background and border*/
.som-brandbar {
    /*BRANDED SOM COLOR*/
    background-color: #505060;
    border: 0;
}
.label-primary
{
    background: #505060;
}


/*
.column-gradient {
    // In this example, #333 is the background of our sidebar,
        #fff is the background of our main content and 
        25% is the width of our sidebar. We would need to implement 
        the standard, firefox and IE filter fallback. //
    background: -webkit-linear-gradient(left, #333 0%,#333 25%,#fff 25%,#fff 100%);
}
*/

/*screen-reader focus. when element is given focus, display block.*/
.sr-only:focus {
  display: block;
  height: auto;
  width: auto;
  position: relative;
  clip: auto;
  background: #ffff66;
  color: black;
}



/*Bootstrap Font Size Overrides*/
.lead{font-size:1.143em}
.carousel-control .glyphicons-chevron-left, .carousel-control .glyphicons-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next{font-size:2.143em;}

h1, .h1{font-size:2.571em;}
h2, .h2{font-size:2.143em;}
h3, .h3{font-size:1.714em;}
h4, .h4{font-size:1.286em;}
h5, .h5{font-size:1.000em;}
h6, .h6{font-size:0.857em;}
blockquote p{font-size:1.214em;}
pre{font-size:0.929em;}
legend{font-size:1.500em;}
output{font-size:1.000em;}
.form-control{font-size:1.000em;}
.input-sm{font-size:0.857em;}
.input-lg{font-size:1.286em;}
.btn{font-size:1.000em;}
.btn-lg{font-size:1.286em;}
.btn-sm, .btn-xs{font-size:0.857em;}
.dropdown-menu{font-size:1.000em;}
.dropdown-header{font-size:0.857em;}
.btn-group-xs > .btn{font-size:0.857em;}
.btn-group-sm > .btn{font-size:0.857em;}
.btn-group-lg > .btn{font-size:1.286em;}
.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn{font-size:1.286em;}
.input-group-sm > .form-control,.input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn{font-size:0.857em;}
.input-group-addon{font-size:1.000em;}
.input-group-addon.input-sm {font-size:0.857em;}
.input-group-addon.input-lg{font-size:1.286em;}
.navbar-brand{font-size:1.286em;}
.pagination-lg > li > a, .pagination-lg > li > span{font-size:1.286em;}
.pagination-sm > li > a, .pagination-sm > li > span{font-size:0.857em;}
.badge{font-size:0.857em;}
.jumbotron{font-size:1.500em;}
.jumbotron h1{font-size:4.500em;}
.progress-bar{font-size:0.857em;}
.panel-title{font-size:1.143em;}
.close{font-size:1.500em;}
.tooltip{font-size:0.857em;}
.popover-title{font-size:1.000em;}
.carousel-control{font-size:1.429em;}
.header h1.siteTitle{font-size:1.286em;}
@media (min-width: 480px) {
    .header h1.siteTitle {
        font-size: 2.143em;
    }
}
.header .tagline {
    font-size: 0.929em;
}
@media (min-width: 480px) {
    .header .tagline {
        font-size: 1.214em;
    }
} 
.expand-children {font-size:1.857em;}


HORIZONTAL AND VERTICAL NAVIGATION
*/
/*bradning bar link text color*/
.som-brandbar .navbar-nav > li > a {
  color: white;
}

.navbar-default .navbar-nav > li > a {
    border-right: 1px solid #ccc;
}
/*branding bar navbar-nav borders*/
.som-brandbar .navbar-nav > li > a {
    border: 1px dotted transparent;
}  

/*branding bar navbar-nav border on hover*/
.som-brandbar .navbar-nav > li > a:hover {
    border: 1px dotted #99ccff;
} 
     
/*branding bar navbar-nav active state*/
.som-brandbar .navbar-nav > .active > a,
.som-brandbar .navbar-nav > .active > a:hover,
.som-brandbar .navbar-nav > .active > a:focus {
    background-color: #3366cc;
}

/*branding bar desktop active state*/
@media (min-width: 768px) {
    /*branding bar active state on desktop*/
    .som-brandbar .navbar-nav > .active > a,
    .som-brandbar .navbar-nav > .active > a:hover,
    .som-brandbar .navbar-nav > .active > a:focus {
        background-color: #404050;
    }
}

/*branding bar toggle button on tablet and phone - borders*/
.som-brandbar .navbar-toggle {
  border-color: #999999;
}

/*branding bar toggle button on tablet and phone - hover */
.som-brandbar .navbar-toggle:hover {
  /*background-color: #333333;*/
  background-color: #6699ff;
}

/*branding bar toggle menu on tablet and phone - border bottom*/
.som-brandbar .navbar-collapse li a {
    border-bottom: 1px solid #abacac;
}

/*brandign bar toggle menu on desktop - remove border bottom*/
@media (min-width: 768px) {
 .som-brandbar .navbar-collapse li a {
    border-bottom: 1px solid transparent;
    }
}
/*4280
 *Used for branding bar, primary nav and child nav*/
.navbar {
    min-height: 44px; /*50px*/
    margin-bottom: 0; /*20px*/
    z-index: 1; /*custom*/
   
}
@media (min-width: 768px) {
    .navbar {
        border-radius: 0px; 
    }

    /*.header a-tag linking to home page which contains logo, LARA and tagline
    *adjusts .header size on desktop*/
    .home-link {
        height: 130px; 
        padding: 30px 0 15px 0;
    }

    /*main navigation on desktop*/
    .mainnav-horizontal {
        margin: 0;          
    }



    .mainnav-horizontal .navbar-nav {
        float: left;
    }

    .mainnav-horizontal .navbar-nav li a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    /*hide elements on desktop for horizontal */
    .mainnav-horizontal .child-nav {
        display: none;
        /*  Removed do to keyboard navigation
        absolute position fixes the width: 0 rendering issue in Safari 6.0.5
        width: 0;
        position: absolute;   
    */
    }
    /*reset padding right for .mainnav-horizontal on desktop*/
    .mainnav-horizontal .expands .expand-title {
        padding-right: 15px;
    }
    /*Wrapper for MI.gov, Login, and mobile menu toggle 
    *Positions MI.gov and Login in branding bar to the right for Desktop*/
    .som-brandbar .navbar-header {
        float: right; 
        display: table; /*for chrome stacking children on pageload*/
    }
    /*hide .expand-child inside of .mainnav-horizontal for desktop*/
    .mainnav-horizontal .expand-children {
        display: none;
        border-left: 1px solid #abacac;
    }
    /*Floating branding bar's internal .navbar-nav's right for desktop.
    *This includes .global-links (Home, About, Contact)
    *and .navbar-right (Login and MI.gov) */
    .som-brandbar .navbar-nav {
        float: right;
    }
    /*branding bar active state on desktop*/
    .som-brandbar .navbar-nav > .active > a,
    .som-brandbar .navbar-nav > .active > a:hover,
    .som-brandbar .navbar-nav > .active > a:focus {
        background-color: #404050;
    }
    .som-brandbar .navbar-collapse {
        background-color: transparent;
        padding: 0 0 0 30px;
    }
    .som-brandbar .navbar-collapse li a {
        border-bottom: 1px solid transparent;
    }
}



/*4661
 *theme override for main-navigation*/
.navbar-default .navbar-nav > li > a
{
    color: #444444;
}

/*4665
 *theme override for main-navigation*/
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #404050;
}
/*4671
 *theme override for main-navigation*/
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #3366cc;
}

/*Navigation********************************************/

         
   /*Horizontal****************************************/
   
   .mainnav-horizontal {
        border: none;
        background-color: #f8f8f8;
    }



    /*Vertical and Child left**************************/
    
    /*adjust the li's to full width*/
    .mainnav-vertical .nav-stacked li,
    .child-vertical .nav-stacked li {
          width: 100%;
    }

    /*add bottom border to mainnav-vertical and child-vertical a-tags*/
    .mainnav-vertical .nav-stacked a,
    .child-vertical .nav-stacked a {
          border-bottom: 1px dotted #abacac;
          padding: 12px 15px;
    }

    /*Child Nav All (Child and Grandchild)***************/

    /*child and grand child navigation for phone and tablet */
    .child-nav {
        margin: 0;
        display: none;
        /*Removed due to keyboard navigation
            height: 0;
        */
        width: auto;
        overflow: hidden;
    }
        

    /*hide elements on desktop for horizontal */
    @media (min-width: 768px) {
        .mainnav-horizontal .child-nav {
            display: none;
            /*  Removed do to keyboard navigation
                absolute position fixes the width: 0 rendering issue in Safari 6.0.5
                width: 0;
                position: absolute;   
            */
        }
    }

    /*child and grandchild navigation adjust the height to auto when open */
    .child-nav.open {
        display: block;
        /*Removed due to keyboard navigation
        height: auto;
            */
    }

    /*add custom color to a-tag for child link*/
    .child-link {
        background: #505060;
    }

    /*background color for expanded element*/
    .expanded {
        background-color: #3366cc;
    }

    /*add padding to the right to place toggle icon*/
    .mainnav-vertical .expands .expand-title,
    .child-vertical .expands .expand-title {
        padding-right: 65px;
    
    } 

    /*reset padding right for .mainnav-horizontal on desktop*/
    @media (min-width: 768px) {
        .mainnav-horizontal .expands .expand-title {
            padding-right: 15px;
        }
    }

    .expand-children:focus {
        border: 1px dotted #abacac;
        
    }



    /*hide .expand-child inside of .mainnav-horizontal for desktop*/
    @media (min-width: 768px) {
        .mainnav-horizontal .expand-children {
            display: none;
            border-left: 1px solid #abacac;
        }
    }

    /*bacground color for child-vertical and child-vertical expanded element*/
    .child-vertical, .child-vertical .expanded {
        background-color: #505060;
        color: #fff;
    }

    .child-vertical {
        border: 1px solid #484853;
    } 



/*SOM Branding Bar**************************************/
 

/*Wrapper for MI.gov, Login, and mobile menu toggle 
 *Positions MI.gov and Login in branding bar to the right for Desktop*/
@media (min-width: 768px) {
    .som-brandbar .navbar-header {
        float: right; 
        display: table; /*for chrome stacking children on pageload*/
    }
}

/*Branding bar global links: Home, About, Contact
 *Mobile will append main-navigation to .navbar-collapse.global in som-custom.js */
.som-brandbar .navbar-collapse {
    max-height: none; 
    border-top: 0; 
    padding: 0 30px; 
    float: left;
}

/*When navbar-toggle (Home, About, Contact) is shown on Desktop make bg transparent*/
@media (min-width: 768px) {
    .som-brandbar .navbar-collapse {
        background-color: transparent;
        padding: 0 0 0 30px;
    }
}

/*Branding bar global links: Home, About, Contact
 *For small and medium devices.
 *som-custom.js appends main-navigation to .navbar-collapse.global-links */
@media (max-width: 767px) {
    .som-brandbar .navbar-collapse {
        position: absolute; 
        top: 44px; 
        left: 0; 
        right: 0; 
        width: 100%; 
    }
}

/*remove bottom margin on .mainnav .navbar-nav when injected into branding bar tablet and phone*/
.som-brandbar .mainnav .navbar-nav {
    margin-bottom: 0;
}

/*Branding bar links
 *.navbar-header: wrapper for MI.gov, Login, and mobile menu toggle 
 *.navbar-collapse branding bar global links: Home, About, Contact  */
.som-brandbar .navbar-header,
.som-brandbar .navbar-collapse {
  margin-right: 0; 
  margin-left: 0; 
}


/*Branding bar toggle for small devices
 *Resets to extend ui .navbar-toggle to .navbar-collapse
 *Active state of .navbar-toggle*/
.som-brandbar .navbar-header .navbar-toggle,
.som-brandbar .navbar-header .navbar-toggle:focus {
    float: left; 
    margin: 0 ;
    margin-top: 2px; 
    padding-bottom: 18px; 
    border-bottom: none;  
   -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}


/*Adding .navbar-header to increase specifity
 *Using .collaped to apply .navbar-toggle classes
 *to re-apply 'no-active' default state*/
.som-brandbar .navbar-header .navbar-toggle.collapsed {
    background-color: transparent; 
    padding: 12px 10px;
    border-bottom: 1px solid #999999; 
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    /*44px height: 14px inner + (12px padd * 2) + (1px border * 2) + (2px mar * 2) */
}



/*.navbar-header scope for branding bar's navbar-nav 
 *selecting MI.gov and Login using .navbar-right*/
.som-brandbar .navbar-header .navbar-right {
    /*4497 .navbar-nav*/
    margin: 0px;
    /*4531 .navbar-nav*/
    float: right;
    
        
}

/*.navbar-header scope for branding bar's navbar-nav 
 *selecting MI.gov and Login using .navbar-right*/
.som-brandbar .navbar-header .navbar-right > li {
    /*custom: to align inline on phone and tablet*/
    float: left;
    }
    
/*.navbar-header scope for branding bar's navbar-nav 
 *selecting MI.gov and Login using .navbar-right
 *Lock icon on phone*/
.som-brandbar .navbar-header .navbar-right .glyphicon {
    /*custom: to align icon vertical*/
    line-height: 20px;
    }

/*Floating branding bar's internal .navbar-nav's right for desktop.
 *This includes .global-links (Home, About, Contact)
 *and .navbar-right (Login and MI.gov) */
@media (min-width: 768px) {
    .som-brandbar .navbar-nav {
        float: right;
        
    }
}

/*Decreasing the height to maintain 44px height*/
.som-brandbar .navbar-nav > li > a {
    padding-top: 21px; 
    padding-bottom: 0px;
    height:44px;
  }
.som-brandbar .navbar-nav > li > a.miGovHome {
    padding-right: 0;
    padding-left: 35px;
    background: url(../images/icons-state.png) no-repeat center left;
    background-position: 0px 5px;
}