/* [Ignore this comment, not written by Scot/Inner File or PMEL] This file will hold styles for all layouts using the alpha grid (i.e. not the mobile layout). */

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

/** Sticky footer **/
/* http://eureka.ykyuen.info/2012/08/23/drupal-7-apply-sticky-footer-in-omega-theme/ */
/* https://www.drupal.org/node/1136752#comment-6037136   [#35] */
html, body {height: 100%; margin: 0;}
#page {display: table; width: 100%;}
html>/**/body #page {height: 100%;}
*:first-child+html #page {height: auto;}
.section {display: table-row;}
html>/**/body .section-content {height: 100%;}
*:first-child+html body .section-content {height: auto;}

html body.admin-menu {
	margin-top: 29px !important; 
}
.page {
	position: relative;	
}
h1 {
	font-size: 43px;
}
h3 {
	font-size: 27px;
}
h4 {
	font-size: 23px;
}
.block-related-stories-related-items h2.block-title {
	font-size: 22px;
}
/** Place page banner at top of page, stacked beneath bars holding PMEL and ITAE branding **/
.big-banner img {
	width: 100%;	/* Needed to stretch image to browser width in all browsers except Chrome (which does it automatically)*/
	z-index: -100;
}
.not-front .no-big-banner {
	height: 125px;		/* Push page content down below main navigation if no page banner image. Determined in page.tpl.php */
}
.front .no-big-banner {
	display: none;		/* Homepage, don't have a height otherwise the slideshow gets pushed below transparent bars at top */
}
/* Homepage */
.front h3 {
    font-size: 23px;
}
.front h4 {
    margin: 7px 0;
}

#zone-user-wrapper {
	z-index: 140;		/* Necessary to keep #region-user-first and #region-user-second opaque in Chrome if header fixed/scrolling */
}
#zone-menu-wrapper {
	z-index: 90;		/* Must be lower than social media buttons so buttons work */
}
/** User wrapper which wraps the PMEL and ITAE logo/text regions **/
#zone-user-wrapper,
#zone-bar-wrapper {
	position: fixed;		/* Set to 'absolute' to stop the scrolling */
	top: 0;
	width: 100%;
	height: 65px;
}
/** PMEL and ITAE logo/text regions **/
#region-user-first,
#region-user-second {
	height: auto;
	background-color: transparent;
	z-index: 150;
}
/** Place Menu wrapper below User wrapper **/
#zone-menu-wrapper,
#zone-branding-wrapper {
	position: fixed;		/* Set to 'absolute' to stop the scrolling */
	top: 65px;				/* Height of #zone-user-wrapper */
	width: 100%;
	height: 60px;
}
/** Place #zone-bar-wrapper and #zone-branding-wrappers behind PMEL/ITAE, and main menu **/
/* By giving these zones the transparency, the overlaying items can remain opaque */
#zone-bar-wrapper {		/* Behind #zone-user-wrapper */
	background-color: #333;
	opacity: 0.65;
	z-index: 10;	/* Chrome: Needed to keep bars on top slideshow images */
}
#zone-branding-wrapper {
	background-color: #333;
	opacity: 0.25;
	z-index: 10;	/* Chrome: Needed to keep bars on top slideshow images */
}
/** PMEL Branding **/
.pmel-logo {
	padding-top: 4px;
}
.pmel-text {
	display: block;
	margin: -3px 0 0 15px;
}
.pmel-text a,
.itae-text a {
	font-size: 13px;
	color: #fff;
}
/** ITAE Branding **/
.itae-text {
	display: block;
	margin: -13px 0 0 15px;	
}
.itae-acronym h2 {
	margin-top: -9px;
}
.itae-acronym h2 a {
	font-size: 35px;
}
.itae-acronym h2 a:hover {
	color: #e86a24;
}
/** Social media buttons **/
#region-header-second {
	position: fixed;		/* Set to 'absolute' to stop the scrolling */
	top: 120px;
	right: 7%;
	bottom: auto;
	z-index: 100;
}
.block-service-links h2 {
	display: block;
	color: #fff;
	font-size: 12px;
	margin-bottom: 0;
	text-align: right;
}
.block-service-links {
	positiion: relative;		/* To allow right-positioning of social media buttons */
}
.service-links {
	position: absolute;
	right: 0;					/* Right positioning of social media buttons */
}
/** Main navigation **/
#region-menu {
	margin-left: 0;  
	margin-right: 0;
	width: 720px;
	z-index: 150;				/* Must be higher index than social media buttons so drop-down menus can be accessed */
								/*(this is the parent of the drop-down menus and it must have the higher z-index, not the drop-downs) */
}
#hamburger {
	display: none;
}
/** main menu drop-downs **/
#block-system-main-menu {
	margin: 20px 25px 0;	/* Move entire main nav bar */
	display: block;
	padding: 0;
}  
#block-system-main-menu .content li {
	padding: 0px;
	margin: 0px;
	float: none;
	width: auto;
	display: inline;
}
#block-system-main-menu .content li a {
	padding-left: 0;
	padding-right: 0;
	color: #fff;
	font-weight: bold;
	font-size: 19px;
	line-height: inherit;
	display: inline-block;
	margin-right: 24px;		/* Distance between main nav items */
	width: auto;
	text-align: left;
}
#block-system-main-menu li a:after {
	display: none;
}
#block-system-main-menu .content li.last a {
	margin-right: 0;
}
#block-system-main-menu .content li a:hover,
#block-system-main-menu .content li a.active  {
	color: #e86a24;
}
#block-system-main-menu .content li.expanded  {
	position: relative;
}
#block-system-main-menu .content li.expanded  ul.menu {
	display: none;
	position: absolute;
	left: 0;
	top: 20px;		/* Original value: 21px; Made 1 px less to make drop-downs open upon mouseover - tn */
	text-align: left;
}
#block-system-main-menu .content li.expanded:hover ul.menu {
	display: block;
	z-index: 10;
	width: 200px;
	padding: 0;
	margin-left: 0;		/* Left indent of drop-down menus from main nav item */
	background: #C3C3C3;
	border-radius: 0px;
	border: 1px solid #828282;
}
#block-system-main-menu .content li.expanded:hover ul.menu a {
	background: none;
	border: none;
	border-radius: 0px;
	padding: 3% 7%;	/* Left/right percentage indents text within drop-down menu */
	width: 86%;		/* 7%(left padding) + 7%(right padding) + 86%(width) = 100%*/
	color: #545454;
	font-weight: normal;
	font-size: 17px;
}
#block-system-main-menu .content li.expanded:hover ul.menu a:hover {
	color: #e86a24;
	background: #545454;
}
/** third level menu items **/
#block-system-main-menu .content li.expanded ul.menu li ul.menu {
	display: none;
	position: absolute;
	left: 200px;
	top: -7px;
	text-align: left;
}
#block-system-main-menu .content li.expanded ul.menu li:hover ul.menu {
	display: block;
	z-index: 20;
	width: 200px;
	padding: 0;
	background: #fff;
	border-radius: 0px;
	border: 1px solid #0269b1;
}
/** Homepage slideshow **/
/* Arrow graphic after Read More in slideshow */
.slideshow-teaser-more-link::after {
	content: url(../images/arrow.png);
	margin-left: 5px;
}
/* Overlay with title, summary, Read More */
.slideshow-homepage .views-field-body {
	background: url("../images/fade-left-to-right-white.png") left repeat-y;
	top: 160px;
	right: 0;
	max-width: 46em;
}
.slideshow-teaser {
	width: 75%;
	text-align: left;
	padding-left: 30px;
}
.slideshow-teaser-title a,
.slideshow-teaser-title a:visited,
.slideshow-teaser-title a:active {
	font-size: 42px;
	line-height: 45px;
}
.slideshow-teaser-summary p {
	font-size: 19px;
	margin-top: 10px;
}
/** Homepage ITAE text **/
#zone-preface-wrapper {
	background-color: #d2d3d2;
}
.home-program-name {
	font-size: 27px;
	font-family: "cubano", sans-serif;
	text-align: center; 
}
/* What's new and In the news display */
.front .grid-7,
.front .grid-5 {
	margin-left: 10;
	margin-right: 10;
}

