/* BASIC STYLE */
/* COLOR NAMES: https://www.w3schools.com/colors/colors_names.asp  */

body, p, font, a, ol, ul, li, dl, dt, dd, table, tr, th, td,
form, input, textarea, select, font.input, input.button, hr, blockquote,
a, a:link, a:visited, a:hover, a:active, 
.even, .evenright, td.even, td.evenright, a.even, a.evenright, 
.odd, .oddright, td.odd, td.oddright, a.odd, a.oddright, 
h1, h2, h3, h4, h5, h6, 
.title, a.title, .titlesub, a.titlesub
{
font-family: Arial, Helvetica, Verdana, Sans-Serif ;
}

body, p, font, a, ol, ul, li, dl, dt, dd, table, tr, th, td,
form, input, textarea, select, font.input, input.button, hr, blockquote
{
font-style: normal ; 
font-variant: normal ;
font-weight: normal ; 
font-size: 12pt ; 
margin: 0;
border-style: none;
padding: 0;
color: Black;
background-color: transparent ;
}

/* THIS IS BODY - BACKGROUND IMAGE */
.body { 
	margin-left:3%;
	margin-right:1%;
}

/* THIS IS FOR COMMENTS FORM */
@media screen and ( max-width:979px ) {
	object.comments{
		min-height:400px;
	}
}
@media screen and ( min-width:980px ) {
	object.comments{
		min-height:120px;
	}
}


p {
text-indent: 0px;
text-align: justify;
margin-top: 0;
margin-bottom: 6px;
}

/* ANCHORS */

a, a:link, a:visited, a:hover, a:active
{
font-style: normal ; 
font-variant: normal ;
font-weight: bold ; 
}

a, a:link, a:visited
{
font-size: 12pt ; 
color: Black;
background-color: transparent ;
text-decoration: underline ; 
}

a:hover
{
font-size: 12pt ; 
color: Chocolate; 
background-color: transparent ;
text-decoration: underline ; 
}

a:active
{
font-size: 12pt ; 
color: Chocolate ;
background-color: transparent ;
text-decoration: underline ; 
}

table, tr, td, td.right, td.center, .odd, .even, .oddright, .evenright
{
vertical-align: top;
margin: 0;
border-style: none;
padding: 0;
}

table, tr, td, .odd, .even {
text-align: left;
}

td.center
{
text-align: center;
}

.oddright, .evenright
{
text-align: right;
}

td.highlight
{
background-color: Yellow;
}

table
{
width: 100%;
}

td.right
{
text-align: right;
}

td.center
{
text-align: center;
}

.even, .evenright,
td.even, td.evenright,
a.even, a.evenright
{
font-size: 10pt;
color: Black;
background-color: BurlyWood; /*transparent*/
}

.odd, .oddright,
td.odd, td.oddright,
a.odd, a.oddright
{
font-size: 10pt;
color: Silver;
background-color: Black;
}

table.attention, th.attention, tr.attention, td.attention, p.attention, a.attention, font.attention
{
font-weight: bold;
}

font.error, p.error, 
a.error, a:link.error, a:visited.error, a:hover.error, a:active.error
{
color: Red;
font-weight: bold;
background-color: transparent ;
}

font.heading
{
color: Black;
font-size: 14pt;
font-weight: bold;
background-color: transparent;
}

font.bigheading
{
color: Black;
text-align: right;
font-size: 18pt;
font-weight: bold;
background-color: transparent;
}

menutext, font.menutext, a.menutext, a:link.menutext, a:visited.menutext, a:hover.menutext, a:active.menutext
{
font-size: 10pt;
font-weight: bold;
}

.menu2, font.menu2, a.menu2, a:link.menu2, a:visited.menu2, a:hover.menu2, a:active.menu2
{
font-size: 12pt;
font-weight: bold;
}

hr
{
border:0;
height:1px;
color: Black;
background-color: maroon;
margin-top:3px;
margin-bottom:3px;
}

.dimmed {
	color: LightGrey;
	opacity:0.5;
}

dt
{
font-weight: bold;
}

dd
{
margin-left: 30px;
}


ol
{
list-style-type: decimal ;
list-style-position: outside ;
margin-left: 25px;
margin-right: 10px;
padding: 0;
}

ul
{
list-style-type: circle;
list-style-position: outside;
margin-left: 25px;
margin-right: 10px;
padding: 0;
}

