/* <style> */

/************************* Begin ESSENTIAL. *************************/

body {
	color: black;
	background-color: white;
}
body#normal-page {
	margin: 0;
	padding: 0;
}
a:link {
	color: blue;
}
a:visited {
	color: #800080;
}
a:hover {
	color: #3399ff;
}
a:active {
	color: red;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, sans-serif;
}
/* An attempted workaround for an IE 6 bug where all tables inside a center aligned div have their contents center aligned by default.  We can't make all table cells left aligned because that would override any cells that have an align="center" or align="right" attribute, so we left align the general table contents instead.  Unfortunately this affects table header cells as well, but again we can't just make all table header cells center aligned because that would override any header cells that have an align="left" attribute, so we center align the table header contents instead.  Thus any header cells not enclosed in a table header tag will be left-aligned but that should be a rare occurance. */
table {
	text-align: left;
}
thead {
	text-align: center;
}
/* Put a little space between list items. */
li {
	margin-top: 2px;
	margin-bottom: 2px;
}
/* Make form elements use monospace font so their size will closely match their length/width that's specified in characters.  Otherwise the width of these elements varies widely across browsers/platforms.  Unfortunately, Netscape 4 won't apply a monospace font to textareas and select lists. */
input, textarea, select, option, optgroup {
	font-family: "Courier New", Courier, monospace;
}
/* Make buttons use a proportional font because a monospace font makes them take up too much space.  The [type=""] selectors only work in Mozilla/Netscape 6+ at the moment. */
button, input[type="submit"], input[type="reset"], input[type="button"] {
	font-family: Verdana, sans-serif;
}
.print-only, .aural-only {
	display: none;
}
@media all
{
	body {
		font-family: Georgia, serif;
	}
	.hide-from-modern {
		display: none;
	}
}
@media aural
{
	.aural-only {
		display: block;
	}
	.no-aural {
		display: none;
	}
}

/************************* End ESSENTIAL. *************************/
/************************* Begin LAYOUT. *************************/

/* The header and footer tables are blue bars with white text/links at the top and bottom of the page that contain the site title and few other things.  We initially make the background color a little lighter than we really want because Netscape 4 will revert to default colors (black text, blue links) inside any tables that are resized using the width attribute. */
#header-table {
	border-bottom: 1px solid white;
}
#footer-table {
	border-top: 1px solid white;
	font-size: 90%;
}
#header-table td, #footer-table td {
	color: white;
	background-color: #6699cc;
}
#header-table a, #footer-table a {
	color: white;
}
#site-title-cell {
	font-family: Verdana, sans-serif;
	font-size: 110%;
	font-weight: bold;
}
@media all
{
	#header-table td, #footer-table td {
		background-color: #4682b4;
	}
	#logo-cell {
		padding: 3px;
	}
}

/* The menu is the sidebar that contains the major navigation links.  It can be hidden/shown by modern browsers. */
#menu-cell {
	font-size: 95%;
	background-color: #f0f0f0;
	border-right: 1px solid #cccccc;
}
.menu-section h4 {
	font-size: 90%;
	color: #000080;
}
#menu-hide-link, #menu-show-link {
	display: none;  /* Hide these links from old browsers that won't be able to use them. */
}
#print-link-item {
	list-style-image: url(http://seagrantadm.gso.uri.edu/webnibus/img/print.gif);
}
#help-link-item {
	list-style-image: url(http://seagrantadm.gso.uri.edu/webnibus/img/help.gif);
}
@media all
{
	#menu-cell {
		padding: 0;
		empty-cells: show;
	}
	#menu-block {
		position: relative;  /* This is not only for positioning the menu itself, it's also needed to absolutely position the menu hide/show links inside this div. */
	}
	.menu-section {
		margin-bottom: 1.2em;
	}
	.menu-section h4 {
		margin: 0;
		padding: 3px 0.5em;
		background-color: #e3e3e3;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}
	.menu-section ul {
		margin: 0.4em 0.5em 0.6em 1.7em;
		padding: 0;
		color: #aaaaaa;
	}
	.menu-section ul li {
		margin: 2px 0;
	}
	#menu-hide-link {
		display: inline;
	}
	#menu-hide-link, #menu-show-link {
		position: absolute;
		top: 4px;
		right: 3px;
	}
}

