html, body {
	margin: 0; padding: 0;
	overflow: auto;
	}

body {
	/* width: 100%; max-width: 100%; */
	background-color: #333;
	font: 0.8em Century Gothic, Swis721 BT, Arial, sans-serif;
	color: #ccc;
	line-height: 1.4em;
	top: auto;
	}

a {
	text-decoration: none;
	color: #0099ff;
	}

a:hover {
	text-decoration: none;
	color: #33ccff;
	}

#left {
	position: absolute; 
	top: 0; 
	left: 0; 
	overflow: hidden; 
	height: 100%; 
	width: 300px;
	text-align: right;
	background: #333 url('images/fade.jpg') no-repeat right;
	}

#outer {
	position: absolute;
	/* right: 540px;
	top: 170px; */ 
	width: 300px;
	height: 240px;
	margin-top: 60px;
	left: 0px;
	top: 0px;
	}

body > #left {
	position: fixed;
	}

#main {
	height: 100%;
	width: 500px;
	margin: 0px 20px 20px 330px;
	padding-top: 30px !important;
	/* overflow: visible; */
	}

h1 {
	display: block;
	margin-left: 40px;
	font: 800 35px 'century gothic', 'trebuchet ms', arial, sans-serif;
	color: #fff;
	text-align: left;
	}
	
h2 {
	padding: 0 30px 3px 0;
	color: #666666;
	margin: 0px 0px 20px 40px;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-size: 1.2em;
	line-height: normal;
	}
	
h3 {
	padding: 0;
	color: #fff;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-size: 1.4em;
	line-height: normal;
	}
	
span.title {
	display: block;
	margin: 0 0 5px 0;
	font: 600 1.4em 'century gothic', 'trebuchet ms', arial, sans-serif;
	color: #fff;
	}

img {
	background: transparent;
	}
.outline {
	border: 2px solid #666666; /* LINE: blue */
	}
.outline:hover {
	text-decoration: none;
	border: 2px solid #33ccff; /* LINE: blue */
	}
.noborder {
	text-decoration: none;
	border: 0px;
	margin-right: 10px;
	float: right;
	}

span.blue {
	color: #0099ff;
	}

span.cyan {
	color: #33ccff;
	}

a.nav {
	display: block;
	margin: 0;
	color: #fff;
	padding: 0 30px 5px 0;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	line-height: normal;
	}

a.nav:hover {
	color: #0099ff;
	background: #222;
	text-decoration: none;
	}

a.header {
	padding: 0 30px 3px 0;
	display: block;
	margin: 0;
	color: #aaa;
	padding: 0 30px 3px 0;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-size: 1.2em;
	line-height: normal;
	}
	
.title a, .title a:hover {
	display: block;
	margin: 0;
	color: #aaa;
	padding: 0 0 3px 40px;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-size: 1.2em;
	line-height: normal;
	}
	
.credit a, .credit a:hover {
	color: #555;
	}

.date {
	float: left; 
	width: 30px;
	font: 1.4em 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-weight: bold;
	padding-right: 0px;
	text-align: right;
	}

div.main {
	margin-left: 2.9em;
	margin-bottom: 25px;
	border-left: solid 1px #3a3a3a;
	padding: 0 30px 30px 5px;
	background: #333 url('images/corner.jpg') no-repeat bottom right;
	}

img.main {
	float: right;
	margin: 10px;
	padding: 4px;
	background: #0c0;
	border: solid 3px #2e2e2e;
	}

	a img.main:hover {
		background: #cf0;
		}

div.quote {
	margin: 8px 0 12px 10px; color: #fff;
	background: #2a2a2a url('images/quote.jpg') repeat-x top;
	border-bottom: solid 1px #2e2e2e; 
	border-right: solid 1px #2e2e2e; 
	border-left: solid 2px #0066cc;
	padding: 8px;
	line-height: 1.7em;
	}

p.top {
	font-size: 0.9em;
	text-align: right;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	}

span.credit {
	display: block;
	text-align: center;
	color: #555;
	margin: 5px 0 5px 0;
	font: 400 0.9em 'century gothic', 'trebuchet ms', arial, sans-serif;
	}
span.navbase {
	display: block;
	text-align: center;
	color: #888;
	margin: 15px 0 20px 0;
	font: 400 0.9em 'century gothic', 'trebuchet ms', arial, sans-serif;
	}