html,body {
	height: 100%;
	min-width: 700px;
	}

body {
	background: #000;
	color: #ccc;
	font: 13px/1.7 "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif;
	overflow-y: scroll;
	overflow-x: hidden;
	}

* {
	border: 0;
	margin: 0;
	padding: 0;
	outline: none !important;
	}

*:active,
*:hover {
	outline: none !important;
	}

.clear { clear: both; }/* Animate me from to width: 2.5% to 45% */

.curtain {
	background: url(../i/3a/curtains_soft_bg.png) repeat-y top right;
	xbackground: #111;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	overflow: visible;
	margin: 100px 0 0 0;
	z-index: 5;
	width: 2.5%;
	height: 100%;
	}

.curtain.right {
	background: url(../i/3a/curtains_soft_bg.png) repeat-y top left;
	left: auto;
	right: 0;
	}
	

.curtain .blackout {
	background: transparent url(../i/3a/curtains_soft.png) repeat-y top right;
	position: absolute;
	top: 0;
	right: 0px;
	height: 100%;
	width: 500px;
	}

.curtain.right .blackout {
	background: transparent url(../i/3a/curtains_soft.png) repeat-y top left;
	right: auto;
	left: 0px;
	}.chunk {
	background: #ccc url(../i/type/21.png) repeat top left;
	background: #000;
	float: left;
	font-size: 1em;
	line-height: 21px;
	margin: 0 1% 0 0;
	padding: 0 1.75% 0 0;
	width: 30%;
	max-width: 35em;
	xmin-width: 18em;
	}

.double.chunk {
	width: 62.75%;
	max-width: 74em;
	}

.double.chunk img { xmax-width: 640px; }

.triple.chunk {
	width: 92.75%;
	max-width: 74em;
	}

/*
x#content p {
	color: #aaa;
	font-size: 15px;
	float: left;
	line-height: 21px;
	margin: 0px 3% 7px 0;
	width: 30%;
	max-width: 25em;
	min-width: 18em;
	}
*/

p {
	xbackground: #ccc;
	color: #aaa;
	font-size: 15px;
	line-height: 21px;
	padding: 0 0 21px 0;
	}

p.caption {
	color: #777;
	font-size: 14px;
	font-style: oblique;
	xtext-align: center;
	}

p a { color: #ccc; }

p a:hover { color: #fff; text-decoration: none; }

h1 {
	clear: left;
	}

h2 {
	background: #000;
	color: #fff;
	clear: left;
	padding: 21px 0 0 0;
	font-size: 25px;
	font-weight: 400;
	line-height: 42px;
	}

h3 {
	background: #000;
	color: #00a8ff;
	xfont-style: oblique;
	font-size: .9em;
	font-weight: 800;
	letter-spacing: 0.7px;
	line-height: 21px;
	text-transform: uppercase;
	}

h3 a { text-decoration: underline; }
h3 a:hover { text-decoration: none; }
/* Animate me (#top) AND #bottom from 100px to 50%; */

#top {
	background: transparent url(../i/sandwich/bg.png) repeat-x bottom center;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	padding: 0 0 26px 0;
	min-height: 100px;
	xheight: 50%;
	width: 100%;
	xmin-width: 700px;
	}

#top_map { /* A small map for just underneath the navigation */
	background: #000 url(../i/maps/blip.jpg) no-repeat 0 60px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 520px;
	width: 1920px;
	height: 75px;
	z-index: 6;
	}

#top_mask {
	background: #000;
	margin: 0 520px 0 0;
	position: relative;
	height: 75px;
	width: auto;
	z-index: 7;
	}#logo {
	background: url(../i/sandwich/logo/logo.jpg) no-repeat top left;
	xbackground: #ff0;
	display: block;
	position: absolute;
	margin: 0 0 0 10px;
	top: 18px;
	left: 1%;
	height: 65px;
	width: 65px;
	width: 200px;
	z-index: 50;
	}

.portfolio.detail #logo {
	xwidth: 200px;
	}

#logo span { display: none; }

#logo #logo_hover {
	background: url(../i/sandwich/logo/hover.jpg) no-repeat top left;
	display: block;
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 11;
	}

#logo a {
	background: transparent;
	cursor: pointer;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 65px;
	}

#logo span.santa {
	background: #000 url(../i/portfolio/noisefreak/mini.jpg) no-repeat center left;
	display: block;
	display: none;
	position: absolute;
	top: 0;
	left: 70px;
	text-indent: -500px;
	height: 65px;
	width: 150px;
	}

.portfolio_detail #logo .santa { display: block; }

.portfolio.noisefreak #logo span.santa {
	background: #000 url(../i/portfolio/noisefreak/mini.jpg) no-repeat center left;
	display: block; 
	}

.portfolio.girlgamer #logo span.santa {
	background-image: url(../i/portfolio/girlgamer/mini.jpg);
	display: block;
	}

.portfolio.thf #logo span.santa {
	background-image: url(../i/portfolio/thf/mini.jpg);
	display: block; 
	width: 250px;
	}

.portfolio.bullspot #logo span.santa {
	background-image: url(../i/portfolio/bullspot/mini.jpg);
	display: block; 
	width: 250px;
	}

.portfolio.aprilzero #logo span.santa {
	background-image: url(../i/portfolio/aprilzero/mini.jpg);
	display: block; 
	}

