/* -- ELEMENT STYLES -- */

body {  
  font-family: arial, helvetica, arial, sans-serif;
  font-size: 80%;
  color: #234163;
  background-color: #EEF3FA;
  margin: 30px;
}

a {
  color: #5A799D;
}

a:hover {
  text-decoration:none;
  background-color: #EEEEEE;
}

acronym {
  cursor: help;
  border-bottom: 1px dashed #AAAAAA;
}

img {
  border: 0px;
}

ul {
  list-style-image: url(../images/bullet.gif);  
}

li {
  font-size: 100%;
}

table, td, th
{
  border:0;
  font-family: arial, helvetica, arial, sans-serif;
  font-size: 100%;
  color: #234163;
  background-color: #FFFFFF;
  margin: 0;

}

/* -- MAIN CONTAINER -- */

#layoutBox {
  width: 98%;
  float: left;
  border: 1px solid #5A799D;
  background-color: #FFFFFF;
  padding: 10px;
}


/* -- HEADER CONTAINER -- */


#headerBox {
  height: 7em;
  border: 1px solid #5A799D;
 background: #7897BB url(../images/hdr_bg.jpg) repeat-x bottom;
}

#headerLeftBox {
  float: left;
  text-align: right;
  width: 75%;
  height: 7em;
}
#headerRightBox {
  float: right;
  width: 24%;
  height: 7em;
  text-align: right;
  padding: 0px; 
/*  background: url(../images/left_bell.gif)  no-repeat center center;*/
  background: url(../images/crest.png)  no-repeat center center;
}


 
/* -- HEADER STYLES -- */

.title {
  font-family: times new roman, helvetica, arial, sans-serif;
  font-size: 280%;
  font-weight: bold;
  font-style: italic;
  color: #FFFFFF;
  line-height: 0.9em;
}

.subTitle {
  font-size: 90%;
  color: #5A799D;
  margin-right: 2%;
}


/* -- MENU CONTAINER -- */

#menuBox {
  float: left;
  width: 15em;
  margin: 10px 0 0 0;
  border-right: 1px solid #5A799D;  
  text-align: left;
} 

#clickmenuBox {
  display: none;
  position:absolute;
  z-index:999;
  left:0px;
  top:0px;
  width: 15em;
  margin: 0 0 0 0;
  border-right: 1px solid #5A799D;  
  text-align: left;
  background-color: #FFFFFF;
}

#menuBox p, #clickmenuBox p {
  margin: 5px 0 20px 2px;
}

#menuBox br, #clickmenuBox br {
  margin-top: 10px;
}

#menuButton{
 padding: 0px 10px 0px 0px;
 display: none;
}

#welcomePics{
 display: none;
} 

/* -- Tower Details -- */

.towerDiv {
  width: 100%;
  height: 100%;
  float: left; 
  background: #FFF;
}

.towerPic {
  width: 200px;
  float: left;
  }

.towerText {
  float: left;
  width: 250px;
  margin-left: 0;
}

/*
@media screen and (max-width: 900px) {
.towerPic {
width: 100%;
}
.towerText {
width: 100%;
margin-left: 0;
}
}
*/

/* -- CONTENT CONTAINER -- */

#mainContent {
  margin: 10px 0 0 16em;
  border-left: 1px solid #5A799D;
}

#mainContent br {
  margin-top: 10px;
}

#mainContent p {
  padding: 0px 5px 2px 10px;
}

.spacer {
  height: 1px;
  clear: both;
}

/* Used by items meant for text only rendering */

.noDisplay {
  display: none;
}

.nowrap {
  white-space: nowrap ;
}


/* -- HEADER/FOOTER STYLES (menuBox & mainContent) -- */

#mainContent h1, #menuBox h1, #clickmenuBox h1, .menuFooter, .footer {
  font-family: times new roman, helvetica, arial, sans-serif;
  font-size: 125%;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #5A799D;
  background: #EEF3FA url(../images/hdr_icon.gif) no-repeat bottom right;
  border-top: 1px solid #5A799D;
  border-bottom: 1px solid #5A799D;  
  display: block; 
  padding: 2px 2px 2px 10px;
  margin: 0 0 10px 0;
}

#mainContent h1, .footer {
  border-right: 1px solid #5A799D;
} 

.menuFooter, .footer {
  margin-bottom: 0px;
}

#menuBox h1, #clickmenuBox h1, .menuFooter {
  border-left: 1px solid #5A799D;
}

#mainContent h2, #menuBox h2 {
  font-size: 112%;
  font-weight: bold;
  background-color: #EEEEEE;
  display: block;
  padding: 0px 0px 0px 5px;
  margin-bottom: 0px;
}

