/*
	BANDIT DESIGN WAZ HERE '09, PEEPS
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #003550 url(/portfolio/img/bg.png) top left repeat-y;
	margin: 0; padding: 0; border: 0;
	color: #fff;
	font-size: 12px;
	line-height: 1.6em;
}

.clear { clear: both; }
.hide { display: none !important; }
.last { margin: 0 !important; }

p { margin: 0; }
h1,h2,h3,h4 { margin: 0; padding: 0; line-height: 1.15em; font-weight: normal; }

a {
	text-decoration: none;
	border: 0;
	outline: 0;

	transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
}
	a img { border: 0; }
	:focus { outline: 0; }


/* COLOURS */
.blue { /* color: #2d455b; */ color: #3c5a76; }
	.blue a, a.blue { color: #5580a8; }
		.blue a:hover, a.blue:hover { color: #fff; }

.green { color: #8fb359; }
	.green a, a.green { color: #d3ebad; }
		.green a:hover, a.green:hover { color: #fff; }

.darkbg {
	background: rgba(0,12,20,0.8);
}

.medbg {
	background: rgba(8,24,40,0.8);
}
/* END */


#container {
	position: relative;
	text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}


a.goaway {
	display: block;
	height: 20px;
	width: 20px;

	position: absolute;
	top: 8px; right: 8px;

	text-indent: -9999px;
	font-size: 12px;
	font-weight: bold;
	color: #2d455b;

	background: url(/portfolio/img/icon-minimize.png) no-repeat;

	opacity: .6; filter: alpha(opacity=60);
	z-index: 99;
}
	a.goaway:hover {
		color: #416382;
		opacity: .99; filter: alpha(opacity=99);
	}
	a.goaway.off { background: url(/portfolio/img/icon-maximize.png) no-repeat; }


.col {
	float: left;
	font-weight: bold;
	margin: 0px 1px 0px 0px;
}
	.col.cleft {
		width: 110px;
		padding: 0px 50px 0px 0px;
	}
	.col.cmid {
		width: 320px;
		margin: 0px 41px 0px 0px;
	}
	.col.cright {
		width: 320px;
	}

#header {
	padding: 20px 0px 20px 20px;
	margin: 0px 0px 1px 0px;
	font-family: "Century Gothic", Futura, Arial, Helvetica, sans-serif;
}
	#header a.logo {
		display: block;
		width: 100px;
		height: 62px;
		text-indent: -9999px;
		background: url(/portfolio/img/BanditDesign.png) no-repeat bottom left;
		color: #416382;
		text-decoration: none;
		opacity: 0.7;
		transition: opacity 0.2s linear;
		-moz-transition: opacity 0.2s linear;
		-webkit-transition: opacity 0.2s linear;
	}
		#header a.logo:hover {
			background-position: bottom left;
			color: #fff;
			opacity: 1;
		}
		#header a.logo.loading,
		#header a.logo.loading:hover {
			background: url(/portfolio/img/loading.gif) no-repeat center center;
			opacity: 1;
		}

	#header .col {
		font-size: 18px;
	}

#menu {
	font-family: "Century Gothic", Futura, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;

	height: 35px;
	line-height: 34px;
	/* padding: 0px 0px 0px 180px; */
}
	#menu h3 {
		float: left;
		padding: 0px 20px 0px 20px;
		width: 140px;

		text-align: right;

		font-size: 18px;
		line-height: 34px;
		font-weight: bold;
		color: #2d455b;

		visibility: hidden;
	}
	#menu a {
		display: block;
		float: left;
		margin: 0px 30px 0px 0px;
		text-decoration: none;
		color: #fff;
		border-bottom: 1px solid transparent;
		transition: border-color 0.2s linear;
		-moz-transition: border-color 0.2s linear;
		-webkit-transition: border-color 0.2s linear;
	}
		#menu a.on,#menu a:hover {
			border-bottom: 1px solid #ff8000;
		}

