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


/************************************************
Change font of site to match Earthdata's font
************************************************/
body {
/*  font-family: 'Open Sans', sans-serif;*/
    font-family: 'Arial', sans-serif;
  font-size: 14px;
}


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


/************************************************
Styling the navbar (logo bar + top menu) like
Earthdata's: unlike theirs we have 2 rows here
************************************************/
/* As part of updating font size to 14px vs 12px,
update the top navbar to always be 100% of available
screen width in order to better address resizing 
issues */
body > nav > div.container {
  width: 100%;
}

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

/* Menu bar is almost black */
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;
}


/*********************************************
When the screen gets really narrow, modify the
top menu to prevent it from taking up 2 lines
**********************************************/
@media (max-width: 1000px) {
  /* 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: 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: 1015px){
  #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: 825px) {
  .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) */
@media (min-width: 826px) {
  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;
  }
}




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


/************************************************
Styling the 'hero' area like Earthdata's
************************************************/
/* First, style the jumbotron and blur bar */ 
/* jumbotron background image (its height is controlled below) */
div.jumbotron {
  background-repeat: no-repeat; 
  background-position: center; /*left top; right top;*/
  background-color: black;

/* THIS IMAGE IS 2787 X 575 px.
New images for this area should be the same
height, otherwise adjustments to .explore and
.blur-bar might be needed below. */
  background-image: url('/home/sites/all/themes/hydrology/images/banners/aug2018_lightning_fatalities.png');
  background-size: /*auto auto;*/ 100%;

  /* Gets rid of whitespace under menu bar */
  padding-top: 1px; 
}

/**************************************************
These styles are for the carousel
**************************************************/
/* Make the captions more prominent */ 
.carousel-caption {
	text-shadow: 1px 1px 2px black, 0 0 20px black, 0 0 5px darkblue;
}

/* Now do the points/dots like Earthdata.
They are actually 100% CSS, except for a keyboard-event
JS snippet I need to add later (!!!).
#### DO NOT REARRANGE THE ORDER OF THESE POINT/DOT ITEMS #### */

/* You MUST EXPLICITLY set the height of the exploration div 
inside the jumbotron. This is where the points-of-interest 
(poi) dots live.  This is why you care about the dimensions
of the jumbotron background image. */
.explore {
  height: 250px;
}

/* Position the div holding the dots and their matching
callout text blurbs */
.explore > .point {
  position: absolute;

/* This controls where you want the dots to appear 
on the map. (!!!) Earthdata uses "right" and "bottom"
classes for their dots. I'm not 100% clear how or why
this is useful by itself on .point */
  margin: 60px 0 0 -16px;   
  padding: 0; 
}


/* Now style the dots */
.explore .point .marker {
  /* Make them little 2-toned circles -- secret is the
  border radius; we style the whole div to be a dot! 
  Make the whole div 32x32 with a 16 border*/
  border-radius: 16px;
  width: 32px;
  height: 32px;

  /* Choose colors for the dot and its border */
  background-color: rgb(11, 238, 255); /*rgb(32, 204, 110);*/

  /* Make the dot in the middle visible */
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  /* Set up the border of the dot */
  border: solid 10.66667px rgba(51, 32, 231, 0.5); /*rgba(32, 204, 110, 0.6);*/

  /* Make the dot show up on top of background, etc. elements.
  You must ALSO give it a POSITION for this to work. */
  z-index: 999;
  position: relative;
}


/* All this does is make the callout have a round "hump"
in its border that covers over the dot, so it looks fancy. 
When you move the dot(s) around, you'll have to adjust
this. */
.explore .point .callout:before {
  content: " ";
  position: absolute;
  left: -24px;
  top: 8px;
  width: 24px;
  height: 48px; 
  background: rgba(0, 0, 0, 0.6);
  border-radius: 24px 0 0 24px; 
}

/* Make the callout have pretty padding inside it */
.explore .point .callout div.callout-content, 
.explore .point .callout div.data-options {
  padding: 10px 10px 10px 32px; 
}

/* Override the huge font settings inherited from .jumbotron */
.callout-content p {
  font-size: 1.3em;
}
.callout-title {
  font-size: 2em;
}

/* Prettify the bottom data section of the callouts */
.explore .point .data-options {
  background-color: rgba(0, 0, 0, 0.75);
  padding: .2em 1em;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px; 
}


/* Make the link in the bottom of the callout
a hard to read color, just like Earthdata! */
.explore .point .data-options a {
  color: #C6C6C6; 
}

/* Align The callout's  external link icon,
which is given to it by its "ext" class. */
.explore .point .data-options i {
  margin-right: .4em; 
}


