/* @group fonts */
@font-face {
	font-family: 'Aller';
	src: url('/fonts/aller.eot#') format('eot'), 
	     url('/fonts/aller.woff') format('woff'), 
	     url('/fonts/aller.ttf')  format('truetype'),
	     url('/fonts/aller.svg#Aller') format('svg');
}
/*@font-face {
  font-family: 'Aller';
  src: url('/fonts/aller.eot');
  src: local('☺'),
         url('/fonts/aller.woff') format('woff'), url('/fonts/aller.ttf') format('truetype');
}*/
/* @end */

/* @group reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .btn 
{ border: 0; font-family: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align:baseline }
a img, frameset { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q {	quotes: "" ""; }	
/* @end */

/* @group utility */
.clearing { clear: both; }
.container:after, .contain:after, .forms:after, .article:after, .clearfix:after {
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden;
}
.last { margin-bottom: 0; }
.screen-reader { display: block !important; left: -9999px !important; position: absolute !important; top: -9999px !important; }
.hide { display: none; }
.left, .leftSide { float: left; }
.right, .rightSide { float: right; }
.centered { display: block; margin: 0 auto; }
img.left, .leftSide { margin: 0 20px 10px 0; }
img.right, .rightSide { margin: 0 0 20px 10px; }
img.centered { margin-bottom: 20px; }
img.left, img.right, img.centered { background: rgba(0, 0, 0, 0.15); padding: 5px; }
img.me { margin: 0 0 10px 20px; }
.lead { font-size: 15px; }
.col-1 { width: 40px; }
.col-2 { width: 100px; }
.col-3 { width: 160px; }
.col-4 { width: 220px; }
.col-5 { width: 280px; }
.col-6 { width: 340px; }
.col-7 { width: 400px; }
.col-8 { width: 460px; }
.col-9 { width: 520px; }
.col-10 { width: 580px; }
.col-11 { width: 640px; }
.col-12 { width: 700px; }
.col-13 { width: 760px; }
.col-14 { width: 820px; }
.col-15 { width: 880px; }
.col-16 { width: 940px; }
.no-outline { outline: none; }
#content .more {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	color: #fff;
	display: block;
	float: left;
	font-size: 16px;
	-moz-border-radius: 5px;
	padding: 10px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	text-transform: uppercase;
	-webkit-border-radius: 5px;
	-webkit-transition: background 0.25s ease-in;
}
#content .more:hover, #content .more:focus { background: rgba(0, 0, 0, 0.25); }
/* @end */