.portfolio.di08 #logo span.santa {
	background-image: url(../i/portfolio/di08/mini.jpg);
	display: block; 
	}	#navigation { /* #top #top_mask is positioned just under the navigation at z-index 9 */
		background: transparent url(../i/sandwich/navigation/frame.png) no-repeat 0 -25px;
			/* Black frame to pad and resize the nav easily, leaving only the #track uncovered */
			/* 60px black on top, 40px clear, 50px black bottom */
		overflow: hidden;
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 30px 20px 0px 0;
		width: 500px;
		height: 45px;
		z-index: 10;
		}

x.portfolio.detail #navigation {
	top: -20px;
	}

x.portfolio.detail #top_map {
	top: -20px;
	}

		#navigation ul {
			width: 500px;
			height: 30px;
			background: #555 url(../i/sandwich/navigation/text.gradient.png) no-repeat;
			background-position: -200px 0;
			}
		
		.static #navigation ul { background-position: -200px 0;}
		.portfolio.static #navigation ul { background-position: -100px 0;}
		.about.static #navigation ul { background-position:  00px 0;}
		.services.static #navigation ul { background-position: 100px 0;}
		.contact.static #navigation ul { background-position: 200px 0;}

		x.static #navigation ul { 
			background: #000;
			}
		
			#navigation li {
				list-style: none;
				float: left;
			
				width: 100px;
				height: 30px;
				}
			
				#navigation a {
					background: url(../i/sandwich/navigation/text.mask.png) no-repeat;
					color: #fff;
					cursor: pointer;
					display: block;
					position: absolute;
					height: 30px;
					text-decoration: none;
					text-indent: -4200px;
					width: 100px;
					}
				
				#n-home a { background-position: 0px 0px; }
				#n-portfolio a { background-position: -100px 0px; }
				#n-about a { background-position: -200px 0px; }
				#n-services a { background-position: -300px 0px; }
				#n-contact a { background-position: -400px 0px; }
				
				#navigation .hover {
					background: #b9b9b9;
					xbackground: #eee;
					background: #ccc;
					background: #fff;
					display: block;
					position: absolute;
					height: 30px;
					width: 100px;
					}
				
				.static #navigation .hover { display: none; }

	#track {
		position: relative;
		overflow: hidden;
		height: 15px;
		width: 500px;
		
		}
		
		#track-wrap {
			width: 900px;
			height: 15px;
			position: relative;
			top: 0px;
			left: 0px;
			}
			
			#track-mask {
				display: block;
				position: absolute;
				top: 0;
				left: -400px;
				width: 900px;
				height: 15px;
				}
	
			#blip {
				display: block;
				margin-left: -15px;
				position: absolute;
				top: 0;
				left: 0;
				width: 130px;
				height: 15px;
				}
			
/* Positioning for static set 


			'home': 		[0, 130],
			'portfolio': 	[1, 180],
			'details_noisefreak': 	[1, 180],
			'details_girlgamer': 	[1, 180],
			'about': 		[2, 140],
			'services': 	[3, 190],
			'contact': 		[4, 170]
		},
		
		
*/

body.static.portfolio #top_map { background-position: -1920px 60px !important; }
body.static.portfolio #navigation #blip { width: 180px; margin-left: -40px; }
body.static.portfolio #navigation #track-wrap { left: 100px; }

body.static.about #top_map { background-position: -3840px 60px !important; }
body.static.about #navigation #blip {	width: 140px; margin-left: -20px; }
body.static.about #navigation #track-wrap { left: 200px; }

body.static.services #top_map { background-position: -5760px 60px !important; }
body.static.services #navigation #blip {	width: 190px; margin-left: -45px; }
body.static.services #navigation #track-wrap { left: 300px; }

body.static.contact #top_map { background-position: -7680px 60px !important; }
body.static.contact #navigation #blip {	width: 170px; margin-left: -35px; }
body.static.contact #navigation #track-wrap { left: 400px; }

.subnav_container {
	display: none;
	position: absolute;
	left: 10px;
	bottom: 10px;
	width: 100%;
}

.subnav, .subnav_coverup {
	background: #000;
	display: block;
	padding: 0 1% 0 1.5%;
	position: absolute;
	left: 10px;
	bottom: 10px;
	height: 80px;
	width: 98.5%;
	z-index: 10;
	}

.subnav_coverup {
	display: none;
	}

.subnav li {
	background: #000;
	float: left;
	font-size: 1em;
	list-style: none;
	xmargin: 0 1% 0 0;
	padding: 0 1.75% 0 0;
	width: 30%;
	max-width: 33em;
	}

.subnav.quarters li {
	width: 22%;
	}

sample of chunk to match {
	float: left;
	font-size: 1em;
	line-height: 21px;
	margin: 0 1% 0 0;
	padding: 0 1.75% 0 0;
	width: 30%;
	max-width: 35em;
	xmin-width: 18em;
	}

.subnav li a {
	cursor: hover;
	display: block;
	text-decoration: none;
	height: 80px;
	}

.subnav li a span {
	color: #999;
	}

.subnav li a span.title {
	display: block;
	font-size: 24px;
	line-height: 35px;
	}

.subnav li a span.description {
	display: block;
	line-height: 16px;
	max-width: 20em;
	}

.subnav li a:hover span { color: #fff; }/* Animate me from height: 50% (fully closed) to height: 100px (content visible) */

#bottom {
	background: transparent url(../i/sandwich/bg.png) repeat-x top center;
	padding: 1px 0 25px 0;
	position: fixed;
	left: 0;
	bottom: 0;
	min-height: 100px;
	xheight: 50%;
	width: 100%;
	}

#bottom_mask {
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 75px;
	width: 100%;
	z-index: 9; /* toggle this to cover footer */
	}

.portfolio.noisefreak #bottom_mask,
.portfolio_di08 #bottom_mask,
.portfolio_bullspot #bottom_mask,
.portfolio_aprilzero #bottom_mask,
.portfolio_bullspot #bottom_mask,
.portfolio_thf #bottom_mask {
	z-index: 11;
	}

