/*
Author= Mark Stammers
Updated= 2022.04.23
*/

/*
=Global
============================================= */
html.wf-loading * {
	opacity: 0; /* prevent font flicking */
}
body {
	background-color: rgb(240,240,240);
	color: rgb(105,105,105);
	font: 300 11px/17px 'Roboto', sans-serif;
	letter-spacing: 0.5px;
}
/*
=Reset
============================================= */
body,
nav,
div,
h1,
h2,
h3,
ul,
li,
p,
blockquote,
span,
img,
a { 
	border: none; 
	margin: 0;
	padding: 0;
}
h1,
h2,
h3 {
	font: inherit;
}
h1,
h2 {
	color: rgb(255,45,0);
	margin-top: 21px;
}
li {
	list-style: none;
}
p {
	margin-bottom: 9px;
}
img {
	background-color: black;
}
/*
=Link States
============================================= */
a {
	text-decoration: none !important;
	outline: none !important;
	transition: 0.2s ease-in-out;
}
a:link,
a:visited {
	color: inherit;
}
a:hover,
a:active {
	color: rgb(255,45,0);
}
/*
=Home Page Welcome Text
============================================= */
h2.welcome {
	position: fixed;
	left: 231px;
}
.welcometxt {
	font-size: 26px;
	line-height: 1.475;
	position: absolute;
	top: 128px; left: 231px;
	max-width: 999px;
	border-top: 1px dotted rgb(175,175,175);
	margin-right: 40px;
	padding-top: 11px;
}
.welcometxt span {
	color: rgb(255,45,0);
	font-size: 11px;
}
/*
=Page Heading + Main Navigation
============================================= */
.header {
	background-color: rgba(240,240,240,0.75);
	position: fixed;
	top: 0;
	left: 40px;
	bottom: 0;
	width: 151px;
}
.mainnav {
	margin-top: 90px;
}
.mainnav li:first-child {
	border-top: 1px dotted rgb(175,175,175);
}
.mainnav a {
	display: block;
	border-bottom: 1px dotted rgb(175,175,175);
	padding: 3px 0 2px;
}
.mainnav a.red {
	color: rgb(255,45,0);
}
/*
=Sub Navigation
============================================= */
.subnav {
	position: fixed;
	top: 95px;
	left: 654px;
	display: flex;
	z-index: 2;
}
.subnav a {
	color: rgb(215,215,215);
}
.subnav a {
	display: flex;
	align-items: center;
}
.subnav a:hover {
	color: rgb(255,45,0);
}
.subnav a.tothumbs {
	font-size: 10px;
	padding: 6px 30px 6px 6px;
}
.subnav a.toimgs {
	font-size: 5px;
	padding: 6px;
}
.subnav a.currentpge i {
	color: rgb(255,45,0);
}
/*
=Project Description
============================================= */
.projdes {
	background-color: rgba(240,240,240,0.75);
	position: fixed;
	top: 0;
	left: 231px;
	width: 430px;
	padding-right: 5px;
}
.projdes h2 {
	margin-bottom: 9px;
}
/*
=Slide Toggle
============================================= */
.togglewrap {
	max-height: 0;
	overflow: hidden;
}
.togglewrap li {
	margin-top: 9px;
}
.togglewrap,
.togglewrap .red {
	color: transparent; /* text starts without color */
	transition: all 1s ease-in-out;
}
.togglelink:hover .togglewrap {
	color: rgb(105,105,105); /* #696969 ...and transitions to default gray */
	max-height: 500px;
}
.togglelink:hover .red {
	color: rgb(255,45,0); /* #ff2d00 ...and transitions to red */
}
.togglelink {
	cursor: default;
}
/*
=Gallery of Student Work
============================================= */
.gallery {
	position: absolute;
	top: 128px;
	left: 231px;
	padding-bottom: 80px;
	z-index: -1;
}
.gallery > a {
	display: flow-root;
	margin-top: 12px;
	margin-bottom: 12px;
}
.imgwrap {
	margin-right: 40px;
}
.imgwrap img {
	margin-bottom: 9px;
}
.imgwrap,
.thumb {
	float: left;
}
.thumb {
	margin-right: 11px;
}
.thumbrule {
	border-bottom: 1px dotted rgb(165,165,165);
}
.typehistory img,
.typevariations img,
.modularstructures img,
.color img,
.typeasimage img {
	cursor: pointer;
}
/*
=Gallery of Student Work > Image Fade-in 
============================================= */
.gallery img {
	-webkit-animation: fadein 1s;
					animation: fadein 1s;
}
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/*
=Color Gallery
============================================= */
.color .imgwrap > li:nth-child(1) a {
	display: flex;
}
.color .imgwrap img:nth-child(-n+2) {
	margin-right: 40px; /* apply a right margin to images 1 + 2 only */
}
.color .imgwrap img {
	margin-bottom: 14.5px;
}
/*
=Fusion Foreword + Introduction
============================================= */
.txtwrap {
	background-color: rgba(249,249,249,0.8);
	width: 430px;
	height: 100%;
	padding-bottom: 0; /* override padding on the gallery container */
}
.txtwrap h3 {
	margin: 3px 0 9px;
}
.txtwrap p {
	margin-bottom: 12px;
}
/*
=Student Index Page
============================================= */
.index {
	background-color: rgba(249,249,249,0.75);
	padding-bottom: 8px;
}
.index h2 {
	background-color: rgba(253,253,253,0.75);
	font: inherit;
	color: rgb(255, 45, 0);
	border-bottom: 1px dotted rgb(255, 45, 0);
	width: 429px;
	margin-top: 0;
}
.index h2,
.col1,
.col2 a {
	padding: 2px 0 3px;
}
.index h2:first-child {
	padding-top: 3px;
}
.index div {
	overflow: auto; /* clearfix on child floats */
	width: 429px;
}
.col1,
.col2 {
	float: left;
}
.col1 {
	width: 172px;
}
.col2 {
	width: 257px;
}
.col2 a {
	display: block;
}
.index div,
.col2 a {
	border-bottom: 1px dotted rgb(165,165,165);
}
.col2 a:last-child,
.col2 a:only-child {
	border-bottom: none;
}
/*
=Drop Shadow on Images
============================================= */
.slideshow img,
.gallery img {
	box-shadow: 1px 1px 2px 0 rgb(218,218,218); /* h-offset v-offset blur spread color */
}
/*
=General Classes
============================================= */
.clear {
	clear: both;
}
.gray {
	color: rgb(105,105,105)
}
.red {
	color: rgb(255, 45, 0);
}
.spcright10 {
	margin-right: 10px; /* publications thumbnails */
}
.pr-0 {
	padding-right: 0;
}

