body {
	background: #454d63 url(bg_grad.png) left top repeat-x;
	padding-top: 1em;
	font-family: verdana;
}
#container {
	margin: 0 auto;
	width: 950px;
	padding-bottom: 50px;
}
h1 {
	font-size: 5.5em;
	color: white;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: bold;
	letter-spacing: -.07em;
	margin: 0 0 0 10px;
	background: url(ksmiletris.png) left bottom no-repeat;
	padding-top: 40px;
	padding-left: 136px;
	/* on top */
	position:relative;
	z-index: 1;
	text-shadow: 0 0 10px hsl(0, 0%, 55%);
}
h2 {
	margin: -.5em 0 .25em 0;
	font-size: 3em;
	width: 550px;
	color: #454d63;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: bold;
	letter-spacing: -.07em;
}
.content {
	background: white;
	padding: 2px;
	padding-bottom: 0;
	border-top: 1px solid #454d63;
	margin-right: 188px;
	position:relative;
	-webkit-box-shadow: 0 0 30px hsla(0, 0%, 0%, .25);
}
#nav {
	float: right;
	width: 188px;
	color: white;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	/* top aligned with content */
	padding-top: 1px;
}
#nav ul {
	font-size: 2em;
	margin:0;
	padding:0;
	list-style: none;
	text-align:left;
}
#nav a {
	display: block;
	padding-left: 30px;
	border-bottom: 2px solid #bec6ce;
	color: white;
	text-decoration: none;
	/* subtlety is the key */
	-webkit-box-shadow: -4px 3px 4px hsla(0, 0%, 0%, .1);
}
#nav a.currentpage {
	padding-left: 15px;
	border-left: 15px solid #ffa723;
}
#nav a:hover {
	padding-left: 15px;
	border-left: 15px solid #ffa723;
	text-decoration: underline;
}
.grad_left {
	border: 4px solid #bec6ce;
	border-bottom-width: 0;
	background: white url(grad_left.png) left top repeat-y;
}
.grad_right {
	background: url(grad_right.png) right top repeat-y;
	padding: 30px;
}
/* I'd love to use selectors for these instead of classes but most browsers
   don't grok last-of-type, last-nth-of-type or last-child.
   The next two put the border style back on, and the last reserves space for
   the trim element. */
.content.last {
	padding-bottom: 2px;
}
.content.last .grad_left {
	border-bottom-width: 4px;
}
.content.last .grad_right {
	padding-bottom:150px;
}
p {
	/* if we use margin then opera 9.5 doesn't apply the bottom margin on the para
	   above trim_bottom, rendering different to other browsers incl. IE6, omg */
	margin:0;
	padding: 0 0 1.5em 0;
}
.trim_bottom {
	position:absolute;
	left: -42px;
	top: auto;
	background: url(trim_bottom_sun.png) left bottom no-repeat;
	width: 851px;
	height: 159px;
	padding-top: 21px;
}
.dropcap {
	font-size: 3.98em;
	line-height: 1;
	float: left;
	padding-right: .1em;
	margin-top: -.25em;
}
#credits {
	text-align: right;
	padding-right: 30px;
	margin-top: -66px;
	margin-right: 188px;
	position:relative;
	z-index: 1;
	color: #9ea4b4;
}
#credits p {
	padding:0;
}
#credits a {
	color: #98a0b9;
}
/* Paragraph indenting. Can't combine first-child and first-of-type since <=FF3
   don't grok the latter and drops the entire selector. */
p {
	text-indent: .75em;
}
p:first-child {
	text-indent: 0;
}
p:first-of-type {
	text-indent: 0;
}
/* and IE6 drops the entire selector if this is included. */
h2 + p {
	text-indent: 0;
}
.email {
	background: url(envelope.png) left 2px no-repeat;
	padding-left: 24px;
}

/* grr, IE6. */
* html h1 {
	background: none;
	padding: 0;
	line-height: .6em;
}
* html h1 span {
	/* old h1 padding is span width */
	width: 136px;
	height: 94px;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ksmiletris.png", sizingMethod="crop");
	display: inline-block;
}
/* bizarre */
* html .dropcap {
	position:relative;
	margin-top: -1em;
}
/* neg margin-top doesn't work here. Oh, and the margin-bottom is wrong. */
* html h2 {
	position:relative;
	top: -.5em;
	margin-bottom: 0;
}
/* shouldn't need this. */
.dropcap {
	text-indent: 0;
}