#footer {
	color: #777;
	font-size: 14px;
	margin: 0 0 0 10px;
	padding: 0 0 0 1.5%;
	position: absolute;
	bottom: 40px;
	text-align: left;
	z-index: 10;
	}

.toggleStatic {
	background: #000;
	margin: 0 0% 0 0;
	position: absolute;
	right: 45px;
	bottom: 40px;
	z-index: 15;
	z-index: 50000;
	}


.toggleStatic a {
	background: #000 url(../i/content/animations.jpg) no-repeat right 0;
	xbackground: #ccc;
	color: #777;
	display: block;
	line-height: 20px;
	height: 20px;
	padding:  0 0 0 20px;
	text-align: right;
	text-decoration: none;
	width: 100px;
	z-index: 50000;
	}

.toggleStatic a { background-position: right -40px; }
.toggleStatic a:hover { background-position: right -60px; }
.toggleStatic a:active,.toggleStatic a:focus { background-position: right -20px; }

.static .toggleStatic a { background-position: right 0px; }
.static .toggleStatic a:hover { background-position: right -20px; }
.static .toggleStatic a:active,.static .toggleStatic a:focus { background-position: right -40px; }

.toggleStatic a str { display: none; }

/* position patch*/
.portfolio.noisefreak .toggleStatic,
.portfolio.di08 .toggleStatic,
.portfolio.bullspot .toggleStatic,
.portfolio.aprilzero .toggleStatic,
.portfolio.girlgamer .toggleStatic,
.portfolio.thf .toggleStatic { bottom: 60px; }

.portfolio.noisefreak .toggleStatic a,
.portfolio.girlgamer .toggleStatic a,
.portfolio.thf .toggleStatic a,
.portfolio.bullspot .toggleStatic a,
.portfolio.aprilzero .toggleStatic a,
.portfolio.di08 .toggleStatic a { line-height: 17px; }

#bottom .pagination {
	background: transparent;
	padding: 0px 0 15px 0;
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 13px;
	bottom: 3px;
	z-index: 15;
	}

#bottom .pagination a {
	color: #aaa;
	display:block;
	font-size: 13px;
	line-height: 18px;
	text-decoration: none;
	}

#bottom .pagination a str {
	font-weight: 800;
	}

#bottom .pagination a:hover { color: #fff; }

#bottom .pagination span.current {
	background: #222;
	background: url(../i/content/pagination/current.jpg) no-repeat top right;
	color: #999;
	display:block;
	float: right;
	font-size: 14px;
	line-height: 18px;
	margin: 0 7px;
	padding: 0px 9px 0px 0;
	position: relative;
	}

#bottom .pagination span.current str {
	background: url(../i/content/pagination/current.jpg) no-repeat top left;
	color: #000;
	display: block;
	font-size: 13px;
	font-weight: 800;
	padding: 5px 1px 5px 10px;
	position: relative;
	xpadding: 0;
	height: 18px;
	}

#bottom .pagination span.current em {
	font-style: normal !important;
	position: relative;
	}

#bottom .pagination span.current em.highlight {
	background: transparent;
	display: block;
	color: #fff;
	font-style: normal !important;
	opacity: 0.08;
	position: absolute;
	top: 6px;
	left: 11px;
	}

#bottom .pagination .previous {
	background: #000 url(../i/icons/arrow_left.jpg) no-repeat left 8px;
	float: right;
	margin: 0 0 0 1.5%;
	padding: 5px 5px 0 21px;
	}

#bottom .pagination .next {
	background:  #000 url(../i/icons/arrow_right.jpg) no-repeat right 8px;
	float: right;
	margin: 0 20px 0 0;
	padding: 5px 23px 0 5px;
	}

#bottom .pagination .previous:hover {
	background-image: url(../i/icons/arrow_left_white.jpg);
	}

#bottom .pagination .next:hover {
	background-position: right -17px;
	}

x#bottom .pagination .next { float: right; }

#bottom .pagination .up {
	background: #000 url(../i/icons/arrow_left.jpg) no-repeat 1px 8px;
	font-size: 14px;
	margin: 0 0 0 -100px;
	margin: 0 0 0 0.9%;
	padding: 5px 0 0 22px;
	}

#bottom .pagination up:hover {
	background: #000 url(../i/icons/arrow_left_white.jpg) no-repeat left 8px;
	}

#bottom .pagination .up { float: left;}

#bottom .numbers {
	background: #000;
	position: absolute;
	left: 1.5%;
	width: 98.5%;
	bottom:  42px;
	z-index: 14;
	}


#bottom .numbers h3,
#bottom .numbers ul li {
	float: left; 
	}

#bottom .numbers h3 {
	line-height: 50px;
	padding: 0 0 0 10px;
	}

#bottom .numbers h3 a {
	color: #999;
	letter-spacing: 0.2px !important;
	text-decoration: none;
	}

#bottom .numbers h3 a:hover { color: #fff; }

#bottom .numbers ul {
	float: left;
	list-style: none;
	padding: 0 20px 0 10px;
	}

#bottom .numbers ul li {
	margin: 0 5px;
	}

#bottom .numbers ul a {
	color: #999;
	font-size: 28px;
	line-height: 50px;
	text-decoration: none;
	}

#bottom .numbers ul a:hover { color: #fff; }

#bottom .numbers ul a:active,#bottom .numbers ul a:focus { color: #00aeef; }

x#bottom .numbers ul li a { color: #00aeef; }

