body { margin: 0; padding: 0; width: 100%; }

#Site_Wrapper { width: 800px; margin-right: auto; margin-left: auto; Position: relative; }

a {
	/*text-decoration: none;*/
	/*color:  #333333;*/
	color: #436fa8; text-decoration: none; outline: none medium; }
a:visited { color: #815e7e;
	/*color:  #333333;*/
	}
a:hover {
	/*color: #333333;*/
	color: #26213e; text-decoration: underline; }
a:active {  
	/*color:  #333333;*/
	}


strong, b { color: #515357; font-family: lucida, arial, helvetica, sans-serif; font-weight: bold; }
p { color: #515357; font-family: lucida, arial, helvetica, sans-serif; font-size: 14.4px; line-height: 1.2; margin-top: 0.5em; margin-bottom: 1em; }

/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/

h1 { font-size: 1.5em; line-height: 44px; margin-top: 0; margin-bottom: 0; color: #213550; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: 100; text-decoration: none; left: 2em; }
h2 { font-size: 1em; line-height: 1.2em; margin-top: 0; margin-bottom: 4px; color: #426ba1; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
h3 { font-size: 0.9em; margin-top: 0; margin-bottom: 0; color: #537098; font-family: Verdana, Arial, Helvetica, sans-serif; }
h4 { font-size: 1em; margin-top: 0; margin-bottom: 0; color: #515357; font-family: Verdana, Arial, Helvetica, sans-serif; }
h4:link , h4:visited  , h4:hover , h4:active{
	color: #84aee4;
	}
h5 { font-size: 0.9em; margin-top: 1em; margin-bottom: 0; color: #a5a5a5; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.5; }
h6 { font-size: 0.8em; font-weight: bold; margin-top: 0; margin-bottom: 0; color: #61646e; font-family: Verdana, Arial, Helvetica, sans-serif; }

ul { color: #515357; font-size: 0.8em; list-style-type: none; margin: 0.25em 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-indent: 0.25em; }

hr {
	border: 0;
	color: #FFFFFF;
	background-color: #FFFFFF;
	height: 1px;
	width: 100%;
	text-align: center;
}
/*Masthead*/

#masthead { 
	margin: 0; 
	padding: 0 5px 5px; 
	background-image: url(big_logo2.jpg); 
	background-position: left top;
	background-repeat: no-repeat;
	height: 108px; 
}

#TopLine {
	float: left;
}
#Navbox {
	position: absolute;
	top: 7em;
	height: 2em;
	width: 800px;
	z-index: 20;
}

#masthead h1 { font-size: 1.5em; color: #81a6d5; font-family: Verdana, Arial, Helvetica, sans-serif; position: relative; left: 7.75em; margin: 0; float: left; padding: 40px 0 0; }

#masthead .logo { float: left; }

#left  {
	background-image:  url(../../../../../../Global_Images/Telephone.gif);
	background-repeat: no-repeat;
	background-position: top right;
	padding-bottom: 0px;
	margin: 0px;
}
#left .helpdesk { font-size: 0.8em; color: #426ba1; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.3em; text-align: right; padding-top: 15px; margin-bottom: -1.6em; padding-right: 33px; margin-top: 0; }

#left .phonenumber {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	margin-bottom: -2em;
	color: #426ba1;
	text-align: right;
	margin-top: 1em;
}

#left form { display: block; text-align: right; visibility: hidden; margin-top: 2.6em; padding-bottom: 5px; margin-bottom: 0; }
#left input.btn { display: block; width: 6em; background-color: #d3dce7; border: solid 2px #a5a5a5; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: #000000; height: 1.7em; visibility: hidden; }
#left input.txt { display: block; width: 20%; border: solid 2px #81a6d5; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; height: 1.25em; visibility: hidden; margin: 0; }
#topbar {
	height: 100px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 70px;
	}
html>body #topbar {
	height: 85px; /* ie5win fudge ends */
	}
/* styles for the drop down navigation  */
#nav, #nav ul { float: left;    /* floats the top level headings out to the left. Change this if you want a vertical menu */
	list-style: none;  /* removes any bullet points  */
	line-height: 1;  /* makes sure 2nd level drop downs line up */
	padding: 0;  /* Aligns origional list to left */
	background: #ffffff ;  /* Sets background colour to top level items and drop downs */
	font-weight: normal;  /* Font weight for top level items */
	margin: 0 0 4px;  /* Gap between nav menu and content beneath it */
	font-size: 0.9em; /* Sets size of font for all ul elements */
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; height: 2em; }


#nav a { display: block;  /*  */
	width: 10.5em;   /* Top level list width (Text width) */
	w\idth: 95%;  /* Top level list width  IE BOX model hack*/
	text-decoration: none;  /*  removes underlines from all links*/
	font-weight: normal;  /* Font weight for all linked items */
	height: auto; color: #008399; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; padding-top: 0.25em; padding-bottom: 0.25em; }

#nav a.daddy {
	background: url(rightarrow.gif) center right no-repeat;  /* Adds arrow to second level drop downs to signify there is a third */
}

#nav li { float: left;  /* Aligns top level tabs to left */
	width: 8em;  /* Width of top level items (hack to make opera to behave) */
	padding: 0;  /* padding below navigation bar (leave at 0 I think) */
	border-right: 1px solid #fff; border-bottom: 8px solid #fff; /* Right border colour*/
}

/* Drop down bits  */
#nav li ul { left: -999em; width: 7.9em; w\idth: 7.9em; position: absolute; height: auto; font-weight: 700; margin-top: 5px; visibility: visible; border-color: #fff white white; border-style: solid; border-width: 1px; }

#nav li li { padding-right: 1em;  /* Padding to right of drop downs */
	width: 7.9em ; /* Width of drop downs (fiddle with this a bit to get borders to work)*/
	border-top: 1px dotted #008399;  /* border colour and deign within drop downs */
}

