/* Becuase these micro article pages are ALL GRAY,
we have to make the #main-container also ALL GRAY
since we expose it as padding once we create the gutter
for the feedback button on xs screens. */
.main-container {
  background: #ECF0F1;
}

/* We also have to do this for the body */
body {
  background-color: #ECF0F1;
}

#main-content-div {
  margin-top: 0;
  border-top: none;
  box-shadow: none;
  background: #ECF0F1; 
}

.micro-article-interior-row {
  border-bottom: 2px solid black;
  margin-top: 3em;
  padding-bottom: 3em;
}

/* Nice spacing under the horiz line separator */
#micro-article-event-top {
  margin-bottom: 3em;
}

.micro-article-interior-row-no-borders {
  margin-top: 3em;
  padding-bottom: 3em;
}

.micro-item-image {
  float: left;
}

.micro-item-science-description,
.micro-item-event-description,
.micro-label {
  display: table;
  height: 1%;
}

.micro-upper-label {
  text-transform: uppercase;
  font-weight: normal;
  margin-top: 2em;
}

.micro-item-data-downloads table {
  border: 0;
  border-bottom: 5px solid black;
}

.micro-item-data-downloads > table > thead {
  border-top: 0;  
  border-bottom: 5px solid black;
}

.micro-item-data-downloads > table > thead > tr{
  border-top: 0;  
}

.micro-item-data-downloads > table > tbody> tr > td {
  border: 0;
}

.micro-item-data-downloads > table > tbody> tr  {
  border-bottom: 1px solid black;
}



#micro-article-updated img,
#micro-article-publication-updated img {
  float: left;
}

.micro-article-fake-table {
  display: table;
  height: 1%;
}



/********************************/
.micro-item {
  clear: right;
  display: table;
  height: 1%;
}

#micro-article-time {
  margin-top: 1em;
  margin-bottom: 1em;
}

#micro-article-event {
  padding-bottom: 3em;
}

.micro-article-event-type-icon,
#micro-article-time-icon,
#micro-article-spatial-icon {
  min-width: 65px;
  float: left;
  margin-right: 5%;
  clear: left;
}

/* Help vertical spacing in mobile form (and default desktop) */
#micro-article-collection,
#micro-article-get-data,
#micro-article-event-type,
#micro-article-updated,
#micro-article-publication-updated,
#micro-article-publications,
#micro-article-publication-publications,
#micro-article-author,
#micro-article-publication-author {
  margin-bottom: 3em;
}

/* Remove left padding that creates viusal 
 * oddities in mobile mode */
#micro-article-time-and-space,
#micro-article-publications,
#micro-article-publication-publications,
#micro-article-references,
#micro-article-updated,
#micro-article-publication-updated,
#micro-article-author,
#micro-article-publication-author,
#micro-article-type-footer,
#micro-article-publication-type-footer,
#micro-article-get-data {
  padding-left: 0;
}

#micro-article-spatial
{
  margin-top: 3em;
}

#micro-article-event-blurb-icon,
#micro-article-science-icon,
#micro-article-data-icon
 {
  float: left;
  margin-right: 1.5%;
}
  
#micro-article-data-icon img {
  max-width: 65px;
}

.micro-label
{
  font-size: 1.5em;

}

#micro-article-event-byline,
#ma-event-impact-byline {
  font-size: .8em;
}

/* Add blank vertical space above the word
 * "Impact" for event micro articles */
.micro-item-event-description > div:nth-child(1) {
  padding-top: 1em;
}

.micro-upper-label {
  margin-top:0;
  font-size: 1.3em;
}

#micro-article-science-description {
  margin-bottom: 20px;
  padding-left: 0;
}


#micro-article-updated img 
#micro-article-publication-updated img,{
  margin-right: 10%;
}

#micro-article-footer-ghrc {
  display: inline-block;
}

#micro-article-type-footer img,
#micro-article-publication-type-footer img {
  float: right;
}


