/*
*** Coded with loving care by Mat at Demotive ***
***	"Toiling since '75" | September 2009      ***
*** .......... www.demotive.com ............. ***
*/

/* Meyer zero out */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* End Meyer zero out */

/* Specific focus styles */
*:focus {
	outline: 0;
}
/* End specific focus styles */

/* selected text styles */
*::selection {
	color:#342F29;
	background: #C8E7E8; /* Safari */
}
*::-moz-selection {
	color:#342F29;
	background: #C8E7E8; /* Firefox */
}
/* End selected text styles */

/* Overall structures */
body {
	font-family: Arial, sans-serif;
	font-size: 62.5%;	/* 10px root */
	line-height: 1.4;
	color: #fff;
	background: #342F29;
}
	.container {
		clear:both;
		background:url(http://www.demotive.com/images/structural/bg-tile-main.png) 0 0 repeat;
	}
		.section {
			width:974px;
			margin:0 auto;
			clear:both;
		}
/* End overall structures */

/* general text */
a {
	color:#C8E7E8;
	font-weight:bold;
	text-decoration:none;
}
a:hover { text-decoration:underline; }
strong { font-weight:bold; }

h2, h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	letter-spacing:-0.05em;
	font-size:3.2em;
	line-height:1;
	margin-bottom:9px;
}
p { margin-bottom:9px; }
/* end general text */

/* navigation areas */
.main-nav {
	background:#C8E7E8 url(http://www.demotive.com/images/structural/bg-tile-nav.png) 0 0 repeat-x;
}
	.main-nav .section {
		font-family:Georgia, "Times New Roman", Times, serif;
		letter-spacing:-0.05em;
		font-size:1.6em;
		text-align:center;
	}
		.main-nav li {
			display:inline-block;
			padding:12px 14px 8px 20px;
			background:url(http://www.demotive.com/images/structural/ico-nav-separator.png) 0 55% no-repeat;
		}
		.main-nav li:first-child {
			padding-left:0;
			background:none;
		}
			.main-nav a {
				font-weight:normal;
				color:#342F29;
			}
			.js-enabled .main-nav a:hover {
				text-decoration:none;
				cursor:pointer;
			}
/* end navigation areas */

/* header section */
#header {
	height:449px;
	background:#a9a9a9 url(http://www.demotive.com/images/content/bg-home-hero.jpg) center top no-repeat;
	position:relative;
}
	h1 {
		text-align:center;
		padding:12px 0;
		background:url(http://www.demotive.com/images/structural/bg_tile_head.png) 0 0 repeat;
	}
/* end header section */

/* work section */
#work {
	background:#FFF;
}
	#work h2 {
		color:#342F29;
	}
	#work .section {
		padding:28px 0;
		overflow:auto;
	}
		.dem-control {
			float:right;
			position:relative;
			top:-26px;
			margin-bottom:-26px;
			padding:5px 16px;
			font-size:1.2em;
			color:#342F29;
			background:#CFCDC8 url(http://www.demotive.com/images/structural/bg-tile-alt.png);
			border-top-left-radius:5px;
			-moz-border-radius-topleft:5px;
			-webkit-border-top-left-radius:5px;
			border-top-right-radius:5px;
			-moz-border-radius-topright:5px;
			-webkit-border-top-right-radius:5px;
		}
			.dem-control li {
				display:inline-block;
				padding:0 10px 0 0;
			}
				.dem-control span {
					font-weight:bold;
				}
			#dem-toggle {
				padding:0 0 0 20px;
				background:url(http://www.demotive.com/images/structural/ico-nav-separator.png) 0 50% no-repeat;
			}
				.all { background:none !important; padding:0 !important; }
			.dem-control a {
				color:#342F29;
			}
		.dem-items {
			clear:both;
			margin-top:9px;
			background:#CFCDC8 url(http://www.demotive.com/images/structural/bg-tile-alt.png) 0 0 repeat;
		}
		.js-enabled .dem-items {
			height:510px;
		}
			.dem-items li {
				overflow:auto;
				padding:14px;
			}
				.dem-items li > a {
					display:block;
					float:left;
					width:542px;
					margin-right:14px;
					border:1px solid #fff;
				}
					.dem-items li > a img {
						display:block;
					}
				.dem-items li > div {
					float:left;
					padding:14px;
					width:358px;
					height:454px;
					background:#FFF;
					color:#333;
					overflow-y:auto;
				}
					.dem-items h3 {
						font-family: Arial, sans-serif;
						font-size:1.8em;
						font-weight:bold;
						letter-spacing:0;
					}
					.dem-items li div a {
						color:#333;
					}
					.dem-items li div p {
						font-size:1.4em;
					}
					.dem-items dl {
						clear:both;
						margin-bottom:28px;
						font-size:1.2em;
					}
						.dem-items dt {
							float:left;
							padding-right:5px;
							font-weight:bold;
						}
					.dem-items blockquote {
						background:#E3F3F3 url(http://www.demotive.com/images/structural/bg-quote-top.gif) 0 0 no-repeat;
					}
						.dem-items blockquote p {
							margin:0;
							padding:10px 14px 24px 14px;
							text-indent:17px;
							background:url(http://www.demotive.com/images/structural/bg-quote-bottom.gif) left bottom no-repeat;
						}
							.dem-items blockquote span {
								display:inline-block;
								padding:6px 7px;
								background:url(http://www.demotive.com/images/structural/ico-quote-close.gif) right top no-repeat;
							}
						.dem-items .cite-src {
							padding:7px 0 0 0;
							background:#fff;
							font-size:1.2em;
						}
/* older work listing */
		#older-work {
			float:right;
			padding:5px 16px;
			font-size:1.2em;
			color:#342F29;
			background:#CFCDC8 url(http://www.demotive.com/images/structural/bg-tile-alt.png);
			border-bottom-left-radius:5px;
			-moz-border-radius-bottomleft:5px;
			-webkit-border-bottom-left-radius:5px;
			border-bottom-right-radius:5px;
			-moz-border-radius-bottomright:5px;
			-webkit-border-bottom-right-radius:5px;
		}
			#older-work a {
				color:#342F29;
			}
		.dem-slider {
			clear:both;
			background:#CFCDC8 url(http://www.demotive.com/images/structural/bg-tile-alt.png);
		}
			.dem-slider ul {
				list-style:none;
				padding:0 14px 14px 14px;
				font-size:1.2em;
			}