#nav li ul a {
	width: 10em;  /*  Text width on drop downs */
	w\idth: 8em;
}

#nav li ul ul {
	margin: -1em 0 0 7.9em;  /* lines up 3rd level drop down */
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;  /* hides the 3rd level drop down */
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { font-weight: 700; left: auto;  /* displays all drop downs after roll over */
}

#nav li:hover, #nav li.sfhover {
	/*background: #931A31;   Red background colour of drop downs when hovered over */
	color: #26213e; font-weight: 700; background: #fff;   /*Orange background colour of drop downs when hovered over */

}	
#nav li a:hover{ color : #26213e; font-weight: 700;	/* Colour of drop down text colour when hovered over*/
}

/*Left & Right columns*/
#leftbar { position: absolute; top: 10em; left: 0; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 165px; }
html>body #leftbar {
	width: 165px; /* ie5win fudge ends */
	}
#rightbar {
	position: absolute;
	top: 9em;
	right: 5px; /* Opera5.02 will show a space at right when there is no scroll bar */
	margin: 1em 0 5px;
	padding: 0;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 150px;
	}
html>body #rightbar {
	width: 160px; /* ie5win fudge ends */
}
/*Main content
*/
#middlebar { margin: 64px 185px 5px 175px; }	
	
#Content { position: relative; margin: 5px 10px 6px; right: 0; top: 0; list-style-position: inside; z-index: 5; padding-top: 0; padding-bottom: 5px; padding-left: 5px; }
#top { width: 97%; height: 100%; margin-top: 5px; padding: 0 0 4em 0.8em; }
.underbox { font-size: 0.85em; line-height: 90%; position: relative; top: 0; left: 0; float: left; margin-right: 3em; }
#Content ul{
	list-style-type: disc;
}

#PageTitle { top: 7em; padding: 0 0 0 15px; width: 420px; }
#PageTitle h1{
	font-size: 1.5em;
	line-height: 1em;
	padding-bottom: 1em;
}
#PageTitle h6 {
	font-size: 0.6em;
	line-height: 1em;
	font-family: Verdana, Arial, sans-serif;
	font-weight: normal;
}
#PageTitle img {
	position: relative;
	left: 0px;
	top: 0px;
	margin-left: -10px;
	margin-bottom: -5px;
}

.infoboximg {
	float: left;
	clear: none;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: -170px;
	z-index: 10;
	}
/*Events*/
.news_img {
	padding: 10px;
	z-index: 1;
	position: relative;
	float: right;
}
.date {
	font-size: 0.6em;
	padding: 0;
	margin-top: 0em;
	margin-bottom: -0.5em;
}

.Cs_img {
	z-index: 1;
	position: relative;
	float: left;
	margin-left: -10px;
	padding-left: 0px;
	padding-bottom: 5px;
	padding-right: 10px;
	top: 0px;
	margin-top: -10px;
	padding-top: 5px;
}

.event_table {
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	margin-left: -3em;
}
.event_table td, .event_table th {
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	padding: 2px;
} 

.Square_img {
	float: left;
	padding-right: 5px;
	padding-left: 0px;
	padding-top: 5px;
}

.layouttable {
	border: 0px solid #FFFFFF;
}

.layouttable td, .layouttable th {
	border: 2px solid #FFFFFF;
	border-collapse:collapse;
}

