html
#mydiv { 
width: expression((document.body.clientWidth>1024 ¦¦ window.innerWidth>800?"780px":"100%")); 
}

body {
	color:#333;
	background-color:#eee;
	margin:20px;
	margin-right:20px;
	min-width: 650px;
	max-width: 1024px;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:22px;
	font-weight:600;
	color:#666;
	}
h2 {
	font:normal 18px/20px verdana, arial, helvetica, sans-serif;
	font-weight:220;
	margin:0px 0px 5px 0px;
	padding:0px;
	}
h3 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:18px;
	font-weight:600;
	color:#666;
	}
p {
	font:normal 11px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}

a {
	color:#666;
	font-size:11px;
	font-weight:bold;
	font-family:verdana, arial, helvetica, sans-serif;
	text-decoration:none;
	}
	a:link {color:#fff; text-decoration:none;}
	a:active {color: #fff}
	a:visited {color:#fff;
	border-bottom: none;}
	a:hover {border-bottom: 1px dashed; color: #06275c;}
	
/* All the content boxes belong to the content class. */
.content {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:auto;
	min-width:120px;
	margin:17px 210px 20px 170px;
	border:1px solid #06275c;
	color:#666;
	background-color:#fff;
	padding:10px;
	z-index:100; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}
.content2 {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:581px;
	height:202px;
	min-width:120px;
	margin:17px 210px 20px 170px;
	border:1px solid #06275c;
	color:#666;
	background-color:#fff;
	padding:0px;
	z-index:80; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}
	.content3 {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:581px;
	height:300px;
	min-width:120px;
	margin:17px 210px 20px 170px;
	border:1px solid #06275c;
	color:#666;
	background-color:#fff;
	padding:0px;
	z-index:80; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}
.content4 {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:581px;
	height:300px;
	min-width:120px;
	margin:17px 210px 20px 170px;
	border:1px solid #06275c;
	color:#666;
	background-color:#fff;
	padding:0px;
	z-index:80; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}
	.content5 {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:581px;
	height:400px;
	min-width:120px;
	margin:17px 210px 20px 170px;
	border:1px solid #06275c;
	color:#666;
	background-color:#fff;
	padding:0px;
	z-index:80; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}

#navAlpha {
	position:absolute;
	width:134px;
	top:184px;
	left:20px;
	border:1px solid #06275c;
	background-color:#ff9900;
	color:#fff;
	padding:8px;
	z-index:100;
}
a {
	color:#fff;
	font-size:10px;
	font-weight:bold;
	font-family:verdana, arial, helvetica, sans-serif;
	text-decoration:none;
	border-bottom: none;
	}
a:link {color:#fff;
	text-decoration:none;
	font-size:10px;}
a:visited {color:#fff;
	border-bottom: none;
	font-size:10px;}
a:hover {border-bottom: 1px dotted;
	font-size:10px;color:#06275c;}
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:128px;
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:128px;}
		
#navBeta {
	position:absolute;
	width:170px;
	top:184px;
	right:20px;
	border:1px solid #06275c;
	background-color:#0070af;
	color:#fff;
	padding:10px;
	z-index:90;
	}

#lower {
position:relative;
	margin:120px 0px 0px 0px;
}
#higher {
position:relative;
	margin:-20px 0px 0px 0px;
}

#header{
	background: #fff;
	border:1px solid #06275c;
	padding: 0px;
	float:left;
	position:relative;
	margin:-120px 0px 18px 0px;
	width:100%;}

#footer{
	position:relative;
	clear:both;
	width:100%;
	background: #fff;
	padding:5px 5px;
	margin:0px -5px;
	margin-bottom:0;
	margin-top:0;
	text-align:center;
	font-size:10px;
	color: #666;}
	
/* Menu styles below */


/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {margin:140px 0px 10px 0px; position:relative; width:100%; background:#06275c; height:27px; z-index:1000;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:110px; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #06275c; border-width:1px 0 1px 1px;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {background:#06275c; float:left; min-height:25px; width:111px;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#ff9900; color:#fff;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {visibility:hidden; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {visibility:visible;}
/* Position the first sub level beneath the top level links */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:1; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#ff9900; color:#fff;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#ff9900; color:#fff;}

/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:101px; w\idth:100px;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#0070af url(fly.gif) no-repeat right center;}
#pmenu li.drop {background:#0070af url(drop.gif) no-repeat right center;}

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels */

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */