/* Style sheet for all documents */

@import url(https://fonts.googleapis.com/css?family=Exo:600);

/* LAYOUT */

body {
	background: #ddd url(/parts/background.jpg) top center no-repeat fixed;
	margin: 0;
	padding: 0;
	}

#frame {
	background: #fff;
	width: 900px;
	margin: 0 auto;
	position: relative;
	border-left: solid #f3f3f3 10px;
	border-right: solid #f3f3f3 10px;
	box-shadow: 0px 0px 20px #bbb; 
	}
	#frame:after {
		display: block;			/* clearfix for DW and old IE */
		content:  
		clear: both;
		visibility: hidden;
		height: 0;
		}

#breadcrumb {
	position: absolute;
	top: 170px;
	left: 15px;
	}

#header {
	width: 900px;
	height: 155px;
	position: relative;
	z-index: 100;
	margin-bottom: 50px;		/* MAKE ROOM FOR TEMPORARY BANNER IN PARTS/HEADER.INC.PHP */
	}

	#toplogo {
		margin: 0 -10px;
		width: 920px;
		height: 115px;
		background: #f3f3f3 url(/parts/background.jpg) top no-repeat;
		}
	#toplogo a {
		display: block;
		position: absolute;
		left: 0;
		bottom: 35px;
		width: 28%;
		}
	#tagline {
		position: absolute;
		left: 29%;
		bottom: 46px;
		width: 47%;
		height: 3em;
		overflow: auto;
		}
	#search {
		position: absolute;
		right: 0;
		bottom: 57px;
		width: 23%;
		}
		#search label {
			display: block;
			float: left;
			width: 87%;
			height: 34px;
			margin-right: 3px;
			position: relative;
			}
			#search label span,
			#search label input {
				position: absolute;
				width: 98%;					/* can't do 100% bc input adds padding and border */
				height: 30px;
				text-align: left;
				}
			#search label span {
				left: 0.5em;
				top: 50%;
				margin-top: -0.7em;
				}
			#search label input {
				top: 0;
				left: 0;
				opacity: .8;
				}
			#search label input:focus {
				opacity: 1;
				}
		#search input[type="image"] {
			margin-top: 10px;
			}
			
	a.skip {
		position: absolute; 
		z-index: -10;
		}
	#topmenu {
		position: absolute;
		left: 0;
		top: 115px;
		width: 900px;
		height: 40px;
		background: #048 url(/parts/topmenu.jpg) bottom repeat-x;
		box-shadow: 0px 2px 3px #333; 
		}
	
#content {
	width: 715px;				/* ( 500 mid + 15 gap + 200 rig ) + 15 pad = 730 total width */
	margin: 0;
	margin-top: 50px;			/* makes space for breadcrumb */
	padding-right: 15px;
	float: right;
	margin-bottom: 15px;
	}
	#content.nocrumb {
		margin-top: 20px;
		}
	#middle {
		width: 500px;
		margin: 0;
		float: left;
		}
	#rightside {
		width: 200px;
		margin: 0;
		float: right;
		}

#actionbar {
	width: 125px;				/* 15 pad + 125 wid + 14 pad + 1 bor = 155 total width ; 155 + 15 gap + 730 = 900 */
	margin-top: 50px;
	padding-right: 14px;
	border-right: solid 1px #ddd;
	padding-left: 15px;
	margin-bottom: 15px;
	float: left;
	}

#footer {
	clear: both;
	margin: 0 -10px;
	margin-top: 15px;
	width: 920px;
	height: 100px;
	padding: 10px 0;
	background: #ddd url(/parts/background-bottom.jpg) top repeat-x;
	position: relative;
	}
	#pnt {
		position: absolute;
		top: 10px;
		left: 10px;
		}
		#pnt,
		#pnt img {
			height: 50px;
			width: 165px;
			}
	#NOAA {
		position: absolute;
		top: 10px;
		right: 10px;
		}
		#NOAA,
		#NOAA img {
			height: 50px;
			width: 50px;
			}
	#footer p {
		padding: 0;
		margin-top: 0;
		margin-left: 190px;
		margin-right: 70px;
		}
	#mobile-notice {
		display: none;
		}


