/*
   	URL    		: www.functionfirst.co.uk
   	Author 		: Alan Jenkins
   	Date   		: 4th March 2010
   	Modified	: 3rd Jan 2012
*/

/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object { padding: 0; margin: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img, abbr { border: 0 }
address, caption, cite, code, em, h1, h2, h3, h4, h5, h6, strong, th { font-weight: normal; font-style: normal }
ul { list-style: none }
caption, th { text-align: left }
a { text-decoration: none; outline:  0; }
/* /end reset */

BODY {
	color: #2c2c2c;
	font: 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: url(http://images.functionfirst.co.uk/bg_.jpg) #031010 fixed;
}

a {
	color: #228286;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	-ms-transition: color .2s linear;
	-o-transition: color .2s linear;
	transition: color .2s linear;
}
a:hover {
	color: #156a6e;
}
p {
	margin: 18px 0;
}
hr {
	clear: both;
	border: 0;
	border-top: 1px dotted #ccc;
	width:  620px;
	position:  relative;
}

/* header */
header.banner {
	position: fixed;
	left:  0;
	top:  0;
}	
header.banner h1 {
	float: left;
	text-indent: -999em;
	background: url(http://images.functionfirst.co.uk/lgo.jpg) no-repeat;
	width: 432px;
	height: 273px;
	display:  block;
}

header.banner ul {
	position: fixed;
	top: 10px;
	right: 10px;
}

header.banner li {
	margin: 0 0 3px;
}

a.tw, a.fb, a.ln, a.cv {
	background: url(http://images.functionfirst.co.uk/icons.png) no-repeat 0 3px;
	padding: 3px 3px 3px 22px;
	color: #fff;
	display: block;
}
a.fb { background-position: 0 -21px; }
a.ln { background-position: 0 -45px; }
a.cv { background-position: 0 -69px; }

/* content */
.content {
	position:  relative;
	width:  720px;
	margin:  0 auto;
	border-top:  0;
	border-bottom:  0;
	background:  #fff;
	padding:  20px;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

article {
	float:  left;
	width:  220px;
	margin: 30px 70px;
}

section {
	float: left;
	width: 100%;
}
section header h1 {
	font-size:  18px;
	font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin:  0 0 12px;
}

	.portfolio dt {
		font-weight: bold;
	}
	
.portfolio img {
	position: relative;
	top: -12px;
	left: -18px;
	-webkit-transform: scale(0.86);
	-moz-transform: scale(0.86);
	-ms-transform: scale(0.86);
	-o-transform: scale(0.86);
	transform: scale(0.86);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

	.portfolio section {
		color:  #666;
	}
	.portfolio a {
		display: block;
	}
	
	/* experience */
	.experience ul {
		border-top: 1px solid #ccc;
	}
	.experience li {
		color:  #013032;
		line-height: 30px;
		border-bottom:  1px solid #ccc;
		padding:  0 5px;
}

footer {
	text-align: center;
	color:  #666;
	font-size: 10px;
}
	
	
	
	li.rate1, li.rate2, li.rate3 { background: url(http://images.functionfirst.co.uk/rate.gif) no-repeat 95% 9px }

		li.rate2 { background-position: 95% -21px }

		li.rate3 { background-position: 95% -51px }
	
	
/* #Media Queries
================================================== */
/* Wide screen displays */
@media only screen and (min-width: 1192px) {

}

/* Desktops and laptops */
@media only screen and (min-width: 960px) {
	.portfolio a {
		width:  220px;
		height:  140px;
		overflow:  hidden;
		position:  relative;
	}
	.portfolio dl {
		position: absolute;
		opacity: 0;
		filter: alpha(opacity=0);
		top: 0;
		background:  #000;
		background:  rgba(0,0,0,.65);
		color:  #fff;
		width:  200px;
		padding: 10px;
		height: 120px;
		-webkit-transform: scale(1.2);
		-webkit-transition: all .3s linear;
		-moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
	}
	
	.portfolio dt {
		color: #fff;
	}
		
	.portfolio dd {
		color: #fff;
	}

	.portfolio a:hover img {
		-webkit-transform: scale(1);
	}
	.portfolio a:hover dl {
		bottom: 0;
		-webkit-transform: scale(1);
		opacity: 1;
		filter: alpha(opacity=100);
	}

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

}


/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	.content {
		margin-top: 110px;
		width: auto;
	}
	
	header.banner li {
		float: left;
		margin: 10px 20px 0 0;
	}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	header.banner {
		width: 100%;
	}
	header.banner h1 {
		width: 100%;
		float: none;
		height: 163px;
	}
	header.banner li {
		float: none;
		margin: 10px 20px 0 0;
	}
	.content {
		width: 100%;
		padding: 10px 0 0;
		margin-top: 160px;
	}
	section{
		float: none;
		padding: 0;
	}
	article {
		float: none;
		width: auto;
		margin: 0 10px 30px;
	}
	.portfolio a {
		border: 1px solid #DDD;
		padding: 10px;
	}
	.portfolio img {
		width: 100%;
		left: 0;
		top: 0;
	}
	.portfolio dd {
		margin-left: 10px;
	}
	hr {
		width: 100%; 
		border: 0;
	}
	footer {padding: 10px 0;}
}
		
	/* print settings */
	@media print {
		h1 { text-indent: 0; float: none }
	
		#nav { display: none }
		
		#pages { width: 300px; border: 1px solid red; overflow: visible }
		
		#page  { float: none }
	}