@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
/* Common properties */
:root {
	--page-utility-background-colour: #7AAF36;
	--maximum-width-to-prevent-horizontal-scroll: 88vw;
}
/*:root {
    --amazon-light-colour: #fe9900;
}*/
/* End of common properties */

/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
	background: #6c1717;
	box-shadow: inset 1px 0 5px red;
	border-radius: 1px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: black;
	border-radius: 10px;
	border: solid black 2px;
}
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #1f2024;
	}
/* End of scroll bar*/

body {
	font-family: verdana, sans-serif;
	font-size: min(10vw, 1rem);
	margin: 0;
	padding: 0;
	text-align: left
}

/* To position footer at the bottom on short pages */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#divFooter {
	margin-top: auto;
}
/* End of style to push footer to te bottom on short pages */

/* Prevent horizontal scroll */
fieldset, input, textarea, .g-recaptcha {
	max-width: var(--maximum-width-to-prevent-horizontal-scroll);
}
/* End of prevent horizontal scroll */

a {
	color: black;
}

	a:hover {
		color: red;
	}
/*h1
{
	font-size: 1.4em
}
h2
{
	font-size: 1.2em
}
h3
{
	font-size: 1.1em
}
h4
{
	font-size: 1.0em
}*/
h1 {
	/* Min to prevent text spanning beyond intended width on Galaxy fold */
	font-size: min(10vw, 1.8rem);
}

h2 {
	font-size: min(10vw, 1.7rem);
}

h3 {
	font-size: min(10vw, 1.6rem);
}

h4 {
	font-size: min(10vw, 1.5rem);
}

h4 {
	font-size: min(10vw, 1.4rem);
}

h5 {
	font-size: min(10vw, 1.3rem);
}

h6 {
	font-size: min(10vw, 1.2rem);
}

p, li, .nav-link {
	font-size: min(10vw, 1.1rem);
}

a, footer p {
	font-size: min(10vw, 1rem);
}

em {
	font-style: normal;
	font-weight: bold;
}

h1, h2, h3, a img, .divContentBox p {
	padding: 0px;
	margin-top: 14px;
	/*margin-bottom: 6px;*/
	margin-bottom: 0.1rem;
}

hr {
	color: black;
	height: 1px;
	margin-bottom: -7px;
	margin-top: -9px;
	display: block
}

img {
	/*max-width: 85vw;*/
	max-width: 100%;
}

a img {
	padding: 0px;
	border: solid 1px black;
}

a:hover img, a:active img {
	border-color: red;
}

a:visited img {
	border-color: green;
}

ul {
	/*margin-left: 7px;*/
	padding: 0;
	/*margin-bottom: -10px;*/
	margin: 9px;
}

li {
	list-style-type: none;
	/* padding-bottom: 20px; */
	/*margin-bottom: 28px;*/
	/*margin-right: 5rem;*/
}

form, fieldset {
	width: 31em;
	text-align: right;
	border: none;
}

input {
	font-size: 0.9em;
	font-family: verdana,sans-serif;
	background-color: white;
	color: black;
	border: solid 1px silver;
	width: 20em;
}

textarea {
	font-size: 0.9em;
	font-family: verdana,sans-serif;
	background-color: white;
	color: black;
	border: solid 1px silver;
	width: 20em;
	height: 20em
}

label {
	float: left
}

#divHeader {
	display: flex;
	justify-content: center;
	background: black;
	/* height: 25px; */
	flex-direction: column;
	align-items: center;
	/*flex-wrap: wrap;*/
	/* background-image: url(/images/?farm=1&server=224&photoid=511319797&originalSecret=44b84b746e&size=o); */
	background-image: url(/images/?farm=1&server=220&photoid=503535459&originalSecret=3202a3f679&size=o);
	background-size: cover;
	/* background-size: contain; */
	/*background-position: bottom -400px right 0px;*/
	background-repeat: no-repeat;
	height: 26vh;
}

@media (max-width: 686px), (min-width: 451px) {
	#divHeader {
		background-position: bottom -106px right 0px;
	}
}

@media (max-width: 450px) {
	#divHeader {
		background-position: bottom 0px right 0px;
	}
}

@media (min-width: 1001px) {
	#divHeader {
		background-position: bottom -400px right 0px;
	}
}

#divHeader h2, #divHeader h2 a {
	font-size: 2.5vw;
	transform: scale(1) rotate(-5deg) translate(0px, 0px) skew(-20deg, 0deg);
}

#divHeader h2 {
	padding: 0px;
	margin: 0px;
	font-family: "Rock Salt", cursive;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.1rem;
	word-spacing: 0.3rem;
	text-transform: uppercase;
	-webkit-text-stroke-color: black;
	-webkit-text-stroke-color: #000000;
	filter: drop-shadow(1px 1px 0px #000000);
	-webkit-text-stroke-width: 1px;
	/* line-height: 1.6em; */
	color: white;
	/*float: left;*/
	/*display: inline;*/
	/* margin-top: 1vh; */
	/* font-size: 7vw; */
}

