/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');

*	{ box-sizing:border-box; }

html	{ -webkit-text-size-adjust:100%; overflow-y:scroll; }
body	{ font-family:arial,helvetica; font-size:16px; color:#000000; margin:0; background-Color:#BDCDE7; }
#back   { position:fixed; z-index:-1; left:0px; top:0px; width:100%; height:100%; background:url(/pics/bridge.jpg) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; opacity:1; }

a	{ color:#0000CC; }

/* Hook'em & Cook'em Outfitters */
#mast	{ width:100%; padding:0px; margin-bottom:20px; font-family:'Heebo',sans-serif; font-size:calc(2px +1vw); background-Color:#222222; color:#FFFFFF;  text-align:center; white-space:nowrap; cursor:pointer; }
#menu	{ position:absolute; z-index:2; left:-200%; top:0px; padding:20px; background:#CCCCCC; }
#menu ul { margin-bottom:10px; }
.mrow	{ background:#CCCCCC;  padding:5px 30px 5px 0px; cursor:pointer; }
.mrow:hover { background:#EEEEEE; }

/* top nav */
.nav		{ background:#222222; color:white; }
.nav:hover	{ background:#FFDD00; color:black; }
.nav_on		{ background:#3366CC; color:white; }
.nav_on:hover	{ background:#4477DD; color:white; }

/* Slide Show */
#slider { z-index:1; position:relative; width:100%; overflow:hidden; background-Color:#CCCCCC; border:1px solid #999999; border-radius:10px; }
#sldiv1 { z-index:1; position:relative; width:100%; height:auto; }
.sldiv  { z-index:1;  position:absolute; top:0px; width:100%; height:auto; }
.sldimg { z-index:1; width:100%; height:auto; }
#sldtbl td { cursor:pointer; }
#sldbot { position:relative; z-Index:2; margin-top:-17px; }
#hookem	{ position:absolute; z-Index:3; width:100%; bottom:40px; font-family:'Permanent Marker', cursive; font-size:calc(10px + 2.5vw); color:#FFFF99; text-shadow:1px 1px black, 1px 1px 10px black, 0px 0px 2px black; text-align:center; }

/* Hours and Tide */
#hours  { width:90%; margin:auto auto; text-align:center; font-size:16px; padding:5px; color:#FFFFFF; padding:20px; }

/* main page container */
#main   { width:90%; max-width:1200px; margin:10px auto 30px auto; padding:20px 20px 0 20px; background:white; border:1px solid #CCCCEE; border-radius:20px; }

/* Home page panels */
.panel	{ float:left; width:32%; margin:0 .5% 1% .5%; font-size:18px; padding:1.5%; overflow:hidden; background-Color:#EEEEEE; border:1px solid #999999; border-radius:10px; overflow:hidden; cursor:pointer; }
.panel:hover { background-Color:#FFFFDD; } 
@media only screen and (max-width:600px) { .panel { width:99%; } }

.panel_cont	{ position:relative; width:100%; height:100%; overflow:hidden; border:1px solid #999999; border-radius:10px; background-color:#FFFFFF; }
.panel_image	{ position:relative; width:100%; overflow:hidden; }
.panel_arrow	{ position:absolute; right:5px; margin-top:-37px; cursor:pointer; }
.panel_text	{ position:relative; width:100%; height:100%; overflow:hidden; margin-top:-2px; padding:0 10px 10px 10px; font-size:14px; }

@media only screen and (max-width:900px) {
	#panel1, #panel2, #panel3, #panel4 { float:left; width:49%; margin:0 .5% 1% .5%; font-size:16px; }
	.panel_text  { font-size:13px; }
}
@media only screen and (max-width:560px) {
	#panel1, #panel2, #panel3, #panel4 { float:left; width:100%; margin:0 0 1% 0; font-size:14px; }
	.panel_text  { font-size:12px; }
}

h1 { font-family:'Permanent Marker', arial; font-size:28px; line-height:28px; margin:14px 0 14px 0; }
h2 { font-family:'Permanent Marker', arial; font-size:22px; line-height:22px; margin:11px 0 11px 0; }
h3 { font-family:'Permanent Marker', arial; font-size:18px; line-height:18px; margin: 4px 0  9px 0; }
h1,h2,h3  { color: #224466; }

#page_mast { position:relative; width:94%; max-width:1200px; margin:auto; border:1px solid #999999; border-radius:10px; overflow:hidden; }

/* copyright */
#copy	{ width:100%; font-size:14px; text-align:center; color:#666666; border-top:5px solid #446688; padding:10px 0px 20px 0px; }

input[type=text], input[type=date],select { height:28px; width:100%; min-width:100px; max-width:600px; border:1px solid #999999; border-radius:7px;  }

input[type=submit] {  height:40px; width:100%; min-width:100px; max-width:600px; border:1px solid #18449E; border-radius:7px; background:#1E55C6; color:#FFFFFF; }


/* Fish Gallery */
#gacflex	{ display:flex; flex-wrap:wrap; flex-direction:row; width:100%; padding:0; margin:0; border:0; }
.gaccell	{ flex-basis:19%; margin:.5%; cursor:pointer; font-size:15px; }
.gacpadd	{ padding:12px; width:100%; height:100%; border:1px solid #CCCCCC; border-radius:10px; background:#EEEEEE; }
.gacgps		{ position:absolute; margin:-2px 0 0 -2px; }
.gacimage	{ width:100%; height:auto; border-radius: 5px; }
.gaccomment	{ font-size:12px; font-style:italic; margin:5px 0 5px 0; }
#gactbl td	{ vertical-align:top; font-size:13px; }
@media only screen and (max-width:1200px) { .gaccell { flex-basis:24%; margin:.5%; } }
@media only screen and (max-width: 900px) { .gaccell { flex-basis:32%; margin:.5%; } }
@media only screen and (max-width: 700px) { .gaccell { flex-basis:48%; margin: 1%; } }
@media only screen and (max-width: 450px) { .gaccell { flex-basis:98%; margin: 0 0 10px 0; } }