/* @group basic text */
html { background: #c8df5d url(/images/structure/bg-html.png) repeat 50% 0; }
body {
	background: url(/images/structure/bg-body.png) repeat 50% 0; 
	color: #fff; 
	font: 13px/20px Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-family: Aller, Helvetica, Arial, sans-serif; font-weight: normal; margin-bottom: 10px; }
h1, h2 { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
h1 { font-size: 36px; line-height: 40px; margin-bottom: 0; }
h2 { font-size: 24px; line-height: 30px; }
h3 { color: #fff; font-size: 18px; line-height: 20px; }
h4, h5, h6 { color: rgba(0, 0, 0, 0.5); font-size: 16px; font-weight: bold; }
p, ul, ol, dl, table, pre, .codeblock { margin-bottom: 20px; }
ul { list-style: square; }
a { }
a:visited { }
a:hover, a:active { }
pre, .codeblock {
	background: rgba(0,0,0,.15);
	border: 1px solid rgba(0,0,0,.20);
	border-radius: 5px;
	font: 12px/20px "Consolas", "Lucida Sans Unicode", "Monaco", "Courier New", Courier, monospace;
	-moz-border-radius: 5px;
	overflow: auto;
	padding: 10px;
	-webkit-border-radius: 5px;
	-webkit-transition: background 0.25s ease-in;
	width: auto;
}
pre span, .codeblock span { color: #fff !important; }
pre .highlight, .codeblock .highlight { font-weight: bold; }
pre:hover, pre:focus, .codeblock:hover, .codeblock:focus { background: rgba(0,0,0,.35); }
#skip-links a, #feature a, #content a, #footer a {
	background: rgba(0, 0, 0, 0.15);
	border-bottom: 1px dotted rgba(0,0,0,0.35);
	color: #fff;
	padding: 2px 3px;
	text-decoration: none;
	-webkit-transition: background 0.25s ease-in;
}
#skip-links a:hover, #feature a:hover,  #content a:hover, #footer a:hover, #skip-links a:focus, #feature a:focus,  #content a:focus, #footer a:focus { background: rgba(0, 0, 0, 0.25); }
#content .photo { background: none; padding: 0; }
#content li { border-bottom: 1px solid rgba(0, 0, 0, 0.20); padding: 10px; }
#content li:last-child { border-bottom: none; }
#content li p { margin-bottom: 0; }
/* @end */

/* @group basic structure */
#toggle-grid, #toggle-colorpicker { background: rgba(0,0,0,.25); color: #fff; padding: 10px; position: fixed; right: 0; top: 0; z-index: 100; }
#toggle-colorpicker { right: 100px; }
#grid { background: url(/images/structure/grid.png) repeat-y 50% 0; display: none; height: 100%; position: fixed; width: 100%; z-index: 10; }
#feature, #footer { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.20); border-width: 1px 0; }
#footer { border-width: 1px 0 0; font-size: 11px; }
.container { margin: 0 auto; padding: 40px 0; width: 940px; }
/*#footer .container { background: url(/images/structure/logo-footer.png) no-repeat 100% 100%; }*/
/* @end */

/* @group skip links */
#skip-links { left: 0; margin: 0; position: absolute; top: 0; width: 100%; }
#skip-links a { left: -9999px; padding: 5px; position: absolute; top: -9999px; }
#skip-links a:active, #skip-links a:focus { left: 0; top: 0; }
/* @end */

/* @group header */
.nav-utility { float: right; font-size: 10px; list-style: none; margin-bottom: 40px; }
.nav-utility li { float: left; margin-left: 20px; }
.nav-utility .rss a { 
	background: url(/images/structure/rss.png) no-repeat; 
	border-bottom: none; 
	display: block; 
	height: 20px; 
	overflow: hidden; 
	text-indent: -9999px; 
	width: 20px;
}
.nav-utility .search { position: relative; }
.nav-utility .search label { display: block; float: left; text-transform: lowercase; }
.js .nav-utility .search label { color: #999; float: none; margin: 0 0 0 5px; position: absolute; }
.nav-utility .search input { 
	border: none;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	float: left;
	font-size: 10px;
	height: 10px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	padding: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
}
.nav-utility .search button {
	background: rgba(0, 0, 0, 0.2);
	border: none;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	color: #fff;
	float: left;
	height: 20px;
	margin: 0;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topright: 5px;
	padding: 0 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
.nav-utility .search p { margin-bottom: 0; }
#logo {
	background: url(/images/structure/logo.png) no-repeat; 
	clear: both;
	float: left;
	height: 37px;
	overflow: hidden;
	text-indent: -9999px;
	width: 284px;
}
#nav { float: right; list-style: none; margin: 0; }
#nav li { float: left; margin-left: 10px; }
#nav .nav-home { border-left: none; padding-left: 0; }
#nav .nav-contact { border-right: none; padding-right: 0; }
#nav a {
	background: url(/images/structure/nav.png) no-repeat;
	border-bottom: none;
	display: block;
	height: 46px;
	overflow: hidden;
	text-indent: -9999px;
}
#nav .nav-home a { background-position: 0 0; width: 88px; }
#nav .nav-about a { background-position: -88px 0; width: 92px; }
#nav .nav-blog a { background-position: -180px 0; width: 76px; }
#nav .nav-work a { background-position: -256px 0; width: 82px; }
#nav .nav-contact a { background-position: -338px 0; width: 110px; }
#nav .nav-home a:hover, #nav .nav-home a:focus { background-position: 0 -46px; }
#nav .nav-about a:hover, #nav .nav-about a:focus { background-position: -88px -46px; }
#nav .nav-blog a:hover, #nav .nav-blog a:focus { background-position: -180px -46px; }
#nav .nav-work a:hover, #nav .nav-work a:focus { background-position: -256px -46px; }
#nav .nav-contact a:hover, #nav .nav-contact a:focus { background-position: -338px -46px; }
#home #nav .nav-home a { background-position: 0 -92px; }
#about #nav .nav-about a { background-position: -88px -92px; }
#blog #nav .nav-blog a { background-position: -180px -92px; }
#work #nav .nav-work a { background-position: -256px -92px; }
#contact #nav .nav-contact a { background-position: -338px -92px; }
/* @end */

/* @group feature */
#feature p { font: 22px/36px Aller, Helvetica, Arial, sans-serif; margin-bottom: 0; }
/* @end */

/* @group primary content */
#content .meta { border-top: 1px solid rgba(0,0,0,.15); list-style: none; overflow: hidden; width: 100%; }
#content .meta li { border-bottom: none; font-size: 20px; float: left; font-size: 12px; }
#content .meta .category { border: 1px solid rgba(0,0,0,.15); border-width: 0 1px; }
#content .meta .label { display: block; font-size: 10px; font-weight: normal; text-transform: uppercase; }
#content .meta a { border-bottom: none; }
#content .meta .comments em {
	background-image: url(/images/structure/ico-comments.png);
	background-position: 2px 0;
	background-repeat: no-repeat;
	font-style: normal;
	padding-left: 22px;
}
#content .list-photos {
	list-style: none;
}
#content .list-photos li {
	overflow: hidden;
	width: 560px;	
}
#content .list-photos p { margin: 20px 0 0; }
#content .list-photos img { margin-bottom: 0; }
#content .list-photos .left { margin-right: 10px; }
#content .list-photos .right { margin-left: 10px; }
/* @end */

