/* Actual CSS for the page*/
body { font-size: 87.5%; background-color: #002e63; background-image: url(../img/bg-1200.jpg); background-position: top left; background-attachment: fixed; margin: auto; color: white; }

header { margin-top: 2em; }

footer { text-align: center; font-size: smaller; }

h1, h2, h3, h4 { font-family: 'Cutive', Cambria, 'Times New Roman', Times, serif; }

h1 { font-size: 1.8em; color: #002e63; }

h2 { font-size: 1.4em; color: #004c94; }

h3 { font-size: 1.15em; color: #0090cd; }

A, A:visited { text-decoration: none; color: #0090cd; }

#logo { float: right; }

#homeicon { margin-right: 30px; }

#homeicon, #menuicon { margin-top: 0.75em; margin-bottom: 0.5em; display: none; }

#topmenu, #exomenu { font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

#topmenu A, A:visited { color: #4dcaff; }

#topmenu li A { text-align: center; }

#exomenu { text-align: right; }

#exomenu A, A:visited { color: white; text-align: center; }

#exomenu A:hover { background-color: #e9c103; color: #002e63; text-align: center; opacity: 1; }

#maintext { background-color: #EEE; background-image: url(../img/grey-paper-bg.jpg); color: #333333; padding: 0.5rem 2rem 1rem 2rem; }

#maintext A, #maintext A:visited { color: #004c94; }

/* EXOTOPNAV customisations */
/* First, the settings for ALL resolutions */
.exotopnav { *zoom: 1; }

.exotopnav:before, .exotopnav:after { display: table; line-height: 0; content: ""; }

.exotopnav:after { clear: both; }

.exotopnav > li { float: left; }

.exotopnav > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; }

/* Secondly, the ones for all resolutions from 768 and higher */
.exotopnav > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.exotopnav > .active > a, .exotopnav > .active > a:hover, .exotopnav > .active > a:focus { color: #ffffff; background-color: #0088cc; }

/* Lastly, the ones for below 768 are mentioned in the media queries */
/* END EXOTOPNAV MENU */
/* ************* styles to be called as classes ************* */
.parastart { color: gray; font-size: large; }

.raspberry { color: #CC3333; }

.smalltext { font-size: 10px; }

.lfloat { float: left; margin-right: 10px; margin-bottom: 10px; }

.rfloat { float: right; margin-left: 10px; margin-bottom: 10px; }

.bq { background-color: #efefef; border: 1px solid gray; padding: 1em; color: #000000; font-size: 1em; font-weight: normal; }

blockquote.bq p { font-size: 1em; font-weight: normal; line-height: 1.4; }

.tb { border: 1px solid #333333; }

/* class to wrap videos in a responsive container */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 1rem; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ************* Media Query Adjustments ************** */
@media only screen and (max-width: 767px) { #homeicon, #menuicon { display: inline; }
  #topmenu, #exomenu { display: none; }
  .exotopnav > li { float: none; }
  .exotopnav > li > a { margin-right: 0; }
  .exotopnav { border-bottom: 0; }
  .exotopnav > li > a { border: 1px solid #ddd; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
  .exotopnav > li:first-child > a { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px; }
  .exotopnav > li:last-child > a { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; }
  .exotopnav > li > a:hover, .exotopnav > li > a:focus { z-index: 2; border-color: #ddd; } }
@media only screen and (min-width: 980px) and (max-width: 1199px) { #topmenu li A { min-width: 60px; } }
@media only screen and (min-width: 1200px) { body { font-size: 100%; background-image: url(../img/bg-1600.jpg); }
  #topmenu li A { min-width: 60px; } }