.w430  { width: 430px; }
.w608  { width: 608px; }

.w723  { width: 723px; }  /* thumbnail rule - fusion */
.w764  { width: 764px; }  /* thumbnail wrap - fusion */

.w905  { width: 905px; }  /* gallery wrap - letter & image */
.w944  { width: 944px; }  /* thumbnail wrap - letter & image */

.w1313 { width: 1313px; } /* thumbnail rule - color */
.w1353 { width: 1353px; } /* thumbnail wrap - color */

.w1459 { width: 1459px; } /* thumbnail rule - standard */
.w1499 { width: 1499px; } /* thumbnail wrap - standard */

.w1530 { width: 1530px; } /* gallery wrap - fusion */
.w1888 { width: 1888px; } /* gallery wrap - letter & image */

.w2189 { width: 2189px; } /* thumbnail rule - what can you find? */
.w2230 { width: 2230px; } /* gallery wrap - what can you find? */

.w2350 { width: 2350px; } /* gallery wrap - fusion */
.w2528 { width: 2528px; } /* gallery wrap - fusion */
.w2706 { width: 2706px; } /* gallery wrap - fusion */
.w2856 { width: 2856px; } /* gallery wrap - letter & image */
.w2884 { width: 2884px; } /* gallery wrap - fusion */

.w2998 { width: 2998px; } /* gallery wrap - standard */

.w3240 { width: 3240px; } /* gallery wrap - fusion */

.w4230 { width: 4230px; } /* gallery wrap - color */
.w4700 { width: 4700px; } /* gallery wrap - standard */
.w4878 { width: 4878px; } /* gallery wrap - type history, type & image */

.w5056 { width: 5056px; } /* gallery wrap - type history, type & image */
.w5170 { width: 5170px; } /* gallery wrap - type & image */
.w5590 { width: 5590px; } /* gallery wrap - translation */
.w5946 { width: 5946px; } /* gallery wrap - translation */

.w6110 { width: 6110px; } /* gallery wrap - type & image */

.w9000 { width: 9000px; } /* gallery wrap - publications, what can you find? */
/*
=The End -- For Now :)
============================================= */