/* @group secondary content */
#content .secondary-content { font-size: 12px; }
#content .secondary-content .section { 
	background: rgba(0,0,0,.10); 
	border: 1px solid rgba(0,0,0,.15); 
	border-radius: 5px;
	margin-bottom: 20px; 
	-moz-border-radius: 5px; 
	padding: 10px;
	position: relative;
	-webkit-border-radius: 5px;
}
#content .secondary-content .section h3 { margin-bottom: 10px; }
#content .secondary-content .calendar .scroller-wrapper {
	overflow: hidden;
	position: relative;
}
#content .secondary-content .calendar .content {
	position: relative;
	top: 0;
	width: 100%;
}
#content .secondary-content .calendar h3 {
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}
#content .categories, #content .recent-articles, #content .roles { list-style: none; }
#content .categories li, #content .recent-articles li { padding: 0; }
#content .roles li { padding: 3px 5px; }
#content .categories a, #content .recent-articles a, #content .roles a {
	background: none; 
	border-bottom: none;
	display: block; 
	overflow: hidden;
	padding: 3px 5px;
	position: relative;
	-webkit-transition: background 0.25s ease-in;
	z-index: 100;
}
#content .categories em { display: block; float: right; position: relative; z-index: 100; }
#content .categories span {
	background: rgba(0, 0, 0, 0.1);
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transition: background 0.25s ease-in;
	z-index: 10;
}
#content .categories a:hover span { background-color: rgba(0, 0, 0, 0.2); }
#content .recent-articles a:hover, #content .roles a:hover { background-color: rgba(0, 0, 0, 0.2); }
#content .secondary-content .section :last-child { margin-bottom: 0; }
#content .secondary-content .calendar table {
	font-size: 11px;
	margin-bottom: 0;
	width: 100%;
}
#content .secondary-content .calendar th,
#content .secondary-content .calendar td {
	border: 1px solid rgba(0,0,0,0.1);
	text-align: center;
}
#content .secondary-content .calendar th {
	border-width: 0 0 1px;
	font-size: 13px;
}
#content .secondary-content .calendar td:first-child {
	border-left: none;
}
#content .secondary-content .calendar td:last-child {
	border-right: none;
}
#content .secondary-content .calendar tr:last-child td {
	border-bottom: none;
}
#content .secondary-content .calendar table a {
	border: none;
	display: block;
	padding: 0;
}
/* @end */

/* @group forms */
input, select, textarea, button { font: 12px/14px Helvetica, Arial, sans-serif; }
button { cursor: pointer; overflow: visible; }
label { cursor: pointer; }
.js .infield { text-transform: lowercase; }
.forms { list-style: none; }
.forms input, .forms textarea {
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 5px;
	color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-webkit-transition: background 0.25s ease-in;
}
.forms input:focus, .forms textarea:focus { background-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.5); outline: none; }
.forms .error { 
	display: block;
	font-size: 10px;
	font-style: italic;
	text-align: right;
}
/* @end */

