/*

---------------------------------------
---------------------------------------
--- Table of Contents:				---
---									---
--- =General						---
--- =Layout							---
--- =Links							---
--- =Border Radius					---
--- =Header							---
--- =Type							---
--- =Images							---
--- =Lists							---
--- =Boxes							---
---------------------------------------
---------------------------------------

Colour Reference:

#333333		Dark Grey		Main text
#666666		Lighter Grey	Lighter text
#EEEEEE		Light Grey		Backgrounds

#B94481		Pink			"View my work" button
#b94481		Dark Pink		"View my work" button hover

*/

@import url(reset.css);

/* =General --------------------------------------------------------------
------------------------------------------------------------------------*/

body { text-align:center; font-family:Candara, "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#333333; height:100%; background-color:#ffffff; background:url(../images/bg.jpg); /*background-position:bottom left, top left; background-repeat:repeat-x, repeat-x; */}



.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } /* ie.css */

/* =Layout ---------------------------------------------------------------
------------------------------------------------------------------------*/

#page { width:945px; /* 945 */ margin:auto; text-align:left; /*padding-top:40px;*/ overflow:hidden; position:relative; }

#content { background-color:#ffffff;}

.js #home #page { padding-bottom:880px; }
.no-js #home #page { padding-bottom:20px; }
#portfolio #page { overflow:visible; }

	header, #intro { position:relative; margin-bottom:0px; clear:both; }
	
	#intro { padding:0 250px 0 30px; -webkit-column-count:2; -webkit-column-gap:20px; -moz-column-count:2; -moz-column-gap:20px; column-count:2; column-gap:20px; }
	#portfolio #intro { -webkit-column-count:1; -moz-column-count:1; }
	
	#twitter { padding:10px 20px; text-align:center; margin:auto; background:#eeeeee; margin-bottom:40px; }
	
	#graph-bio { position:relative; margin-bottom:40px; }
	
	#water { margin-bottom:40px; }
		
	div.col { width:305px; /* width */ float:left; margin:15px 15px 0 0; /* margin:0 15px 30px 0;*/ }
		/*div.col:nth-of-type(2) { margin-top:45px; }*/
		div.col:nth-of-type(3) { margin-right:0; }
	.no-js div.col { width:auto; float:none; margin:0; }
	
	.2col_left	{ width:305px; /* width */ float:left; margin:15px 15px 0 0; }
	.2col { width:605px; /* width */ float:right; margin:320px 15px 0 0; /* margin:0 15px 30px 0;*/ }

footer
{ position:fixed; right:0px; bottom:0px; display:inline; font-size:12px;
 background-color:#fff;
 /*
 padding-top:5px;
 padding-bottom:5px;
 padding-left:5px;
 padding-right:5px;
 */
 }

/* =Links ----------------------------------------------------------------
------------------------------------------------------------------------*/

a { -webkit-transition:color 0.5s ease-out; }

header ul a:link, header ul a:visited, #peoplesay a:link, #peoplesay a:visited, #fancy_div a:link, #fancy_div a:visited, #intro a:link, #intro a:visited, #getintouch a:link, #getintouch a:visited { color:#666666; text-decoration:underline; }
header ul a:hover, header ul a:active, #peoplesay a:hover, #peoplesay a:active, #fancy_div a:hover, #fancy_div a:active, #intro a:hover, #intro a:active, #getintouch a:hover, #getintouch a:active { color:#333333; }

/* View work link button */
#intro a#portfolio:link, #intro a#portfolio:visited { text-decoration:none; color:#000; font-size:17px; padding:15px 25px; background:#d1669e url(../images/pink-buttom-bkg.gif); position:absolute; right:30px; top:30px; }
#intro a#portfolio:hover { background:#b94481 url(../images/pink-buttom-bkg-over.gif); }
#intro a#portfolio:active { background:#a33870 url(../images/pink-buttom-bkg-active.gif); }

