body {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  The next 8 lines are an attempt to use CSS to display a static bg gradient behind the image.
  It works, however once you begin scrolling, the gradient repeats.
  Must come back to later. Background image gradient isn't good practice.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  margin: 0;
  background-color:white;
  overflow: visible;
  font-family: 'Open Sans', 'Raleway', sans-serif;
  /*font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;*/
  font-size: .85rem;
  line-height: 1.5em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The following section of media queries is for HEADER background images and styling
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 459px) {
  .headerBGimage {
    top:40px;
    height: 208px;
    width: 100%;
    margin: 0 auto;
    background-image: url('/images/OrbDebHeader.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }

  .headerGradientBGimage {
    top: 208px;
    height: 322px;
    width: 100%;
    background-image: url('/images/EarthHeader_gradient.jpg');
    background-position: center center;
    background-repeat: repeat-x;
    background-attachment: scroll;
    position: relative;
  }
  
  .header {
    width: 100%;
    position: relative;
    margin: 0 auto;
  }
}

@media (min-width: 460px) and (max-width: 767px) {
  .headerBGimage {
    top:40px;
    height: 308px;
    width: 100%;
    margin: 0 auto;
    background-image: url('/images/EarthHeader.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }

  .headerGradientBGimage {
    top: 308px;
    height: 322px;
    width: 100%;
    background-image: url('/images/EarthHeader_gradient.jpg');
    background-position: center center;
    background-repeat: repeat-x;
    background-attachment: scroll;
    position: relative;
  }
  
  .header {
    width: 80%;
    position: relative;
    margin: 0 auto;
  }
}

@media (min-width: 768px) {
  .headerBGimage {
    height: 478px;
    width: 100%;
    margin: 0 auto;
    background-image: url('/images/EarthHeader.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }

  .headerGradientBGimage {
    top: 478px;
    height: 322px;
    width: 100%;
    background-image: url('/images/EarthHeader_gradient.jpg');
    background-position: center center;
    background-repeat: repeat-x;
    background-attachment: scroll;
    position: relative;
  }
  
  .header {
    width: 80%;
    position: relative;
    margin: 0 auto;
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The following nested-menu styles are for the pulldown menus throughout the site.
 These are currently used in the LMDP, HVIT and ISAG pages.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.nested-menu {
	float: right;
	margin-bottom:.2rem;
        margin-top:-.1rem;
}
	@media (max-width: 767px) {
		.nested-menu {
			width: 100%;
		}
	}
.nested-menu img {width: 100%}
.nested-menu .row {margin: 0}
.nested-menu .dropdown-menu {
	right:0; 
	left: auto;
}
.nested-menu .btn {
	padding: 4px 12px;
	min-width: 18rem;
	}
.nested-menu a {
	font-size: 0.75em;	
	/*white-space: nowrap;*/
	text-decoration: none !important;
	clear: both;
	line-height: 1.428;
	color: #333333;
}
	@media (max-width: 767px) {
		.nested-menu.open {margin-bottom:955px}
	}
	@media (max-width: 385px) {
		.divider {display: none}
	}

/* bigDiv contains **everything** except the background image*/
@media (max-width: 459px) {
  #bigDiv {
    top:40px;
    margin:0px auto;
    width:100%;
    height:100%;
    position:relative;
  }
}

@media (min-width: 460px) and (max-width: 767px) {
  #bigDiv {
    top:40px;
    margin:0px auto;
    width:100%;
    height:100%;
    position:relative;
  }
}

@media (min-width: 768px) {
  #bigDiv {
    margin:0px auto;
    width:80%;
    height:100%;
    position:relative;
  }
}

h1, h2, h3, h4, h5, h6 {
  color: #70716c;
  font-family: 'Open Sans', 'Raleway', sans-serif;
}

h3 {
  margin-top:1rem;
}

a:link, a:visited {
  color: #196c96;
  text-decoration: underline;
}

a:hover {
  color: #196c96;
  text-decoration: none;
  text-shadow: 0 0 2px #AAA;
}

/* The following style is used on the <h3> subheadings in many LMDP pages, and all of the HVIT & ISAG pages. */
.lighter {
  font-weight: lighter;
}

/* The following style is used on the <h3> subheadings to mask the link. */
a.groupHead:link, a.groupHead:visited {
  text-decoration: none;
}

/* GroupHeading is used in the header sections of the Research topic pages for associated groups, labs and researchers.  */
.GroupHeading {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  font-size: 105%;
  font-weight: bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 For more link styles on the page, see the following style areas:
 #NASA
 #breadcrumb
 #footer
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.clear {
    clear: both;
}

/* Centers any content. Used in the <h3>What We Do</h3 on the homepage. */
.center {
  text-align: center;
}

a img {
 border:none;
 outline:none;
}

/* used to center image within its parent div */
.ctn {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle; 
}

/* Used to adjust the font in all paragraphs on the site. */
p {
  font-family: 'Open Sans', Calibri, sans-serif;
  /*font-size: 90%;*/
}

p.big {
  line-height: 200%;
}

.caption {
  font-size:80%;
  display:inline;
}

figure {
  margin: 0 auto;
}

figcaption {
  font-size: .7rem;
  text-align: center;
}

/* Used to give a bottom border on the header row in a table on the Laboratories page at /laboratories/researchLabs/index.html */
th {
  border-bottom: 1pt solid #a8aa9e;
}

/* Used to alternate the bg color of rows in a table on the Laboratories page at /laboratories/researchLabs/index.html */
tr:nth-child(even) {
    background-color: #e0e2d4;
}

/* Used to adjust the font in a table on the Laboratories page at /laboratories/researchLabs/index.html */
td {
  font-family: 'Open Sans', 'Raleway', Calibri, sans-serif;
  font-size: 95%;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The accessible class positions the SKIP LINK off the screen for aesthetic purposes,
 but it remains visible to screen readers to avoid repetitive header content.
 This is a 508 Compliance requirement.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.accessible {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}
    
a.accessible:active,
a.accessible:focus,
a.accessible:hover {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Div for the space from the top of the browser to the main menu. 
 Contains header content including NASA meatball and ARES text.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#topMiniMenu {
  margin:0px auto;
  width:100%;
  height:425px;
  font-weight:bolder;
  font-size: 120%;
  /*position:relative;*/
  position: absolute;
  right:0;
  top:0;
  z-index:999;
}

@media (max-width: 767px) {
	#topMiniMenu {height: auto;}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The following section manipulates the placement of the NASA meatball in the header of the page.
 It also styles the hyperlinks in this section.
 Having this section in a div allows the Social Media section to display at the top right of the page.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 767px) {
  #NASA {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  #NASA a {
    font-size: 1.5vw;
  }
}

@media (min-width: 1000px) {
  #NASA a {
    font-size: 15px;
  }
}

#NASA {
  float:left;
  width: 50%;
  margin:0 5% 0 0;
  font-family: Candara, 'Open Sans', Arial, sans-serif;
}

a.nasa:link, a.nasa:active, a.nasa:visited {
  color: #93948e;
  text-decoration: none;
}

a.nasa:hover {
  color: #a8aa9e;
  text-decoration: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Makes the NASA meatball logo turn grayscale when hovered over
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.bw {
  -webkit-filter: grayscale(50%);
  -webkit-transition: .7s ease-in-out;
  -moz-filter: grayscale(50%);
  -moz-transition: .7s ease-in-out;
  -o-filter: grayscale(50%);
  -o-transition: .7s ease-in-out;
  filter: grayscale(50%);
}

.bw:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .3s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .3s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .3s ease-in-out;
  filter: grayscale(0%);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The following section manipulates the placement and opacity of the social media icons in the header of the page.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
@media (max-width: 767px) {
  #TopSocialMedia {
    display: none;
  }
}

#TopSocialMedia {
  float:right;
  text-align: right;
  vertical-align: middle;
  width:40%;
  height: 30px;
  margin:0 0 0 5%:
}

#TopSocialMedia img {
  opacity: 0.55;
  filter: alpha(opacity=55); /* For IE8 and earlier */
  padding:0px;
  margin: 10px .6vw 0px .6vw;
}

#TopSocialMedia img:hover {
  opacity: 0.90;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

/* This is used on index.html to give a top margin to the embedded Instagram feed */
.spacer {
  margin-top:1.5em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Div position (and font) for the ARES main header text, just above the pulldown menu, is set here.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 767px) {
  #ARES {
    display: none;
  }
}

#ARES {
  margin-top: 140px;
  position:absolute;
  bottom: 10;
  font-family: 'Open Sans', 'Raleway', sans-serif;
  width:100%;
}

