/* Old colours:
Purple: #421C59
Brown: #3E141A
Blue: #08203D
*/

body {
	margin:0px;
	padding:0px;
	background-color:#08203D;
}

#header {
	width:100%;
	overflow:auto;
	background-color:#421C59;
}

#footer {
	width:100%;
	overflow:auto;
	background-color:#421C59;
	margin-top:10em;
	padding-bottom:0.6em;
}

#footer p, #footer li {
	padding: 0.6em 1.0em 0em 0.6em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:0.9em;
	text-shadow: 0px 0px 0.5em #000000;
	color:#FFFFEE;
}

#footer a {
	color:#FFC877;
}


#logo {
	display:block;
	width:300px;
	padding:10px;
	float:left;
}

#logo img {
	width:100%;
	display:block;
}

/* Hide the logo if the screen is <= 1050px */
@media only screen and (max-width: 1050px) {
	#logo {
		display:none;
	}
}

#navbar {
	display:block;
	float:right;
	overflow:auto;
	padding:0em 0.6em 0em 0em;
	margin:0px;
}


#navbar a {
	display:inline-block;
	font-family: sans-serif;
	font-size:1.2em;
	color:#FFFFFF;
	text-decoration:none;
	padding:1.6em 0.6em 1em 0.6em;
	margin:0px;
}

#navbar a:hover {
	display:inline-block;
	font-family: sans-serif;
	font-size:1.2em;
	color:#FFFFFF;
	text-decoration:none;
	padding:1.6em 0.6em 1em 0.6em;
	margin:0px;
	
	background-color:rgba(255, 255, 255, 0.1);
}

#menu {
	display:none;
}

/* Convert the navbar to a dropdown menu if the screen gets too small */
@media only screen and (max-width: 700px) {
	#menu {
		display:block;
		width:100%;
		
		font-family: sans-serif;
		font-size:1.5em;
		color:#FFFFFF;
		text-decoration:none;
		text-align:center;
		padding:0.6em 0em 0.6em 0em;
		margin:0px;
	}
	
	#navbar {
		overflow:hidden;
		position:absolute;
		top:3em;
		left:0px;
		right:0px;
		z-index:1000;
		
		padding:0em 0em 0em 0em;
		margin:0.6em 0em 0em 0em;
		
		background-color:rgba(0, 16, 64, 0.9);
		
		height:0px;
	}
	
	#navbar a {
		display:block;
		font-family: sans-serif;
		font-size:1.5em;
		color:#FFFFFF;
		text-decoration:none;
		padding:1em 0em 1em 0em;
		margin:0px;
		width:100%;
		text-align:center;
	}
	
	#navbar a:hover {
		display:block;
		font-family: sans-serif;
		font-size:1.5em;
		color:#FFFFFF;
		text-decoration:none;
		padding:1em 0em 1em 0em;
		margin:0px;
		width:100%;
		text-align:center;
		
		background-color:rgba(255, 255, 255, 0.1);
	}
}

#content {
	overflow:auto;
}

.wrapper_narrow {
	width:100%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	overflow:auto;
}

.wrapper_wide {
	width:100%;
	max-width:1500px;
	margin-left:auto;
	margin-right:auto;
	overflow:auto;
}

.background_bobbie {
	background-image:url('../img/uk-bobbie-mod.webp');
	background-repeat: no-repeat;
	background-position:top;
	background-size:cover;
}

#content h1 {
	padding: 0.5em 0em 0.0em 0em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:4em;
	text-align:center;
	text-shadow: 0px 0px 0.5em #000000;
	color:#FFFFEE;
}

#content h2 {
	padding: 1.0em 0em 0em 0.3em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:2em;
	text-shadow: 0px 0px 0.5em #000000;
	color:#FFFFEE;
}

#content h3 {
	padding: 1.0em 0em 0em 0.5em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:1.5em;
	text-shadow: 0px 0px 0.5em #000000;
	color:#FFFFEE;
}

#content p, #content li {
	padding: 0.6em 1.0em 0em 0.6em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:1.2em;
	text-shadow: 0px 0px 0.5em #000000;
	color:#FFFFEE;
}

@media only screen and (max-width: 1050px) {
	#content p, #content li {
		padding: 0.6em 1.0em 0em 0.6em;
		margin:0px;
		
		font-family: sans-serif;
		font-size:1.1em;
		text-shadow: 0px 0px 0.5em #000000;
		color:#FFFFEE;
	}
}

#content p a {
	color:#C877FF;
}