#divHeader a {
	text-decoration: none;
	color: #ff00004f;
	text-transform: uppercase;
}

#divHeader div, #divFooter div {
	padding-left: 5px;
	margin: 0px;
}














/* Primary navigation */
nav.navbar {
	position: sticky;
	top: 0;
	/* width: 100vw; */
	display: flex;
	justify-content: center;
	/*    margin-left: auto;
    margin-right: auto;*/
	/*border-bottom: 3px solid var(--colour-from-frog-background-dark) !important;*/
	margin-top: 0vh;
	background-color: black;
}

.navbar-nav {
	list-style: none;
}

#navbar-container {
	margin-right: auto;
	margin-left: auto;
}

.navbar-collapse {
	align-items: center;
}

.nav-item {
	margin-left: 0.6rem;
	margin-right: 0.6rem;
	display: inline-block;
	text-align: left; /* For pages such as gallery which is currently centred */
}

.nav-item {
	/* filter: drop-shadow(1px 5px 4px #222); */
}

.nav-link {
	display: block;
	/* padding-top: 4px; */
	padding-bottom: 0px;
	/* padding-left: 15px; */
	/* padding-right: 15px; */
	text-decoration: none;
}

.nav-item.selected {
	background-color: white;
}

/*.nav-item:hover a,
	.nav-item.selected a {
		color: black;
	}*/

.nav-item a {
	padding-bottom: 3px;
	text-transform: uppercase;
	border-bottom: solid 1px red;
	color: white;
}


	.nav-item a:hover {
		/* background-color: white; */
		/* border: solid 1px green; */
		border-bottom: solid 1px white;
	}

/* Stuck navigation */
/* TO DO */
header.stuck #header-brand {
	/*font-size: 2.7rem;*/
	/*display: none;*/
	/*opacity: 0;*/
}

.navbar.stuck {
	position: fixed;
	top: 0;
}
/* End of stuck navigation */
/* Mobile navigation */
#mobile-navigation-icon {
	display: none;
	background-color: white;
	/*position: absolute;*/
	position: fixed;
	right: 0;
	font-size: 1.6rem;
	cursor: pointer;
	padding: 7px 15px;
	z-index: 5;
	color: green;
	border-width: 1px 1px 2px 2px;
	border-style: solid;
	border-color: green;
}

#page-scroll-up-icon {
	opacity: 0;
	bottom: 12vh;
}

.open-side-panel, .page-scroll-icon {
	/* float: right; */
	right: 10px;
	border: solid 1px white;
}

.toggle-side-panel, .page-scroll-icon {
	position: fixed;
	/*position: sticky;*/
	/*top: 0;*/
	width: 2.9rem;
	margin-left: auto;
	/*display: flex;
    */ justify-content: flex-end;
	font-size: 1.6rem;
	cursor: pointer;
	background-color: var(--page-utility-background-colour);
	color: white;
	padding: 7px 15px;
	z-index: 1; /* Above page images and behind mobile navigation (expanded) */
}

@media only screen and (max-width: 767px) {
	/*#mobile-navigation-icon {
		display: revert;
	}*/

	/*nav.navbar.display {
		display: revert;
	}*/

	/*nav.navbar:not(.display) {
		display: none;
	}*/

	/*nav.navbar {
		position: fixed;*/
	/*width: 263px;*/
	/*top: 50px;
		right: 0;
		height: 80vh;*/
	/*padding: 10px 10px 10px 0px;*/
	/*padding-top: 6px;*/
	/*padding-bottom: 200px;*/
	/*background-color: rgba(255, 255, 255, 0.9);
		overflow-x: hidden;*/
	/*overflow-y: scroll;*/
	/*transition: 2.9s;*/
	/*border-left: solid 2px green;
	}*/

	.nav-item {
		/*width: 250px;*/
		/*float: none;*/
		/*border: solid 1px #43e740;*/
		margin-bottom: 11px;
	}

	.navbar-nav {
		/*display: inline;*/
		padding-left: 0px;
		/*padding-right: 5px;*/
	}
}
/* End of mobile navigation */
/* End of primary navigation */

#divFooter {
	background: black;
}

#divSearchControls {
	padding-right: 14px;
	line-height: 1.9em;
	display: inline;
	float: right
}

#frmSiteSearch {
	display: inline
}

#searchterm, #btnSubmit {
	border: solid 1px silver;
}

#searchterm {
	width: 100px;
}

#btnSubmit {
	width: 70px;
}

#searchterm {
	height: 14px;
	width: 200px;
	padding-left: 2px
}

#divBreadcrumbNavigation {
	margin-top: 5px;
	margin-left: 10px;
	padding-bottom: 10px;
}

