@import url(reset.css);

/* Reset CSS */
body {
	background:rgba(73,84,102,1) url(../img/bg-body.png) repeat 0 0;
	font:normal 12px/1.45 'ColaborateLightRegular', Arial, Helvetica, sans-serif;
	color:rgba(255,255,255,1);
	text-align:center}

#container {
	text-align:left;
	position:relative;
	width:760px;
	margin:0 auto;
	padding-bottom:40px}

@font-face {
    font-family: 'StMarieThin';
    src: url('../fonts/st-marie/StMarie-Thin-webfont.eot');
    src: url('../fonts/st-marie/StMarie-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/st-marie/StMarie-Thin-webfont.woff') format('woff'),
         url('../fonts/st-marie/StMarie-Thin-webfont.ttf') format('truetype'),
         url('../fonts/st-marie/StMarie-Thin-webfont.svg#StMarieThin') format('svg');
    font-weight: normal;
    font-style: normal}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'StMarieThin';
		src: url('../fonts/st-marie/StMarie-Thin-webfont.svg') format('svg')}
}

@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('../fonts/colaborate/ColabThi-webfont.eot');
    src: url('../fonts/colaborate/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/colaborate/ColabThi-webfont.woff') format('woff'),
         url('../fonts/colaborate/ColabThi-webfont.ttf') format('truetype'),
         url('../fonts/colaborate/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal}

@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('../fonts/colaborate/ColabLig-webfont.eot');
    src: url('../fonts/colaborate/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/colaborate/ColabLig-webfont.woff') format('woff'),
         url('../fonts/colaborate/ColabLig-webfont.ttf') format('truetype'),
         url('../fonts/colaborate/ColabLig-webfont.svg#ColaborateLightRegular') format('svg');
    font-weight: normal;
    font-style: normal}

@font-face {
    font-family: 'ColaborateRegular';
    src: url('../fonts/colaborate/ColabReg-webfont.eot');
    src: url('../fonts/colaborate/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/colaborate/ColabReg-webfont.woff') format('woff'),
         url('../fonts/colaborate/ColabReg-webfont.ttf') format('truetype'),
         url('../fonts/colaborate/ColabReg-webfont.svg#ColaborateRegular') format('svg');
    font-weight: normal;
    font-style: normal}