#bottom .seewhatwedid {
	background: #000;
	line-height: 25px;
	position: absolute;
	left: 1.5%;
	width: 98.5%;
	bottom:  35px;
	z-index: 14;
	}

#bottom .seewhatwedid span { float: left; }

#bottom .seewhatwedid a {
	color: #ccc;
	display: block;
	float: left;
	font-size: 24px;
	padding: 0 10px 0 10px;
	text-decoration: none;
	}

#bottom .seewhatwedid a:hover {
	color: #fff;
	text-decoration: none;
	}.sesame {
	background: #000;
	display: none;
	position: absolute;
	top: 0;
	left: -4px;
	height: 100%;
	width: 101%;
	}

#introcover {
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 42000;
	height: 100%;
	width: 100%;
	}


/** */
.static .robe_intro { display: none !important; }
.static .intro_cover { display: none; }

.static .shutter { height: 0; }
.static .curtain { width: 2.5%; }

/** */

.shutter { height: 50%; }
.curtain { width: 50% }

.robe_intro { background: #000; }

.intro_cover {
	position: absolute;
	left: 0;
	width: 100%;
	background: #000;
	z-index: 42000;
}


/* Temporary until intro anim works 
.robe_intro { display: none !important; }
.intro_cover { display: none; }

.shutter { height: 0; }
.curtain { width: 2.5%; }

/**/

#top .intro_cover {
	top: 0;
	height: 100px;
	}

#bottom .intro_cover {
	bottom: 0;
	height: 100px;
	}

.wizard {
	background: url(../i/maps/1px.jpg) repeat-y 0 0;
	position: absolute;
	left: 0;
	z-index: 4;
	height: 25px;
	width: 100%;
	}

#top .wizard {
	bottom: 25px;
	}

#bottom .wizard {
	top: 25px;
	z-index: 3;
	}

.wizard .mask {
	background: url(../i/3a/3a.png) no-repeat bottom center;
	height: 100%;
	width: 100%;
	z-index: 5;
	}

#bottom .wizard .mask {
	background-position: top center;
	height: 25px;
	}

.wizard .cover {
	background: transparent url(../i/3a/curtains.png) repeat-y top right;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 25px;
	}

.wizard .right.cover {
	background-position: top left;
	left: auto;
	right: 0;
	}

.spearhead {
	background: transparent url(../i/3a/spearhead.png) repeat-x bottom left;
	position: absolute;
	left: 0;
	opacity: 0.9;
	bottom: 0;
	height: 25px;
	width: 100%;
	z-index: 2;
	}

#bottom .spearhead {
	background: transparent url(../i/3a/spearhead.png) repeat-x top left;
	bottom: auto;
	top: 0;
	}

.robe {
	background: transparent;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	display: block;
	height: 25px;
	z-index: -1000;
	}

.robe_intro { background: #000; }
.robe_home { background: url(../i/maps/1px.jpg) repeat-y top left; }
.robe_portfolio { background: #009cff; }
.robe_about { background: #6cff4a; background: #4affca; }
.robe_services { background: #fdff18; }
.robe_contact { background: #f48809; }

.static.home .robe_home { z-index: -990; }
.static.portfolio .robe_portfolio { z-index: -991; }
.static.about .robe_about { z-index: -990; }
.static.services .robe_services { z-index: -990; }
.static.contact .robe_contact { z-index: -990; }

.static.girlgamer .robe_girlgamer { z-index: -980; }
.static.bullspot .robe_contact { z-index: -980; }
.static.thf .robe_thf { z-index: -980; }
.static.di08 .robe_di08 { z-index: -980; }
.static.aprilzero .robe_aprilzero { z-index: -980; }
.static.noisefreak .robe_noisefreak { z-index: -980; }
#content a .hover {
	background: #000;
	display: block;
	opacity: 0.15;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}#content {
	position: relative;
	background: #000;
	xbackground: #333 url(../i/type/21.png) repeat top left;
	padding: 100px 1% 110px 1.5%;
	margin: 00px 0 0 10px;
	}

	.c-section {
		xdisplay: none;
	}

	.static .c-section, /* static */
	.home.c-section /* animated */ {
		display: block;
	}

	/*
		top/min-height need some fiddling with
	*/
	#content .content-sections {
		display: none !important;
		
		position: relative;
		clear: left;
		min-height: 400px;
		}

body.portfolio.items #content {
	background: #000;
	padding: 0 0 0px 0;
	margin: 0;
	height: auto;
	}

img {
	-ms-interpolation-mode: bicubic;
}#forward {
	xbackground: #111;
	margin: -50px 0 0 -200px;
	position: absolute;
	left: 50%;
	top: 50%;
	text-align: center;
	height: 100px;
	width: 400px;
	z-index: 10;
	}

.mocha #forward { display: none; }

#forward { display: block; }

#forward h2 {
	background: transparent;
	line-height: 21px;
	padding: 0 0 21px 0;
	text-shadow: #000 0 0 0;
	}

#forward p {
	padding: 28px 0 0 0;
	}

#forward p a {
	color: #999;
	display: block;
	text-decoration: none;
	text-shadow: #000 0 0 0;
	}


#forward p a:hover { color: #fff; }#news {
	float: right;
	width: 250px;
	}#header img {
	clear: left;
	display: block;
	}

#header {
	background: #000;
	float: left;
	margin: 0 0 10px 0;
	overflow: hidden;
	width: auto;
	max-width: 1200px;
	}

.spacer {
	display: block;
	visibility: hidden;
	}

.portfolio.items #header { display: none; }#thor {
	overflow: visible;
	position: relative;
	}