#divContentWrapper {
	max-width: 96vw;
	display: flex;
	flex-wrap: wrap;
	/*float: left;*/
	/*width: 100%;*/
	/*width: min(730px, 96vw);*/
}
/*#divLeftNavigation,*/
#divBreadcrumbNavigation,
#divContentWrapper {
	margin-left: auto;
	margin-right: auto;
}

#divContent {
	/*max-width: 570px;*/
	margin-top: 0;
	margin-bottom: 0;
	/*margin-left: 150px;*/
	/*margin-right: 150px;*/
	margin-left: auto;
	margin-right: auto;
	/* padding-left: 0; */
	/* padding-right: 0; */
	padding-top: 0px;
	/*overflow: scroll*/
}

#divLeftColumn {
	/*float:  left;*/
	/*width: 150px;*/
	/*width: 24vw;*/
	/*margin-left: -100%*/
}
/*#divLeftNavigation {
	margin-bottom: 12px;
	margin-left: 8px;
	margin-right: 8px;
	padding: 12px;
}*/
/*#divLeftNavigation,*/
#divBreadcrumbNavigation {
	border-bottom: solid 1px silver;
}
/*#divLeftNavigation ul {
	margin-top: 6px;
	margin-bottom: 0px;
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}
#divLeftNavigation li
{
	list-style-type: none;
	padding-bottom: 10px
}*/
/*#divLeftColumn #divGoogleAdLinks
{
	margin-top: 30px;
	margin-left: 8px
}*/
/*#divRightColumn
{
	float: left;
	width: 150px;
	margin-left: -150px;
	margin-bottom: 20px;
}*/
/*#divRightAds
{
	margin-right: 8px;
	padding-left: 5px;
}*/
#divFooter {
	color: white;
	display: flex;
	justify-content: center;
}

	#divFooter a {
		color: white;
	}

		#divFooter a:hover {
			background-color: white;
			color: black
		}

.innerTube {
	margin-bottom: 20px
}

.clearBoth {
	clear: both
}
/*
Page specific styling
*/
#PhotoCategories li {
	display: inline;
	list-style-type: none
}

#PhotoCategories li {
	/*font-size: 1.4em;*/
	padding-right: 20px
}

.MostRecentPhotos li, #MostViewedPhotos li, #MyFavouritePhotos li, #SetDisplay li {
	display: inline;
	list-style-type: none;
	padding-right: 10px
}

#MostViewedPhotos {
	margin-left: 0px;
	padding-left: 0px
}

#ListSets li {
	list-style-type: none
}

#SetLink {
	padding-left: 2em
}

#News li {
	list-style-type: none;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}

#divReviewHeadlines ul {
	margin-left: 0px;
	padding-left: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2rem;
}

#divReviewHeadlines li {
	list-style-type: none;
	display: flex;
	flex-direction: column;
}

#divReviewHeadlines a {
	/* Expand click area (namely for mobiile) */
	/* padding-top: 24px; */
	/* padding-bottom: 35px; */
}

#divReviewHeadlines li a img {
	vertical-align: middle
}

#WebsiteDevelopmentSkillSetList {
	text-indent: -40px;
	margin-bottom: -10px
}

.divContentBox {
	padding-bottom: 10px;
	/*padding-left: 10px;
	padding-right: 10px;*/
	margin-bottom: 8px;
	/*border: solid 1px silver;*/
}
/*.divContentBox img {
		height: 240px;
	}
	#divPhotoDisplay img {
		height: revert;
	}*/
img.spacer-image {
	height: 1px;
}

#divReviewHeadlines {
	margin-top: -20px
}

.imgmarginleft {
	margin-left: 7px;
}

.imgmarginright {
	margin-right: 7px;
}

.centre {
	text-align: center;
}

/*#divPhotoDisplayControls {
	margin-top: 8px;
	float: left;
	width: 165px;
	display: inline;
	vertical-align: top;
	text-align: left
}*/

#divPhotoDisplay {
	float: left;
	/*width: 500px;*/
	display: inline;
	vertical-align: top
}

	#divPhotoDisplay a img {
		border: solid 1px silver;
	}

#divSiteSearchResults {
	margin-top: 15px;
	display: inline
}

h1, h2, h3, h4, h5, h6, p, li,
/*#divReviews-review*/
#divBreadcrumbNavigation, #divContent {
	/*max-width: 605px;*/
	/*max-width: min(1320px, 82vw);*/
	max-width: min(98vw, 50rem);
	/*display: block;*/
}

#divContent {
	width: 50rem;
}

.photoCredit {
	font-size: 0.8em
}

.no-border {
	border: none;
}

.g-recaptcha {
	display: flex;
	justify-content: flex-end;
}

/* Mobile */
@media only screen and (max-width: 767px) {
	img {
		height: auto;
		width: 85vw;
	}

	#divLeftColumn {
		width: 100vw;
	}
}