BODY {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}


/* Menu panel structure ------------------------------------------------ */

/* Menu structure is based on example created by Mark Newhouse,
	as explained in http://www.alistapart.com/articles/taminglists/ 
	*/
#menuPanel {
	width: 12em;
	border-right: 1px solid #000;
	padding: 0 0 1em 0;
	margin-bottom: 1em;
	font-family: 'Trebuchet MS' , 'Lucida Grande' , Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	background-color: #90bade;
	color: #333;
}

/* The first rule is for the #menuPanel DIV. It defines the space that the menu will
 occupy, and provides a context for the menu so that we can define the way the list
 and links will behave inside the DIV. I chose to make the menu fluid, based on the
 browser’s font size preferences, so (almost) all units are in ems. This includes
 the width of the menu. The solid black border on the right was based on the original
 design. The bottom padding is there to extend the DIV down beyond the menu of links
 so that you can see the background of the DIV. 
 The bottom margin is to separate the DIV from what follows it.
*/
#menuPanel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

#menuPanel li {
	border-bottom: 1px solid #90bade;
	margin: 0;
}

/* Next I defined what the list will look like. Since all the list items were to be
 links, and the rollover functionality would be built into the CSS for the links, I
 essentially removed all styling from the lists. I did add a single pixel border on
 the bottom of each link that matched the background of the #menuPanel DIV, to work as
 the separator.
*/

#menuPanel li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%;
}

ul#navigation li#youarehere a {
	background-color: #9cf;
}
html > body #menuPanel li a {
	width: auto;
}

#menuPanel li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
}

/* Finally, I defined the links. The original design has 10 pixel borders on the right
 and left. These borders, along with the background, change color on the rollover. This
 is a relatively simple thing to control with the :hover pseudo-class in CSS, so I put
 this style into the anchor styles.

 There is one workaround in this part of the style sheet. To make the links active for
 the full width of the DIV, I made them display: block;. This works for everything but
 IE/Windows. If you give the block an explicit width of 100%, then IE/Windows plays along.
 But doing this creates problems with IE5/Mac and Netscape/Mozilla. So I used the child
 selector“>” to redefine the width to auto. Since IE/Windows doesn’t understand child
 selectors, it ignores the rule. IE5/Mac, Opera and Netscape/Mozilla follow the rule,
 and everyone is happy.

 The rule for the :hover pseudo-class creates the color changes on the backgrounds and
 borders when the links are moused over.
*/


#Principal {
	padding: 10px;
	color: Black;
	background-color: #9cf;
	text-align: center;
	height: 60px;
	vertical-align: middle;
	font-size: 200%;
	font-style: italic;
}

/* Content panel structure --------------------------------------------- */
#menuPanel, #content {
	position: absolute;
	padding: 20px;
}
#menuPanel, #content {
	top: 95px;
	background-color:White;
}

#content {
	left: 260px;
}

/* ===================================================================*/