body {
font-family: "Trebuchet MS", sans-serif;
font-weight: normal;
font-size: 1pt;
line-height: 1.5em;
overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
/* font-size: 62.5%;  Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

/*## Regions ##*/
#container {
width: 98%;
max-width: 1200px;
display: block;
line-height: 1.5em;
font-size: 1pt;
font-weight: normal;
margin: auto;
}

#maincontent {
clear: both;
position: left;
width: 80%;
display: block;
margin: auto;
padding: 2em;
padding-bottom: 45px;
text-align: left;
color: #000000;   /* Black */
background-color: #ffffff;   /* White */
}

#SideBar {
clear: left;
float: left;
width: 35%;
padding: 2em;
padding-bottom: 45px;
text-align: left;
}

#sidecontent {
clear: right;
float: right;
width: 55%;
padding: 2em;
padding-bottom: 45px;
text-align: left;
}

#footer {
clear: both;
position: left;
width: 80%;
display: block;
font-size: 1pt;
line-height: 1.5em;
margin: auto;
padding: 2em;
padding-bottom: 45px;
text-align: left;
color: #000000;   /* Black */
background-color: #f5f5f5;   /* WhiteSmoke */
}

.slidecontent {
display: block;
margin: auto;
padding: 2em;
font-weight: normal;
text-align: left;
text-decoration: none;
line-height: 1.2em;
font-size: 1em;
background-color: transparent;
border: 2px solid #f44336; /* Red */
}

#contentinfo {
margin-top: 2em;
}

#contact {
line-height: 1.5em;
font-size: 10em;
margin-bottom: 2em;
}

/*## Banner ##*/
#banner {
clear: both;
text-align: center;
width: 60%;
margin: auto;
padding: 2em;
background: #87cefa none;       /* color=LightSkyBlue image=none */
border-style: outset;
border-width: 2em;
border-color: #cccc33;   /* Gold */
}

#BannerImg {
clear: both;
text-align: center;
width: 100%;
margin: auto;
padding: 2em;
background: #87cefa none;       /* color=LightSkyBlue image=none */
border-style: outset;
border-width: 2em;
border-color: #cccc33;   /* Gold */
}

#BannerText {
font-family: Arial Verdana Sans-Serif;
font-style: oblique;
font-weight: bold;
font-size: 11em;
display: block;
margin: auto;
padding: 2em;
text-align: center;
text-decoration: none;
background: #87cefa none;       /* color=LightSkyBlue image=none */
color: #ff0000;   /* Red */
}

.LeftImg {
position: left;
margin-left: auto;
margin-right: auto;
padding: 2em;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
}

.RightImg {
position: right;
margin-left: auto;
margin-right: auto;
padding: 2em;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
}

/*## Skip ##*/
#skip A{
position: absolute;
line-height: 1.5em;
font-size: 10em;
top: -100px;
left: 10px;
width: 6em;
padding-top: 2em;
padding-bottom: 2em;
text-align: center;
text-decoration: none;
background-color: #031957;
color: #fff;  /* white on midnight blue */
border: solid 1px #031957;
-webkit-transition: top 2s ease-out, background 1s linear;
transition: top 2s ease-out, background 1s linear;
z-index: 100;
}

#skip A:focus {
position: absolute;
left: 10px;
top: 10px;
outline: 0;
-webkit-transition: top .1s ease-in, background .5s linear;
transition: top .1s ease-in, background .5s linear;
}

/*## Search and Login ##*/
#searchlogin {
width: 72%;
float: right;
padding-top: 30px;
font-family: 'Merriweather', serif;
color: #031957;  /* Midnight blue */
}

#searchlogin A:link, #searchlogin A:visited {
background-color: #031957;
color: #ffffff;  /* White on midnight blue */
text-decoration: none;
padding: 2px;
padding-left: 4px;
padding-right: 4px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-right: 3em;
display: inline-block;
}

#searchlogin A:hover, #searchlogin A:focus, #searchlogin A:active {
background-color: #aed453;
color: #031957;  /* Midnight blue on dark olive green 3 */
}

input {
background-color: #031957;
color: #ffffff;  /* white on midnight blue */
border : none;
}

input:focus, input:hover {
background-color: #aed453;
color: #031957;
}

