/*CSS Document*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Drop-down menu demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<!--LIST-BASED MENUS WITHOUT IDs OR CLASSES ON THE LIST ELEMENTS-->
<!-- tested in NN7, Opera, Firefox, IE6, IE5.5, IE5, on Windows and Safari and IE5 on Mac -->
<!--this continues the horizontal menu demo-->
<style type="text/css">
body {behavior:url(css/csshover2.htc);}
* {margin:0; padding:0;} 

/* the horizontal menu starts here */
div#hmltlistmenu {
	width:131px; padding:0 0 0 3px; margin-left:5px;
	float:left; /*makes the div enclose the list */
	border-top:0 solid black;	/* draws line on top edge of div */
	/*border-bottom:1px solid #069;	 /* draws line on bottom edge of div - removed as we now have dividers */
	font-size:100%;	/* SET FONT-SIZE HERE */ font-family:Georgia, "Times New Roman", Times, serif;
	background-color:#DB944C; /* colors the div */
	}
	
*html div#hmltlistmenu	{margin-left:3px}
	
div#hmltlistmenu ul {margin:0 0 0 0px;/* indents ul from edge of container - left changed to 0 */
	width:131px; padding:0; 
}
div#hmltlistmenu li {
	/*float:left;	/* causes the list to align horizontally instead of stack */ 	/*  *changed****/
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	background-color:#CC6600; /*sets the background of the menu items */
	border-right:1px solid #000; /* creates dividing lines between the li elements */
	border-left:1px solid #000; /*the first vertical line on the menu */	/*  *ADDED****/
	border-bottom:1px solid #000; /*dividers on the menu */	/*  *ADDED****/
	border-top:1px solid #000;  margin-left:0; padding:0 0 0 0;
	}
div#hmltlistmenu li:first-child {
	border-left:1px solid #000; /*the first vertical line on the menu */
	}
div#hmltlistmenu li:hover { 
	background-color:#DB944C; /*sets the background of the menu items */
	}
div#hmltlistmenu a {
	padding:2px 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#000;	/* sets the type color */
	font-weight:bold; display:block; margin-bottom:2px;
	}
div#hmltlistmenu a:hover {
	color:#000;
	}
/* the horizontal menu ends here */

/* the drop-down starts here */
div#hmltlistmenu ul li ul {
	margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
	margin-left:131px; /*  *ADDED**MOVES THE SUBMENU OVER TO BE TO THE RIGHT OF THE MAIN MENU **/
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:12em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	top:-1px; /* ADDED - ALLIGNS THE POP-OUT WITH ITS PARENT */
	left:-2px; /*aligns the drop exactly under the menu */
	}
div#hmltlistmenu ul li ul li {
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid #000; /*  three sides of each drop-down item */
	border-bottom:1px solid #000;
	border-right:1px solid #000;
	background-color:#CC6600; /* ADDED - sets the background of the submenu items */
	}
div#hmltlistmenu ul li ul li:first-child {
	border-top:1px solid #000; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#hmltlistmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#hmltlistmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

div#hmltlistmenu ul li ul li:hover ul {display:block;} /* shows the sub-drop-down when drop-down menu is hovered */
div#hmltlistmenu ul li:hover ul ul {display:none;} /* conceals the sub-drop-down when drop-down menu not hovered */

div#hmltlistmenu ul li ul li ul {left:0px;} /*aligns the sub-pop next to the pop - added for side version */

/* HACK ZONE - on hack only for IE */
* html div#hmltlistmenu ul li ul {
    border-top:1px solid #000; /*the top edge of the dropdown */
	}
* html div#listmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	margin-left:0; /* IE doubles the given value above - why? */
	}


/* END OF LIST-BASED MENU */

div#maininfoheading {margin-right:auto; margin-left:auto; font-size:160%; text-align:center; 
	font-weight:bold; margin-bottom:10px; clear:left;}

div#maininfo {font-size:100%; border-left:2px solid black; border-bottom:2px solid black; margin-left:auto; margin-right:auto;
	background-color:#DB944C; width: 95%; padding: 5px 0 8px 5px; margin-top: 5px;  }



div#maininfodate {font-size:130%; margin:6px 0 1px 0; text-align:center; font-weight:bold; text-decoration:underline;}

div#maininfo p {font-size:110%; margin:2px 0 2px 0; text-align:center; clear:none; }

div#maininfoimg {display:block; margin-right:auto; margin-left:auto; width:80%;}

div#maininfo ul {margin-left:10px; list-style-type:disc; padding:3px 5px 3px 1em; text-indent:0;}

div#maininfo li {padding:3px 0; list-style-position:outside;}

div#caption {font-size:80%; font-weight:bold; text-align:center; clear:both;}

