/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;

}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

   


#container{
	margin:auto;
	}

#logo{
	margin:0 auto 1em auto;
	width:6.25em;
	height:6.25em;
	color:rgb(60,60,60);
	text-align: center;
	vertical-align: middle;
	font-family:"Apercu Regular", 'Arial', sans-serif; font-weight:normal; font-style:normal;
	font-size: 1.3em;
	line-height: 95%;
	-moz-border-radius: 100%/100%;
    -webkit-border-radius: 100% 100%;
    border-radius: 100%/100%;;
    border:solid .17em #fff;
    }

#logo a{text-decoration: none; color:rgb(60,60,60);}
#logo em{font-family:"Apercu Regular", 'Arial', sans-serif; font-size-adjust:0.508; font-weight:300; font-style:normal; line-height: 70%;}

a img {border: 0;}
a {	text-decoration:none; color:rgb(60,60,60);}

body {

	font: 1.25em/1.25em "Fortescue Regular", 'Times New Roman', Times, serif;
	font-size-adjust:0.508; font-style:normal;
	font-weight:normal;
	text-rendering: optimizeLegibility;
	padding:1em;
}

body a{text-decoration: underline;}

em {font-family:"Fortescue Italic", 'Times New Roman', Times, serif; font-weight:normal; font-style:italic; }

.space{
	width:50%;
	height:.25em;
	background-color:rgb(255,255,255);
	border-radius:.25em/.25em;
	margin:1em auto 1em auto;

}

a.navigation{
	font-family:"Apercu Regular", 'Arial', sans-serif; 
	font-size-adjust:0.508;
	font-style:normal;	
	font-size:70%;
	display:block;
	text-decoration:none;
	color:rgb(60,60,60);
	display:none
}

a#toprojects{right:3em; position:absolute; top:9em; z-index: 1000;}
a#towriting{left:3em; position:absolute; top:9em; z-index: 1000;}

a#tocolophon{
	left: 2em; 
	position: fixed; 
	bottom: 0;
	width: 100%;
	padding:4em 0 1em 1em;
	color: white;
/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, rgba(232,232,232,0) 0%, #E8E8E8 100%);
/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, rgba(232,232,232,0) 0%, #E8E8E8 100%);
/* Opera */ 
	background-image: -o-linear-gradient(top, rgba(232,232,232,0) 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(232,232,232,0)), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, rgba(232,232,232,0) 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, rgba(232,232,232,0) 0%, #E8E8E8 100%);	
}



#projects{	font-family:"Apercu Regular", 'Arial', sans-serif; width: 100%; text-align: center;}

#projects, ul{
display:block;
list-style-type: none;
line-height: normal;
}

#projects li {
margin-right: 0.25em;
display: inline;
font-size: 1.5em;
line-height: 1.1em;
}

#projects a{text-decoration: none;}
#projects a:hover{text-decoration:underline;}

/*	Typography presets
	------------------	*/


.huge, h1 {
	font-size: 3em;
	line-height: 72px;
	letter-spacing: -1px;
}

.large, h2 {
	font-size: 2em;
	line-height: 48px;
/* 	font-family:"Apercu Regular", Calibri, sans-serif; font-size-adjust:0.508; font-weight:normal; font-style:normal;  */
	font-family:"Fortescue Regular", 'Times New Roman', Times, serif; font-weight:normal; font-style:normal;

}

.bigger, h3 {
	font-size: 1.5em;
	line-height: 36px;
/* 	font-family:"Apercu Regular", Calibri, sans-serif; font-size-adjust:0.508; font-weight:normal; font-style:normal;  */
	font-family:"Fortescue Regular", 'Times New Roman', Times, serif; font-weight:normal; font-style:normal;

	text-align: center;
	padding-bottom:.5em;
}

.big, h4 {
	font-size: 1.25em;
	line-height: 30px;
/* 	font-family:"Apercu Regular", Calibri, sans-serif; font-size-adjust:0.508; font-weight:normal; font-style:normal;  */
	font-family:"Fortescue Regular", 'Times New Roman', Times, serif; font-weight:normal; font-style:normal;

	text-align: center;

}



.small, small {
	font-size:.75em;
	line-height: 1em;
/* 	font-family:"Apercu Regular", Calibri, sans-serif; font-size-adjust:0.508; font-weight:normal; font-style:normal;  */
	font-family:"Fortescue Regular", 'Times New Roman', Times, serif; font-weight:normal; font-style:normal;

	text-align: center;

}

