* {
	margin: 0;
	padding: 0;
}

html {
	background-color: #f9f9f9;
	min-height: 100%;
	margin-bottom: 1px
}

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 62.5%;
	background: #fff url("../ui/header-bg.gif") 0 0 repeat-x;
	margin-bottom: 20px;
}

a img {
	border: none;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


#header,
#introduction,
#content {
	width: 958px;
	margin: 0 auto;
	position: relative;
}

#header {
	height: 80px;
	z-index: 10;
}

#navigation {
	position: absolute;
	top: 0;
	right: 0;
	height: 80px;
	width: 850px;
}

#navigation ul {
	position: absolute;
	bottom: 0;
	right: 0;
}

#header ul li {
	list-style-type: none;
	float: left;
}

#header ul li a {
	background-color: #622608;
	color: #fff;
	font-family: "Gill Sans", "Gill Sans MT", Trebuchet, "Trebuchet MS", sans-serif;
	text-decoration: none;
	font-size: 1.4em;
	display: block;
	padding: 8px 14px;
	margin-left: 7px;
	outline: none;
}

#header ul li a:hover {
	background-color: #431a06;
}

body#page-home #navigation li.home a,
body#page-about #navigation li.about a,
body#page-projects #navigation li.projects a,
body#page-friends #navigation li.friends a,
body#page-news #navigation li.news a,
body#page-links #navigation li.links a,
body#page-contact #navigation li.contact a {
	background-color: #222;
}

#logo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	outline: none;
}

#bg {
	background: #f9f9f9 url("../ui/page-bg.png") 50% 0 repeat-y;
	overflow: hidden;
}

#introduction {
	min-height: 115px;
	height: auto !important;
	height: 115px;
	background: #fffbc5 url("../ui/introduction-bg.gif") 0 100% repeat-x;
	color: #622608;
	position: relative;
}

#introduction span.site-name {
	display: block;
	position: absolute;
	width: 325px;
	height: 64px;
	background: url("../ui/heading-mrmt.gif") 0 0 no-repeat;
	top: 25px;
	left: 280px;
}

#introduction span.site-name span {
	visibility: hidden;
}

body#page-home #introduction {
	height: 170px !important;
}

body#page-home #introduction p {
	position: absolute;
	width: 490px;
	right: 355px;
	top: 110px;
	text-align: right;
	font-size: 1.1em;
	line-height: 1.8em;
}

#introduction-photo {
	position: absolute;
	width: 303px;
	height: 110px;
	top: 0;
	right: 0;
	overflow: hidden;
}

body#page-home #introduction-photo {
	height: 165px;
}

#introduction-photo img,
#introduction-photo div.img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#introduction-photo div.mask {
	z-index: 2;
	background-image: url(/assets/ui/introduction-mask.png);
}

#content {
	color: #666;
	font-size: 1.1em;
	line-height: 1.8em;
}

#content div.inner {
	padding: 20px 40px 60px 40px;
	background: url("../ui/ornament.gif") 50% 100% no-repeat;
	margin-bottom: 30px;
	overflow: hidden;
}

#content p {	
	margin: 1em 0;
}

#content ul,
#content ol {
	margin: 1em 2em;
	margin-right: 0;
}

#content ol ol {
	list-style-type: lower-roman;
}

#content ol ul {
	list-style-type: disc;
}

#content ol ol,
#content ol ul {
	margin: 0.5em 3em;
	margin-right: 0;
}

#content h1 {
	font-family: "Gill Sans", "Gill Sans MT", Trebuchet, "Trebuchet MS", sans-serif;
	font-weight: normal;
	font-size: 3.2em;
	line-height: 1em;
	color: #222;
	margin: 0.2em 0 0.6em;
	font-variant: small-caps;
	text-align: center;
	letter-spacing: 0.04em;	
	background: url("../ui/ornament.gif") 50% 50% no-repeat;
	width: 100%;
}

#content h1 span {
	background-color: #fff;
	padding: 0 0.5em;
}

#content h2 {
	font-family: "Gill Sans", "Gill Sans MT", Trebuchet, "Trebuchet MS", sans-serif;
	font-weight: normal;
	font-size: 2em;
	line-height: 1em;
	color: #823005;
	margin: 1em 0 0 0;
}

#content h3 {
	font-size: 1em;
	color: #823005;
}

#content h4 {
	font-size: 1em;
}

#content div.hr {
	background: url("../ui/ornament.gif") 50% 0 no-repeat;
	height: 24px;
	border: 1px solid #fff;
	margin: 2em 0;
	clear: both;
	outline: none;
}

#content a {
	color: #823005;
	text-decoration: underline;
}

#content a:hover {
	color: #000;
}

#content .left {
	margin: 0 20px 20px 0;
}

#content .right {
	margin: 0 0 20px 20px;
}

#content .image-right {
	float: right;
}

#content .image-left {
	float: left;
}

#content .image {
	display: block;
}

#content .image img {
	display: block;
}

#content .image span.caption {
	display: block;
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	color: #888;
}

div.images {
	overflow: hidden;
}

div.images a {
	background-color: #fffef5;
	border: 1px solid #feffe4;
	padding: 5px;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
}

div.images a:hover {
	border-color: #fffbc5;
	background-color: #fffbc5;
}

div.images a img {
	display: block;
}

#footer {
	background: #f9f9f9 url(../ui/footer-bg.png) 50% 100% no-repeat;
}

#footer div.inner {
	width: 958px;
	margin: 0 auto;
	padding: 15px 0 5px 0;
}

#footer p {
	text-align: center;
	color: #fcfdc7;
	font-size: 1.1em;
}

#footer p#credits {
	color: #ccc;
	text-align: right;
	margin: 30px 20px 0 0;
}

#footer p#credits a {
	color: #ccc;
}

/* Page-specific styles */
body#page-links .link-list {
	width: 33%;
	float: left;
}

body#page-links .link-list h2 {
	margin-left: 0.5em;
}

body#page-news div#content div.inner {
	background-image: none;
}

body#page-news div#news-posts {
	float: left;
	width: 540px;
}

body#page-news div#news-archive {
	float: right;
	width: 260px;
	background-color: #fffef5;
	border: 1px solid #fffbc5;
	padding: 20px;
}

body#page-news #content h2 a {
	text-decoration: underline;
}

body#page-news div#news-archive h2 {
	margin: 0;
}

body#page-news div#news-archive h3 {
	font-size: 1em;
	color: #666;
	margin: 0.5em 0 0 0;
}

body#page-news div#news-archive ol {
	list-style-type: disc;
	margin: 0 0 0.5em 2em;
}

body#page-news div#news-archive ol li span {
	color: #888;
}

body#page-news div#news-archive sup {
	font-size: 1em;
	vertical-align: baseline;
}

#comments fieldset {
	border: none;
}

#comments legend {
	font-weight: bold;
	color: #666;
}

#comments label {
	margin: 0.5em 0;
	display: block
}

#comments label span,
#comments label input,
#comments label textarea {
	display: block;
	width: 200px;
}

#comments label textarea {
	width: 550px;
	height: 100px;
}

#comments .invalid {
	border: 1px solid red;
}

#comments input.button {
	margin: 1em 0;
}

#comments .comment {
	padding: 10px;
	background-color: #fffef5;
	border-top: 2px solid #feffe4;
	border-bottom: 2px solid #feffe4;
	margin: 1em 0;
}

#comments .comment span.name {
	font-weight: bold;
}

#comments .comment span.date {
	color: #888;
}