/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */

/* PMEL: */
/* Layout	Size	CSS Stylesheet						Description */
/* Mobile	All		global								Apply first to all device widths. */
/* Tablet	>=740px	pacific-marine-alpha-default		Inherit Mobile, add/override from Tablet. */
/* Desktop	>=980px	pacific-marine-alpha-default-normal	Inherit Global & Tablet; add/override from Desktop. */
/* Sm phone <480	global, at bottom					Fix up homepage slideshow on tiny screens */

/* fix firefox boxsizing issue */
* {
	-moz-box-sizing: content-box;
}

body { 
	padding: 0;
	margin: 0;
	font-family: 'Noto Serif', serif;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	color: #2e363b;
	position: relative;		/* Needed to position social media buttons */
}
html body.admin-menu {
	margin-top: 79px !important;
}
table {
	width: 100%;
	border: none;
}
table tr:hover td,
tr.even:hover td.active, 
tr.odd:hover td.active {
	background: none;
}
img,
select {
	max-width: 100% !important;
	height: auto !important;
}
p {
	line-height: 1.5;
	margin-bottom: 1em;
	padding: 0;
    text-rendering: optimizelegibility;
}
sub {
	vertical-align: sub;
	font-size: 80%;
	line-height: 80%;
}
sup {
	vertical-align: super;
	font-size: 80%;
	line-height: 80%;
}
a,
a:link,
a:visited {
	text-decoration: none;
	color: #e86a24;
}
a:hover {
	color: #d34f06;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	color: #222;
	font-family: "cubano", sans-serif;
	font-style: normal;
	font-weight: 400;		/* Typekit's weight */
	letter-spacing: 1px;
    text-rendering: optimizelegibility;
}
h1 {
	font-size: 27px;		/* Overrides omega-text.css - tn */
	margin-top: 18px;
}
h2,
h2.node-title,
h2.block-title {
	font-size: 25px;
}
.block-related-stories-related-items h2.block-title {
	color: #6f6f6f;
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-bottom: 25px;
	border-bottom: 2px solid #C5C5C5;
}
h3 {
	font-size: 23px;
	margin: 7px 0;
}
.emphatic-text {
	font-size: 20px;	/* Like capitalized names at start of sentence */
	color: #FF8C00;
}
/** General zone, region setup **/
#zone-user-wrapper,
#region-user-first,
#region-user-second,
#zone-prefooter-wrapper,
#zone-footer-wrapper {
	margin: 0;
	padding: 0;	
}
/* Holds #region-user-first and #region-user-second */
#zone-user-wrapper {
	height: 100px;
}
/** PMEL Branding bar **/
#region-user-first {
	background-color: #4F4F4F;
	height: 50px;
}
/** ITAE Branding bar **/
#region-user-second {
	background-color: #606160;
	height: 50px;
}
#zone-prefooter-wrapper {
	background-color: #3F403F;
}
#zone-footer-wrapper {
	background-color: #363736;
}
/** PMEL Branding - uses sprites for rollover **/
.pmel-logo a:link,
.pmel-logo a:visited {
	display: block;
	text-indent: -15000px;	/* Move link text off page to "hide" */
	width: 101px;
	height: 35px;
	background: url("../images/pmel-logo.png") no-repeat;
}
.pmel-logo a:hover {
	background-position: 0 -35px;
}
.pmel-logo {
	padding: 8px 0 0 15px;
}
/** ITAE Branding **/
.itae-acronym {
	padding: 5px 0 0 15px;
}
.pmel-text,
.itae-text {
	display: none;
}
.itae-acronym h2 a {
	font-size: 26px;
	color: #fff;
}
/** Social media buttons **/
/* Hide "Share the Love" on mobile */
.block-service-links h2 {
	display: none;			
}
#region-header-second {
	position: absolute;
	top: 40px;
	right: 3px;
}
.twitter-share-button,
.service-links-facebook-share {
	vertical-align: bottom;
}
/** Breadcrumbs **/
.breadcrumb,
.breadcrumb a {
	font-size: 11px;
	text-transform: uppercase;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.breadcrumb a {
	color: #656565;
}
.breadcrumb a:hover {
	text-decoration: underline;
}
.breadcrumb {
	color: #e86a24;
	word-spacing: 12px;
	margin-top: 20px;
	padding: 0;
}
/** Icon for menu while on mobile device **/
#hamburger {
	display: block;
	position: absolute;
	z-index: 10;
	cursor: pointer;
	top: 70px;
	right: 3px;
}
/* Override blue glow around input field in formalize.css - tn */
button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	z-index: 1; /* For Opera */
}
/** Navigation links **/
/* Mobile, expanding main menus */
ul.menu li.leaf,
ul.menu li.collapsed,
ul.menu li.expanded {
	display: inline;
	list-style: none;
	padding: 0 20px 0 0;
}
/** Main menu drop-downs (responsively styled for hamburger icon) **/
#block-system-main-menu {
	display: none;
	padding-top: 15px;
}
#block-system-main-menu li {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
#block-system-main-menu li a {
	display: block;
	padding: 0 7%;
	width: 90%;
	font-size: 18px;
	line-height: 30px;
	text-decoration: none;
}
#block-system-main-menu li a:after {  
	float: right;
	margin-right: 10px;
	content: "〉";
}
#block-system-main-menu li.open > a:after {
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
#block-system-main-menu li.expanded ul.menu {
	display: none;
}
#block-system-main-menu li.expanded ul.menu {
	padding: 0 10%;
}
/** Main navigation **/
.region-menu .menu li a {
	font-family: "cubano", sans-serif;	;
}
.region-menu .menu li a, .menu li a:focus {
	color: #606160;
}
.region-menu .menu li a.active {
	color: #e86924;
}
.img-caption {
	font-size: 14px;
	color: #555;
	font-style: italic;
	margin-bottom: 3px;
}
/** Image stack **/
#page-right img {
	border: 2px solid #6E6E6E;
}
#page-right img[src*="spacer.gif"] {	/* Remove border from spacer.gif image in callout boxes/quotes */
	border: 0;							/* http://www.w3schools.com/css/css_attribute_selectors.asp */
}
/** Image stack caption **/
.image-field-caption {
	font-size: 14px;
	color: #6f6f6f;
}
.image-field-caption p {
	margin-bottom: 15px;
}
.callout-box {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 21px;
	color: #7C7C7C;
	margin-bottom: 20px;
	padding: 16px 20px;
	background-image: url(../images/quote_box_bg.png);
	background-repeat: repeat-y;
}
/** Related stories **/
.view-related-stories span.field-content {
	display: none;
}
.view-related-stories div a {
	font-family: "cubano", sans-serif;
	font-size: 18px;
}
/* Related stories thumbnail grid - 2 columns */
/* http://designshack.net/articles/css/how-to-build-a-responsive-thumbnail-gallery/ */
.view-related-stories {
	width: 100%;
	/*margin: 10px auto;*/
	overflow: hidden;	/* Clears floats */
}
.view-related-stories .views-row {
	float: left;
	width: 46%;
	margin: 2% 2% 35px 2%;
}
/** Homepage slideshow **/
/* Hide original teaser title and "Read More" from Views Slideshow since we're rewriting it ourselves */
.view-slideshow .views-field-view-node,
.view-slideshow .views-field-title {
	display: none;
}
.slideshow-teaser-more-link {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
/* Hide FlexSlider paging dots below slideshow */
.flex-control-paging {
	display: none;
}
.flex-direction-nav a  {
    line-height: 40px;		/* Fixes FlexSlider bug where Prev/Next arrows are cut off at the bottom */
}
.flexslider {
	border: none;		/* Override flexslider.css */
	margin: 0;			/* Override flexslider.css */
	background-color: #404040;	/* Same color as footer; Hack: hide tiny white line, bottom edge of slideshow  */
}
.front .section-content {
	/*background-color: #404040;*/	/* Same color as footer; Hack: hide band of white above footer */
	background-color: #fff;
	margin-top: 0;
}
/* Overlay with title, summary, Read More */
.slideshow-homepage .views-field-body {		/* Outer div */
	position: absolute;
	top: 15px;
	width: 100%;
	background: rgb(255, 255, 255);			/* For browsers that don't support RGBa */
	background: rgba(255, 255, 255, 0.7);	/* Use instead of opacity so text isn't transparent while bg is */
}
.slideshow-teaser {		/* Inner div */
	width: 100%;
	text-align: center;
	padding: 15px 10px;
}
.slideshow-teaser-title a,
.slideshow-teaser-title a:visited,
.slideshow-teaser-title a:active {
	color: #0a0a0a;
	font-size: 26px;
	font-family: "cubano", sans-serif;
	line-height: 20px;
}
.slideshow-teaser-title a:hover {
	color: #e86a24;
}
.slideshow-teaser-summary p {
	font-size: 17px;
}
/* Mission statement */
.front .grid-12 .region-content-inner {
	margin-top: 20px;
}

/* Hide second publication date in imported What's New nodes */
.field-name-field-publication-date .date-display-single {
	/*display: none;*/
	font-style: italic;
	font-size: 12px;
}
/* Story captions and pub date */
.views-field-field-publication-date span.date-display-single,
.pub-date,
.img-caption,
.image-field-caption {
  font-size: 12px;
  color: #555;
  font-style: italic;
  margin-bottom: 5px;
}
/* What's New */
.view-what-s-new .image-caption-wrapper .img-caption {
  padding-top: 3px;
}
/* Added back for What's New, In the News */
.view-what-s-new.view-display-id-page .views-exposed-widgets,
.view-pmel-in-the-media.view-display-id-page .views-exposed-widgets {
  margin-bottom: 20px;
}

.view-pmel-in-the-media.view-display-id-page .views-exposed-form .views-exposed-widget .form-submit {
  margin-top: 14px;
}

.view-what-s-new.view-display-id-page .views-row,
.view-pmel-in-the-media.view-display-id-page .views-row,
.view-featured-publications.view-display-id-page .views-row {
  clear: both;
  margin-bottom: 20px;
  width: 96%;
  padding: 2%;
  float: left;
  border-radius: 5px;
}

.view-what-s-new.view-display-id-page .views-row-odd,
.view-pmel-in-the-media.view-display-id-page .views-row-odd,
.view-featured-publications.view-display-id-page .views-row-odd {
  background: #efefef;
}

.view-what-s-new .views-row .views-field img h4 a {
  color: #575757;
  font-style: italic;
}

.node-type-news-story .field-name-field-atom,
.view-what-s-new .views-field-field-atom {
  position: relative;
  padding-bottom: 60%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

.node-type-news-story .field-name-field-news-story-image img,
.view-what-s-new .views-field-field-news-story-image img,
.view-what-s-new .whats-new-image img,
.view-featured-publications .views-field-field-featured-pub-image img {
/*background: #a7b9ce;*/    /* Remote colored border from image */
  padding: 4px;
  margin: 0;
}
/* End What's New, In the News */

/** Saildrone data display in footer **/
#region-prefooter-first h4 {
	color: #ddd;
    letter-spacing: 7px;
    padding-top: 11px;
	padding-bottom: 11px;		/* Comment this out if saildrone data is displayed in footer */
	text-align: center;
}
#region-prefooter-first img {
	display: none;
}
.saildrone-heading {
	color: #ddd;
	font-family: "cubano", sans-serif;
	font-size: 20px;
	text-align: center;
}
.saildrone-data {
	display: inline-block;
	width: 20%;
	height: 30px;
	margin: 1em;
	font-size: 14px;
}
.saildrone-data div.data-label {
	color: #fff;
	font-weight: bold;
}
/* Fading effect */
.menu li a, .menu li a:focus, .menu li a:active,
.saildrone-data a, .saildrone-data a:focus, .saildrone-data a:active,
.block-13 a, .block-13 a:focus, .block-13 a:active,
#block-block-13 a, #block-block-13 a:focus, #block-block-13 a:active {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}
.region-footer-first .menu li a, .region-footer-first .menu li a:focus, .region-footer-first .menu li a:active,
.saildrone-data a, .saildrone-data a:focus, .saildrone-data a:active {
	color: #b6b6b6;
}
.region-footer-first {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.menu li a:hover,
.saildrone-data a:hover,
.block-13 a:hover,
#block-block-13 a:hover {
	color:#e86924;
}
/** Search field **/
input[id="edit-search-block-form--2"] {
    background-color: #545454;
    border: 1px solid #000;
	width: 100%;
	padding-left: 10px;
	margin-top: 15px;
	height: 2.5em;
	font-size: 15px;
}
input[id="edit-search-block-form--2"]:focus {
	background: #fafafa none repeat scroll 0 0;
	border-color: #999;
	outline: medium none;
	color: #000;
}
/** Footer **/
.region-footer-first {
	padding-top: 20px;
}
/** Collaboration text **/
.region-footer-first .block-15 p {
	color: #6a6a6a;
	font-size: 16px;
	margin: 5px 15px 0 15px;
	text-align: center;
}
/** Required government links **/
#block-block-13 a, #block-block-13 a:focus, #block-block-13 a:active {
	color: #6a6a6a;
}
.region-footer-first .block-13 p {
	color: #6a6a6a;
	font-size: 16px;
	margin: 15px 0;
	text-align: center;
}
/** Sitemap **/
.region-footer-second .block-menu-menu-footer-second-menu a,
.region-footer-second .block-menu-menu-footer-second-menu a:focus,
.region-footer-second .block-menu-menu-footer-second-menu a:active {
	color: #b6b6b6;
}
.region-footer-second .block-menu-menu-footer-second-menu ul {
	font-size: 15px;
	font-family: "cubano", sans-serif;
	text-align: center;
	margin-bottom: 20px;
}
/* Node Gallery – individual photo gallery – tn */
/* Hide text links above thumbnails */
.node-node-gallery-item h2 {
	display: none;
}
.view-node-gallery-gallery-item-views .views-row {
	width: 21%;			/* Basically, 4 columns */
	float: left;
	margin: 2% 2% 2% 2%;
}
/* Node Gallery – listing of all galleries - tn */
.view-node-gallery-gallery-summaries h2 {
	font-size: 13px;
	border-bottom-style: none;
	line-height: 1em;
}
.view-node-gallery-gallery-summaries .views-row {
	width: 21%;			/* Basically, 4 columns */
	margin: 2% 0 2% 2%;		/* Need minimal horizontal space between cover images for inline-block to work */
	display: inline-block;	/* Instead of float: left, inline-block aligns rows */
	vertical-align: top;
	/* IE 6/7 Hack*/
  	zoom: 1;
	*display: inline;
}
/* Content Zone */
.not-front #zone-content {
	background-color: #fff;
	margin-bottom: 30px;
}