/* When the callout appears,
make it stick around when moused over */
.explore .point:hover .callout, 
.explore .point:active .callout, 
.explore .point.visible div.callout {
  display: block;
  visibility: visible;
  opacity: 1; 
}

/* When you hover on the dot, show the callout. */
div.marker:hover + div.callout {
  visibility: visible;
}

/* NOW do the callout text/box for the dots. */
.explore .point .callout {
  /* Starts off hidden */
  visibility: hidden;

  /* Position and size it nicely */
  width: 320px;
  position: absolute;
  top: -50%;
  left: 16px;
  padding: 0;
  
  /* Make it look good */
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75em;
  
  /* We want it in front of the  background elements
  but not all of them (not, e.g., the poi dot) */
  z-index: 1;
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out; 
}


.explore .point:hover .marker:before, 
.explore .point:active .marker:before, 
.explore .point.visible .marker:before {
  content: " ";
  margin: 0;
  padding: 0; 
}

/* This pushes the blur bar down inside the jumbotron.
This is how you control the height of the jumbotron -- it's 
not controlled by the height of its background image.. 
Adding more top padding will make it taller. */
.jumbotron {
  padding-bottom: 0;
  padding-top: 200px;
}

/* Set up the blur bar */
.blur-selection {
  background: rgba(50,50,50,0.6);
  padding: 1em 0;
  margin: 0;
  position: relative;
  text-align: center;
}

/* Put labels on the blur bar */
.blur-bar-label {
  color: white;
  text-transform: uppercase;
  margin-bottom: 1em;
  display: block;
}

/* Make the ul holding the li items in the blur bar
stretch to take all the width it can (emulate justified) */
ul.blur-bar-icons {
  width: 100%;
}

/* Display individual items on the blur bar */
.blur-bar li {
  display: inline-block;
  margin: 0;
  opacity: 0.65;
  vertical-align: top;
  font-size: 0.8em;
  width: 30%;
}

/* Make blur bar link text white and 
don't underline it */
.blur-bar li a {
  color: #fff;
  text-decoration: none;
}

/* Make blur bar link text pretty */
.blur-icon-words {
  text-transform: uppercase;
  margin: 0;
  font-weight: normal;
  font-size: 1em;
  color: #fff;
}

/* Do the cool fade-in effect on the icons and words */
.blur-bar-icon:hover {
  color: white;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: opacity 0.4s linear;
  -moz-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;
}

/* Make the images slightly smaller, like Earthdata's,
but retain aspect ratio. */
.blur-bar-icons > li > a > img {
  height: 80px;
  width: auto;
}



/*********************************************
Do very specific styling to control the appearance
of the blur bar icons. Works with the "pipe" image
div TURNED OFF in page--front.tpl.php.
*********************************************/
#blur-bar-science-row,
#blur-bar-data-row {
  margin: 0 auto;
}

#blur-bar-science-row ul,
#blur-bar-data-row ul {
  display: inline-block;
  text-align: center;
}

#blur-bar-science-row ul,
#blur-bar-data-row ul {
  padding-left: 0;
}



/**********************************************
Style the welcome blurb/image on home page
***********************************************/
/* Make the spacing and text prettier */
#welcome {
  font-size: 1.3em;
  margin:0 auto 30px;
}

/* Make the h1 like Earthdata's */
#welcome h1 {
  color: #95a5a6;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.7em;
  margin-bottom: 1em;
}

/* Make the GHRC logo image resize to fit into 
its assigned 6 columns */
#welcome-logo img {
  max-width: 100%;
}



/***********************************************
Style the feature grid
************************************************/
.eui-feature-grid-row__image {
  color: #000;
  height: 250px;
  vertical-align: top;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.eui-feature-grid-row__image .story {
  text-align: center;
  position: relative;
  display: table-cell;
  width: 33.33333%;
}


/***********************************************
Style the feature grid -- we borrowed it from
Earthdata but then we had to adapt it for 
Bootstrap. There are 2 thing going on here: a 
set of initial/default styles, and a set of 
altered styles for when the DIV containing the 
links, icons, descriptions, etc., is hovered on.
The @media syntax is used to change the CSS between
the hover option we want for desktop/laptop users
and smartphone/tablet users.
***********************************************/
/* INITIAL/DEFAULT styling for the DIV. */
.feature-item {
  height: 250px;
  text-align: center;
}

/* INITIAL/DEFAULT styling for the links */
.feature-item-link {
  color: white;
  text-decoration: none;  
  font-weight: bold;
  background: #323232;
  opacity: 0.8;

  /* Make this go to bottom of feature item and stretch
  all the way across it to look pretty */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 100px;  
  padding: 1.2em 1.8em 0;

  /* Without this line, feature items with a description
  that ends up being taller than 100px won't return to 
  their proper height when you stop hovering on them. */
  max-height: 100px;
}

/* INITIAL/DEFAULT sytling for the little blue icon */
.feature-item-link > span > img {
  display: block;
  margin: -40px auto 10px;
}

/* INITIAL/DEFAULT styling for the descriptions */
.feature-item-description {
  visibility: hidden;
}

/* WHEN HOVERING ON THE DIV, Style the links.... */
.feature-item:hover .feature-item-link {
  text-decoration: none;
  color: white;

  /* Make the link/description part as tall as the 
  whole DIV -- this is the "expands upward" effect */
  min-height: 250px;
  -webkit-transition: min-height 0.7s ease;
  -moz-transition: min-height 0.7s ease;
  transition: min-height 0.7s ease;
}
 
  /* WHEN HOVERING ON THE DIV, Style the little blue icons...
  make them slide "down into" the black area by increasing
  their top margin, but do this graudally so it's pretty. */
  .feature-item:hover .feature-item-link > span > img {
    margin-top: 0;
    -webkit-transition: margin-top 0.7s ease;
    -moz-transition: margin-top 0.7s ease;
    transition: margin-top 0.7s ease;
  }

  /* WHEN HOVERING ON THE DIV, style the descriptions... */
  .feature-item:hover .feature-item-description {
    visibility: visible;
  }
}/* @media (min-width: 800px) */