@font-face {
    font-family: 'ColaborateMediumRegular';
    src: url('../fonts/colaborate/ColabMed-webfont.eot');
    src: url('../fonts/colaborate/ColabMed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/colaborate/ColabMed-webfont.woff') format('woff'),
         url('../fonts/colaborate/ColabMed-webfont.ttf') format('truetype'),
         url('../fonts/colaborate/ColabMed-webfont.svg#ColaborateMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal}

@font-face {
    font-family: 'ColaborateBoldRegular';
    src: url('../fonts/colaborate/ColabBol-webfont.eot');
    src: url('../fonts/colaborate/ColabBol-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/colaborate/ColabBol-webfont.woff') format('woff'),
         url('../fonts/colaborate/ColabBol-webfont.ttf') format('truetype'),
         url('../fonts/colaborate/ColabBol-webfont.svg#ColaborateBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal}

/* Headings ------------------- */
h1,h2,h3,h4 {
	line-height:1.2;
	font-weight:100;
	font-family:'StMarieThin';
	text-shadow:0 -1px 1px rgba(255,255,255,0.1)}

h1 {   
	color:rgba(255,255,255,1);
	font-family:'StMarieThin';  
	font-size:60px;
	line-height:1;
	margin:20px 0 10px;
	text-shadow:0 -1px 1px rgba(255,255,255,0.1)}

h1 span {
	font-weight:100;
	font-size:40px;
	color:rgba(255,255,255,1);
	display:block}

h2 {
	font-family:'ColaborateLightRegular';
	font-size:21px;
	line-height:1.4;
	letter-spacing:0}

h3 {
	font-family:'ColaborateLightRegular';
	font-size:18px;
	margin-bottom:15px}

h4 {
	font-size:12px;
	letter-spacing:0}

h1+h2 {
	font-weight:400}

.project-text ul li span:first-child  {
	font-family:'ColaborateRegular';}

/* Links ------------------- */
a:link, a:visited {
	color:rgba(23,179,238,1);
	text-decoration:underline;
	display:inline-block;
	border-bottom:1px solid rgba(69,204,255,0.25);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration:none}

a:hover {
	color:rgba(69,204,255,1);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border-bottom-color:rgba(69,204,255,0.5);}

/* Lists ------------------- */
ul {
	list-style:none outside}

ol {
	list-style:decimal inside}

ul ul,ol ol {
	margin:0}

p {
	font-size:14px}

p strong, li strong {
	font-family: 'ColaborateRegular';
	font-weight:100}

#contact label {
	font-family: 'ColaborateMediumRegular';}

/* Buttons ------------------- */
a.btn {
	background:rgba(255,255,255,0.8);
	text-shadow:0 1px 0 rgba(255,255,255,0.5);	
	color:rgba(0,0,0,0.8);
	text-decoration:none;
	letter-spacing:0;
	padding:4px 8px;
	font-size:12px}

a.btn:hover {
	background:rgba(255,255,255,0.8);
	color:rgba(0,0,0,0.8);
	text-shadow:none}

a.btn:active {
	position:relative;
	top:1px}

a.closeme {
	background:url(../img/close.png);
	text-indent:-9999px;
	display:block;
	width:16px;
	height:16px;
	padding:0}

a.closeme:hover {
	background-position:0 -16px}

a.closeme:active {
	position:relative;
	top:1px!important}

a.btn.project-enlarge {
	background:url(../img/zoom.png)!important;
	text-indent:-9999px;
	display:block;
	width:16px;
	height:16px;
	padding:0}

a.btn.project-enlarge:hover {
	background-position:0 -16px!important}

/* Header ------------------- */
header {
	overflow:hidden;
	padding-bottom:20px;
	position:relative}

	header.subpage {
		border-bottom:1px solid;
		margin-bottom:15px}

#logo {
	display:block;
	width:150px;
	height:94px;
	background:transparent url(../img/logo-wh.png) no-repeat 0 -2px;
	text-indent:-5000px;
	-webkit-box-shadow: 0px 3px 2px rgba(50, 50, 50, 0.2);
	-moz-box-shadow:    0px 3px 2px rgba(50, 50, 50, 0.2);
	-o-box-shadow:    0px 3px 2px rgba(50, 50, 50, 0.2);
	box-shadow:         0px 3px 2px rgba(50, 50, 50, 0.2);
	margin-bottom:2px;
	padding-top:2px;
	border-bottom:0}
	
	#logo:hover {
		margin-bottom:0px;
		padding-top:4px;
		background-position:0 0}

	#log-in-out {
		position:absolute;
		top:0;
		right:0;
		color:rgba(255,255,255,0.5);
		text-decoration:none;
		padding:3px;
		border:0}
		
		#log-in-out:hover {
			color:rgba(255,255,255,1)}

/* Content layout */

#content-blurb {
	float:left;
	width:280px;
	background:transparent}

#blurb-thumbnails {
	float:left;
	width:150px;
	padding-top:6px}
	
	#blurb-thumbnails ul li a {
		display:block;
		position:relative;
		height:128px;
		background:rgba(255,255,255,1) url(../img/icons/loading.gif) no-repeat 50% 50%;
		border:1px solid rgba(204,204,204,1);
		margin:0 0 20px 20px;}
	
	#blurb-thumbnails ul li a>span,
	#blurb-thumbnails ul li a>span span {
		background-image:url(../img/default/default-thumb.jpg);
		background-color:transparent;		
		background-repeat: no-repeat}
	
	#blurb-thumbnails ul li a>span {
		position:absolute;
		top:8px; left:8px; right:8px; bottom:8px;
		background-position:50% 0;
		-moz-box-shadow:    inset 0 0 2px rgba(0,0,0,0.2);
		-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
		box-shadow:         inset 0 0 2px rgba(0,0,0,0.2)}	

		#blurb-thumbnails ul li a>span span {
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			background-position:50% 100%;
			text-indent: -9999px;
			
			-moz-box-shadow:    inset 0 0 2px rgba(0,0,0,0.3);
			-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
			box-shadow:         inset 0 0 2px rgba(0,0,0,0.3);
				
			-webkit-transition: opacity 0.5s;
			-moz-transition:    opacity 0.5s;
			-o-transition:      opacity 0.5s;
			opacity:0;
			
			border:1px solid rgba(239,239,239,1);
			text-indent:-5000px}

		#blurb-thumbnails ul li a>span span:hover {
			opacity:1}	
			
	#blurb-thumbnails ul li:first-child a>span,
	#blurb-thumbnails ul li:first-child a>span span {
			background-image:url(../img/projects/commodity-vectors/cv-thumb-small.png)}
			
	#blurb-thumbnails ul li:nth-child(2) a>span,
	#blurb-thumbnails ul li:nth-child(2) a>span span {
			background-image:url(../img/projects/thomson-reuters/tr-thumb-small.png)}			
			
	#blurb-thumbnails ul li:last-child a>span,
	#blurb-thumbnails ul li:last-child a>span span {
			background-image:url(../img/projects/complinet/complinet-thumb-small.png)}
			