/* Responsive embedded YouTube videos */
.video-responsive {
   position: relative;
   padding-bottom: 50%;
   padding-top: 35px;
   height: 0;
   overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}
/* Responsive embedded video files */
video {
   width: 100%    !important;
   height: auto   !important;
}
/** Homepage ITAE text **/
.home-program-name {
	color: #222222;
	font-size: 25px;
	font-weight: bold;
	margin-top: 25px;
}

/* NOAA logo - footer */
.noaa-logo-wrapper {
	text-align: center;
	margin-bottom: 15px;
}
/* Social media icons – footer */
.social-media-wrapper {
	display: flex;	/* or inline-flex */
	height: 44px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 15px;
}
.youtube-icon, .facebook-icon, .instagram-icon, .twitter-icon {
  	width: 40px;
	height: 40px;
	margin-right: 6px;
}


/* Take care of homepage slideshow text overlay spilling into footer for smartphones */
@media only screen and (max-width : 480px) {
	.slideshow-homepage .views-field-body {
		top: 2px;
	}
	.slideshow-teaser-title a,
	.slideshow-teaser-title a:visited,
	.slideshow-teaser-title a:active {
		font-size: 17px;
	}
	.slideshow-teaser-more-link {
		display: none; 
	}
	.slideshow-teaser-summary p {
		font-size: 16px;
		line-height: 1.3;
	}
	.slideshow-teaser {
		padding: 2px 5px;
	}
	#zone-prefooter-wrapper {
		padding-top: 70px;	
	}
}