/**********************************
Cheats:
  colors
    earthdata foooter solid blue: #3581B3 (aka rgb(53,129,179))
    earthdata light gray: #C6C6C6 (aka rgb(198,198,198))
    earthdata medium gray: #95a5a6 (aka rgb(149,165,166))
    earthdata almost-black menu bar: #303133 (aka rgb(48,49,51))
  links:
     http://www.w3schools.com/cssref/css_selectors.asp
*************************************/


/************************************************
Styling top-of-screen messages like Earthdata's
************************************************/
/* Do not put margins on top-of-screen messages */
.alert {
  margin-bottom: 0;
}

/* Logo bar is a blue like Earthdata, but don't
use the tiny image for it -- that caused a weird
line when the screen was resized. Just make it solid
blue. */
#logo-bar {
  background-color: #1F70A3;
}

/* Remove margin from logo bar and ensure search bar moves to right*/
#logo-bar .container {
  margin: 0;
  width: 100%;
}

/* Logo bar search box over to right */
#blue-search {
  float: right;
  padding-top: 8px;
}


/************************************************
Styling the navbar (logo bar + top menu) like
Earthdata's: unlike theirs we have 2 rows here
************************************************/
/* Navbar needs no bottom margin */
.navbar,
#logo-bar {
  margin-bottom: 0;
}

/* No rounded corners */
.navbar {
  border-radius: 0;
}

/* No borders please */
.navbar,
.navbar-default,
.navbar-collapse {
  border: none;
}



/* Logo bar search box over to right 
#blue-search {
  float: right;
  padding-top: 8px;
}*/

/* Logo bar is a blue like Earthdata, but don't
use the tiny image for it -- that caused a weird
line when the screen was resized. Just make it solid
Earthdata gray. */

nav.navbar {
  background-color: #303133;
}

/* Main links on Navbar are white + bold like Earthdata */
#navbar-links ul > li > a {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

/* When we click on them, their background turns black */
#navbar-links > ul > li.active a,
#navbar-links > ul > li.dropdown.open > a {
  background-color: black;
}

/* The dropdown menu's background is always black */
#navbar-links ul.dropdown-menu {
  background-color: black;
}

/* It doesn't have borders */
#navbar-links ul.dropdown-menu {
  border: none;
}

/* Override Bootstrap to make dropdown's list items
retain black background and their links turn 
gray when hovered on (like Earthdata) */
#navbar-links ul.dropdown-menu  li a:hover {
   color: #C6C6C6; 
   text-decoration: none;
   background-color: black;
} 

/* Make the "Main" (aka 2nd-level)  links in the dropdown 
menus be bold, like Earthdata */
#navbar-links ul.dropdown-menu > li.second-level-dropdown > a {
  font-weight: bold;
}

/* Remove uppercase from dropdown menu links */
#navbar-links ul.dropdown-menu > li > a {
  text-transform: initial;
}


@media (max-width: 1200px) {
  /* Get rid of extra horizontal padding on menu items */
  .nav > li > a {
    padding: 10px 10px;
  }
}

/* For absolutely positioned elements, override
Bootstrap's default "right: 0". The first 
line  here makes the "Access Data" dropdown
menu nicely rest within the browser window on small
screens instead of its left side going off the 
edge of the screen before collapsing into the 
"hamburger menu" mode */
@media  (max-width: 1200px){
  #navbar-links > ul > li:nth-child(1) > ul {
    right: auto;
  }
}

/******************************************
The role of all the following is thus:
After increasing the site's font size to 14px, we 
need to take over the logic for when Bootstrap decides
is the right time to collapse the top nav menu into
the "hamburger/mobile" version of itself. HOWEVER, we
ALSO don't want to spend time right now learning SASS 
to mess with Bootstrap CSS variables, so we manually 
code it in straight CSS here.

first, this says "Hey, in addition to your normal
collapsy-behvaior at 768px (this is part of Bootstrap SASS), 
ALSO start doing your collapsy-behavior at 825px wide
with these manual overrides." 

This is mostly taken from http://stackoverflow.com/a/37475447,
hence the lack of detailed comments. 
**********************************************/
@media (min-width: 768px) and (max-width: 1200px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  
  .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
  }

  .navbar-header {
    float: none;
  }
  
  .navbar-toggle {
    display: block;
  }
  
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }

  .navbar-collapse.collapse {
    display: none!important;
  }

  .navbar-nav {
    float: none!important;
    margin: 7.5px 50px 7.5px -15px
  }

  .navbar-nav>li {
    float: none;
  }
  
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .navbar-text {
    float: none;
    margin: 15px 0;
  }
  
  /* since 3.1.0 */
  .navbar-collapse.collapse.in { 
    display: block!important;
  }
  
  .collapsing {
    overflow: hidden!important;
  }

  /* Menu items in the dropdown 'gray zone'
  of [768,825]px now no longer have annoying
  margin */
  #navbar-links > ul {
    margin-right: 0;
  }

  /* Here we make the "black background" of the
  expanded links go all the way across the menu
  and remove the silly border at the top of the
  dropdown 'hamburger' menu. */
  #navbar-links { 
    padding-right: 0;
    border: none; 
  }
}

