@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900);

* {margin:0; padding:0; border:0; list-style:none;}

html {background: #CCC url(images/body_700.png) center repeat-y;}

body {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 0 25px 0;
	font-family: Arial, Verdana, sans-serif;
	font-size: 80%;
	color: #999;
}



/* GENERAL TAGS ***********************************************************/

h1,
h2,
h3 {
	font-family: 'Maven Pro', sans-serif;
	font-weight: normal;
}

h1 {
	background: #FF8400 url(images/whorl.png) no-repeat;
	border-top: 1px solid #FFA500;
	border-bottom: 1px solid rgba(255, 132, 0, .5);
	font-size: 16px;
	text-shadow: 0px 0px 5px rgba(255, 132, 0, .7);
}

h2 {
	background: #BCB9BC;
	font-size: 140%;
	color: white;
	border: solid #fff;
	border-width: 5px 0 0 0;
}

h3 {
	padding: 0 0 .3em 0;
	font-size: 125%;
	color: #666;
}

h2 + ul li, p {
	padding: 10px 20px 0.2em 20px;
	line-height: 140%;
}



/* NAVIGATION ********************************************************/

a {
	color: #E00;
	outline: 0;
	text-decoration: none;
}

a:hover {
	color: #333;
	text-decoration: underline;
}



h1 a,
h2 a {
	display: block;
	color: #fff;
	cursor: default;
}

h1 a:hover,
h2 a:hover {text-decoration: none;}

h1 a {padding: 60px 20px 10px 20px;}
h1 a:hover {color: #fff;}
h1 span {display: block;}

h1 span:first-child {
	font-size: 44px;
	line-height: 100%;
}

h2 a {padding: 1px 20px 2px 20px;}
h2 a:hover {color: #fff;}

ul.nav {
	padding: 0 16px;
	overflow: hidden;
	background: #E6E6E6;
}

ul.nav li {
	display: block;
	float: left;
}

ul.nav li a {
	display: inline-block;
	padding: 4px 6px;
}

ul.nav li:after {content: "|";}
ul.nav li + li + li +  li +  li + li:after {content: "";}



/* CONTENT ********************************************************/

div.details {
	background: #fff url(images/headshot.png) no-repeat 533px 38px;
	padding-right: 25%;
	overflow: hidden;
	padding-bottom: 30px;
}

div.details p:first-child {padding-top: 35px;}
div.details p:last-child {line-height: 85px;}
div.details p:last-child:after {content: "Download CV";}

div.details p a {
	display: block;
	float: left;
}

p.media a {
	width: 50px;
	height: 50px;
	text-indent: -999em;
	margin-right: 10px;
	overflow: hidden;
	opacity: 0.6;
}

p.media a:hover {opacity: 1;}

a.word {background: url(images/icon_word.gif) no-repeat;}
a.pdf {background: url(images/icon_pdf.gif) no-repeat;}


	.footer {
		border-top: 1px solid #BCB9BC;
		bottom: 0;
		padding: 3px 20px 5px 20px;
		position: fixed;
		width: 660px;
		box-shadow: 0px -5px 20px rgba(0, 0, 0, .1);
		background: #fff;
		color: #555;
		overflow: hidden;
	}

.footer a {
	float: right;
	padding-left: 10px;
}



/* GRID LAYOUT ***********************************************************/

h2 + ul {
	background: white;
	overflow: hidden;
	padding-bottom: 30px;
}

h2 + ul li {
	background: #E6E6E6;
	width: 202px;
	float: left;
	padding: 5px 9px 10px 9px;
	margin-top: 10px;
	margin-left: 10px;
	overflow: hidden;
	min-height: 124px;
}

h2 + ul li a:hover {
	text-decoration: none;
	background-position: 200px;
}



/* THUMBS ***********************************************************/

h2 + ul li a {
	display: block;
	width: 190px;
	height: 90px;
	border: 1px solid #fff;
	padding: 5px;
	font-size: 90%;
	text-decoration: none;
	background: #FFD673 no-repeat;
	box-shadow: inset 0px 0px 40px rgba(0, 0, 0, .07), 0px 3px 15px rgba(0, 0, 0, .05);
	text-indent: -999em;
	color: #333;
}

h2 + ul li a:hover {
	box-shadow: inset 0px 0px 40px rgba(0, 0, 0, .07), 0px 3px 15px rgba(0, 0, 0, .1);
	text-indent: 0;
}

li.anupana a {background-image: url(images/thumbs/anupana.jpg);}
li.bbc a {background-image: url(images/thumbs/bbc.gif);}
li.british-airways a {background-image: url(images/thumbs/british-airways.gif);}
li.clock a {background-image: url(images/thumbs/clock.gif);}
li.club_fabulous a {background-image: url(images/thumbs/club_fabulous.gif);}
li.condor a {background-image: url(images/thumbs/condor.jpg);}
li.danielle a {background-image: url(images/thumbs/danielle.gif);}
li.google a {background-image: url(images/thumbs/google.gif);}
li.hasselhoff a {background-image: url(images/thumbs/hasselhoff.jpg);}
li.home_office a {background-image: url(images/thumbs/home_office.gif);}
li.iplayer a {background-image: url(images/thumbs/iplayer.gif);}
li.itravel a {background-image: url(images/thumbs/itravel.gif);}
li.kosmo a {background-image: url(images/thumbs/kosmo.jpg);}
li.logarithm a {background-image: url(images/thumbs/logarithm.gif);}
li.mercy a {background-image: url(images/thumbs/mercy.jpg);}
li.music a {background-image: url(images/thumbs/music.gif);}
li.norris a {background-image: url(images/thumbs/norris.jpg);}
li.olay a {background-image: url(images/thumbs/olay.gif);}
li.rivercultures a {background-image: url(images/thumbs/rivercultures.gif);}
li.rolls-royce a {background-image: url(images/thumbs/rolls-royce.gif);}
li.sight a {background-image: url(images/thumbs/sight.gif);}
li.superdrug a {background-image: url(images/thumbs/superdrug.gif);}
li.transactional-analysis a {background-image: url(images/thumbs/transactional-analysis.gif);}
li.twobytwo a {background-image: url(images/thumbs/twobytwo.jpg);}
li.urban a {background-image: url(images/thumbs/urban.gif);}
li.virgin-1 a {background-image: url(images/thumbs/virgin-1.gif);}
li.widows a {background-image: url(images/thumbs/widows.gif);}
li.woolworths a {background-image: url(images/thumbs/woolworths.gif);}






/* MEDIA QUERIES *************************************************************/



/* medium and large - adding accordion animations */

@media screen and (min-width: 511px) {

	h2 + ul:not(:target),
	#profile + div.details {
		padding-bottom: 0;
		height: 0px;
		opacity: .3;
		-webkit-transition: height .6s ease-in-out, opacity .8s ease-in-out;
		-moz-transition: height .6s ease-in-out, opacity .8s ease-in-out;
		transition: height .6s ease-in-out, opacity .8s ease-in-out;

	}

	div#profile:target + div.details {height: 235px;}

	h2:target + ul,
	#profile:target + div.details {
		height: 455px;
		opacity: 1;
	}

	#video:target + ul {height: 460px;}	

	/* highlight links for only :target support browsers */

	h2 {background: #BCB9BC url(images/nav.gif) 673px 0px no-repeat;}

	h1:not(:target) a:hover {cursor: pointer;}

	/* highlight links for only :target support browsers */
	h2:not(:target) a:hover {
		color: #333;
		cursor: pointer;
	}

	body:not(:target) h2:hover {background-position: 673px -200px;}
	body:not(:target) h2:target {background-position: 673px -100px;}

}



/* large */

@media screen and (min-width: 741px) {

	h2:target + ul,
	div#profile:target + div.details {height: 305px;}

	#video:target + ul {height: 310px;}

}



/* medium and small */

@media screen and (max-width: 740px) {

	html {background-image: url(images/body_470.png);}
	body {max-width: 470px;}

	h1 a {padding-top: 30px;}

	div.details p:first-child {padding-top: 20px;}

	h2 {background-position: 443px 0px;}
	body:not(:target) h2:hover {background-position: 443px -200px;}
	body:not(:target) h2:target {background-position: 443px -100px;}

	div.details {padding-right: 0;}
	div.details p:last-child {line-height: 140%;}
	div.details p:last-child:after {content: "";}
	div.details p a {display: inline;}

	p.media a {
		width: auto;
		height: auto;
		text-indent: 0em;
		opacity: 1;
		background: none;
	}

	.footer {
		border: 0;
		background: #E6E6E6;
		padding-bottom: 3px;
		font-size: 90%;
		position: relative;
		width:auto;
	}

}



/* small */

@media screen and (max-width: 510px) {

	html {background-image: url(images/body_240.png);}

	body {
		max-width: 240px;
		padding-bottom: 0;
	}

	#profile + div.details {font-size: 90%;}

	h1 a {padding-top: 7px;}
	h2 {background-image: none;}


	ul.nav {padding-top: 2px;}

	ul.nav li a {
		padding: 1px 6px 3px 6px;
		font-size: 90%;
	}

	div.details p:last-child {display: none;}

}