#thor .cover {
	background: transparent url(../i/3a/spearhead2.png) repeat-x left -45px;
	xbackground: #fff;
	display: block;
	position: absolute;
	top: -25px;
	height: 25px;
	width: 100%;
	}

#thor .cover.top {
	height: 50px;
	top: -45px;
	}

#thor .cover.bottom {
	background-position: top left;
	top: auto;
	bottom: -10px;
	}

#thor .sizer {
	visibility: hidden;
	}

#thor .title {
	position: absolute;
	display: block;
	z-index: 0;
	}

/* Notes: Top 115% is essentially off the screen */

/* MAIN TITLE */
#thor #title_home {
	display: block;
	top: 0;
	left: 0;
	width: 65%;
	}

/* SUBTITLE */
#thor #title_portfolio {
	display: block;
	top: 17%;
	width: 50%;
	}

#title_portfolio { top: 17%; }
#title_about { top: 33.5%; }
#title_services { top: 50%; }
#title_contact { top: 66.5%; }
#title_subcontact { top: 83%; }
#odin {
	background: #000;
	display: block;
	position: absolute;
	top: 000%;
	height: 300%; /* this can vary a bit to change the spacing between the lot Ñ they're spaced at ~17% intervals */
	width: 100%;
	}

.static.portfolio #odin {
	top: -50%;
	}

.static.about #odin {
	top: -100%;
	}

.static.services #odin {
	top: -150%;
	}

.static.contact #odin {
	top: -200%;
	}

.static.portfolio #odin #title_portfolio { width: 65%; }
.static.about #odin #title_about { width: 65%; }
.static.services #odin #title_services { width: 65%; }
.static.contact #odin #title_contact { width: 65%; }

.static.portfolio #odin #title_home { display: none; }.home.c-section {
	background: #000;
	clear: left;
	width: 100%;
	padding: 1.5% 0 0 0;
	padding: 0;
	xmax-width: 1440px;
	}

.home.c-section .items {
	xmargin: 0 275px 0 0;
	}

.home.c-section .item {
	background: #fff;
	clear: left;
	float: left;
	margin: 0 1.5% 1.5% 0;
	position: relative;
	overflow: hidden;
	height: auto;
	max-height: 235px;
	max-height: 350px;
	height: 100%;
	width: 98.5%;
	xwidth: 75%;
	xmax-width: 1400px;
	}

.home.c-section .info {
	float: left;
	width: 20%;
	}

.home.c-section .info h2 {
	padding-top: 0;
	}

.home.c-section .info h2 a {
	color: #ccc;
	text-decoration: none;
	}

.home.c-section .info p {
	color: #999;
	font-size: 14px;
	}

.home.c-section .item img {
	float: right;
	min-width: 900px;
	text-align: center;
	visibility: visible;
	}

.home.c-section .item.half {
	clear: none;
	height: auto;
	max-height: 180px;
	max-height: 220px;
	width: 48.5%;
	}

.home.c-section .item.half img {
	min-width: 535px;
	min-width: auto;
	}

.home.c-section .item.third {
	max-height: 150px;
	width: 32.33%;
	}

.home.c-section .item.third img {
	min-width: 225px;
	min-width: auto;
	}

.home.c-section .item a {
	background: transparent;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-decoration: none;
	}

.home.c-section .item a span { display: none; }

.home.c-section .item a span.title {
	color: #fff;
	display: block;
	display: none;
	font-size: 35px;
	opacity: 0.7;
	line-height: 50px;
	position: absolute;
	bottom: 15px;
	right: 15px;
	}

.home.c-section .item a span.title.shadow {
	color: #000;
	opacity: 0.4;
	display: none;
	bottom: 14px;
	right: 14px;
	}


.home.c-section .item .patch {
	background: transparent  url(../i/content/patch7.png) no-repeat bottom right;
	display: block;
	position: absolute;
	height: 7px;
	width: 7px;
	}

.home.c-section .patch.one {
	top: 0;
	left: 0;
	}

.home.c-section .patch.two {
	background-position: bottom left;
	top: 0;
	right: 0;
	}

.home.c-section .patch.three {
	background-position: top left;
	bottom: 0;
	right: 0;
	}

.home.c-section .patch.four { 
	background-position: top right;
	bottom: 0;
	left: 0;
	}.portfolio_items {
	background: #000;
	clear: left;
	width: 100%;
	padding: 1.5% 0 0 0;
	padding: 0;
	xmax-width: 1440px;
	}

.portfolio_items .item {
	background: #fff;
	clear: left;
	float: left;
xdisplay: none;
	margin: 0 1.5% 1.5% 0;
	position: relative;
	overflow: hidden;
	height: auto;
	max-height: 235px;
	max-height: 275px;
	height: 100%;
	width: 98.5%;
	width: 75%;
	max-width: 1350px;
	}

.portfolio_items .info {
xdisplay: none;
	float: left;
	width: 20%;
	}

.portfolio_items .info h2 {
	padding-top: 0;
	line-height: 28px;
	padding: 0 0 7px 0;
	}

.portfolio_items .info h2 a {
	color: #ccc;
	line-height: 21px;
	text-decoration: none;
	}

.portfolio_items .info h2 a:hover {
	color: #fff;
	}

.portfolio_items .info p {
	color: #999;
	font-size: 14px;
	}

.portfolio_items .item img {
	float: right;
	min-width: 900px;
	text-align: center;
	visibility: visible;
	}

.portfolio_items .item.half {
	height: auto;
	max-height: 180px;
	max-height: 220px;
	width: 48.5%;
	}

.portfolio_items .item.half img {
	min-width: 535px;
	min-width: auto;
	}