#content-blurb p {
	text-align:justify}

/* Intro ------------------- */
#intro {
	border:1px solid rgba(255,255,255,0.15);
	border-width:1px 0;
	margin-bottom:20px;
	xpadding:12px 0 0}

	#intro h2 a {
		font-weight:700;
		display:inline;
		position:relative;
		top:-1px;
		margin-left:2px;
		padding:3px 8px}
	
		#intro h2 a:active {
			top:0}

a#open-about {
	background:url(../img/trans.png)!important}

a#open-about span {
	background:url(../img/penabout.gif) no-repeat 100% 5px!important;
	padding-right:15px!important}

a#open-about:hover {
	background:#373635!important}

a#open-about:hover span {
	background-position:100% -20px!important}

#about {
	display:none;
	position:relative}

*+html #about {
	min-height:1%;
	padding-bottom:20px}

/* IE Fix */
#about:after {
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden}

#about img {
	margin-bottom:10px}

#about img+p {
	color:rgba(54,53,52,1)}

#about ul {
	margin:0 8px 15px}
	
	#about li {
		background:url(../img/icons/bullet.png) no-repeat 0 2px;
		margin-bottom:8px;
		padding:0 16px}
	
	*+html #about li {
		min-height:1%}

/* IE Fix */
#about li h3 {
	font-size:12px;
	line-height:1.4;
	letter-spacing:0;
	margin:0}

#about li p {
	color:rgba(255,255,255,1);
	margin:0}

#about>div {
	float:left}

#about div.about-panel {
	width:500px;
	border-top:1px solid rgba(163,162,158,1));}

#about div#about-me {
	background:transparent url(../img/trans.png);
	width:220px;
	margin:0 0 20px 20px;
	padding:10px 10px 5px;
	color:rgba(255,255,255,1)}

#about div#about-me h3 {
	padding-top:230px;
	background:transparent url(x../img/gordon-elliott.jpg) no-repeat 0 0}

#about div#about-me p {
	margin-bottom:10px}
	
#about div#about-me a {
	color:rgba(255,255,255,1);
	white-space:nowrap}

#about div#about-me a:hover {
	color:rgbs(0,0,0,1)}

#close-about {
	position:absolute;
	top:-33px;
	right:0}

#close-about:active {
	top:-32px!important; }

p#status {
	background:rgba(225,223,220,1);
	position:absolute;
	top:15px;
	right:0;
	padding:3px 10px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-border-radius:10px}

/* Portfolio ------------------- */
#portfolio { 
	width:780px;
	overflow:hidden;
	margin:0 0 0 -20px}

*+html #portfolio {
	padding-bottom:20px}

/* IE Fix */

.project {
	background:rgba(255,255,255,0.9);
	border:1px solid rgba(255,255,255,1);
	color:rgba(108,108,108,1);	
	float:left;
	position:relative;
	min-height:285px;
	width:218px;
	margin:0 0 20px 20px;
	padding:10px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease}

	.project:hover {
		background:rgba(255,255,255,1);
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease}

.project a {
	text-decoration:none;
	color:rgba(108,108,108,1);
	border-bottom:0}

.project a.project-thumb a {
	display:block;
	border-bottom:0}

