/*NOTES ----------------------------------------

Dontcom 5.0 - the wonder years.


CONTENTS ---------------------------------------

=1: Reset all elements to a common value
=2: Default classes
=3: Accessibility
=4: Default Styles
=4a: colours, sizes, etc
=5: Layout Styles


*/

/* -- =1: reset all elements to a common value ----------------------------------------------------- */
body {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"'";}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}



/* -- =2: default classes -------------------------------------------------------------------------- */
.center { text-align: center; }
.right { text-align: right !important; }
.left { text-align: left !important; }
.small { font-size: 0.9em; }
.smaller { font-size: 0.8em !important; }
.bold { font-weight: bold !important; }
.floatRight { float: right; }
.floatLeft { float: left;}
.clear { clear: both; }
.uppercase { text-transform: uppercase; }


/* -- =3: accessibility ---------------------------------------------------------------------------- */
.aural {
	position: absolute;
	left: -9999px;
	font-size: small;
}

.hide { display: none; }


/* -- =4: Default Styles --------------------------------------------------------------------------- */
/* =4a: colours, sizes, etc of elements */
body {
	font: 14px/1.6 Calibri, "Myriad Pro",Myriad,Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; /* set font size to 10px (a nice round number) - 1.4 line height */
	background: #f7f2e8 url(/img/bg-page.jpg);
	color: #322d2a;
}

h1 { font-size: 2em; }

h2 { font-size: 1.8em; }

h3 { font-size: 1.6em; }

h4 { font-size: 1.4em; }

a:link {color: #721f1f}     /* unvisited link */
a:visited {color: #aa6f6f}  /* visited link */
a:hover {color: #1f3672}   /* mouse over link */
a:active {color: #000000}   /* selected link */

#content-main .text ul,
#content-main .text p,
#content-main .text h3 {
	margin-bottom: 0.5em;
}


#content-main ul {
	margin-left: 3em;
}

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

/* -- =5: Layout Styles ---------------------------------------------------------------------------- */

/* -- =5a: header -- */
#branding {
	background: #113862 url(/img/bg-header.jpg) repeat-x;
	height: 164px;
	position: relative;
}

	#branding .contain {
		width: 1020px;
	}

	#logo {
		float: left;
		text-indent: -9999em;
		background: url(/img/logo.png) no-repeat;
		width: 447px;
		height: 123px;
		margin: 24px 0 0 0;
	}
	
	#branding .bottom {
		height: 4px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: url(/img/bg-header-bottom.jpg);
	}
	
	#branding ul {
		float: left;
		margin: 55px 0 0 33px;
	}
	
	#branding li {
		float: left;
		width: 140px;
		height: 79px;
		margin: 0 40px 0 0;
	}
	
	#branding li a {
		display: block;
		width: 100%;
		height: 100%;
		background: url(/img/nav.png) no-repeat;
		text-indent: -9999em;
	}
	
	#branding li a:active {
		margin-top: 1px;
	}
	
	#branding li.home a { background-position: 0 0; }
	#branding li.home a:hover { background-position: 0 -80px; }
	
	#branding li.about a { background-position: -180px 0; }
	#branding li.about a:hover { background-position: -180px -80px; }
	
	#branding li.work a { background-position: -360px 0; }
	#branding li.work a:hover { background-position: -360px -80px; }


	
/* -- =5b: content-main -- */
#content-main {
	float: left;
	width: 597px;
	margin-left: 23px;
}

	#content-main .hentry {
		margin: 20px 0 3em 0;
		position: relative;
		overflow: hidden;
	}

	#content-main abbr {
		display: block;
	}

	#content-main abbr a {
		display: block;
		margin-left: 10px;
		padding: 2px 0 3px 28px;
		text-decoration: none;
		color: #322d2a;
		border-bottom: 2px solid #d1c3ae;
		font: 11px/1.6 Verdana, Arial, Helvetica, 'Liberation Sans',FreeSans,sans-serif;
	}
	
		#content-main abbr a:hover:after {
			content: " #";
		}

	#content-main .caption {
		font-size: 11px;
		line-height: 1.3;
		position: absolute;
		bottom: 0;
		left: 27px;
		width: 120px;
	}
	
	#content-main .img,
	#content-main .movie {
		float: right;
		width: 440px;
	}
	
	/* photos */
	#content-main .photo abbr {	background: url(/img/icon-image.png) no-repeat bottom left; }
	
	#content-main .photo {
		min-height: 280px;
	}
	
	#content-main .photo .img img {
		display: block;
		padding: 5px;
		background: url(/img/bg-img.jpg);
		border-right: 1px solid #d1c3ae;
		border-bottom: 1px solid #d1c3ae;
		margin: 1em 0 0 0;
	}
	
	/* video */
	#content-main .video abbr {	background: url(/img/icon-play.png) no-repeat bottom left; }
	
	#content-main .video .movie object {
		display: block;
		margin: 1em 0 0 0;
	}
	
	/* quote */
	#content-main .quote abbr {	background: url(/img/icon-quote.png) no-repeat bottom left; }

	#content-main .quote blockquote {
		float: right;
		width: 460px;
		position: relative;
		margin-top: 1em;
		
	}
	
	#content-main .quote blockquote span {
		color: #718092;
		font-size:40px;
		font-weight:bold;
		line-height:0px;
		vertical-align:-17px;
	}
	
	#content-main .quote blockquote p {
		background: url(/img/quote-bg.png) repeat-y;
		margin: 20px 0;
		font: 18px cambria, Helvetica, Arial, 'Liberation Sans',FreeSans,sans-serif;
		font-weight: bold;
		color: #172949;
		line-height: 1.3;
		padding: 0 20px;
	}
	
		#content-main .quote blockquote .top {
			background: url(/img/quote-top.png) no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			width: 460px;
			height: 20px;
		}
	
		#content-main .quote blockquote .bottom {
			background: url(/img/quote-bottom.png) no-repeat;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 460px;
			height: 20px;
		}
		
	#content-main .quote .caption {
		padding: 4em 40px 0 0;
		width: 90px;
		background: url(/img/quote-point.png) no-repeat top right;
	}
	
	/* link */
	#content-main .link abbr {	background: url(/img/icon-link.png) no-repeat bottom left; }

	#content-main .link .entry-content {
		background: url(/img/link-arrow.png) no-repeat top right;
		padding: 26px 0 0 150px;
		overflow: hidden;
		margin-top: 2px;
	}
	
		#content-main .link .entry-content a {
			font: bold 15px/1.5em Helvetica, Arial, sans-serif;
			text-decoration: none;
			padding: 0 5px;
			background: #f6f1e5 url(/img/bg-page.jpg);
		}
		
		#content-main .link .entry-content .note {
			padding-left: 4px;
		}
		
		#content-main .link .entry-content .note a {
			font-weight: normal;
			font-size: 13px;
			padding: 0;
		}
		
		#content-main .link .entry-content img {
			display: block;
			padding: 5px;
			background: url(/img/bg-img.jpg);
			border-right: 1px solid #d1c3ae;
			border-bottom: 1px solid #d1c3ae;
			margin: 1em 0 0 0;
		}


	/* text */
	#content-main .text abbr {	background: url(/img/icon-quote.png) no-repeat bottom left; }
	
	#content-main .text .entry-content {
		float: right;
		width: 560px;
		margin-top: 1em;
	}

	#content-main .text .entry-content blockquote {
		margin-left: 20px;
		padding-left: 10px;
		border-left: 4px solid #d1c3ae;
	}
	
	
	#content-main .text .entry-content img {
		display: block;
		padding: 5px;
		background: url(/img/bg-img.jpg);
		border-right: 1px solid #d1c3ae;
		border-bottom: 1px solid #d1c3ae;
		margin: 1em 0 0 0;
	}