li
{
margin-left: -10px;
text-indent: 0px;
padding: 0;
}

blockquote
{
margin-left: 35px;
margin-right: 35px;
}

div.small, p.small, font.small, 
a.small, a:link.small, a:visited.small, a:hover.small, a:active.small,
tr.small, th.small, td.small
{
font-size: 10pt;
}

pre, .normal
{
margin-top:0;
margin-bottom:0;
font-family:sans-serif;
font-style: normal ;
font-variant: normal ;
font-weight: normal ;
font-size:12pt;
color: Black;
background-color: transparent ;
overflow-x:auto;
white-space:pre-wrap;
word-break:break-all;
}

.large
{
font-size:14pt;
}

/* PARAGRAPH */
p
{
font-size: 12pt;
font-style: normal; 
font-variant: normal;
font-weight: normal; 
color: Black;
background-color: transparent;
margin-left: 0pt;
text-indent: 20pt;
}


/* HEADINGS */
h1, h2, h3, h4, h5, h6
{
font-style: normal ; 
font-variant: normal ;
font-weight: bold ; 
color: Black;
background-color: transparent ;
margin-top: 0;
margin-bottom: 0;
text-decoration: none;
}

h1, .h1
{
font-size: 24pt ; 
}

h2, .h2
{
font-size: 16pt ; 
}

h3, .h3
{
font-size: 14pt ; 
}

h4, .h4
{
font-size: 12pt ; 
}

h5, .h5
{
font-size: 10pt ; 
}

h6, .h6
{
font-size:  8pt ; 
}



/* FORMS */

input, textarea, select, input.button
{
border-top: 1px solid Black;
border-right: 3px solid Black;
border-bottom: 2px solid Black;
border-left: 1px solid Black;
border-color: Black ;
color: Black;
background-color: White;
}

input.mainbody
{
color: Black; 
background-color: transparent;
border-width: 0;
}

input.required, select.required
{
background-color: Tan;
}

option
{
font-size: 10pt;
border: none;
}

form
{
background-color: transparent;
}

input.button
{
font-size: 12pt;
font-weight: bold;
font-variant: normal;
background-color: BurlyWood;
border-top: 1px outset Black;
border-right: 3px outset Black;
border-bottom: 2px outset Black;
border-left: 1px outset Black; 
border-color: Black;
}


.button, .bigbutton, a.button, a.bigbutton
{
border: solid 2px;
border-radius:10px;
background-color:maroon;
color:BurlyWood;
font-weight:bold;
text-decoration:none;
display:inline-block;
margin-bottom:10px;
}

.button {
font-size:11pt;
padding:6px;
}

.bigbutton, a.bigbutton {
font-size:14pt;
padding:12px;
background: linear-gradient(to bottom right, BurlyWood 0%, 
	FireBrick 26%, Brown 82%, Brown 99%);  
}

/* OTHER TEXT */
code
{
font-family: Courier, Serif ;
font-style: normal ;
font-variant: normal ;
font-weight: normal ;
font-size: 10pt ;
color: Black;
background-color: transparent ;
}


/* TABLES FOR LOGIN */
.login, .signin
{
border-style: solid;
border-color: Black;
border-width: 2px;
border-radius:6px;
padding:0;
width: 320px;
margin-left:auto;
margin-right:auto;
}

.loginhead, .signinhead
{
padding:0;
border-style: solid;
border-color: Black;
border-width: 3pt;
border-radius:6px;
width: 100%;
color: White;
background-color: maroon;
}

.loginmessage, .signinmessage
{
margin: 0;
border-style: none;
padding: 6pt;
width: 100%;
}

.title, a.title
{
font-size: 30pt;
font-weight: bold;
text-decoration: none;
color: Black;
}

.titlesub, a.titlesub
{
font-size: 16pt;
font-weight: bold;
text-decoration: none;
color: Black;
}

.border {
border-width: 1px;
border-style: solid;
}

th {
font-weight: bold;
}

.indent {
padding-left:20px;
}

.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width:100%;
align-items: center;
margin-left:auto;
margin-right:auto;
/* overflow:auto; */
}

.menu, a.menu {
	background-color:Maroon;
	color:white;
	border-top:0px;
	border-bottom:0px;
	text-decoration:none;
	font-size:10pt;
}

a.menu:hover {
	color:#FAAFBE; /* pink */
}

