html,
body {
	margin:0;
	padding:0;
	height:100%; /* 100 % height */
}
html>body #wrap {height:100%;} /* 100 % height */
#header {
	width:100%;
	height:5em;
}
html>body #header {
	position:fixed;
	z-index:10; /* Prevent certain problems with form controls */
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:8em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
	width:100%;
	height:5em;
}
html>body #footer {
	position:fixed;
	bottom:0;
	z-index:10; /* Prevent certain problems with form controls */
}

/* Styling to make this demo page look just a little bit better */
/* The 'background' property is needed here to have color when scrolling. */
body {font:76%/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; background:#ECD672}
h1,
h2 {
	margin:0.25em 0;
	font:normal 1.5em/1.1 "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
	text-align:center;
	letter-spacing:1px;
}
p {margin:1em 0;}
.info {
	position:relative;
	width:40em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#fff;
}
.info2 {
	position:relative;
	left: -14%;
	width:50em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#ccf;
}
.info2leftbtm {
	position:relative;
	left: -9.9em;
	bottom: -0.1em;
	width:50em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#ccf;
}
.info2long {
	position:relative;
	width:69.9em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#ccf;
}
.info2-5 {
	position:relative;
	left: -9.9em;
	width:50em;
	margin:0 auto;
	padding:0.5em;
	border:2px dashed #999;
	background:#BCE954;
}
.info3 {
	position:relative;
	width:100em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#ccf;
}
.info4 {
	position:relative;
	left:-2px;
	width:56em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#BCE954; <!-- cool yellow: ffff00 -->
}
.info4img {
	position:relative;
	height:15em;
	width:15em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#F87431;
}
.info5 {
	position:relative;
	height:1.2em;
	width:59.5em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#806D7E;
}
.info5left {
	position:relative;
	left: -3.4em;
	height:1.3em;
	width:80em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#ffff33;
}
.info6 {
	position:relative;
	left:-91px;
	width:35em;
	height:9.3em;
	margin:0 auto;
	padding:0.5em;
	border:2px solid #999;
	background:#ccf;
}
a:link,
a:visited {
	border-bottom:1px dotted;
	color:#AE4F0C;
	font-weight:normal;
	text-decoration:none;
}
a:focus,
a:hover {
	border-bottom-style:solid;
	color:#D03900;
}
a.anchor:link,
a.anchor:visited {
	border-bottom:1px dotted;
	color:#ffffff;
	font-weight:normal;
	text-decoration:none;
}
a.anchor:focus,
a.anchor:hover {
	border-bottom-style:solid;
	color:#EBDDE2;
}
#header,
#footer {
	color:#111;
	background:#ddd;
	text-align:center;
}
#footer a {color:#111;}
dl.style{
	position:relative;
	left: 0%;
	width: 70em;
	padding-top: 5px;
	margin-top: 0;
	padding-bottom: 10px;
	margin-bottom: 0;
	padding-left: 5px;
	padding-right: 5px;
	border-top:2px solid #999;
	border-left:2px solid #999;
	border-right:2px solid #999;
	border-bottom:2px solid #999;
	background:#ccf;
}
dt.style{
	padding-top: 0.5em;
}
ul.disc {
	list-style-type: disc;
	padding-top: 0.5em;
	padding-left: 20px;
	margin-left: 10px;
}
li.style{
	padding-top: 0.5em;
}