/* Make top menu exhibit basic hover behavior. This
is NOT foolproof -- basically, this says "as long
as the screen is wide enough that we're not already
showing the collapsed menu (aka "hamburger icon i
toggle"), allow hover events to take place on it".

THIS IS FAR FROM PERFECT -- there are multiple 
challenges inherent in correctly determining 
whether a given user has touch capability or not, 
and furthermore what to do in the case of, e.g., 
touch-enabled laptops.

But it works for our purposes here since, if your
screen is narrow enough that you see the "stacked" 
version of hte menu already, odds are you really 
don't WANT hover behavior on it since this would 
render scrolling past it hilariously impossible.
NOTE: We depart from the default width of 768px,
which is when the menu "normally" collapses here,
in order to keep this inline with the changes above
(which cause it collapse at 825px) */


/* this caused problems on th ehamburger menu when I change dht ebreak point to 1200px. 
So far I can't find anything wrong without it.-Lindsey Poppe

@media (min-width: 1200px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
	min-width: 1200px;
  }
*/


/* Make the cursor into an arrow instead of the
hand icon that means 'ooh I'm a link you can click'
when we are in potential HOVER mode over the top
menu parent items. The size constraint here means
as soon as the menu collapses we get the "hand" 
back -- this is what we want, since a collapsed
menu has no hover behavior. We do this because,
due to how Bootstrap menus work, the parent menu
items must be links but they actually go nowhere. */
  ul.nav li.dropdown > a:hover {
    cursor: default;
  }
 /* } */



/*********************************************
When the screen gets really narrow, remove the 
CITE link from the top menu to prevent the menu
from taking up 2 lines prematurely
**********************************************/
@media (max-width: 992px) {
  #navbar-links > ul > li:nth-child(8) { 
    display: none;
  }
}


/***********************************************
Our search button is green
************************************************/
.input-group-btn > button {
  background-color: #20cc6e;
  border-color: #20CC6E;
}

/*This overwrites bootstraps default breakpoint for the hamburger icon. 
We want the menu to collapse into the hamburger icon at 1200px rahter than 768px.
-Lindsey Poppe*/
@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
      
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important; 
    }
}


/*we just needed to adjus tthe default for the nested dropdown menus. So that they would follow the same guidelines above 768px.
-Lindsey Poppe*/
@media (max-width: 1300px) {
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
}

@media (min-width: 768px) {
.navbar-right .dropdown-menu {
    left: 0; 
    left: auto;
}
}

/*********************************************
When the screen gets really narrow, modify the
top menu to prevent it from taking up 2 lines
**********************************************/
@media (max-width: 992px) {
  /* Remove 'House' icon and 'CITE' and 'CONTACT' links */
  div.navbar-header >a,
  #navbar-links > ul > li:nth-child(8),
  #navbar-links > ul > li:nth-child(9) {
    display: none;
  }
}

@media (max-width: 835px) {
  /* Get rid of extra horizontal padding on menu items */
  .nav > li > a {
    padding: 10px 10px;
  }
}

/* For absolutely positioned elements, override
Bootstrap's default "right: 0". The first
line  here makes the "Access Data" dropdown
menu nicely rest within the browser window on small
screens instead of its left side going off the
edge of the screen before collapsing into the
"hamburger menu" mode */
@media  (max-width: 1200px){
  #navbar-links > ul > li:nth-child(1) > ul {
    right: auto;
  }
}

/* Make top menu exhibit basic hover behavior. This
is NOT foolproof -- basically, this says "as long
as the screen is wide enough that we're not already
showing the collapsed menu (aka "hamburger icon i
toggle"), allow hover events to take place on it".

THIS IS FAR FROM PERFECT -- there are multiple
challenges inherent in correctly determining
whether a given user has touch capability or not,
and furthermore what to do in the case of, e.g.,
touch-enabled laptops.

But it works for our purposes here since, if your
screen is narrow enough that you see the "stacked"
version of hte menu already, odds are you really
don't WANT hover behavior on it since this would
render scrolling past it hilariously impossible. */
@media (min-width: 1200px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }

/* Make the cursor into an arrow instead of the
hand icon that means 'ooh I'm a link you can click'
when we are in potential HOVER mode over the top
menu parent items. The size constraint here means
as soon as the menu collapses we get the "hand"
back -- this is what we want, since a collapsed
menu has no hover behavior. We do this because,
due to how Bootstrap menus work, the parent menu
items must be links but they actually go nowhere. */
  ul.nav li.dropdown > a:hover {
    cursor: default;
  }
}

/* Make links tagged as "ext"ernal use the tiny arrow to their right */
a.ext:after {
  content: "\f08e";
  font-family: FontAwesome;
  padding-left: 7px;
}