#micro-article-data-download table,
#micro-article-datasets-used table {
  border-top: 0;
  border-bottom: 10px solid black;
  border-left: 0;
  border-right: 0;
}

#micro-article-data-download table th,
#micro-article-datasets-used table th {
  border: none;
  border-bottom: 10px solid black;
  font-size: 1.3em;
  text-align: center;
}

#micro-article-data-download table tr td,
#micro-article-datasets-used table tr td {
  border-left: 0;
  border-right: 0;
  background: white;
  padding: 10px;
}

.micro-item-reference-links > a {
  display:block;
}

.micro-article-event-label {
  display: inline-block;
}


/*********************************
Style for publication micro-articles
**********************************/
/* Blank space between title and publication citation */
#micro-article-publication-citation {
  margin-top: 2em;
}

/* Blank space between related publications label
and contents */
#micro-article-publication-publications > .micro-upper-label {
  margin-bottom: 1em;
}

/* Add space between labels and text */
#micro-article-science-description > .micro-label ,
#micro-article-publication-citation > .micro-label {
  margin-bottom:.5em;
}

/* For normal screens, scoot <li> items over 
appropriately in Key Findings */
@media (min-width: 768px) {
  #publication-body {
    margin-left: 9%;
  }
}

/* Style the "download arrow" icon for the 
Datasets Used label */
#ds-used-icon {
  vertical-align: middle;
  padding-right: 1.5%;
  display: inline-block;
}

/* Style the "Datasets Used" label itself */
#micro-article-datasets-used  > .micro-label{
  vertical-align: middle;
  display: inline;
}

/* Put some space between the label and the table;
assign the margin to the table since the label's 
inline now to make it line up with the icon. */
#micro-article-datasets-used table {
  margin-top: 2em;
}

@media (min-width: 690px) {
  #publication-citation {
    margin-left: 8%;
  }
}



/************************************
Style for small devices 
************************************/
/* On small/narrow displays, make a gutter on the left
of the screen so the feedback button stays visible
without obscuring content. */
@media only screen and (max-width: 835px) {
  #micro-article-publication-citation {
    padding-left: 15px;
  }

  #micro-article-get-data,
  #micro-article-data-download,
  #micro-article-publications,
  #micro-article-updated,
  #micro-article-author,
  #micro-article-type-footer
  {
    padding-left: 20px;
  }


  #micro-article-datasets-used,
  #micro-article-publication-publications,
  #micro-article-publication-updated,
  #micro-article-publication-author,
  #micro-article-publication-type-footer {
    padding-left: 35px;
  }

  /* A couple sections need extra padding */
  #micro-article-event-science,
  #ma-science-area {
    padding-left: 30px;
  }
}


/* Make some micro items line up nicer
as they reposition themselves vertically, which happens
at 768px as Bootstrap transitions to xs display */
@media only screen and (max-width: 768px) {
  #micro-article-time > .micro-item,
  #micro-article-publication-citation {
    padding-top: 1em;
  }

  #micro-article-spatial {
    padding-top: 1em;
  }
}


/* Make the icons associated with the event type(s),
the time, and the spatial coords of the micro article
resize politely on small screens */
@media only screen and (max-width:  500px) {
  #micro-article-time > .micro-item {
    padding-top: .5em;
  }

  #micro-article-time-icon > img,
  #micro-article-spatial-icon > img,
  .micro-article-event-type-icon > img {
    width:80%;
  }
    
  #micro-article-spatial {
    padding-top: 1em;
  }
}

#ma-science-area {
  clear: both;
}



/* Style the science area breadcrumbs!
Based on https://codyhouse.co/gem/css-breadcrumbs-and-multi-step-indicator/ */
/* -------------------------------- 
 *
 * Basic Style
 *
 * -------------------------------- */