.project a.project-thumb span.thumbnail {
	display:block;
	height:180px;
	width:218px;
	position: relative;
	background-image:url(../img/default/default-thumb.jpg);
	background-color:transparent;		
	background-repeat: no-repeat;
	background-position:0 0;
	-moz-box-shadow:    inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	box-shadow:         inset 0 0 4px rgba(0,0,0,0.2)}
	
	.project a.project-thumb span.thumbnail span {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		background-image:url(../img/default/default-thumb.jpg);
		background-color:transparent;		
		background-repeat: no-repeat;
		background-position:0 100%;
		text-indent: -9999px;
				
		-moz-box-shadow:    inset 0 0 2px rgba(0,0,0,0.3);
		-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
		box-shadow:         inset 0 0 2px rgba(0,0,0,0.3);
			
		-webkit-transition: opacity 0.5s;
		-moz-transition:    opacity 0.5s;
		-o-transition:      opacity 0.5s;
		opacity:0}	
		
		.project a.project-thumb span.thumbnail span:hover,
		.project:hover a.project-thumb span.thumbnail span {
			opacity:1}	

.project h3 {
	font-weight:100;
	font-size:16px;
	line-height:1.4;
	color:rgba(77,160,252,1);
	letter-spacing:0;
	margin:10px 0 0 0}

.project h3+p em {
	display:block;
	margin-top:6px}
	
	.project p {
		margin:0}	
	
	.project p.tags {
		margin:4px 0 8px}	

.project .btn.project-enlarge {
	position:absolute;
	bottom:10px;
	left:8px}

.project .btn.project-enlarge:active {
	top:auto;
	bottom:9px}

.project>div {
	display:none;
	width:820px;
	height:520px;
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0}

.project-images {
	float:left;
	width:500px;
	height:500px;
	overflow:hidden;
	z-index:1;
	background:transparent url(../img/icons/loading.gif) no-repeat 50% 30%}

	.project-images span {
		height:450px;
		text-indent:-5000px;
		width:100%;
		display:block;
		text-align:left;
		background-color:transparent;
		background-repeat:no-repeat;
		background-position:0;
		background-image:url(../img/default/default-background.png)}	

.project-text {
	color:rgba(108,108,108,1);	
	text-align:left;
	float:left;
	width:300px;
	padding:40px 20px 0}

	.project-text h3 {
		font-size:20px;
		line-height:1.2;
		letter-spacing:0;
		margin:0 0 15px 0;
		font-weight:100}
	
	.project-text ul {
		margin:0}
		
		.project-text ul li {
			overflow:hidden;
			margin-bottom:10px;
			font-size:14px}
		
		.project-text ul ul li {
			margin:0}
		
		.project-text ul.jobs li {
			background:url(../img/icons/bullet.png) no-repeat 0 5px;
			padding:0 0 0 16px}

.project-text ul li span,
.project-text li ul,
.project-text ul ul {
	float:right;
	width:210px}

.project-text ul li em {
	font-style:normal}

.project-text ul li span:first-child {
	float:left;
	width:70px;
	background:transparent}

.project-text ul li span.light {
	color:rgba(153,153,153,1)}

.new {
	background:rgba(55,207,194,1);
	font-weight:700;
	font-size:9px;
	color:rgba(255,255,255,1);
	position:relative;
	top:-1px;
	margin-left:1px;
	padding:1px 4px}

.navigation {
	text-align:center;
	position:absolute;
	bottom:20px;
	left:0;
	z-index:10;
	width:500px;
	height:8px}

.navigation a {
	background:url(../img/projectnav.png) 0 0;
	display:inline-block;
	width:10px;
	height:10px;
	margin:0 2px;
	text-indent:-9999px;
	z-index:20;
	border-bottom:0;}

*+html .navigation a {
	text-indent:0;
	height:0;
	overflow:hidden;
	padding-top:10px}

/* IE Fix */
.navigation a:hover {
	background-position:0 -10px;
	color:rgba(55,54,53,1)}

.navigation a.activeSlide {
	background-position:0 -20px;
	color:rgba(255,255,255,1)!important;
	text-shadow:none}

/* Contact ------------------- */

#contact-footer {
	overflow:hidden;
	border:1px solid rgba(255,255,255,0.25);
	border-width:1px 0;
	margin-bottom:16px;
	padding:18px 0 15px;
	clear:both}

	#contact-footer h3 {
		font-weight:400;
		font-size:14px;
		line-height:1.4;
		letter-spacing:0;
		text-shadow:none;
		float:left;
		margin:0}
		
		#contact-footer h3 span {
			display:block}
	
	#contact-footer p {
		float:left;
		margin:0 0 0 30px}

