body {
margin: 0;
color: #000;
font-family: Arial, Helvetica, Verdana, sans-serif;
background-color:#99CAFF;
}

main {
margin: 0 auto;
max-width: 1140px;
display: flex;
flex-direction: column;
background-color: #fff;
}

figcaption {
text-align: right;
font-style: italic;
margin: 20px;
}

p {
margin: 10px;
color: #000;
}

h1 {
color: #58595A;
font-weight: bold;
font-size: 3em;
font-family: Arial, Helvetica, Verdana, sans-serif;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,99caff+50,99caff+52,e5e5e5+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(153,202,255,1) 50%, rgba(153,202,255,1) 52%, rgba(229,229,229,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(153,202,255,1) 50%,rgba(153,202,255,1) 52%,rgba(229,229,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(153,202,255,1) 50%,rgba(153,202,255,1) 52%,rgba(229,229,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */padding: 20px;
text-align: center;
display: block;
margin-top: 0pt;
margin-bottom: 1em;
}

h2, h3{
margin: 10px;
color: #666;
}

nav {
background-color: #fff;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-end;
max-width: 1140px;
border-bottom: solid grey 5px ; 
}

nav ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
color: #99CAFF;
}

nav li {
float: left;
}

nav li a {
display: block;
color: #99CAFF;
text-align: center;
padding: 5px 10px;
text-decoration: none;
}

nav li a:hover {
background-color: #58595A;
}

hr { 
width: 350px;
margin-top: 1.0em;
margin-bottom: 1.0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 5px;
} 

form {
display: flex;
flex-direction: column;
max-width: 200px;
padding-left: 20px;}

h4 {
font-size: 1.4em;
font-style: bold;
padding: 10px;
}

a {
color: darkblue;
}

.headerHolder{
margin: 0 auto;
max-width: 1140px;
background-color: #fff;
}

.headerHolder p{
padding-bottom: 5px;
}

.downwardsMenu ul{
color: #58595A;
background: aliceblue;
font-weight: bold;
font-size: 0.9em;
font-family: Arial, Helvetica, Verdana, sans-serif;
padding: 20px;
margin-top: 5px;
margin-bottom: 1em;
margin: 0 5px;
min-width: 100px;
}

.downwardsMenu a{
color: #000;
text-decoration: none;
}

.downwardsMenu li{
list-style: circle;
padding-bottom: 10px;
}

.downwardsMenuRight ul{
list-style: none;}

.flexBoxSub1{
display: flex;
flex-direction: row;
}

.flexBoxSub2{
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
}

.textCol{
display: flex;
flex-direction: column;
}

.textCol1{
max-width: 5%;
display: flex;
flex-direction: column;
text-align: 
}


.imgCol{
margin: 20px 0; 
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.basicImageLeft{
margin: 20px;
border: solid 3px #333;
}

.inlineImage{
margin: 20px;
}

.textAdapt{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.textAdapt p{
font-size: 1.3em;
font-style: italic;
background-color: #58595A;
padding: 5px;
max-width: 25%;
color:#fff;
}

.blueBox{
display: flex;
flex-direction: row;
background-color: #99CAFF;
border: solid darkblue 2px;
margin: 0 auto;
max-width: 50%;
}

.greyBox{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #999;
border: solid darkblue 2px;
margin: 0 auto;
max-width: 80%;
}

.greyBoxTitle{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #999;
border: solid darkblue 2px;
margin: 0 auto;
max-width: 80%;
}

.greyBoxTitle h2{
color: #fff;
}

.greyBox img{
width: 20%;
margin: 5px;
}