p + p{
	text-indent: 1.25em;
	margin-top: 0;
	
}

	blockquote{
	font-family:"Fortescue Regular", 'Times New Roman', Times, serif; font-weight:normal; font-style:normal;
	font-size:1em;   
	margin:1em 0 0 1em;

}


hr { 
	width:50%;
	height:.25em;
	background-color:rgb(255,255,255);
	border-radius:.25em/.25em;
	margin:1em auto 1em auto;
	
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,255);}
::-moz-selection 	{background: rgb(255,255,255);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,255);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

	body {
	width: 896px;
	margin: auto;
	padding: 2.4em 1.5em 4em;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	
	}

	#container{
	margin:auto;
	width:70%;
	}
	
	p{	font-size: 1.1em;
	line-height: 145%;
}

	img.platform {
	display: inline;
	width:25%;
	}

	img.project{
	display: inline;
	width:45%;
	height:45%;
	margin: .25em;
	}
	
	.snippet{
	margin:1em auto 1em auto;
	}
	
	.snippet, h4{margin-bottom:.25em}
	


/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
	width: 712px;
	padding: 2.4em 1.5em 4em;
	margin: auto;

	}
	
	#container{
	margin:auto;
	width:75%;
	}
	
	
	img.platform {
	display: inline;
	width:50%;
	}
	
	
	img.project{
	display: block;
	width:100%;
	height:100%;
	margin: .25em auto .25em auto;
	}
	
		.snippet{
	margin:1em auto 1em auto;
	}
	
	.snippet, h4{margin-bottom:.25em}
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {
	width: 252px;
	padding: 2.4em 1.5em 4em;
	margin: auto;

	}
	#container{
	margin:auto;
	width:100%;
	}
	
	
	img.platform {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
}
	p{
	font-size: .8em;
	line-height: 1.4em;
	}
	
	img.project{
	display: block;
	width:100%;
	height:100%;
	margin: .25em auto 0 auto;
	}

ol{font-size:.75em;
	line-height: 140%;}
	
		.snippet{
	margin:1em auto 1em auto;
	}
	
	.snippet, h4{margin-bottom:.25em}
	
	.projects {width: 252px;overflow-x:hidden;}	
	.projects, img{width: 252px}	
	
	#projects li {
margin-right: 0.25em;
display: inline;
font-size: 1.25em;
}

	#projects li { display: block; font-size:1.2em;}



}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
	width: 436px;
	padding: 2.4em 1.5em 4em;
	margin: auto;

	}
	#container{
	margin:auto;
	width:100%;
	}
	
		
	img.platform {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
	}
	
	p{
	font-size:.9em;
	}
	
	img.project{
	display: block;
	width:100%;
	height:100%;
	margin: .25em auto .25em auto;
	}

	
		.snippet{
	margin:1em auto 1em auto;
	}
	
	.snippet, h4{margin-bottom:.25em}

	.projects {width: 436px;overflow-x:hidden;}	
	.projects, img{width: 436px}
	
	#projects li { display: block;}
	#projects  { width:70%; margin: 0 auto 0 auto;}

		
}

/*		Mobile Layout: 160px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 319px) {
	
	body {
	width: 160px;
	padding: 2.4em 1.5em 4em;
	margin: auto;

	}
	#container{
	margin:auto;
	width:100%;
	}
	
	
	img.platform {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
}
	p{
	font-size: .8em;
	line-height: 1.4em;
	}
	
	img.project{
	display: block;
	width:100%;
	height:100%;
	margin: .25em auto 0 auto;
	}


	
		.snippet{
	margin:1em auto 1em auto;
	}
	
	.snippet, h4{margin-bottom:.25em}
	
	
	.projects {width:160px; overflow-x:hidden; }
	.projects, img{width:160px}	
		
		#projects li { display: block;}
		a.navigation{	font-size:100%;}

}



/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}

/* moveable divs */

.projects {
 
 background:white;
 box-shadow: 3px 3px 10px #666;
 padding: 2px;
 top: 200px;
/*  left: 250px; */
	margin: 0 auto 0 auto;
 position: absolute;
 cursor: move;
 overflow-x: hidden;
 z-index: 1000;
}

.projects:hover{background-color: rgb(255,243,167);}
.projects:active{z-index: 1001;}

.projects img{display: block;}