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: #55669c; font-weight: 700; text-decoration: none; }
	
a:visited { color: #649ed0;
	/*color:  #333333;*/
	}
a:hover {
	/*color: #333333;*/
	color: #1f2b20; text-decoration: none; }
a:active {  
	/*color:  #333333;*/
	}

* html a.external {
text-decoration : none;
border-bottom : 1px dotted #cfcfcf;
}


a[rel="external"] {
padding-right : 9px;
background : url(icon-external.gif) no-repeat right center;
text-decoration : none;
}


strong, b { color: #454645; font-weight: bold; }
p { color: #606163; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1.6; 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.6em; font-family: Arial, Helvetica, sans-serif; color: #fff; font-weight: 100; text-decoration: none; left: 2em; }
h2 { font-size: 0.9em; line-height: 1em; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; color: #454645; font-stretch: ultra-condensed; }
h3 { font-size: 0.8em; margin-top: 0; margin-bottom: 0; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; color: #454645; line-height: 1.8em; }
h4 {
	font-size: 0.8em;
	margin-top: 0;
	margin-bottom: 0;
	color: #454645;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	}
h4:link , h4:visited  , h4:hover , h4:active{
	color: #808080;
	}
h5 { font-size: 0.8em; margin-top: 0; margin-bottom: 0; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; color: #55669c; line-height: 1.8em; }
h6 { font-size: 0.8em; margin-top: 0; margin-bottom: 0; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; color: #ae0000; line-height: 1.8em; }

ul { color: #808080; list-style-type: none; margin: 0.25em 0; padding: 0; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1.5em; }

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(llmedia-banner.jpg); background-repeat: no-repeat; background-position: left top; width: 800px; height: 122px; }
#TopLine {
	float: left;
}
#Navbox {
	position: absolute;
	height: 3.em;
	width: 800px;
	z-index: 20;
	top: 6.5em; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	top: 6.5em;
	}
html>body #Navbox {
	top: 6.5em /* ie5win fudge ends */
}

#masthead h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; color: #fff; position: relative; left: 7.75em; bottom: -1em; 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-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 0.8em; color: #fff; line-height: 1.3em; text-align: right; padding-top: 15px; margin-bottom: -1.6em; padding-right: 33px; margin-top: 0; }

#left .phonenumber { font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 1.3em; margin-bottom: -2em; color: #fff; text-align: right; margin-top: 1em; margin-right: 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: "Lucida Grande", 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: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 0.8em; height: 1.25em; visibility: hidden; margin: 0; }
#topbar {
	margin: 0;
	padding: 0;
	height: 100px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 80px;
	}
html>body #topbar {
	height: 120px; /* ie5win fudge ends */
	}
/* styles for the drop down navigation  */

#nav, #nav ul { font-size: 1.1em; 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.45;  /* makes sure 2nd level drop downs line up */
	padding: 0;  /* Aligns origional list to left */
	font-weight: normal;  /* Font weight for top level items */
	width: 100%;  /* Width of entire navigation bar */
	margin: 0 0 4px;  /* Gap between nav menu and content beneath it */
	text-decoration: none; height: 24px; }


#nav a { display: block;  /*  */
	width: 8.5em;   /* Top level list width (Text width) */
	w\idth: 100%;  /* Top level list width  IE BOX model hack*/
	text-decoration: none;  /*  removes underlines from all links*/
	padding: 0.25em 0.5em;  /* Controls padding of all links in navigation */
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;  /* font of all links in navigation */
	font-weight: normal;  /* Font weight for all linked items */
	height: auto; color: #fff; 
	font-size: 0.6em; 
	background-color: #55669c; 
	border-right-color: #7ab51d; 
	border-right-width: 1px; }

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

#nav li { color: #fff; background-color: #55669c; text-decoration: none; float: left;  /* Aligns top level tabs to left */
	width: 6em; border-right-color: #7ab51d; border-right-width: 1px; /* Right border colour*/
}

/* Drop down bits  */
#nav li ul { color: #fff; 
font-size: 100%; 
left: -999em; 
width: 8.5em; 
w\idth: 8.5em; 
position: absolute; 
height: auto; 
line-height: 0.7em; 
text-decoration: none; 
visibility: visible; 
}

#nav li li { text-decoration: none; padding-right: 1em;  /* Padding to right of drop downs */
	width: 7.9em ;  /* border colour and design within drop downs */
}

#nav li ul a { text-decoration: none; width: 8.5em;  /*  Text width on drop downs */
	w\idth: 7.9em; }

#nav li ul ul { text-decoration: none; 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 { background-color: #649ed0; text-decoration: none; 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 { background-color: #649ed0; text-decoration: none; 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 */
	background: #649ed0; text-decoration: none;   /*Orange background colour of drop downs when hovered over */

}	
#nav li a:hover{ color : #fff; background-color: #649ed0; text-decoration: none;	/* Colour of drop down text colour when hovered over*/
}

/*Left & Right columns*/
#leftbar {
	position: absolute;	
	voice-family: "\"}\"";
	voice-family:inherit;
	top: 6.9em;
	left: 0;
	margin: 1em 5px 5px;
	padding: 0;
	width: 160px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 150px;
	}
html>body #leftbar {
	width: 160px; /* ie5win fudge ends */
	top: 6.2em; /* ie5win fudge ends */}