#ARES h1 {
  font-weight: 800;
  text-shadow: 0px 1px 2px #4d4d4d;
  color: #e5e5e2;
  text-align:center;
  /*white-space: nowrap;*/
}

@media (min-width: 768px) and (max-width: 1049px) {
  #ARES h1 {
    font-size:3.4vw;
  }
}

@media (min-width: 1050px) {
  #ARES h1 {
    font-size:1.9em;
  }
}

#ARES span {
  font-weight: 900;
  text-shadow: 0px 1px 2px #4d4d4d;
  color: #e5e5e2;
  font-size: 125%;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Div for the main menu
 This first div doesn't appear to be used anymore (removed after swapping out menu options),
 however when it is deleted, the breadcrumb font becomes larger.  And the menu no longer centers.
 Not sure why.  Look for it.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#topMainMenu {
  margin:0px auto;
  width:100%;
  height:42px;
  background-color:rgba(255,255,255,0.45);
  border-top-left-radius:5px;
  -moz-border-top-left-radius:5px;
  -webkit-border-top-left-radius:5px
  border-top-right-radius:5px;
  -moz-border-top-right-radius:5px;
  -webkit-border-top-right-radius:5px
/*  background-color:#FFFFFF;
  filter:alpha(opacity=60);
  opacity:.4;                 */
}