#science-area-background {
  background-color: rgb(236, 240, 241);
}
.cd-breadcrumb{
  width: 100%;
  float:left;
  /* max-width: 768px; */
  max-width: 100%;
  padding: 0.5em 1em;
  margin: 1em auto;
  border-radius: .25em;
}
.cd-breadcrumb:after {
  content: "";
  display: table;
  clear: both;
}
.cd-breadcrumb li{
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}
.cd-breadcrumb li::after {
  /* this is the separator between items */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after {
  /* hide separator after the last item */
  display: none;
}
.cd-breadcrumb li > * {
  /* single step */
  display: inline-block;
  font-size: 1.4rem;
  color: #2c3f4c;
}
.cd-breadcrumb li.current > * {
  /* selected step */
  color: #96c03d;
}
.cd-breadcrumb.custom-separator li::after {
  /* replace the default arrow separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  vertical-align: middle;
}


@media only screen and (min-width: 768px) {
#science-area-background {
  background-color: black;
  display: inline-block;
}
  .cd-breadcrumb {
    padding: 0 ;
    text-transform: uppercase;
  }
  .cd-breadcrumb li {
    margin: 0;
  }
  .cd-breadcrumb li::after {
    margin: 0 ;
  }
  .cd-breadcrumb li > * {

  }
}

/* -------------------------------- 
 *
 * Triangle breadcrumb
 *
 * -------------------------------- */
@media only screen and (min-width: 768px) {
  .cd-breadcrumb.triangle {
    /* reset basic style */
    background-color: rgb(236,240,241);
    padding: 0;
  }
  .cd-breadcrumb.triangle li
 {
    position: relative;
    padding: 0;
    margin-left: 1px;
border-top:1px solid black;
border-bottom:1px solid black;
  }
  .cd-breadcrumb.triangle li:last-of-type {
    margin-right: 0;
  }
  .cd-breadcrumb.triangle li > * {
    position: relative;
    padding: 1em .8em 1em 2.5em;
    color: #2c3f4c;
    background-color: white;
    /* the border color is used to style its ::after pseudo-element */
    border-color: #edeff0;
  }
  .cd-breadcrumb.triangle li.current > * {
    /* selected step */
    color: #ffffff;
    background-color: #96c03d;
    border-color: #96c03d;
  }
  .cd-breadcrumb.triangle li:first-of-type > * {
    padding-left: 1.6em;
    border-radius: .25em 0 0 .25em;
  }
  .cd-breadcrumb.triangle li:last-of-type > * {
    padding-right: 1.6em;
    border-radius: 0 .25em .25em 0;
    margin-right: -3px;
  }
  .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
    /* 
 *      li > *::after is the colored triangle after each item
 *            li::after is the white separator between two items
 *                */
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    /* 48px is the height of the <span> element */
    border: 24px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
  }
  .cd-breadcrumb.triangle li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(1px);
    border-left-color: black;
    /* reset style */
    margin: 0;
  }
  .cd-breadcrumb.triangle li > *::after {
    /* this is the colored triangle after each element */
    z-index: 2;
    border-left-color: white;
  }
  .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
    /* hide the triangle after the last step */
    display: none;
  }
  .cd-breadcrumb.triangle.custom-separator li::after {
    /* reset style */
    background-image: none;
  }
  .cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
    /* 50px is the height of the <a> element */
    border-top-width: 25px;
    border-bottom-width: 25px;
  }

  @-moz-document url-prefix() {
    .cd-breadcrumb.triangle li::after,
    .cd-breadcrumb.triangle li > *::after {
      /* fix a bug on Firefix - tooth edge on css triangle */
      border-left-style: dashed;
    }
  }
}



/* Style the "atomic" icon for the 
publication micro article science area */
#science-area-icon {
  vertical-align: middle;
  padding-right: 1.5%;
  display:inline-block;
}

/* Style the label next to the "atomic"
science area icon on publication micro
articles */
#science-area-label {
  vertical-align: middle;
  display:inline;
}