.portfolio_items .item.third {
	max-height: 150px;
	width: 32.33%;
	}

.portfolio_items .item.third img {
	min-width: 225px;
	min-width: auto;
	}

.portfolio_items .item a {
	background: transparent;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}

.portfolio_items .item a span { display: none; }

.portfolio_items .item .patch {
	background: transparent  url(../i/content/patch7.png) no-repeat bottom right;
	display: block;
	position: absolute;
	height: 7px;
	width: 7px;
	}

.portfolio_items .patch.one {
	top: 0;
	left: 0;
	}

.portfolio_items .patch.two {
	background-position: bottom left;
	top: 0;
	right: 0;
	}

.portfolio_items .patch.three {
	background-position: top left;
	bottom: 0;
	right: 0;
	}

.portfolio_items .patch.four { 
	background-position: top right;
	bottom: 0;
	left: 0;
	}

.portfolio_items .item .curl,
.home .items .item .curl,
.portfolio .project a.image .curl {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	height: auto;
	width: 2px;
	min-width: 2px !important;
	z-index: 2;
	visibility: visible !important;
	}.portfolio.noisefreak #header,
.portfolio.girlgamer #header,
.portfolio.di08 #header,
.portfolio.bullspot #header,
.portfolio.thf #header,
.portfolio.aprilzero #header {
	display: none;
	}

.portfolio_detail {
	float: left;
	}

.portfolio.di08 a#image01 {
	display: block;
	overflow: hidden;
	max-height: 250px;
	width: 100%;
	}

.portfolio.di08 a#image01 img {
	xmax-height: 00px;
	xwidth: auto;
	}

.portfolio.girlgamer a#image01 {
	xbackground: url(../i/portfolio/girlgamer/logo.jpg) no-repeat center center;
	display: block;
	overflow: hidden;
	margin: 0px 0 0 0;
	max-height: 295px;
	xmax-height: auto;
	width: 100%;
	}

.portfolio.bullspot a#image01 {
	background: url(../i/portfolio/bullspot/logo.jpg) no-repeat center center;
	display: block;
	overflow: hidden;
	max-height: 270px;
	width: 100%;
	}

.portfolio.bullspot a#image01 img {
	xmargin: -15px 0 0 0;
	visibility: hidden;
	}

.portfolio.girlgamer a#image01 img {
	margin: -120px 0 0 0; /* max width */
	margin: -40px 0 0 0; /* 1024ish */
	}
x.portfolio.girlgamer a#image01 img { visibility: hidden; }

.portfolio .image {
	padding: 0px;
	position: relative;
	text-decoration: none;
	}

.portfolio .chunk .image {
	max-height: 175px;
	}

.portfolio.aprilzero #image01 {
	display: block;
	max-width: 350px;
	margin: 0 auto;
	}

.portfolio .image {
	display: block;
	float: left;
	margin: 0.5em 0 1em 0;
	padding: 0;
	overflow: hidden;
	max-height: 300px;
	}

.portfolio .image img {
	display: block;
	width: 100%;
	}

.portfolio .image .patch {
	background: transparent  url(../i/content/patch7.png) no-repeat bottom right;
	display: block;
	position: absolute;
	height: 7px;
	width: 7px;
	}

.portfolio .image .patch.one {
	top: 0;
	left: 0;
	}

.portfolio .image .patch.two {
	background-position: bottom left;
	top: 0;
	right: 0;
	}

.portfolio .image .patch.three {
	background-position: top left;
	bottom: 0;
	right: 0;
	}

.portfolio .image .patch.four { 
	background-position: top right;
	bottom: 0;
	left: 0;
	}

.portfolio .image .borderpatch {
	background: transparent  url(../i/content/patch7white.png) no-repeat bottom right;
	display: block;
	opacity: 0;
	position: absolute;
	height: 7px;
	width: 7px;
	}

.portfolio .image .borderpatch.one {
	top: 0;
	left: 0;
	}

.portfolio .image .borderpatch.two {
	background-position: bottom left;
	top: 0;
	right: 0;
	}

.portfolio .image .borderpatch.three {
	background-position: top left;
	bottom: 0;
	right: 0;
	}

.portfolio .image .borderpatch.four { 
	background-position: top right;
	bottom: 0;
	left: 0;
	}

.portfolio .image .number {
	color: #fff;
	display: block;
	font-size: 56px;
	line-height: 56px;
	opacity: 0.2;
	position: absolute;
	bottom: 10px;
	right: 10px;
	text-decoration: none;
	}

