/* styles.css */

/* --------------- defines class selector for each webfont --------------- */
	.KenoshaAntiqueNF { 
		font-family: KenoshaAntiqueNF;
		font-weight: normal;
		font-style: normal;
	}
	.AvenirLTStd-Light { 
		font-family: AvenirLTStd-Light;
		font-weight: normal;
		font-style: normal;
	}
	.AvenirLTStd-Book { 
		font-family: AvenirLTStd-Book;
		font-weight: normal;
		font-style: normal;
	}
	.KenoshaAntiqueNF36 { 
		font-family: KenoshaAntiqueNF;
		font-weight: normal;
		font-style: normal;
		font-size: 2em;
	}
	.AvenirLTStd-Light36 { 
		font-family: AvenirLTStd-Light;
		font-weight: normal;
		font-style: normal;
		font-size: 3em;
	}
	.AvenirLTStd-Book-contact-header { 
		font-family: AvenirLTStd-Book;
		font-weight: normal;
		font-style: normal;
		font-size: 3em;
	}
	.AvenirLTStd-Book-contact-text { 
		font-family: AvenirLTStd-Book;
		font-weight: normal;
		font-style: normal;
		font-size: 2em;
	}
	.AvenirLTStd-Book-contact-form { 
		font-family: AvenirLTStd-Book;
		font-weight: normal;
		font-style: normal;
		font-size: 1.25em;
	}
	.AvenirLTStd-Book-contact-required { 
		font-family: AvenirLTStd-Book;
		font-weight: normal;
		font-style: normal;
		font-size: 1em;
	}
	.AvenirLTStd-Book36 { 
		font-family: AvenirLTStd-Book;
		font-weight: normal;
		font-style: normal;
		font-size: 4em;
	}

/* --------------- defines layout of menu --------------- */
/* https://www.bloc.io/tutorials/jottly-a-beginner-s-guide-to-html-css-skeleton-and-animate-css#!/chapters/660 */
/* https://designshack.net/articles/mobile/build-a-responsive-mobile-friendly-web-page-with-skeleton/ */
/* html id="abc" relates to styles.css #abc { ... } */

body {
	background: url("../images/page-background.png") no-repeat fixed center / cover;;
	background-color: #e7f4fc;
}

#headerImage img {
	margin-top: 3%;
	max-width: 100%;
	height: auto;
}

#headerImage hover {
	/* https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/ */
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
        transform: scale(1.3);
}

#KenoshaAntiqueNFheader { 
	margin-top: 3%;
	font-family: KenoshaAntiqueNF;
	font-weight: normal;
	font-style: normal;
	font-size: 2em;
	color: #4b5aa8;
}

#nav {
	list-style:none; 	/* added to center menu */
	text-align:center; 	/* added to center menu */
	vertical-align: super;	/* seems to affect the body text */
}
 
#nav ul li {
	display: inline;
}
 
#nav a {
	display:inline-block; /* added to center menu */
	margin: 0px 8px; /* top right left bottom - spacing of the menu items */
	text-decoration: none;
	font-family: KenoshaAntiqueNF;
	font-weight: bold;
	font-style: normal;
	font-size: 1.75em;
	color: #000000;
	outline: 0; /* get rid of ghost dotted boxed around links to images */
}
 

#nav a:hover {
	/* https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/ */
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
        transform: scale(1.3);
}

#nav a:hover a:active, a:focus {
	outline: 0; /* get rid of ghost dotted boxed around links to images */
}

/* issue with touch screen showing a light blue background on menu when selected, then background disappears
	#nav a:active {
	color:inherit;
  	text-decoration: none;
	}
*/

#selected a {
	background-color: #4b5aa8;
	color: white;
}

#copyright {
	margin-top: 3%;
	font-family: AvenirLTStd-Light;
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	color: #000000;
}

#aboutus {
	list-style:none; 	/* added to center menu */
	text-align:left; 	/* added to center menu */
	vertical-align:bottom;	/* seems to affect the body text */
}
 
#aboutus ul li {
	display: inline;	/* remove line markers */
}

.aboutus1{
	display: inline-block;
	float: none;
	vertical-align: middle;
}

.aboutus2{
	display: inline-block;
	text-decoration: none;
	float: none;
	margin-left: 20px;
	vertical-align: middle;
}

.aboutus2 a {
	text-decoration: none;
	color: #000000;
}

.aboutus3{
	display: inline-block;
	text-decoration: none;
	float: none;
	margin-left: 20px;
	vertical-align: middle;
}

#example-list a {
	text-decoration: none;
	color: #000000;
}

#example-list:hover {
	/* https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/ */
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
        transform: scale(1.1);
}

hr.dropstyle {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

.feature img {
	/* ensure images resize property to their containers */
	/* margin-bottom: 15px; */
	max-width: 100%;
	height: auto;
}

#KenoshaAntiqueNFhomefilm { 
	font-family: KenoshaAntiqueNF;
	font-weight: bold;
	font-style: normal;
	font-size: 1.65em;
	color: #000000;
}

#KenoshaAntiqueNF125 { 
	font-family: KenoshaAntiqueNF;
	font-weight: bold;
	font-style: normal;
	font-size: 1.25em;
	color: #000000;
}

#AvenirLTStd-LightHomeCaption { 
	font-family: AvenirLTStd-Light;
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	color: #000000;
}

#AvenirLTStd-BookHomeCaption { 
	font-family: AvenirLTStd-Book;
	font-weight: normal;
	font-style: normal;
	font-size: 1.25em;
	color: #000000;
	line-height: 1em;
}

#AvenirLTStd-BookGalleryCaption { 
	font-family: AvenirLTStd-Book;
	font-weight: normal;
	font-style: normal;
	font-size: 1.15em;
	color: #000000;
	line-height: 1.2em;
}