#zone-postscript .grid-7.region {	/* Set left block new width */
  width: 400px;	
}

#zone-postscript .grid-5.region {	/* Set right block new width */
  width: 280px;
}

/** what's new block **/
.node-type-news-story .field-name-field-atom,
.view-what-s-new .views-row .views-field-field-atom {
  width: 50%;
  padding-bottom: 33%;
  float: left;
  margin: 0 14px 0 0;
  height: auto;
}

.node-type-news-story .field-name-field-news-story-image,
.view-what-s-new .views-field-field-news-story-image,
.view-featured-publications.view-display-id-page .views-field-field-featured-pub-image {
  max-width: 50% !important;
  width: auto;
}

.field-name-field-news-story-image,
.view-what-s-new .views-field-field-news-story-image,
.view-featured-publications.view-display-id-page .views-field-field-featured-pub-image,
.view-what-s-new .image-caption-wrapper {
  margin: 0px 14px 0px 0px;
  max-width: 50% !important;
  float: left;
}

/* Saildrone data display in footer */
#region-prefooter-first h4 {
	padding-bottom: 30px;		/* Comment this out if saildrone data is displayed in footer */
}
.saildrone-heading,
.saildrone-data .data-label {
	display: none;				/* Hide saildrone text so can display image */
}
.saildrone-data a.extra-space {
	padding-left: 20px;			/* Hack to try to center hand-entered text */
}
#region-prefooter-first img {
	display: block;
}
.saildrone-data {
	width: 24%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#region-prefooter-first img,
.all-saildrone-data {
	width: 622px;
	margin-right: auto;
	margin-left: auto;
}
/* Fading effect */
.pmel-text a, .pmel-text a:focus, .pmel-text a:active,
.itae-text a, .itae-text a:focus, .itae-text a:active ,
.itae-acronym a, .itae-acronym a:focus, .itae-acronym a:active
{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}
/** content zone **/
.front #zone-content .region {
	background-color: #fff;
	margin-bottom: 15px;
}
.callout-box {
	font-family: "cubano", sans-serif;	;
	font-size: 25px;
	color: #616161;
}
/** Node-specific Image Stack **/
.node-type-pmel-theme #page-main,
.node-type-page #page-main {
  float: left;
  width: 63%;
  padding-right: 2%;
}

.node-type-pmel-theme #page-right,
.node-type-page #page-right {
  float: left;
  width: 35%;
}
/** Related Stories - 3 columns **/
.view-related-stories .views-row {
	width: 28%;
}
.view-related-stories span.field-content {
	display: block;
	font-size: 14px;
	line-height: 1.6em;
}
/** Search field **/
input[id="edit-search-block-form--2"] {
	margin-top: 10px;
}
/* Node Gallery – listing of all galleries - tn */
.view-node-gallery-gallery-summaries h2 {
	font-size: 16px;
	border-bottom-style: none;
	line-height: 1.2em;
}
/* Node Gallery – individual photo gallery – tn */
.view-node-gallery-gallery-item-views .views-row {
	width: 16%;			/* Basically, 5 columns */
	float: left;
	margin: 2% 2% 1% 2%;
}
/* NOAA logo - footer */
.noaa-logo-wrapper {
	text-align: left;
}
/* Social media icons - footer*/
.social-media-wrapper {
	justify-content: right;
}