/*************************************
These are styles for the instrument 
micro article type. 
*************************************/
/* Remove extra padding from the left top area */
#mai-topleft {
  padding-left: 0;
}

/* Style the labels appropriately */
.outreach-label {
  font-size: 1.5em;
  padding-bottom: 0;
  font-weight: 400;
}

/* Add vertical space around the blue chevron 
 * image and the green platform image */
#mai-blue-image,
#mai-topright {
  padding: 2em 0;
}

/* Add vertical space around the Measurements blurb */
#mai-measurements {
  padding: 2em 0;
}
/* First, remove padding on
the special icons on the left
of micro articles */
.ma-side-icon {
  padding-left: 0;
}

/* Now don't make them so
stupidly huge (at least on the
instruments pages) */
.ma-side-icon img {
  width: 50px;
}

/* Fix padding/spacing with the 
instrument micro article 
description and measurements
blurbs */
#mai-description-body,
#mai-measurements-body {
  padding-right: 0;
  padding-left: 5px;
  margin-bottom:2em;
}

/* Don't show left padding on tiny screens for instrument
micro article blurbs */
@media (max-width: 768px) {
  #mai-description-body,
  #mai-measurements-body {
    padding-left: 0;
  }
}

/* The Description, Measurements, and Key Datasets labels should be bold */
#mai-description-txt .outreach-label,
#mai-measurements-txt .outreach-label {
  font-weight: bold;
}

/* Style the word 'Applications' */
#mai-applications-label {
  clear: both;
  font-weight: bold;
  line-height: 80px;
}

/* Now style the div that holds the applications. Use flex solution from https://css-tricks.com/equidistant-objects-with-css/ */
#mai-applications {
  display: flex;
  justify-content: space-between;
  margin: 2em 0;
  background: white;
  padding: 1em 1%;
  clear: left;
}

/* This makes them look nice for up to 6 application icons. What happens after that may not be so pretty... */
.mai-app-bundle {
  width: 15%;
}

/* Center the icons in their little divs and space the words nicely below them */
.mai-app-icon img{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .5em;
}

/* Center the application labels and let them wrap by setting line height; 2 lines only please, or it may look strange */
.app-label {
  line-height: 1.2;
  text-align: center;
  font-weight: bold;
}

/* Here is where we style the "Applications"
area in special ways to make it collapse nicely
on tiny screens. Basically what we do is 
make it look like a 2 column table, which it's not,
by setting elements to float and giving them 50%
width. The inline-block display on #mai-applications
stops it from having insane wrapping issues 
with the last "n" elements, where 1 <= n <= 2
and "n"'s label(s) might have 1 or 2 lines of text...
(in other words, it makes the #mai-applications div
automagically vertically expand to fit its children) */
@media (max-width: 760px) {
  #mai-applications {
    display: inline-block;
    background: white;
  }
  div.mai-app-bundle {
    display: inline-block;
    float: left;
    width: 50%;
    padding: 0 2% 1em 2%;
    background: white;
  }
  #mai-applications-label {
    text-align: center;
    line-height: 1;  
    padding-bottom: 1em;
  }
}


/* Here we are going to style the details table 
in a special manner so that it collapses into a 
little key|value column table on tiny screens. 
Copied from http://codepen.io/geoffyuen/pen/FCBEg

NOTE: IN ORDER FOR THIS TO WORK RIGHT, THE <td>
elements must be formed with their labels included
as in this example:
<td data-th="Spatial Resolution">4 km</td> */

/* First, style the basic table itself. Set the
min-width to be the smallest size you want the 
key|value table to be. Set the border 
for the table to "none" here, and we'll set it
differently below... */
#mai-details-table {
  margin: 1em 0;
  min-width: 100px;
  border-bottom: 10px solid black;
  border-top: none;  
  border-left: none;
  border-right: none;
}