/* UNIVERSAL STYLES */

body, div, p, ul, ol, li, dt, dd, a, input, select, textarea, button {
	font-family: "Trebuchet MS", "Lucida Sans", Calibri, Helvetica, Arial, sans-serif;
	font-weight: normal;
	}
h1, h2, h3, h4 {
	font-weight: bold;
	}
h1 {
	text-align: center;
	font-size: 225%;
	line-height: 80%;
	letter-spacing: -1.5px;
	color: #887;
	margin-bottom: 0.75em;
	}
h2 {
	font-size: 150%;
	line-height: 100%;
	letter-spacing: -1px;
	margin-top: 0;
	margin-bottom: 0.25em;
	}
ul {
	list-style: outside;
	margin: 0;
	padding: 0;
	}
	h2 + ul,
	h3 + ul {
		margin-top: 0.5em;
		}
ul li {
	list-style: square;
	margin-left: 1.5em;
	margin-bottom: 0.5em;
	padding: 0;
	}
ul li ul {
	margin-top: 0.25em;
	}
ul li li {
	list-style: circle;
	}
tr {
	vertical-align: top;
	}
a {
	text-decoration: none;
	font-weight: 700;
	color: #05a;
	background: none;
	}
a:visited {
	color: #036;
	}
a:hover,
a:focus,
a:active {
	background: #fc5;
	border-radius: 4px;
	}
a img {
	border: none;
	}
abbr {
	border-bottom: dashed #05a 1px;
	}
	abbr:hover {
		background: #ddd;
		}
blockquote {
	margin: 1em 2em; 
	font-size: 120%; 
	line-height: 1.75em; 
	color: #776;
	}
.center {
	text-align: center;
	}
.small {
	font-size: 80%;
	}
.clear {
	clear: both;
	}


/* ESSENTIAL ELEMENT STYLES */

