/*
* @updated		08/2011
* @author		Trevor Morris / Surface
* @project		trovster.com
* --------------------------------------------------------------------------------------------------*/

/**
* =hide
* @section Common
* @subsection Accessible Hiding
* --------------------------------------------------------------------------------------------------
*/
.access,
legend, table caption,
.more a strong, a.more strong, .more a span, a.more span,
.geo {
	position: absolute; left: -9999px;
	overflow: hidden;
	height: 0; width: 0;
	font-size: 0; line-height: 0;
}


/**
* =replace
* @section Common
* @subsection Image Replacement
* @see http://phark.typepad.com/phark/2003/08/accessible_imag.html Phark Image Replacement
* --------------------------------------------------------------------------------------------------
*/
.phark, .replace,
.social ul li, .social ul li a {
	overflow: hidden;
	display: block;
	font-size: 0; line-height: 0; text-decoration: none; text-indent: -9999px;
	background: transparent no-repeat 0 0;
	border: 0;
	-moz-border-radius: 0; -webkit-border-radius: 0;
	-o-border-radius: 0; -ms-border-radius: 0;
	border-radius: 0;
}


/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2011 Fontspring
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      exljbris
 * License URL: http://www.fontspring.com/fflicense/exljbris
 *
 *
 */

@font-face {
	font-family: 'Museo300';
	src: url('font/Museo300-Regular-webfont.eot');
	src: url('font/Museo300-Regular-webfont.eot?iefix') format('eot'),
		 url('font/Museo300-Regular-webfont.woff') format('woff'),
		 url('font/Museo300-Regular-webfont.ttf') format('truetype'),
		 url('font/Museo300-Regular-webfont.svg#webfontBsA9EFUC') format('svg');
	font-weight: normal; font-style: normal;
}

@font-face {
	font-family: 'Museo500';
	src: url('font/Museo500-Regular-webfont.eot');
	src: url('font/Museo500-Regular-webfont.eot?iefix') format('eot'),
		 url('font/Museo500-Regular-webfont.woff') format('woff'),
		 url('font/Museo500-Regular-webfont.ttf') format('truetype'),
		 url('font/Museo500-Regular-webfont.svg#webfontQF7qPaga') format('svg');
	font-weight: normal; font-style: normal;
}

@font-face {
	font-family: 'Museo700';
	src: url('font/Museo700-Regular-webfont.eot');
	src: url('font/Museo700-Regular-webfont.eot?iefix') format('eot'),
		 url('font/Museo700-Regular-webfont.woff') format('woff'),
		 url('font/Museo700-Regular-webfont.ttf') format('truetype'),
		 url('font/Museo700-Regular-webfont.svg#webfontNpXBDqia') format('svg');
	font-weight: normal; font-style: normal;
}


/**
* =general
* @section General Layout
* --------------------------------------------------------------------------------------------------
*/
html, body {
	font-family: Museo500, Georgia, Times, serif;
	font-size: 16px; line-height: 1.5; color: #555;
	background-color: #fff;
}
#wrapper {
	overflow: hidden;
	border: 0 solid #333; border-width: 10px 0 0;
}
#container {
	position: relative;
	overflow: hidden;
	padding: 0 20px;
}
	#container div.inner {
		position: relative;
		max-width: 940px;
		margin: 0 auto; padding: 10px;
	}


/**
* =typography
* @section Typography
* --------------------------------------------------------------------------------------------------
*/
a,
a:visited {
	position: relative;
	color: #069; text-decoration: underline;
}
a:hover,
a:focus,
a:active {
	text-decoration: none;
}
a:active {
	top: 1px; left: 1px;
}

::-moz-selection {
	color: #fff;
	background: #069;
}
::selection {
	color: #fff;
	color: rgba(255,255,255,.85);
	background: #069;
}
pre ::-moz-selection {
	background: #555;
}
pre ::selection {
	background: #555;
}