/* end work section */

/* about section */
#about {
}
	#about .article {
		padding:28px 14px;
		width:546px;
		background: #342F29;
	}
		#about p {
			font-size:1.4em;
		}
		#about img {
			float:left;
			margin:0 14px 11px 0;
			border:3px solid #FFF;
			box-shadow: 0 3px 3px #000;
			-moz-box-shadow: 0 3px 3px #000;
			-webkit-box-shadow: 0  3px 3px #000;
		}
	#about .aside {
		list-style:none;
	}
		#about .aside li {
			padding:0 0 4px 24px;
			font-size:1.2em;
			color:#968778;
			background:url(http://www.demotive.com/images/structural/ico-about-aside.gif) 0 10% no-repeat;
		}
/* end about section */

/* contact section */
#contact {
	background:#CFCDC8 url(http://www.demotive.com/images/structural/bg-tile-alt.png) 0 0 repeat;
}
	#contact .section {
		position:relative;
		background:url(http://www.demotive.com/images/content/bg-contact.png) right 47px no-repeat;
	}
		#contact h3 {
			color:#342F29;
		}
		#contact .article {
			padding:28px 14px;
			width:546px;
			background: #CFCDC8;
		}
			#contact_form {
				display:block;
			}
				#contact_form ul {
					list-style:none;
				}
					#contact_form li {
						padding-bottom:14px;
						background:url(http://www.demotive.com/images/structural/ico-contact.png) right top no-repeat;
					}
					#contact_form li.error {
						background-position:right -484px;
					}
					#contact_form li.cta {
						background:none;
					}
						#contact_form li * {
							vertical-align:baseline;
						}
						#contact_form li.message * {
							vertical-align:top;
						}
						#contact_form li.message label {
							margin-top:0.25em;
						}
						#contact_form label,
						#contact_form input,
						#contact_form textarea {
							font-size:2.1em;
							color:#333;
						}
						#contact_form input,
						#contact_form textarea {
							display:inline-block;
							width:343px;
							padding:8px 7px 9px 7px;
							border:0;
							border-right:1px solid #968778;
							border-bottom:1px solid #968778;
							font-family: Arial, sans-serif;
						}
							#contact_form .error input,
							#contact_form .error textarea {
								width:343px;
								padding:8px 6px 8px 7px;
								border:0;
								border-right:2px solid #FF0000;
								border-bottom:2px solid #FF0000;
							}
						#contact_form .cta input {
							margin-left:161px;
							padding:9px 7px 8px 7px;
							width:auto;
							background:#C8E7E8;
						}
						#contact_form label {
							display:inline-block;
							width:160px;
							cursor:pointer;
						}
							#contact_form label span {
								position:absolute;
								top:-999em;
								left:-999em;
							}
				#contact_form p.error {
					position:absolute;
					width:160px;
					height:148px;
					left:786px;
					top:77px;
					text-indent:-999em;
					background:url(http://www.demotive.com/images/content/bg-contact-error.png) 0 0 no-repeat;
				}
				#contact_form p.thanks {
					position:absolute;
					width:160px;
					height:166px;
					left:602px;
					top:47px;
					text-indent:-999em;
					background:url(http://www.demotive.com/images/content/bg-contact-win.png) 0 0 no-repeat;
				}
		#contact .aside {
			margin:14px 0 0 0;
			padding:9px 0 0 0;
			border-top:1px dotted #87847D;
			font-size:1.4em;
			color:#333;
		}
			#contact .aside a {
				color:#333;
			}