#header {
	text-align: center;				/* centers #topmenu */
	}

	#toplogo {
		text-align: left;
		}
		#toplogo a,
		#toplogo a:visited {
			font-family: Exo, serif;
			font-size: 70px;
			font-weight: 600;
			letter-spacing: -1px;
			color: #036;
			}
		#gov {
			font-size: 50%;
			color: #05a;
			}
		#tagline {
			font-size: 105%;
			font-style: italic;
			text-align: left;
			}
	
	#search label {
		font-size: 75%;
		}
	
	#topmenu * {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: left;				/* overrides #header text-align */
		font-size: 14px;
		font-weight: normal;
		}
	#topmenu > ul,
	#topmenu > ul > li {				/* selects only visible menu items */
		display: inline-block;
		height: 40px;					/* matches top of #topmenu li:hover ul */
		position: relative;
		}
	#topmenu > ul > li > a {
		font-weight: bold;
		font-size: 18px;
		line-height: 18px;
		}
	#topmenu li ul {
		display: none;					/* hides dropdowns until needed */
		}
	#topmenu li:hover ul,
	#topmenu li:focus ul {				/* doesn't include :active because that makes no sense */
		display: block;					/* reveals dropdowns */
		position: absolute;
		top: 40px;						/* matches height of #topmenu > ul li */
		left: 0;
		z-index: 500;
		background: #033466 url(/parts/topmenu-sub.jpg) top repeat-x;
		border-radius: 10px;
		border-top-left-radius: 0;
		box-shadow: 2px 2px 3px #333; 
		}
	#topmenu li ul.last {
		left: -3em;
		border-top-left-radius: 10px;
		}
	#topmenu a {
		display: block;
		color: #fff;
		padding-left: 15px;
		padding-right: 15px;
		}
	#topmenu > ul > li > a {			/* selects only visible menu items */
		height: 20px;					/* 20px + 10px padding-top + 10px padding-bottom = 40px */
		padding-top: 10px;
		padding-bottom: 10px;
		}
	#topmenu li:hover li a,
	#topmenu li:focus li a {
		display: block;					/* creates full-width button */
		background: none;
		width: 10em;
		padding-top: 7px;
		padding-bottom: 7px;
		}
	#topmenu li li {
		position: relative;				/* breaks IE 7 */
		}
	#topmenu li:hover li.popup > a:after,
	#topmenu li:focus li.popup > a:after {
		content: url(/parts/submenu.png);
		padding-top: 3px;
		float: right;
		}
	#topmenu li:hover li ul,
	#topmenu li:focus li ul {
		display: none;					/* hides submenus until needed */
		}
	#topmenu li:hover li:hover ul,
	#topmenu li:focus li:focus ul {
		display: block;					/* reveals submenus */
		position: absolute;
		top: 0;
		left: 11.5em;
		}
	#topmenu li:hover ul.last li:hover ul,
	#topmenu li:focus ul.last li:focus ul {
		left: -11.5em;
		border-top-left-radius: 10px;
		border-top-right-radius: 0;
		}
	#topmenu a:hover,
	#topmenu a:focus,
	#topmenu a:active,
	#topmenu li:hover li a:hover,
	#topmenu li:focus li a:focus {
		background: orange url(/parts/topmenu-hover.jpg) top repeat-x;
		border-radius: 0;
		}
		#topmenu li:hover li:first-child > a:hover,
		#topmenu li:focus li:first-child > a:focus {
			border-top-right-radius: 10px;
			}
		#topmenu li:hover li:last-child > a:hover,
		#topmenu li:focus li:last-child > a:focus {
			border-radius: 0 0 10px 10px;
			}
		#topmenu li:hover ul.last li:first-child > a:hover,
		#topmenu li:focus ul.last li:first-child > a:focus {
			border-radius: 10px 0 0 0;
			}
		#topmenu li:hover ul.last > li:first-child > a:hover,
		#topmenu li:focus ul.last > li:first-child > a:focus {
			border-radius: 10px 10px 0 0;
			}

#breadcrumb {
	font-size: 90%;
	}
	#breadcrumb a{
		font-weight: normal;
		}

#actionbar {
	font-size: 80%;
	}
	#actionbar h2,
	#actionbar h4 {
		margin-top: 1.33em;
		font-size: 100%;
		line-height: normal;
		letter-spacing: normal;
		text-transform: uppercase;
		text-align: left;
		margin-bottom: 10px;
		}
	#actionbar ul li,
	#actions ul li {			/* #actions sometimes appear outside #actionbar */
		list-style: none;
		margin-left: 0;
		margin-bottom: 0.8em;
		}
	#actionbar a,
	#actions a {				/* #actions sometimes appear outside #actionbar */
		color: #776;
		font-weight: normal;
		}
		#actionbar a:hover,
		#actionbar a:focus,
		#actionbar a:active,
		#actions a:hover,
		#actions a:focus,
		#actions a:active {
			color: #332;
			}

	#actionbar .subsection {
		margin-top: 1em;
		margin-left: 15px;
		display: none;
		}
	#actionbar li:hover .subsection,
	#actionbar li:focus .subsection,
	#actionbar li:active .subsection
	 {
		display: block;
		}

	#actions a {
		width: 100%;
		position: relative;
		text-align: left;
		}
	#actions img {
		position: absolute;
		left: 0;
		top: 0;
		width: 32px;
		}
	#actions span {
		display: block;
		margin-left: 37px;
		min-height: 32px;
		}

#footer {
	font-size: 75%;
	}
	#pnt {
		background: #fc5;
		box-shadow: 0px 0px 8px #ccc; 
		}
	#footer img:hover,
	#footer img:focus,
	#footer img:active {
		opacity: .6;
		}


/* DECORATIVE FEATURES */

p#intro {
	margin-top: 0;
	}
	p#intro:first-letter {
		font-size: 100px;
		line-height: 70px;
		color: #887;
		float: left;
		}