p, iframe, object {
	display: block;
	margin: 0 0 1em;
}
abbr,
abbr[title] {
	text-decoration: none;
	border: 0;
}
address {
	font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: Museo300, Georgia, Times, serif;
	color: #222; font-weight: normal;
}
h1 {
	font-size: 3em; line-height: 1.2;
}
h2 {
	font-family: Museo500, Georgia, Times, serif;
	font-size: 1.5em; line-height: 1.2;
}
h1 + h2 {
	margin-top: -1em;
}
h3 {
	font-size: 1.3em; line-height: 1.2; font-weight: bold;
}
h4 {
	font-size: 1.2em;
}
h5 {
	font-size: 1.1em;
}
h6 {
	font-size: 0.9em;
}

h1 em {
	font-style: normal; font-size: 0.5em;
}

h1 a,
h1 a:visited,
h2 a,
h2 a:visited,
h3 a,
h3 a:visited,
h4 a,
h4 a:visited,
h5 a,
h5 a:visited,
h6 a,
h6 a:visited {
	color: #222; text-decoration: none;
}

h1 a:hover,
h1 a:focus,
h1 a:active,
h2 a:hover,
h2 a:focus,
h2 a:active,
h3 a:hover,
h3 a:focus,
h3 a:active,
h4 a:hover,
h4 a:focus,
h4 a:active,
h5 a:hover,
h5 a:focus,
h5 a:active,
h6 a:hover,
h6 a:focus,
h6 a:active {
	text-decoration: underline;
}

abbr,
abbr[title] {
	text-decoration: none;
	border: 0;
}

pre {
	margin: 0 -10px 1em; padding: 10px;
	background: #F7F7F7;
}

blockquote {
	margin: 1em 2em 0;
	font-size: 1.2em; color: #111;
	font-style: italic;
}
blockquote p:first-child {
	text-indent: -0.3em;
}
blockquote p:first-child::before {
	content: "“";
}
blockquote p:last-child::after {
	content: "”";
}
blockquote p.citation {
	margin: -1em 0 2em;
	font-size: 0.8em; font-style: normal;
}

nav ul,
nav ul li,
.content .hatom,
.content .hatom li,
.social ul,
.social ul li,
dl ul,
dl ul li,
footer.contentinfo .feeds ul,
footer.contentinfo .feeds ul li,
.hentry .entry-tags ul,
.hentry .entry-tags ul li,
ul.list,
ul.list li {
	margin: 0; padding: 0;
	list-style: none; list-style-image: none;
	background: none;
}


/**
* =form
* @section Forms
* --------------------------------------------------------------------------------------------------
*/
form, fieldset {
	padding: 0; margin: 0;
	border: 0;
}
	form div {
		margin: 0 0 10px;
	}
	form label {
		display: block;
		padding: 0 0 2px;
	}
		form label abbr.required {
			text-decoration: none;
			border: 0;
		}
	form div.submit {
		margin: 15px 0 0;
	}



/**
* =header
* @section General Layout
* @subsection Header
* --------------------------------------------------------------------------------------------------
*/
header {
	position: relative; z-index: 100; zoom: 1;
	padding: 5px 0 20px;
}
header div.inner {
	overflow: hidden;
	border: 0 solid #DBDBDB; border-width: 0 0 1px;
}
	header h1,
	header h1 a,
	header h1 a:visited,
	header h2 {
		margin: 0;
		line-height: 1.2;
	}
	header h1,
	header h2 {
		float: left; clear: left;
	}
	header h1 a {
		font-size: 0.6666em;
	}
	header h2 {
		margin-top: -0.3em;
		color: #999; font-style: italic; font-size: 1em;
	}
	header nav {
		float: right;
	}


