* { margin: 0; }
/* Sets page padding and removes scroll bars if applicable */
Html, body {overflow: hidden; width:100%; height:100%; margin:0; padding:0;font-size: 100%;}
.outer {height:100%; background-color:#000000;}

/*header*/

.header {height:10%; min-height:10%; background-color:#000000;}
.logo {height:100%; background-color: #000000; float: left; }
.logoimg {height:100%;}
.menuarea {height:100%;}
.menuspace {height:60%;}
.menutable {float:right; min-height:40%; background:#0033AA url('../images/menu.jpg') no-repeat; background-size: 100% 100%; white-space: nowrap;  text-align:center;}
.menurow {display:inline-block; text-align:center; padding:0px; text-transform:uppercase; overflow:hidden;
 padding:0.5em 0em 0.5em 0em;}
 .menurow:hover {background:url('../images/BlackBG.png')}/* mouse over link */
 .headbg {height:10%; width:100%; float: left; background-color: #000000;}

/*content*/
.content {width:100%; height:60%; background-color: #EEEEEE; float: left;  overflow-y: auto; overflow-x: hidden;}
.textbox{padding:20px;}
.texttable{padding:0px;}
.texttd{padding:2px 60px 2px 0px; vertical-align:text-center;}
.imagediv{display: inline-block; text-align: center;  vertical-align: top; width:22%; height:18%; padding: 1%;}
.image{width:100%; height:auto; max-width:340px; max-width:340px; border:2px solid #EEEEEE;}
.image:hover {border:2px solid #AACCFF;text-decoration:none; background:url('../images/BlackBG.png')}/* mouse over link */

/*footer*/
.footbg {height:10%; width:100%; float: left; background-color: #000000;} 
.footer {height:10%; width:100%; float: left; background-color: #000000;}


/*font settings*/
.textcenter{text-align:center;}
.textjustify{ text-align:justify;}
.headfont{color:#EEEEEE; font: 1em calibri, sans-serif; padding:0em 1em 0em 1em;}

.footfont{color:#666666; font: 1em calibri, sans-serif;}

.smallbluefont{color:#002060; font: 1.2em calibri, sans-serif;}
a.smallbluefont:link {color: #002060;text-decoration:none;}/* unvisited link */
a.smallbluefont:visited {color: #002060;text-decoration:none;}/* visited link */
a.smallbluefont:hover {color: #AACCFF;font-style: italic;text-decoration:none;}/* mouse over link */
a.smallbluefont:active {color: #002060;text-decoration:none;}/* selected link */

.mediumbluefont{color:#002060; font: bold 1.5em calibri, sans-serif;}
a.mediumbluefont:link {color: #002060;text-decoration:none;}/* unvisited link */
a.mediumbluefont:visited {color: #002060;text-decoration:none;}/* visited link */
a.mediumbluefont:hover {color: #AACCFF;font-style: italic;text-decoration:none;}/* mouse over link */
a.mediumbluefont:active {color: #002060;text-decoration:none;}/* selected link */

.bigbluefont{color:#002060; font: bold 2em calibri, sans-serif;}
a.bigbluefont:link {color: #002060;text-decoration:none;}/* unvisited link */
a.bigbluefont:visited {color: #002060;text-decoration:none;}/* visited link */
a.bigbluefont:hover {color: #AACCFF;font-style: italic;text-decoration:none;}/* mouse over link */
a.bigbluefont:active {color: #002060;text-decoration:none;}/* selected link */

.greyfont{color:#888888; font: 1em calibri, sans-serif}
a.greyfont:link {color: #888888;text-decoration:none;}/* unvisited link */
a.greyfont:visited {color: #888888;text-decoration:none;}/* visited link */
a.greyfont:hover {color: #AACCFF;font-style: italic;text-decoration:none;}/* mouse over link */
a.greyfont:active {color: #888888;text-decoration:none;}/* selected link */


/*----------------- ALTERNATE CSS FOR SMALL DISPLAYS-----------------*/

/* rules for  mobile and thin displays in portrait*/
@media only screen and (max-device-width: 720px) and (orientation: portrait) {
.header {min-height:17%; max-height:17%;}
.menuarea {height:auto;}
.menuspace {height:0%; width:100%;}
.menutable {height:100%; width:100%;}
.logo {width:100%; height:auto;}
.logoimg {max-width: 100%; height: auto;}
.headbg {height:5%;}
.textbox{padding:0px;}
.content {height:65%;}
.footbg {height:4%;}
.footer {height:3%;}
.headfont {font: 0.65em calibri, sans-serif; padding:0em 0.4em 0em 0.4em;}
.footfont{font: 0.6em  calibri, sans-serif;}
.smallbluefont{font: bold 0.7em  calibri, sans-serif;}
.mediumbluefont{font: bold 0.9em calibri, sans-serif;}
.bigbluefont{font: bold 1em  calibri, sans-serif;}
.greyfont{font: 0.7em calibri, sans-serif;}
.texttd{padding:0px 10px 0px 0px;}
}

/* rules for  mobile and thin displays in landscape*/
@media only screen and (max-device-width: 720px) and (orientation: landscape) {
.header {height:15%;}
.logo {width:30%; height:auto;}
.logoimg {max-width: 100%; height: auto;}
.menuarea {height:100%;}
.menuspace {height:0%;}
.menutable {height:100%; width:69%; vertical-align:middle;}
.headbg {height:4%;}
.textbox{padding:10px;}
.content {height:70%;}
.footbg {height:3%;}
.footer {height:3%;}
.headfont {font: 0.6em calibri, sans-serif;}
.footfont{font: 0.6em  calibri, sans-serif;}
.smallbluefont{font: bold 0.7em  calibri, sans-serif;}
.mediumbluefont{font: bold 0.9em calibri, sans-serif;}
.bigbluefont{font: bold 1em  calibri, sans-serif;}
.greyfont{font: 0.7em calibri, sans-serif;}
.texttd{padding:0px 10px 0px 0px;}
 html {-webkit-text-size-adjust: 100%;}
}

/* Sets css for tablet portrait displays*/
@media all and (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) {
.header {height:10%;}
.menuspace {height:0%; width:100%;}
.menutable {height:50%; width:100%;}
.menurow {width:20%;}
.logo {width:100%; height:auto; text-align:center;}
.logoimg {max-width: 100%; height: auto;}
.headbg {height:5%;}
.footbg {height:5%;}
.content {height:70%;}
.headfont {font: 1em calibri, sans-serif;}
}

/* Sets css for tablet and small screen landscape displays*/
@media all and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation: landscape) {
.smallbluefont{font: bold 1.2em  calibri, sans-serif;}
.mediumbluefont{font: bold 1.4em calibri, sans-serif;}
.bigbluefont{font: bold 1.6em  calibri, sans-serif;}
.greyfont{font: 1em calibri, sans-serif;}
}