@media (max-width: 799px) {
  /* INITIAL/DEFAULT styling for the DIV. */
  .feature-item {
    height: 250px;
    text-align: center;
  }

  /* INITIAL/DEFAULT styling for the links */
  .feature-item-link {
    color: white;
    text-decoration: none;  
    font-weight: bold;
    background: #323232;
    opacity: 0.8;

    /* Make this go to bottom of feature item and stretch
    all the way across it to look pretty */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 100px;  
    padding: 1.2em 1.8em 0;

    /* Without this line, feature items with a description
    that ends up being taller than 100px won't return to 
    their proper height when you stop hovering on them. */
    max-height: 100px;
  }

  /* INITIAL/DEFAULT sytling for the little blue icon */
  .feature-item-link > span > img {
    display: block;
    margin: -40px auto 10px;
  }


  /* INITIAL/DEFAULT styling for the descriptions */
  .feature-item-description {
    visibility: hidden;
  }

  /* WHEN HOVERING ON THE DIV, Style the links.... */
  .feature-item .feature-item-link {
    text-decoration: none;
    color: white;

    /* Make the link/description part as tall as the 
    whole DIV -- this is the "expands upward" effect */
    min-height: 250px;
    -webkit-transition: min-height 0.7s ease;
    -moz-transition: min-height 0.7s ease;
    transition: min-height 0.7s ease;
  }
 
  /* WHEN HOVERING ON THE DIV, Style the little blue icons...
  make them slide "down into" the black area by increasing
  their top margin, but do this graudally so it's pretty. */
  .feature-item .feature-item-link > span > img {
    margin-top: 0;
    -webkit-transition: margin-top 0.7s ease;
    -moz-transition: margin-top 0.7s ease;
    transition: margin-top 0.7s ease;
  }

  /* WHEN HOVERING ON THE DIV, style the descriptions... */
  .feature-item .feature-item-description {
    visibility: visible;
  }
} /* @media (max-width: 799px) */




/***********************************************
Now we add (more) special @media conditions to handle
the "blur bar" contents, which look AWFUL on smaller
screens without these adjustments.
**********************************************/
@media (max-width:991px) {
  /* Get rid of the vertical pipe -- this is the
  MOST important thing you can do here */
  #blur-bar-vertical-line > img{
    display: none;
  }

  /* The next several items are because we 
  need all available horizontal space! */
  section.blur-selection .container,
  section.blur-selection .container .row > div,
  section.blur-selection .container .row > div ul {
    margin-left: 0;
    margin-right: 0;  
    padding-left: 0;
    padding-right: 0;
  }

  /* More space */
  section.blur-selection.container {
    margin:0;
  }
}


/************************************************
Style the blur bar icons on TEENY TINY screens
************************************************/
@media (max-width: 430px) {
  li.blur-bar-icon {
    padding: 0;
    margin: 0;
    width:30%;
  }
}



/************************************************
Style the home page's News & Events section
************************************************/
/* Make new news section label pretty */
#front-news-header {
  text-transform: uppercase;
  color: #95a5a6;
  font-weight: bold;
  text-align: center;
  margin: 50px auto;
}

/* Make the ampersand lighter/not bold, like Earthdata's */
#front-news-header.light-weight-font {
  font-weight: light;
  color: #C6C6C6
}

/* Now put a nice  margin under the whole news area */
.view-front-news-table {
  margin-bottom: 3em;
}

/* Add spacing between rows */
..view-front-news-table > div.row > div {
  margin-top: 2em;
}