.noisefreak .image .number { color: #000; }

.bullspot .image .number { color: #000; }
.bullspot #image01 .number { color: #fff; }

x.portfolio .image:hover .number { opacity: 0.5; }

.portfolio a.image .border {	
	border: 1px solid #fff;
	display: block;
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	}

.portfolio .image:hover .borderpatch,
.portfolio .image:hover .border { xopacity: 0.5; }

.portfolio h3 a { color: #00aeef; xtext-decoration: none; }
.portfolio h3 a:hover { color: #00aeef; xtext-decoration: underline; }.static.portfolio.items #header { display: none; }

.static.portfolio.items #top .spearhead  { background-position: 0 -37px; }
.static.portfolio.items #bottom .spearhead  { background-position: 0 13px; }


.static.portfolio.items .c-section .screenshot img {
	position: relative;
	top: 0;
	left: 50%;
	margin: 100px 0 0 -960px;
	}
	
.static.portfolio.items .c-section img.midget {
	margin-left: 0;
	left: 0;
	}

.static.mocha.portfolio.items .art {
	background: #111;
	xborder: 10px solid #fff;
	display: block;
	position: relative;
	padding: 99px 0 99px 0;
	xoverflow: hidden;
	width: 100%;
	}

.static.mocha.portfolio.items .art.shrink {
	background: #000;
	display: block;
	}

.static.mocha.portfolio.items .art.shrink img {
	position: absolute;
	left: 0;
	top: 50%;
	margin: -200px 0 0 0; /* this needs to be changed on the fly */
	width: 100%;
	max-width: 1920px;
	}

.static.mocha.portfolio.items .screenshot {
	background: #111;
	display: block;
	xoverflow: hidden;
	position: relative;
	padding: 99px 0 99px 0;
	width: 100%;
	max-height: 60%;
	}

.portfolio_items .previous {
	background: transparent url(../i/portfolio/previous_light.png) no-repeat left 250px;
	display: block;
	opacity: 0.25;
	position: absolute;
	top:0px;
	left: 0;
	height: 100%;
	width: 35%;
	}

.portfolio_items .next {
	background: transparent url(../i/portfolio/next_light.png) no-repeat right 250px;
	display: block;
	opacity: 0.25;
	position: absolute;
	top: 0px;
	right: 0;
	height: 100%;
	width: 35%;
	}

x.portfolio_items .next:hover { background-image: url(../i/portfolio/next.png); }
x.portfolio_items .previous:hover { background-image: url(../i/portfolio/previous.png); }

.portfolio_items .next:hover,
.portfolio_items .previous:hover {
	opacity: 0.8;
	}
	
x.portfolio_items .next:active { background-image: url(../i/portfolio/next.png); }
x.portfolio_items .previous:active { background-image: url(../i/portfolio/previous.png); }

.static.mocha.portfolio.noisefreak.items .art#item01 { background: #000 url(../i/portfolio/noisefreak/logo.jpg) no-repeat center center; }
.static.mocha.portfolio.noisefreak.items .art#item01 img { display: none; }

.static.mocha.portfolio.noisefreak.items .screenshot#item04 { background: #000 url(../i/portfolio/noisefreak/home.jpg) no-repeat center 99px; height: 1043px; }
.static.mocha.portfolio.noisefreak.items .screenshot#item04 img { display: none; }

.static.mocha.portfolio.noisefreak.items .screenshot#item05 { background: #000 url(../i/portfolio/noisefreak/media.jpg) no-repeat center 99px; height: 1043px;}
.static.mocha.portfolio.noisefreak.items .screenshot#item05 img { display: none; }

.static.mocha.portfolio.aprilzero.items .art#item01 { background: #000 url(../i/portfolio/aprilzero/logo3.jpg) no-repeat center center; }
.static.mocha.portfolio.aprilzero.items .art#item01 img { display: none; }

.static.mocha.portfolio.aprilzero.items .art#item02 { background: #000 url(../i/portfolio/aprilzero/logo4.jpg) no-repeat center center; }
.static.mocha.portfolio.aprilzero.items .art#item02 img { display: none; }

.static.mocha.portfolio.aprilzero.items .art#item03 { background: #000 url(../i/portfolio/aprilzero/logo5.jpg) no-repeat center center; }
.static.mocha.portfolio.aprilzero.items .art#item03 img { display: none; }

.static.mocha.portfolio.aprilzero.items .screenshot#item04 { background: #000 url(../i/portfolio/aprilzero/home.jpg) no-repeat center 99px; height: 1109px; }
.static.mocha.portfolio.aprilzero.items .screenshot#item04 img { display: none; }

.static.mocha.portfolio.aprilzero.items .screenshot#item05 { background: #000 url(../i/portfolio/aprilzero/post.jpg) no-repeat center 99px; height: 3118px;}
.static.mocha.portfolio.aprilzero.items .screenshot#item05 img { display: none; }

.static.mocha.portfolio.aprilzero.items .screenshot#item06 { background: #000 url(../i/portfolio/aprilzero/post2.jpg) no-repeat center 99px; height: 1550px;}
.static.mocha.portfolio.aprilzero.items .screenshot#item06 img { display: none; }

.static.mocha.portfolio.girlgamer.items .art#item01 { background: #000 url(../i/portfolio/girlgamer/rock.jpg) no-repeat center center; }
.static.mocha.portfolio.girlgamer.items .art#item01 img { display: none; }

.static.mocha.portfolio.girlgamer.items .art#item02 { background: #000 url(../i/portfolio/girlgamer/butterflies.jpg) no-repeat center center; }
.static.mocha.portfolio.girlgamer.items .art#item02 img { display: none; }

.static.mocha.portfolio.girlgamer.items .art#item03 { background: #000 url(../i/portfolio/girlgamer/logo2.jpg) no-repeat center center; }
.static.mocha.portfolio.girlgamer.items .art#item03 img { display: none; }

.static.mocha.portfolio.girlgamer.items .screenshot#item04 { background: #000 url(../i/portfolio/girlgamer/home.jpg) no-repeat center 99px; height: 1557px; }
.static.mocha.portfolio.girlgamer.items .screenshot#item04 img { display: none; }

.static.mocha.portfolio.girlgamer.items .screenshot#item05 { background: #000 url(../i/portfolio/girlgamer/game.jpg) no-repeat center 99px; height: 1744px;}
.static.mocha.portfolio.girlgamer.items .screenshot#item05 img { display: none; }

.static.mocha.portfolio.girlgamer.items .screenshot#item06 { background: #000 url(../i/portfolio/girlgamer/forum.jpg) no-repeat center 99px; height: 1076px;}
.static.mocha.portfolio.girlgamer.items .screenshot#item06 img { display: none; }

.static.mocha.portfolio.di08.items .art#item04 { background: #000 url(../i/portfolio/di08/logo3.jpg) no-repeat center center; }
.static.mocha.portfolio.di08.items .art#item04 img { display: none; }

.static.mocha.portfolio.di08.items .art#item05 { background: #000 url(../i/portfolio/di08/logo2.jpg) no-repeat center center; }
.static.mocha.portfolio.di08.items .art#item05 img { display: none; }

.static.mocha.portfolio.di08.items .screenshot#item01 { background: #000 url(../i/portfolio/di08/home.jpg) no-repeat center 99px; height: 911px; }
.static.mocha.portfolio.di08.items .screenshot#item01 img { display: none; }

.static.mocha.portfolio.di08.items .screenshot#item02 { background: #000 url(../i/portfolio/di08/about.jpg) no-repeat center 99px; height: 1744px;}
.static.mocha.portfolio.di08.items .screenshot#item02 img { display: none; }

.static.mocha.portfolio.di08.items .screenshot#item03 { background: #000 url(../i/portfolio/di08/labs.jpg) no-repeat center 99px; height: 1076px;}
.static.mocha.portfolio.di08.items .screenshot#item03 img { display: none; }

.static.mocha.portfolio.thf.items .art#item05 { background: #000 url(../i/portfolio/thf/emblem.jpg) no-repeat center center; }
.static.mocha.portfolio.thf.items .art#item05 img { display: none; }

.static.mocha.portfolio.thf.items .art#item06 { background: #000 url(../i/portfolio/thf/logotype.jpg) no-repeat center center; }
.static.mocha.portfolio.thf.items .art#item06 img { display: none; }

.static.mocha.portfolio.thf.items .screenshot#item01 { background: #000 url(../i/portfolio/thf/home.jpg) no-repeat center 99px; height: 1557px; }
.static.mocha.portfolio.thf.items .screenshot#item01 img { display: none; }

.static.mocha.portfolio.thf.items .screenshot#item02 { background: #000 url(../i/portfolio/thf/order2.jpg) no-repeat center 99px; height: 1076px;}
.static.mocha.portfolio.thf.items .screenshot#item02 img { display: none; }

.static.mocha.portfolio.thf.items .screenshot#item04 { background: #000 url(../i/portfolio/thf/home2.jpg) no-repeat center 99px; height: 1744px;}
.static.mocha.portfolio.thf.items .screenshot#item04 img { display: none; }

.static.mocha.portfolio.thf.items .screenshot#item03 { background: #000 url(../i/portfolio/thf/order1.jpg) no-repeat center 99px; height: 1744px;}
.static.mocha.portfolio.thf.items .screenshot#item03 img { display: none; }

.static.mocha.portfolio.bullspot.items .art#item01 { background: #000 url(../i/portfolio/bullspot/wallpaper.jpg) no-repeat center center; }
.static.mocha.portfolio.bullspot.items .art#item01 img { display: none; }

.static.mocha.portfolio.bullspot.items .screenshot#item02 { background: #000 url(../i/portfolio/bullspot/home.jpg) no-repeat center 99px; height: 1037px; }
.static.mocha.portfolio.bullspot.items .screenshot#item02 img { display: none; }

.static.mocha.portfolio.bullspot.items .screenshot#item03 { background: #000 url(../i/portfolio/bullspot/board.jpg) no-repeat center 99px; height: 1506px; }
.static.mocha.portfolio.bullspot.items .screenshot#item03 img { display: none; }

.static.mocha.portfolio.bullspot.items .screenshot#item04 { background: #000 url(../i/portfolio/bullspot/profile.jpg) no-repeat center 99px; height: 1069px;}
.static.mocha.portfolio.bullspot.items .screenshot#item04 img { display: none; }

.static.mocha.portfolio.bullspot.items .screenshot#item05 { background: #000 url(../i/portfolio/bullspot/lightbox.jpg) no-repeat center 99px; height: 1040px;}
.static.mocha.portfolio.bullspot.items .screenshot#item05 img { display: none; }

.static.mocha.portfolio.bullspot.items .screenshot#item06 { background: #000 url(../i/portfolio/bullspot/25b.jpg) no-repeat center 99px; height: 1024px;}
.static.mocha.portfolio.bullspot.items .screenshot#item06 img { display: none; }


.static.mocha.portfolio.items .description {
	background: transparent url(../i/content/black50.png) repeat;
	color: #ccc;
	max-width: 20em;
	line-height: 21px;
	position: absolute; /* set to position fixed for non-static */
	left: 1.5%;
	bottom: 125px;
	padding: 10px;
	xz-index: 5;
	}

.portfolio.items .description a { color: #fff; }

.static.mocha.portfolio.items .screenshot .description {
	top: 125px;
	bottom: auto;
	}.portfolio.girlgamer h3,
.portfolio.girlgamer h3 a {
	color: #ff1b99;
	}

.portfolio.di08 h3,
.portfolio.di08 h3 a {
	color: #ff9600;
	}

.portfolio.bullspot h3,
.portfolio.bullspot h3 a {
	color: #ed1c24;
	}

.portfolio.aprilzero h3,
.portfolio.aprilzero h3 a {
	color: #00aeef;
	}

.portfolio.thf h3,
.portfolio.thf h3 a {
	color: #ff9600;
	color: #ff901a;
	}

.portfolio.noisefreak h3,
.portfolio.noisefreak h3 a {
	xcolor: #ff9600;
	}

.robe_girlgamer { background: #ff1b99; }
.robe_di08 { background: #ff9600; }
.robe_aprilzero { background: #00aeef; }
.robe_thf { background: #ff901a; }