/* @group footer */
#footer .about p:last-child { margin-bottom: 0; }
#footer ul { list-style: none; margin: 0; }
#footer h3 { margin-bottom: 10px; }
#footer h4 { font-size: 12px; margin-bottom: 4px; }
#footer .thumbs { float: left; }
#footer .thumbs li { background: rgba(0, 0, 0, 0.15); float: left; margin: 0 20px 20px 0; padding: 5px; -webkit-transition: background 0.25s ease-in; }
#footer .thumbs li:hover, #footer .thumbs li:focus { background: rgba(0, 0, 0, 0.25); }
#footer .thumbs .alt { margin-right: 0; }
#footer .thumbs a { 
	border-bottom: none;
	display: block; 
	height: 80px;
	overflow: hidden; 
	padding: 0;
	position: relative;
	width: 150px;
}
#footer .thumbs .small a { width: 90px; }
#footer .thumbs .large a { width: 210px; }
#footer .thumbs img { display: block; left: -33%; position: absolute; top: -50%; }
#footer .thumbs .large img { left: 0; }
#footer .thumbs .no-position { left: 0; top: 0; }
#footer .twitter { margin-left: 20px; }
#footer .twitter a {
	border: 1px solid rgba(0, 0, 0, 0.4); 
	border-radius: 5px;
	display: block; 
	-moz-border-radius: 5px;
	overflow: hidden; 
	padding: 10px;
	-webkit-border-radius: 5px;
	word-wrap: break-word;
}
#footer .photos { border-top: 1px solid rgba(0, 0, 0, 0.15); margin-top: 20px; padding-top: 20px; }
/* @end */

/* @group single article */
#blog .single-entry { padding-bottom: 20px; }
.social { 
	border: 1px solid rgba(0,0,0,.10);
	border-width: 1px 0;
	clear: both; 
	float: left; 
	margin: 0 0 20px;
	padding: 10px 0;
	width: 100%;
}
.social h3 { float: left; line-height: 30px; margin: 0 10px 0 0; }
.social ul { float: left; list-style: none; margin: 0; }
#content .social li { border-bottom: none; float: left; margin-right: 10px; padding: 0; }
#content .social ul a { 
	background: rgba(0, 0, 0, 0.25); 
	border-bottom: none;
	border-radius: 5px;
	display: block;
	-moz-border-radius: 5px;
	padding: 5px;
	-webkit-border-radius: 5px;
}
#content .social ul a:hover { background: rgba(0, 0, 0, 0.3); }
.social ul em { 
	background: url(/images/structure/ico-social.png);
	display: block;
	height: 20px;
	overflow: hidden;
	text-indent: -9999px; 
	width: 20px;
}
.social .stumbleupon em { background-position: -20px 0; }
.social .google em { background-position: -40px 0; }
.social .reddit em { background-position: -60px 0; }
.social .mixx em { background-position: -80px 0; }
.social .linkedin em { background-position: -100px 0; }
.social .facebook em { background-position: -120px 0; }
.social .digg em { background-position: -140px 0; }
.social .delicious em { background-position: -160px 0; }
#comments { clear: both; }
#comments h3 { font-size: 30px; line-height: 30px; text-align: right; }
#comments .comment { float: left; padding-bottom: 20px; width: 100%; }
#comments .comment :last-child { margin-bottom: 0; }
#comments .comment .contain { float: left; margin-top: 5px; width: 240px; }
#comments .comment h4 { color: #fff; float: right; font-size: 18px; margin-bottom: 10px; }
#comments .comment h4 a, #comments .comment h4 span { background: rgba(0, 0, 0, 0.35); display: block; padding: 5px; }
#comments .comment .date {
	background: rgba(0, 0, 0, 0.25);
	clear: right;
	display: block;
	float: right;
	font-size: 12px;
	padding: 5px;
}
#comments .comment .content { 
	background: rgba(0,0,0,.10); 
	border: 1px solid rgba(0,0,0,0.35);
	border-radius: 5px;
	float: right;
	font-size: 12px;
	-moz-border-radius: 5px;
	min-height: 40px;
	padding: 20px;
	-webkit-border-radius: 5px;
	width: 658px;
}
#comments .alt .content { background: rgba(0,0,0,.20); }
#comments #comment_form { clear: both; padding: 20px 0 0 240px; }
#comments #comment_form h3 { margin-left: 160px; text-align: left; }
#comments .forms li { 
	border-bottom: none; 
	clear: left; 
	float: left;
	margin-bottom: 10px; 
	padding: 0;
	position: relative;
	width: 100%;
}
#comments .forms label {
	background: rgba(0, 0, 0, 0.35);
	display: block;
	font-size: 18px;
	/*-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;*/
	padding: 5px 10px;
	position: absolute;
	right: 539px;
	top: 5px;
	z-index: 11;
}
#comments .forms input,
#comments .forms textarea {
	-moz-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	float: right; 
	font-size: 16px; 
	line-height: 20px; 
	padding: 10px 5px;
	position: relative;
	width: 528px;
	z-index: 10;
}
#comments .forms textarea { height: 300px; }
#comments .forms .inline label { float: right; position: static; padding-left: 30px; width: 500px; }
#comments .forms .inline input { 
	float: none; 
	left: 165px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 8px;
	width: auto;
}
#comments .forms .error { clear: both; }
#comments .forms button {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	-moz-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	color: #fff;
	float: right;
	font-size: 16px;
	-moz-border-radius: 5px;
	padding: 10px;
	position: relative;
	text-transform: uppercase;
	-webkit-border-radius: 5px;
}
#comments .forms button:hover {
	background: rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 0 10px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 10px rgba(255,255,255,0.5);
	box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