/* Footer ------------------- */
footer,    
footer p,
footer ul  {
	overflow:hidden}

	footer ul {
		float:right;
		margin:0}
	
		footer ul li {
			display:inline}
		
		footer ul a {
			background-position:0 0;
			background-repeat:no-repeat;
			text-indent:9999px;
			float:left;
			height:16px;
			width:16px;
			margin-right:6px}
			
			footer ul a:hover {
				background-position:0 -16px}
			
			footer ul a:active{
				position:relative;
				top:1px}
	
footer p {
	text-align:right}

/* Corner rounding */

#fancybox-outer, 
#fancybox-inner,
a.btn,
.new, 
#about div.dr,
a#dl-vcf, .project {	
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px}

/* Davis & Gibbs */
#project-dg a.project-thumb span.thumbnail,
#project-dg a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/davis-and-gibbs/dg-thumb.jpg)}	
	
div#davis-and-gibbs div.project-images span.image-one {
	background-image:url(../img/projects/davis-and-gibbs/dg-logo.png)}	
	
div#davis-and-gibbs div.project-images span.image-one {
	background-image:url(../img/projects/davis-and-gibbs/dg-fullshot.png)}	
	
div#davis-and-gibbs div.project-images span.image-three {
	background-image:url(../img/projects/davis-and-gibbs/dg-top.png)}	

div#davis-and-gibbs div.project-images span.image-four {
	background-image:url(../img/projects/davis-and-gibbs/dg-secondary.png)}	
	
/* VSO */
#project-vso a.project-thumb span.thumbnail,
#project-vso a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/the-vso/vso-thumb.jpg)}	
	
div#the-vso div.project-images span.image-one {
	background-image:url(../img/projects/the-vso/vso-tshirt.png)}
	
div#the-vso div.project-images span.image-two {
	background-image:url(../img/projects/the-vso/vso-front.png)}
	
div#the-vso div.project-images span.image-three {
	background-image:url(../img/projects/the-vso/vso-inner.png)}	
	
/* Commodity Vectors */
#project-comvec a.project-thumb span.thumbnail,
#project-comvec a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/commodity-vectors/cv-thumb.jpg)}	
	
div#commodity-vectors div.project-images span.image-one {
	background-image:url(../img/projects/commodity-vectors/cv-front.png)}
	
div#commodity-vectors div.project-images span.image-two {
	background-image:url(../img/projects/commodity-vectors/cv-table.png)}
	
div#commodity-vectors div.project-images span.image-three {
	background-image:url(../img/projects/commodity-vectors/cv-map.png)}		
	
div#commodity-vectors div.project-images span.image-four {
	background-image:url(../img/projects/commodity-vectors/cv-logo.png)}			
	
/* Thomson Reuters Accelus */
#project-tra a.project-thumb span.thumbnail,
#project-tra a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/thomson-reuters/tr-thumb.jpg)}	
	
div#thomson-reuters-accelus div.project-images span.image-one {
	background-image:url(../img/projects/thomson-reuters/tr-front.png)}
	
div#thomson-reuters-accelus div.project-images span.image-two {
	background-image:url(../img/projects/thomson-reuters/tr-front-large.png)}
	
div#thomson-reuters-accelus div.project-images span.image-three {
	background-image:url(../img/projects/thomson-reuters/tr-inner.png)}		
	
/* Complinet */
#project-cnet a.project-thumb span.thumbnail,
#project-cnet a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/complinet/complinet-thumb.jpg)}	
	
div#complinet div.project-images span.image-one {
	background-image:url(../img/projects/complinet/complinet-front.png)}
	
div#complinet div.project-images span.image-two {
	background-image:url(../img/projects/complinet/complinet-zoom.png)}
	
div#complinet div.project-images span.image-three {
	background-image:url(../img/projects/complinet/logo-complinet.png)}		
	
/* ASM */
#project-asm a.project-thumb span.thumbnail,
#project-asm a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/asm/asm-thumb.jpg)}	
	
div#annual-sales-meeting div.project-images span.image-one {
	background-image:url(../img/projects/asm/asm-plus-one.png)}
	
