/* contains new fix for #right-col in IE */

@charset "utf-8";


html,body{
behavior: url("csshover.htc"); /* needed so that hover, and pop up menu issues are fixed for IE6 and IE7.. */
}


body {
margin: 0;
padding: 0;
font-family: Arial, Verdana, sans-serif;
background-color: #FFFFFF;
color: #000066;
background-image: url(images/page_bg.gif);
margin-bottom: 20px;
}





#ticker {
position: absolute; 	
top: 91px;
left: 190px; 			
width: 400px; 			
height: 1em; 			
font-weight: bold;
font-size:small; 
color: #fff;
}

/* Do not edit #ticker_edit */

#ticker_edit {
position: absolute; 
z-index: 100;} 			/* This is needed to ensure the ticker edit button does not cause layout problems with the ticker.*/



#container {
background-image: url(images/bg.jpg);
background-repeat: repeat-y; 
margin: 0px auto;
width: 818px;
position: relative;
top: 0px;
}

#containercontent {
background-image: url(images/bg_content.jpg);
background-repeat: repeat-y;
margin: 0px auto;
width: 818px;
position: relative;
top: 0px;
}

a {
text-decoration: none;
color: #0000CC;
}

a:hover {
text-decoration: none;
color: #0099FF;
}


#header {
height: 112px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}


#left-col {
position: absolute;
top: 112px;
left: 0px;
width: 180px;
height: 510px;
background-image: url(images/navbar_bg.jpg);
background-repeat: no-repeat;
z-index: 500;
} 






#right-col{  /* For Mozilla etc */

margin: 0px 0px 0px 180px;
padding: 0px 0px 0px 0px;
position: relative;
min-height: 510px; /* IE doesn't understand min-height, but other browsers do */
_height: 510px;  /* IE thinks height means min-height */
}


#aerialphoto {background-image: url(images/home_pic.jpg);}




#right-col-content{  /* For Mozilla etc */

margin: 0px 0px 0px 180px;
padding: 10px 35px 0px 10px;
background-image: url(images/content_pic.jpg);
background-repeat: no-repeat;
min-height: 500px; /* IE doesn't understand min-height, but other browsers do */
_height: 500px;  /* IE thinks height means min-height */
}






/* Miscellaneous */

.title {
color:#FFFF00;
font-size: medium;
font-weight: bold;
margin-top: 0px;
text-transform: uppercase;

}

#intro {
position: absolute;
top: 495px;
left: 185px;
width: 609px;
height: 133px;
z-index: 10;
color: #FFFFFF;
}

#latestnews {
position: absolute;
top: 417px;
left: 536px;
width: 254px;
height: 173px;
z-index: 20;
background-image: url(images/news_panel.jpg);
background-repeat: no-repeat;
padding: 10px 7px 7px 7px;
text-align: center;
}

#clearer {
clear:both;
}

#footer {
height: 28px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
clear:both;
}



.wizkid a {
background: url(../images/wizkid.gif) no-repeat;
position: absolute;
width: 110px;
height: 20px;
z-index: 500;
top: 580px;
left: 40px;
text-indent: -5000px;
border: solid #5C8684 2px;
}

.wizkid a:hover{
border: solid #020167 2px;
}



/* For Menu */


ol#nav {
padding: 0;
margin: 0;
list-style: none;
position: relative;
top: 90px;
left: 25px;

_position:inherit;
_margin-top: 60px;
_margin-left: 25px;


z-index: 500;
}

/*Now we need to style the first-level of the list. This is the level that people see */

#left-col li {
float: left;
position: relative;
width: 85%;
}

/* If using images, we need to specify the width and height of our images here. This assumes that your images are all going to be the same width and height. If you have an image that is hugely different in size, you will need to specify this individually*/

#left-col li.folder,
#left-col li.topnav a{
position: relative;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color:#03026a;
width: 133px;
padding: 0.5em;
font-size: 12px;
border-bottom: 1px solid;
}

#left-col li.folder   {background: url(../images/arrow.gif) no-repeat right}

/* For the hover - This is really cool! the pop up menu buttons now have over states */

#left-col li.topnav a:hover,
#left-col li.folder:hover
{background-color: #fff000} /* This pulls the background to enable the hover effect. The Zero is important */


/*The next step is to tackle the second-level lists that will be the dropdowns themselves.*/

/*This positions the second-level lists absolutely (pulling them out of the flow of HTML into a world all of their own) and sets their initial state to not be displayed. If you substitute display: none with display: block, you will see the need for the top and left properties in Internet Explorer, because without them, IE will align the second-level lists to the top right of their relative parent rather than the bottom left.*/


#left-col li.folder ol {
display: none; /* Hides the pop up */
position: absolute; 
top: -1px; /* Vertical position of our pop up */
left: 140px; /* Dictates position of pop up appears */
background-color: #fff000;
width: 100%; /* Dictates the width of pop up */
text-align:center;
text-indent: 0; /*resets text indent */
list-style: none;
margin: 0px 5px;
padding: 0px 5px;
padding-top: 0.5em;
border-top: 1px solid #03026a;
border-right: 1px solid #03026a;
border-bottom: 1px solid #03026a;
}


/*And now, making the pop up work. To make a second-level list appear when its parent list item is ?rolled over,? we simply need to add the following:*/

#left-col li:hover ol {display: block;} /*Which says that any list that is nested in a list item that has the cursor hovering over it should be displayed.*/

#left-col li.folder {z-index: 500;} /* To fix IE bug - force the pop up's above each other */

/* Finally we style the pop up Links.. Currently this is set up to give ALL links in the pop's up the same style. You may wish to break this up so that all the links in folder1 and folder2 and so on get their own styles.*/

#left-col li.folder a
{display: block;
text-decoration:none;
color:#fd8c00;
font-weight:bold;
padding-bottom: 0.5em;
width: 100% /* Needed else IE6 only sees the text as the active area, and not the list box */

}

#left-col li.folder a:hover{

color:#fc4c01;
font-weight:bold;
}




/* For the class page archives */

.arcstrap {text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; }


#newsletterbox {
height:58px;
left:30px;
position:absolute;
top:400px;
width:136px;
text-align: center;
font-size: 12px;
}

#newsletterbox a {color: #fff000;}

#newsletterbox a:hover {color: orange;}