#hover {
	width: 250px;
	height: 250px;

	position: absolute;
	top: -9999px; left: 0px;

	background: url(/portfolio/img/item-overlay-on.png) no-repeat center;
	z-index: -1;

	opacity: 0;
	filter: alpha(opacity=0);

	pointer-events: none;
}

#content {
	padding: 9px 0px;
	padding-bottom: 150px;

	/* letter-spacing: -0.05em; */
}

	#folio {
		/* position: relative; */
		padding: 0px -1px 1px 0px;
	}
		#folio .tile {
			position: relative;
			display: block;
			float: left;
			margin: 1px 1px 0px 0px;
			width: 180px;
			height: 180px;

			z-index: 5;

			transition: opacity 0.2s linear;
			-moz-transition: opacity 0.2s linear;
			-webkit-transition: opacity 0.2s linear;
		}
			#folio .tile:hover {
				opacity: 1 !important;
				filter: alpha(opacity=99) !important;
			}
				#folio .tile:hover span.desc { opacity: 1; filter: alpha(opacity=99); }

			#folio .tile img {
				z-index: 1;
				display: block;
				position: absolute;

				width: 180px;
				height: 180px;
			}

			#folio .tile span.desc {
				z-index: 3;
				display: block;

				position: absolute;
				left: 5px;
				bottom: 5px;

				opacity: 0;
				filter: alpha(opacity=0);
				transition: opacity 0.2s linear;
				-moz-transition: opacity 0.2s linear;
				-webkit-transition: opacity 0.2s linear;

				width: 160px;
				padding: 5px;

				font-size: 11px;
				color: #fff;

				border-radius: 3px;
			}
				#folio .tile span h4 { font-size: 14px; }
				#folio .tile span strong { display: block; }
				#folio .tile span em {
					font-style: normal;
					display: block;
					text-align: right;
					color: #999;
				}

			#folio .tile span.shadow {
				z-index: 3;
				display: block;
				position: absolute;
				left: 0px; bottom: 0px;

				width: 180px;
				height: 180px;

				background: url(/portfolio/img/item-overlay-off.png) no-repeat center;
			}


	#project {
		float: left;
		clear: both;

		width: 100%;
		height: 360px;
		overflow: hidden;

		margin: 1px 0 9px 0;

		position: relative;
		/*clip: rect(0px, 100%, 360px, 0px);*/
	}
		#project .close {
			display: block;
			position: absolute;
			top: 10px;
			right: 10px;

			z-index: 1000;

			border-radius: 3px;
			background: #003550 url(/portfolio/img/close-white.png) no-repeat 8px center;
			opacity: 0.7;
			filter: alpha(opacity=70);
			transition: opacity 0.2s linear;
			-moz-transition: opacity 0.2s linear;
			-webkit-transition: opacity 0.2s linear;

			height: 28px;
			line-height: 28px;
			padding: 0 8px 0 30px;

			color: #fff;
			font-weight: bold;
		}
			#project .close:hover { opacity: 1; filter: alpha(opacity=99); }

		#project #project-holder {
			width: 5000px;

			position:  absolute;
			top: 0px; left: 0px;
		}
		#project #description {
			float: left;

			width: 320px;
			height: 320px;

			padding: 20px;

			position: absolute;
			top: 0px; left: 0px;

			z-index: 10;
		}
			#project #description h3 {
				font-size: 24px;
				margin: 0 0 5px 0;
			}
			#project #description p {
				font-size: 14px;
			}
			#project #description p.categories {
				margin: 20px 0 0 0;
			}
				#project #description p.categories a,
				#project #description a.visit {
					display: inline-block;
					padding: 0 6px;
					margin: 0 6px 6px 0;

					font-size: 11px;
					color: #fff;
					text-transform: uppercase;
					font-weight: bold;
					text-decoration: none;

					border: 1px solid #1E80B8;
					border-radius: 3px;

					transition: border-color 0.1s linear, background-color 0.1s linear;
					-moz-transition: border-color 0.1s linear, background-color 0.1s linear;
					-webkit-transition: border-color 0.1s linear, background-color 0.1s linear;
				}
					#project #description p.categories a:hover,
					#project #description a.visit:hover {
						border-color: rgba(0,0,0,0);
						background-color: #1E80B8;
					}

			#project #description a.visit {
				position: absolute;
				bottom: 20px;
				left: 20px;

				height: 28px;
				line-height: 28px;

				padding: 0 8px 0 30px;

				background: url(/portfolio/img/star.png) no-repeat 8px center;

				font-size: 18px;
				text-transform: none;
				font-weight: normal;
			}

		#project #gallery-wrapper {
			float: left;

			height: 360px;

			position: absolute;
			top: 0px; left: 362px;
		}
			#project #gallery {
				height: 360px;
				position: relative;
				top: 0; left: 0;
			}
				#project #gallery img {
					display: block;
					float: left;
					margin: 0px 1px 0px 0px;
				}
					#project #gallery img:last-child { margin-right: 0; }