li a {
	display: block;
	}
	ul.noblock li a {
		display: inline;
		}
.more {
	text-align: left;
	text-transform: uppercase;
	font-style: italic;
	font-size: 85%;
	}
	.more:after,
	.arrow:after {
		content: url(/parts/arrow.png);
		vertical-align: middle;
		padding-left: 5px;
		}
.arrow {
	display: block;
	}
a.top {
	text-transform: uppercase;
	font-style: italic;
	font-size: 70%;
	}
html[lang="zh"] a.more,
html[lang="zh"] a.top {
	font-style: normal;
	font-size: 75%;
	}
.rounded {
	border-radius: 10px;
	}
.img-l {
	float: left;
	margin-right: 1em;
	}
.img-r {
	float: right;
	margin-left: 1em;
	}
.inset {
	background-color: #ddc;
	padding: 5px;
	margin: 1em;
	font-size: 80%;
	font-style: italic;
	border-radius: 12px;
	box-shadow: 1px 1px 4px #333; 
	}
	.left {
		float: left;
		margin-left: 0;
		}
	.right {
		float: right;
		margin-right: 0;
		}
	.centered {
		margin-left: auto;
		margin-right: auto;
		}
	.inset img {
		border-radius: 10px;
		}
.linebefore {
	padding-top: 1em;
	border-top: solid #ddd 1px;
	margin-top: 1em;
	}
.draft {
	outline: dotted red 3px;
	background: pink;
	}
.update {
	text-transform: uppercase;
	font-size: 80%;
	font-weight: bold;
	font-style: italic;
	background: #282;
	color: #fff;
	padding: 0 3px;
	}
.linklist li a {
	display: inline;
	}
	.linklist a:after {
		content: url(/parts/arrow.png);
		vertical-align: middle;
		padding-left: 5px;
		}
.unblue,
p.hovery a,
ul.hovery a,
div.hovery a {
	color: #000;
	font-weight: normal;	
	}
	p.hovery a,
	ul.hovery li a,
	div.hovery a,
	div.hovery li a {
		display: block;
		}
	.reblue,
	.hovery .reblue,
	p.hovery a .more,
	ul.hovery a .more,
	div.hovery a .more {
		color: #05a;
		font-weight: bold;
		}
.banner {
	position: relative; 
	margin-top: 0;
	width: 500px; 				/* default is one column width */
	height: 180px;
	}
	.banner img {
		position: absolute; 
		width: 500px;
		height: 180px;
		top: 0; 
		left: 0;
		border-radius: 15px;
		}
	.banner span {
		position: absolute;
		bottom: 10px;
		left: 10px;
		color: #fff;
		text-shadow: 2px 1px 2px #000;
		text-align: left;
		z-index: 10;
		}
	.wider,
	.wider img {
		width: 715px;
		height: 200px;
		}


/* BOXES */

.shadowbox {
	display: block;
	padding: 10px;
	overflow: hidden;
	border: solid 1px #ddd;
	border-radius: 10px !important;					/* overrides a:hover */
	box-shadow: 1px 1px 3px #888; 
	margin-bottom: 20px;
	}
	a.shadowbox {
		border: solid 1px #05a;
		}
		a.shadowbox:hover,
		a.shadowbox:focus,
		a.shadowbox:active {
			background: #fc5;
			}
	.shadowbox h2,
	.shadowbox h3 {
		margin: .25em 0 0;
		padding: 0;
		font-size: 125%;
		line-height: 85%;
		letter-spacing: normal;
		}
		.shadowbox h2 a,
		.shadowbox h3 a {
			display: block;
			}
		.shadowbox h2.linebefore,
		.shadowbox h3.linebefore {
			padding-top: 1em;
			}
	.shadowbox.small {
		font-size: 90%;
		}
	.shadowbox .autoheight {
		max-width: 96%; 
		margin: auto;
		box-shadow: none;
		}
	.gradient75,
	.gradient75-static {
		background: #fff url(/parts/gradients/10x75.jpg) top repeat-x;
		}
		.gradient75:hover,
		.gradient75:active {
			background: #f7f7f7 url(/parts/gradients/10x75h.jpg) top repeat-x;
			}
	.gradient500,
	.gradient500-static {
		background: #fff url(/parts/gradients/10x500.jpg) top repeat-x;
		}
		.gradient500:hover,
		.gradient500:active {
			background: #f7f7f7 url(/parts/gradients/10x500h.jpg) top repeat-x;
			}

