/* layout */
* { margin: 0; padding: 0; border-width: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #777; font-weight: normal; text-decoration: none; }
html, body { height:100%; }
div#bodyDiv { position: relative; width: 100%; min-height: 100%; text-align: center; }
div#content { position: relative; margin: 0px auto; width: 920px; text-align: left; }



/* header */
table#header { margin: 0px auto; width: 900px; height: 44px; border-bottom: 3px solid #888; }

td#logo { width: 60px; vertical-align: top; }
td#logo a { color: #777; }
td#logo a img { position: relative; top: 7px; left: 6px; }

td#desc { width: 840px; vertical-align: bottom; text-align: right; padding-right: 6px; }
td#desc h2 { font-family: Verdana; font-size: 14px; color: #777; padding-bottom: 2px; }
td#desc h2 a { font-family: Verdana; font-size: 14px; color: #777; }
td#desc h2 a:hover { color: #005; text-decoration: underline; }



/* locations */
div#locSpace { height: 51px; }
h1#region { text-align: center; font-family: Verdana; font-size: 35px; color: #006; font-weight: normal; }

div#locationsBox { width: 898px; border: 1px solid #cccccc; margin: 0px auto; }
div#c1 { background-image: url(/i/mod-loc-tl.gif); background-repeat: no-repeat; background-position: top left; position: relative; left: -1px; top: -1px; }
div#c2 { background-image: url(/i/mod-loc-tr.gif); background-repeat: no-repeat; background-position: top right; position: relative; left: 2px; }
div#c3 { background-image: url(/i/mod-loc-br.gif); background-repeat: no-repeat; background-position: bottom right; position: relative; top: 2px; }
div#c4 { background-image: url(/i/mod-loc-bl.gif); background-repeat: no-repeat; background-position: bottom left; position: relative; left: -2px; }
div#cc { position: relative; left: 1px; top: -1px; text-align: center; padding: 5px; }		/* left-top re-centers the box. padding adjusts box height */

ul#locList li { display: inline; }
ul#locList li a { margin: 7px; font-family: Verdana; font-size: 14px; color: #777; }
ul#locList li a:hover { color: #005; text-decoration: underline; }



/* modules */
.modSpacer { height: 45px; }
td.mod { width: 920px; padding: 0px 10px; }			/* keeps page margin on right side of module if it expands bigger than content container */

.modDesc-c1 { background: #777 url(/i/mod-desc-tl.gif) no-repeat top left; }
.modDesc-c2 { text-align: left; background: url(/i/mod-desc-tr.gif) no-repeat top right; }
.modDesc-c2 h3 a { display: block; padding: 4px 0px 4px 8px; font-size: 15px; color: #fff; font-weight: bold; cursor: pointer; }

.modBox { text-align: center; margin: 0px auto; border: 1px solid #cccccc; padding: 20px 20px; }
/* ??? img.centered { display: block; margin: 0px auto; } */
.modBox a { font-size: 12px; color: #005; text-decoration: underline; }
.modBox a:hover { font-size: 12px; color: #777; text-decoration: underline; }

.modSource { text-align: right; font-size: 10px; color: #ccc; padding: 2px 2px; }
.modSource a { font-size: 10px; color: #ccc; }
.modSource a:hover { font-size: 10px; color: #005; text-decoration: underline; }



/* footer */
div#footSpacer { height: 65px; padding-bottom: 25px; }			/* padding-bottom should match Height of the footer */
div#pageFooter { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; height: 25px; }			/* Height of the footer, used to vertically position footer text off page bottom */
div#footMid { margin: 0px auto; width: 920px; font-family: Arial; font-size: 12px; color: #777; }
div#footMid a { font-family: Arial; font-size: 12px; color: #777; }
div#footMid a:hover { color: #005; text-decoration: underline; }



/* buoys */
table#buoyList {
	margin: 0px auto;
	width: 550px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000066;
	background-color: #aaaaaa;
	text-align: left;
}
table#buoyList td {
	font-size: 11px;
	color: #000066;
	background-color: #eee;
	padding: 2px 15px 2px 2px;
	white-space: nowrap;
}
table#buoyList td.bt-date {
	font-size: 9px;
	color: #777;
	background-color: #ccc;
	padding: 2px;
	text-align: right;
}	
table#buoyList td.bt-title {
	font-weight: bold;
	color: #006;
	background-color: #ccc;
	padding: 2px;
	text-align: center;
}
table#buoyList td.light {
	background-color: #ffe;
}
table#buoyList td.light a {
	font-size: 11px;
	text-decoration: none;
	color: #000066;
}
table#buoyList td.light a:hover {
	text-decoration: underline;
}



/* marine forecast */
table#marineForecast {
	margin: 0px auto;
	width: 840px;
}
table#marineForecast td {
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000;
	background-color: #ddd;
	text-align: left;
}
table#marineForecast td .bold {
	font-size: 16px;
	color: #000;
	font-weight: bold;
}
table#marineForecast td .red {
	font-size: 16px;
	color:  red;
}



/* form */
#title-line {
	margin: 40px auto 35px;
	width: 596px;
	border-bottom: solid 1px #ccc;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
}
table#feedback {
	margin: 0px auto 40px;
	width: 600px;
}
table#feedback td {
	text-align: left;
	padding: 0px 20px;
	vertical-align: bottom;
}
#feedbackBody {
	border: 1px solid #777;
	background-color: #eee;
	font-size: 18px;
	color: #333;
	width: 350px;
	height: 157px;
	padding: 5px;
}
.inputName {
	margin: 2px 0px 5px;
	border: 1px solid #777;
	background-color: #eee;
	padding: 5px;
	width: 180px;
	font-size: 18px;
	color: #333;
	vertical-align: middle;
}
#send-button {
	border: 1px solid green;
	width: 192px;
	height: 36px;
	margin-top: 18px;
	font-size: 18px;
	color: #333;
	background-color: #efe;
}
#send-button:hover {
	background-color: #dfd;
}
.msgErr {
	width: 596px;
	margin: 30px auto 0px;
	color: #c33;
}
.msgThanks {
	margin: 30px auto;
	color: #777;
	text-align: left;
	width: 586px;
	padding: 3px;
	line-height: 1.3;
}
.msgSent {
	margin: 0px auto 40px;
	color: #777;
	text-align: left;
	width: 566px;
	background-color: #eee;
	padding: 10px;
	line-height: 1.3;
}
.link {
	color: #006;
	text-decoration: underline;
}
.link:hover {
	color: #777;
}



/* CI demo */
table#cidemo {
	margin: 0px auto;
	width: 600px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000066;
	text-align: center;
}

a.ci-link1 { text-decoration: none; color: #555; font-size: 16px; }
a.ci-link1:hover { text-decoration: underline; color: #005;  font-size: 16px; }

img.ci-tiny { display: inline; margin: 0px 0px 1px; vertical-align: bottom; }