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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } 
 /* remember to define focus styles! */ :focus { outline: 0; } 
 body { line-height: 1; color: black; background: white; } 
 ol, ul { list-style: none; } 
 /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } 
 caption, th, td { text-align: left; font-weight: normal; } 
 blockquote:before, blockquote:after, q:before, q:after { content: ""; } 
 blockquote, q { quotes: "" ""; } 

html, body {
	width: 100%;
	height: 100%;
}

body {
	background-color:#fdfdfd;
	color: #212123;
	font-family: 'Hind', Helvetica, Arial, sans-serif;
	line-height: 1.5em;
	font-size: 1.15em;
	text-rendering: optimizeLegibility;
	-ms-touch-action: double-tap-zoom;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-touch-callout: transparent !important;
	-webkit-appearance: none !important;

/*
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
*/
}

a {
	color: #212123;
}
h1 {
	font-size: 1.5em;
	line-height: 1.5em;
}
h1 a {
	text-decoration: none;
}
h2 {
	font-size: 1.5em;
	line-height: 2em;
}
h2, p, li {
	margin-bottom: 0.5em;
}


#header, #footer, .text {
	text-align: left;
	max-width: 90%;
    width: 600px;
	margin: auto
}


#header {
	padding: 1.5em 2% 0 2%;
}
.menu li {
	display: inline-block;
	padding: 0.75em 1em 0.75em 0;
}
.menu li a {
	text-decoration: none;
}
#header .menu li a.active, #header .menu li a:hover, #header .menu li a:active {
	text-decoration: none;
	border-bottom: 2px solid #212123;
}
#footer .menu {
	margin-bottom: 1em;
}
#footer .menu li a.active, #footer .menu li a:hover, #footer .menu li a:active {
	text-decoration: none;
	border-top: 2px solid #212123;
}


.photo {
	position: relative;
	text-align: center;
	width: 100%;
	height: 100%;
	display: block;
    position: relative;
    background-position: center center;
    background-size: 110px 80px;
    background-repeat: no-repeat;
    background-image:url(./../img/loading.gif)
}
.photo.loaded {
	background-image: none;
}
.photo .spacer {
	display: none;
}
.photo .img-block {
	position: relative;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.photo legend {
	display: none;
} 


.text {
	margin: 3em auto;
	font-family: 'Times New Roman', Helvetica, Arial, sans-serif;
}

.text h2 {
	font-size: 1.5em;
	line-height: 1.5em;
}

.text h3 {
	font-weight: bold;
}

.text #date {
	color: #5c5c5f;
	font-size: 0.8em;
}

.text:not(.home) ul {
	list-style: disc;
	padding-left: 1em;
}

.text p {
	line-height: 1.5em;
}

.text p img {
	border: 1px solid #5c5c5f;
	width: 100%;
	height: auto;
}


#footer {
	padding: 3em 5%;
	text-align: center;
	font-size: 0.75em;
	line-height: 1.5em;
}