/* Default CSS */


body {
  margin: 0px;
  background-image: url('../images/background.jpg');
  background-repeat: repeat;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
  color: #000000;
}


/* Styles for text */

h1 {
  font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  border-top: .25rem ridge #001425;
  border-bottom: .25rem ridge #001425;
  padding: .5em 0em;
  margin-bottom: 1em; 
}

h2 {
  font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  font-size: 1.75em;
  font-weight: 700;
  text-align: center;
  border-top: .25rem ridge #001425;
  border-bottom: .25rem ridge #001425;
  padding: .5em 0em;
  margin-bottom: 1em; 
}

h3 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.25em;
  font-weight: 700;
  text-align: center;
  border-top: .1875rem ridge #001425;
  border-bottom: .1875rem ridge #001425;
  padding: .25em 0em;
  margin-bottom: 1em;
  clear: both;
}

h4 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: .88em;
  font-weight: 700;
  text-align: center;
  border-top: .125rem ridge #001425;
  border-bottom: .125rem ridge #001425;
  padding: .25em 0em;
  margin-bottom: 1em;
  clear: both;
}

p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
  color: #000000;
  margin-bottom: 1em;
}

p.heading { 
  font-size: 1.25em;
  font-weight: 700;
  text-align: center;
}

p.subheading { 
  font-size: 1em;
  font-weight: 700;
  text-align: center;
}

p.center { 
  text-align: center;
}

p.bold { 
  font-weight: 700;
}

p.italic { 
  font-style: italic;
}

p.caption { 
  font-size: .75em;
  padding: 0em;
  margin: 0em;
}

span.bold { 
  font-weight: 700;
}

span.italic { 
  font-style: italic;
}

span.caption { 
  font-size: .75em;
  padding: 0em;
  margin: 0em;
}

span.underline { 
  text-decoration: underline;
}

span.red { 
  color: #ff0000;
}

a:link { 
  color: #0a4d6f;
  text-decoration: none;
}

a:visited { 
  color: #6186af;
}

a:hover { 
  color: #ff00ff;
}

a:active { 
  color: #ff00ff;
}


/*Set up main sections: full page, header, subheader, navigation, main, footer - mobile first */

.main-grid {
  max-width: 1400px;
  margin: 0em auto;
  background-color: #ffffff;
}

.header {
  grid-area: header;
  height: 100%;
  background-color: #001425;
}

.subheader {
  grid-area: subheader;
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  justify-content: space-between;
  height: 40px;
  background-color: #001425;
}

.navigation {
  grid-area: navigation;
  display: none;
}

.main {
  grid-area: main;
  background-color: #ffffff;
}

.footer {
  grid-area: footer;
  height: 50px;
  background-color: #001425;
}


/* Style the banner, the subheader icons for the off-canvas menu, search, and google translate, and the footer icons for social media */

.header img { 
  display: block;
  width: 100%;
  height: auto;
}

.icon {
	height: 40px;
	margin-left: .5em;
	margin-right: .5em;
}

.translate {
  margin-right: .5em;
  width: 160px;
 -webkit-align-self: center;
 -ms-flex-item-align: center;
         align-self: center;
}

.sharethis-inline-share-buttons { 
  margin-top: 5px;
}


/* For the first breakpoint at 640px WITH support for grid, set up the grid containers, add the navigation panel, and remove the sidenav menu icon */

@media screen and (min-width: 40em) {
	@supports (display: grid) {

     .main-grid {
       display: grid;
       grid-template-areas: 'header header' 'subheader subheader' 'navigation main' 'footer footer';
       grid-template-columns: 155px 1fr;
       grid-template-rows: auto 40px 1fr 50px;
       grid-gap: 5px;
     }
     
     .navigation {
       background-color: #001425;
       display: block;
     }
	 
	.icon-menu {
		display: none;
	}
  }
}


/* Style the off-canvas side-navigation menu */

.sidenav {
    height: 100%;
    width: 0;
	position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #d0e1f9;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 1.75em;
}

.sidenav ul { 
  list-style: none;
  padding: 0;
}

.sidenav a {
    display: block;
	padding: .5em 1.5em .5em 1.5em;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-weight:700;
    font-variant:small-caps;
    color: #000000;
	text-align:left;
	text-decoration: none;
    transition: 0.3s;
}

.sidenav a:visited {
  color: #000000;
}

.sidenav a:hover {
    color: #6186af;
}

.sidenav a:active { 
  color: #ffffff;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: -1.25em;
    font-size: 2em;
    margin-left: 3em;
}

.sidesubmenu a { 
	padding: .5em 1.5em .5em 3em;
    font-size: .9em;
    font-variant: normal;
    font-style: italic;
}


/* Style the main navigation bar set for regular, visited, hover, and active links */

.navigation ul { 
  list-style: none;
  padding: 0;
}

.navigation a {
  display: block;
  width: 8.75em;
  padding: .25em 0em;
  margin: .75em auto;
  background-color: #63ace5;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
  font-weight: 700;
  font-variant:small-caps;
  color: #000000;
  text-align: center;
  text-decoration: none;
  border: .125rem solid #63ace5;
  -webkit-border-radius: .25em .25em .25em .25em;
  border-radius: .25em .25em .25em .25em;
}

ul.submenu a { 
  width: 8em;
  background-color: #cae0ff;
  font-size: .95em;
}

.navigation a:visited {
  color: #000000;
  border: .125rem solid #63ace5;
}

.navigation a:hover {
  color: #ffffff;
  border: .125em solid #ffffff;
}

.navigation a:active { 
  color: #ffffff;
  border: .125em solid #000000;
}

.nav-rule { 
  display: block;
  width: 100%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}


