:root{
	--dark: black;
	--medium: #6b6b6b;
	--light: lightgray;
	--bright: white;
	--alertColor: rgb(230, 73, 0);
	--bgHover:rgb(190, 190, 190);
	--buttonColor: rgb(240,240,240);
	--evenLines:rgb(240,240,240);
	--oddLines:rgb(225,225,225);
	--mediumDark: #2f2f2f;
	--goodColor: green;
	--inputvalid: rgb(0, 63, 5);
	--inputinvalid: rgb(68, 0, 0);
	--campcolorlight: rgb(100, 200, 100);
	--campcolor:rgb(40, 110, 40);
	--reccolorlight:rgb(255, 184, 52);
	--reccolor:rgb(222, 104, 0);
	--allcolorlight:rgb(132, 196, 218);
	--allcolor:#2d436f;
	--campcolorlightfaded:rgba(100,200,100,0.5);
	--reccolorlightfaded:rgba(255,184,52,0.5);
	--allcolorlightfaded:rgba(132,196,218,0.5);
	--formbackgroundimg:linear-gradient(to right,var(--campcolorlightfaded),var(--allcolorlightfaded),var(--reccolorlightfaded));
	--darktransparent:rgba(0,0,0,0.75);
	--brighttransparent:rgba(255,255,255,0.5);
	--shadow:2px 2px 6px black;
	--bigshadow:2px 2px 30px black;
}

body {
	background-color:var(--bright);
	margin:0;	
	font-family:Arial;
	color:var(--dark);
	background-image:linear-gradient(to right,var(--campcolorlightfaded),var(--reccolorlightfaded));
}
p{
	white-space:pre-wrap;
}
.banner-container{
	position:relative;
	text-align:center;
	color:white;
	background-color:black;
	box-shadow:0px 1px 6px black;
	position:sticky;
	top: -6vw;
	z-index: 99;

}
.headericon{
	position:absolute;
	height:7vw;
	top:0.2vw;
	left:7vw;
	z-index:999;
	
}
.headerimg {
	width:100%;
	opacity: 0.75;
}
.banner-label{
	font-weight:bolder;
	font-size:5vw;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:80vw;
}
.maincontent{
	max-width: max-content;
	margin:10px auto;
	margin-bottom:20px;
	
}
.menu-item{
	font-size:2em;
	font-weight:bold;
	margin: 0.67em; 
	display:block;
	color:black;
	background-color:#dddddd;
	border:0px;
	border-radius: 25px;
	padding:5px 50px;
}

a.menu-item { text-decoration:none;
				color:inherit;
			box-shadow:2px 2px 6px black;
			border:none;
}
.selected.menu-item{	
	color:white;	
}

.menu-item:hover {
	color:var(--bright);
	box-shadow: 3px 3px 8px black;
}
.menu-item.selected.camp{
	background-color:var(--campcolor);
}
.menu-item.camp:hover{
	background-color:var(--campcolorlight);
}
.menu-item.selected.rec{
	background-color:var(--reccolor);
}
.menu-item.rec:hover{
	background-color:var(--reccolorlight);
}.menu-item.selected.all{
	background-color:var(--allcolor);
}
.menu-item.all:hover{
	background-color:var(--allcolorlight);
}
table{
	/*border-radius:10px;*/
	border:2px solid white;
	box-shadow:2px 2px 8px black;
	margin-top:10px;
	border-collapse:collapse;
}
table thead, th {
	background-color:var(--mediumDark); /*#000066;*/
	color:white;
	padding:4px;
}
table tbody tr:nth-child(even){
	background-color:var(--evenLines);

}
table tbody tr:nth-child(odd){
	background-color:var(--oddLines); /* lightgray;*/
}
td,th {
	padding:20px;
}
th, thead tr{
	position:sticky;
	top:2vw;
	box-shadow: 0px 2px 4px black;
}
th:hover{
	background-color:var(--bgHover);
	color:black;
	box-shadow:inset 0px 0px 3px var(--mediumDark);
}

form{
	display:block;
	background-color:var(--buttonColor);
	padding:12px;
	border-radius:3px;
	border:3px solid silver;
	box-shadow:5px 5px 10px black;
}
td img {
	max-width:25vw;
	box-shadow:2px 2px 5px black;
	margin-bottom:6px;
	border-radius:10px;
}
.locationLabel{
	font-size:2em;
	font-weight:bold;
	margin:15px;
		
}
.locationLinks{
	margin:0 auto;
	text-align:center;
}
.locationLinks > a {
	padding:0 10px;
}
.important {
	color: var(--alertColor);
}
.goodInput {
	color: var(--goodColor);
}
.blurb{
	display:block;
	text-wrap:wrap;
	width:90%;
	margin: 0 auto;
}
.tablecontainer{
	width:max-content;
	margin:0 auto;
	max-width:85vw;
}
.tablecontainer.wide{
	max-width:98%;
	padding-bottom:25px;
}
.dbTableNav .navwrapper {
	position:sticky;
	top:4vw; 
	overflow:auto;
	max-height: 74vh;
	max-width:10vw;
	
}
.dbTableNav ul, .form-modal ul{
	padding-left:0px;
	
}
.dbTableNav ul li, .form-modal ul li{
	padding:5px 0px 5px 0px;
	display:block;
		
}
.form-modal ul li a{
	color:var(--bright);
	font-weight:bold;
}