#mainContent h2 {
  margin-left: 0;
}

#mainContent h1, #mainContent h2 {
  clear: right;  /* Set to both if you don't care about Internet Explorer */
}

.footer {
  font-family: arial, helvetica, arial, sans-serif;
  font-size: 80%;
  font-weight: normal;
  border-right: 1px solid #5A799D;
  border-left: 0px;
  clear: both;
}

.footer a:hover {
  background-color: #D6E1F1;
}

.footer br {
  margin: -20px;
}


/* -- MENU/NEWS ITEM STYLES -- */

.newsGroup {
  padding: 0px 5px 0px 5px;
  margin-bottom: 30px;
}

.menuGroup {
  padding: 0px 0 5px 0;
  margin-bottom: 5px;
}

.menuGroup a {
  color: #35567C;
  text-indent: 1em;
  text-decoration: none;
  margin-bottom: 2px;
  display: block;  
}

.menuGroup a:hover {
  color: #FFFFFF;
  background-color: #5A799D;
}


/* -- IMAGE STYLES -- */

.imgRight, .imgLeft {
  padding: 10px 5px 5px 10px;
  border: 1px solid #FFFFFF;
}

.imgRight {
  float: right;
}

/* Below style will not work correctly unless clear = "both" on the
   #mainContent h1, #mainContent h2, .footer class */

.imgLeft {
  float: left;
}

/***********************************************************************************************/
/* Button */
/***********************************************************************************************/
.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color: red;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	padding: 1em;
	display: none;
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

@media all and (max-width: 592px) {
     #mainContent{margin-left: 0; margin-top: 0;}
     #menuBox{display: none; padding: 0px;}
     #layoutBox {padding: 0px;width: 100%;}
	 #menuButton{display: block;}
     #fadeshow1{display: none;}
     #welcomePics{display: block;}
     body{margin: 0px;}
     }
@media all and (max-width: 900px) {
     #headerRightBox{display: none;}
}
			
@media all and (min-width: 50px)   {  
     .title  { font-size:0.5em;  }
     .subTitle {font-size:0.5em; }
     #headerBox {height: 3em; }
     #headerLeftBox {width: 100% ;height: 3em;} 
}
@media all and (min-width: 100px)  {  
     .title  { font-size:0.6em;  }
     .subTitle {font-size:0.3em; }
     #headerBox {height: 3em; }
     #headerLeftBox {width: 100% ;height: 3em;} 
}
@media all and (min-width: 200px)  {  
     .title  { font-size:0.8em;  }
     .subTitle {font-size:0.4em; }
     #headerBox {height: 3em; }
     #headerLeftBox {width: 100% ;height: 3em;}
}
@media all and (min-width: 300px)  {  
     .title  { font-size:1.0em;  }
     .subTitle {font-size:0.5em; }
     #headerBox {height: 4em; }
     #headerLeftBox {width: 100% ;height: 3em;}
}
@media all and (min-width: 400px)  {  
    .title  { font-size:1.4em;  }
    .subTitle {font-size:0.6em; }
    #headerBox {height: 4em; }
    #headerLeftBox {width: 100% ;height: 3em;}
}
@media all and (min-width: 500px)  {  
    .title  { font-size:1.8em;  }
    .subTitle {font-size:0.7em; }
    #headerBox {height: 5em; }
    #headerLeftBox {width: 100% ;height: 4em;}
}
@media all and (min-width: 600px)  {  
    .title  { font-size:2.0em;  }
    .subTitle {font-size:0.8em; }
    #headerBox {height: 6em; }
    #headerLeftBox {width: 100% ;height: 6em;} 
}
@media all and (min-width: 700px)  {  
    .title  { font-size:2.2em;  }
    .subTitle {font-size:0.9em; }
    #headerBox {height: 6em; }
    #headerLeftBox {width: 100%; height: 6em;} 
}
@media all and (min-width: 800px)  {  
    .title  { font-size:2.4em;  }
    .subTitle {font-size:1.0em; }
    #headerBox {height: 7em; }
    #headerLeftBox {width: 100% ;height: 7em;} 
    .towerText {width: 300px;}
}
@media all and (min-width: 900px)  {  
    .title  { font-size:2.6em;  }
    .subTitle {font-size:1.1em; }
    #headerBox {height: 7em; }
    #headerLeftBox {width: 75% ;height: 7em;} 
    .towerText {width: 400px;}
}
@media all and (min-width: 1000px) {  
    .title  { font-size:2.8em;  }
    .subTitle {font-size:1.2em; }
    #headerBox {height: 7em; }
    .towerText {width: 500px;}
    #headerLeftBox {width: 75% ;height: 7em;}
}