@charset "utf-8";
/* CSS Document */
/* Phoneography - Summer 2015 Big Project
/* Publication Date: 2014-September-2
/* Style Sheet Auther: Phillip Chee
/* editing */

		.aquamarine {background: #9dc6d8;}
		.scubaBlue {background: #00b3ca;}
		.luciteGreen {background: #7dd0b6; }
		.classicBlue {background: #1d4e89; }
		.toastedAlmond {background: #d2b29b; }
		.strawberryIce {background: #e38690;}
		.tangerineOrange {background: #f69256; }
		.custardYellow {background: #ead98b;}
		.marsalaRed {background:#965251;}
		.glacierGray {background:#c6cccc; }
#page {
	max-width: 95%;
	margin: 0 auto;
	
}
.el {
	text-align: center;
	padding-top: 1em;
	background:#ead98b;
	min-width:150px;
	min-height:150px;
	max-width:150px;
	max-height:150px;
	width:150px;
	height:150px;
	border:2px solid #fff;
}
#table {
	max-width:1500px;
	display:flex;
	flex-wrap:wrap;
	background:#000;
	}

/* typography */

body {
	font-size: 62.5%;
	font-family: 'pt_serifregular', Georgia, "Times New Roman", Times, serif;
	font-family:
	}
em, i {
	font-family: 'pt_serifitalic', Georgia, "Times New Roman", Times, serif;
}
strong, b {
	font-family: 'pt_serifbold', Georgia, "Times New Roman", Times, serif;
}
h1, h2, h3, h4, h5, h6 {
	/*font-weight:normal;*/
	font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif;
	}
p, #intro p {
	font-size: 1.8em;
	font-size: 1.8rem;
	line-height: 1.3;
	padding: 0.5em;
	padding: 0.5rem;
	
}
code {
	font-family: 'anonymousregular', Consolas, monospaced;
	font-size: 1.0em;
	font-size: 1.0rem;
}
.element {
	background: #7dd0b6;;
	color: #ead98b;
	display:inline-block;
	width:1.8em;
	width: 1.8rem;
	height: 1.8em;
	height: 1.8rem;
	padding: 2%;
}

/*#header h1, #home */
#header {
	/*background-color: rgb(56,79,160);
	background-color: rgba(56,79,160,0.8);
	position:relative;
	border-bottom: 1px red solid;*/
}
#logo {
	width: 100%;
	background: background: #e38690;
	
	/*float: left;*/
	
}
img.menu-icon {
	width:1.4em;
	margin-right:0.5em;
}
div.kicker {
	/*float: left;
	width: 75%;*/
	padding-left: 1.5em;
	padding-left: 1.5rem;
	
}
.kicker h1, #category #header h1, #page #header h2, #memberpage #header h1  {
	padding-top: 0.4em;
	padding-top: 0.4rem;
	font-size:3em;
	color: #fff;
	font-variant:small-caps;
	
}
.kicker h1 a, #category #header h1 a, #memberpage #header h1 a {
	color: #965251;
	text-decoration:none;
}
.kicker h2, #memberpage #header h2, #page #header h2 {
	font-size: 8em;
	
	color: rgb(255,255,255);
}
#category #header h1 {
	margin-left:0.5em;
	margin-left:0.5rem;
}
#category #header h2 {
	margin-left:0.5em;
	margin-left:0.5rem;
}
.tile {
	margin-left: -1px; 
}
.tile h2 {
	padding-bottom:0.5em;
}
.tile img {
	border: 2px #fff solid;
}
#memberpage #header {
	font-family: 'LeagueGothicRegular', Verdana, Geneva, sans-serif;
	color: #fff;
	padding-left: 1em;
	padding-left: 1rem;
}
#memberpage #header h2 cite  {
	font-family: 'pt_serif_captionregular', Arial, Helvetica;
	font-size: 140%;
	
}
h2 span#category, .project-title {
	font-family: 'pt_serifbold', Georgia, "Times New Roman", Times, serif;
	font-size: 2.2em;
	font-size: 2.2rem;
	color: #1d4e89;
}
#memberpage #header h2 a {
	color: #fff;
}
#aside h3 {
	font-size: 3em;
	margin-top: 0.4em;
	margin-left: 0.5em;
}
.item-title {
	font-size: 2.4em;
}
.item-author {
	/*font-size: 4em;*/
}
.item-author a {
	color: rgb(242,193,43);
	text-decoration: none;
	
}
.thumb p.caption {
		display:none;
	}
#memberpage #header .icon {
	color: rgb(158,145,193);
	font-size: 3em;
}
#memberpage .subhead p a, #memberpage .item-title a, .item-description {
	font-size: 2.2em;
	
	color: #ead98b;
	text-decoration:none;

}
.item-description a:link, .item-description a:visited {
	color:#965251;
}
.item-description a:hover, .item-description a:active {
	background: #1d4e89;
	color: #f69256;
}

