/*City Standard StyleSheet.*/


/*Apply this class to the globalnavbar so the links will be white.*/
.globalnavbar { color: #FFFFFF; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px; font-weight: bold; text-decoration: none}
a.globalnavbar:link { color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px}
a.globalnavbar:visited { color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px}
a.globalnavbar:hover { color: #FFFFFF; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px; font-weight: bold; text-decoration: none}
a.globalnavbar:active { color: #FFFFFF; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px; font-weight: bold; text-decoration: none}


/*Apply this class to the blackbar text so the links will be white and have a gold hover.*/
.blackbar { color: #FFFFFF; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 11px; text-decoration: none}
a.blackbar:link { color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px}
a.blackbar:visited { color: #FFFFFF; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px; text-decoration: none}
a.blackbar:hover { color: #cc9900; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px}
a.blackbar:active { color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 12px}

/*Apply this class to the sidelink text - color can be modified to match your colour scheme.  Do not remove the hover underline.*/
.sidelink { color: #000066; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; font-size: 11px; text-decoration: none; font-weight: normal}
a.sidelink:link { color: #000066; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"}
a.sidelink:visited { color: #000066; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; text-decoration: none}
a.sidelink:hover { color: #000066; text-decoration: underline; font-family: "Trebuchet MS", Arial, "MS Sans Serif"}
a.sidelink:active { color: #000066; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; text-decoration: none}

/*Apply this class to the sidelink text - color can be modified to match your colour scheme.  Do not remove the hover underline.*/
.nounderline { color: #000066; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; text-decoration: none}
a.nounderline:link { color: #000066; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"}
a.nounderline:visited { color: #000066; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; text-decoration: none}
a.nounderline:hover { color: #000066; text-decoration: none; font-family: "Trebuchet MS", Arial, "MS Sans Serif"}
a.nounderline:active { color: #000066; font-family: "Trebuchet MS", Arial, "MS Sans Serif"; text-decoration: none}

/*This is the default link style for any links that you do not apply a class to.  These are the City standard and should not be changed.*/
a:link { color: #000066; text-decoration: underline}
a:visited { color: #003300; text-decoration: underline}
a:hover { color: #000066; text-decoration: underline}
a:active { color: #000066; text-decoration: underline}

/*These are the heading styles.  Colors can be changed to match your colour scheme*/

h1 {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; color: #990000}
h2 {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; color: #990000}
h3 {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #990000}
h4 {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #990000}

/*This is the main and secondary styles in the header bar.  Colours can be changed to match your colour scheme.  Fonts and sizes should stay as is*/
.maintitle {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 22px; color: #FFCC00; font-weight: normal}
.secondarytitle {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 20px; color: #CCCCCC}

/*This is the sidebartitle style.  Colour can be changed to match your colour scheme.  Fonts and sizes should stay as is.*/
.sidebartitle {  font-family: "Trebuchet MS", Arial; font-size: 11px; color: #990000; text-decoration: none}


/*This is the styles for body, and tables.  Do not alter.*/
td {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333}
body {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12pt; color: #333333}


/*This is the smalltext style.*/
.smalltext {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 9pt; color: #333333}
.caption {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 8pt; color: #333333}


.sidetext {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; color: #333333}
.sidetextbold {  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold}
.smallboxtext {  font-size: 10px; color: #FFFFFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif}

.medtext {  font-size: 11px}


.subhead {
	font-weight:bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#333;
	border-bottom:1px dashed #666666;
	width:60%;
	bottom: 20%;
	line-height: 20px;
}

#spotlight {
	width:275px;
	background-color:#ebebeb;
	border:1px solid #333;
	float:right; 
	padding-bottom:20px;
	margin-bottom:20px;
	margin-right:10px;
	margin-left:7px;}
#spotlight h1 {
	background-color:#505050;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fff;
	font-weight:bold;
	margin:0px;
	padding-top:5px;
	padding-bottom:10px;
	font-variant:small-caps;
	padding-right: 5px;
	padding-left: 5px;}
#spotlight p {
	margin-top:10px;
	margin-bottom:7px;
	margin-left:7px;
	margin-right:10px;}
----------------------------------
/*this is to create captions on the images*/

#caption {
  position: relative; margin: 0.5em;
  clear: both;
  padding: 0.5em;
}

.captionleft{
  width:175px;
  float:left;  
  margin: 0.5em;
  }
 .captionright{
  width: 175px;
  float:left;  
  margin: 0.5em;
  } 
  
.caption p {
  font-size: 7px;
  text-indent: 0;
}

.clear {
	clear: left;
}

/*this to enlarge photos*/ 
#menu {position:relative;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {
	text-decoration:none;
	background-color:#8c97a3;
	color:#000;
	margin-bottom: 5px;
}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {
	display:block;
	position:absolute;
	top:-65px;
	left:150px;
	width:300px;
	height:300px;
	border:10px solid #ccc;
	z-index: +1;
}

/*make photo bigger?*/

a.screen, a.screen:visited {
position:relative; 
z-index:1;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:250px; /* give it a width */
height:0; /* no height to solve an Opera bug that 
             makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:0; /* position:the image */
top:-150px;
z-index: +1;
}
a.screen:hover {
text-decoration:none; 
border:0; /* needed for this to work in IE */ 
z-index:10000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:150px; /* now give it a height */
cursor:pointer; /* for IE */
z-index:+1; 
}
a.screen:hover b img {
border:0; /* remove the link border */