/*************************************************************************
	Developed by Matt Hill (c) 2011 -- http://matthill.co/
	MODULE: 	style.css
	PURPOSE:	all rules for site
*************************************************************************/

/* Reset browser 
*************************************************************************/
/* Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;
}
body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img { border: none; }
b,i {
	font-weight:normal;
	font-style:normal;
}


/* Auto float clearing / section visibility
*************************************************************************/
.group:after {
	content: ".";
	height:0;
	display:block;
	clear:both;
	visibility:hidden;
}
#about,#portfolio,#contact {
	display:block;
}

/* General Rules and classes
*************************************************************************/
html {
	background:#eeefe6 url(../../img/bg-tile.jpg);
	background-attachment: fixed;
	font-size:100.01%;
	overflow-y: scroll;
}	

body {
	font: 400 normal normal 62.5%/1em "PT Sans",'Helvetica Neue', Arial, Helvetica, sans-serif;
	color:#444;
	padding:0;
	margin:0;
}
.floatright {
	float:right;
	text-align:right;
}
.floatleft {
	float:left;
	text-align:left;
}
.alignright {
	text-align:right;
}
.alignleft {
	text-align:left;
}
.clear {
	clear:both;
	font-size:0;
}

/* Main layout rules 
*************************************************************************/
#wrapper {
	width:1071px;
	margin:0 auto;	
}
#sections {
	width:1071px;
	height:auto;
}
section {
	clear:both;
	position:relative;
	width:1040px;
	padding:10px 21px 11px 10px;
	height:390px;
	margin:0 0 40px;
	background:#FFF url(../../img/bg-section-shadow.jpg) top left no-repeat;
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	background-size:100% 100%;		
	
}
section a,section a:visited {
	font-weight:400;
}
.inner {
	background:#FFF url url(../../img/bg-texture-grad.png) left bottom repeat-x;
}
#about,#contact,#resume {
	height:auto;
	min-height:390px;
}
#about .inner, #contact .inner, #resume .inner {
	position:relative;
	padding:30px 40px 1px;
	height:auto;
	min-height:359px;
}


