/* 

Stylesheet:
	nmjenkins.com

Author:
	Neil Jenkins

Version:
	3.0 (2008-03-30)

Notes:
	Feel free to look around the code and see how I've implemented things. Things of note:
	- Use of text shadows to make reverse text (white on colour) appear thinner.
	- Use of background-attachment: fixed to keep head in position. Not advanced, but it's amazing how few people know it exists.
	- Use of min/max height/width to ensure certain layout constraints.
	None of it's especially complicated but I like it :).
	
	Please note, that while I encourage you to look at other people's code to learn new techniqes, the design is NOT to be copied wholesale. This is a personal design and permission is not granted to use it elsewhere. If you need a website coded, email me to discuss pricing.

*/

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font: 75%/1.5 "Helvetica Neue", verdana, sans-serif;
	background: url(images/face.png) no-repeat fixed 0 80px;
}

/* @group Standard Elements */

a {
	color: #450800;
	text-decoration: none;
	border-bottom: 1px solid #450800;
}

#blog #content a:hover,
#code #content a:hover,
#notfound #content a:hover {
	background: #EDE7E6;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

h1 {
	font-size: 400%;
	position: absolute;
	top: 5px;
	line-height: 0.8;
	padding-top: 0.38em;
	text-indent: 1em;
}

h2 {
	font-size: 200%;
	clear: both;
	border-bottom: 1px solid #000;
	margin: 1em 0;
}

h3 {
	font-size: 160%;
	font-style: italic;
	text-align: right;
	border-bottom: 1px dotted #aaa;
}

h4 {
	font-size: 145%;
	margin: 10px 0;
}

h5 {
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	margin: .5em 5em;
}

p {
	margin: 1em 0;
	text-align: justify;
}

dt {
	font-size: 120%;
	margin: 0.5em 0;
}

dd {
	margin: 0 0 1.5em 3em;
}

code {
	font: 11px/1.2 Menlo, Monaco, monospace;
}

/* @end */

#heightWrapper {
	position: relative;
	min-height: 100%;
}

/* @group Header */

#header {
	border-top: 5px solid #000;
	padding-top: 5px;
	position: relative;
	width: 100%;
}

#navigation {
	margin-bottom: 4em;
	height: 4.5em;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	list-style: none;
}

#navigation li {
	display: block;
	float: right;
	height: 4.5em;
	width: 12em;
	border-left: 1px solid #fff;
}

#navigation span, #navigation a {
	color: #fff;
	display: block;
	width: 10em;
	height: 1em;
	text-align: right;
	padding: 2.75em 1em 0.75em;
}

#navigation a {
	background: #000;
	text-shadow: #000 1px 1px 1px;
	border: none;
}

#linkBlog span, #linkBlog a:hover, #blog #linkBlog a {
	background: #450800;
	text-shadow: #450800 1px 1px 1px;
}

#linkPhotos span, #linkPhotos a:hover {
	background: #1E2024;
	text-shadow: #1E2024 1px 1px 1px;
}

#linkCode span, #linkCode a:hover {
	background: #1A3025;
	text-shadow: #1A3025 1px 1px 1px;
}

#contact {
	font-size: 91.67%;
	font-style: normal;
	position: absolute;
	top: 100%;
	right: 1em;
	padding-top: 0.5em;
}

#contact a {
	unicode-bidi:bidi-override;
	direction: rtl;
}

/* @end */

/* @group General Content */

#content {
	margin-left: 300px;
	padding-right: 40px;
	padding-bottom: 40px;
	min-height: 100%;
}

#content ul, #content ol {
	margin: 1em 5em;
}

#content li {
	margin: 0.3em 0;
}

#code #content img, #blog #content img {
	float: left;
	margin: 0 2em 1em 0;
	border: 1px solid #333;
}

#blog #content, .Albums #content, #code #content {
	max-width: 70em;	
}

/* @end */

/* @group Blog Post */

.date {
	position: absolute;
	margin-left: -9em;
	margin-top: 0.5em;
	text-align: center;
}

.date .day {
	font-size: 500%;
	width: 1.34em;
	line-height: 1;
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
}

.date .month {
	font-size: 200%;
	width: 3.35em;
	line-height: 1.3;
	padding-bottom: 5px;
}

.blogBody {
	margin-left: 9em;
}

#blog #content .displayImage {
	text-align: center;
}

#blog #content .displayImage a {
	border: none;
}

#blog #content .displayImage a img {
	display: inline;
	float: none;
	margin: 0;
	padding: 5px;
	border: 5px solid #000;
}

#blog #content .displayImage a:hover img {
	border-color: #450800;
}

#blog #content a.permalink {
	color: #000;
	border: none;
}

#blog #content a.permalink:hover {
	color: #450800;
}

/* Pretty printing styles. Used with prettify.js. */

pre.prettyprint {
	padding: 1ex 1em;
	border-left: 5px solid #888;
	background: #EFEFEF;
	font: inherit;
	white-space: pre-wrap;
}
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}

/* @end */

/* @group Sidebar */

#sidebar {
	position: relative;
	border-top: 1px solid #000;
	border-bottom: 5px solid #000;
	overflow: hidden;
	color: #fff;
	text-shadow: #450800 1px 1px 1px;
	background: #450800;
	padding: 20px 0;
	width: 100%;
}

#sidebar a {
	color: #fff;
	border-color: #fff;
	padding-top: 1px;
}

#sidebar a:hover {
	background: #000;
}

#sidebar div {
	width: 33%;
	float: left;
}

#sidebar h2, #sidebar ul, #sidebar p {
	padding: 0 30px;
}

#sidebar h2 {
	font-size: 150%;
	border: none;
}

#sidebar ul {
	list-style: none;
}

#sidebar li {
	margin-bottom: 2px;
}

/* @end */

/* @group Code */

.importantLinks {
	text-align: center;
}

.importantLinks a {
	border: 1px solid;
	padding: 5px 20px;
	margin-right: 1em;
}

.importantLinks a:hover {
	background: #CCBFC3;	
}

/* @end */

/* @group Footer */

#footer {
	font-size: 10px;
	position: relative;
	line-height: 2;
	height: 2em;
	padding: 0 40px 0 300px;
	text-align: right;
	margin-top: -2.5em;
	border-bottom: 5px solid #000;
}

#blog #footer {
	border: none;
	margin-top: -3em;

}

/* @end */