/* header-image-logo2.css */
:root
{
	--headback: #444466;
	--footback: #aaaaaa;
	--menuback: #444466;
	--menuitemback: rgba(200, 200, 200, 0.1);
	--pagemenuback: rgba(210, 210, 230, 0.5);
	--sectiongreyback: #dddddd;
	--sectionglightreyback: #f9f9f9;
	--menubutton: #11bb11;
	--blueish: #337ab7;
	--bluehover: #226aa6;
	--greenish: #4CAF50;
	--greenhover: #3e8e41;
	--whitetext: #ffffff;
	--bluetext: #0000ff;
	--yellowtext: #ffff00;
	--rulercolour: #dddddd;
}

html
{
	/*font-size: 2vw;  2% of the viewport width makes most things grow with window width */
	width: 100vw;
	/* Set the body width to the viewport width */
	margin: 0;
	padding: 0;
	/* Remove default margins */
	font-size: 16px;
	overflow-x: hidden;
	/* Hide horizontal scrollbar */
	    line-height: 1.15; /* Improve readability */
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */

}

body
{
	width: 100vw;
	/* Set the body width to the viewport width */
	margin: 0;
	/* Remove default margins */
	padding: 0;
	overflow-x: hidden;
	/* Hide horizontal scrollbar */
	font-family: Helvetica, Arial, sans-serif;
	/* 
	font-size: 16px;
 */
	/* 16px */
	color: #000000;
}

.blue-top
{
	height: 34px;
	top: 0px;
	background-color:  var(--headback);
}

narrow-header
{
	margin-top: 0;
	height: 30px;
	font-size: 1.2rem;
	color: 	 var(--yellowtext);
	text-align: center;
	background-color:  var(--menuback);
	top: 0rem;
}

.narrow-header h3
{
	visibility: visible;
	position: relative;
	width: auto;
	height: 20px;
	margin-top: 0;
	margin: 0;
	padding: 0;
	border: none;
	font-family:  Garamond,Times,"Times New Roman",serif;
	color:  var(--yellowtext);
	
	font-size: 1.2rem;
	text-align: center;
/* 
	background-color: var(--menuback);
 */
	top: 0px;
}

header
{
	background-image: url('knap-rocks.jpg');
	background-size: cover;
	background-position: center;
	height: 150px;
	/* Set the height of the header */
	position: relative;
	margin-bottom: 36px;
	/* 	top: 0px; */
	top: 35px;
}

.logo
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
}

.logo img
{
	height: 100%;
	width: auto;
}

.header-content
{
	position: absolute;
	top: 70%;
	left: 60%;
	transform: translate(-50%, -62%);
	text-align: center;
	font-size: 1.2rem;
	color:  var(--yellowtext);
	/* Set the text color to yellow */
}

.header-content h2
{
/* 
	font-family: Helvetica, Arial, sans-serif;
 */
		font-family:  Garamond,Times,"Times New Roman",serif;

	margin: 0px;
	padding: 0px;
}

.pagemenu { top: 0px; }

hr
{
	color:  var(--rulercolour);
	height: 3px;
	/* 	background-color: #dddddd;

	border-bottom-style: solid;
 */
	width: 99%;
}