﻿/* For all pages' main layout */
html {
padding:0px;
margin:20px;
scrollbar-face-color: #ffffff; 
scrollbar-shadow-color: #ffffff; 
scrollbar-highlight-color: white; 
scrollbar-3dlight-color: #0099ff; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-track-color: #fff; 
scrollbar-arrow-color: #0066ff;
}

body {
background-color: white;
font-size: 12px;
font-family: Tahoma;
letter-spacing: 0.01cm;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
scrollbar-face-color: #FFFFFF; 
scrollbar-shadow-color: #0063F7; 
scrollbar-highlight-color: #ffffff; 
scrollbar-3dlight-color: #Ffffff; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-track-color: #ffFFFF; 
scrollbar-arrow-color: #0063F7;
}

/* Header */
#head {
width:900px;
margin: 0px auto;
padding:0px;
text-align:left;
background-color:transparent;
}

/* Main Links */
#links
{
margin: 0px auto;
padding:0px;
width: 900px;
height: 20px;
background-image: url(LinksBG.jpg);
}

#links a:link, #links a:visited
{
font-size: 14px;
color: white;
text-decoration: none;
font-variant: normal;
margin: 0px 20px;
font-weight: bold;
}

#links a:hover {
    font-size: 14px;
}
#links a:active {
    font-size: 14px;
    color: white;
}

/* Drop Down List */
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
width: 300px; /* default width for menu */
text-align: left;
color: #0063F7;
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
color: #0063F7;
}

.anylinkmenu ul li a, .anylinkmenu ul li a:visited{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color: #0063F7;
}

.anylinkmenu a:hover{ /*hover background color*/
background-color: white;
color: black;
}

.anylinkmenu a:active {
color: #0063F7;
}

/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

/* Content */
#box 
{
width:896px;
height:500px;
margin: 0px auto;
padding:0px;
text-align:left;
border-left: 2px solid #F0ECEC;
border-right: 2px solid #F0ECEC;
}

#box li
{
list-style-type: square;
}
#box a, a:visited
{
font-size: 12px;
color: #0066cc;
text-decoration: none;
font-weight: bold;
}

#box a:hover {
    font-size: 12px;
    text-decoration: underline;
    color: #336600;
}
#box a:active {
    font-size: 12px;
    text-decoration: none;
    color: black;
}

#defaultcontent
{
width: 650px;
height: 500px;
margin: 0px 0px 0px 246px;
padding: 0px 0px 0px 0px;
overflow: auto;
position: absolute;
	
}
#content 
{
width: 896px;
height: 390px;
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
overflow: auto;
position: absolute;
}

#subbg
{
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:left;
}

#contentlinks
{
padding: 110px 300px;
text-align: center;
}

#contentlinks a:link, #contentlinks a:visited
{
font-size: 20px;
color: black;
text-transform: capitalize;
text-decoration: none;
line-height: 32px;
}

#contentlinks a:hover {
    font-size: 20px;
    color: #00A6FF; 
    line-height: normal;
}

#contentlinks a:active {
    font-size: 20px;
    color: #00A6CC;
}

#contentlinks a span{display:none;}

#contentlinks a:hover span {display: block;
position: relative;
top: 0px;
left: 370px;
width: 180px;
height: 0px;
padding: 0px;
color: #5B5656;
font-weight: normal;
background-color:transparent;
font-size: 12px;
text-align:right;
line-height: normal;
text-transform: none;
}

/* Home's Latest Updates Title Styling */
.post {
	padding: 0px 20px;
	margin-bottom: 20px;
}

.post .title {
	margin-bottom: 20px;
	padding: 4px 0px 6px 0px;
}

.post .title2 {
	margin-bottom: 20px;
	padding-bottom: 0px;
	border-bottom: 2px ridge #333333;
}

.post h1 {
	width: 580px;
	padding: 0px 0 0 0px;
	font-family: Century Gothic;
	font-size:15px;
	color: #28313A; 
	text-transform: uppercase;
	text-align: center;
	background-position:bottom;
	background-repeat:no-repeat;
		background-image: url(Homepage%20Images/001.jpg);
}

#contenttable
{
	background-image: url(Homepage%20Images/imgbigyellow.jpg);
	text-indent: 10px;
	width: 550px;
	height: 28px;
	color: #333300;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
}

#contentbox
{	
	width: 550px;
	height: 25px;
	font-size:12px;
	color: #333300;
	font-family: tahoma;
	margin: 0px 40px 0px 0px;
}

/* Home's left sidebar styling */
#left 
{
width: 220px;
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
overflow: auto;
overflow-x: hidden;
background-image: url(Homepage%20Images/imgvertical.jpg);
}

#left a:link, #left a:visited
{
font-size: 11px;
color: #0066cc;
text-decoration: underline;
font-weight: bold;
}

#left a:hover {
    font-size: 11px;
    color: #336600;
}
#left a:active {
    font-size: 11px;
    color: black;
}

#lefttable
{
	background-image: url(Homepage%20Images/imgyellow.jpg);
	width: 220px;
	height: 30px;
	color: #333300;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	font-family: Century Gothic;
}

h2
{
	font-size: 14px;
	color: #0000CC;
}
h3
{
	font-size: 13px;
	color: #666666;
}
#div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	

#div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

#div.img a:hover img {border: 1px solid #0000ff;}

#div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}

#footer{
font-weight: bold;
font-size: 12px;
width: 900px;
height: 20px;
margin: 0px auto;
text-align:center;
background-image: url(linksBG.jpg);
color: White;
}

/* Our Town - Facilities - CSS Gallery */ 
.photo {width:890px; text-align:left; float: right; position: relative; top:40px; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:890px; height:auto; position: relative; z-index:10;}
.photo ul.topic li {display:block; width:110px; height:21px; float:left; }
.photo ul.topic li a.set {display:block; font-size:12px; width:110px; height:30px; text-align:center; line-height:30px; color:white; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#D0E1FA;}
.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}
.photo ul.topic li.active a
{color:#000; background:#5EB8FD;}
.photo ul.topic li a:hover, 
.photo ul.topic li:hover a
{color:#fff; background:#0091FF;}
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:190px; background:#3CABFF; width:780px; padding:20px 30px; border:20px solid #2E81FD; z-index:1;}
.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:190px; background:#5EB8FD; width:780px; padding:20px 30px; border:20px solid #0091FF; z-index:100;}
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#eee; border:1px solid #888;}
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

/* the menu at the bottom of the content pages */
#menu {
margin: 0px 0px 0px 0px;
  padding:0; 
  width:81em;
  height:8.5em;
  overflow:hidden; 
  border: 5px solid #675D5D;
  }
#menu li {
  display:inline;
  list-style-type:none; 
  }
#menu li a {
  display:block;
  float:left;
  text-decoration:none; 
  margin:0; 
  }
#menu li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#menu li a span {
  display:none; 
  }
#menu li a:hover {
  background:white;
  }
#menu li a:hover img {
  opacity:1;
  }
#menu li a:hover span {
  width:11em;
  color:#646262;
  display:block; 
  cursor:pointer;
  float:left;
  }
#menu .h2 {
  margin:0 5px; 
  padding:0; 
  color:#fc0; 
  font-variant:small-caps; 
  font-size:1.25em; 
  border:0;
  }
#menu .h3 {
  margin:0 5px; 
  padding:0; 
  font-size:1.1em; 
  color:#0aa;
  }
.outer {
  background:transparent; 
  font-size:0.9em;
  padding: 5px;
  margin: 392px auto;
  position: absolute;
  }