.link_tile {
	display:inline-block;
	overflow:hidden;
	width:20%;
	margin:2em 0 0em 3.5%;
	padding:0em 0em 1.2em 0em;
	
	border-style:solid;
	border-color:#EEEEEE;
	border-width:0.5%;
	
	border-radius:2em;
	text-decoration:none;
	
	background-color:rgba(8, 32, 61, 0.7);
}

.link_tile:hover {
	display:inline-block;
	overflow:hidden;
	width:20%;
	margin:2em 0 0em 3.5%;
	padding:0em 0em 1.2em 0em;
	
	border-style:solid;
	border-color:#EEEEEE;
	border-width:0.5%;
	
	border-radius:2em;
	text-decoration:none;
	
	background-color:rgba(17, 66, 122, 0.7);
}


.link_tile img {
	width:90%;
	display:block;
	border-radius:1.5em;
	margin:5% auto 0 auto;
}

.link_tile h4 {
	padding: 0.5em 0em 0em 0em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:1.5em;
	text-shadow: 0px 0px 0.5em #000000;
	text-decoration:none;
	text-align:center;
	color:#FFFFEE;
}


@media only screen and (max-width: 1050px) {
	.link_tile {
		display:inline-block;
		overflow:hidden;
		width:38%;

		margin:1em 0 1em 7%;
		padding:0em 0em 1.2em 0em;
		
		border-style:solid;
		border-color:#EEEEEE;
		border-width:0.5%;
		
		border-radius:2em;
		text-decoration:none;
		
		background-color:rgba(8, 32, 61, 0.7);
	}

	.link_tile:hover {
		display:inline-block;
		overflow:hidden;
		width:38%;

		margin:1em 0 1em 7%;
		padding:0em 0em 1.2em 0em;
		
		border-style:solid;
		border-color:#EEEEEE;
		border-width:0.5%;
		
		border-radius:2em;
		text-decoration:none;
		
		background-color:rgba(17, 66, 122, 0.7);
	}
	
	.link_tile img {
		width:90%;
		max-width:250px;
		display:block;
		border-radius:1.5em;
		margin:5% auto 0 auto;
	}

	.link_tile h4 {
		padding: 0.25em 0em 0em 0em;
		margin:0px;
		
		font-family: sans-serif;
		font-size:1.0em;
		text-shadow: 0px 0px 0.5em #000000;
		text-decoration:none;
		text-align:center;
		color:#FFFFEE;
	}
}

.link_square {
	display:inline-block;
	width:20%;
	margin:2em 0 0em 3.5%;
	padding:0px;
	text-decoration:none;
}

.link_square img {
	display:block;
	width:60%;
	margin: 0 auto 0 auto;
	padding:0px;
}

.link_square h4 {
	padding: 1em 0em 0em 0em;
	margin:0px;
	
	font-family: sans-serif;
	font-size:1.5em;
	text-shadow: 0px 0px 0.5em #000000;
	text-decoration:none;
	text-align:center;
	color:#FFFFEE;	
}

@media only screen and (max-width: 800px) {
	.link_square h4 {
		padding: 1.0em 0em 0em 0em;
		margin:0px;
		
		font-family: sans-serif;
		font-size:1.0em;
		text-shadow: 0px 0px 0.5em #000000;
		text-decoration:none;
		text-align:center;
		color:#FFFFEE;	
	}
}


.space {
	display:block;
	width:100%;
	height:5em;
}

@media only screen and (max-width: 1050px) {
	.space {
		width:100%;
		height:2.5em;
	}
}

.half {
	float:left;
	width:49.9%;
	overflow:auto;
}

.half img {
	display:block;
	width:80%;
	margin: 0.5em auto 0.5em auto;
}

@media only screen and (max-width: 1050px) {
	.half {
		width:100%;
		overflow:auto;
	}

	.half img {
		display:block;
		width:50%;
		margin: 0.5em auto 0.5em auto;
	}
}


.quarter {
	float:left;
	width:24.9%;
	overflow:auto;
}

.quarter img {
	display:block;
	width:90%;
	margin: 0.25em auto 0.25em auto;
}

@media only screen and (max-width: 1050px) {
	.quarter {
		width:49.9%;
		overflow:auto;
	}

	.quarter img {
		display:block;
		width:80%;
		margin: 0.25em auto 0.25em auto;
	}
}

.draw-closed {
	overflow:auto;
}

.span_space {
	width:10em;
	display:inline-block;
}

@media only screen and (max-width: 1050px) {
	.span_space {
		display:block;
	}
}