#search-q-label {
position: absolute;
left: -10000px;
top: auto;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal;
}

#searchlogin form {
float: left;
font-size: 10em;
line-height: 1.5em;
margin-right: 45px;
margin-bottom: 2em;
}

input[type="text"] { 
color: #031957;
padding-top: 3px;
padding-bottom: 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 2px #031957;
}

.submit {
background-color: #031957;
color: #ffffff;  /* White on midnight blue */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
text-decoration: none;
cursor: pointer;
border:none;
}

.submit A:hover, .submit A:focus {
border: none;
background: #b30000;  /* White on red 3 */
box-shadow: 0px 0px 1px #777;
}

/*## Headings ##*/
h1 {
line-height: 2em;
font-size: 21em;
background-color: #fffaf0;            /* Floural White */
color: #ff0000;                       /* Red */
}

h2 {
line-height: 2em;
font-size: 18em;
background-color: #fffafa;            /* snow White */
color: #b22222;                       /* Firebrick */
}

h3 {
line-height: 1.5em;
font-size: 16em;
background-color: #ffefd5;            /* PapayaWhip */
color: #cd5c5c;                       /* IndianRed */
}

h4 {
line-height: 1.5em;
font-size: 14em;
background-color: #f5f5f5;            /* WhiteSmoke */
color: #800000;                       /* maroon */
}

h5 {
line-height: 1.5em;
font-size: 14em;
background-color: #f5f5f5;            /* WhiteSmoke */
color: #800000;                       /* maroon */
}

h6 {
line-height: 1.5em;
font-size: 14em;
background-color: #f5f5f5;            /* WhiteSmoke */
color: #800000;                       /* maroon */
}

.ParagraphLeft {
width: 90%;
display: block;
line-height: 1.5em;
font-size: 11em;
font-weight: normal;
padding: 2em;
margin-left: auto;
margin-right: auto;
text-align: left;
text-decoration: none;
}

pre {
max-width: 100%;
font-family: 'Courier 10 Pitch', Courier, monospace;
font-style: normal;
line-height: 1.5em;
font-size: 10em;
margin-left: 2em;
overflow: auto;
background: #eee none;  /* Black on Gray93 */
color: #000000;
}

#PanelBtn {
width: 100%;
}

.BackBtn {
clear: both;
position: left;
margin-left: auto;
margin-right: auto;
font-size: 10em;
padding: 32px 16px;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
border: 2px solid #4CAF50; /* Green */
border-radius: 50%;
}

.CloseBtn {
clear: both;
position: center;
margin-left: auto;
margin-right: auto;
font-size: 10em;
padding: 32px 16px;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
border: 2px solid #1311E4; /* Blue */
border-radius: 50%;
}

.PreviousBtn {
clear: both;
position: left;
margin-left: auto;
margin-right: auto;
font-size: 10em;
padding: 32px 16px;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
border: 2px solid #4CAF50; /* Green */
border-radius: 50%;
}

.ForwardBtn {
clear: both;
position: center;
margin-left: auto;
margin-right: auto;
font-size: 10em;
padding: 32px 16px;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
border: 2px solid #1311E4; /* Blue */
border-radius: 50%;
}

.ReturnBtn {
clear: both;
position: right;
margin-left: auto;
margin-right: auto;
font-size: 10em;
padding: 32px 16px;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
border: 2px solid #f44336; /* Red */
border-radius: 50%;
}

/*## Images ##*/
img {
max-width: 100%;
}

/*## Tables ##*/
table {
line-height: 1.5em;
font-size: 10em;
margin-top: 2em;
margin-left: 2em;
}

td {
font-family: "Arial, Helvetica, sans-serif";
font-style: normal;
font-weight: normal;
margin: 2em;
vertical-align: top;
text-align: left;
background: #87cefa none;       /* color=LightSkyBlue image=none */
color: #000000                  /* Black */
border-bottom: 1px solid #CCCCCC;
}

th {
font-family: "Times New Roman";
font-style: normal;
font-weight: normal;
margin: 2em;
text-align: left;
vertical-align: bottom;
background: #87cefa none;       /* color=LightSkyBlue image=none */
color: #4682b4                  /* SteelBlue */
}

tr {
vertical-align: top;
}

