footer {

	background-color: #0066CC;
	color: #FFFFFF;
	padding: 5em;
	text-align: center;
}

footer a {
	color: #FFFFFF;
}

/* Main Menu: Most things are handled via PureCSS classes, but let's make the menu centred for readability */

nav {
	text-align: center;
}

/* Landing page things */


.light-grey {
	background-color: #F5FAFD;
}

.vert-pad {
	padding-top: 5em;
	padding-bottom: 5em;
}

#frontpage-map { 
	height: 100%;
	width: 100%;
	min-height: 10em;
}

#landing-banner {
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('/img/banners/banner.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    	

	padding-top: 10em;
	padding-bottom: 10em;
	padding-left: 5em;
	padding-right: 5em;

	color: #FFFFFF;
	text-align: center;
}

.fb-page {

	margin: auto;
	width: 95%;
}


/* Only used for profile pictures */
.profile-picture {
	border-radius: 50%;
}

.staff-profile {
	text-align: center;
}

#profile-page-role {
	color: #5E5E5E;
	font-size: 1.5em;
}





/* This is a dynamic container which makes things a bit nicer to read on the page on larger screens, but gets out of the way when on smaller screens */
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}