/* Typography & Main / Content space
*************************************************************************/
h1,h2,h3,h4,h5,h6 {
	color:#005c9b;
	font-weight:400;
	font-family: "Signika","Open Sans", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	line-height:1;
}
h1 {
	font-size:4.8em;
	letter-spacing:-0.025em;
}
h2,article h1,aside h1 {
	font-size:2.2em;
	font-weight:400;
}
h3,article h2 {
	font-size:1.8em;
	font-weight:400;
}
p,ul,ol,dl {
	font-size:1.3em;
	line-height:1.5em;
	margin:0 0 0.75em 0;
}
ul { list-style:url(../../img/bullet.png);	margin-left:0px; }
strong { font-weight:bold; }
em {font-style:italic; }
a {
	color:#759aaf;
	color:#2194bf;
	text-decoration:none;
	padding:0 2px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
    -webkit-transition-property: color,background-color;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: linear;	
}
a:visited {	color:#759aaf; color:#2194bf; }
a:hover { text-decoration:none;	color:#005c9b; }
.larger {
	font-size:1.25em; line-height:1;
}
.note {
	font-size:0.85em; line-height:1;
}

/* Header
*************************************************************************/
#header {
	padding:30px 50px 41px;
}
/*.logo {
	visibility:visible;
	display:block;
	float:left;
	margin:13px 0 0 0;
}*/
.logo,.logo:visited {
	display:block;
	float:left;
	margin:10px 0 0 0;
	line-height:1;
	font-style:normal;
	font-size:3.8em;
	font-weight:400;
	font-family: "Signika", "Open Sans", 'Helvetica Neue', Arial, Helvetica, sans-serif;	
	color:#005c9b;
}
.logo span {
	display:block;
	clear:both;
	font-weight:400;
	font-size:0.325em;
	margin:5px 0 0 2px;
	color:#444444;
	font-family: "Open Sans",'Helvetica Neue', Arial, Helvetica, sans-serif;	
}


/* Navigation
*************************************************************************/
nav {

}
nav ul {
	float:right;
	margin-right:-20px;
	line-height:1;
	list-style:none;
}
nav li {
	float:left;
	width:170px;
	height:80px;
	color:#005c9b;
}
nav a,nav a:visited {
	display:block;
	height:68px;
	padding:12px 15px 0;
	color:#005c9b;
	font-weight:00;
	border-left:1px solid #FFF;
	border-right:1px solid #d4d4d0;
	font-size:1.35em;
	font-weight:400;
	font-family: "Signika", "Open Sans", 'Helvetica Neue', Arial, Helvetica, sans-serif;			
}
nav a:hover {
	background:url(../../img/bg-midbody.png);
	background:rgba(174,176,160,0.1);
	border-bottom:1px solid #d4d4d0;
}
nav li:nth-child(1) a {
	border-left:none;
	-webkit-border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}
nav li:nth-child(3) a {
	border-right:none;
	-webkit-border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
}
nav p {
	margin-top:5px;	
	font-size:0.70em;
	font-family: "Open Sans",'Helvetica Neue', Arial, Helvetica, sans-serif;
	color:#444;	
}
nav a:hover p {
	color:#000;
}

/* Buttons & Links
*************************************************************************/
#home a:hover,#resume a:hover {
	background:#005c9b;
	color:#FFF;
}
#sections a[href^="http://"] {
	font-weight:400;
}
#sections a[href^="http://"]:after {
	content: url(../../img/icon-offsite.png);
	padding: 0 0 0 5px;
}
#sections a[href^="http://"]:hover:after {
	content: url(../../img/icon-offsite-hover.png);
	padding: 0 0 0 5px;
}
#portfolio .summary a[href^="http://"]:after {
	content: url(../../img/icon-offsite-hover.png) !important;
	opacity:0.5;
}
#portfolio .summary a[href^="http://"]:hover:after,
#resume .summary a[href^="http://"]:after {
	content: url(../../img/icon-offsite-hover.png) !important;
	opacity:1;
}
#contact a[href^="http://"]:after,
#contact a[href^="http://"]:hover:after {
	content: '';
}
a.button {
    -webkit-transition-property: background,color,background-color;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	display:inline-block;
	padding:0px 20px;
	font-size:1.15em;
	font-weight:400;
	font-family: "Signika", "Open Sans", 'Helvetica Neue', Arial, Helvetica, sans-serif;	
	line-height:30px;
	background:#005c9b url(../../img/bg-button-blue-dk.png) left center repeat-x;
	color:#FFF;				
}
a.large {
	font-size:1.95em;
	font-weight:400;
	line-height:40px;
	text-transform:none;
}
a.invert,a.invert:visited {
	background:#FFF url(../../img/bg-button-white.png) left center repeat-x;
	color:#005c9b;	
}
a.button:hover,
a.button:visited:hover {
	text-decoration:none;
	background:#759aaf url(../../img/bg-button-blue-lt.png) left center repeat-x !important;
	color:#FFF !important;
}	




/* Home / Intro
*************************************************************************/
#home,#home .inner {
	height:auto;
	overflow:hidden;
}
#home .inner {
	background-position:left top;
}
#home img {
	display:block;
	position:absolute;
	top:20px;
	left:40px;
	z-index:10;
	width:320px;
}
#home h1 {
	margin:20px 0 0 -2px;
	font-size:5.2em; line-height:1;
}
#home h2 {
	margin-bottom:10px;
	font-size:3.2em; line-height:1;
}
#leadin {
	float:none; position:relative;
	overflow:hidden;
	z-index:10;
	height:auto;
	padding:0 40px 10px 400px;
}
#leadin a {
	display:inline-block;
	margin:10px 15px 0 0;
}
#leadin a:first-child {
	margin-left:-0px;
}
#leadin p {
	font-size:1.6em; line-height:1.4;
}
#leadin p a {
	font-size:1em;
}
#promo {
	clear:none;
	height:auto; overflow:hidden;
	padding:20px 40px 0 400px;

	color:#FFF;
	background-color: #005c9b;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0186cb), to(#005c9b)); 
  background-image: -webkit-linear-gradient(top, #0186cb, #005c9b); 
  background-image: -moz-linear-gradient(top, #0186cb, #005c9b); 
  background-image: -ms-linear-gradient(top, #0186cb, #005c9b); 
  background-image: -o-linear-gradient(top, #0186cb, #005c9b); 
  background-image: linear-gradient(top, #0186cb, #005c9b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0186cb', EndColorStr='#005c9b');
}
#promo h2 {
	color:#FFF;
	margin:0 0 10px 0;
	font-size:2.2em; line-height:1;	
}
#promo p {

}
#promo a {
	float:right;
	margin:-30px 0 20px 0;
}
#promo p a {
	float:none;
	color:#FFF;
	text-decoration:underline;
}
#promo ul {
	list-style:square;
	list-style-image:none;
	color:white;
	margin-left:2em;
}