#comments .forms button:active { left: 1px; top: 1px; }
/* @end */

/* @group work hub */
.work-hub { float: left; list-style: none; width: 100%; }
#content .work-hub li, #content .search-results .work { 
	border-bottom: none; 
	float: left;
	margin: 0 20px 20px 0;
	padding: 0;
	position: relative;
	z-index: 10;
}
#content .work-hub a, #content .work-hub img, #content .search-results .work a, #content .search-results .work img { display: block; }
#content .work-hub a, #content .search-results .work a { border-bottom: none; padding: 10px; -webkit-transition: all 0.25s ease-in; }
#content .work-hub a:hover, #content .search-results .work a:hover, #content .work-hub a:focus, #content .search-results .work a:focus {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-backface-visibility: hidden;
}
#content .work-hub .dual a { height: 235px; width: 440px; }
#content .work-hub .quad a, #content .search-results .work .quad a { height: 115px; width: 200px; }
#content .work-hub .alt { margin-right: 0; }
#content .work-hub h2, #content .work-hub h3, #content .search-results .work h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	margin-bottom: 0;
	text-transform: none;
}
#content .work-hub h2 a, #content .work-hub h3 a, #content .search-results .work h2 a { padding: 10px; }
#content .work-hub .title, #content .search-results .work .title { 
	display: none;
	font-size: 16px;
	left: 10px;
	line-height: 20px;
	position: absolute;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	top: 10px;
	width: 200px;
}
#content .work-hub .dual .title { font-size: 26px; line-height: 30px; width: 440px; }
#content .work-hub .dual a:hover .title, #content .work-hub .quad a:hover .title, #content .search-results .work a:hover .title { display: block; }
/* @end */

/* @group individual work page */
#content .screenshots { float: left; list-style: none; width: 100%; }
#content .screenshots li { border: none; float: left; padding: 0; width: 580px; }
#content .screenshots a { background: rgba(0,0,0,0.25); border-bottom: none; display: block; padding: 5px; }
#content .screenshots img { display: block; }
.individual-work .primary-content { font-size: 12px; padding: 40px 0 20px; }
.individual-work .role { border-top: 1px solid rgba(0, 0, 0, 0.2); margin: 0 0 20px; padding: 20px 0 0; }
.individual-work .role ul { margin-bottom: 0; }
.individual-work .scroller .caption { display: block; font-style: normal; padding: 10px 10px 5px; }
.individual-work .other-projects {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  clear: both;
  overflow: hidden;
  padding-top: 20px;
  width: 100%;
}
.individual-work .other-projects h2 { margin-bottom: 10px; }
.individual-work .other-projects ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  width: 100%;
}
.individual-work #content .other-projects li {
  border: none;
  float: left;
  margin-right: 20px;
  padding: 0;
}
.individual-work #content .other-projects .last { margin-right: 0; }
.individual-work .other-projects a, .individual-work .other-projects img { display: block; }
.individual-work #content .other-projects a { border: none; padding: 10px; }
/*
.individual-work .nav-internal {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	list-style: none;
	overflow: hidden;
	padding-top: 20px;
	width: 100%;
}
.individual-work #content .nav-internal li { border: none; padding: 0; }
.individual-work .nav-internal .prev { float: left; }
.individual-work .nav-internal .next { float: right; }
.individual-work #content .nav-internal a { border: none; display: block; padding: 10px; position: relative; }
.individual-work .nav-internal img, .individual-work .nav-internal strong { display: block; }
.individual-work .nav-internal strong {
	left: 110px;
	position: absolute;
	top: 40px;
	white-space: nowrap;
}
.individual-work .nav-internal .next strong { left: auto; right: 110px; }
*/
/* @end */