/**
* =nav
* @section Navigation
* --------------------------------------------------------------------------------------------------
*/
nav {
	margin: -20px 0 0; padding: 0 0 20px;
	border: 0 solid #DBDBDB;
}
	nav ul {
		position: relative;
		overflow: hidden;
		margin: 0 -5px;
	}
		nav ul li,
		nav ul li a,
		nav ul li a:visited {
			color: #555; text-decoration: none;
			outline: 0;
		}
		nav ul li {
			float: left;
			display: inline;
			margin: 0 5px 0 0;
		}
			nav ul li a {
				display: block;
				padding: 2px 10px;
				
				-moz-border-radius: 5px; -webkit-border-radius: 5px;
				-o-border-radius: 5px; -ms-border-radius: 5px;
				border-radius: 5px;
			}
			nav ul li a:hover,
			nav ul li a:focus,
			nav ul li a:active {
				background: #eee;
			}
			body.homepage nav ul li.homepage a,
			body.blog nav ul li.blog a,
			body.movie nav ul li.movies a,
			body.about nav ul li.about a,
			body.lab nav ul li.lab a,
			body.link nav ul li.links a,
			body.photo nav ul li.photos a {
				color: #000;
				background: #eee;
			}
			


/**
* =content
* @section General Layout
* @subsection Content
* --------------------------------------------------------------------------------------------------
*/
#content {
	position: relative;
	padding: 0 0 20px;
}
	#content header {
		padding: 0;
	}
	#content section {
		overflow: hidden;
		padding: 30px 10px; margin: 0 -10px;
		border: 0 solid #DBDBDB; border-width: 0 0 1px;
	}
	#content section:first-of-type {
		padding-top: 0;
	}
	#content section:last-of-type {
		border-width: 0;
	}

/* general listings */
.hentry,
.hatom {
	position: relative;
	padding: 1em 0 0;
	border: 0 solid #DBDBDB;
}
.hentry {
	border-width: 1px 0 0;
}
	.hentry .entry-title {
		float: none;
		margin-bottom: 0;
	}
	.hentry .entry-title,
	.hentry .entry-content,
	.hentry .entry-summary,
	.hentry .entry-tags {
		margin-left: 25%;
	}
	.hentry .entry-published,
	.hentry .entry-watched {
		position: absolute; top: 2em; left: 0;
		width: 22%;
		margin-bottom: 0;
		color: #111; font-size: 80%;
	}
	.hentry .entry-rating {
		float: right;
		width: 1em;
		margin: -0.7em 0.3em 0;
		font-size: 500%; text-align: right;
	}
	.hentry p.review {
		margin-top: -1em;
	}
	.hentry img {
		max-width: 100%; height: auto;
	}
	.hentry .entry-tags {
		margin-bottom: 1em;
	}
		.hentry .entry-tags h4,
		.hentry .entry-tags ul,
		.hentry .entry-tags ul li {
			display: inline;
		}
		.hentry .entry-tags h4::after {
			content: ": ";
		}
		.hentry .entry-tags ul li::after {
			content: ", ";
		}
		.hentry .entry-tags ul li:last-child::after {
			content: "";
		}
		
ul.list {}
	ul.list li {
		display: inline;
		margin: 0 10px 0 0;
	}
	
/* columns */
body.about #about,
body.about #groups,
body.about-cv #about-introduction,
body.about-cv #about-contact,
body.movie-permalink #content .hentry section,
body.movie-permalink #content .hentry footer {
	float: left;
	display: inline;
	width: 65%;
	margin: 0 5% 0 0; padding: 0;
}
body.about #groups,
body.about-cv #about-contact,
body.movie-permalink #content .hentry footer {
	width: 30%;
	margin-right: 0;
	font-size: 90%;
	border: 0 solid #DBDBDB;
}

body.about-cv dl,
body.about-cv dt,
body.about-cv dd,
body.movie .hentry footer dl,
body.movie .hentry footer dt,
body.movie .hentry footer dd {
	margin: 0;
}
	body.about-cv dl dt,
	body.movie .hentry footer dl dt {
		float: left;
		width: 35%;
	}
	body.about-cv dl dt::after,
	body.movie .hentry footer dl dt::after {
		content: ":";
	}
	body.about-cv dl dd,
	body.movie .hentry footer dl dd {
		margin-left: 40%;
	}