/* The content cell contains the main content along with the navbar and page title.  The content block surrounds just the main content itself. */
@media all
{
	#content-cell {
		padding: 8px 16px;
	}
	#content-block {
		margin: 1.5em 0 1em 0;
	}
}

/* The navbar contains the links representing the current page's place in the site hierarchy (a.k.a. breadcrumbs). */
#navbar-block {
	font-size: 75%;
}
@media all
{
	#navbar-block {
		margin-bottom: 0.5em;
	}
}

/* The page title block contains the title along with the project info (if any). */
#page-title {
	font-size: 150%;
	text-align: center;
}
#project-info {
	font-size: 75%;
	text-align: center;
}
#project-info-print {
	font-size: 90%;
	border: 1px solid #999999;
	padding: 0.3em;
	margin-bottom: 1em;
}
@media all
{
	#page-title-block {
		background-color: #eef9ff;
		border: 1px solid #000080;
		border-bottom: 2px solid #000080;
	}
	#page-title {
		margin: 0;
		padding: 0.2em;
	}
	#project-info {
		margin-top: 3px;
		padding: 3px 0.5em;
		background-color: #c6dce8;
		border-top: 1px solid #000080;
	}
}

/************************* End LAYOUT. *************************/
/************************* Begin FORMS. *************************/

/* This attempts to remove the extra spacing that usually occurs when using forms.  It's especially necessary when forms are enclosed in table cells, so they fit nicely within the cell and don't have a blank line after them.  This has no effect in Netscape 4 unfortunately. */
form {
	margin: 0;
	padding: 0;
}

/* Tables used to present forms.  Netscape 4 won't change the border.  The background color is an attempted workaround for browsers that don't support the empty-cells feature so the cell borders don't appear to be missing even though they are. */
table.form {
	border: 1px solid #0066cc;
	border-bottom-style: none;
	background-color: #0066cc;
	text-align: left;
	empty-cells: show;
}
table.form th, table.form td {
	background-color: #ddeeff;
	border-style: none;
	border-bottom: 1px solid #0066cc;
}
table.form table th, table.form table td {
	border-style: none;
}
table.form caption {
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: 145%;
	font-weight: bold;
}
@media all
{
	table.form caption {
		padding: 5px;
	}
}

/* Form fields that can't (or shouldn't) be edited. */
input.no-edit {
	color: black;
	background-color: #ffee99;
	font-weight: bold;
}

/* Markers for required form fields. */
.required {
	color: red;
	font-weight: bold;
}

/* Nearly every button will be assigned to one of these classes in order to counteract the monospace font assigned to form inputs in general. */
.button, .button-big {
	font-family: Verdana, sans-serif;
	cursor: pointer;
}
.button-big {
	font-size: 110%;
}

/************************* End FORMS. *************************/
/************************* Begin LISTINGS. *************************/

/* Tables used to list things.  Netscape 4 won't change the border. */
table.listing {
	border: none;
	border-collapse: collapse;
	empty-cells: show;
}
table.listing th {
	border: 1px solid #666666;
	background-color: #cccc99;
}
table.listing td {
	border: 1px solid #aaaaaa;
}
table.listing table th, table.listing table td {
	border-style: none;
}
table.listing caption {
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: 145%;
	font-weight: bold;
}
@media all
{
	table.listing caption {
		padding: 5px;
	}
}

/* Explanatory notes that are sometimes necessary within the table headers of listings (e.g. "click title for more info"). */
table.listing th .th-note {
	font-size: 85%;
	font-weight: normal;
}
@media all
{
	table.listing th .th-note {
		margin-left: 0.5em;
	}
}

/************************* End LISTINGS. *************************/
/************************* Begin NOTICES. *************************/