/* @group scrollers */
.scroller { overflow: hidden; position: relative; }
.scroller-inner { position: relative; }
.nav-scroller,
.nav-pager,
.nav-calendar { float: right; list-style: none; margin: 0 0 10px; }
.nav-pager { float: left; }
.nav-calendar {
	display: none;
	float: none;
	margin: 0;
}
.js .nav-calendar {
	display: block;
}
#content .nav-scroller li,
#content .nav-pager li,
#blog #content .nav-pager a,
#blog #content .nav-pager strong,
#search #content .nav-pager a,
#search #content .nav-pager strong,
#content .nav-calendar li,
#content .nav-calendar a {
	border: none;
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
}
#content .nav-calendar a {
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
}
#content .nav-calendar .next a {
	left: auto;
	right: 0;
}
#content .nav-pager li,
#blog #content .nav-pager a,
#blog #content .nav-pager strong,
#search #content .nav-pager a,
#search #content .nav-pager strong {
	margin: 0 10px 0 0;
}
#content .nav-scroller a,
#content .nav-pager a,
#blog #content .nav-pager a,
#blog #content .nav-pager strong,
#search #content .nav-pager a,
#search #content .nav-pager strong,
#content .nav-calendar a {
	background: rgba(0,0,0,0.1);
	border-bottom: none;
	border-radius: 5px;
	display: block;
	font-size: 10px;
	line-height: 10px;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#content .nav-scroller a:hover,
#content .nav-pager a:hover,
#blog #content .nav-pager a:hover,
#search #content .nav-pager a:hover,
#content .nav-calendar a:hover {
	background: rgba(0,0,0,0.2);
}
#content .nav-scroller .current a,
#content .nav-pager .current a,
#blog #content .nav-pager strong,
#search #content .nav-pager strong {
	background: rgba(0,0,0,0.35);
}
/* @end */

/* @group contact */
#contact .forms { font-size: 20px; line-height: 50px; }
#contact .forms li { border: none; margin-bottom: 20px; padding: 0; position: relative; }
#contact .forms label { font-size: 16px; line-height: 20px; }
.js #contact .forms .infield { color: #fff; color: rgba(255, 255, 255, 0.85); margin: 13px 0 0 6px; }
#contact .forms input,
#contact .forms textarea {
	-moz-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	font-size: 16px;
	line-height: 20px;
	padding: 10px 5px;
}
#contact .forms input { width: 268px; }
#contact .forms textarea { display: block; height: 300px; width: 928px; }
#contact .forms button {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	-moz-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.5);
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	color: #fff;
	float: right;
	font-size: 16px;
	-moz-border-radius: 5px;
	padding: 10px;
	position: relative;
	text-transform: uppercase;
	-webkit-border-radius: 5px;
}
#contact .forms button:hover {
	background: rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 0 10px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 10px rgba(255,255,255,0.5);
	box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
#contact .forms button:active { left: 1px; top: 1px; }
/* @end */

/* @group homepage */
#home #content .work-hub li { margin-right: 0; }
#home #content .work-hub .alt { float: right; }
#content .blog-hub, #content .search-results { float: left; list-style: none; margin: 0; width: 100%; }
#content .blog-hub li, #content .search-results li { border-bottom: none; float: left; margin: 0 0 20px 0; padding: 0;  }
#content .search-results li { margin-right: 20px; }
#content .blog-hub .alt { float: right; }
#content .search-results .alt { margin-right: 0; }
#content .blog-hub a, #content .search-results .blog a {
	border-bottom: none;
	display: block;
	height: 115px; 
	overflow: hidden;
	padding: 10px;
	-webkit-transition: all 0.25s ease-in;
	width: 200px;
}
#content .blog-hub a:hover, #content .search-results .blog a:hover, #content .blog-hub a:focus, #content .search-results .blog a:focus {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-backface-visibility: hidden;
}
#content .blog-hub .dual a { height: 235px; width: 440px; }
#content .blog-hub strong, #content .search-results .blog strong { display: block; font-family: Aller, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 10px; }
#content .blog-hub .dual strong { font-size: 26px; line-height: 30px; }

	/* @group -blog landing */
	#blog #content .blog-hub li { margin-right: 20px; }
	#blog #content .blog-hub .alt { margin-right: 0; }
	#blog #content .blog-hub .dual a { height: 270px; }
	/* @end */
