<style>
/************************************************************/
/* General Used on Many Pages */
/* Checked 31/03/26 */

/* Container */

	.desktop-layout {	/* desktop layout*/
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow-y: auto;    /* content scrolls INSIDE */
/*		border: 3px solid blue;*/
	}
	
/* Rows*/
	.row {		/*  rows */
		display: flex;
		width: 100%;
/*		border: 3px solid black;*/
	}
	
	/* COMMON BOX */
/*	.box {
		padding: 16px;
		box-sizing: border-box;
		font-family: Arial, sans-serif;
		overflow: auto;   Scroll content inside boxes 
	}*/
	
	.box {
		width: 100%;
/*		border: 3px solid green;*/
	}

	
	.text-wrap-row {
		display: block;   /* NOT flex */
	}
	
	
/************************************************************/
/* Loader Used on indexmobile.php */
/* Checked 31/03/26 */	
	
	#loader {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      transform: translate(-50%, -50%);
    }

    @keyframes spin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    #content {
      display: none;
    }
	
/************************************************************/
/* Text block widths Used on Many Pages */
/* Checked 31/03/26 */	
	
	.leftindex {
		width: 64%;
/*		border: 3px solid red;*/
	}

	.rightindex {
		width: 34%;
		margin-left: 10px;
/*		border: 3px solid blue;*/
	}
	
/************************************************************/	
/* Display Site Pages */
	
	.leftfloat {
		position: relative;           /* anchor for rightindex */
		width: 100%;
/*		padding-right: 38%;            reserve space for map */
		overflow-wrap: break-word;
/*		border: 3px solid red; */
	}

	.rightfloat{
/*	position: absolute; */
		float: right;
		top: 0;
		right: 0;
		width: 35%;
/*		border: 3px solid blue;*/
	}
	
/************************************************************/
	
	.leftmedia {
		width: 48%;
		margin-right: 10px;
/*		border: 3px solid red; */
	}

	.rightmedia{
		width: 48%;
		margin-left: 10px;
/*		border: 3px solid blue; */
	}
	
/************************************************************/
/* Mapping Used on Various pages */
/* Checked 31/03/26 */
/************************************************************/
/* Used on map.php */

	.searchmap {
		width: 100%;
		height:600px;
		margin: 1%;
		background-color: #CCC;
		}
		
/* Used on Index, Home and Detailed Site Pages */

	.smallmap {
		top: 0;
		bottom: 0;
		left: 5px;
		right: 0;
		width: 96%;
		height: 250px;
		border-style: solid;
		border-width: 2px;
		border-color: grey;
		background-color: #CCC;
	}
/************************************************************/	
/* Map Legend Used by Map.php - see also Geomap.php */

	.legend {				/* common map legend - applies to all maps */
		background: #FFF;
		padding: 5px;
		margin: 5px;
		font-size: 10px;
		font-family: Arial, sans-serif;
		}
		
/*	.color {				/* places empty marker box*/
/*		border: 1px solid;
		height: 10px;
		width: 10px;
		margin-right: 3px;
		float: left;
		}*/
		
/* Places empty marker box - also used in Geomap*/		
	.color {
		border: 1px solid;
		height: 10px;
		width: 10px;
		display: inline-block;
		margin-right: 5px;
}
		