/* Positions the main pulldown smartmenu */
@media (min-width: 768px) {
  .navbar {
    margin: 0 auto;
    margin-top: 104px;
  }
}

/* Centers the main menu (aka smartmenus) */
@media (min-width: 768px) and (max-width: 1099px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
        font-size:1.73vw;
        font-weight:600;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }

}

@media (min-width: 1100px) and (max-width: 1299px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
        font-size:1.6vw;
        font-weight:600;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }

}

@media (min-width: 1300px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
        font-size:20px;
        font-weight:600;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }

}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Div for the navigation breadcrumbs
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 767px) {
  #breadcrumb {
    display: none;
  }
}

#breadcrumb {
  font-size: .73rem;
  padding:0 1rem;
  /*margin-bottom:1rem;*/
  line-height:0.5;
  list-style:none;
  float: right;
  text-transform:capitalize;
}

#breadcrumb>a:link, #breadcrumb>a:visited {
  /*color: #70716c;*/
  text-decoration: none;
}

#breadcrumb>a:hover {
  color: #494a47;
  font-weight:bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Styling for the responsive gray box menu
 This menu is used in the HVIT, ISAG and Education pages
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.embed-nav {
  position: relative;
  top: 50%;
  background: #999;
  text-align: center;
}

.embed-nav a {
  font-weight:bold;
  font-size: 0.85em;
  width: 100%;
  color: #FFF;
  text-decoration: none;
  display: inline-block;
  padding: 20px;
  position: relative;
}

.embed-nav a:focus {
  background: #5f5f5f;
  color: #ffffff;
}

.impact-img {
  display: block;
  height: auto;
}

.impact-img img {width: 100%}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Div for the body content of the page.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (max-width: 459px) {
  #body {
    background: rgba(237,237,237,0.2);
    padding:5px;
  }
}

@media (min-width: 460px) and (max-width: 767px) {
  #body {
    background: rgba(237,237,237,0.2);
    padding:10px;
  }
}

@media (min-width: 768px) {
  #body {
    background: rgba(237,237,237,0.3);
    padding:35px;
  }
}


/* Left aligns content in a div. Was used in the home page. */
.LeftDiv {
  /*overflow:hidden;*/
  min-height:200px;
  margin:0;
}

/* Right aligns content in a div. Was used on the home page */
.RightDiv250 {
  float:right;
  width: 270px;
  min-height:200px;
  margin:0 0 0 10px;
}

/* Gray background box used on Social Media page behind the live feeds */
.GrayBgBox {
  margin:10px 0px;
  text-align: center;
  padding-top: 15px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 15px;
  width:100%;
  overflow:hidden;
  border: 1px solid gray;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -moz-box-shadow:    1px 1px 3px 3px #dedede;
  -webkit-box-shadow: 1px 1px 3px 3px #dedede;
  box-shadow:         1px 1px 3px 3px #dedede;
  background-color: #a8aa9e;
}

/* Playing around with styling the box around embedded Instagram feed on homepage */
.IgBox {
  margin:0px auto;
  padding: 20px 5px;
  /*background-color:#fff;*/
  width:100%;
  border: 1px solid #aaa;
  border-left-width:0px;
  border-right-width:0px;
  -moz-box-shadow:    0 6px 3px -3px #dedede, 0 -6px 3px -3px #dedede;
  -webkit-box-shadow: 0 6px 3px -3px #dedede, 0 -6px 3px -3px #dedede;
  box-shadow:         0 6px 3px -3px #dedede, 0 -6px 3px -3px #dedede;
}

/* Gray background box M. Higgins used on the home page */
.GrayBgBoxHome {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -moz-box-shadow:    1px 1px 3px 3px #dedede;
  -webkit-box-shadow: 1px 1px 3px 3px #dedede;
  box-shadow:         1px 1px 3px 3px #dedede;
  background-color: #e5e5e5;
}