/* Jedi mind-trick: don't show the th by default--
we'll show them only at a minimum resolution */
#mai-details-table th {
  display: none;
  border: 0;
  text-align: left;
  font-weight: normal;
}

/* Center text in the table including th and td */
#mai-details-table * {
  text-align: center;
}

/* No interior cell borders. All background of body is white. */
#mai-details-table tbody * {
  border: 0;
  background: white;
}

/* Set tds as blocks to help them wrap */
#mai-details-table td {
  display: block;
  text-align: left;
}

/* Help pad table's top and bottom in tiny-mode */
#mai-details-table td:first-child {
  padding-top: .5em;
}
#mai-details-table td:last-child {
  padding-bottom: .5em;
}

/* This is where the special markup on the <td>
elements comes into play. This makes them print, 
e.g., "Spatial Resolution:" in the "key" column
in tiny mode */
#mai-details-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
  text-align: left;
  margin-right: 2%;
}

/* Here's the other part of the trick. We'll ONLY
show our "normal" table if the width's 600px or more.
Otherwise, the "default" table, which is actually the
tiny-mode key|value setup, will be shown. */
/* Don't show the ":" in front of <td> on normal sizes;
draw the top/bottom borders only on normal sizes;
center the text;
adjust padding and table display on normal sizes */
@media (min-width: 600px) {
  #mai-details-table td:before {
    display: none;
  }
  #mai-details-table {
    border-bottom: 10px solid black;
  }
  #mai-details-table th {
    border-bottom:10px solid black;
  }
  #mai-details-table th, 
  #mai-details-table td {
    text-align: center;
  }
  #mai-details-table th, #mai-details-table td {
    display: table-cell;
    padding: .5em .5em;
    text-align: center;
  }
}

/* Add the thick top border on top of the 
table in tiny mode */
@media (max-width: 599px) {
  #mai-details-table tbody tr {
    border-top: 10px solid black;
  }
}


/* Now style the Key Datasets table. 
It's very similar to the details table, but it 
has multiple rows that need interior borders, and 
the leftmost column still has its header centered 
but its content is left-aligned. It's not wide enough
that we have to use the special key|value trick 
that we used on the details table. */
#mai-datasets table {
  border-bottom: 10px solid black;
  border-top: none;  
  border-left: none;
  border-right: none;
}
#mai-datasets table th {
  border-bottom: 10px solid black;
  font-weight: normal;
}
#mai-datasets table * {
  text-align: center;
}
#mai-details-table th,
#mai-datasets th {
  border-left: none;
  border-right: none;
}
/* This is how we left align the first column contents */
#mai-datasets table th:first-of-type,
#mai-datasets table tr td:first-of-type {
  text-align:left;
}
#mai-datasets table tbody * {
  border: none;
  background: white;
}
#mai-datasets table tr {
  border-bottom: 1px solid black;
}

/* Now add some space above the relevant publications section */
#mai-publications {
  padding-top: 2em;
}

/* Style the "pre-footer" area. Give it a nice top border. */
#mai-footer {
  border-top: 1px solid black;
  padding-top: 2em;
}

/* Now touch up some images */
#mai-nasa {
  display:inline;
}
#mai-nasa img{
  max-width:12%;
  margin-right: 5%;
  padding: 0;
}
#mai-ghrc {
  max-width: 15%;
}

/* Put space here for vertical display purposes */
#micro-article-type,
#mai-updated,
#mai-author {
  margin-bottom: 2em;
}


/*****************************************************************
* K. wanted the "Accuracy" column of the micro article instruments
* table to be narrower, and for the contents of the (new)
* "Spatial Extent" column not to break
*****************************************************************/
/* Make the Accuracy column 150px wide */
#mai-details-table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(4) {
  width: 150px;
}

/* ONLY for displays 768px and wider, force the Spatial
Extent contents not to wrap */
@media {min-width: 768px) {
  #mai-details-table > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) {
    white-space: nowrap;
  }
}