nav {
	position:relative;
	width:99%;
}
#menubox {
	z-index: 1000;
	margin-left:auto;
	margin-right:auto;
}

#menubox ul {
	z-index: 900;
	list-style: none;
	padding:0;
	position: absolute;
	background:transparent;
}

#menubox ul:after {
	content: ""; 
	clear: both; 
	display: block;
}

#menubox li {
	display:inline-block;
	margin-left: 5px;
	margin-right: 5px;
	min-width:140px;
	text-decoration: none;
	margin-top: 6px;
	margin-bottom:6px;
}
/* This is drop-down menu */
@media screen and ( max-width:459px ) {
	#menubox {
		height:210px;
		margin-bottom: -36px;
		width: 95%;
	}
	#menubox li {
		width:100%;
	}
	nav {
		margin-top: -210px;
	}
}
/* This is drop-down menu */
@media screen and ( min-width:460px ) and ( max-width:908px ) {
	#menubox {
		height:106px;
		margin-bottom: -16px;
		width:97%;
	}
	#menubox li {
		width:47%;
	}
	nav {
		margin-top: -106px;
	}
}
/* This is drop-down menu */
@media screen and ( min-width:909px ) {
	#menubox {
		height:40px;
		margin-bottom: 10px;
		width: 95%;
	}
	#menubox li {
		width:23%;
	}
	nav {
		margin-top: -30px;
	}
}

#menubox li a {
	/* this is the top row menu without pointing on anything*/
	display:block;
	height: 30px;
	margin-top: -4px;
	padding-top:10px;
	text-align: center;
	color: BurlyWood;
	text-decoration: none;
	background: Brown;
	background: linear-gradient(to bottom right, BurlyWood 0%, 
		FireBrick 26%, Brown 82%, Brown 99%);  
	border-radius:10px;
}

#menubox li:hover a {
	/* This is the ONE item on the top row that is being pointed to */
	color: BurlyWood;
	background: Brown;
}

#menubox li:hover ul a {
	/* This is the list that appears when pointing to a top-row menu item */
	color: BurlyWood;
	background: Maroon;
	background: linear-gradient(to bottom right, BurlyWood 0%, 
		FireBrick 62%, Brown 92%);  
	height: 30px;
	line-height: 30px;
	width:250px;
	text-decoration: none;
	margin-left:-10px;
	border-left: solid 1px;
	border-bottom: solid 1px;
	border-right: solid 1px;
}

#menubox li:hover ul a:hover {
	/* This is the pointed-to item on the drop-down menu */
	color: BurlyWood;
	background: maroon;
	background: linear-gradient(to bottom right, Brown 0%, 
		FireBrick 5%, Brown 10%, Brown 99%);  
	text-decoration: none;
	margin-left:-10px;}

#menubox li ul {
	display: none;
}

#menubox li:hover ul {
	display: block;
}

#menubox li ul li {
	display: block;
	float: none;
}

.blurb {
	padding:8px;
	margin-left:0px;
	margin-top:0px;;
	margin-bottom:10px;
	border:solid 2px;
	border-radius:15px;
}

.pixleft, .pixbig, .pixbigleft {
	float:left;
	padding:0px;
	margin-top:0px;;
	margin-bottom:12px;
	border:solid 2px;
	border-radius:15px;
	background-color:white;
}

.pixright, .pixbigright {
	float:right;
	padding:0px;
	margin-left:10px;
	margin-top:0px;;
	margin-bottom:10px;
	border:solid 2px;
	border-radius:15px;
	background-color:white;
}

/* This formats PIXLEFT and PIXRIGHT width */
@media screen and ( max-width:550px ) {
	.pixleft, .pixright {
	width: 100%;
	}
}
@media screen and ( min-width:551px ) and ( max-width:900px ) {
	.pixleft, .pixright {
	width: 50%;
	/* max-width:400px; */
	}
}
@media screen and ( min-width:901px ) and ( max-width:1250px ) {
	.pixleft, .pixright {
	width: 33%;
	/* max-width:400px; */
	}
}
@media screen and ( min-width:1251px ) {
	.pixleft, .pixright {
	width: 25%;
	/* max-width:400px; */
	}
}