/**
* =social
* @section Social networks
* --------------------------------------------------------------------------------------------------
*/
.social ul {
	overflow: hidden;
}
	.social ul li {
		float: left;
		display: inline;
		margin: 10px 10px 10px 0;
	}
		.social ul li a {
			display: block;
			height: 56px; width: 56px;
			background: no-repeat 50% 50%;
		}
		.social ul li.social-twitter a {
			background-image: url(img/icons/twitter.png);
		}
		.social ul li.social-delicious a {
			background-image: url(img/icons/delicious.png);
		}
		.social ul li.social-instagram a {
			background-image: url(img/icons/instagram.png);
		}
		.social ul li.social-lastfm a {
			background-image: url(img/icons/lastfm.png);
		}
		.social ul li.social-dribbble a {
			background-image: url(img/icons/dribbble.png);
		}
		.social ul li.social-forrst a {
			background-image: url(img/icons/forrst.png);
		}
		.social ul li.social-facebook a {
			background-image: url(img/icons/facebook.png);
		}
		.social ul li.social-linkedin a {
			background-image: url(img/icons/linkedin.png);
		}
		.social ul li.social-flickr a {
			background-image: url(img/icons/flickr.png);
		}
		.social ul li.social-tumblr a {
			background-image: url(img/icons/tumblr.png);
		}
		.social ul li.social-instagram a {
			background-image: url(img/icons/instagram.png);
		}
		.social ul li.social-github a {
			background-image: url(img/icons/github.png);
		}


/**
* =twitter
* @section Twitter
* --------------------------------------------------------------------------------------------------
*/
.tweet {}
	.tweet .hentry {
		padding: 0; margin: 0;
		border-width: 0;
	}
		.tweet .hentry .entry-content {
			margin: 0;
		}


/**
* =footer
* @section General Layout
* @subsection Footer
* --------------------------------------------------------------------------------------------------
*/
footer.contentinfo {
	position: relative; clear: both;
	font-size: 80%;
}
footer.contentinfo div.inner {
	border: 0 solid #DBDBDB; border-width: 1px 0 0;
}
	footer.contentinfo section {
		float: left;
		width: 30%;
		margin: 0 5% 0 0; padding: 15px 0 30px;
		border: 0 solid #DBDBDB;
	}
	footer.contentinfo section:last-of-type {
		margin-right: 0;
	}
	
	footer.contentinfo h4 {
		font-size: 1.4em;
	}
	footer.contentinfo p {
		margin: 0;
	}
	footer.contentinfo p.more,
	footer.contentinfo .entry-meta,
	footer.contentinfo .feeds ul {
		display: block;
		margin: 5px 0 0;
	}
	footer.contentinfo p.more a,
	footer.contentinfo p.more a:visited,
	footer.contentinfo .entry-meta a,
	footer.contentinfo .entry-meta a:visited {
		color: #111; text-decoration: none;
	}
	footer.contentinfo p.more a:hover,
	footer.contentinfo p.more a:focus,
	footer.contentinfo p.more a:active,
	footer.contentinfo .entry-meta a:hover,
	footer.contentinfo .entry-meta a:focus,
	footer.contentinfo .entry-meta a:active {
		text-decoration: underline;
	}
	footer.contentinfo p.more a::after {
		content: " »";
	}
	
	footer.contentinfo .copyright {
		clear: both;
		padding: 15px 10px 10px; margin: 0 -10px;
		border: 0 solid #DBDBDB; border-width: 1px 0 0;
	}
		footer.contentinfo .copyright small {
			font-size: 1em;
		}
		
	footer.contentinfo .feeds ul li a {
		display: block;
		padding-left: 17px;
		background: url(img/icons/feed.png) no-repeat 0 50%;
		outline: 0;
	}