/*

	#folio a {
		display: block;
		float: left;
		margin: 0px 10px 10px 0px;
		border: 1px solid #002236;
		padding: 10px;

		width: 73px;
		height: 73px;
		overflow: hidden;
		background: url(../img/diag-bg.png) repeat;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
	}
		#content a.item:hover {
			background: #002236 url(../img/go-bg.gif) center no-repeat;
			border: 1px dashed #2d455b;
			color: #8fb359;
			text-indent: 0px;
			opacity: .99 !important;
			filter: alpha(opacity=99) !important;
		}
			#content a.item:hover span {
				display: block;
			}
			#content a.item:hover img {
				display: none;
			}
		#content a.item span {
			display: none;
		}
		#content a.item img {
			float: left;
			margin: 0px 5px 0px 0px;
			background: #fff;
			padding: 2px; border: 0;
		}

*/

	/* start fading out as an item gets older */
	#content .age6 { opacity: .8; filter: alpha(opacity=80); }
	#content .age12 { opacity: .6; filter: alpha(opacity=60); }
	#content .age24 { opacity: .4; filter: alpha(opacity=40); }
	#content .age36,#content .filtered { opacity: .2; filter: alpha(opacity=20); }

#footer {
	z-index: 99;
	position: fixed;
	bottom: 0px;

	width: 100%;
	clear: both;
	font-family: "Century Gothic", Futura, Arial, Helvetica, sans-serif;
}
	#footer .main {
		padding: 20px 0px;
	}
	#footer .sub {
		height: 35px;
		line-height: 34px;
	}
		#footer .sub, #footer .sub a { font-size: 14px !important; }

	#footer .col {
		font-size: 12px;
	}
		#footer .col p { margin: 0 0 1em 0; }
		#footer .col.cleft {
			margin-left: 20px;
		}
	#footer .col h3 {
		font-size: 14px;
		font-weight: bold;
		margin: 0px 0px 5px 0px;
	}
	#footer .col ul {
		margin: 0px 0px 10px 0px;
		padding: 0px 5px;

		overflow: hidden;
		list-style: square;
		list-style-position: inside;
	}
		#footer .col ul li {
			width: 49%;
			float: left;
			margin: 0px 0px 5px 0px;
		}

/*
body {
	margin: 0;
	padding: 0;
	border: 0;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #222;
}

.clear { clear: both; }

a {  }
	a img { border: 0; }
	:focus { outline: 0; }

#folio {
	padding: 1px;
}
	.item {
		float: left;
		position: relative;
		margin: 1px;
	}
		.item a {
			display: block;
			width: 180px;
			height: 180px;
			border: 2px solid rgba(255,255,255,0.2);
			z-index: 2;
		}
		.item img {
			z-index: 1;
			display: block;
			position: absolute;
			width: 180px;
			height: 180px;
		}
*/