/* About
*************************************************************************/
#resume {
	width:1071px;
	padding:0;
	background:none;
}
#resume .summary {
	position:relative;
	height:390px;
	padding:10px 21px 11px 10px;
	background:#FFF url(../../img/bg-section-shadow.jpg) top left no-repeat;
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	background-size:100% 100%;			
}
#resume .inner {
	position:static;	
	background:url(../../img/bg-section.jpg) left bottom repeat-x;		
}
#resume .summary ul {
	margin-bottom:15px;
}
#resume .expanded {
	position:relative;
	top:-10px;
	width:1071px;
	height:auto;
	padding:0 0 1px 0;
	background:#FFF url(../../img/bg-section-shadow.jpg) bottom left no-repeat;
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	background-size:100% 100%;			
}
#resume .expanded .inner {
	width:1040px;
	padding:0;
	border:10px solid #FFF;
	margin:0 10px 0 0;
}
#resume .main {
	width:600px;
	color: #444;
	padding:20px 40px 40px;
}
#resume .sidebar {
	width:260px;
	padding:0 20px 20px;
	margin:40px;
	float:right;
	background:url(../../img/bg-tile-greynoise-lt.png);
}
#resume .sidebar h2,#resume .sidebar cite {
	color:#005c9b;
}
#resume .cornerflash {
	position:absolute;
	z-index:11;
	right:8px;
	top:-3px;
	left:auto;
	display:block;
}
#resume h2,#resume h3 {
	margin:20px 0 7px 0;
	font-weight:400;
}
.expander {
	clear:both;
	position:absolute;
	bottom:11px;
	background:#005c9b;
	color:#FFF;
	width:1040px;
	height:40px;
	line-height:40px;
	margin:0 -40px;
	padding:0 0 0 0px;
	font-size:1.8em;
	font-weight:400;
	text-align:center;
	cursor:pointer;
	text-shadow:0px 0px 2px rgba(255,255,255,0.1); /* Force smoothing in Chrome */
}
.expander i {
	display:block;
	width:40px;
	height:40px;
	background:url(../../img/arrow-large.png) no-repeat;
	position:absolute;
	z-index:1;
	right:500px;
	top:15px;
}
.expander b {
	position:relative;
	z-index:2;
}
.expanded .inner img {
	float:right;
	display:block;
	margin:-40px -360px 0 0;
}
.column {
	float:left;	width:460px; min-height:250px;
}
.column:nth-of-type(1) {
	margin:0 40px 0 0;
}
#resume blockquote {
	padding:20px 0;
	margin:20px 0;
	font-size:1.1em;
	font-style:italic;
	border-top:1px dotted #759aaf;
	border-bottom:1px dotted #759aaf;
	color:#005c9b;
}


/* About
*************************************************************************/
#about {
	width:1071px;
	padding:0;
	background:none;
}
#about .summary {
	position:relative;
	height:390px;
	padding:10px 21px 11px 10px;
	background:#FFF url(../../img/bg-section-shadow.jpg) top left no-repeat;
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	background-size:100% 100%;			
}
#about .inner {
	position:static;	
	background:url(../../img/bg-section.jpg) left bottom repeat-x;		
}

/* Portfolio
*************************************************************************/
#portfolio {
	position:relative;
	background:none;
	border:none;
	height:auto;
	width:1071px;
	padding:0;
	margin:-30px 0 40px 0;
}
#portfolio article {
	position:relative;
	width:1071px;
	height:441px;
	padding:0;
	margin:0 0 40px 0;
	background:url(../../img/bg-texture-30.png);
	background-attachment:inherit;
}
#portfolio article .inner {
	width:1071px;
	height:441px;
	background:url(../../img/bg-folio.png) left bottom no-repeat;	
}
/* Colours */
#portfolio #wpg { background-color:#c10b7e; }
#portfolio #villiers { background-color:#c33640; }
#portfolio #mt32 {background-color:#1d6f8e;} /* 64a93f */
#portfolio #wcs { background-color:#424294;	}
#portfolio #backstop { background-color:#99b644; }	
#portfolio #rmm { background-color:#1d6f8e; background-color: #1B7D8A}
#portfolio #cpp { background-color:#7c2f6c; }
#portfolio #how { background-color:#2a8a93; }
#portfolio #gaijin { background-color:#b25953; }
#portfolio #honey { background-color:#f539a8; }
#portfolio #carebase { background-color:#804a23; }
#portfolio #croner { background-color:#2894ce; }