/* Used to make the width of Twitter's iframe responsive */
#twitter-widget-0  .home {
  width: 100% !important;
}

@media (max-width: 384px) {
  #twitter-widget-0  {
	height: 280px !important;
  }
}

@media (min-width: 385px) and (max-width: 767px) {
  #twitter-widget-0  {
    height: 330px !important;
  }
}

/* White background box used on Research topic pages, behind the text held in the GrayBgBox in each related subject (Groups, Labs and Researchers) */
.WhiteBgBox {
  font-family: 'Open Sans', 'Raleway', Calibri, sans-serif;
  margin:5px auto;
  text-align: left;
  padding-top: 15px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 15px;
  width:100%;
  overflow:hidden;
  border: 1px solid gray;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -moz-box-shadow:    1px 1px 3px 3px #dedede inset;
  -webkit-box-shadow: 1px 1px 3px 3px #dedede inset;
  box-shadow:         1px 1px 3px 3px #dedede inset;
  background-color: #FFFFFF;
}

/* This is used to round the corners of the images in the Research groups pages */
.imgRoundBorder {
  border: 1px solid gray;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

/* This is used to provide a hanging indent on all bibliographies, found in the Research pages */
.Bibliography {
  padding-left: 25px ;
  text-indent: -25px ;
}

/* HR styling found on J. Simon's CICG group page (Gradient transparent - color - transparent) */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.topical {
  /*margin-top: 25px;*/
  padding-right: 20px;
}

.twitterRight>.row {
  padding-left: 20px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
The next 3 divs (all "container" related) will automatically justify elements on a page
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#container {
  text-align: justify;
}

#container > div {
  width: 200px; /* Declare your value. Can be in relative units. */
  display: inline-block;
  vertical-align: top;
  margin:15px;
  
  /* IE fix. */
  *display: inline
  zoom: 1;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The following styles are set for the social media image hover effects on the homepage.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* CSS for the image and the container element. */
.box {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 25%;
  overflow: hidden;
}

.box img {
  position: absolute;
  height: 100%;
  margin :0;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

/* CSS to style and animate the overlay */
.box .overbox {
  background-color: #304562;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  height: 100%;
  /*padding: 130px 20px;*/
}

.box:hover .overbox {
  opacity: 1;
}

/* CSS to style and animate the overlay */
.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 2.5em;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
The following styles are set for the social media image hover effects.
They are called via the div name "viewport" in the HTML, and utilize JQuery to perform the actions.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* --- Container configuration ---------------------------------------------------------- */
.viewport {
    border: 3px solid #eee;
/*    float: left; */
    height: 150px;
    margin: 0 9px 9px 0;
    overflow: hidden;
/*    position: relative; */
    width: 200px;
}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
  display: block;
  position: relative;
}

.viewport a img {
  height: 150px;
  left: 0px;
  position: relative;
  top: 0px;
  width: 200px;
}

/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
  display: none;
  font-size: 120%;
  font-weight: bold;
  height: 100%;
  padding-top: 40px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  width: 100%;
  z-index: 10;
}
.viewport a span em {
  display: block;
  font-size: 80%;
  font-weight: normal;
}

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
  background-color: rgba(15, 15, 15, 0.6);
  color: #fff;
  text-shadow: #000 0px 0px 20px;
}
.dark-background em {
  color: #ccc;
}

/* --------------------------------------------------------------------------------------
 * The ARES template has a footer that contains
 * "nasaLinks" and "pageLinks" <div>s with content in <ul> and a nasa log image
 * -------------------------------------------------------------------------------------*/
#footer{
  /*border:dotted 1px blue;*/
  background-image:url(/images/footerBG.png);
  background-repeat:repeat-x;
  background-size: contain;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 100%;
  margin: 0 auto;
  font-size:.75rem;
  color:#70716c;
}

@media (max-width: 767px) {
	#footer {
		width: 100%;
		padding: 0;
	}
}
.footer-style {margin-left: 0; margin-right: 0;}
.links a {text-decoration: none;}
.links img {padding: 1px}
/* The below unit and glyphicon styles are specific to the business unit tiles */
.unit {
  text-align:center;
}

.unit>a {
  text-decoration: none !important;
}


.glyphicon {
  font-size: 2em;
}

/* This style is specific to the responsive image tiles seen most on the homepage */
.cbp-item {
  margin: 15px;
}


/* The below line is used to hide the NASA meatball's text in the footer of every page.
   It's also used to hide the <h1> ARES </h1> header line on the homepage (index.html) */
