﻿/* ===================== LOCAL FONT ========================================= */
@font-face { font-family: head_abbotttool; src: url("../fonts/ADDCN__.TTF"); }
@font-face { font-family: body_title; src: url("../fonts/BORG9.TTF"); }
/* ===================== GLOBAL STYLE INITS ================================= */
*{ margin: 0px; padding: 0px; }
body{ background-color: #EAEAEA; font-size: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; color: #2D498A;; }
header, div, main, footer, p, section, img{ display: block; position: relative; border: none; }
button{ border: none; background: none; text-decoration: none; cursor: pointer; }
/* ===================== MAIN PAGE SETTINGS ================================= */
header{ width: 100%; height: 65px; background-color: #8B0000; background-image: url(/images/header-background_small.jpg); background-repeat: repeat-x; overflow: hidden; }
main{ width: 100%; height: auto; min-height: 400px; }
footer{ width: 100%; height: 70px; padding: 0px; margin: 0px; background-color: #010D28; color: #FFFFFF; }
p.pFooter{ display: inline-block; position: absolute; right: 10px; font-family: Arial; font-size: 10px; font-weight: normal; }
b.Email{ left: 85px; color: #8B0000; }
/* ===================== HEADER ============================================= */
*.head-content{ width: 100%; min-width: 300px; max-width: 900px; margin: 0px auto; height: 100%; }
*.logo{ position: absolute; left: 0px; bottom: 0px; width: 40px; }
*.head-title{ position: absolute; bottom: 2px; left: 44px; font-family: head_abbotttool; font-style: italic; font-size: 2em; color: #FFFFFF; text-shadow: 2px 2px 1px #000000; text-align: center; }
*.head-button-content{ display: table; position: absolute; right: 10px; top: 3px; height: 27px; }
*.head-button-content button{ width: 50px; height: 25px; margin: 0px; padding: 0px; float: left; cursor: pointer; }
*.large{ display: none; left: 0px; top: 0px; width: 100%; height: 100%; }
*.small{ display: block; left: 0px; top: 0px; width: 100%; height: 100%; }
*.btn-ends{ width: 55px; height: 30px; float: left; }
/* ===================== HOMEPAGE =========================================== */
#homepage{ height: auto; overflow: hidden; }
#supportpage{ height: 0px; overflow: hidden; background-color: #F0F4FF; overflow: auto; }
/* ===================== FOOTER STYLINGS ==================================== */
*.copyright{ font-size: 65%; position: absolute; left: 10px; bottom: 5px; color: #D6D6D6; }
/* ===================== SERVICES =========================================== */
*.subpages, *.aboutus{ width: 100%; min-width: 300px; max-width: 900px; margin: 0px auto; overflow: auto; }
*.subpages *.sp-title, *.au1{ width: 80%; height: auto; margin: 10px auto; }
*.subpages p{ font-size: .8em; font-weight: bold; color: #0A235D; }
*.subpages ul{ list-style: none; padding: 5px; }
*.subpages li:before{ content: ''; display: inline-block; margin-right: 10px; height: 10px; width: 10px; background-image: url(/images/listbullet.gif); }
*.subpages li{ color: #8B8B00; font-weight: bold; font-size: .8em; }
*.split{ display: block; width: 100%; min-width: 300px; max-width: 445px; float: left; }
*.au2{ width: 150px; height: 150px; padding: 0px 3px 3px 0px; float: left; }
*.au_pcontent{ width: 98%; height: auto; padding-bottom: 10px; }
*.au_pcontent p{ font-size: .7em; font-weight: normal; text-align: left; margin-bottom: 6px; padding: 2px; color: #0A235D; }
*.subpages span{ color: #8B8B00; }
*.findus{ width: 100%; min-width: 300px; max-width: 700px; max-height: 595px; margin: 0px; z-index: 50; z-index: 10; }
/* ===================== GALLERY CONTROL BUTTON TRANSITION ================== */
#btn-gallery-open{ /* BUTTON */
  display: block; width: 120px; height: 30px; margin: 20px auto; border-radius: 10px; font-weight: bold; border: 2px solid #0A238A;
  clear: left;
  transition: background-color 250ms ease-out, border-radius 250ms ease-out, color 250ms ease-out;
}
#btn-gallery-open:hover{ background-color: #8B8B00; border-radius: 15px; color: #FFFFFF; }
/* ===================== GALLERY ============================================ */
#sgallery{
  display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100;
  background-image: url(/images/spacer_white.png); background-repeat: repeat;
}
*.gheader{
  position: absolute; left: 0px; top: 0px; width: 100%; height: 30px; z-index: 1000;
  background-color: #0A235D;
}
*.gheader button{
  position: absolute; right: 2px; top: 1px; width: 25px; height: 25px;
}
*.gheader button img{ width: 100%; height: 100%; }
*.gcontent{
  top: 25px; width: 100%; min-width: 300px; margin: 0px auto; height: 80%; min-height: 150px;
}
*.progressbar{
  display: block; margin: 40px auto; width: 80%; min-width: 300px; max-width: 700px; max-height: 75px;
}
*.btn-th-image{
  width: 100px; height: 100px; margin: 10px; float: left;
}
*.btn-th-image img{
  width: 100%; height: 100%;
}
#imagedisplay{
  position: absolute; left: 0px; top: 2px; width: 0px; height: auto;
  background: #FFFFFF; z-index: 100; margin: 0px; padding: 0px;
}
#imagedisplay img{ width: 100%; height: auto; }
/* ===================== TESTIMONIAL ======================================== */
*.testimonial_name{
  margin: 0; padding 0; color: #850000;
}
p.testimonial{
  display: inline-block; margin: 0; margin-bottom: 12px; padding: 10px;
  font-size: 1.1em; font-weight: bold; background-color: #EAEAEA;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border-radius: 5px;
}
*.testimonial img{
  width: 120px; height: 120px; float: left;
  margin: 0 10px 5px 0;
}
/* ===================== ERROR ============================================== */
*.error{
  width: 300px; margin: 40px auto 0px auto;
}

/* ===================== RESPONSIVE SETTINGS ================================ */
@media screen and (min-width : 20em) and (max-height : 23em) { header{ height: 65px; } }
@media screen and (min-width: 20em) and (min-height : 24em) {  }
/* ===== == = === 20em (320px) === = == ========== */
@media screen and (min-width : 320px) {
}
/* ======= 23em (375px) ========================== */
@media screen and (min-width : 375px){
  *.logo{ bottom: 7px; width: 50px; }
  *.head-title{ left: 55px; bottom: 2px; }
}
/* ===== == = === 30em (480px) === = == ========== */
@media screen and (min-width : 30em) and (min-height : 24em) {
  *.head-title{ font-size: 2.5em; left: 67px; bottom: 2px; }
}
/* ===== == = === 37.5em (600px) === = == ======== */
@media screen and (min-width: 37.5em) and (min-height : 24em) {
  header{ height: 150px; background-image: url(/images/header-background.jpg); }
  *.logo{ width: 120px; height: 96px; }
  *.head-title{ font-size: 3em; left: 127px; }
  *.head-button-content button{ width: 90px; height: 25px; }
  *.large{ display: block; }
  *.small{ display: none; }
}
/* ===== == = === 48em (768px) === = == ========== */
@media screen and (min-width : 48em) {
  *.head-title{ font-size: 4.5em; left: 147px; }
  *.head-button-content button{ width: 100px; height: 27px; }
  *.copyright{ font-size: 100%;  }
  /* ======= ADDITIONAL PAGES ======= */
  *.subpages *.sp-title, *.au1{ width: 700px; height: 94px; margin: 0px 0px 10px 0px; }
  *.subpages p{ font-size: 1.4em; font-weight: bold; color: #0A235D; }
  *.subpages li:before{ margin-right: 10px; height: 12px; width: 12px; }
  *.subpages li{ font-size: 1.2em; }
  *.au2{ width: 300px; height: 300px; padding: 0px 5px 5px 0px; }
  *.aboutus p{ font-size: 1.1em; margin-bottom: 12px; }
  *.findus{ width: 700px; height: 595px; margin: 0px; z-index: 50; }
}
/* ===== == = === 56.25em (900px) ================ */
@media screen and (min-width : 56.25em) {
  *.logo{ width: 163px; height: 130px; }
  *.head-title{ font-size: 5em; left: 170px; }
  *.head-button-content button{ width: 110px; height: 30px; }
}
/* ===== == = === 68.75em (1100px) =============== */
@media screen and (min-width : 68.75em) {
}
/* ===== == = === 81.25em (1300px) =============== */
@media screen and (min-width : 81.25em) {
}