#rightbar {
	position: absolute;
	top: 6.9em;
	right: 15px; /* Opera5.02 will show a space at right when there is no scroll bar */
	margin: 1em 0 5px;
	padding: 0;
	width: 160px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 150px;
	}
html>body #rightbar {
	width: 160px; /* ie5win fudge ends */
}
/*Main content
*/
#middlebar { background-color: transparent; top: 7em; margin: 17px 185px 5px 175px; }	
	
#Content { background-color: transparent; position: relative; margin: 3px 16px 6px 20px; 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 2em 0.8em; }
.underbox { font-size: 0.85em; line-height: 90%; background-color: transparent; position: relative; top: 0; left: 0; float: left; margin-right: 3em; }
#Content ul{
	list-style-type: disc;
}

#PageTitle { background-color: #9bbfe1; margin: 20px 0 5px; width: 420px; padding-top: 5px; padding-right: 18px; padding-bottom: 0; }
#PageTitle h1{ font-size: 1.6em; line-height: 1em; margin-bottom: 0.1em; margin-left: 17px; padding-bottom: 0.5em; }
#PageTitle h6 {
	font-size: 0.6em;
	line-height: 1em;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: normal;
}
#PageTitle img {
	position: relative;
	left: 0px;
	top: 0px;
	margin-left: -10px;
	margin-bottom: -5px;
}


#leftbar a,
#leftbar a:hover {
color: inherit;
font-weight: inherit;
}

.infoboximg {
	float: left;
	clear: none;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: -170px;
	z-index: 10;
	}
.specsubsec

{

	border: thin #0000AA solid;

	background-color:#C0C0FF;

	font-family: "Lucida Grande", Arial, Helvetica;

	font-size: 8pt;

	text-align: left;

	text-indent: 0px;

/*	font-weight: bold; */

}
tr.ch {	border: thin #0000AA solid; background-color:#C0C0FF; font-family: "Lucida Grande", Arial, Helvetica; font-size: 8pt; text-align: left; text-indent: 0px;}

td.l {text-align: left; border-left: 1px solid lightgrey; border-right: 1px solid lightgrey; border-bottom: 1px solid lightgrey;}

td.r {text-align: right;  border-left: 1px solid lightgrey; border-right: 1px solid lightgrey; border-bottom: 1px solid lightgrey;}

td.c {text-align: center; border-left: 1px solid lightgrey; border-right: 1px solid lightgrey; border-bottom: 1px solid lightgrey;}

th.r {text-align: right;}

th.c {text-align: center; }

tr.rev {background-color: #C0C0FF;}

/*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 { margin-top: 10px; margin-bottom: 12px; width: 165px; padding: 10px 0; }

.NavBox a { color: #6d79a9; text-decoration: none; }

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

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

.NavBox h1 { font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 1.1em; color: #fff; line-height: 1.5em; background-color: #6d79a9; background-attachment: scroll; background-position: center top; margin-top: 5px; padding-left: 5px; }

.NavBox h2 { font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 90%; color: #6d79a9; line-height: 100%; margin: 0; padding: 2px 5px 0 10px; }

.NavBox h3 {
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #636363;
	margin-bottom: 0.25em;
	margin-top: 0;
	padding: 2px 5em 0 10px;
	font-weight: bold;
}
.NavBox p { color: #636363; list-style-type: none; margin: 10px 0 0; padding: 2px 5px 0 10px; font-size: 70%; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; }

.NavBox img {
	float: right;
	padding: 0px 10px 2px 2px;
}
/*NavBoxBlue*/
.NavBoxBlue { background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-position: center bottom; margin-top: 0; margin-bottom: 5px; width: 165px; padding-top: 10px; padding-bottom: 15px;
	background;
}

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

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

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

.NavBoxBlue h1 { font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 0.8em; color: #52801a; font-weight: 900; margin-bottom: 0; margin-top: -0.85em; padding: 2px 5px 0 10px; line-height: 1; text-decoration: none; }

.NavBoxBlue h2 {
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #81a6d5;
	margin-bottom: 0;
	margin-top: 0;
	padding: 2px 5px 0 10px;
}
.NavBoxBlue h3 {
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #333333;
	margin-bottom: 0.25em;
	margin-top: 0px;
	padding: 2px 5px 0px 10px;
	font-weight: bold;
}
.NavBoxBlue p {

	list-style-type: none;
	margin: 0px;
	padding: 2px 5px 0px 10px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.6em;
}
.NavBoxBlue img {
	float: right;
	padding: 0px 10px 2px 2px;
}
/*News
*/
.list_with_dots { list-style-type: circle; padding: 0; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 1.5em; margin: 0.25em 0; }
.index_table { color: #1f2b20; line-height: 100%; background-color: #9bbfe1; 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: #9bbfe1; margin-bottom: 0; }
.index_table h1 a , .index_table h1 a:visited , .index_table h1 a:active , .index_table h1 a:hover {
	color: #1f2b20;
}
.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: #1f2b20;
}
.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: 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;}
 color:#000000;}




nter; font:8pt arial; color:#000000;}
 color:#000000;}




 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;}
 color:#000000;}




nter; font:8pt arial; color:#000000;}
 color:#000000;}




:#000000;}




nter; font:8pt arial; color:#000000;}
 color:#000000;}