/* @end */

/* @group colorbox */
#colorbox, #cboxOverlay, #cboxWrapper { left: 0; position: absolute; top: 0; z-index: 9999; }
#cboxOverlay { 
	background: #000; 
	height: 100%; 
	overflow: hidden;
	position: fixed; 
	width: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft { clear: left; }
#cboxContent { position: relative; }
#cboxLoadedContent { overflow: auto; }
#cboxLoadedContent iframe { border: none; display: block; height: 100%; width: 100%; }
#cboxTitle, #cboxCurrent { color: #fff; font-size: 10px; position: absolute; top: -20px; }
#cboxTitle { left: 0; margin: 0; top: -20px; }
#cboxCurrent { right: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic { left: 0; position: absolute; top: 0; width: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }
#cboxPrevious {
	background: url(/images/structure/controls.png) no-repeat;
	height: 65px;
	left: 0;
	margin-top: -32px;
	position: absolute; 
	text-indent: -9999px;
	top: 50%;
	width: 28px; 
}
#cboxPrevious.hover { background-position: 0 100%; }
#cboxNext { 
	background: url(/images/structure/controls.png) no-repeat 100% 0; 
	height: 65px; 
	margin-top: -32px; 
	position: absolute; 
	right: 0;
	text-indent: -9999px;
	top: 50%;
	width: 28px;
}
#cboxNext.hover { background-position: 100% 100%; }
#cboxLoadingOverlay { background: #000; }
#cboxLoadingGraphic { background: url(/images/structure/loading.gif) no-repeat 50% 50%; }
#cboxClose {
	background: url(/images/structure/controls.png) no-repeat 50% 0;
	display: block; 
	height: 19px;
	position: absolute; 
	right: 5px;
	text-indent: -9999px;
	top: 0;
	width: 38px;
}
/* @end */