div#annual-sales-meeting div.project-images span.image-two {
	background-image:url(../img/projects/asm/asm-pttn-branding.png)}
	
div#annual-sales-meeting div.project-images span.image-three {
	background-image:url(../img/projects/asm/asm-pttn-presentation.png)}		
	
div#annual-sales-meeting div.project-images span.image-four {
	background-image:url(../img/projects/asm/asm-pttn-presentation-inner.png)}
	
div#annual-sales-meeting div.project-images span.image-five {
	background-image:url(../img/projects/asm/asm-pttn-graphics.png)}			
	
/* Dashboard */
#project-dashboard a.project-thumb span.thumbnail,
#project-dashboard a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/dashboard/dashboard-thumb.jpg)}	
	
#thomson-reuters-dashboard div.project-images span.image-one {
	background-image:url(../img/projects/dashboard/dashboard-all.png)}
	
#thomson-reuters-dashboard div.project-images span.image-two {
	background-image:url(../img/projects/dashboard/dashboard-top-left.png)}
	
#thomson-reuters-dashboard div.project-images span.image-three {
	background-image:url(../img/projects/dashboard/dashboard-top-right.png)}
	
/* Assigner */
#project-assigner a.project-thumb span.thumbnail,
#project-assigner a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/assigner/assigner-thumb.jpg)}	
	
#assigner div.project-images span.image-one {
	background-image:url(../img/projects/assigner/assigner-all.png)}
	
#assigner div.project-images span.image-two {
	background-image:url(../img/projects/assigner/assigner-top-left.png)}
	
/* Connected */
#project-connected a.project-thumb span.thumbnail,
#project-connected a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/connected/connected-thumb.jpg)}	
	
#connected div.project-images span.image-one {
	background-image:url(../img/projects/connected/connected-all.png)}
	
#connected div.project-images span.image-two {
	background-image:url(../img/projects/connected/connected-top.png)}
	
#connected div.project-images span.image-three {
	background-image:url(../img/projects/connected/connected-bottom.png)}	
	
/* StagNYC */
#project-stag a.project-thumb span.thumbnail,
#project-stag a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/stagnyc/stagnyc-thumb.jpg)}	
	
#stag div.project-images span.image-one {
	background-image:url(../img/projects/stagnyc/stagnyc-front.png)}
	
#stag div.project-images span.image-two {
	background-image:url(../img/projects/stagnyc/stagnyc-pictures.png)}
	
#stag div.project-images span.image-three {
	background-image:url(../img/projects/stagnyc/stagnyc-hotel.png)}	
	
#stag div.project-images span.image-four {
	background-image:url(../img/projects/stagnyc/stagnyc-responsive.png)}		
	
	
/* Modern Archive */
#project-modernarchive a.project-thumb span.thumbnail,
#project-modernarchive a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/modernarchive/modernarchive-thumb.jpg)}	
	
#modernarchive div.project-images span.image-one {
	background-image:url(../img/projects/modernarchive/modernarchive-front.png)}
	
#modernarchive div.project-images span.image-two {
	background-image:url(../img/projects/modernarchive/modernarchive-designs.png)}
	
#modernarchive div.project-images span.image-three {
	background-image:url(../img/projects/modernarchive/modernarchive-contact.png)}
	
#modernarchive div.project-images span.image-four {
	background-image:url(../img/projects/modernarchive/modernarchive-responsive.png)}						

/* Citrix */
#project-citrix a.project-thumb span.thumbnail,
#project-citrix a.project-thumb span.thumbnail span {
	background-image:url(../img/projects/citrix/citrix-thumb.jpg)}	
	
#citrix div.project-images span.image-one {
	background-image:url(../img/projects/citrix/citrix-gotomeeting.png)}
	
#citrix div.project-images span.image-two {
	background-image:url(../img/projects/citrix/citrix-myaccount.png)}
	
#citrix div.project-images span.image-three {
	background-image:url(../img/projects/citrix/citrix-servicedesk.png)}