/* Information that needs/deserves the user's attention such as errors, warnings, and notes.  HTML is a table with one header cell and one regular cell wrapped in a DIV. */
.notice-block th {
	font-family: Verdana, sans-serif;
	text-align: left;
}
.notice-block th, .notice-block td {
	border-style: none;
}
@media all
{
	.notice-block th {
		padding: 3px 0.5em;
	}
	.notice-block td {
		padding: 0.75em 1.5em;
	}
}

table.n-error {
	border: 2px solid red;
	font-size: 105%;
}
table.n-warning {
	border: 1px solid red;
}
table.n-error th, table.n-warning th {
	background-color: #ffddcc;
}

table.n-attention, table.n-note {
	border: 1px solid #ffd700;
}
table.n-attention th, table.n-note th {
	background-color: #ffffaa;
}

table.n-dull-note {
	border: 1px solid #aaaaaa;
}
table.n-dull-note th {
	background-color: #eeeeee;
}

table.n-ok {
	border: 1px solid green;
}
table.n-ok th {
	background-color: #aaeeaa;
}

table.n-error th, table.n-warning th, table.n-attention th {
	font-size: 110%;
}

/************************* End NOTICES. *************************/
/************************* Begin MISCELLANEOUS. *************************/

/* Quick-links, such as "Go back to select another option."  HTML is an unordered list wrapped in a single-celled table. */
table.quicklinks {
	border: 3px double #cceeff;
	background-color: #f9ffff;
}
table.quicklinks td {
	border-style: none;
	font-size: 95%;
}
@media all
{
	table.quicklinks ul {
		margin: 0.2em 0.5em 0.2em 1.5em;
		padding: 0;
	}
}

/* Navigation lists displayed after some action has been attempted (e.g. "Return to: ...").  HTML is a series of nested unordered lists wrapped in a DIV. */
.navlist-block {
	margin-top: 1.25em;
	padding-top: 0.25em;
	border-top: 1px solid #000080;
}
.navlist-block ul {
	list-style-image: url(http://seagrantadm.gso.uri.edu/webnibus/img/nav_arrow.gif);
	margin-top: 0;
	margin-bottom: 0;
}

/* When an H2-like header font is needed, but not as a block-level element with the line spacing before and after it. */
.h2 {
	font-family: Verdana, sans-serif;
	font-size: 145%;
	font-weight: bold;
}
/* Same as .H2, but for when an H3-like header font is needed. */
.h3 {
	font-family: Verdana, sans-serif;
	font-size: 110%;
	font-weight: bold;
}

/* When "font-size: large" and "font-size: small"-like fonts are needed, but ones that are more consistent in size across browsers/platforms. */
.large {
	font-size: 145%;
}
.small {
	font-size: 80%;
}

/* Text that needs/deserves the user's attention. */
.attn {
	color: red;
	font-weight: bold;
}

/* Explanatory text when no data was found. */
.no-data {
	font-style: italic;
}

/* Lists of links on the menu pages. */
ul.menu, ol.menu {
	font-size: 110%;
	font-weight: bold;
}
ul.menu li, ol.menu li {
	font-weight: normal;
}

/* Some standard grey background colors used, from lightest to darkest. */
.grey1 {
	background-color: #eeeeee;
}
.grey2 {
	background-color: #dddddd;
}
.grey3 {
	background-color: #cccccc;
}

/************************* End MISCELLANEOUS. *************************/
/************************* Begin HELP PAGES. *************************/

/* Give H2 and H3 tags borders on help pages so they stand out more. */
#help-page h2, #help-page h3 {
	padding: 2px;
	background-color: #f6f6f6;
	border-top: 1px solid #eeeeee;
	border-left: 1px solid #eeeeee;
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

/* Make definition terms bold and allow for spaced lists for better readability. */
#help-page dt {
	font-weight: bold;
}
dl.spaced-list dt {
	margin-top: 0.75em;
}
ul.spaced-list li, ol.spaced-list li {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* A block of links at the top of a help page to jump to specific topics. */
.help-topic-links {
	text-align: center;
	font-size: 90%;
	background-color: #eeeeee;
	padding: 3px;
}

/************************* End HELP PAGES. *************************/