@media screen and (min-width: 460px) and (max-width: 939px) {
	.container {
		padding: 20px 0;
		width: 460px;
	}
	.nav-utility,
	#logo {
		margin-bottom: 20px;
	}
	#nav {
		float: left;
	}
	#nav li {
		margin: 0 3px 0 0;
	}
	#nav .nav-contact {
		margin-right: 0;
	}
	#feature p {
		font-size:  18px;
		line-height: 26px;
	}
	#footer .photos,
	#footer .bookmarks {
		display: none;
	}
	#footer .about {
		width: 280px;
	}
	#footer .twitter {
		float: right;
		width: 160px;
	}
	#about #content .primary-content,
	#about #content .secondary-content,
	#blog #content .primary-content,
	#blog #content .secondary-content {
		float: none;
		width: 460px;
	}
	#about #content .secondary-content {
		overflow: hidden;
	}
	#about #content .secondary-content .section {
		float: left;
		width: 198px;
	}
	#about #content .secondary-content .other-articles {
		float: right;
	}
	#blog #content .primary-content {
		float: left;
	}
	#blog #content .blog-hub .alt {
		float: left;
		margin-right: 20px;
	}
	#blog #content .blog-hub li:nth-child(2n+1),
	#work #content .work-hub li.quad:nth-child(2n) {
		float: left;
		margin-right: 0;
	}
	#blog #content .secondary-content {
		clear: both;
		float: left;
	}
	#blog #content .nav-pager {
		margin-bottom: 20px;
	}
	#comments .comment .contain {
		margin-top: 0;
		width: 100%;
	}
	#comments .comment .contain h4,
	#comments .comment .contain .date {
		clear: none;
		float: left;
	}
	#comments .comment .contain h4 {
		margin: 0 10px;
	}
	#comments .comment .content {
		width: 418px;
	}
	#comments #comment_form {
		padding-left: 0;
	}
	#comments #comment_form h3 {
		margin-left: 0;
	}
	#comments .forms label {
		display: inline-block;
		margin-left: 10px;
		position: static;
	}
	#comments .forms input,
	#comments .forms textarea {
		width: 448px;
	}
	#comments .forms .inline input {
		left: 10px;
	}
	#comments .forms .inline label {
		margin-left: 0;
		width: 420px;
	}
	.individual-work .primary-content,
	.individual-work .secondary-content,
	.individual-work #content .screenshots li {
		width: 460px;
	}
	.individual-work #content .screenshots img {
		height: auto;
		width: 450px;
	}
	.individual-work #content .other-projects li {
		margin-bottom: 20px;
	}
	.individual-work #content .other-projects li:nth-child(4n) {
		margin-right: 0;
	}
	#contact .forms textarea {
		width: 448px;
	}
	#content .search-results .alt {
		margin-right: 20px;
	}
	#content .search-results li:nth-child(2n) {
		margin-right: 0;
	}
}
@media screen and (max-width: 459px) {
	ul { list-style: none; }
	.col-16, .col-15, .col-14, .col-13, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { width: auto; }
	.left, .right { float: none; }
	.container {
		padding: 20px 10px;
		width: auto;
	}
	.nav-utility,
	#logo {
		margin-bottom: 20px;
	}
	#nav {
		float: left;
	}
	#nav li {
		margin: 0 10px 0 0;
	}
	#nav .nav-contact {
		margin-right: 0;
	}
	#nav a {
		background: rgba(0,0,0,0.1);
		border: 1px solid rgba(0,0,0,0.15);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		height: auto;
		padding: 5px;
		text-decoration: none;
		text-indent: 0;
		text-transform: lowercase;
		width: auto !important;
	}
	#nav a:hover,
	#nav a:active {
		background-color: rgba(0,0,0,0.15);
		border-color: rgba(0,0,0,0.2);
	}
	#home #nav .nav-home a,
	#about #nav .nav-about a,
	#blog #nav .nav-blog a,
	#work #nav .nav-work a,
	#contact #nav .nav-contact a {
		background-color: rgba(0,0,0,0.25);
		border: 1px solid rgba(0,0,0,0.3);
	}
	#feature p {
		font-size:  13px;
		line-height: 20px;
	}
	#footer .photos,
	#footer .bookmarks {
		display: none;
	}
	#footer .about {
		float: none;
		margin-bottom: 20px;
		width: 100%;
	}
	#footer .twitter {
		float: none;
		margin-left: 0;
		width: 100%;
	}
	#content .blog-hub li,
	#blog #content .blog-hub li,
	#content .work-hub li {
		float: none !important;
		margin-right: 0 !important;
	}
	#content .work-hub .quad {
		float: left !important;
		width: 48% !important;
	}
	#content .work-hub .quad.alt {
		float: right !important;
	}
	#work #content .work-hub li.quad:nth-child(2n) {
		float: right !important;
	}
	#content .blog-hub a,
	#content .work-hub a {
		height: auto !important;
		width: auto !important;
	}
	#content .blog-hub a:hover,
	#content .work-hub a:hover,
	#content .search-results a:hover,
	#content .blog-hub a:focus,
	#content .work-hub a:focus,
	#content .search-results a:focus {
		-moz-transform: scale(1) !important;
		-webkit-transform: scale(1) !important;
		transform: scale(1) !important;
		-webkit-backface-visibility: hidden !important;
	}
	#content .work-hub img,
	#content .search-results .work img {
		height: auto;
		margin: 0 auto;
		max-width: 100%;
	}
	#content .list-photos img {
		display: none;
	}
	#blog #content .primary-content {
		overflow: hidden;
		width: 100%;
	}
	#blog #content .nav-pager {
		margin-bottom: 20px;
	}
	#comments .comment .contain {
		margin-top: 0;
		width: 100%;
	}
	#comments .comment .contain h4,
	#comments .comment .contain .date {
		clear: none;
		float: left;
	}
	#comments .comment .contain h4 {
		margin: 0 10px;
	}
	#comments .comment .content {
		width: auto;
	}
	#comments #comment_form {
		padding-left: 0;
	}
	#comments #comment_form h3 {
		margin-left: 0;
	}
	#comments .forms label {
		display: inline-block;
		margin-left: 10px;
		position: static;
	}
	#comments .forms input,
	#comments .forms textarea {
		float: none !important;
		width: 95%;
	}
	#comments .forms .inline input {
		left: 10px;
	}
	#comments .forms .inline label {
		margin-left: 0;
		width: 90%;
	}
	.individual-work .primary-content {
		overflow: hidden;
		width: 100%;
	}
	.individual-work #content .scroller,
	.individual-work #content .screenshots li {
		width: 300px;
	}
	.individual-work #content .screenshots img {
		height: auto;
		max-width: 100%;
	}
	.individual-work #content .other-projects li {
		margin: 0 10px 10px 0;
	}
	#contact .forms {
		font-size: 14px;
		line-height: 22px;
	}
	#contact .forms textarea {
		height: 200px;
		width: 95%;
	}
}