input:valid {
	border-color:var(--inputvalid); /*lightgreen;*/
}
input:invalid, input:placeholder-shown {
	border-color:var(--inputinvalid); /*indianred;*/
}

.form-hidden {
	display:none;
	/*display:inline-block;*/
}
.form-modal{
	display:block;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width: 90vw;
	border:1px solid var(--bright);
	text-align:center;
	z-index:1000;
	height: fit-content;
	max-height: 80%;
	border-radius:10px;
	color:var(--bright);
	background-color:var(--mediumDark);
	box-shadow:5px 5px 50px black;
	max-height:80%;
	
}
.form-modal p{
	font-weight:bold;
}
.flex-container{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap-reverse;
	justify-content: space-evenly;
	align-items:center;
	text-align:center;
}

.table{
	display:table;
	min-width:70vw;
}
 .tr {
	display:table-row;
}
 .td {
	font-size:large;
	font-weight:bold;
	display:table-cell;
	padding:10px;
}
form .td > input:not([type=hidden]):not(#closeMap):not(#gcd-input-query), form textarea{
	width: 100%;
	font-size:inherit;
	font-weight:inherit;
	display:inline-block;
	border-radius:4px;
	padding:12px 20px;
	box-sizing: border-box;
}
form .tr .td:first-of-type{
	vertical-align:middle;
	text-align:right;
}
.tableTools input,a,button{
	font-size:medium;

}
.footer {
	background-color: var(--mediumDark);
	color:white;
	margin:0 auto;
	text-align:center;
	padding:10px;
}
.footer > a {
	color:white;
	font-weight:bold;
	text-decoration:none;
}

textarea {
	width:300px;
	height:150px;
}

a.createLink{
	text-decoration:none;
	padding:2px 16px;
	color: var(--dark);
	border:1px solid gray;
	border-radius:3px;
	background-color:var(--buttonColor);
}
a.createLink:hover{
	background-color:var(--light);
	box-shadow: inset 1px 1px 2px var(--mediumDark);
}

hr{
	width:50%;
	margin-left:auto;
	margin-right:auto;
}



.userLinks{
	display:block;
	font-weight:bold;
	margin-right:10vw;
	text-align:right;
	
}
.userLinks a {
	text-decoration:none;
	color:inherit;
	font-weight:bolder;
}

table tr{	
	padding:13px;
	box-shadow:inset 0px 0px 50px var(--bright);
} 
table.cardtable td:last-of-type:after{
	content: " Miles."
}
.cardsContainer{
	margin:0 auto;
	width:100%;
	background-image:linear-gradient(to right, var(--dark), var(--mediumDark),var(--dark));
}
.card {
	margin:0 auto;
	height:400px;
	text-align:center;
	color:var(--bright);
	padding-top:10px;
	padding-right:10px;	
}
.card img{
	height:300px;
	box-shadow:2px 2px 6px var(--dark);
	border-radius:10px;
}
a.cardLink {
	text-align:center;
	color:var(--bright);
	font-weight:bold;
}
.cardLabel{
	font-size:2.5em;
	font-weight:bolder;
	color: var(--bright);
	padding:5px;
}
#await img{
	height:1.5em;
}
.anchor{
	display: block;
	height: 120px; /*same height as header*/
	margin-top: -120px; /*same height as header*/
	visibility: hidden;
  }
  .columncontainer{
	margin:0 auto;
	width:max-content;
	display:block;
}
.columncontainer > div{
	display:table-cell;
	padding-left: 1.5vw;
	padding-right: 1.5vw;

	
}


.mobilemenubtn{
	display:none;
}
.tableTools  *{
	margin:5px;
}

#formcover{
	color:var(--bright);
	background-color:var(--darktransparent);
	background-image:var(--formbackgroundimg);
	position:fixed;
	top:0;
	left:0;	
	height:100%;
	width:100%;
	display:none;
	z-index:1000;
	text-align:center;
	font-weight:bolder;
}
#formcover div{
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	position:fixed;
}
#formcover.show{
	display:block;
}


.tablecontainer ul li {
	list-style-type:none;
	line-height:1.75em;
	font-weight:bold;
	
}
.tablecontainer ul li li {
	list-style-type:disc;
	line-height:1.25em;
	font-weight:normal;
}


table.compact td, table.compact tr{
	padding:2px;
	box-shadow:none;
}


  .cardContainer{
    margin:4px;
    padding:8px;
    border:1px solid black;
    border-radius:10px; 
    max-width:350px;
    overflow:hidden;
    box-shadow:2px 2px 7px black;
    background-image:linear-gradient(to top, lightgray,white);
}
.cardContainer p{
    padding:10px;
}


img.cardImage{
    max-width:250px;
    max-height:250px;
    display:inline-block;
    border-radius:5px;
}


@media (max-width:1200px){
    img.cardImage{
        max-width:150px;
        max-height:150px;
    }
}



.blurb.notes p{
	
	padding:15px;
	background-color:white;
	border-radius:10px;
	background-image:linear-gradient(to top,var(--light),var(--bright));
	
}

.saveLocation{
	float:right;
	border:1px solid blue;
	background-color:white;
	padding:4px;
	border-radius: 4px;
	
	
}
.saveLocation a {
text-decoration:none;
	cursor:pointer;color:black;
}