@charset "utf-8";
body {
  font-family: arial, sans-serif;   /* chosen a font or font style to match the brand logo image */  
}
ul {  /* styled the basic list to make a nice navigation bar */ 
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #7396FF;
}

li {  /* float left to fit under the logo */ 
  float: left;
}

li a {  /* set colour and padding size */ 
  display: block;
  color: #DADAEA;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {  /* made the colours flip on mouseover */ 
  background-color: #DADAEA;
  color: #7396FF;
}

.active { /* set a class to display a different colour on the menu item of the current page */ 
  background-color: #99E5FF;
  color: #464637;
}
footer {  /* simple footer block */ 
  display: block;
}
body { /* simple repeat tiled background for full page */ 
  background-image: url("bg.jpg");
  background-repeat: repeat;
}
div.gallery { /* light grey border to separate image blocks  */ 
  border: 1px solid #ccc;
}

div.gallery:hover { /* border to separate image blocks goes darker on mouseover */ 
  border: 1px solid #777;
}

div.gallery img { /* set image size */
  width: 100%;
  height: auto;
}

div.desc {  /* add formatting to div boxes for descriptions */
  padding: 15px;
  text-align: center;
  background-color: rgba(218, 218, 234, 0.4); /* partially opaque background to text description elements of the page to ensure legibility over the background image */ 
}

* {
  box-sizing: border-box;
}

.responsive { /* set formating for im ages 4 per row for normal screens */
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {  /* places the images in 2 columns for screens of 700px or lower */ 
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) { /* places the images in a single column for screens of 500px or lower */ 
  .responsive {
    width: 100%;
  }
}

.clearfix:after {  /* ensures all items will stay in the container */ 
  content: "";
  display: table;
  clear: both;
}
.button {  /* making buttons on the page match the colour scheme and theme */
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #DADAEA;
  background-color: #7396FF;
  border: none;
}

.button:hover {background-color: #99E5FF;}  /* making buttons change colour on mouseover */

.button:active { /* making buttons change colour on and take a shadow when clicked */
  background-color: #0000B2;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
div.map {  /* add formatting to div boxes for maps */
  padding: 15px;
  text-align: center;
  }
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}