/* Colours - also used in Geomap */

	.red    { background: #FF0000; }
	.yellow { background: #FF3; }
	.green  { background: #6F0; }
	.blue   { background: #06C; }
	.purple { background: #63C; }
	.brown  { background: #D2691E; } /* fixed */
	.white  { background: #FFF; }

/************************************************************/
/* CSS used on the Index and Home Pages	*/
/************************************************************/
/* Random Image display Used by Index and Home Pages */
/* Checked 31/03/26 */

	.imagel1 {
		position: relative;
		top: 0px;
		width: 100%;
		height: auto;
		border-style: solid;
		border-width: 2px;
		border-color: grey;
	}
	.imagep1 {
		position: relative;
		top: 0px;
		width: 100%;
		height: 520px;
		border-style: solid;
		border-width: 2px;
		border-color: grey;
	}
	
	.imageland {
		position: relative;
		top: 10px;
		width: 100%;
		height: 420px;
		padding: 10px 10px 10px 10px;
	}
	
	.imageport{
		position: relative;
		top: 0px;
		width: 60%;
		height: 520px;
		padding: 10px 10px 10px 10px;
	}
	
	.descland {
		position: relative;
		top: 0px;
		width: 100%;
		height: auto;		
		text-align: left;
		padding: 5px 5px 5px 5px;

	}
	
	.descport {
		position: relative;
		top: -520px;
		left: 60%;
		width: 40%;
		text-align: left;
		padding: 10px 10px 10px 10px;
	}
    

/************************************************************/
/* User Name and Password Input - Used by Index Pages */
/* Checked 31/03/26 */		

#lnform {
    max-width: 100%;
    margin: 5px auto;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    background-color: #fff;
}

#lnform input[type="text"] {
    width: 75%;
	  padding: 10px 20px 10px 10px; /* room for eye icon */
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
	
}

#lnform input[type="password"] {
    width: 100%;
    padding: 10px 20px 10px 10px; /* room for eye icon */
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
}

/* Password input */
.password-wrapper input[type="password"] {
    width: 100%; /* uses full wrapper width */
    padding-right: 40px; /* ensures eye icon does not overlap text */
}

.password-row {
    display: flex;
    align-items: center;
    gap: 10px; /* space between input and button */
}

/* Password input container (with eye icon) */
.password-wrapper {
    position: relative;
    flex: 0 0 75%; /* takes 75% of the row */
}

/* Eye icon button */
#togglePassword {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* Eye icon size */
#togglePassword svg {
    width: 20px;
    height: 20px;
    fill: #555;
}

/* Submit button */
.password-row.button1 {
    width: auto;   /* allow natural size */
    margin-top: 0; /* remove vertical spacing */
    white-space: nowrap;
    padding: 10px 16px;
}

.button1:hover {
    background-color: #0056b3;
}

/* Error messages */
.error-messages {
    color: #c00;
    margin-top: 8px;
    font-size: 0.9em;
}

/************************************************************/
/* Search Box - Used by Index and Home Pages */
/* Checked 31/03/26 */		

.searchbox {
    padding: 10px 10px 10px 10px;	/* order top, right, bottom, left */
}

/* Titles */

.searchbox strong:first-of-type {
    margin-top: 10px;   /* increase this value as needed */
}

.searchbox strong {
    display: block;
    margin: 10px 0 10px 0;   /* reduces header → input gap */
    font-size: 1.05em;
}

/* All forms share the same styling */
.search-form {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #fff;
    font-family: Arial, sans-serif;
}

/* Input fields */
.search-form input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    margin: 3px 0;      /* reduced gap */
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 0.9em;
    box-sizing: border-box;
}

/* Row that holds input + submit button */
.search-row {
    display: flex;
    align-items: center;
    gap: 10px;  /* reduce horizontal spacing */
}

/* Wrapper that holds the input */
.search-wrapper {
	position: relative;
    flex: 0 0 75%; /* takes 75% of the row */
	
}

/* Submit button */
.button1 {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
 /*   background-color: #0066cc; */
 /*   color: #fff; */
    font-size: 0.95em;
    white-space: nowrap;
}

.button1:hover {
    background-color: #0056b3;
}

/************************************************************/
/* Cookies - Used by Index Page */
/* Checked 31/03/26 */
  
	 .cookie-consent {
      position: fixed;
      bottom: 100px;
      right: 40px;
      width: 400px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border-radius: 8px;
      font-family: sans-serif;
      font-size: 14px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
      z-index: 9999;
    }

    .cookie-consent.show {
      opacity: 1;
      visibility: visible;
    }

    .cookie-consent p {
      margin-bottom: 12px;
      line-height: 1.4;
    }

    .cookie-consent button {
      margin-right: 5px;
      padding: 6px 10px;
      font-size: 18px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .cookie-consent button.accept {
      background-color: #4CAF50;
      color: white;
    }
    .cookie-consent button.accept:hover {
      background-color: #45a049;
    }

    .cookie-consent button.reject {
      background-color: #f44336;
      color: white;
    }
    .cookie-consent button.reject:hover {
      background-color: #e53935;
    }

    .cookie-consent button.continue {
      background-color: #2196F3;
      color: white;
    }
    .cookie-consent button.continue:hover {
      background-color: #1976d2;
    }

/************************************************************/
/* Display contributing logos - Used by Index and Home Pages */
/* Checked 31/03/26 */	

.logo-input-block {
    display: flex;
    flex-wrap: nowrap;   /* prevents wrapping onto a new line */
    gap: 10px;           /* optional spacing between items */
    align-items: center; /* vertically centers images */
}
.logo-input-block a img {
    display: block;      /* removes extra baseline space */
}

/************************************************************/
/* Buttons - Used on Many Pages */
/* Checked 31/03/26 */

	.button1 {
		background-color: #D3D3D3; /* Grey */
		width: 125px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
/*  	font-size: 0.875em;*/
		font-size: 0.75em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;*/
		border-color: black;
		}
		
	.button1b {
		background-color: #42f4d9 ; /* light blue */
		width: 125px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
/*  	font-size: 0.875em;*/
		font-size: 0.75em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;*/
		border-color: black;
		}


	.button1s {
		background-color: #D3D3D3; /* Grey */
		width: 85px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
/*  	font-size: 0.875em;	*/
		font-size: 0.75em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;	*/
		border-color: black;
		}
		
	.button2s {
		background-color: #D3D3D3; /* Grey */
		width: 60px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
/*  	font-size: 0.875em;	*/
		font-size: 0.6em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;	*/
		border-color: black;
		}
		
	.button1l {
		background-color: #D3D3D3; /* Grey */
		width: 150px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
/*  	font-size: 0.875em;	*/
		font-size: 0.75em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;	*/
		border-color: black;
		}

	.button1lb {
		background-color: #42f4d9; /* light blue */
		width: 150px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
/*  	font-size: 0.875em;	*/
		font-size: 0.75em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;	*/
		border-color: black;
		}
		
	.buttonv {
		background-color: #C0C0C0; /* Grey */
		width: 150px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 0.75em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
/*		box-shadow: 0 9px #999;*/
		border-color: black;
		}
	.printbutton {
		background-color: #C0C0C0; /* Grey */
		width: 75px;
		border: none;
		color: black;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		font-size: 0.875em;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
		border-color: black;
		}

/************************************************************/
/* Miscellaneous code that may be redundant */
/* Checked 31/03/26 */		
	
	/* COLORS */
	.top-left { background:#fde2e2; }
	.top-right { background:#e2f3ff; }
	.middle-left { background:#e7fde2; }
	.middle-right { background:#fff8e2; }
	
	.bottom {
		width: 100%;
		background:#ece2ff;
/*		border:3px solid green;*/
	}
	
/* Let bottom expand */
	.bottomrow {
		width: 100%;
		border: 3px solid red;
/*		background: #FAF0E6;*/
	}
	
/* IMAGE CONTROL */
	.box img {
		max-width: 100%;
		height: auto;
		display: block;
		margin-bottom: 10px;
	}

/* INPUT STYLE */
/	.box input,
	.box textarea {
		width: 100%;
		padding: 10px;
		font-size: 16px;
	}

/* Stack for image + input */
	.image-input-block {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}


		

	#gallery:hover {
		border: 1px solid #777;
		}
		
/* In Line Form Used with Search Box */
		
	.inline-form {
		display: flex;
		flex-wrap: wrap; /* allows wrapping on small screens */
		align-items: center;
		margin-bottom: 0.5em;
	  }
	  .inline-form input[type="text"] {
		font-size: 0.875em;
		padding: 0.3em 0.5em;
		flex: 1; /* input takes remaining space */
		min-width: 50px; /* prevents too small input on mobile */
		margin-right: 1.0em; /* space between input and button */
		margin-left: 0.5em;
	  }
	  .inline-form input.button1s {
		white-space: nowrap;
	  }
	  
	  @media (max-width: 768px) {

	/* Stack rows vertically */
	.row {
		flex-direction: column;
	}

	/* Full width columns */
	.leftindex,
	.rightindex,
	.leftmedia,
	.rightmedia {
		width: 100%;
		margin: 0;
	}

	/* Remove float layout on mobile */
	.rightfloat {
		float: none;
		width: 100%;
	}

	/* Images scale properly */
	.imagep1,
	.imageland,
	.imageport {
		width: 100%;
		height: auto;
	}

	/* Fix overlapping description */
	.descport {
		position: static;
		width: 100%;
		padding: 10px;
	}

	/* Forms stack nicely */
	.password-row,
	.search-row {
		flex-direction: column;
		align-items: stretch;
	}

	.password-wrapper,
	.search-wrapper {
		flex: 1 1 100%;
		width: 100%;
	}

	/* Buttons full width (better UX on mobile) */
	.button1,
	.button1s,
	.button2s {
		width: 100%;
	}

	/* Cookie banner responsive */
	.cookie-consent {
		width: auto;
		left: 10px;
		right: 10px;
		bottom: 20px;
	}

}
</style>