/* Bootstrap 5 compatibility: all rules are now scoped under .esrl */

.esrl * {
	padding: 0;
	margin: 0;
}

.esrl {
	font-family: Helvetica, Verdana, sans-serif;
	color: black;
	background-color: white;
	overflow-x: auto;
	margin: 5px;
	line-height: 1.5;
	font-size: 100.1%;
}

/* give the page some size limits via the containing div */
.esrl > div {
	max-width: 164em;
	min-width: 48em;
}

/* site-wide default style for hypertext links */
.esrl a {
	text-decoration: none;
	color: #006699;
}

.esrl a:hover {
	text-decoration: underline;
}

/* site-wide default image style */
.esrl img {
	/*	display: block;  */
	border: none;
}

/* default site-wide settings for heading text */
.esrl h1 { font-size: 140%; }
.esrl h2 { font-size: 130%; }
.esrl h3 { font-size: 120%; }
.esrl h4 { font-size: 110%; }

.esrl .clear {
	clear: both;
	height: 1px;
}

/* a class for navigating and presentation on text browsers */
.esrl .textvers {
	display: none;
}

/* a class to highlight important text */
.esrl .alert {
	clear: both;
	width: 100%;
	height: 1.5em;
	text-align: center;
	color: red;
	font-size: 120%;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em 0em 0em 0em;
}

/* system maintenance notice */
.esrl .notice {
	font-size: 80%;
}

/* default URL style, using the italic form of the browser's font */
.esrl .url {
	font-style: italic;
}

/* A div which contains everything on the page. This was needed when */
/* developing the site layout. Might be unnecessary in the future.   */
.esrl #container {
	border: solid 1px #bbb;
	margin: 5px;
}

/* the top horizontal section of content, containing the minor and  */
/* major headers.                                                   */
.esrl #banner {
	height: auto;
	border-bottom: solid 1px #006699;
}

.esrl #minor_header {
	background-color: #006699;
	color: white;
	white-space: nowrap;
	font-size: 90%;
	font-weight: bold;
	padding: 0.4em 0.2em 0.3em 0.5em;
	height: auto;
	border-bottom: solid 1px #000066;
	text-align: left;
}

.esrl #minor_header a {
	color: white;
}

/* This makes up most of the banner content. Includes the NOAA/ESRL */
/* logos and search elements.                                       */
.esrl #major_header {
	clear: both;
	background: #091760 url(/img/gradient.gif) top left repeat-y;
	height: auto;
	min-height: 85px;
	width: auto;
}

.esrl #major_header img {
	clear: none;
	float: left;
	border: none;
}

.esrl #search {
	clear: none;
	float: right;
	padding: 5px;
	width: 13em;
	font-weight: bold;
	font-size: 80%;
	color: white;
	white-space: nowrap;
	background-color: #000066;
}

.esrl #search a {
	color: white;
}

.esrl #search input {
	font-size: 80%;
}

/* the major site navigation elements, currently styled in a horizontal bar  */
.esrl #major_nav {
	clear: both;
	height: 1.7em;
	background-color: #ccddff;
	color: #006699;
	border-top: solid 1px #000066;
}

/* a list styled to show its items in horizontal fashion, with "child" */
/* lists displayed as pull-down submenus.                              */

/* this sets lists within lists to be menus which are hidden */
/* until the user mouses over the "parent" list item         */
/* used by menus - maybe we should associate them with #major_nav, #minor_nav */
.esrl #nav li ul {
	display: none;
	position: absolute;
	top: auto;
	left: auto;
	font-weight: normal;
	background: white;
	border: none;
	z-index: 100;
	width: 100%;
}

/* sets an unordered list which is a child of another list item */
/* to be positioned at the upper left of the parent list item */
.esrl #nav li>ul {
	top: auto;
	left: auto;
}

/* displays the child list when the user mouses over the parent list item */
.esrl #nav li:hover ul, .esrl #nav li.over ul {
	display: block;
	background-color: #bbb;
}

.esrl ul#nav {
	list-style: none;
	font-size: 90%;
	padding: 0em 0em 0em 13em;
	white-space: nowrap;
}

.esrl ul#nav a {
	display: block;
	font-weight: bold;
	color: #000066;
	text-decoration: none;
	line-height: 1.0em;
	padding: 0.5em 0.8em 0em 0.8em;
	height: auto;
}

.esrl ul#nav li {
	display: block;
	float: left;
	text-align: center;
	background-color: inherit;
	width: auto;
	height: auto;
	border: none;
	position: relative;
	z-index: 100;
}