/*****************************************************************
* Additonal styles for the new 'Phenomenon' Micro Article type
*****************************************************************/
/* Style the top "category" row */
.category-grid-row {
  clear:both;
}

/* The magic CSS for making the category labels center next to their images */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* Style the category area for Micro Article Phenomenon */
#ma-inst-cat {
  clear:both; 
        padding: 0 0 2em 0;
}

/* Remove the left padding for the category icons and labels (the children of the category area) */
#ma-inst-cat * {
  padding-left: 0;
}

/* Style the image captions added with jcaption module */
span.caption p {
  font-weight: bold;
  margin-top: .5em;
}

/* Style horizontal rows in the micro article phenomenon body */
.ma-inst-body-row hr {
  border: 1px solid black;
  margin: 0 0 .75em 0;
}

/* Don't put artificial (top) margins or padding on the headings inside the 
 * re-flowed table-to-grid Micro Article Phenomenon body because
 * this messes up new grid spacing (headings must align w/tops of neighbor, i.e. picture, cells) */
#ma-inst-body h1, 
#ma-inst-body h2,
#ma-inst-body h3,
#ma-inst-body h4,
#ma-inst-body h5,
#ma-inst-body h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  margin-bottom: .5em;
}

/* Only now we do actually want to make the very first incident of whatever header flavor is being used look special */
#ma-inst-body > div > div:nth-child(1) > div:nth-child(1) >   {
  font-size: 1.4em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Center the text of the Associated Phenomenon cells under their icons on screens wider than 768px (see @media override below)"*/
.ma-inst-ap-cell {
  text-align:center;
}

/* Make the text inside the associated phenomenon cells bold */
.ma-inst-ap-cell p {
  font-weight: bold;
}

/* Control vertical space under "Associated Phenomenon" item (see @media override below for xs screen change */
#ma-inst-ap .horizontal-grid-icons > *{
  margin-bottom:2em;
}

/* Place a horizontal border between the Associated Phenomenon and 
 * "preliminary text" sections of the Micro Article Phenomenon content
 * type. We'll probably have multiple headers in this area; we only want to put a border on the FIRST one. */
#ma-inst-pre-table>:first-child
{
  clear:both;
  padding-top:1em;
  border-top:2px solid black; 
}

/* Make any subsequent/non-first-child headings found in the "Pre-table blurb" bold too (but not uppercase) */
#ma-inst-pre-table>h1,
#ma-inst-pre-table>h2,
#ma-inst-pre-table>h3,
#ma-inst-pre-table>h4,
#ma-inst-pre-table>h5,
#ma-inst-pre-table>h6 {
  font-weight:bold;
}

/*Update border styling on Micro Article Phenemenon Instruments table */
#micro-article-data-download table, #micro-article-datasets-used table, 
#ma-inst-inst-table table {
  border-top: 0;
  border-bottom: 10px solid black;
  border-left: 0;
  border-right: 0;
}

/* Style the table headers of the Micro Article Phenomenon Instruments table */
#micro-article-data-download table th, #micro-article-datasets-used table th,
#ma-inst-inst-table table th {
  border: none;
  border-bottom: 10px solid black;
  font-size: 1.3em;
  text-align: center;
}

/* Style the interior table cells of the Micro Article Phenomenon Instrument table */
#micro-article-data-download table tr td, 
#micro-article-datasets-used table tr td,
#ma-inst-inst-table table tr td {
  border-left: 0;
  border-right: 0;
  background: white;
  padding: 10px;
  border-bottom: 3px solid #C6C6C6;
}

/* Put top borders on the "Research and Applications" and "Relevant publications" areas */
#ma-inst-research,
#ma-inst-publications {
  border-top: 2px solid black;
}


/* Style the heading of the "Relevant Publications" area */
#ma-inst-publications {
  margin-top:2em;
}