.boxmargin {
	margin: 5px;
}
/*NavBox
*/
.NavBox { background-position: center; margin-top: 0; margin-bottom: 5px; width: 165px; padding: 5px 0; }

.NavBox a { color: #436fa8; text-decoration: none; }

.NavBox a:visited { color: #546c89; text-decoration: none; }

.NavBox a:hover, .NavBox a:active { color: #26213e; text-decoration: none; }

.NavBox h1 { font-size: 1.15em; color: #436fa8; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: 700; line-height: -3em; left: 0; margin-left: 5px; padding: 0 0 0 5px; }

.NavBox h2 { font-size: 0.75em; color: #008399; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.4em; margin: 0; padding: 2px 5px 0 10px; }

.NavBox h3 { font-size: 0.7em; color: #26213e; font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 0.25em; margin-top: 0; padding: 2px 5em 0 10px; font-weight: bold; }
.NavBox p { list-style-type: none; padding: 0 5px 0 10px; font-family: verdana, Arial, sans-serif; font-size: 12.8px; margin-top: 0; }

.NavBox img {
	float: right;
}
/*NavBoxBlue*/
.NavBoxBlue { margin-top: 0; margin-bottom: 5px; width: 165px; padding-top: 10px; padding-bottom: 15px;
	background;
}

.NavBoxBlue a { color: #243a59; text-decoration: none; }

.NavBoxBlue a:visited { color: #243a59; text-decoration: none; }

.NavBoxBlue a:hover, .NavBox a:active { color: #81a6d5; text-decoration: none; }

.NavBoxBlue h1 { font-size: 17.6px; color: #26213e; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; margin-bottom: 0; margin-top: -0.85em; padding: 2px 5px 0 10px; line-height: 1; text-decoration: none; }

.NavBoxBlue h2 { font-size: 1em; color: #008399; font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 0; margin-top: 0; padding: 2px 5px 0 10px; }
.NavBoxBlue h3 { font-size: 0.7em; color: #26213e; font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 0.25em; margin-top: 0; padding: 2px 5px 0 10px; font-weight: bold; }
.NavBoxBlue p {

	list-style-type: none;
	margin: 0;
	padding: 2px 5px 0 10px;
	font-family: verdana, Arial, sans-serif;
	font-size: 12.8px;
}
.NavBoxBlue img {
	float: right;
	padding: 0px 10px 2px 2px;
}
/*News
*/
.list_with_dots { list-style-type: circle; padding: 0; font-size: 0.7em; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.5em; margin: 0.25em 0; }
.index_table { color: #5f7999; line-height: 100%; background-color: #d9dde3; text-decoration: none; width: 100%; float: left; clear: none; }
.index_table td, .index_table th { color: #cfd5cf; vertical-align: text-top; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }
.index_table h1 { text-align: left; font-size: 1em; background-color: #d9dde3; margin-bottom: 0; }
.index_table h1 a , .index_table h1 a:visited , .index_table h1 a:active , .index_table h1 a:hover {
	color: #32517b;
}
.index_table td { width: 33%; }
.index_table h2 {
	text-align: left;
	font-size: 0.8em;
}
.index_table h2 a , .index_table h2 a:visited , .index_table h2 a:active , .index_table h2 a:hover {
	color: #5f7999;
}
.index_table p {
	text-align: left;
	font-size: 0.7em;
	color: #61646e;
	margin-bottom: 0;
}
.index_table ul , .index_table li {
	text-align: left;
	font-size: 0.9em;
	color: #000000;
	margin-bottom: 0px;
}
.index_table ul ul {
	border-bottom: 1px solid #fff;
 	padding-bottom: 10px;
	margin-bottom: 10px;
}
#Short_Nav ul, #Short_Nav li { font-size: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; margin-left: 1em; }

http://www.htcd.org/Assets/Calendar/ipopeng.htm
http://www.htcd.org/Assets/Calendar/contrast.css

/*===== CSS theme file for CalendarXP 8.0 (Totally configurable) =====*/
/* NOTE: Better use numbered color values instead of literal ones, because opera has problem with the latter in certain cases. */

/* Calendar Day Header - the cells showing "Sunday", "Monday" .... */
.CalHead {cursor:default; text-align:center; font:8.5pt verdana; color:#000000; border-bottom:1px solid #808080;}
/* Day Cell - the calendar cell of each day */
.CalCell {cursor:hand; text-align:center;}
/* Day Number Anchor style */
.CellAnchor {text-decoration:none; font:bold 7pt verdana;}

/* WeekNo Header - the top header cell of the week number column */
.WeekHead {cursor:default; text-align:center; font:8.5pt verdana; color:#000000;}
/* WeekNo Column Cell - the cells of the week number column */
.WeekCol {cursor:default; text-align:center; font:8pt verdana;}

/* Month navigators - the "<" or ">" used to move to previous or next month */
.MonthNav {vertical-align:baseline;}
A.MonthNav:hover {color:yellow}
A.MonthNav:active {color:red}

/* styles for the 3 calendar sections (actually 3 table TDs) */
.CalTop {text-align:center;}
.CalMiddle {}
.CalBottom {text-align:center;}

/* Calendar title - showing year and month. when giDCStyle=0, it's the style of the year/month dropdowns; giDCStyle>0, it's the style to show gsCalTitle.  */
.CalTitle {text-align:center; font:8pt verdana; cursor:default; color:white; background-color:gray; border:1px solid black; width:68%;}

/* The style of internal floating div/layer tags, which are usually used to create the artificial dropdown selectors. */
.FreeDiv {border:1px solid #808080;}

/* The style of the outer TABLE tag which is the outer calendar panel. */
#outerTable {border:2px solid black;}
/* The style of the inner DIV tag that holds the inner panel of all calendar cells. */
#innerDiv {}
/*===== Above CSS styles are commonly used in the script engine =====*/

/*====== Following are additional per-theme styles, e.g. the inner dropdown selectors and today etc. You may have your own defined. ======*/
.Today {font:8pt arial; color:black;}
A.Today:hover {color:orange;}
A.Today:active {color:red;}
.BottomDiv {border-top:1px solid #696969; border-top-width:1px; height:16px;}

.PopAnchor {text-decoration:none; color:white;}
A.PopAnchor:hover {color:yellow;}
A.PopAnchor:active {color:red;}
.PopMenu {background:white; text-align:center; cursor:hand;}
.PopMenuItem {text-decoration:none; text-align:center; font:8pt arial; color:#000000;}

http://www.mmost.co.uk/Assets/Calendar/ipopeng.htm
http://www.mmost.co.uk/Assets/Calendar/contrast.css

/*===== CSS theme file for CalendarXP 8.0 (Totally configurable) =====*/
/* NOTE: Better use numbered color values instead of literal ones, because opera has problem with the latter in certain cases. */

/* Calendar Day Header - the cells showing "Sunday", "Monday" .... */
.CalHead {cursor:default; text-align:center; font:8.5pt verdana; color:#000000; border-bottom:1px solid #808080;}
/* Day Cell - the calendar cell of each day */
.CalCell {cursor:hand; text-align:center;}
/* Day Number Anchor style */
.CellAnchor {text-decoration:none; font:bold 7pt verdana;}

/* WeekNo Header - the top header cell of the week number column */
.WeekHead {cursor:default; text-align:center; font:8.5pt verdana; color:#000000;}
/* WeekNo Column Cell - the cells of the week number column */
.WeekCol {cursor:default; text-align:center; font:8pt verdana;}

/* Month navigators - the "<" or ">" used to move to previous or next month */
.MonthNav {vertical-align:baseline;}
A.MonthNav:hover {color:yellow}
A.MonthNav:active {color:red}

/* styles for the 3 calendar sections (actually 3 table TDs) */
.CalTop {text-align:center;}
.CalMiddle {}
.CalBottom {text-align:center;}

/* Calendar title - showing year and month. when giDCStyle=0, it's the style of the year/month dropdowns; giDCStyle>0, it's the style to show gsCalTitle.  */
.CalTitle {text-align:center; font:8pt verdana; cursor:default; color:white; background-color:gray; border:1px solid black; width:68%;}

/* The style of internal floating div/layer tags, which are usually used to create the artificial dropdown selectors. */
.FreeDiv {border:1px solid #808080;}

/* The style of the outer TABLE tag which is the outer calendar panel. */
#outerTable {border:2px solid black;}
/* The style of the inner DIV tag that holds the inner panel of all calendar cells. */
#innerDiv {}
/*===== Above CSS styles are commonly used in the script engine =====*/

/*====== Following are additional per-theme styles, e.g. the inner dropdown selectors and today etc. You may have your own defined. ======*/
.Today {font:8pt arial; color:black;}
A.Today:hover {color:orange;}
A.Today:active {color:red;}
.BottomDiv {border-top:1px solid #696969; border-top-width:1px; height:16px;}

.PopAnchor {text-decoration:none; color:white;}
A.PopAnchor:hover {color:yellow;}
A.PopAnchor:active {color:red;}
.PopMenu {background:white; text-align:center; cursor:hand;}
.PopMenuItem {text-decoration:none; text-align:center; font:8pt arial; color:#000000;}