* { margin: 0; padding : 0 ; text-align : left; box-sizing: border-box;}

:root 
		{
			--t_light: #f8f8f8; 
			--t_altBright: #e0e0e0;
			--t_mid: #c0c0c0;
			--t_altDark: #696969;
			--t_dark: #303030;
			--redBoxLight: #fdd;
			--redBoxDark: #f44336;
			--photo_back: #eee;
			--navItemWidth:100%;
			--horizSep:2%;
			--vertSep:2%;
			--imgBoxSep:5px;
			--maxW:1200px;
			--headerImgPadTop:40.33%; /*Edit if banner image changed. = h/w aspect ratio */
			--dim_background:rgba(30,30,30,0.97);  /* if editing, change correspnding global var in rePhoto.js */
		}

.clearfix::after 
		/* prevents overspill of floated elements  see https://www.w3schools.com/howto/howto_css_clearfix.asp*/
		{	content: "";
			clear: both;
			display: table;
		}

html	{
			font-size: 16px;
			height:1000px;
		}

html, body 
		{
			/* font-family: "Verdana", "Geneva", "Helvetica", sans-serif;  */
			font-family: Georgia, 'Times New Roman', Times, serif;
			color: var(--t_dark); 
			background: white;
			height:100%;
		}
body
		{
			width:100%; margin:auto;  /* Full sceen on phones & tablets, limited on dektops */
			position: relative;
		}

.horizSep
		{
			margin: 0 var(--horizSep);
		}
.vertSep
		{
			margin-top: var(--vertSep);
		}
.positionCentred 		
		/*Forces browser to try to position the element against all edges of the container
		If no width is specified, any element with this class will stretch to fill its container, so set width separately if needs be. */
		{	position: absolute;
			top:0;bottom:0;left:0;right:0;
			margin: auto;
		}
.centreText
		{
			text-align: center;
		}
.halfWidth
		{
			width:50%;
			float:left;
		}
.backgroundImage
		{
			background-size: cover;
			background-repeat: no-repeat;
		}

header, footer
		{
			width:100%;
			max-width: var(--maxW);
			margin:auto;
		}
header
		{
			position: -webkit-sticky; /* Safari */
			position: sticky; 
			z-index: 0;
			top: 10px;
		}
div#div_headerImg
		{
			width:100%;
			background: url("banner_1024.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			padding-top: calc(0.5 * var(--headerImgPadTop));
		}
	@media screen and (min-height:375px) { 	
		div#div_headerImg {
			padding-top: var(--headerImgPadTop);
		} }
	@media screen and (min-width:1025px) { 	
			div#div_headerImg {
				background:url("banner_1200.jpg")
			}
	}

