* {
	box-sizing: border-box;
}

body {
	background: #fff;
	color: #999999;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 10pt;
	margin: 0;
}

a:link		{color:#666666; text-decoration:none;}
a:visited	{color:#666666; text-decoration:none;}
a:hover		{color:#000000; text-decoration:none;}
a:active	{color:#666666; text-decoration:none;}

h1 {font-size:24pt; text-transform: uppercase;}
h2 {font-size:20pt; text-transform: uppercase;}
h3 {font-size:18pt; text-transform: uppercase;}
h4 {font-size:16pt; text-transform: uppercase;}
h5 {font-size:14pt; text-transform: capitalize; margin: 0px 0px 0px 0px;}
h6 {font-size:12pt; text-transform: capitalize; margin: 0px 0px 0px 0px;}
h7 {font-size:11pt; text-transform: capitalize; margin: 0px 0px 0px 0px;}

hr {
	color: #999;
	background:#999;
}

hr.thick1 {
	color:#999;
	background:#999;
	height:3px;
}

.header {
	font-size: 40pt;
	padding-left: 10px;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.bold {
	font-weight: bold;
}

.vcenter {
	vertical-align: middle;
}

.copyright {
	color: #666;
	font-size: 9pt;
	padding: 5px;
}

.dontshow {
	display: none;
}

.mailinglist {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #999;
	padding: 5px;
}

.tagline {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #999;
	padding: 5px;
}

.archivetitle {
	color: #999999;
}

div.galleryimage       {border:groove 0px blue;}
div.series             {border:groove 0px blue;}
div.gallerythumbnails  {padding-top:15px; color: #666666; border:groove 0px blue;}
div#gallerytitle 	   {font-size:10pt; color: #666666; font-weight:bold; border:groove 0px blue;}
div#gallerydescription {font-size:9pt; color: #666666; _margin:auto; _width:75%; border:groove 0px blue;}
div#gallerydimensions  {font-size:9pt; color: #666666; border:groove 0px blue;}
div#gallerycopyright   {font-size:9pt; color: #666666; border:groove 0px blue;}
div#galleryseealso     {font-size:9pt; color: #666666; border:groove 0px blue;}
div#galleryphotocredit {font-size:9pt; color: #666666; border:groove 0px blue;}
div#galleryseries      {font-size:9pt; color: #666666; border:groove 0px blue;}
div#gallerycollection  {font-size:9pt; color: #666666; border:groove 0px blue;}
img#gallerymainimage   {border:groove 0px blue;}

.dateupcoming {color:#666699;}
.datecurrent  {color:#666699;}
.dateprevious {color:#4e4e77;}
.eventupcomingtitle  {color:#996600;}
.eventcurrenttitle  {color:#776313;}
.eventprevioustitle  {color:#645826;}


.quote {
	font-style: italic;
	padding-left: 40px;
	padding-right: 40px;
	text-align: justify;
}

.quote2 {
	font-size:12pt;
	padding-left: 100px;
	padding-right: 100px;
	text-align: justify;
}

.shiftup5 {
	margin-top:-5px;
}

.shiftup10 {
	margin-top:-10px;
}

.title {
	font-weight:bold;
	margin:30px 10px 15px 10px;
}

div.content {
	margin-left: 20%;
	padding: 0px 10px;	/* 0px top/bottom, 10px left/right */
}

div.content::after {
/*	content: "~~ 1050px < screen width ~~";*/
}

img {max-width: 100%;}

ul.navigation {
	background: #fff;
	font-size:12pt;
	height: 100%;
	list-style-type: none;
	padding: 0;
	position: fixed;
	width: 20%;
	overflow: auto;
	transition: 0.2s;
}

ul.navigation li {
	padding: 7px 10px;
}

ul.navigation li a {
	color: #777;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
}
ul.navigation li a.active {
	_background-color: #4caf50;
	_background-color: #A68C52;
	background-color: white;
	color: #000;
}
ul.navigation li a:hover:not(.active) {
	background-color: white;
	color: #ccc;
	transition: 0.2s;
}

ul.navigation li.subnav1 a {
	text-transform: capitalize;
}

ul.navigation li.subnav2 a {
	text-transform: capitalize;
}

ul.navigation li.subnav3 a {
	text-transform: capitalize;
}

ul.navigation li.icon {
	display: none;
	font-size: 30pt;
}
ul.navigation li.icon a {
	color: #666;
}

ul.navigation li.subnav1 {
	margin-left: 20px;
}

ul.navigation li.subnav2 {
	margin-left: 40px;
}

ul.navigation li.subnav3 {
	margin-left: 60px;
}


.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col_"] {
    float: left;
    padding: 5px;
    border: 0px solid black;
}
.col_1-1  {width: 100%;}

.col_1-2  {width: 50%;}
.col_2-2  {width: 100%;}

.col_1-3  {width: 33.33%;}
.col_2-3  {width: 66.66%;}
.col_3-3  {width: 100%;}

.col_1-4  {width: 25%;}
.col_2-4  {width: 50%;}
.col_3-4  {width: 75%;}
.col_4-4  {width: 100%;}

.col_1-6  {width: 16.67%}
.col_5-6  {width: 83.33%}



@media screen and (max-width: 1050px) {
	/* tablet */
	div.content::after {
	/*	content: "~~ screen width < 1050px ~~";*/
	}
	/* move navigation from left to top */
		/* move navigation from left to top and hide all but the first navigation item */
	ul.navigation {
        width:100%;
        height: auto;
        position:relative;
    }
	ul.navigation li:not(:first-child) {
		display: none;
	}
	ul.navigation li {
		float: left;
	}
	ul.navigation li.icon {
		float: right;
		display: inline;
	}

	ul.navigation.clicked {
		opacity: 0.95;
	}
	ul.navigation.clicked li {
		display: block;
		float: none;
	}
	ul.navigation.clicked li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	ul.navigation.li.subnav1 {
		display: none;
	}
	ul.navigation.li.subnav2 {
		display: none;
	}

	/* move content to the left */
	div.content {
		margin-left: 0;
	}

}

@media screen and (max-width: 600px) {
	div.content::after {
	/*	content: "~~ screen width < 600px ~~";*/
	}

	/* move navigation from left to top and hide all but the first navigation item */
	ul.navigation li:not(:first-child) {
		display: none;
	}
	ul.navigation li.icon {
		float: right;
		display: inline;
	}

	ul.navigation.clicked {
		opacity: 0.95;
	}
	ul.navigation.clicked li {
		display: block;
		float: none;
	}
	ul.navigation.clicked li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	/* move content to the left */
	div.content {
		margin-left: 0;
	}

	.col_1-2  {width: 100%;}
	.col_2-2  {width: 100%;}

	.col_1-3  {width: 100%;}
	.col_2-3  {width: 100%;}
	.col_3-3  {width: 100%;}

	.col_1-4  {width: 100%;}
	.col_2-4  {width: 100%;}
	.col_3-4  {width: 100%;}
	.col_4-4  {width: 100%;}

	.col_1-6  {width: 100%}
	.col_5-6  {width: 100%}
}