a.to_nav {
	color: #fff;
	background-color: #000;
	font-size: 2em;
	text-decoration:none;
	position: fixed;
		top: 0;
		left: 0;
}

#thumbs div h2 {
	font-size: 2em;
	position:relative;
	top: 2em;
	color: #fff;
	background-color: rgb(22,22,22);
	background-color: rgba(22,22,22,0.4);
}

#content h2, #projectindex h2 {
	margin-top: 1.1em;
	font-size: 3.6em;
	color: #fff;
}

li a {
	font-family: 'klimt_hairlineregular', Arial, Helvetica;
}
/*#nav li:not(:first-child) {
	font-weight: bold;
	
}
#nav li:not(:first-child):before {
	content: "\2022";
}*/

/* layout */
.flex-container {

  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  /*-webkit-flex-flow: row wrap;*/
  /*justify-content: space-around;*/
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
#content {
	-webkit-align-items: flex-start;
  	align-items: flex-start;
	padding-left: 1em;
	padding-right: 1em;
}
#photo {
	-webkit-align-items: flex-start;
  	align-items: flex-start;
	-webkit-align-content: center;
  	align-content: center;
	flex: 0 1 1366px;
	/*outline: #fff solid 1px;*/
	
}
#aside {
	margin:0;
	padding-top: 0;
	flex: 1 0 20em;
}
.figure {
	flex: 0 1 1024px;
	/*outline: #000 solid 1px;*/
}
.photo-text {
	flex: 1 1 320px;
	padding:1em;
	
}
.thumb {
	-webkit-align-item: flex-start;
	align-item: flex-start;
}
#thumbnails {
	-webkit-align-item: flex-start;
	align-item: flex-start;
}
#projectindex .tile {
  text-align: center;
  flex: 0 1 25%;
  
  
}
.flex-item-navicon {
	text-align: center;
	width: 33%;
}

#intro {
	
	/*color: #f2c12b;*/
	
	font-size: 1.6em;
	font-size: 1.6rem;
	line-height: 1.4;
	padding: 1em;
	padding: 1rem;
	

}


img {
	height: auto;
	width: 100%;
	max-width: 100%;
}
.project-logo { width: 10%; vertical-align:middle; }

/*header*/
#header {

	

}
        /*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
        #header:before,
        #header:after {
            content:"";
            display:table;
        }
        #header:after {
            clear:both;
        }
        /* For IE 6/7 (trigger hasLayout) */
       #header {
            zoom:1;
        }
    

/* end header styles */

/* Footer */
#footer {
	width: 250px;
}
/*navigation*/
/* slideout-menu */
.slideout-menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
background: rgb(29,78,137);
background: rgba(29,78,137,0.8);
z-index: 100;
}

.slideout-menu h3 {
position: relative;
padding: 12px 10px;
color: #fff;
font-size: 2.2em;
font-weight: 400;
border-bottom: 4px solid #222;
}

.slideout-menu .slideout-menu-toggle {
position: absolute;
top: 12px;
right: 10px;
display: inline-block;
padding: 6px 9px 5px;
/*font-family: Arial, sans-serif;*/
font-weight: bold;
line-height: 1;
background: #222;
color: #f69256;
text-decoration: none;
vertical-align: top;
}
.slideout-menu ul {
	margin-left: 11px; 
}
/* end slideout-menu */

#primary_nav, #links, #memberinfo {

	width: 100%;
}

#primary_nav a, #memberinfo a {
	color: rgb(204,204,204);
	color: #f69256;
	/*color: rgb(204,165,127);*/
	font-size: 2em;
	text-decoration: none;
}

#links li {
		
		font-size: 1.6em;
		width: 100%;
	}
#memberinfo h3 img {
	vertical-align:middle;
	
}
#footer h3 img {
	vertical-align:middle;
	height: 3em;
}
#primary_nav li, #memberinfo li {
	padding-top: 0.2em;
	padding-bottom: 0.2em;	

	}
#links a {
	color: #fff;
	text-decoration:none;
	display: block;
	height: 2em;
	border-bottom: 1px solid rgb(204,204,204);
	border-bottom: 1px solid rgba(204,204,204,0.1);
	}
#primary_nav img {


	vertical-align: middle;
}
/* end primary_nav styles */
/*#memberpage h2.icon, #category*/ 
h2.icon {
	clear:both;
	}