/* Main Window for Content with left/right margin and left/right/bottom padding of 1em */

div.content {
  margin-right: 1em;
  margin-left: 1em;
  padding-right: 1em;
  padding-left: 1em;
  padding-bottom: 1em;
  background-color: #ffffff;
}

/* Style the breadcrumbs */

.breadcrumbs { 
  max-width: none;
  background-color: rgba(205,205,205,0.5);
  padding: .3em 0px .4em 1.25em;
}

.breadcrumbs a { 
  display: inline;
  padding: 0em .6em 0em .6em;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: .7em;
  font-weight: 400;
  color: #0a4d6f;
  text-decoration: none;
  text-transform: uppercase;
}

.breadcrumbs a:hover {
  text-decoration: underline solid;
}

.breadcrumbs a:active { 
  color: #000000;
}


/* Styles for containers */

.holder-flex { 
  max-width: 1000px;
  margin: 0em auto;
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: distribute;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
         flex-wrap: wrap;
  -webkit-justify-content: space-around;
         justify-content: space-around;
}

div.clear_both { 
  clear: both;
}





/* Eliminate all that follow */









.card { 
  padding: 1em;
  margin-bottom: 1em;
  border: .125em solid #001425;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  overflow: hidden;
}

.box-600 { 
  width: 100%;
  max-width: 600px;
  display: block;
  text-align: center;
  margin: 1em;
}

.box-400 { 
  width: 100%;
  max-width: 400px;
  display: block;
  text-align: center;
  margin: 1em;
}

.box-350 { 
  width: 100%;
  max-width: 350px;
  display: block;
  text-align: center;
  margin: 1em;
}

.box-300 { 
  width: 100%;
  max-width: 300px;
  display: block;
  text-align: center;
  margin: 1em;
}

.box-275 { 
  width: 100%;
  max-width: 275px;
  display: block;
  text-align: center;
  margin: 1em;
}

.box-225 { 
  width: 100%;
  max-width: 225px;
  display: block;
  text-align: center;
  margin: 1em;
}

.box-200 { 
  width: 100%;
  max-width: 200px;
  display: block;
  text-align: center;
  margin: 1em;
}

div.center { 
  text-align:center;
}

div.borderbox { 
  width: 80%;
  padding: 0em 1em;
  margin: 1em auto;
  border: 5px double #001425;
}



/* Styles for images */

img.center { 
  display: block;
  margin: 1em auto;
}

img.right { 
  display: block;
  float: right;
}

img.center-left { 
  display: block;
  margin: 1em auto;
  border: .125em solid #001425;
}

img.center-right { 
  display: block;
  margin: 1em auto;
  border: .125em solid #001425;
}

div.center-right { 
  display: block;
  margin: 1em auto;
}

@media screen and (min-width: 56.25em) {

img.center-left { 
  float: left;
  margin: 0em 1em 1em 0em;
}
  
img.center-right { 
  float:right;
  margin: 0em 0em 1em 1em;
}

.center-right { 
  float:right;
  margin: 0em 0em 1em 1em;
}
}

img.max-600 { 
  width: 100%;
  max-width: 600px;
  display: block;
}

img.max-400 { 
  width: 100%;
  max-width: 400px;
  display: block;
}

img.max-350 { 
  width: 100%;
  max-width: 350px;
  display: block;
}

img.max-300 { 
  width: 100%;
  max-width: 300px;
  display: block;
}

img.max-250 { 
  width: 100%;
  max-width: 250px;
  display: block;
}

img.max-200 { 
  width: 100%;
  max-width: 200px;
  display: block;
}

img.space { 
  margin: 1em;
}


/* Styles for the updates pages */

.updates { 
  padding: 1em;
  margin-bottom: 1em;
  border: .125em solid #001425;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  overflow: hidden;
}

.updates img.emoji { 
  width: 30px;
  height: 30px;
}

.updates .holder-flex img.max-150 { 
  width: 100%;
  max-width: 150px;
  display: block;
  margin: 1em;
}

.updates .holder-flex img.max-200 { 
  width: 100%;
  max-width: 200px;
  display: block;
  margin: 1em;
}

.updates .holder-flex img.max-225 { 
  width: 100%;
  max-width: 225px;
  display: block;
  margin: 1em;
}

.updates .holder-flex img.max-300 { 
  width: 100%;
  max-width: 300px;
  display: block;
  margin: 1em;
}

.updates .holder-flex img.max-400 { 
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 1em;
}


/* Styles for the what's new pages */

.whatsnew { 
  padding: 1em;
  margin-bottom: 1em;
  border: .125em solid #001425;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  overflow: hidden;
  -webkit-column-width: 300px; /* Chrome, Safari, Opera */
  -moz-column-width: 300px; /* Firefox */
  column-width: 300px;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px; /* Firefox */
  column-gap: 20px;
}

.whatsnew p { 
  font-family: Verdana, Geneva, sans-serif;
  font-size: .85em;
}

.whatsnew p.dropcap { 
  font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  font-size: 2em;
  font-weight: 700;
  text-align: left;
  margin-bottom: 1em; 
}

.conventions { 
  padding: 1em;
  margin-bottom: 1em;
  border: .125em solid #001425;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
  overflow: hidden;
  -webkit-column-width: 400px; /* Chrome, Safari, Opera */
  -moz-column-width: 400px; /* Firefox */
  column-width: 400px;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px; /* Firefox */
  column-gap: 20px;
}

.conventions p { 
  font-family: Verdana, Geneva, sans-serif;
  font-size: .85em;
}

.conventions p.dropcap { 
  font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  font-size: 2em;
  font-weight: 700;
  text-align: left;
  margin-bottom: 1em; 
}