.blurbheader {
	background-color:maroon; /*lightgray*/
	background: linear-gradient(to bottom right, BurlyWood 0%, 
		FireBrick 26%, Brown 82%, Brown 99%);  
	/* color:maroon; */
	color:BurlyWood;
	padding:8px;
	text-align:center;
	font-weight:bold;
	border-radius:15px 15px 0 0;
	border-bottom:solid 1px Black;
}
.blurbtitle {
	color:BurlyWood;
	width:100%;
}

.blurbcontent {
	background-color:white;
	color:Black; /* maroon; */
	padding:8px;
	text-align:left;
	/* font-weight:bold; */
	border-radius:0 0 15px 15px;
}

.pixbox {
	border-radius:15px;
	background-color:white;
}

.pixheader {
	background-color:maroon; /*white*/
	background: linear-gradient(to bottom right, BurlyWood 0%, 
		FireBrick 26%, Brown 82%, Brown 99%);  
	/* color:maroon; */
	color:BurlyWood;
	padding:8px;
	text-align:center;
	font-weight:bold;
	border-radius:15px 15px 0 0;
	border-bottom:solid 1px Black;
}
.pixtitle {
	color:BurlyWood;
}

.pixdiv {
	background-color:white;
	padding:0;
	text-align:center;
	overflow:hidden;
	border-style:none;
}

.piximage {
	border:solid 2px;
	border-radius:10px;
	margin-top:12px;
	margin-bottom:12px;
	max-width:96%;
	display:block;
	height:auto;
	max-height:80vh;
	margin-left:auto;
	margin-right:auto;
}

.pixcaption {
	background-color:white;
	color:Black;
	padding:0px 8px 8px 8px;
	text-align:left;
	border-radius:0 0 15px 15px;
}

a.geo {
	display:block;
	border-radius:6px;
	background-color:LightGrey;
	color:maroon;
	text-decoration:none;
}

.poiall {
	background-color:white;
	color:maroon;
	font-size:16pt;
	padding:10px;
	border:solid 2px black;
	background-color:LightGrey;
	border-radius:6px;
}

@media print {
	.pagebreak {
		clear: both;
		page-break-after: always;
	}
	.piximage {
		max-height:400px;
		width:auto;
		height:auto;
		object-fit:scale-down;
	}
	div {
		break-inside:avoid;
	}

}


@media screen and ( max-width:719px ) {
	#LEFTCOL {
		float:left;
		width:100%;
		margin-left:0px;
		margin-right:0px;
	}
	#MIDDLECOL {
		float:left;
		width:100%;
		margin-left:0px;
		margin-right:0px;
	}
	#RIGHTCOL {
		float:left;
		width:100%;
		margin-left:0px;
		margin-right:0px;
	}
}
@media screen and ( min-width:720px ) and ( max-width:919px ) {
	#LEFTCOL {
		float:left;
		width:200px;
		margin-left:0px;
		margin-right:10px;
	}
	#MIDDLECOL {
		margin-left:0px;
		margin-right:0px;
		width:auto;
		overflow:hidden;
	}
	#RIGHTCOL {
		float:left;
		width:200px;
		margin-left:10px;
		margin-right:0px;
	}
}
@media screen and ( min-width:920px ) and ( max-width:1399px ) {
	#LEFTCOL {
		float:left;
		width:250px;
		margin-left:0px;
		margin-right:15px;
	}
	#MIDDLECOL {
		margin-left:0px;
		margin-right:0px;
		width:auto;
		overflow:hidden;
	}
	#RIGHTCOL {
		float:left;
		width:250px;
		margin-left:15px;
		margin-right:0px;
	}
}
@media screen and ( min-width:1400px ) and ( max-width:2199px) {
	#LEFTCOL {
		float:left;
		width:500px;
		margin-left:0px;
		margin-right:20px;
	}
	#MIDDLECOL {
		margin-left:0px;
		margin-right:0px;
		width:auto;
		overflow:hidden;
	}
	#RIGHTCOL {
		float:left;
		width:500px;
		margin-left:20px;
		margin-right:0px;
	}
}
@media screen and ( min-width:2200px ) {
	#LEFTCOL {
		float:left;
		width:800px;
		margin-left:0px;
		margin-right:25px;
	}
	#MIDDLECOL {
		width:auto;
		margin-left:0px;
		margin-right:0px;
		overflow:hidden;
	}
	#RIGHTCOL {
		float:left;
		width:800px;
		margin-left:25px;
		margin-right:0px;
	}
}