/* Style the labels for "Research and Application Areas", "Relevant Publications", "Pre-table blurb" */
#ma-inst-publications > .micro-upper-label,
#ma-inst-research > h1,
#ma-inst-research > h2,
#ma-inst-research > h3,
#ma-inst-research > h4,
#ma-inst-research > h5,
#ma-inst-research > h6,
#ma-inst-pre-table>:first-child  {
  font-size: 1.4em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 1em 0;
}

/* Create the special hanging indent for the Micro Article Phenomenon
 * relevant publications area's items */
#ma-inst-publications > .micro-item {
  margin-left: 25px;
}

/* Put a border between Relevant Publications and the 'pre-footer' row */
#ma-inst-publications {
  border-bottom: 2px solid black;
  margin-bottom: 2em;
}

/* On large displays only, make the Associated Phenomenon 
 * area white */
@media screen and (min-width: 768px) {
  .ma-inst-ap-cell {
    background-color: white;
    padding-top: 1em;
    padding-bottom: 1em;
    height: 160px;
  }
}


/* Control resizing of the "category" icon(s) on "sm" screens
 * by forcing a better breakpoint than default "xs" setting for 
 * 25% vs 50% icon width.
 * Also make some friendly vertical space after the words "Associated
 * Phenomenon" in the formerly-horizontal icon table on smaller
 * screens. Move the text associated with the Associated Phenomenon cells to be LEFT aligned on small screens, center it (thank you flexbox) vertically w/its neighbor icon, and remove extra vertical space after "Associated Phenomenon" row. */
@media screen and (max-width: 768px) {
  #ma-inst-cat > div > img {    
    width: 25%;
  }
        
  div.horizontal-grid-icons > div:first-child {
    padding-bottom: 2em; 
  }     

  .ma-inst-ap-cell {
    text-align:left;
    display:flex;
    align-items:center;
  }

  #ma-inst-ap .horizontal-grid-icons > *{
    margin-bottom:0;
  }
}


/**********************************************************
 *  These items are for 'Field Campaign' micro articles
**********************************************************/
/* Make the 'Field Campaigns' header 
line up horizontally next to cover image */
#mafc-blurb h2 {
  margin-top: 0;
}

/* Vertical space before 'Science Objectives */
#mafc-blurb {
  margin-bottom: 1em;
}

/* If DMG includes a list in Science Objectives,
don't indent it per the mockup */
.mafc-blurb-text ul, ol {
  padding-left: 0px;
}

/* Draw the special bottom border under 'Time Range'...
 * Field Campaign micro articles are the only kind
 * of micro articles that have this. */
#mafc-time-row #micro-article-time {
  border-bottom: 2px solid black;
  padding-bottom: 2em;
}

/* Line up 'Phenomena studied' icons and labels */
#mafc-studied {
  display:inline-block;
  margin-top: 1em;
  margin-bottom: .5em;
}

/* Vertical space between 'Phenomena studied' items */
.pstudied_item {
  margin-bottom: .7em;
}

/* Horizontal space between 'Phenomena studied' 
icon and matching label */
.pstudied_item img {
  margin-right: 2%;
}

/* Line 'Instruments Used' header up w/its icon */
#mafc-inst-blurb h2 {
  margin-top: 0px;
}

/* Vertical space between 'Instruments Used' blurb
and the table of instruments used */
#mafc-inst-blurb {
  display: inline-block;
  margin-bottom: 1em;
}

/* Line 'Events of Interest' header up w/its icon */
#mafc-events-blurb h2 {
  margin-top: 0;
}

/* Vertical space between 'Events of Interest' blurb
and the image of the events */
#mafc-events-text {
  margin-bottom: 2em;
}

/* Always center the 'Events of Interest' image */
#mafc_event_image img {
  margin: 0 auto;
}

/* Space between 'Relevant Publications' label and 
text and 'Reference Source(s)' label and text */
#micro-article-publications .micro-upper-label,
#micro-article-references .micro-upper-label {
  margin-bottom: 1em;
}