.button {
	display: inline-block;
	font-size: 14px;
	padding: 8px;
	text-decoration:none !important;
	color:rgba(255,255,255,1) !important;
	background: #17b3ee; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3YjNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZGE1ZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #17b3ee 0%, #0da5ea 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17b3ee), color-stop(100%,#0da5ea)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #17b3ee 0%,#0da5ea 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #17b3ee 0%,#0da5ea 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #17b3ee 0%,#0da5ea 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #17b3ee 0%,#0da5ea 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17b3ee', endColorstr='#0da5ea',GradientType=0 ); /* IE6-8 */

	border-radius:1px;
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	-o-border-radius:1px;
	
	-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:    0px 3px 1px rgba(0, 0, 0, 0.1);
	box-shadow:         0px 3px 1px rgba(0, 0, 0, 0.1);
	
	border:1px solid;
	
	border-top-color:rgba(255, 255, 255, 0.4);
	border-left-color:rgba(255, 255, 255, 0.4);
	border-right-color:rgba(0, 0, 0, 0.2);
	border-bottom-color:rgba(0, 0, 0, 0.2);
	
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
	
	margin:1px 0 2px 0}
	
.button:hover {	
	background: rgb(13,165,234); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBkYTVlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxN2IzZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(13,165,234,1) 0%, rgba(23,179,238,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(13,165,234,1)), color-stop(100%,rgba(23,179,238,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(13,165,234,1) 0%,rgba(23,179,238,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(13,165,234,1) 0%,rgba(23,179,238,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(13,165,234,1) 0%,rgba(23,179,238,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(13,165,234,1) 0%,rgba(23,179,238,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0da5ea', endColorstr='#17b3ee',GradientType=0 ); /* IE6-8 */}

.button:focus { 	
	margin:3px 0 0 0}

.port-enter {
	margin:46px 0 2px 0}

.port-enter:focus {
	margin:46px 0 0px 0}

/* Fancybox ------------------- */
#fancybox-overlay {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:rgba(0,0,0,1);
	z-index:1100;
	display:none}

#fancybox-tmp {
	padding:0;
	margin:0;
	border:0;
	overflow:auto;
	display:none}

#fancybox-wrap {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:20px;
	z-index:1101;
	display:none}

#fancybox-outer {
	position:relative;
	width:100%;
	height:100%;
	background:rgba(255,255,255,1)}

#fancybox-inner {
	position:absolute;
	top:0;
	left:0;
	width:1px;
	height:1px;
	padding:0;
	margin:0;
	outline:none;
	overflow:hidden}

#fancybox-close {
	position:absolute;
	top:10px;
	right:10px;
	width:16px;
	height:16px;
	background:url(../img/close.png) no-repeat 0 0;
	cursor:pointer;
	z-index:1103;
	display:none}

#fancybox-close:hover {
	background-position:0 100%}

#fancybox-close:active {
	top:11px}

div.fancy-bg {
	position:absolute;
	padding:0;
	margin:0;
	border:0;
	z-index:1001}

div#fancy-bg-n {
	top:-20px;
	left:0;
	width:100%;
	height:20px;
	background:transparent url(../img/fancybox/fancy_shadow_n.png) repeat-x}

div#fancy-bg-ne {
	top:-20px;
	right:-20px;
	width:20px;
	height:20px;
	background:transparent url(../img/fancybox/fancy_shadow_ne.png) no-repeat}

div#fancy-bg-e {
	top:0;
	right:-20px;
	height:100%;
	width:20px;
	background:transparent url(../img/fancybox/fancy_shadow_e.png) repeat-y}

div#fancy-bg-se {
	bottom:-20px;
	right:-20px;
	width:20px;
	height:20px;
	background:transparent url(../img/fancybox/fancy_shadow_se.png) no-repeat}

div#fancy-bg-s {
	bottom:-20px;
	left:0;
	width:100%;
	height:20px;
	background:transparent url(../img/fancybox/fancy_shadow_s.png) repeat-x}

div#fancy-bg-sw {
	bottom:-20px;
	left:-20px;
	width:20px;
	height:20px;
	background:transparent url(../img/fancybox/fancy_shadow_sw.png) no-repeat}

div#fancy-bg-w {
	top:0;
	left:-20px;
	height:100%;
	width:20px;
	background:transparent url(../img/fancybox/fancy_shadow_w.png) repeat-y}

div#fancy-bg-n {
	top:-20px;
	left:-20px;
	width:20px;
	height:20px;
	background:transparent url(../img/fancybox/fancy_shadow_nw.png) no-repeat}