/*
Anna Magenheimer
*/

html {
	background: #96A183;
}

body {
	margin: 0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 13px;
	line-height: 1.5em;
	display: table;
	background: url(../IMAGES/htc_body_bg.jpg) repeat-x;
}

a:link, a:visited {	color: #494949; text-decoration: none; }
a:active, a:hover { color: #000000; text-decoration: none; }

#inline
{
	color:#000066;
	font-weight: bold;
	text-decoration:underline;
}

#htc_container {
	width: 887px;
	margin-left: 232;
	height: 240px;
}

#htc_header {
	width: 887px;
	height: 136px;
	background: url(../IMAGES/htc_header_bg.jpg);
}

#htc_logo {
	float: left;
	width: 544px;
	height: 71px;
	background: url(../IMAGES/htc_logo_bg.jpg);
	margin: 61px 0 0 180px;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	
}

#htc_logo h1 {
	font-family: "Script MT Bold";
	color: #ffffff;
	font-size: 40px;
	margin: 15px 0 0 95px;
	padding: 0;
}

#htc_text_header h1 {
	font-family: "Script MT Bold";
	font-color: #85A737;
	font-size: 20px;
}

#htc_logo h2 {
	color: #ffffff;
	font-size: 25px;
	margin: 15px 0 0 145px;
	padding: 0;
}

/* Menu */
#htc_menu {
	float: right;
	height: 41px;
	width: 560px;
	margin: 60px 0 0 0;
	padding: 0;
}

#htc_menu ul {
	clear: both;
	float: right;
	list-style: none;
	display: inline;
}

#htc_menu li {
	float: left;
}

#htc_menu li a {
	float: left;
	display: block;
	color: #fff;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 12px;
	margin: 0 10px 0 0; 
	padding: 0 0 0 5px;
	height: 41px;
	line-height: 33px;
	text-align: center;
	cursor: pointer;
}

#htc_menu li a b {
	float: left;
	display: block;
	height: 38px;
	padding: 3px 15px 0 11px;
}

#htc_menu li.current a, #htc_menu li a:hover {
	background: url(../IMAGES/htc_menu_left.png) no-repeat;
	color: #fff;
}

#htc_menu li.current a b, #htc_menu li a:hover b {
	background: url(../IMAGES/htc_menu_right.png) right top no-repeat;
}

/*End OF menu*/

#right_nav {
	width: 200px;
	margin: 1px 0 0 0;
	padding: 0 0 20px 0;
}




#htc_content_area_top {
	width: 887px;
	background:url(../IMAGES/htc_content_area_top.jpg) #fff   no-repeat;
	margin: 1px 0 0 0;
	padding: 0 0 0 0;
}


/* current page */
#breadcrumb {
        margin-left: 35px;
	color: #006;
		font-weight: bold;
		font-family:Arial, Helvetica, sans-serif, Verdana;
		font-size: 12px;
	}
	
/* center page */
#breadcrumb a:link {
	color: #152032;
	text-decoration: none;
		font-family:Arial, Helvetica, sans-serif, Verdana;
		font-size: 12px;
	}
	
/* home page */
#breadcrumb a:visited {
	color: #006006;
	text-decoration: none;
		font-family:Arial, Helvetica, sans-serif, Verdana;
		font-size: 12px;
	}

.htc_read_more_container {
	width: 887px;
	margin: 0px 0 30px 0px;
	background-color:#d1dabf;
}

.htc_read_more {
	width: 780px;
	margin: 0 0 0 20px;
	background-color:#d1dabf;
}

.htc_left_top {
	float: left;
	width: 367px;
	margin: 75px 0 0 10px;
}

.htc_right_top {
	float: right;
	width: 497px;
	height: 240px;
	background: url(../IMAGES/htc_right_content.png) no-repeat;
	margin: 110px 5px 0 0; 
}

.htc_right_top img {
	margin: 7px 0 0 7px;
}