.esrl ul#nav li:hover {
	background-color: #006699;
	color: white;
}

.esrl ul#nav a:hover {
	background-color: #006699;
	color: white;
	text-decoration: none;
}

.esrl ul#nav li ul {
	width: 18em;
	border: none;
	top: 1.6em;
	left: 0px;
}

.esrl ul#nav li li {
	display: block;
	border: solid 1px #bbb;
	background-color: white;
	text-align: left;
	height: auto;
	width: 100%;
	position: relative;
	z-index: 100;
}

.esrl ul#nav li li a {
	display: block;
	font-weight: normal;
	width: 90%;
	height: 100%;
	padding: 0.4em;
	border: none;
	background-color: #FFFFFF;
}

.esrl ul#nav li li a:hover {
	background-color: #ddd;
	color: black;
}

.esrl ul#nav li li:hover {
	background-color: #ddd;
}

.esrl ul#nav li.over ul {
	top: 1.5em;
	left: 0em;
}

.esrl #pbody {
	float: none;
	width: inherit;
	height: auto;
	border: none;
}

.esrl #minor_nav {
	background: #eee url(/img/point.gif) top right repeat-y;
	float: left;
	width: 13em;
	height: 100%;
	padding: 0em 2px 0em 0em;
	margin: 0px 0px 5px 0px;
	color: #000066;
	border: none;
}

.esrl #minor_nav dt a {
	color: #000066;
}

.esrl #minor_nav a {
	color: #000066;
}

.esrl #minor_nav a:hover {
	text-decoration: underline;
	color: #000066;
}

.esrl #minor_nav p {
	padding: 5px;
}

.esrl #minor_nav dl {
	font-weight: bold;
	font-size: 80%;
}

.esrl #minor_nav dt {
	display: block;
	padding: 1px 0px 1px 0px;
	width: 100%;
	background: #ccc;
	border: none;
	text-align: center;
}

.esrl #minor_nav dt a {
	display: block;
	padding: 2px 0px 2px 0px;
	width: 100%;
}

.esrl #minor_nav dt a:hover {
	background-color: #eee;
	text-decoration: none;
}

.esrl #minor_nav dd {
	font-weight: normal;
	margin: 0em 0.5em 1.0em 0.5em;
	padding: 0.3em;
	border: none;
	background: inherit;
}

.esrl #minor_nav ul {
	list-style: none;
}

.esrl #vertnav {
	clear: both;
	color: #000066;
	list-style: none;
	white-space: nowrap;
	font-size: 90%;
	width: 100%;
	z-index: 0;
}

.esrl #vertnav li ul {
	display: none;
	position: absolute;
	top: auto;
	left: auto;
	font-weight: normal;
	background: white;
	border: none;
	z-index: 100;
	width: 100%;
}

.esrl #vertnav li>ul {
	top: auto;
	left: auto;
}

.esrl #vertnav li:hover ul, .esrl #vertnav li.over ul {
	display: block;
	background-color: #cecece;
}

.esrl #vertnav li {
	display: block;
	text-align: center;
	background-color: inherit;
	border-top: solid 1px #bbb;
	border-right: none;
	border-bottom: solid 1px #bbb;
	border-left: solid 1px #bbb;
	width: 100%;
	margin: 0.5em 0em 0em 0em;
	height: auto;
	color: #006699;
	position: relative;
	z-index: 100;
}

.esrl #vertnav a {
	display: block;
	font-weight: bold;
	text-decoration: none;
	padding: 0.2em 0em 0.2em 0em;
	color: #000066;
}

.esrl #vertnav a:hover {
	text-decoration: none;
	background-color: #bbb;
	width: 100%;
}

.esrl #vertnav li:hover {
	background-color: #dfdfdf;
}

.esrl #vertnav li ul {
	list-style: none;
	width: 15.5em;
	top: 0em;
	left: 12em;
}

.esrl #vertnav li li {
	display: block;
	font-size: 90%;
	text-align: left;
	background: white;
	color: black;
	margin: 0em; /* FF error: inherits background */
	border: solid 1px black;
	height: auto;
	position: relative;
	z-index: 100;
}

.esrl #vertnav li li a {
	padding: 0.3em 0em 0.2em 0.4em;
}

.esrl #vertnav li li a:hover {
	width: auto;
	background-color: #ddd;
}

