html, body
{
	margin:0;
	padding:0;
	min-height:100%;	/* KEY line to getting footer bg image to stay at bottom of page */
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	background-color: #FFF;
	background: url(images/pmel_header_bg.jpg) top center no-repeat, 
	url(images/pmel_footer_bg.jpg) bottom center no-repeat;
	width: 100%;
	height: 100%;
	background-size: 100%;
}
a img {
	border: 0 none;
}
a:link,
a:visited {
	color: #4474A3;
	text-decoration: none;
}
a:hover {
	color: #965951;
	text-decoration: underline;
}
a.footer:link,
a.footer:visited,
a.footer:hover {
	font-size: 11px;
}
.bodybold {
	font-weight: bold;
}
.bodyitalics {
	font-style: italic;
}
.bodysmall {
	font-size: 11px;
}
.bodyred {
	color: #CC0000;
}
.bodyredbold {
	color: #CC0000;
	font-weight: bold;
}
.bodywhite {
	color: #FFF;
}
.pageheader {
	font-size: 20px;
	font-weight: bold;
	color: #965951;
}
.dotted_line {
	border-top: 1px dotted #B8CDFF;
	border-right: 0px dotted #B8CDFF;
	border-bottom: 0px dotted #B8CDFF;
	border-left: 0px dotted #B8CDFF;
}
.adminheader {
	font-size: 14px;
	font-weight: bold;
	color: #CC0033;
	background-color: #CCFFCC;
}
.errormsg {
	color: #CC0000;
	font-weight: bold;
	font-size: 15px;
}
.bodybigbold {
	font-size: 16px;
	font-weight: bold;
}
.missionstatement {
	font-size: 13px;
	font-weight: bold;
	color: #333399;
	border: 1px solid #6699FF;
	padding: 8px 14px;
	background-color: #D2E4FC;
}
.goldmedal-box {
	border: 1px solid #69C;
	padding: 10px;
	width: 820px;
	margin: 0 auto;
}
.goldmedal {
	float: left;
	margin-right: 30px;
	margin-top: 15px;
}
.goldmedal-text {
	width: 730px;
	float: left;
}
.goldmedal-text ul {
	margin: 0;
	padding: 0;
}
.goldmedal-text ul li {
	margin-bottom: 10px;
}
.tagline_left {
	padding: 5px 7px 5px 14px;
	background-color: #094A90;
}
.tagline_right {
	padding: 5px 14px 5px 7px;
	background-color: #094A90;
}
.tagline_middle {
	padding: 5px 7px;
	background-color: #094A90;
}
.homeimage_left {
	padding: 5px 3px 5px 6px;
	background-color: #094A90;
}
.homeimage_right {
	padding: 5px 6px 5px 3px;
	background-color: #094A90;
}
.homeimage_middle {
	padding: 5px 3px;
	background-color: #094A90;
}
a.tagline:link, 
a.tagline:visited,
a.tagline:hover {
	font-weight: bold;
	color: #FFFFFF;
}
a.tagline:link,
a.tagline:visited {
	text-decoration: none;
}
a.tagline:hover {
	text-decoration: underline;
}
/* Use to make bullet or number in list bold */
.boldbullet {
	list-style-type: decimal;
	font-weight: bold;
}
/* Use in <li> tag to remove bullet from list */
.noBulletList {
	list-style-type: none;
}
/* Use to make text in bold bulleted or numbered list normal weight */
.normaltext {
	font-weight: normal;
}
.top_border {
	border-top: 1px solid #000;
}
.headline {
	color: #FFF;
	font-size: 16px;
	background-color: #2B567E;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* 12/13/13: Code for Google Maps */
/* Firefox 24 adds unnecessary scrollbars into the InfoWindow, this styling gets rid of it */
/* http://www.canbike.ca/information-technology/2013/11/01/firefox-infowindow-scrollbar-fix-google-maps-api-v3.html */
.map_noscrollbar {
	line-height:1.35;	/* Ensures long text doesn't spill out of the InfoWindow */
	overflow:hidden;	/* Ensures no scrollbars displayed */
	white-space:nowrap;	/* Ensures no scrollbars displayed */
}



/** 8/4/14: Drupal look **/
#header {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 15px;
	width: 960px;
	overflow: hidden;	
}
#site_logo {
	width: 500px;
	float: left;
}
#noaa_doc {
	width: 460px;
	float: left;
	overflow: hidden;
}
#words_wrap {
	width: 360px;
	float: right;
}
#noaa_logo {
	width: 42px;
	margin-left: 10px;
	float: right;
}
#doc_logo {
	width: 42px;
	margin-left: 5px;
	float: right;
}
.words {
	font-size: 12px;
	line-height: 13px;
	text-align: right;
	text-transform: uppercase;
	margin-right: 5px;
}
#doc_words {
	font-size: 9px;
	color: #555;
}
#content {
	margin-left: auto;
	margin-right: auto;
	padding: 0 30px 30px 30px;
	width: 960px;
	background-color: #fff;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	border: 1px solid #003195;
}
#footer_wrap {
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 960px;
	overflow: hidden;
}
#footer_first {
	width: 710px;
	float: left;
}
#footer_second {
	width: 250px;
	float: left;	
}
#pmel_logo {
	width: 110px;
	float: left;
}
#footer_links {
	width: 590px;
	float: left;
	padding-left: 10px;
}
#youtube {
	text-align: right;
	margin-right: 0;
	margin-left: auto;
}
li {
	margin-bottom: 5px;
}
/* Homepage */
.home-container {
	width: 840px;
	margin: 30px auto;
}
.home-col1,
.home-col2 {
	width: 420px;
	text-align: center;
	float: left;
}
#skiptocontent {
	height: 1px;
	width: 1px;
	position: absolute;
	overflow: hidden;
	top: -10px;
}

/* Mobile */
@media screen and (max-width: 768px) {
	body {
		font-size: 16px;
		background-image: none;
    	background-color: #fff;
	}
	#content {
		width: 100%;
		border: none;
	}
	#header,
	#site_logo,
	#noaa_doc,
	#words_wrap,
	#footer_first,
	#footer_second,
	#pmel_logo,
	#footer_links,
	#youtube,
	.goldmedal-box,
	.goldmedal,
	.goldmedal-text {
		width: 100%;
		float: none;
		text-align: left;
		padding-left: 10px;
	}
	#pmel_logo,
	#youtube,
	.goldmedal {
		text-align: center;
	}
	#noaa_doc {
		margin-top: 5px;
	}
	#noaa_logo,
	#doc_logo {
		float: left;
		margin: 0 3px 0 0;
	}
	.words {
		text-align: left;
		margin: 0;
	}
	img {
		max-width: 100%; 
		height: auto;
	}
	.home-container,
	.home-col1,
	.home-col2 {
		width: 100%;
		float: none;
	}
	.goldmedal-box {
		border: none;
	}
	.goldmedal {
		margin-bottom: 10px;
	}
	.goldmedal-text {
		font-size: 14px;
	}
	#footer_wrap {
		width: 100%;
	}
}