.padding 
{
	padding: 0px 15px 5px 0px;
}

.htc_news {
	width: 337px;
	min-height: 35px;
	background: url(../IMAGES/htc_news.jpg) no-repeat #fff;
	padding: 15px;
}

.htc_news p {
	background: url(../IMAGES/htc_news_bullet.png) no-repeat;
	padding: 0 0 0 30px;
	color: #518101;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 12px;
	text-align: left;
	margin: 0;
}

#htc_content_area_bottom {
	width: 887px;
	height="100%";
	background:url(../IMAGES/htc_content_area_bottom.jpg) bottom #fff   no-repeat;
	margin: 0;
	padding: 0 0 20px 0;
}

.htc_left_section {
	float: left;
	width: 347px;
	margin: 0 0 0 20px;
}

.htc_title {
	width: 332px;
	height: 28px;
	background: url(../IMAGES/htc_title_bg.jpg);
	font-family: "Trebuchet MS", Tahoma, Verdana;
	font-size: 16px;
	color: #006600;
	font-weight: bold;
	margin: 0 0 5px 0;
	padding: 11px 0 0 15px;
}



#htc_logo h3 {
	font-family: "";
	color: #ffffff;
	font-size: 12px;
	margin: 15px 0 0 75px;
	padding: 0;
}


.htc_section {
	width: 347px;
	margin: 0 0 10px 0;
}

.htc_section_top {
	width: 347px;
	height: 13px;
	background: url(../IMAGES/htc_section_top.jpg);
}

.htc_section_mid {
	width: 347px;
	background: url(../IMAGES/htc_section_mid.jpg);
}

.htc_section_mid p {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 12px;
	color: #5a5a5a;
	text-align: left;
	margin: 0 15px;
}

.htc_img_frame {
	float: left;
	width: 115px;
	height: 120px;
	background: url(../IMAGES/htc_img_frame.jpg);
	margin: 0 10px;
}

.htc_img_frame3 {
	float: left;
	width: 113px;
	height: 125px;
	background: url(../IMAGES/htc_img_frame.jpg);
	margin: 0 10px;
}


.htc_img_frame img {
	margin: 9px 0 0 18px;	
}

.htc_section_bottom {
	width: 347px;
	height: 11px;
	background: url(../IMAGES/htc_section_bottom.jpg);
}

.htc_right_section {
	float: right;
	width: 479px;
	margin: 0 13px 0 0;
}

.tempatemo_section_box_1 {
	width: 479px;
	background: url(../IMAGES/htc_right_title_1.jpg) #dbdbdb no-repeat;
	margin: 0 0 0 0;
	padding: 15px 0 10px 0;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size:12px;
}

.tempatemo_section_box_2 {
	width: 479px;
	background: url(../IMAGES/htc_right_title_2.png) #dbdbdb no-repeat;
	margin: 0 0 0 0;
	padding: 15px 0 10px 0;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size:12px;
}

.tempatemo_section_box_1 h1 {
	font-size: 17px;
	color: #fff;
	font-weight: bold;
	margin: 0 0 15px 20px;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size:12px;
}

.tempatemo_section_box_1 h3 {
	font-size: 14px;
	color: #006600;
	font-weight: bold;
	margin: 0 0 15px 20px;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size:12px;
}

.tempatemo_section_box_1 h2 {
	font-size: 13px;
	font-variant: small-caps;
	color: #ffffff;
	font-weight: bold;
	margin: 0 0 15px 20px;
	font-family: "Trebuchet MS", Tahoma, Verdana;
}

.tempatemo_section_box_1 p {
	font-size: 12px;
	color: #5a5a5a;
	text-align: left;
	margin: 5px 20px;
}

.tempatemo_section_box_2 h1 {
	font-size: 16px;
	font-variant: small-caps;
	color: #fff;
	font-weight: bold;
	margin: 0 0 15px 20px;
}