.esrl #vertnav li li.over {
	background-color: #ddd;
}

.esrl #vertnav li li:hover {
	background-color: #ddd;
}

.esrl #vertnav li:hover ul, .esrl li.over ul {
	display: block;
}

.esrl #vertnav li:hover, .esrl li.over {
	background-color: #bbb;
	z-index: 200;
}

.esrl #content {
	padding: 0em 0em 0em 1em;
	border-top: solid 1px white;
	border-bottom: solid 1px white;
	border-left: solid 13em #ddd;
	background: white url(/img/point.gif) top left repeat-y;
}

.esrl #content_nostripe {
	padding: 0em 0em 0em 1.5em;
	background: white url(/img/point.gif) top left repeat-y;
}

.esrl #content_nostripe p {
	margin: 0.5em 0em 0.3em 0em;
	padding: 0.5em 0.5em 0.2em 0.5em;
}

.esrl #content_nostripe p.indent {
	margin: 0em 0em 0.3em 0em;
	padding: 0em 0.5em 0.2em 1.5em;
}

/* default styling for unordered lists within the page content div */
.esrl #content_nostripe ul {
	margin: 0.3em 1.0em 1.0em 2.0em;
	background-color: transparent;
}

.esrl #content_nostripe ol {
	margin: 0.3em 1.0em 1.0em 2.0em;
	background-color: transparent;
}

.esrl #content_nostripe ul li {
	margin: 0em 0em 0em 1.5em;
	padding: 0.1em 0.2em 0.2em 0.1em;
	text-align: left;
	background-color: transparent;
}

/* default styling for paragraphs within the page content div */
.esrl #content p {
	margin: 0.5em 0em 0.3em 0em;
	padding: 0.5em 0.5em 0.2em 0.5em;
}

.esrl #content p.indent {
	margin: 0em 0em 0.3em 0em;
	padding: 0em 0.5em 0.2em 1.5em;
}

/* default styling for unordered lists within the page content div */
.esrl #content ul {
	margin: 0.3em 1.0em 1.0em 2.0em;
	background-color: transparent;
}

.esrl #content ol {
	margin: 0.3em 1.0em 1.0em 2.0em;
	background-color: transparent;
}

.esrl #content ul li {
	margin: 0em 0em 0em 1.5em;
	padding: 0.1em 0.2em 0.2em 0.1em;
	text-align: left;
	background-color: transparent;
}

/* an item floated to the upper right of the page content */
/* use id rather than class, since we only expect one news item per page */
.esrl blockquote#news {
	float: right;
	width: 170px; /* width set to accomodate image in this case */
	height: auto;
	margin: 10px 10px 2em 2em;
	background-color: transparent;
	font-weight: bold;
	color: #006699;
	text-align: left;
}

.esrl blockquote#news div {
	font-size: 80%;
	padding: 0px 0px 5px 0px;
	margin: 0em 0em 2.0em 0em;
	background-color: #ddd;
	border: solid 1px #bbb;
}

.esrl blockquote#news h2 {
	font-size: 110%;
	color: #000066;
	padding: 0.3em 0em 0.2em 0.5em;
	width: auto;
	background-color: #bbb;
	border: none;
}

.esrl blockquote#news ul {
	list-style: none;
	margin: 0em;
}

.esrl blockquote#news ul li {
	font-weight: normal;
	color: #000066;
	padding: 0.2em 0.5em 0.5em 15px;
	margin: 0em;
}

.esrl blockquote#news ul li a {
	color: #000066;
}

.esrl blockquote#news p {
	margin: 0px 5px 0px 15px;
	padding: 0.2em 0em 0em 0em;
	font-weight: normal;
	color: #000066;
}

.esrl blockquote#news img {
	clear: both;
	padding: 5px 0px 5px 0px;
	display: block;
}

/* the page footer */
.esrl #footer {
	clear: both;
	font-size: 80%;
	background: #000066 url(/img/gradient.gif) top left repeat-y;
	color: white;
	padding: 1.0em 0.7em 0.6em 0.7em;
	margin: 0em;
	line-height: 1.3em;
	width: auto;
	height: 4em;
	border: none;
}

.esrl #footer a {
	color: white;
}

/* a div containing links to the organizations shown in the footer. */
.esrl #orgs {
	float: left;
	text-align: left;
	padding: 0em 0.2em 0em 0em;
}

/* a div containing policy-type links shown in the footer. */
.esrl #policies {
	clear: none;
	float: right;
	text-align: right;
}