.hide {
  display:none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   The following 2 divs are for vertically aligning content in any given space.
   You must nest the childVerticalalign div WITHIN the parentVerticalalign div to get the desired result.
   This is currently used in the footer for the nasaBWLogo image (verify).
   Also see .vAlignElement style below for vertical alignment.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.parentVerticalalign {
  display: inline-flex;  /* <== This is responsible for vertical alignment */
  height: 100%;
}

.childVerticalalign {
  margin: auto 5px;  /* <== This is responsible for vertical alignment */
}

.nasaLogoBW {
  background-image: url(/images/nasaMeatball-BW.png);
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=40); /* For IE8 and earlier */
  display: block;
  /*float: right;*/
  margin: 1% 0px;
  width: 64px;
  height: 60px;
}

/* padLines is used in the footer to pad the lines of text. */
.padLines {
  margin: 3px 0 3px 0;
}

#footer>.row {
  padding-top: 25px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 The following section manipulates the placement of the social media icons in the footer of the page.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
#BottomSocialMedia {
  margin:0 0 0 5%:
}

#BottomSocialMedia img {
  opacity: 0.85;
  filter: alpha(opacity=85); /* For IE8 and earlier */
  padding:0px;
  margin: 10px .15vw 0px .15vw;
}

#BottomSocialMedia img:hover {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

/* * * * * * * * * * * * * * * * * * *
  The following styles are used to center any number of columns on a page
  (even odd columns, and even using the BS Grid System).  This is currently
  used in the footer section on the glyphicons for each Business Unit.
  The third style is to make the glyphicons black.
* * * * * * * * * * * * * * * * * * */
.row-centered {
  text-align:center;
  width:100%;
}

.col-centered {
  display:inline-block;
  float:none;
  vertical-align: top;
  /* reset the text-align
  text-align:left;*/
  /* inline-block space fix */
  /*margin-right:-4px;*/
  width:13%;
  min-width:80px;
  padding-bottom:10px;
}

.col-centered>a:link, .col-centered>a:visited {
  color: #000;
  opacity: 0.6;
  font-weight:600;
  text-decoration: none;
}

.col-centered>a:hover {
  color: #196c96;
  opacity: 0.8;
  text-decoration: none;
  text-shadow: 0 0 2px #AAA;
}

/* * * * * * * * * * * * * * * * * * *
  The following styles were used to make the org chart
  image on the People page span the viewport width.
  It also has a 1px border applied.
  THESE ARE NO LONGER IN USE.
* * * * * * * * * * * * * * * * * * */

.viewportWideImg {
  height: 6rem;
  width: 100%;
  border: 1px solid #aaa;
  border-left-width: 0px;
  border-right-width: 0px;
  -moz-box-shadow:    0 6px 3px -3px #dedede, 0 -6px 3px -3px #dedede;
  -webkit-box-shadow: 0 6px 3px -3px #dedede, 0 -6px 3px -3px #dedede;
  box-shadow:         0 6px 3px -3px #dedede, 0 -6px 3px -3px #dedede;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background-image: url("/images/orgChart.jpg");
  background-position: center center;
  bacground-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* The following style (vAlignElement) must be placed within a section (styled below) in order to work properly.  It is apecifically applied to the p element in this case. */
.vAlignElement p {
  position: relative;
  /*this margin-top property more aligns the font to the bottom in this example.  If using elsewhere, overwrite the margin-top.*/
  margin-top:2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section {
  display: block;
  position: relative;
}

/* * * * *
  HTML code for the above styles:
  <section class="vAlignElement">
    <a href="orgchart.html">
    <div class="viewportWideImg">
      <p style="text-align:center; font-size:0.9rem; font-weight:bold;">Click here for the ARES Functional Organization Chart</p>
    </div>
    </a>
  </section>
 * * * * */


/* * * * * * * * * * * * * * * * * * *
  The following styles are used to style the
  definition lists; currently used on LMDP's FAQ
  page (3-17-2016).
* * * * * * * * * * * * * * * * * * */

dt {
  font-weight: bold;
}

dd {
  font-size:93%;
  margin: 0;
  padding: 0 0 0.5em 0;
}

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

/* * * * * * * * * * * * * * * * * * *
  The following styles are for the LMDP .cfm pages, added by A. Taylor on 3/31/2016
* * * * * * * * * * * * * * * * * * */

#tabs a {
	color: #FFF;
}
#tabs .ui-state-active a {
	color: #333;
}
#tabs p {
	font-size:1.1em;
}

/* 
  M. Higgins added code below to make figure images responsive
*/

.fig-img img {width: 50%}
	@media (max-width: 767px) {
		.fig-img img {width: 100%}
	}