/**********************************************************
 *  These items are for multiple types of micro articles
**********************************************************/
/* Make Related Publications and Reference Sources 
headings (typically at the bottom of micro articles) bold
if their existing styling does not already do this. */
#rel-pubs-label,
#ref-src-label {
  font-weight: bold;
}



/**********************************************************
 *  These items are for 'Application' micro articles
**********************************************************/

/* More generalized markup for a "half width" piece
of content -- removeits left and right paddings, and 
also center any image (see "Methodology" section of 
application micro articles for visual aid). */
.ma-half-left {
  padding-left: 0 !important;
}
.ma-half-right {
  padding-right: 0 !important;
}
.ma-half-right img {
  margin: 0 auto;
}

/* More generalized solution for the annoying setup 
where the micro article headers have icons that create
indentations for the whole section. This will make the 
label text next to those icons appear veritcally centered. */
.ma-icon-label {
  display: flex;
  align-items: center;
  font-size: larger;
  padding-left: 0 !important;
}
.ma-icon-icon {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ma-icon-icon img {
  width: 60px;
  height: 60px;
}
.ma-icon-label-text {
  padding-left: 0 !important;
}

/* More generalized solution for centering images
horizontally within their spaces. Used for "Results" 
images. */
.ma-img-autocenter img {
  margin: 0 auto;
}

/* The need to center the label text next to an
 * icon for each area is a PITA. These rules use 
 * a fake table layout to create this effect for each such
 * icon + label section header row in addition to 
 * constraining the icon size since the icons we use
 * seem to be wildly variable in their native sizes... */
div.mian-sctn-header {
  display: table;
  padding-right: 0;
}
div.mian-sctn-header-icon,
div.mian-sctn-header-label {
  display: table-cell;
  vertical-align: middle;
  float: none;
  padding-left: 0;
  padding-right: 0;
  font-size: larger;
}
.mian-sctn-header-icon img {
  max-height: 60px;
  max-width: 60px;
}

/* Sometimes we need to remove Bootstrap-supplied
 * padding from items in order to ensure harmonious
 * alignment on screen. */
.mian-ulist-15px-l-padding ul {
  padding-left: 15px;
}
.mian-ctr-no-lr-padding {
  padding-left: 0;
  padding-right: 0;
}

/* This draws the horizontal rule called for in micro 
 * article mockups by placing a border on an otherwise 
 * empty div. */
.mian-horiz-rule {
  border-bottom: 3px solid black;
  margin-top: 2em;
  margin-bottom: 2em;
}

/* Control vertical spacing and horizontal centering
 * of various elements. */
.mian-ctr img {
  margin: 0 auto;
}
.mian-vert-spacing {
  margin-top: 2em;
}

/* Control the appearance of the "GHRC Datasets Used"
 * table. This includes centering content for all but 
 * the first column, controlling the borders of elements
 * so they match the mockup, and constraining the sizes
 * of various icons. */
.mian-table table {
  border: none;
  border-bottom: 5px solid black;
}
.mian-table table thead {
  border-bottom: 5px solid black;
}
.mian-table th {
  border: none;
  text-align: center;
  font-weight: normal;
}
.mian-table td {
  background: white;
  border: none;
  border-bottom: 1px solid black;
}
/* This is why we can't have nice things. */
.mian-table td img {
  max-width: 60px;
  max-height: 60px;
}
/* Only the "Dataset Name" column is left-aligned.
 * All other columns are centered. */
.mian-table .table tbody tr td {
  text-align: center;
}
.mian-table .table tbody tr td:first-child {
  text-align: left;
}

/* Make some items appear nicely on xs-sized screens,  
 * which we transition to at a width of 768px. */
@media only screen and (max-width: 768px) {
  .mian-small-vert-spacing img {
    padding-top: 1em;
  }
  .mian-small-vert-spacing {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}