/* stylesjbphoto.css                  */
/* Responsive single-column layout with vertical menu */
/* Jack Boudreau, rev. 5-19-19     */

/*Reset to avoid varying browser default settings*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

body { 
	font-family: serif;
	font-size: 1.3em;
	color: #000000;
	background: #fffcf4; /*linen*/
}

a:link {color: #0000ff; text-decoration: none;}
a:visited {color: #0000ff; text-decoration: none;}
a:hover {color: #0000ff; text-decoration: underline;}

h2 {
	font-size: 1.2em;
	line-height: 1.15em;
	margin: 20px 0 ;
}

p {
	margin-bottom: 20px;
	word-wrap: break-word;  /* need to break long URL strings on phones in portrait mode*/
	overflow-wrap: break-word;
}

header {/* for top navigation */
	width: 100%;
	height: 60px;
	top: 0;
	left: 0;
	border-bottom: 1px solid #000;
	z-index: 100;
	position: absolute;
}

nav {
	float: right;
	padding: 20px;	
}

#home-icon{
	margin: 15px 20px;
	float: left;
	width: 39px;
	height: 30px;
	background: url(images/home_icon_39x30.png) no-repeat center;
	display: block;
}

#menu-icon {  /* hamburger icon for vertical menu */
	display:inline-block;
	width: 38px;
	height: 30px;
	background: #4C8FEC url(images/menu_icon_38x30.png) center;
}

#currentpage {color: #2262AD;} /* color indicates current page in menu */

/* menu is a vertical list below header on right*/
	nav ul, nav:active ul {
		display: none;
		position: absolute;
		padding: 10px;
		background: #fffcf4; /*linen*/
		border: 1px solid #444;
		right: 5px;
		top: 60px;
		width: 170px;
	}

	nav li {
		text-align: left;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}

	nav:hover ul {
		display: block;
	}

	nav li:hover {
		background: #eee;
	}

	nav li a:hover {text-decoration: none;}

/* reduce a single image along with browser window, preserve aspect ratio*/
/* the image tag must also have style="max-width: __px;"*/
.scaleimage { 
    width: 100%;
    height: auto;
}

/* reduce one of a row of images along with browser window, preserve aspect ratio*/
/* individual image tags must also have style="width: __%;	max-width: __px;"*/
.scalemultiimage { 
    height: auto;
	float: left;
	padding: 0 0 0 2px;
}

#mainContent {  /* wide left margin since content is narrow */
	margin: 70px 5px 5px 100px; /* drop content below navigation header */
	position: relative;
	background: #fffcf4; /*linen*/
}

#pageTitle {
	margin-left: 100px;  /* keep title centered over content */
}

#bottom_note {text-align: center; font-size: 0.9em;}

/*media query to reduce left margin on mobile devices */
@media only screen and (max-width : 680px) {
	
	#mainContent {
		margin: 70px 5px 5px 5px;
	}

	#pageTitle {
		margin-left: 10px;  /* keep title centered over content */
	}
}