.sidebar {
	background: #eee;
	padding: 2px 10px;
	border-radius: 10px;
	box-shadow: 1px 1px 4px #333; 
	margin-bottom: 15px;
	font-size: 95%;
	}

.box {
	display: block;
	width: 190px;					/* 5 + 190 + 5 = 200 */
	height: 80px;					/* 10 + 80 + 10 = 100 */
	padding: 10px 5px;
	border-radius: 10px !important;
	box-shadow: 1px 1px 4px #333; 
	margin-bottom: 15px;
	background: #47a url(/parts/box-gradient.jpg) top repeat-x;
	color: #fff;
	text-align: center;
	position: relative;
	}
div.box:hover,
div.box:focus,
div.box:active {
	background: #048;
	}
a.box {
	font-size: 125%;
	line-height: 85%;
	text-shadow: 2px 1px 2px #333; 	
	}
a.box,
.box a,
.icon200x120 a {
	color: #fff !important;
	}
	a.box:hover,
	a.box:focus,
	a.box:active,
	.box a:hover,
	.box a:focus,
	.box a:active,
	.icon200x120 a:hover,
	.icon200x120 a:focus, 
	.icon200x120 a:active {
		background: #d70;
		}

.box a {
	display: block;						/* applies to titles of boxes with lists etc. */
	}
.box h3 {
	margin: 0;
	padding: 0;
	padding-bottom: 0.5em;
	font-size: 125%;
	line-height: 85%;
	text-shadow: 2px 1px 2px #333; 	
	}
.box ul, 
.box li {
	text-align: left;
	font-size: 95%;
	}
.autoheight {
	height: auto;
	}
	
.icon200x120,
.icon200x120 a,
.icon200x120 img {
	width: 200px;
	height: 120px;
	}
.icon200x120 {
	background: #fc5;
	box-shadow: 1px 1px 4px #333; 
	margin-bottom: 15px;
	position: relative;
	}
.icon200x120 a,
.icon200x120 img {
	position: absolute;
	top: 0;
	left: 0;
	}
.icon200x120 a:hover,
.icon200x120 a:active,
.icon200x120 a:focus {
	opacity: .6;
	}
.icon200x120,
.icon200x120 a,
.icon200x120 img {
	border-radius: 10px;
	}
.icon200x120 span {
	position: absolute;	
	z-index: 10;
	font-size: 125%;
	line-height: 85%;
	color: #fff;
	width: 190px;
	padding: 0 5px;
	text-align: center;
	text-shadow: 2px 1px 2px #333; 	
	}

table.brown {
	margin: auto;
	border-spacing: 1px;
	padding: 2px;				/* creates gap to external border, no internal effect */
	border: solid 3px #998;
	border-radius: 5px;
	box-shadow: 1px 1px 4px #333; 
	}
	table.brown th,
	table.brown td {
		padding: 5px;
		}
	table.brown th {
		text-transform: uppercase;
		font-size: 75%;
		vertical-align: middle;
		white-space: nowrap;
		background: #998 url(/parts/gradients/th-10x200.jpg) center repeat-x;
		color: #fff;
		}

table.hovery {
	border-spacing: 0px;
	padding: 3px;
	}
	table.hovery tr:nth-child(even) {
		background: #ddc;
		}
	table.hovery tr:hover, 
	table.hovery tr:active, 
	table.hovery tr:focus {
		background: #eeb;
		}