/*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%;
}

/*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*/
  }
  
}

/*2291
  primary button style*/
.btn-primary {
  color: #ffffff;
  border-color: #569629;
  background: #78b842; /* Old browsers */
  background: -moz-linear-gradient(top,  #78b842 0%, #ccff99 2%, #78b842 4%, #569629 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#78b842), color-stop(2%,#ccff99), color-stop(4%,#78b842), color-stop(100%,#569629)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #78b842 0%,#ccff99 2%,#78b842 4%,#569629 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #78b842 0%,#ccff99 2%,#78b842 4%,#569629 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #78b842 0%,#ccff99 2%,#78b842 4%,#569629 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #78b842 0%,#ccff99 2%,#78b842 4%,#569629 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78b842', endColorstr='#569629',GradientType=0 ); /* IE6-9 */

}

/*4280
 *Used for branding bar, primary nav and child nav*/
.navbar {
    min-height: 44px; /*50px*/
    margin-bottom: 0; /*20px*/
    z-index: 1; /*custom*/
   
}

/*4307
 *Used for branding bar, primary nav and child nav*/
@media (min-width: 768px) {
  .navbar {
    border-radius: 0px; 
  }
}

/*4642
 *theme override for main-navigation*/
.navbar-default {
    background-color: #6699ff;
    border-color: #6699ff;
}

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

/*4665
 *theme override for main-navigation*/
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #6293F3;
}
/*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;
}


/*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 #66cc33; 
}

/*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, web site title and tagline*/
.home-link {
    display: block;
    overflow: hidden;
    padding: 5px 0;
}

/*.header a-tag linking to home page which contains logo, web site title and tagline
 *adjusts .header size on tablet*/
@media (min-width: 480px) {
    .home-link {
        height: 100px; 
        padding: 15px 0;
    }
}

/*.header a-tag linking to home page which contains logo, web site title and tagline
 *adjusts .header size on desktop*/
@media (min-width: 768px) {
    .home-link {
        height: 130px; 
        padding: 30px 0 15px 0;
    }
}

/*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 {
    background-color: #eee;
   
}

/*.header child which holds background image for tablet and desktop*/
@media (min-width: 480px) {
    .header .header-background {
        background: url(../images/bannerLeft.png) no-repeat #fff;
        /*url(../images/header-background.jpg) no-repeat #fff*/
    }
}



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

/*.header child. page web site title 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: 14px;
    display: block;
    margin-top: -5px;
    margin-left: 50px;
    
}

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

    }
} 

 /*.header logo*/
.logo {
    max-height: 80px;
    max-width: 80px;
    margin-right: 10px;
    
}

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


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

         
   /*Horizontal****************************************/
   
   .mainnav-horizontal {
        margin: 7.5px -15px 0;
        border: none;
        background-color: transparent;
    }

    /*main navigation on desktop*/
    @media (min-width: 768px) {
        .mainnav-horizontal {
            margin: 0;
            
        }

        .mainnav-horizontal .container {
            background-color: #006699;
        }

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

        .mainnav-horizontal .navbar-nav li a {
            padding-top: 20px;
            padding-bottom: 20px;
        }
            
    }

    /*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 toggle button - fontawesome chevron*/
    .expand-children {
        padding: 0 20px;
        height: 46px;
        position: absolute;
        right: 0;
        top: 0;
        background: transparent;
        border: none;
        border: 1px solid transparent;
        font-size: 26px;
        line-height: 46px;
        color: #fff;
  
    }

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

    /*expand toggle button hover - fontawesome chevron*/  
    .expand-children:hover {
        cursor: pointer;
    }

    /*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; 
    background-color: #6699ff;
    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; 
    background-color: #6699ff; 
   -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: 0 -15px 0 0;
    /*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: 11px; 
    padding-bottom: 11px;
  }

/*SOM Branding Bar - Theme*/

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

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


/*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;
    }
}

/*
.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;
}