@import url("http://boring.ch/adrien/public/Plex/plex.css");

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,100..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


/*	-	-	-	-	-	-	-	-	-	-	*/
/* Colours */

BODY {
	color: #808080; 
	background: #FFF;
}

HR{
	border: none;
	border-top: 1px solid #CCC;
	margin-top: 2em;
	margin-bottom: 2em;
}

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

/*
franklin-gothic-urw-1, franklin-gothic-urw-2, 
franklin-gothic-comp-urw-1, franklin-gothic-comp-urw-2,
*/


BODY {
	/*font-family: 'Source Sans Pro', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Light", "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif; */
	
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	/*font-family: 'Inter', sans-serif;*/
	font-family: "Plex var";
	font-family: 'IBM Plex Sans', sans-serif;
	line-height:1.4em;
}

* { font-weight: 300; }

P, H1, H2, H3, H4, H5, H6, 
A, UL, LI, 
IMG {
	margin:0;
	padding: 0;
}
P, H1, H2, H3, H4, H5, H6, A, UL, LI {
	margin-bottom: 1em;
}


.textBlock{	
	letter-spacing:0.02em;
}

h1#siteTitle{
	/*font-family: 'Source Sans Pro';*/
	/*text-transform: uppercase;*/
	font-weight: inherit;
	font-size: 5rem;
	line-height:1em;
	display: inline-block;
	float: left;
}

.subTitle{
	/*font-family: 'Source Sans Pro';*/
	text-transform: none;
	text-transform: lowercase;
}


H2.categoryTitle{
	/*font-family: 'Source Sans Pro';*/
}

H3.projectTitle{
	/*font-family: 'Source Sans Pro';*/
}

#copyright{
	display: block;
	clear: both;
	float: right;
	color: #F8F8F8;
	font-size: 8px;
}

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

BODY {
	padding: 0px; 
	text-align: center;
}

#page {
	background: #FFF;
	margin: auto;
	width: 940px;
	text-align: left; 
}

#header{}

#nav{
	float: right;
}

#content{
	clear: both;
	float: none;
}


#footer{
	border-top: 1px solid #DDD;
	margin-top: 2em;
	margin-bottom: 1em;
	padding-top: 1em;
	clear: both;
}

HR.clearHack{
	float: none;
	clear: both;
	border: none;
	padding: none;
	margin: none;
}

/*	-	-	-	-	-	-	-	-	-	-	*/
/* Project List */


UL.CategoryProjectsList{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.categoryTitle{
	margin-top: 3em;
	margin-bottom: 2em;
	border-top: 1px solid #DDD;
	width: 100%;
	clear: both;
	float: none;
	/*text-transform: uppercase;*/
}

LI.projectItem{
	border-top: 1px solid #DDD;
	
	margin: 0px;
	padding: 0px;

	/*display: inline-block;*/
	display:block;
	float: left;
	
	width: 300px;
	height: 150px;

	padding-top: 10px;
	margin-bottom: 60px;
	margin-right: 10px;
	
	/*background-color: #EEE;*/
	font-size:80%;
}

A.blockURL{}

DIV.projectThumbnail{
	width: 140px;
	float: left;
}

A.thumbURL{}
A.thumbURL img{ max-width: 100%; }


DIV.projectInformation{
	width: 140px;
	float: none;
	margin-left: 150px;
}

H3.projectTitle{}
H3.projectTitle A {}

P.projectDate{ display: none;}


/*	-	-	-	-	-	-	-	-	-	-	*/
/* Proejct Display */
#projectMetadata{
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #F8F8F8;
	margin-bottom: 1em;
}
#principalMetadata{
	/*text-transform: uppercase;*/
	width: 540px;
	float: left;
}
#principalMetadata H2, #principalMetadata H3{
	font-size: 150%;
} 
#secondaryMetadata{
	color: #CCC;
	width:  380px;
	float: none;
	margin-left: 550px;
}
#secondaryMetadata P{
	font-size: 75%;
}
#projectContent{
	margin-top: 1em;
	clear: both;
}
#projectMedia{ 
	width: 540px;
	float: left;
}
#projectTextContent{
	width:  380px;
	float: none;
	margin-left: 550px;
}


/*	-	-	-	-	-	-	-	-	-	-	*/
/* Links */
* A:link, * A:visited, * A:active, * A:hover {
	color: inherit;
	text-decoration: none;
	border: none;
}


* #page A:link, 
* #page A:visited, 
* #page A:active, 
* #page A:hover {
	color: #666;
	text-decoration: none;
	border-bottom: 1px solid #DDD;
}
* #page A:hover {
	color: #333;
	border-bottom: 1px solid #333;
}
* #page A:visited {	
	color: #333;
	border-bottom: 1px solid #DDD;
}


* H1#siteTitle A:link, 
* H1#siteTitle A:visited, 
* H1#siteTitle A:active, 
* H1#siteTitle A:hover {
	color: inherit;
	text-decoration: none;
	border: none;
}
* H1#siteTitle A:hover {
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #333;
}
* H1#siteTitle A:visited {	
	color: inherit;
	text-decoration: none;
	border:none;
}


* img, * A.blockURL, * A.thumbURL, * A.imageZoom{
	color: inherit;
	text-decoration: none;
	border:none;
}

.imageZoom,
* A.imageZoom, 
* A.imageZoom:link, 
* A.imageZoom:visited, 
* A.imageZoom:active, 
* A.imageZoom:hover {	
	color: inherit;
	text-decoration: none;
	border: none;
}

A.blockURL{
	display: block;
	/*border: 2px solid #FC0;*/
}
A.blockURL:hover{
	/*background-color: #FFCC00;*/
}





img { max-width: 100%; }