*	{ box-sizing:border-box; }
html	{ margin:0px; -webkit-text-size-adjust:100%; overflow-y:scroll; }
body	{ font-family:arial,helvetica,sans-serif; font-size:14px; color:#000000; margin:0; background-Color:#FFFFFF; }
a	{ color:#0000CC; }
.link	{ color:#0000CC; text-decoration:underline; cursor:pointer; }

#back	{ position:fixed; z-index:1000; left:-3px; bottom:-2px; cursor:pointer; }
#next	{ position:fixed; z-index:1000; right:-3px; bottom:-2px; cursor:pointer; }

#nav		{ position:fixed; z-Index:3; width:100%; top:0px; left:0px; text-align:center; }
#navblue	{ width:100%; background:#000066; }
#navtbl		{ max-width:1210px; height:50px; margin:auto auto; padding:0 5px 0 5px; }
#navtbl th	{ font-weight:normal; font-size:11px; color:#FFFFFF; white-space:nowrap; cursor:pointer; padding:1px; cursor:pointer; }
#navtbl td	{ width:5%; }
#yellow		{ width:100%; height:5px; margin-top:-5px; background-Color:#FFE100; border-bottom:1px solid #B39E00; }

.icons		{ height:40px; width:auto; margin:0px; }

#logo		{ position:relative; z-Index:5; max-height:80px; min-height:55px; height:10vw; width:auto; margin-top:1px; padding:0; cursor:pointer; }

@media (max-width:800px) { .icons { height:38px; } #navtbl th { font-size:10px; } }
@media (max-width:750px) { .icons { height:36px; } #navtbl th { font-size:10px; } }
@media (max-width:700px) { .icons { height:34px; } #navtbl th { font-size:10px; } }
@media (max-width:650px) { .icons { height:32px; } #navtbl th { font-size:10px; } }
@media (max-width:600px) { .icons { height:30px; } #navtbl th { font-size:9px; } }
@media (max-width:550px) { .icons { height:28px; } #navtbl th { font-size:9px; } }
@media (max-width:500px) { .icons { height:26px; } #navtbl th { font-size:9px; } }
@media (max-width:450px) { .icons { height:24px; } #navtbl th { font-size:8px; } }
@media (max-width:400px) { .icons { height:22px; } #navtbl th { font-size:8px; } }
@media (max-width:350px) { .icons { height:20px; } #navtbl th { font-size:7px; } }
@media (max-width:300px) { .icons { height:18px; } #navtbl th { font-size:7px; } }

/* notice and announcements */
.not1	{ padding:10px; text-align:center; border:1px solid #009900; border-radius:10px; margin:15px 0 10px 0; background:#F5F5F5; }
.not2	{ position:absolute; font-size:10px; width:90px; padding:2px; margin:-18px 0 0 -5px; border:1px solid #009900; border-radius:7px; color:#333333; background:#F5F5F5; }
.ann1	{ padding:10px; text-align:center; border:1px solid #6699CC; border-radius:10px; margin:15px 0 10px 0; background:#F5F5F5; }
.ann2	{ position:absolute; font-size:10px; width:90px; padding:2px; margin:-18px 0 0 -5px; border:1px solid #6699CC; border-radius:7px; color:#333333; background:#F5F5F5; }
.updated { display:inline-block; color:green; font-size:1rem; }
/* Ad Lines */
.ad_line1 { font-size:20px; margin:0px 0 2px 0; }
.ad_line2 { font-size:18px; margin:2px 0 2px 0; }
.ad_line3 { font-size:16px; margin:2px 0 2px 0; }
.ad_line4 { font-size:14px; margin:2px 0 0px 0; }

/* left side menu */
#side   { position:fixed; z-index:7; width:98%; height:100%; top:0px; left:-200%; background-Color:rgb(25,25,25); padding:20px; overflow:auto;  scrollbar-base-color: #666666; scrollbar-arrow-color: #999999; scrollbar-DarkShadow-Color:#333333; color:#FFFFFF; }
#side a { color:#FFFFFF: text-decoration:none; }
.side   { font-family:sans-serif; font-size:14px; color:#FFFFFF; text-decoration:none; cursor:pointer; }

/* copyright */
#copy	{ position:relative; width:100%; padding:5px; margin:0px 0px 10px 0px; font-size:10px; text-align:center; color:#666666; }

#menu	{ line-height:25px; }
.menuhr	{ position:relative; width:100%; height:1px; border:0px; border-top:1px solid #CCCCCC; margin:15px 0px 20px 0px; background:black; }

#tabs	{ position:fixed; z-Index:3; left:0; bottom:0; width:100%; height:50px; background-Color:#111111; color:#FFFFFF; }


/* Settings & Profile */
.pro_panel	{ float:left; width:calc(50% - 10px); border:1px solid #6699CC; margin:0 10px 10px 0; padding:10px;
		  background:rgb(245,245,245); border:1px solid #6699CC; border-radius:10px; overflow:hidden; }
.pro_panel2	{ float:right; width:calc(50% - 10px); ; border:1px solid #6699CC; margin:0 10px 10px 0; padding:10px;
		  background:rgb(245,245,245); border:1px solid #6699CC; border-radius:10px; overflow:hidden; }
@media (max-width:600px) { .pro_panel, .pro_panel2 { width:100%; margin:0 0 10px 0; } } 
.pro_panel_heading { font-size:16px; font-weight:bold; }

#break50	{ display:none;  height:1px; width:100%; } 
@media (max-width:1100px) { #break50 { clear:both; display:block; } }

#main	{ max-width:600px; margin:auto auto; padding:15px; }

#admin_main { width:98%; max-width:98%; margin:0px 1% 20px 1%; padding-bottom:40px; }
#admin_main td { font-size:12px; white-space:nowrap; }

#usrs	{ position:fixed; left:100%; top:73px; width:100%; background-Color:#333333; min-height:100%; padding:20px; color:#FFFFFF; }
#setloc	{ position:absolute; z-index:2; top:74px; left:0px; width:200px; padding:10px; }

h1	{ font-size:22px; font-weight:normal; margin:5px 0px 5px 0px; }
h1 a	{ text-decoration:none; color:black; }
.h1	{ font-size:22px; font-weight:normal; margin:5px 0px 5px 0px; }

h2	{ font-size:20px; font-weight:normal; margin:5px 0px 5px 0px; }
h3	{ font-size:18px; font-weight:normal; margin:5px 0px 5px 0px; }

input[type="text"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="number"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="date"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="datetime-local"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="time"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="tel"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="password"]	{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; }
input[type="submit"]	{ height:40px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; background-color:#3366CC; background:-webkit-linear-gradient(#99CCFF,#3366CC); text-align:center; color:#FFFFFF; font-weight:bold; padding:0px 10px 0px 10px; }
input[type="button"]	{ height:40px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; background-color:#3366CC; background:-webkit-linear-gradient(#99CCFF,#3366CC); text-align:center; color:#FFFFFF; font-weight:bold; padding:0px 10px 0px 10px; }

input[type="reset"]	{ height:40px; width:100%; border:1px solid #999999; border-radius:5px; font-size:16px; background-color:#999999; background:-webkit-linear-gradient(#999999,#333333); text-align:center; color:#FFFFFF; font-weight:bold; padding:0px 10px 0px 10px; }
select			{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; background-color:#FFFFFF; }
textarea		{ height:99px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; background-color:#FFFFFF; }
#myAdImg		{ height:32px; width:100%; border:1px solid #6699CC; border-radius:5px; font-size:16px; padding:3px; }

.submit_clicked		{ background-color:white; color:black; border:1px solid white; }

.needed			{ height:40px; width:100%; border:1px solid #777777; border-radius:5px; font-size:16px; background-color:#666666; background:-webkit-linear-gradient(#CCCCCC,#999999); text-align:center; color:#FFFFFF; font-weight:bold; padding:7px 10px 0px 10px; margin-top:10px; cursor:text; }

.submit	{ font-size:.85rem; font-weight:bold; color:#FFF; padding:5px 10px 5px 10px; border:1px solid #2255BB; border-radius:7px; white-space:nowrap; 
	  background-color:#4477DD; background:-webkit-linear-gradient(#6699FF,#3366CC); text-align:center; color:#FFFFFF; cursor:pointer; }
.delete	{ font-size:.85rem; font-weight:bold; color:#FFF; padding:5px 10px 5px 10px; border:1px solid #990000; border-radius:7px; white-space:nowrap;
	  background-color:#EE0000; background:-webkit-linear-gradient(#FF0000,#CC0000); text-align:center; color:#FFFFFF; cursor:pointer; }
.reset	{ font-size:.85rem; font-weight:bold; color:#FFF; padding:5px 10px 5px 10px; border:1px solid #333; border-radius:7px; white-space:nowrap;
	  background-color:#EE0000; background:-webkit-linear-gradient(#999,#666); text-align:center; color:#FFFFFF; cursor:pointer; }

#gmap { position:absolute; top:0; z-Index:0; left:0 width:100%; height:100%; background-Color:#EEE; } 
#smap { width:600; height:500px; background-Color:#EEEEEE; } 
.marker	{ background:#FFFF00; color:black; border-radius:7px; padding:4px 6px 4px 6px; font-size:.5rem; overflow:hidden; white-space:nowrap; border:1px solid #000; }
.blu	{ background:#3366FF; color:white; border:1px solid #003366; }
.red	{ background:#DD0000; color:white; border:1px solid #660000; }
.ora	{ background:#FFCC00; color:black; border:1px solid #996600; }
.wht	{ background:#FFFFFF; color:black; border:1px solid #999; }
.gry	{ background:#666666; color:white; border:1px solid #333; }
.ltg	{ background:#66FF66; color:black; border:1px solid #009900; }
.wht	{ background:#FFFFFF; color:black; border:1px solid #999; }
.brn	{ background:#663300; color:white; border:1px solid #330000; }
.blk	{ background:#333333; color:white; border:1px solid #000; }
.pur	{ background:#990099; color:white; border:1px solid #330033; }
.pnk	{ background:#FFCCCC; color:black; border:1px solid #993333; }
.grn	{ background:#33FF00; color:black; border:1px solid #009900; }

#filter { position:absolute; top:10px; right:10px; background:white; padding:10px; font-size:11px; font-weight:bold; cursor:pointer; border-radius:2px; }

#hires { position:fixed; top:0; left:0; width:100%; height:100%; margin:auto auto; z-index:100; background:black; text-align:center; color:white; }

#station { position:absolute; z-index:9; top:20px; width:80%; left:10%; margin:auto auto; }
#tides	td { font-size: calc(5px + .6vw); }


/* Login Function */
#login { width:100%; max-width:640px; margin:0 auto; margin-top:10px; margin-bottom:20px; border:1px solid #6699CC; border-radius:10px; padding:10px; background-Color:#F9F9F9; }
@media only screen and (max-width:400px) {
	#login { display:inline-block; width:100%; border:1px solid #6699CC; border-radius:10px; padding:10px; background-Color:#F9F9F9; }
}

/* post2.htm */
#post2 { float:left; max-width:280px; margin:0 10px 10px 0; border:1px solid #6699CC; border-radius:10px; padding:10px; background-Color:#F9F9F9; }

#mapfishdiv { position:absolute; z-Index:9; 2147483647; top:-100px; left:50%; margin-left:-250px; width:500px; padding:10px; border:1px solid #CCCCCC; border-radius:10px; background-Color:#FFFFFF; overflow:hidden; font-size:14px; line-height:18px; }
@media (max-width: 800px) { #mapfishdiv { margin-left:-200px; width:400px;  font-size:13px; line-height:17px; } }
@media (max-width: 600px) { #mapfishdiv { margin-left:-150px; width:300px;  font-size:12px; line-height:16px; } }


/* file upload button */
#file_div { position:relative; width:100%; height:40px; overflow:hidden; background-Color:#3366CC; background:-webkit-linear-gradient(#99CCFF,#3366CC); border-radius:5px; }
#file_txt { width:100%; height:40px; color:#FFFFFF; font-weight:bold; text-align:center; font-size:16px; }
#file_img { position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; overflow:hidden; }
#file_clr { position:relative;  width:100%; font-size:12px; color:#FF0000; text-align:left; text-decoration:none; padding:5px; cursor:pointer; }

/* My Fish */
.myfish	{ float:left; width:14.285%; cursor:pointer; }
.myfish img { width:100%; height:auto; cursor:pointer; }
@media (max-width:1600px) { .myfish { width:16.666%; } }
@media (max-width:1200px) { .myfish { width:20.000%; } }
@media (max-width:1000px) { .myfish { width:25.000%; } } 
@media (max-width: 870px) { .myfish { width:33.333%; } }
@media (max-width: 425px) { .myfish { width:50.000%; } }
@media (max-width: 325px) { .myfish { width:100.00%; } }
#myfish { position:fixed; z-index:0; top:74px; left:100%; bottom:0px; width:100%; background-Color:#111111; }
#mybott	{ position:fixed; z-index:1; left:100%; bottom:0px; width:100%; height:50px; background-Color:#000000; }


/* alert div for notices */
#alert { position:fixed; z-index:10; width:100%; top:40%; margin:0 auto; background-Color:#FFFF00; border:1px solid #000066; border-radius:10px; padding:20px; box-shadow: 1px 1px 7px #000000; }

/* profile page */
#profile_image_img { float:left; width:48%; max-width:270px; min-width:180px; font-size:12px; margin:0px 2% 15px 0px; }
#profile_image_txt { float:left; width:50%; max-width:270px; min-width:180px; font-size:12px; margin:0px; }
@media only screen and (max-width:500px) {
	#profile_image_img { float:left; width:100%; }
	#profile_image_txt { float:left; width:100%; }
}

/* Fish */
.fish		{ width:100%; max-width:640px; background-Color:#EEEEEE; border:1px solid #6699CC; border-radius:10px; margin:0px 0px 10px 0px; padding:10px; overflow:hidden; }
.fishimg	{ width:100%; height:auto; }
.fishimgsrc	{ width:100%; height:auto; border:1px solid #999999; border-radius:7px; margin-bottom:10px; }
.gpsnotice	{ z-index:99999999; width:100%; position:relative; font-size:9px; color:#FFFFFF; margin-top:-50px; padding:5px; }

/* Ads */
.proimgs	{ width:100%; height:auto; margin-bottom:10px; }

.gps_pin { position:absolute; z-index:2; margin:-5px 0 0 -5px; cursor:pointer; }

.fishnames { padding:3px 5px 3px 2px; ; cursor:pointer; background:white; }
.fishnames:hover { background:#FFFFCC; }

.top10 { position:absolute; width:31px; height:31px; text-align:center; font-size:11px; font-weight:bold; padding-top:10px; margin:-15px 0px 0px 80px; cursor:pointer; background-Image:url('/pics/top10.png'); }
.top20 { position:absolute; width:31px; height:31px; text-align:center; font-size:11px; font-weight:bold; padding-top:10px; margin:-15px 0px 0px 80px; cursor:pointer; background-Image:url('/pics/top20.png'); }
.leader{ position:absolute; z-index:2; font-size:11px; font-weight:bold; padding:5px; margin:-30px 0 0 -5px; cursor:pointer; background-Color:#00FF00; border: 1px solid #00CC00; border-radius:10px; }

.angler_div { float:left; width:31.33%; padding:2%; background-Color:#EEEEEE; border:1px solid #999999; border-radius:10px; margin:0 2% 2% 0; cursor:pointer; }
@media (min-width:480px) { .angler_div { width:23%; } }
.angler_img { width:100%; height:auto; border-radius:5px; }

.blue_button { display:table-cell; width:76px; height:25px; font-size:14px; font-weight:bold; vertical-align:middle; color:#FFFFFF; cursor:pointer; text-align:center; background:76px 25px url('/pics/blue_button.gif'); }

.panel_fish { font-size:18px; line-height:18px; color:#0000CC; font-weight:bold; margin-bottom:5px; cursor:pointer; }
.panel_size { font-size:11px; line-height:14px; }

@media only screen and (min-width:410px) { .panel_size { font-size:12px; line-height:15px; }  }
@media only screen and (min-width:500px) { .panel_size { font-size:13px; line-height:16px; }  }
@media only screen and (min-width:600px) { .panel_size { font-size:14px; line-height:17px; }  }

.rank_pics { float:left; background:#EEEEEE; border:1px solid #99CCFF; border-radius:7px; padding:5px; width:48%; margin:0 2% 2% 0; }
@media only screen and (min-width:360px) { .rank_pics { width:31%; margin:0 2 2% 0; } }
@media only screen and (min-width:500px) { .rank_pics { width:23%; margin:0 2 2% 0; } }
@media only screen and (min-width:700px) { .rank_pics { width:18%; margin:0 2 2% 0; } }

.rank_imgs { width:100%; height:auto; border:1px solid #CCC; border-radius:5px; margin-bottom:2px; }

/* same fish same day thumbnails */
.same-day-row	{ font-size:.9rem; color:blue; font-style:italic; text-decoration:underline; padding-top:25px; }
.same_day_fish	{ float:left; width:calc(25% - 5px); aspect-ratio:1; border:1px solid #666; border-radius:5px; margin:2px 5px 3px 0; overflow:hidden; }
.same_day_fish img { width:100%; height:auto; }


/* Google Maps */
.marker		{ background:#FFFF00; color:black; border:1px solid #000; border-radius:5px; padding:3px 5px 3px 5px; font-size:8px; }
.white		{ background:#FFFFFF; color:black; }
.yellow		{ background:#FFFF00; color:black; }
.orange		{ background:#FFCC00; color:black; }
.brown		{ background:#996600; color:white; }
.red		{ background:#FF0000; color:white; }
.green		{ background:#00FF00; color:black; }
.ltblue		{ background:#77CCFF; color:black; }
.dkblue		{ background:#0000FF; color:white; }
.black		{ background:#000000; color:white; }
.gray		{ background:#CCCCCC; color:black; }
.purple		{ background:#CC00CC; color:white; }

.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}