#portfolio article p, #portfolio article h1,
#portfolio article h2, #portfolio article ul,
#portfolio article a, #portfolio article a:visited {
	color:#FFF;
}
#portfolio h1, #portfolio h2 {
	font-weight:400;
}
#portfolio h1 {
	margin-bottom:10px;
}
#portfolio h1 b {
	font-size:0.65em;
	margin:0 0 0 7px;
	color:rgba(255,255,255,0.5);
}
#portfolio a.sitelink {
	font-weight:400;
	text-decoration:none;
	position:absolute;
	z-index:6;
	right:610px;
	line-height:50px;
	font-size:1.75em;
	text-align:right;
}
#portfolio a.sitelink:after,#portfolio a.sitelink:hover:after {
	content: '';
}
#portfolio a.sitelink:hover,
#portfolio a.sitelink:visited:hover {
	border-bottom:1px dotted #FFF !important;
}

#portfolio .summary	{
	width:410px;
	height:140px;
	padding:60px 40px 0 50px;
}
#portfolio .summary	p {
	font-weight:400;
	font-size:1.3em;
	line-height:1.5em;
	margin-top:5px;
}
#portfolio .summary a {
	border-bottom:1px dotted #FFF;
}
#portfolio .involvement	{
	width:410px;
	height:150px;
	padding:30px 40px 0 50px;
}
#portfolio .involvement	ul {
	font-weight:400;
	font-size:1.3em;
	list-style:square;
	list-style-image:none;
/*	border-top:1px dotted #FFF;
	border-top:1px solid rgba(255,255,255,0.2);*/
	margin:10px 0 0 15px;
	color:#FFF;
}
#portfolio .involvement a {
	padding:2px;
	background:rgba(0,0,50,0.1);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#portfolio .involvement a:hover {
	background:rgba(0,0,50,0.2);
}
#portfolio .involvement a[href^="http://"]:after {
	content: url(../../img/icon-offsite-hover.png);
	padding: 0 0 0 5px;
}	
#portfolio .involvement	li {
	line-height:1.3em;
	padding:0 6px 6px 0;
	list-style:square;	
/*	border-bottom:1px dotted #FFF;
	border-bottom:1px solid rgba(255,255,255,0.2);	*/
}
#portfolio .thumbs {
	height:0;
}
#portfolio img {
	position:absolute;
	z-index:10;
	right:71px;
	top:10px;
}
#portfolio img.zoom {
    display: none;
    height: 125px;
    width: 120px;
    position: absolute;
    right: 250px;
    top: 170px;
    z-index: 200;
}
#controlbar {
	height:50px;
	width:160px;
	position:absolute;
	z-index:50;
	line-height:50px;	
	bottom:10px;
	left:50px;
}
#controlbar a {
	display:inline-block;
	vertical-align:top;
	width:32px;
	height:32px;
	margin:9px 5px 0 0;
	background-image:url(../../img/sprites.png);
	text-indent:-999em;
	outline:none;
	opacity:1;
}
#controlbar a:hover{
	opacity:1;
}
#controlbar #next:active { margin-top:10px; }
#controlbar #prev:active { margin-top:8px; }
#controlbar #next {	background-position:0 100%; }
#controlbar #prev {	background-position:-40px 100%; }
.counter {
	color:#FFF;
	font-size:1.2em;
	line-height:50px;
	display:inline-block;
	margin:0 10px;
}
#chooseslide {
	position:absolute;
	z-index:10;
	right:33px;
	top:50px;
	width:15px;
	height:150px;
	font-size:1em;
	font-weight:400;
	line-height:15px;
}
#chooseslide a,#chooseslide a:visited {
	display:block;
	margin:0 0 7px 0;
	padding:0;
	width:15px;
	height:15px;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	background:rgba(255,255,255,0.2);
	font-weight:400;
	outline:none;
	text-indent:-999em;
}

