* {
	box-sizing: border-box;
}

:root {
	--red:		#e6194B77;
	--green:	#3cb44b77;
	--yellow:	#ffe11977;
	--blue:		#4363d877;
	--orange:	#f5823177;
	--cyan:		#42d4f477;
	--magenta:	#f032e677;
	--pink:		#fabed477;
	--teal:		#46999077;
	--lavender:	#dcbeff77;
	--brown:	#9A632477;
	--beige:	#fffac877;
	--mint:		#aaffc377;
	--grey:		#a9a9a977;
	--maroon:	#80000077;
	--navy:		#00007577;
}

/* image reset */
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin 1rem;
}

.invis {
	display: none;	
}

.c1 {
	background : var(--red);
}

.c2 {
	background : var(--blue);
}

.c3 {
	background : var(--green);
}

.c4 {
	background : var(--yellow);
}

.c5 {
	background : var(--orange);
}

.c6 {
	background : var(--cyan);
}

.c7 {
	background : var(--magenta);
}

.c8 {
	background : var(--pink);
}

.c9 {
	background : var(--teal);
}

.c10 {
	background : var(--lavender);
}

.c11 {
	background : var(--brown);
}

.c12 {
	background : var(--beige);
}

.c13 {
	background : var(--mint);
}

.c14 {
	background : var(--grey);
}

.c15 {
	background : var(--maroon);
}

.c16 {
	background : var(--navy);
}

.modaldialog	{
	background: #8ef;
	border: 1px;
	border-radius: 0.5rem;
	padding: 1rem;
	box-shadow: 0 0.2rem 0.6rem 0 rgba(0,0,0,0.3);
}

.photodialog	{
	border: 1px solid white;
	border-radius: 0.5rem;
	padding: 0;
	box-shadow: 0 0.3rem 0.6rem 0 rgba(0,0,0,0.3);
}
.photodialog::backdrop	{
	background: #000b;
}

.banner {
	vertical-align: middle;
	padding-left:2em;
	padding-right:2em;
	width: clamp(250px, 33vw, 500px);
}

.modaldialog::backdrop	{
	background: #000b;
}

.officer {
	width: 95%;
	background: #ffe;
	padding: 4px;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 3px 4px 0 rgba(0,0,0,0.3);
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	text-align: left;
	font-size: min( 3vw, 1rem);
}

.officersform {
	width: 95%;
	background: #f7fff7;
	padding: 4px;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 3px 4px 0 rgba(0,0,0,0.3);
	margin-top: 2rem;
	margin-bottom: 4px;
	text-align: left;
	font-size: min( 3vw, 1rem);
}

.entrybox {
	display: flex;
	min-width: 400px;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: bottom;
	gap: 0.5rem 0.5rem;
}

.topline {
	position: absolute;
	top: 0.5rem;
	left: 0;
	z-index: 0;
	width: 100%;
	font-size: min( 3vw, 1rem);
}
.topline a {
	z-index: 10; /* in front of a lot! */
	padding-right: 1rem;
}
.breadcrumb {
	position: relative;
	z-index: 25; /* in front of a lot! */
	font-size: min( 3vw, 1rem);
}

.warning {
	color: red;
	background-color: #fffa;
}

[contenteditable] {
	background-color: white;
}

.cal_table {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	font-size: clamp( 12px, 3vw, 1rem);
}

.rimmed {
	border: 1px solid black;
	border-radius: 4px;
}

td.cal_mark {
	text-align: center;
}

td.cal_date {
	text-align: right;
}

td.cal_owners {
	padding-left: 2rem;
	text-align: left;
}

.photoimg {
	width: 100%;
}

.gallery_image {
	width: 100%;
	cursor: pointer;
}

.doc_icon {
	width: 4vw;
	height: 4vw;
	max-width: 32px;
	max-height: 32px;
}

.photo-control-close {
	position: fixed;
	top: 0;
	left: calc(100% - 40px);
	cursor: pointer;
}

.photo-control-prev {
	position: fixed;
	top: calc(50% - 20px);
	left: 0;
	cursor: pointer;
}

.photo-control-next {
	position: fixed;
	top: calc(50% - 20px);
	left: calc(100% - 40px);
	cursor: pointer;
}


/* media query for narrow screens */

@media only screen and (max-width: 800px) {

	.topline {
		margin-top: 2rem;
		position: relative;
		top: 0;
		left 0;
	}

}