/* end contact section */

/* enormous footer */
#feed {
	padding:14px 0 0 0;
}
	#feed .section {
		overflow:hidden;
	}
	#feed ul,
	#feed ol {
		list-style:none;
	}
		#feed .lastfm,
		#feed .twitter,
		#feed .flickr,
		#feed .readernaut,
		#feed .delicious,
		#feed .links {
			position:relative;
			width:306px;
			padding:9px 0 0 14px;
			height:17.4em;
			float:left;
			color:#CFCDC8;
		}
		#feed .readernaut,
		#feed .delicious,
		#feed .links {
			border-top:1px dotted #4D4843;
		}
		#feed .last {
			padding-left:28px;
		}
			#feed h4 {
				margin-bottom:10px;
				font-family:Georgia, "Times New Roman", Times, serif;
				letter-spacing:-0.025em;
				font-size:1.6em;
				color:#CFCDC8;
			}
			#feed li li {
				font-size:1.1em;
				line-height:1.5;
			}
				#feed a {
					font-weight:normal;
					color:#CFCDC8;
				}
				#feed a:hover {
					color:#C8E7E8;
				}
					#feed a span {
						font-weight:bold;
					}
				#feed p {
					position:absolute;
					bottom:17px;
					font-size:1.3em;
				}
					#feed .lastfm p a,
					#feed .twitter p a,
					#feed .flickr p a,
					#feed .readernaut p a,
					#feed .delicious p a {
						display:inline-block;
						height:17px;
						margin-left:4px;
						position:relative;
						top:-2px;
						text-indent:-999em;
					}
					#feed .lastfm p a {
						width:62px;
						background:url(http://www.demotive.com/images/structural/logo-foot-lastfm.png) 0 0 no-repeat;
					}
					#feed .twitter p a {
						width:68px;
						background:url(http://www.demotive.com/images/structural/logo-foot-twitter.png) 0 0 no-repeat;
					}
					#feed .flickr p a {
						width:53px;
						background:url(http://www.demotive.com/images/structural/logo-foot-flickr.png) 0 0 no-repeat;
					}
					#feed .readernaut p a {
						width:15px;
						top:1px;
						background:url(http://www.demotive.com/images/structural/logo-foot-readernaut.png) 0 0 no-repeat;
					}
					#feed .delicious p a {
						width:16px;
						top:1px;
						background:url(http://www.demotive.com/images/structural/logo-foot-delicious.png) 0 0 no-repeat;
					}
			#feed .twitter div {
				height:5em;
				padding:7px 7px 30px 7px;
				font-size:1.2em;
				line-height:1.5;
				background:url(http://www.demotive.com/images/structural/bg-twitter.png) 0 0 no-repeat;
			}
				#feed .twitter div a {
					color:#fff;
				}
			#feed .twitter p {
				margin-top:0;
			}
			#feed .flickr li {
				float:left;
				padding-right:14px;
			}
				#feed .flickr img {
					display:block;
					border:2px solid #4D4843;
				}
			#feed .flickr p {
				clear:both;
				padding-top:9px;
			}
#footer {
	margin:1px 0 160px 0;
	border-top:1px solid #3E3A34;
	border-bottom:1px solid #3E3A34;
	background-image:none;
	position:relative;
}
	#footer ul {
		position:relative;
		padding:14px 0 12px 0;
	}
		#footer li {
			display:inline-block;
			padding-left:14px;
			font-size:1.1em;
			color:#CFCDC8;
		}
		#footer li:first-child {
			text-indent:1px;
		}
			#footer li a {
				color:#fff;
			}
			#to-top {
				position:absolute;
				right:0;
				top:-4px;
				width:131px;
				height:52px;
				background:url(http://www.demotive.com/images/structural/bg-to-top.png) 0 0 no-repeat;
				text-indent:-999em;
			}
	#footer small {
		position:absolute;
		top:7em;
		width:100%;
		padding:77px 0 28px 0;
		background:url(http://www.demotive.com/images/structural/bg-footer-crest.gif) top center no-repeat;
		text-align:center;
		color:#CFCDC8;
	}
		#footer small a {
			font-weight:normal;
			color:#CFCDC8;
		}
	#footer a:hover {
		color:#C8E7E8;
	}
/* end enormous footer */

/* April 2010 - Freelance puff */
#puff_freelance {
	position:absolute;
	top:40px;
	right:5%;
	width:162px;
	height:162px;
}
	#puff_freelance a {
		display:block;
		text-indent:-999em;
		width:100%;
		height:100%;
		background:url(http://www.demotive.com/images/content/puff-freelance.png) 0 0 no-repeat;
	}