#links h3, #memberinfo h3 {
	font-size: 2.2em;
	margin-top: 0.2em;
	margin-top: 0.2rem;
}
#links ul, #links ul li {
	padding-top: 0.1em;
	font-family: 'OpenSansLight', Verdana, Geneva, sans-serif;
}
#links li a:link,
#links li a:visited,
#memberinfo li a:link,
#memberinfo li a:visted {
		text-decoration: none;
		color: #fff;
		
		display:block;
	}
	
.navicons li a:hover,
.navicons li a:active,
#links li a:hover, 
#links li a:active,
#memberinfo li a:hover,
#memberinfo li a:active {
		color: #fff;
		background-color: rgb(22,22,22);
		background-color: rgba(22,22,22,0.5);
		/*width: 100%;*/
		display:block;
}
#links a:hover {
	background-color: rgb(22,22,22);
	background-color: rgba(22,22,22,0.5);
	border-bottom: 1px solid rgb(85,85,85);
	border-bottom: 1px solid rgba(85,85,85,0.9);
}
#info {
	width: 100%;
	
}
#info p {
	font-size: 1.6em;
	color: #fff;
}
#info img {
	width: 100px;
}

/* Colour */
#photo .figure {
	
}
#photo .figure p {
	color: #fff;
	background-color: #000;
	
}
#photo .figure p a {
	color: rgb(224,73,81);
}
#projectindex {
	background:#1d4e89;
}
#category #page {
	background: #7dd0b6;
}
#memberpage #page {
	background: #00b3ca;
}
#memberpage #header h1 {
	color: #fff;
}
.photo-text {
	color:#ead98b;
}
.blurb {
		background:#9dc6d8;
		padding: 1.5em;
}
/* responsive styles */
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

	.blurb p {
		font-size: 2.4em;
		
	}
	#category #thumbs, #thumbnails {
  		padding: 0;
  		margin: 0;
  		list-style: none;
  
  		display: -webkit-box;
  		display: -moz-box;
  		display: -ms-flexbox;
  		display: -webkit-flex;
  		display: flex;
  		flex-wrap: wrap; 
  /*-webkit-flex-flow: row wrap;*/
  		/*justify-content: space-around;*/
		align-content: flex-start;
		
	}
	#category .blurb {
		
  		width: 27%;
  		
	}
	
	#category #thumbs {
		width: 68%;
		text-align:center;
		margin-left: 1em;
		/*background-color: #fff;*/
	}
	#category #thumbs .tile, .thumb {
		/*width: 30%;*/
		flex: 0 1 150px;
	}
	
	#category #primary_nav {
		
	}
	#photo {
		/*width: 69%;*/
	}
	#memberpage #aside {
		/*width: 29%;*/
	}
	#footer {
		
		
	}
	#logo {
		/*width: 10%;*/
	
	
	}
	div.kicker {
	
		width: 90%;
	
	}
	#primary_nav img {
		width: 20%;
	}

}
@media only screen and (max-width: 1223px) {
	.project-logo { width: 20%; vertical-align:middle; }
	#memberpage #thumbnails, #category #thumbs {
		padding: 0;
  		margin: 0;
  		list-style: none;
  
  		display: -webkit-box;
  		display: -moz-box;
  		display: -ms-flexbox;
  		display: -webkit-flex;
  		display: flex;
  		flex-wrap: wrap;
  /*-webkit-flex-flow: row wrap;*/
  	justify-content: space-around;		
	}  
	#thumbnails .thumb, #category #thumbs .tile {
		text-align: center;
		max-width: 150px;
		max-height: 150px;
  		width: 150px;
		height: 150px;
	}

	.flex-item {
		width: 33%;
	}
	#aside h3 {
		margin-left: 0.2em;
	}
	#footer {
		width: 250px;
	}
	#primary_nav img {
		width: 25%;
	}
	#projectindex h2 {
		font-size: 1.5em;
		font-size: 1.5rem;
	}
/*	#category #thumbs {
		width: 100%;
		text-align:center;
	}
	#category #thumbs .tile {
		width: 50%;
	}
	#category #primary_nav {
		width: 22.5%;
	} */
}


/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
	p, #intro p {
		font-size: 1.2em;
		font-size: 1.2rem;
		line-height: 1.1;
		padding: 0.3em;
		padding: 0.3rem;
	
	}
	#projectindex h2 {
		font-size: 1.1em;
		font-size: 1.1rem;
	}
	.element {
		width:1.2em;
		width: 1.2rem;
		height: 1.2em;
		height: 1.2rem;
		padding: 2%;
	}

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


}



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

/* end primary navigation */	
	
}



@media only screen and (min-width: 900px) {
	
	
}


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

	
/* colour */

body {
	/*background: rgb(200, 204, 128);
	background: rgba(200, 204, 128,0.3);*/
}

a {

}
		


/*


*/		

/* fixes */
/* for iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

}
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (orientation: portrait), @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation: portrait) {

}
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}