/* -- =5c: content-sub -- */
#content-sub {
	float: left;
	width: 320px;
	margin: 3.05em 0 0 40px;
	border-top: 2px solid #d1c3ae;
}

	#content-sub h2 {
		font: 18px Helvetica, Arial, sans-serif;
		letter-spacing: 1px;
		margin: 0.5em 0;
		font-weight: normal !important;
	}
	
	#content-sub ul {
		margin-bottom: 2em;
	}
	
	#content-sub li {
		margin: 3px 0;
	}
	
	#content-sub li a {
		padding: 3px 0 3px 24px;
	}
	
		#content-sub li a.no-padding {
			padding: 0;
			background: none !important;
		}
	
	#content-sub li.delicious a { background: url(/img/icon-delicious.png) no-repeat 0 50%; }
	#content-sub li.flickr a { background: url(/img/icon-flickr.png) no-repeat 0 50%; }
	#content-sub li.twitter a { background: url(/img/icon-twitter.png) no-repeat 0 50%; }
	#content-sub li.muxtape a { background: url(/img/icon-muxtape.png) no-repeat 0 50%; }
	#content-sub li.linkedin a { background: url(/img/icon-linkedin.png) no-repeat 0 50%; }
	#content-sub li.lastfm a { background: url(/img/icon-lastfm.png) no-repeat 0 50%; }
	#content-sub li.glen a { background: url(/img/icon-glen.png) no-repeat 0 50%; }
	#content-sub li.glen a { background: url(/img/icon-glen.png) no-repeat 0 50%; }
	#content-sub li.matthorn a { background: url(/img/icon-matthorn.png) no-repeat 0 50%; }
	#content-sub li.mattb a { background: url(/img/icon-mattb.png) no-repeat 0 50%; }
	#content-sub li.mikeforbes a { background: url(/img/icon-mikeforbes.png) no-repeat 0 50%; }
	#content-sub li.mukuna a { background: url(/img/icon-mukuna.png) no-repeat 0 50%; }
	#content-sub li.mikeharding a { background: url(/img/icon-sneak.png) no-repeat 0 50%; }
	#content-sub li.spudooli a { background: url(/img/icon-spudooli.png) no-repeat 0 50%; }
	#content-sub li.vortex a { background: url(/img/icon-vortex.png) no-repeat 0 50%; }
	#content-sub li.wasabicube a { background: url(/img/icon-wasabicube.png) no-repeat 0 50%; }
	#content-sub li.webstock a { background: url(/img/icon-webstock.png) no-repeat 0 50%; }
	
	
#footer {
	clear: both;
	float: left;
	font-size: 11px;
	padding-bottom: 20px;
	overflow: hidden;
}

	#footer a {
		text-decoration: none;
	}

	#footer .content-main {
		float: left;
		width: 597px;
		margin-left: 23px;
		border-top: 2px solid #d1c3ae;
	}
	
		#footer .content-main .prev {
			float: left;
			background: url(/img/icon-next.png) no-repeat 0 50%;
			padding: 3px 0 3px 25px;
		}
	
		#footer .content-main .next {
			float: right;
			background: url(/img/icon-previous.png) no-repeat 100% 50%;
			padding: 3px 25px 3px 0;
		}
	
	#footer .content-sub {
		float: left;
		width: 320px;
		margin: 0 0 0 40px;
		border-top: 2px solid #d1c3ae;
	}
	
	#footer .content-sub .feed {
		float: left;
		background: url(/img/icon-feed.png) no-repeat 0 50%;
		padding: 3px 0 3px 25px;
	}
	
	#footer .content-sub .cc {
		float: right;
		background: url(/img/icon-cc.png) no-repeat 0 50%;
		padding: 3px 0 3px 25px;
	}