/**
* =permalink
* @section Permalink pages (blog and movies)
* --------------------------------------------------------------------------------------------------
*/
body.permalink .hentry {
	padding: 0;
	border-width: 0;
}
	body.permalink .hentry .entry-title,
	body.permalink .hentry .entry-content,
	body.permalink .hentry .entry-summary {
		margin-left: 0;
	}
	body.permalink .hentry .entry-title {
		margin-bottom: 0.5em;
	}
	body.permalink .hentry .entry-published,
	body.permalink .hentry .entry-watched {
		position: relative; top: 0;
		width: auto;
		margin: -1em 0 1em;
		font-size: 1em;
	}

	
/**
* =blog
* @section Blog pages
* --------------------------------------------------------------------------------------------------
*/

	
/**
* =movies
* @section Movie pages
* --------------------------------------------------------------------------------------------------
*/
body.movie-permalink {}
body.movie-permalink .hentry footer {
	margin-top: -2.5em;
}
body.movie-permalink .hentry footer dl {
	margin-bottom: 1em;
}
body.movie-permalink .hentry footer p.more {
	text-align: center;
}
body.movie-permalink #content .hentry section,
body.movie-permalink #content .hentry footer {
	padding-bottom: 30px;
}
body.movie-permalink #content .hentry .entry-rating {
	float: left;
	margin-top: -0.3em; margin-left: 0.1em;
	text-align: center;
}
body.movie-permalink #content .hentry .entry-content {
	margin-left: 7em;
}
body.movie-permalink #content .hentry section section {
	float: none;
	display: block;
	width: auto;
	padding: 0; margin: 0;
}
body.movie-permalink #content .hentry footer {
	padding-top: 4.5em;
}
body.movie-permalink #content .hentry footer blockquote {
	margin-left: 0; margin-right: 0;
}
body.movie-permalink #content #review {
	clear: left;
	padding: 20px 0 0;
}

body.movie-permalink .poster,
body.movie-permalink .still {
	display: block;
	width: 90%; height: auto;
	margin: 0 0 1.5em; padding: 4px;
	border: 4px solid #DBDBDB;
}
body.movie-permalink .poster {
	max-width: 300px;
}

#posters,
#stills {}
	#posters ul li,
	#stills ul li {
		position: relative; overflow: hidden;
		float: left;
		width: 22%; height: 295px;
		margin: 0 3% 3% 0; padding: 0;
		border-width: 0;
	}
	#stills ul li {
		width: 47%; height: 180px;
	}
		#posters ul li img,
		#stills ul li img {
			display: block;
			width: 100%; height: auto;
			margin: 0; padding: 0;
		}


/**
* =homepage
* @section Homepage
* --------------------------------------------------------------------------------------------------
*/
body.homepage .hatom {
	margin-bottom: 50px;
	border-width: 0 0 1px; 
}
body.homepage .hatom:last-of-type {
	margin-bottom: 0;
	border-width: 0;
}


/**
* =photos
* @section Photos section
* --------------------------------------------------------------------------------------------------
*/
body.photo .hatom li {
	float: left;
	width: 30%;
	margin: 0 3% 3% 0;
}
	body.photo .hatom article {
		padding: 0;
		border-width: 0;
	}
		body.photo .hatom img {
			display: block;
			width: 100%; height: auto; max-width: 600px;
		}


/**
* =about
* @section About section
* --------------------------------------------------------------------------------------------------
*/
body.about #about {
	padding-bottom: 30px;
	border-width: 0;
}
body.about #groups {
	padding: 3.5em 0 30px;
}
	body.about #groups div {
		margin: 0 0 1.5em;
	}
	body.about #groups div:last-of-type {
		margin-bottom: 0;
	}
	body.about #groups-geekinthepark {
		padding-top: 1.5em;
		border: 0 solid #DBDBDB; border-width: 1px 0 0;
	}