/* Links inside the boxes */
.drag a:link, .drag a:visited { color:#000; }



/* View about page link button */
#intro a#about:link, #intro a#about:visited { text-decoration:none; color:#000; font-size:17px; padding:15px 25px; background:#d1669e url(../images/pink-buttom-bkg.gif); position:absolute; right:40px; top:-5px; }
#intro a#about:hover { background:#b94481 url(../images/pink-buttom-bkg-over.gif); }
#intro a#about:active { background:#a33870 url(../images/pink-buttom-bkg-active.gif); }


/* =Border Radius ---------------------------------------------------------
------------------------------------------------------------------------*/

#intro a#portfolio, #twitter, #water a, .drag, #intro a#about, .project, .knowledge { -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; }
#fancy_div input, #fancy_div textarea, #getintouch { -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; }

/* =Header ---------------------------------------------------------------
------------------------------------------------------------------------*/

/*header { background:url(../images/header.jpg); }*/
header { background-color:#000000; }

header h1 a { background:url(../images/logo.png) no-repeat; display:block; width:160px; height:89px; text-indent:-100000px; outline:none; }
	
header hgroup h2 { position:absolute; left:175px; top:20px; text-transform:uppercase; border-bottom:1px solid #666666; color:#666666; word-spacing:1px; letter-spacing:1px; font:13px Candara, "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
	
header > h2 { font-size:180px; opacity:.06; position:absolute; top:-100px; right:0; }
	
header ul { font-size:14px; position:absolute; right:0; top:0; z-index:100; }
	
	header ul li { float:left; margin-left:30px; }
		header ul li a { display:block; padding:9px 0; }
		

/* =Type ---------------------------------------------------------------
------------------------------------------------------------------------*/

#intro p { font-size:13px; line-height:1.5; margin-bottom:10px; }

#water h3 { font-size:13px; }


#articles li { font-size:13px; }
#articles li > a:first-child { font-size:16px; display:block; clear:both; }


/* =Images ---------------------------------------------------------------
------------------------------------------------------------------------*/

#graph-bio figure dt { font:bold 14px Cambria, Georgia, "Times New Roman", Times, serif; margin-bottom:40px; }
#graph-bio figure dd { margin-left:-90px; }

.slideshow img { margin-bottom:5px; }

/* =Lists ---------------------------------------------------------------
------------------------------------------------------------------------*/

.project > ul { margin-top:0px; overflow:hidden; text-align:center;}
.project > ul li { float:left; font-size:13px; text-transform:uppercase; margin-left:3px; }
.project > ul li:after { content:" ||"; }
.project > ul li:first-child { margin-left:0; }
.project > ul li:last-child:after { content:""; }

/* =Boxes ----------------------------------------------------------------
------------------------------------------------------------------------*/

/* Background colours ---------------------------------------------------------------- */

.green 		{ background-color:#6e8c1b; background-image:url(../images/bkg-green.gif); }
.purple 	{ background-color:#8b61a5; background-image:url(../images/bkg-purple.gif); }
.sand 		{ background-color:#c1b33a; background-image:url(../images/bkg-sand.gif); }
.bordeaux 	{ background-color:#be2525; background-image:url(../images/bkg-bordeaux.gif); }
.brown 		{ background-color:#7c642b; background-image:url(../images/bkg-brown.gif); }
.turquoise 	{ background-color:#619ba5; background-image:url(../images/bkg-turquoise.gif); }
.cyan 		{ background-color:#3b8aae; background-image:url(../images/bkg-cyan.gif); }
.lightgreen { background-color:#9aac1a; background-image:url(../images/bkg-lightgreen.gif); }
.orange 	{ background-color:#c97b0d; background-image:url(../images/bkg-orange.gif); }
.pink 		{ background-color:#e579ca; background-image:url(../images/bkg-pink.gif); }
.yellow 	{ background-color:#c1b33a; background-image:url(../images/bkg-yellow.gif); }
.skin 		{ background-image:url(../images/bkg-skin.gif); }
.darkgreen 	{ background-color:#50651d; background-image:url(../images/bkg-darkgreen.gif); }
.navy 		{ background-color:#2e4167; background-image:url(../images/bkg-navy.gif); }
.teal 		{ background-color:#619ba5; background-image:url(../images/bkg-teal.gif); }
.violet 	{ background-color:#b9a68b; background-image:url(../images/bkg-violet.gif); }
.white 	{ background-color:#fff;}

/* knowledgee*/

#wrap {
		width:945px;
		margin:0 auto;
		background:#99c;
	}
	#maincol {
		float:left;
		width:675px;
		padding:10px;
		background:#9c9;
	}
	#sidebar {
		float:right;
		width:230px;
		padding:10px;
		background:#99c;
	}

/* FONTS FONTS */

.project { background-color:#eeeeee; padding:15px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -khtml-box-sizing:border-box; box-sizing:border-box; color:#000; margin-bottom:15px; position:relative; }
.no-js .project { -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding-bottom:14px; clear:both; }

.project a:link, .project a:visited { opacity:1; color:#000;}
.project a:hover, .project a:active { opacity:.5; color:#000;}
.project .active a { opacity:.5; color:#000;}

.project {font-family:Cambria, "Hoefler Text", "Times New Roman", Times, serif;  }

.project p { font-size:15px; line-height:1.4; margin-bottom:5px; }

.knowledge { background-color:#eeeeee; padding:15px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -khtml-box-sizing:border-box; box-sizing:border-box; color:#000; margin-bottom:15px; position:relative; }
.no-js .knowledge { -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding-bottom:14px; clear:both; }

.knowledge a:link, .knowledge a:visited { opacity:1; color:#000;}
.knowledge a:hover, .knowledge a:active { opacity:.5; color:#000;}
.knowledge .active a { opacity:.5; color:#000;}

.knowledge {font-family:Cambria, "Hoefler Text", "Times New Roman", Times, serif;}

.knowledge p { font-size:15px; line-height:1.6; margin-bottom:5px; }

.contentheading {
	font: bold 1em Verdana, Arial, sans-serif; letter-spacing: 2px;
  text-transform: uppercase;  text-align: left;
}


h1, h2, h3, h4, h6 {
	font-family:palatino,times new roman,times,georgia,serif;
	font-weight:normal;
	text-align:left;
	color:#000;
	margin:0;
}

h1 { font-size: 130%; }

h2
{
	/*font: 1.5em Georgia, "Times New Roman", serif;*/
	letter-spacing: 1px;  text-align: left;
	font-size: 120%;
	line-height:1.2;
	margin-top:5px;
	margin-bottom:5px;
}

h3 {
	font-size:110%;
	font-weight:bold;
	color:#963;
	padding-bottom:2px;
}

h4 { font-size:100%;
	margin-top:5px;
	margin-bottom:5px;
	font-style:italic;}

/* bold sans-serif subheads */
h5 {
	font:90% 'Lucida Grande','Lucida Sans Unicode',verdana,arial,sans-serif;
	font-weight:bold;
	color:#333;
	margin: 6px 0 2px 0;
}


/* =Contact Popup ---------------------------------------------------------
------------------------------------------------------------------------*/

#fancy_div h2 { color:#666666; font:bold 36px Cambria, "Hoefler Text", "Times New Roman", Times, serif; margin-bottom:20px; }
#fancy_div p { font-size:14px; margin-bottom:10px; color:#666666; line-height:1.4; }

.no-js #getintouch { display:block !important; background:#ffffff; padding:14px; }
.no-js #getintouch h2 { font:bold 24px Cambria, Georgia, "Times New Roman", Times, serif; margin-bottom:10px; }
.no-js #getintouch p { font-size:14px; line-height:1.5; }