@font-face		{ font-family: 'OpenSans Regular';		src: url('/includes/fonts/OpenSans-Regular.woff')		format('woff'); }
@font-face		{ font-family: 'OpenSans Bold';			src: url('/includes/fonts/OpenSans-Bold.woff')			format('woff'); }
@font-face		{ font-family: 'OpenSans ExtraBold';	src: url('/includes/fonts/OpenSans-ExtraBold.woff')		format('woff'); }

input, select, textarea { 
	-ms-box-sizing:		content-box;
	-moz-box-sizing:	content-box;
	-webkit-box-sizing:	content-box; 
	box-sizing:			content-box;
	-webkit-appearance:	none;
	-moz-appearance:	none;
	appearance:			none;
}

body			{ padding:0px; margin:0px; background:url('/graphics/tide-times.png') repeat-x #ffffff; font:normal 13px 'OpenSans Regular', sans-serif; color:#333333; }
a				{ color:#222222; }


.fl				{ float:left; }
.fr				{ float:right; }
.clr			{ clear:both; }
.cp				{ cursor:pointer; }

.tal			{ text-align:left; }
.tac			{ text-align:center; }
.tar			{ text-align:right; }

.w30			{ width:  30px; }
.w50			{ width:  50px; }
.w80			{ width:  80px; }
.w100			{ width: 100px; }
.w125			{ width: 125px; }
.h40			{ height: 40px; }
.h100			{ height:100px; }
.w200			{ width:200px; }
.w400			{ width:100%; max-width:400px; }

.vis0			{ visibility:hidden;  display:none;  }
.vis1			{ visibility:visible; display:block; }
.vis2			{ visibility:visible; display:inline-block; }
.vis3			{ visibility:visible; display:table; }

#page			{ width:auto; max-width:1300px; margin:0px auto; min-height:265px; background:url('/graphics/seagull.png') top center no-repeat; }


#tide			{ position:relative; height:180px; padding:0px; margin:0px; }
#tide h1		{ position:absolute; display:inline; bottom:0px; left:0px; font:normal 72px 'OpenSans ExtraBold', sans-serif; letter-spacing:-6px; padding:0px; margin:0px; }
#tide h1 a		{ color:#ffffff; text-decoration:none; }


#tides			{ background:#ffffff; border-radius:5px; min-height:300px; }
#layout			{ border-collapse:collapse; padding:0px; margin:0px; width:100%; }

#lcol			{ width:220px; font-size:13px; padding:15px; }
#lcol p			{ text-align:center; padding-top:20px; }
#lcol p b		{ font-size:15px; }
#lcol .ttt		{ list-style:none; padding:0px 0px 8px 0px; }

#rcol			{ font-size:16px; padding:15px; }
#rcol h1		{ font:normal 26px 'OpenSans Regular', sans-serif; letter-spacing:-1px; padding:0px; margin:0px; }
#rcol h2		{ font:normal 22px 'OpenSans Regular', sans-serif; letter-spacing:-1px; padding:0px; margin:15px 0px 0px 0px; }


#count			{ background:#eeeeee; border-radius:5px; padding:10px; text-align:center; }
#count span		{ display:block; font-size:24px; }


#secure			{ background:#eeeeee; border-radius:5px; padding:10px; margin-top:30px; }
#secure img		{ float:left; height:40px; }
#secure b		{ display:block; }


#ad1			{ position:absolute; top:60px; right:10px; text-align:right; overflow:hidden; }
#ad2, #ad3		{ text-align:center; }
#ad1 img		{ width:auto; }
#ad2 img		{ width:auto; }
#ad3 img		{ width:auto; }
.ad				{ line-height:15px; }
.noads			{ text-decoration:none; color:#222222; }
.noads img		{ width:16px; height:16px; vertical-align:bottom; padding-right:4px; }

.panel			{ position:relative; float:left; margin:10px 20px 0px 0px; border:1px solid #cccccc; background:#f8f8f8; padding:10px; border-radius:5px; font-size:14px; }
.panel h4		{ margin:0px; padding:0px; font:normal 18px 'OpenSans Regular', sans-serif; }
.pw1			{ width:300px; }
.pw2			{ width:640px; }
.ph1			{ min-height:320px; }
.ph2			{ height:125px; }
.ph3			{ height:270px; }


#bookform		{ margin-bottom:15px; }
#bookform form	{ padding:0px; margin:0px; }
#bookform table	{ padding:0px; margin:0px; border-collapse:collapse; }
#bookform td	{ padding:0px; margin:0px; min-width:10px; }
#bookform img	{ width:30%; max-width:150px; min-width:50px; float:right; }

#hightide table	{ width:280px; padding:0px; margin:0px auto; border-collapse:collapse; }
#hightide td	{ padding:8px 4px; margin:0px; border-top:1px solid #aaaaaa; }
#hightide span	{ font-size:30px; color:#4d90fe; }
#hightide th	{ font:normal 20px 'OpenSans Regular', sans-serif; padding:5px 0px 10px 0px; }

.gobst			{ text-align:right; }
.gobst img		{ width:35px; vertical-align:bottom; }

.ttrow td		{ font-size:16px; }
#cframe			{ overflow:hidden; }

#clock			{ float:left; position:absolute; margin:8px; width:110px; height:110px; background:url('/graphics/clock/face.png') no-repeat center; background-size:100% 100%; }
#clock img		{ display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; }
.next_tide		{ float:right; clear:right; width:160px; margin-top:10px; font-size:13px; font-weight:bold; line-height:20px; }
.next_tide span	{ font-size:24px; font-weight:normal; }

#phases img		{ display:inline-block; width:42px; height:42px; padding:5px; border-radius:3px; }
#phases div		{ display:inline-block; margin:0px 0px 10px 15px; padding-bottom:4px; width:100px; line-height:22px; white-space:nowrap; vertical-align:top; font-size:13px; font-weight:bold; }
#phases span	{ display:block; font-size:24px; font-weight:normal; color:#4d90fe; }

.btn			{ border-width:0px; border-radius:4px; cursor:pointer; padding:5px 0px; font:normal 14px 'OpenSans Bold', sans-serif; min-width:20px; }
.txt			{ background-color:#ffffff; border:1px solid #aaaaaa; border-radius:2px; padding:3px 3px; font:normal 15px 'OpenSans Regular', sans-serif; }
.sel			{ background-image:url('/graphics/select-arrow.png'); background-size:14px 7px; background-repeat:no-repeat; background-position:right; }

.red			{ background:#d83534; color:#ffffff; }
.grn			{ background:#55c83c; color:#ffffff; }
.blu			{ background:#4d90fe; color:#ffffff; }
.ppl			{ background:url('/graphics/paypal.png') #ffc43a no-repeat center; background-size:75px; }
.gry			{ background:#d3d3d3; color:#c1c1c1; }
.sml			{ font-size:12px; padding:2px; }


#gmap_large		{ clear:both; border:1px solid #444444; height:600px; }
#gmap_small		{ border:1px solid #cccccc; width:280px; height:450px; float:right; background:#efefef; border-radius:5px; overflow:hidden; }

#omap_large		{ clear:both; border:1px solid #444444; height:600px; }
#omap_small		{ border:1px solid #cccccc; width:280px; height:450px; float:right; background:#efefef; border-radius:5px; overflow:hidden; }

#tidal			{ background:#dddddd; padding:15px; border-radius:5px; text-align:center; line-height:12px; margin-top:25px; }
#tidal span		{ font-size:10px; }

.banner			{ background:#cc0000; color:#ffffff; text-align:center; padding:10px 10px 15px 10px; border-radius:5px; margin-bottom:15px; }
.banner h3		{ padding:0px; margin:0px; font:normal 24px 'OpenSans Regular', sans-serif; letter-spacing:-1px; }

#tbar			{ position:absolute; top:0px; left:0px; width:100%; background:rgba(0, 0, 0, 0.25); }
#tbar span		{ display:block; width:100%; max-width:1300px; margin:0px auto; }
#tbar div		{ padding:0px 8px; }
#tbar a			{ display:inline-block; font-size:13px; font-weight:bold; color:#ffffff; text-decoration:none; vertical-align:top; padding:7px 0px 0px 0px; }
#tbar img		{ display:inline-block; width:24px; height:24px; padding:4px 4px 0px 0px; }


#graphs			{ position:relative; width:auto; max-width:630px; overflow:hidden; height:250px; margin:0px auto; border-left:1px solid #9fbdeb; }
#graphs table	{ position:absolute; border:none; border-collapse:collapse; }
#graphs th		{ padding:0px; margin:0px; width:90px; height: 24px; font:normal 11px 'OpenSans Bold', sans-serif; background:#4d90fe; color:#ffffff; opacity:0.66; }
#graphs td		{ padding:0px; margin:0px; width:90px; height:240px; }
#graphs img		{ display:block; cursor:crosshair; }

#chHorizont		{ position:absolute; width:630px; height:  1px; left:  0px; background:rgba(0, 0, 0, 0.66); cursor:crosshair; visibility:hidden; display:none; }
#chVertical		{ position:absolute; width:  1px; height:240px; top:  24px; background:rgba(0, 0, 0, 0.66); cursor:crosshair; visibility:hidden; display:none; }
#chDisplay1, #chDisplay2 { position:absolute; width:80px; padding:4px 0px; border-radius:3px;  background:#4d90fe; font:normal 11px 'OpenSans Bold', sans-serif; color:#ffffff; text-align:center; visibility:hidden; display:none; }
#chDisplay1		{ width:85px; bottom:0px; }
#chDisplay2		{ width:50px; right: 0px; }

#links			{ font:normal 12px 'OpenSans Regular', sans-serif; }
#links table	{ padding:0px; margin:0px; border-collapse:collapse; }
#links td		{ padding:0px; margin:0px; min-width:40px; }
#links img		{ width:32px; height:32px; }
input[type="radio"]	{ appearance:radio; margin-left:10px; -webkit-appearance:radio; -moz-appearance:radio; }
input[type="checkbox"]	{ margin:0px; padding:0px; appearance:checkbox; margin-left:20px; -webkit-appearance:checkbox; -moz-appearance:checkbox; }

#loginform h2	{ font-size:20px; margin-bottom:10px; }
#loginform td	{ padding:0px; margin:0px; min-width:80px; }
#loginform input[type="checkbox"]	{ appearance:checkbox; -webkit-appearance:checkbox; -moz-appearance:checkbox; }

#tabs			{ padding:0px; margin:0px 0px 20px 0px; list-style:none; background:url('/graphics/hr.png') bottom left repeat-x; }
#tabs li		{ padding:0px; margin:0px; display:inline-block; margin:0px 3px 0px 0px; }
#tabs a			{ padding:4px 12px; margin:0px; display:block; text-decoration:none; border-top:1px solid #aaaaaa; border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; font:normal 14px 'OpenSans Regular', sans-serif; border-top-right-radius:10px; }
.tab0			{ background:#eeeeee; border-bottom:1px solid #aaaaaa; }
.tab1			{ background:#ffffff; border-bottom:1px solid #ffffff; }

#faves			{ width:auto; min-width:300px; max-width:600px; margin:0px auto; border-collapse:collapse; }
#faves th		{ padding:0px; margin:0px; border-bottom:1px solid #aaaaaa; }
#faves td		{ padding:4px; margin:0px; }
#faves input	{ margin-left:8px; }

#action			{ border:1px solid #aaaaaa; width:600px; height:100px; visibility:hidden; display:none; }

#weather		{ position:relative; max-width:640px; height:400px; overflow:auto; }
#weather img	{ width:56px; height:56px; opacity:0.7; dispay:block; }
#weather p		{ padding:0px; margin:0px; display:table-cell; vertical-align:middle; }
#weather b		{ font-size:16px; }
.wcol			{ position:absolute; top:0px; width:68px; }
.wrows div		{ display:table; width:100%; font-size:12px; text-align:left;  }
.wrows p		{ border-top:1px dashed #4d90fe; }
.whead			{ font:normal 12px 'OpenSans Bold', sans-serif; color:#ffffff; background:#4d90fe; }
.wdata			{ background:#ffffff; border-radius:5px; }
.wdata div		{ display:table; width:100%; font-size:13px; text-align:center; border-left:1px solid #4d90fe; border-right:1px solid #4d90fe; }
.wend			{ border-bottom:1px solid #4d90fe; }
.wh1			{ height:30px; font-size:12px; }
.wh2			{ height:56px; }
.wh3			{ height:45px; }
.wh4			{ height:80px; }
.wsp			{ cursor:pointer; }

#inform td		{ padding:2px 4px; margin:0px; }
#inform textarea{ padding:0px; margin:0px; }
.infotbl		{ margin:15px 0px; border:1px solid #cccccc; background:#f8f8f8; padding:10px; border-radius:5px; font-size:14px; }
.infotbl td		{ min-width:120px; }

#gdpr			{ width:100%; border:1px dashed #aaaaaa; height:400px; }


#cart			{ width:100%; border-collapse: collapse; }
#cart td		{ padding:8px 12px; margin:0px; }
.cRows			{ background:#eeeeee; font-weight:bold; font-size:13px; }

#pwform td		{ padding:4px; }

#floodmap		{ width:90%; height:600px; border:1px solid #aaaaaa; }
#floodlist		{ list-style:none; }
#floodlist li	{ margin-bottom:10px; padding-left:25px; }
#floodlist span	{ font-size:11px; line-height:16px; }

#filter			{ padding:4px; border-radius:4px; background:#eeeeee; }
#portlist		{ margin-top:10px; }
#portlist div	{ border:2px solid #4d90fe; border-radius:3px; float:left; margin:0px 4px 4px 0px; width:155px; }
#portlist a		{ white-space:nowrap; overflow:hidden; display:block; background:#4d90fe; color:#ffffff; padding:2px 0px; text-align:center; font-size:13px; text-decoration:none; }

#status			{ margin:10px 20px; padding:10px; background:#f8f8f8; border:1px dashed #aaaaaa; border-radius:5px; }
#status td		{ min-width:30px; font-size:18px; }

#contact table		{ margin:0px 40px; }
#contact td			{ min-width:20px; }
#contact textarea	{ width:600px; height:200px; }
#contact div		{ display:inline-block; width:100px; height:28px; background-position:0px 0px; vertical-align:bottom; }

@media screen and (max-width:1280px) { 
	#gmap_small		{ float:none; width:100%; height:200px; margin-top:15px; }
}

@media screen and (max-width:1024px) { 
	#count			{ visibility:hidden; display:none; }
	#secure			{ visibility:hidden; display:none; }
	#lcol			{ padding: 0px; }
	#rcol			{ padding:10px; }
	#lcol, #rcol	{ display:block; width:auto; }

	#lcol p			{ width:auto; background:#444444; color:#ffffff; padding:8px 16px; margin:0px; text-align:left; border-bottom:1px solid #aaaaaa; cursor:pointer; }
	#lcol .ttt		{ text-align:center; }
	#lcol ul		{ list-style:none; padding:0px; margin:0px; visibility:hidden; display:none; }
	#lcol li		{ list-style:none; padding:0px; margin:0px; border-bottom:1px solid #aaaaaa; }
	#lcol li a		{ text-decoration:none; display:block; padding:8px 16px; }

	#ad1 img		{ visibility:hidden; display:none; }
	#ad2 img		{ visibility:hidden; display:none; }
	#ad3 img		{ visibility:hidden; display:none; }

	#contact table		{ margin:0px; }
	#contact textarea	{ width:500px; }
}

@media screen and (max-width:720px) { 
	#gmap_small		{ width:620px; display:block; margin:10px auto; float:none; }
	#graphs 		{ overflow-x:auto; overflow-y:hidden; }
	.pw1 			{ width:290px; display:inline-block; margin:10px 5px;  }
	.pw2 			{ width:600px; display:block; margin:10px auto; clear:both; float:none; }

	#contact td			{ display:block; }
	#contact textarea	{ width:380px; }
}

@media screen and (max-width:420px) { 
	#gmap_small		{ width:300px; display:block; margin:10px auto; float:none; }
	#graphs 		{ overflow-x:auto; overflow-y:hidden; }
	.pw1, .pw2		{ width:300px; display:block; margin:10px auto; float:none; clear:both; }

	#ad1			{ visibility:hidden; display:none; }
	#tide h1		{ position:absolute; display:block; bottom:5px; text-shadow:0px 0px 4px rgba(0, 0, 0, 0.5); left:0px; width:100%; font:normal 60px 'OpenSans ExtraBold', sans-serif; text-align:center; }
	.panel			{ display:block; float:none; width:auto; margin:10px auto; }

	#hightide		{ width:300px; }
	#hightide table	{ width:280px; }

	#inform td			{ display:block; }

	#contact textarea	{ width:280px; }
}