body.about-cv #about {
	float: none;
	display: block;
	width: auto;
	margin: 0;
	border-width: 0 0 1px;
}
body.about-cv #about-contact {
	padding: 2.8px 0 20px;
}
	body.about-cv dl dd address span {
		display: block;
	}
	
	body.about-cv #content article {
		overflow: hidden;
		padding: 0 0 15px; margin: 0 0 20px;
		border: 0 solid #DBDBDB; border-width: 0 0 1px;
	}
	body.about-cv #content article:last-child {
		margin-bottom: 0; padding-bottom: 0;
		border-width: 0;
	}
		body.about-cv #content article h3,
		body.about-cv #content article p.role,
		body.about-cv #content article p.department,
		body.about-cv #content article p.website,
		body.about-cv #content article p.entry-published {
			float: left; clear: left;
			width: 20%;
			margin: 0;
		}
		body.about-cv #content article p {
			position: relative; top: 0; left: 0;
			font-size: 1em; color: #555;
		}
		body.about-cv #content article .entry-content {
			margin-left: 25%;
		}
		body.about-cv #content article .entry-content p.website {
			float: none;
			width: auto;
		}

		
/**
* =rwd
* @section Media Queries
* --------------------------------------------------------------------------------------------------
*/
@media all and (max-width: 840px) {
	header div.inner {
		border-width: 0;
	}
	header div.inner h2 {
		margin-bottom: 20px;
	}
	header nav {
		padding-top: 20px;
		float: none; clear: both;
		border-width: 1px 0;
	}
}
@media all and (max-width: 780px) {
	body.about-cv #content article p.department,
	body.about-cv #content article p.website,
	body.about-cv #content article p.entry-published {
		float: none;
		display: block;
		width: auto;
	}
	body.about-cv #content article .entry-content {
		margin-left: 0;
	}
	body.about-cv #content article h3,
	body.about-cv #content article p.role {
		clear: none;
		width: auto;
		margin-right: 10px;
	}
	body.about-cv #content article p.role {
		padding-top: 1px;
	}
}
@media all and (max-width: 740px) {
	body.about #about,
	body.about #groups,
	body.about-cv #about-introduction,
	body.about-cv #about-contact,
	body.movie-permalink #content .hentry section,
	body.movie-permalink #content .hentry footer {
		float: none;
		display: block;
		width: auto
	}
	body.about #about,
	body.about #groups {
		padding-bottom: 0;
	}
	body.about #groups,
	body.about-cv #about-contact,
	body.movie-permalink #content .hentry footer {
		width: auto;
		padding-top: 20px; margin-top: 20px;
		border-width: 1px 0 0;
	}
	body.movie-permalink #content .hentry footer dl {
		float: left;
		width: 50%;
	}
	
	body.photo .hatom li {
		width: 47%;
	}
	
	footer.contentinfo section {
		width: 45%;
		padding-bottom: 10px;
	}
	footer.contentinfo section:last-of-type {
		padding-bottom: 30px; 
	}
	
	#stills ul li {
		width: auto;
	}
	#posters ul li {
		width: 30%;
	}
}
@media all and (max-width: 600px) {
	body.photo .hatom li {
		width: auto;
		margin-right: 0;
	}
}
@media all and (max-width: 500px) {
	.hentry .entry-title,
	.hentry .entry-content,
	.hentry .entry-summary,
	.hentry .entry-tags {
		margin-left: 0;
	}
	.hentry .entry-published, .hentry .entry-watched {
		position: relative; top: 0;
		width: auto;
	}
	body.movie-permalink #content .hentry footer dl {
		float: none;
		width: auto;
	}
	
	body.movie-permalink #content .hentry .entry-rating {
		float: right;
	}
	body.movie-permalink #content .hentry .entry-content {
		margin-left: 0;
	}
	
	#posters ul li {
		width: 45%;
	}
	
	footer.contentinfo section {
		float: none;
		width: auto;
	}
	footer.contentinfo section {
		border-width: 0 0 1px; padding-bottom: 15px;
	}
	footer.contentinfo section:last-of-type {
		border-width: 0;
	}
}
@media all and (max-width: 450px) {
	nav ul li {
		float: none;
		display: block;
		margin: 0 0 5px;
		text-align: center;
	}
	
	#posters ul li {
		width: auto;
		margin-right: 0;
	}
}