/* If you plan on using affixed states, you need to include these in your CSS */
body.navbar-affixed-top { padding-top: 70px; }
body.navbar-affixed-bottom { padding-bottom: 70px; }
/* Highlight class for selected screen */
.navbar .nav .highlighted{ 
    color:#FFF000;
    font-size:1.35em;
    padding-top:13px;
}

/* Bootstrap relies on HREF property of the A tag to be present to display the correct cursor but since we're using ng-click we need to have the following CSS */
.navbar a { cursor: pointer; }

.navbar {
    background:     #438EB9;
}

/* Adjust Menu text color, (Garamond) font-family, (1.5em) font-size  */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a {
    color:          white;                        
    font-size:      1.25em;
}
/* Adjust Menu colors - Normal */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter {
    color:          lightgray;
    text-shadow:    none;
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter { 
    color:          white;                      
    text-shadow:    none;
}
/* Adjust Menu colors - Active */
.navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter, 
.navbar .nav > li.current-menu-ancestor > a:first-letter {
    color:          blue;
    text-shadow:    none;
}

/* Adjust dropdown Menu items text color & background */
.dropdown-menu > li > a {
    color:          blue;
    background:     white;
}

/* Remove the Hover/Focus Colors  */
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, 
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
    color:          #5A5A5A;
}

.navbar .brand {
    color:  white;
}
.header-placeholder {
    color:  white;
    height: 50px;
}

@media (max-width: 767px) {

    .visible-xs.collapse.in {
        display: block!important;
    }
    .visible-xs.collapse {
        display: none!important;
    }

}

.navbar .collapse {
    border-top: 1px solid #1897C6;
    margin-left: -15px;
    margin-right: -15px;
    padding-right: 15px;
    padding-left: 15px;
}
/* title */
.navbar-brand {
    color: #777;
}
.navbar-brand:hover,
.navbar-brand:focus {
    color: #5E5E5E;
}

form[role=search], form[role=search]:before, form[role=search]:after {
    border: 0;
    box-shadow: none;
}
form[role=search] button, form[role=search] input { 
    margin: 0; 
    border-radius: 0px;
    border: 0;
}
form[role=search] input {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: auto;
}
form[role=search] button {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border: 0;
    border-left: 1px solid #ccc;
}
form[role=search] .form-group {
    border-radius: 4px;
    border: 1px solid #ccc;
    white-space: nowrap;
    box-shadow: 0 3px 6px rgba(0,0,0,.175);
}

@media (max-width: 767px){
    form[role=search] input {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    form[role=search] button {
        display: none;
    }
    .navbar-nav .open .dropdown-menu {
        border-radius: 0;
        box-shadow: inset 0 3px 6px rgba(0,0,0,.175), inset 0 -3px 6px rgba(0,0,0,.175);
    }
    .navbar-inverse .open .dropdown-menu {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
    }
}
img {
    max-width: 100%;
    height: auto;
}