p#p_headerText
		{
			position:absolute;
			top:10%;left:0;
			width:100%;
			font-size: 5vw;
			/* font-family: "Georgia"; */
		}
	@media screen and (min-width:1200px) { 	p#p_headerText {font-size: 4em;} }

div#div_about
		{
			padding: 0 2% 2% 2%;
			margin-top:calc(0.6*var(--vertSep));
			background: var(--t_light);
		}
div#div_about p
		{
			width:96%;
			padding: 2% 0 0 0;
			font-size: 0.6em;
			margin: auto;
			color:black;
		}
	@media screen and (min-width:668px) { div#div_about p {font-size: 0.7em;} }
	@media screen and (min-width:768px) { div#div_about p {font-size: 0.8em;} }
	@media screen and (min-width:900px) { div#div_about p {font-size: 1em;} }

div#div_about a
		{
			text-decoration: none;
			color:var(--t_altDark);
			cursor:pointer;
		}

div#divPage
		{
			z-index: 1;
			/* overflow-y :hidden; */
			transform:translate3d(0,0,0) ;
			-webkit-transform: translate3d(0,0,0); /*  Overcomes Safari bug whereby z-index and/or sticky positioning of header image
			are not respected on initial page load */
			padding-bottom: 3%;
			max-width: var(--maxW);
			margin:auto;
		}

div#divErrMsg, div#divSuccess
		{	
			width: 100%;
			padding: 10px;
			display: none;
		}
div#divErrMsg
		{	
			background-color: var(--redBoxLight);
			border-left: 6px solid var(--redBoxDark);
		}
div#divSuccess	
		{	
			background-color: #dfd;
			border-left: 6px solid #009900;
		}

div#div_glryMenu
		{
			width: 100%;
			position: relative;
			background-color: var(--t_light);
			padding: var(--vertSep) calc(3*var(--vertSep));
			z-index: 2;
		}
div.div_glryMenuItem
		{
			width:100%; /* small screen only */
			position: relative;
			float:left;
			margin-top:2%;
			/* border:1px solid grey; */
		}
	@media screen and (min-width:600px) { div.div_glryMenuItem {width:50%;} }
	@media screen and (min-width:769px) { div.div_glryMenuItem {width:33.333%;} }

div.div_glryMenu_imgContainer
		{
			padding-top:100%; 
			width: 100%;
		}
	
div.div_glryMenu_imgContainer img
		{
			max-width: 90%;
			max-height: 80%;
			display: block;
		}
div.div_glryMenu_text
		{
			width:100%;
			position: absolute; bottom:-5%;
			padding: 2% 0;
		}

/*	
	-----------------------------
	Nav Bar 
	-----------------------------
*/

ul.topNav 
		{
			width:100%;
			list-style-type: none;
			position:absolute; bottom:-10%; font-size: 12px; /* bottom value ensures visibility on small screens*/
		}
		@media screen and (min-width:769px) { ul.topNav {bottom:0; font-size: inherit;}}
ul.topNav li
		{
			float:left;
			width: var(--navItemWidth);
			position:relative;
		}
.topNav li a, .topNav li span
		{
			color:var(--t_altDark);
			font-size: 0.75em;
			padding: 1.5%;
			display: block; 
			text-decoration: none; text-align: center;
			width:100%;
			background: var(--t_altBright);
			overflow: hidden;
			text-overflow: ellipsis;
			position: relative;
			min-height:2em;
		}
	@media screen and (min-width:600px) { .topNav li a, .topNav li span {padding: 2.5%; font-size: 1vw;} }
	@media screen and (min-width:769px) { .topNav li a, .topNav li span {padding: 5%; font-size: 0.9em;} }

.topNav li a:hover, .topNav li:hover, .topNav li span:hover
		{
			background: var(--t_mid); 
			color: var(t_altBright);
		}

/*	
	-----------------------------
	Gallery Image Page
	-----------------------------
*/
div#div_glry
		{
			width:100%;
			padding: var(--vertSep) 2%;
			background-color: var(--t_altBright);
		}
	@media screen and (min-width:668px) { div#div_glry {padding: var(--vertSep) 5%; } }
	@media screen and (min-width:769px) { div#div_glry {padding: var(--vertSep) 10%; } }

div#div_glryDesc
		{
			width:100%;
			padding: var(--vertSep) 0.5%;
			font-size: 0.6em;
		}
	@media screen and (min-width:668px) { div#div_glryDesc {font-size: 0.7em;} }
	@media screen and (min-width:768px) { div#div_glryDesc {font-size: 0.8em;} }
	@media screen and (min-width:900px) { div#div_glryDesc {font-size: 1em;} }

div.div_glryCol
		{
			width:100%;
			/* Width overridden by server (inline styling) depending on number of images & therefore columns needed */
			float:left;
		}
div.div_glryCol img
		{
			padding: 1.5%;
			width:100%;
			display:block;
			cursor:pointer;
		}
	div.div_glryCol img:hover {opacity:0.8;}

/*	Full size image display */
div#div_fullSize_outer
		{
			/* Width controlled by position:absolute & left & right values. 
				Small screen default full size. */
			position:absolute; top:0%; left:0%; right:0%; bottom:0;
			max-width: var(--maxW);
			margin:auto;
			background: var(--dim_background);
			z-index: 10;
			display: none;
		}
div#div_fullSize_inner
		{
			max-width:90%; aspect-ratio: 1/1 ; /* w/h Overriden by js based on specific image displayed */
			max-height: 90%;
			border: 1px solid var(--t_altBright);
			background: url("banner.jpg") no-repeat;
			background-size: cover;
			background-position: center;
			opacity: 1;
			animation-name: zoom;
  			animation-duration: 0.3s;
		}
	@keyframes zoom {
		from {transform:scale(0.8)}
		to {transform:scale(1)}
		}
	@media screen and (min-width:668px) { div#div_fullSize_inner {border: 3px solid var(--t_altBright);} }
	@media screen and (min-width:1025px) { div#div_fullSize_inner {border: 6px solid var(--t_altBright);} }

div.div_fullSize_outer p
		{
			position:absolute;
			text-align: center;
			color: var(--t_mid);
			font-size: 1.5em;
			transition: 0.3s;
			font-weight: bold;
			opacity:0.8;

		}
p#p_fullSizeTitle
		{
			width: 100%;
			bottom:-1.5em;
			font-size: 0.5em;
			font-weight: normal;
			color:var(--t_altBright); opacity: 1;
		}
		@media screen and (min-width:668px) { p#p_fullSizeTitle {font-size: 0.75em; margin-top:0.1em; bottom:-1.6em} }
		@media screen and (min-width:1025px) { p#p_fullSizeTitle {font-size: 1em; margin-top:0.3em; bottom:-1.8em} }
p#close
		{
			top: 0%;
			right: 0.1em;
			padding:5px;	
		}
p#prev, p#next
		{
			position: absolute; top:48%;
			font-size: 1.5em;
			padding:10px;
		}
p#prev { left:0;  } 
p#next { right:0; }
p#prev:hover, p#next:hover, p#close:hover {color:white; opacity:1; cursor: pointer;}

/*	Contact Page */

div#div_contact
		{
			width:100%;
			padding:10%;
			background: var(--t_light);
		}
div#div_contact p
		{
			width:100%;
			font-size:1em;
			padding:2% 0;
		}

div#div_dims {
	z-index: 20;
	position: fixed; top:3px; left: 2px;
	border: 2px solid var(--redBoxDark);
	background-color: #c0c0c0;
	width: 25%;
}
@media screen and (min-width:600px) { div#div_dims {width:10%;} }

footer
		{
			color: var(--t_altDark);
			padding: var(--vertSep) 10%;
		}
footer p
		{
			width: 100%;
			font-size: 0.6em;
			text-align: center;
		}