/* Override menu highlight colour */
.top-bar-section li.active a {
	background-color: rgb(0, 166, 156) !important;
}

/* Override default button colour */
a.button {
	background-color: rgb(0, 166, 156);
	padding-left: 1rem;
	padding-right: 1rem;
}
a.button:link, a.button:visited {
	background-color: rgb(0, 166, 156);
}
a.button:hover, a.button:focus, a.button:active {
	background-color: rgb(0, 166, 156);
}



/* Banner running directly below menu */
.page-banner {
	width: 100%;
	padding: 0;
	margin: 0;
	margin-bottom: 2rem;
	background-color:  rgb(0, 166, 156);
}
.aa-logo {
	width: 20rem;
	margin: 2rem;
	margin-left: 0;
	border: none;
}


/* HTML tags */
h1 {
	color: white;
	font-weight: 300;
	text-align: right;
}
h3 {
	color: rgb(0, 166, 156);
	margin-bottom: -0.5rem;
}
h4 {
	color: #999;
	font-weight: 300;
}



/* Example block */
.row .aa-example {
	margin-bottom: 2rem;
}
div.aa-example div.small-8.columns { /* Reduce spacing between icon and text */
	padding-left: 0;
}
.example-icon {
	width: 100%;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	margin-top: 0.7rem;
}
.example-icon-border {
	border: 0.4rem solid rgb(0, 166, 156);
}



/* Footer */
.page-footer {
	width: 100%;
	padding: 0rem 1rem;
	margin: 0;
	margin-top: 4rem;
	background-color: #666;
	text-align: center;
}
.page-footer p {
	color: #999;
	margin-bottom: 3rem;
}
.page-footer p a:link,
.page-footer p a:visited,
.page-footer p a:hover,
.page-footer p a:focus,
.page-footer p a:active {
	color: #999;
}
.page-footer img {
	border: none;
	padding: none;
	margin: 5rem auto;
	width: 25rem;
	opacity: 0.15;
}



/* Media queries */
@media only screen and (max-width: 40em) {
	
	.aa-logo {
		width: 15rem;
		margin: 2rem 1rem;
		margin-left: 0;
	}
	
	.page-footer img {
		margin: 3rem auto;
		width: 10rem;
	}
	
}



/* Fix on an iPhone where text on different parts of the page are sized differently */
body {
    -webkit-text-size-adjust: 100%;
}