.tempatemo_section_box_2 p {
	font-size: 12px;
	color: #5a5a5a;
	text-align: left;
	margin: 5px 20px;
}

.tempatemo_section_box_2 img {
	vertical-align: top;
	margin: 0 15px;
	border: none;
}

.tempatemo_section_box_2 .margin_none {
	margin: 0;
}

.tempatemo_section_box_2 .margin_left {
	margin: 0 15px 0 20px ;
}

.tempatemo_section_box_2 .margin_right {
	margin: 0 15px 0 0 ;
}

.tempatemo_right_bottom {
	width: 479px;
	height: 12px;
	background: url(../IMAGES/htc_right_bottom.jpg);
}

#table_left {
    float: left;
    width: 210px;
	padding: 0px 5px 0px 0px;
}
#table_right {
    float: left;
	width: 220px;
	padding: 0px 5px 0px;
	}

a:link {
	color: #063;
}

a:visited {
	color: #063;
}

#navlist li
    { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #00CC33;
text-decoration: none;
background-color: #CCCCCC;
text-indent: 5px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;
padding: 6px;
margin: 2px;
	}



#htc_footer {
	margin: 20px 0;
	padding: 20px;
	font-size: 16px;
	color: #000000;
	font-family: "Trebuchet MS", Tahoma, Verdana;
	text-align: center;
	font-style:italic;
	font-weight: bold;
}


#htc_footer a {
	font-weight: bold;
	color: #000000;
}

.cleaner {
	clear: both;
	height: 0;
	margin: 0;
	padding: 0;
}

.navcontainer_indent
{
margin: 5px;
padding: 0px 0px 0px 20px;
margin-bottom: 0px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.thumbnail_center{
position: relative;
z-index: 0;
}

.thumbnail_center:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail_center span{ /*CSS for enlarged image*/
position: absolute;
padding: 2px 2px 2px 2px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_center span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_center:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -50px;
left: -450px; /*position where enlarged image should offset horizontally */
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.thumbnail_right{
position: relative;
z-index: 0;
}

.thumbnail_right:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail_right span{ /*CSS for enlarged image*/
position: absolute;
padding: 2px 2px 2px 2px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_right span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_right:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -250px;
left: -750px; /*position where enlarged image should offset horizontally */
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.thumbnail_left{
position: relative;
z-index: 0;
}

.thumbnail_left:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail_left span{ /*CSS for enlarged image*/
position: absolute;
padding: 2px 2px 2px 2px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_left span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_left:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -350px;
left: -500px; /*position where enlarged image should offset horizontally */
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 2px 2px 2px 2px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -70px;
left: -25px; /*position where enlarged image should offset horizontally */
}

.thumbnail_single {
	height: 80px;
}
	

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif, Verdana;
	cursor: default;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
	height: 10px;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding-bottom: 1px;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 335px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	margin: -5% 0 0 95%;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	left: -1000em;
	top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 5px;
	
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 200px;
}


ul.navlist li { 
list-style-type: square; 
font-family:Arial, Helvetica, sans-serif, Verdana;
	font-size:12px;
	color: #5A5A5A;
	padding: 0px;
	}


ul.list_items
{
	font-family:Arial, Helvetica, sans-serif, Verdana;
	font-size:12px;
	color: #5A5A5A;
}
/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #8CAD45;
	padding: 0.5em 0.75em;
	color: #333;  /* font color */
	text-decoration: none;
	font-weight:bold;
	height: 15px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #CCC;  
	color: #000000;  /* font color */
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color: #C6E28B;  /* background rollover color for submenu */
	color: #006600; /* background bar when rolled over */
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(../IMAGES/rightarrow.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image: url(../IMAGES/button.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

ul.MenuBarVertical a.current
{
	color: #000066;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		float: left;
		background: #FFF;
	}
}

.style1 {	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-large;
	font-weight: bold;
	color: #003366;
}
.style2 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #003366;
	font-size: 12px;
}