/* Alter appearance of links of news items
on front page to be gray like Earthdata */
div.front-page-news-item-title > span > a  {
  color: #95a5a6;
  text-decoration: none;
}

/* Make the h3s of the News items a bit smaller than
h3s normally are and a bit bolder...like Earthdata */
div.front-page-news-item-title > span > a > h3 {
  font-size: medium;
  font-weight: bolder;
}

/* Add pretty spacing under the "Published" date line */
.front-page-news-item-date > div {
  margin-bottom: .5em;
}

/* Make the gray list-circle icons pretty --
NOTE, THESE ARE PLACED BY CUSTOM VIEW TEMPLATE FILES --
in general, the front page news items are HEAVILY
reliant on a set of customized view template files. */
.front-page-news-decoration {
  float: left;
  margin-top: 30px;
  margin-right: 20px;
}

/* Make the text always go to the left of the icon
and never wrap under it */
.front-page-news-item-body > div { 
  margin-left:100px;
}


/************************************************
Style footer
*************************************************/
/* Style the user registration/have you used our data link just above footer */
#front-under {
  text-align: right;
  font-style: italic;
  margin: 2em auto;
  clear:both;
}

/* Earthdata blue + nice padding on bottom */
#footer {
  background-color:  #3581B3;
  padding-bottom: 1.5em;
}

/* Make links in footer white, incl. "social" icons */
#footer a {
  color: white;
}

/* Except make them gray when you hover on them */
#footer a:hover {
  color: #C6C6C6;
}

/* Touch up social icons */
#social-footer-icons {
  margin-top: 30px;
}

#social-footer-icons > a {
  text-decoration: none;
}

#social-footer-icons > a > i.fa {
  font-size: 2em;
  margin-left: 20px;
}

/* Make the links in the footer-link-col divs 1 per line */
div.footer-link-col > a {
  display: block;
  text-decoration: none;
}

/* Remove underline on the links in the footer link lists */
a.footer-link-col {
  text-decoration: none;
}

/* Make the footer UAH + ITSC logos look nice */
.footer-logo {
  /*min-width: 200px;*/
  max-height: 80px;
  margin-top: 3em;
  width: auto;
}

/* Make footer's tagline pretty */
#footer-tagline > p {
  color: white;
  padding-bottom: 20px;
}

#footer-tagline > a {
  margin-left: 20px;
  text-decoration: none;
}

#rahul-span {
  color: white;
}

#rahul-span > a {
  margin-left: 0;
  text-decoration: none;
}


/************************************************
Multi-use
************************************************/
/* Center contents of a row -- currently used in footer social media */
.row-center {
  text-align: center;
}

/* A paragraph that precedes a list of links -- currently used in footer */
p.link-list-heading {
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 2em;
  font-size: 1.7em;
}

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



/***********************************************
Small screens only
***********************************************/
/* We make this adjustment
because we want to build up a gutter for the
kayako feedback button on smaller screens -- we
cause the footer to become padded at a wider size
than the rest of the content (see below) */
@media only screen and (max-width: 991px) {
  #footer {
    padding-left: 20px;
  }
}

/* As above, we make this adjustment 
because we want to build up a gutter for the
kayako feedback button on smaller screens */
@media only screen and (max-width: 835px) {
  /* Add padding to main content but not nav, etc. at top;
  also add to special front-page-only sections */
  .main-container,
  #front-page-welcome,
  #front-page-news
  {
    padding-left: 35px;
  }
}



/***********************************************
Poster view per GHRC-4285, April 12, 2019
***********************************************/
/* Align title links in center and give them nice
vertical padding. */
.posterblock {
  text-align: center;
}

.posterblock .postertitle {
  display:block;
  padding-top: 20px;
}

/* Provide extra vertical padding at resolutions where
we move from 3 columns to 1 column of content */
@media (max-width: 768px) { 
  .posterblock .postertitle {
    padding-top: 50px;
  }
}

/* Center the images */
.posterblock img {
  margin-left: auto;
  margin-right: auto;
}


/************************************
Accordion Component
*************************************/
/* Allows a user to expand and collapse content. Can be used to make viewing search results more user friendly.
From the Earthdata UI/UX page: https://cdn.earthdata.nasa.gov/eui/latest/docs/eui/index.html#components
default	| Accordion displays with all content open
.is-closed	| When added to the ".accordion" container, this will hide the accordion body content.*/
.accordion {
  background-color: #edf0f0;
  color: #1f70a3;
  font-size: 1.8em;
  font-weight: 200;
  text-decoration: none;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: 1px solid #cccccc;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) 
.active, .accordion:hover {
  background-color: #dadddf;
}*/

/* Style the accordion panel. Note: hidden by default 
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}*/