/*## Links ##*/
A:link, A:visited {
background-color: #fff;
color: #031957;  /* Midnight blue on white */
}

A:hover, A:focus, A:active {
background-color: #031957;
color: #fff;  /* White on midnight blue */
text-decoration: none;
}

.main-navigation ol {
display: inline-block;
line-height: 1.5em;
font-size: 10em;
}

.main-navigation ul {
display: inline-block;
line-height: 1.5em;
font-size: 10em;
}

/*## Primary Navigation ##*/
#primary-menu A:hover,
#primary-menu A:focus,
#primary-menu li.menu-focus > a {
background-color: #031957;            
color: #fff;  /* White on midnight blue */
}

#primary ol {
list-style-type: none;
margin: 0;
margin-top: 30px;
}

#primary ul {
list-style-type: none;
margin: 0;
margin-top: 30px;
}

#primary li {
margin-top: .75em;
}

#primary a:link, #primary a:visited {
text-decoration: none;
color : #031957;  /* Midnight blue on white */
padding-left: 2em;
padding-right: 2em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius:3px;
display: inline-block;
}

#primary a:hover, #primary a:focus {
text-decoration: none;
color: #fff;
background-color: #031957; /* White on midnight blue */
}

/*## Social Media Navigation ##*/
#socialmedia ol {
list-style-type: none;
padding: 45px;
padding-top: 30px;
margin: 0;
}

#socialmedia ul {
list-style-type: none;
padding: 45px;
padding-top: 30px;
margin: 0;
}

#socialmedia li {
float: left;
}

#socialmedia a:link, #socialmedia a:visited {
margin: 2em;
padding: 0;
display: block;
padding: 4px;
text-decoration: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#socialmedia a:hover, #socialmedia a:focus {
text-decoration: none;
background-color: transparent;
}

.hvr-float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}

.hvr-float-shadow: before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}

.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
outline: none;
/* move the element up by 5px */
}

.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

#blog A:link, #blog A:visited {
background-color: #fcca08;  /* Midnight blue on gold */
line-height: 1.5em;
font-size: 11em;
}

#blog A:hover, #blog A:focus {
color: #031957;  /* Midnight blue on gold */
}

/*## Collapsible Content ##*/
div #viewContent {
padding: 2em 20px;
border: 2px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 100%;
margin-bottom: 20px;
}

div #viewContent h6 {
line-height: 1.5em;
font-size: 10em;
font-weight: inherit;
text-align: center;
text-decoration: none;
background-color: #ffefd5;            /* PapayaWhip */
color: #cd5c5c;                       /* IndianRed */
}

.collapsible-heading {
padding-left: 15px;
cursor: pointer;
}

.collapsible-heading-collapsed {
background-position: 0 -84px;
}

a #lnkToggle {
clear: both;
position: center;
margin-left: auto;
margin-right: auto;
padding: 32px 16px;
display: inline-block;
text-align: center;
text-decoration: none;
background-color: #e7e7e7;
color: black; /* Black on Gray */
border: 2px solid #f44336; /* Red */
border-radius: 50%;
}

.collapsible-heading-toggle {
text-decoration: none;
}

.collapsible-heading-status {
position: absolute;
top: -99999px;
background-color: #fff;
color: #031957;  /* Midnight blue on white */
}

.collapsible-content {
overflow: hidden;
}

.collapsible-content-collapsed {
display: none;
}


/*## https://daneden.github.io/animate.css/ ##*/
/*-------------------MOBILE / SMALL DEVICES--------------------*/
@media only screen and (max-width: 1000px) {
html { 
line-height: 1.5em;
font-size: 1pt;
}

#skip A {
position: absolute;
line-height: 1.5em;
font-size: 10em;
top: 0;
left: 0;
width: 100%;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
}

#searchlogin {
line-height: 1.5em;
font-size: 11em;
margin-top: 50px;
padding-top: 50px;
width: 100%;
}

#socialmedia ul {
line-height: 1.5em;
font-size: 10em;
padding: 0;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 35%;
}

#content, #maincontent, #SideBar, #footer {
width: 94%;
padding: 3%;
}

#footer {
line-height: 1.5em;
font-size: 1pt;
margin-left: 0;
}

#primary a:link, #primary a:visited {
padding-left: 0;
padding-right: 0;
}
}