#chooseslide .activeSlide,
#chooseslide .activeSlide:visited {
	background:rgba(0,0,0,0.2);
}
#chooseslide a:nth-child(7) {
	margin-bottom:25px;
}

/* Support panel (Links + Testimonials)
*************************************************************************/
#support {
	background:none;
	border:none;
	height:auto;
	width:991px;
	clear:both;
	padding:0 40px 40px;
	margin:0;
	border-bottom:1px solid #d4d4d0;
}
#support p {
	font-size:1.4em;
	line-height:1.5em;
}
	/* Links */
	#permlinks {
		float:left;
		font-size:1.3em;
		line-height:1.4em;
		width:290px;
		padding:20px 40px 0 0;
	}
	#permlinks a, #permlinks a:visited {
		display:block;
		clear:both;
		margin:0 0 30px 0;
		color:#444;
	}
	#permlinks a:hover i {
		color:#005c9b;
	}	
	#permlinks a:hover span {
		-webkit-transition:all 0.2s ease-in-out;
		-webkit-transform:scale(1.05,1.05);		
	}	
	#permlinks i {
		display:block;
		color:#2194bf;
	}
	#permlinks span {
		display:block;
		clear:both;
		float:left;
		width:50px;
		height:50px;
		margin:0 15px 0 0;
		background:url(../../img/sprites.png) no-repeat;
	}
	#twitterlink span {
		background-position:0 -30px;
	}
	#linkedinlink span {
		background-position:-50px -30px;	
	}
	
	
	
	/* Quotes */
	#quotes {
		float:left;
		width:600px;
		padding:17px 0 0 40px;
		background:url(../../img/bg-emboss-line-v.png) left top repeat-y;
	}
	#quotes h1 {
		margin:0 0 10px 0;
	}
	#quotes blockquote {
		display:block;
		margin:0 0 20px 0;
		padding:0 0 20px 0;
		background:none !important;
	}
	#quotes p {
		font-style:italic;
		font-weight:300;
		font-size:1.6em;
		margin:0 0 5px;
	}
	cite {
		font-style:italic;
		font-weight:400;
		font-size:1.5em;
		color:#005c9b;
	}	
	cite a {
		font-size:0.8em;
	}
	.allquotes span {
		display:block;
		margin:20px 0 0 0;
		padding:10px 0 0 0;
		border-top:1px dotted #d4d4d0;
	}
	.nextquote {
		display:inline-block;
		float:left;
		padding:0 23px 0 0;
		font-size:1.3em;
		line-height:16px;
		background:url(../../img/sprites.png) right -84px no-repeat;
	}

/* Contact
*************************************************************************/
#contact aside {
	width:280px;
	float:left;
}
#contact aside:nth-of-type(1) {	margin:0 10px 0 0; }
#contact aside:nth-of-type(2) {	margin:0 60px 0 50px; }
#contact aside h2:hover b {
	-webkit-transition:all 0.1s ease-in-out;
	-webkit-transform:scale(1,1);
}
#contact h1 {
	float:none;
	text-align:left;
	margin-bottom:80px;
}
#contact h2 {
	font-size:2.4em;
	font-weight:400;
	height:40px;
	padding:10px 0 10px 0;
	margin:0;
	background:url(../../img/bg-tile-greynoise.png);
	color:#005c9b;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}
#twitter h2:hover, #linkedin h2:hover {
	background:rgba(33,148,191,0.1);
}
#contact p {
	clear:both;
	margin:15px 0;
	padding:0 0 0 20px;
	font-size:1.3em;
}
#contact a {
	display:block;
	color:#005c9b;
}
#contact b {
	width:70px;
	height:70px;
	display:block;
	float:left;
	margin:-15px 10px 0 -5px;
	background:url(../../img/sprites.png) no-repeat;
}
#twitter b {
	background-position:0 -100px;
}
#linkedin b {
	background-position:0 -170px;
}
#email b {
	background-position:0 -240px;
}
#contact i {
	display:block;
	font-size:0.5625em;
	color:#2194bf;
}
	
/* Footer
*************************************************************************/
#footer {
	clear:both;
	font-size:0.9em;
	width:1071px;
	margin:0 auto;
	padding:20px 0 30px;
	border-top:1px solid #FFF;
}
#footer p {
	margin:0 50px 0 0;
	float:right;
}
#footer p:first-child {
	margin:0 0 0 40px;
	float:left;
}
#footer a {
	font-weight:400;
}