/* 
 *  HTML5 Boilerplate 
 *  
 *  Resets styles, normalizes fonts and sets some base styles.
 *  
 *  Boilerplate inspired by Mark Boulton's site at markboultondesign.com, which he says was inspired by:
 *    yui.yahooapis.com/2.8.1/build/base/base.css
 *    camendesign.com/design/
 *    praegnanz.de/weblog/htmlcssjs-kickstart
 */

/* 
 *  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 *  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
 *  html5doctor.com/html-5-reset-stylesheet/
 */

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

article, aside, caption, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul li { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */


/* fonts.css from the YUI Library: developer.yahoo.com/yui/
 * Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages
 *
 * There are three custom edits:
 * -remove arial, helvetica from explicit font stack
 * -we normalize monospace styles ourselves
 * -table font-size is reset in the HTML5 reset above so there is no need to repeat
 */

select, input, textarea, button { font:99% sans-serif; }

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { 
font-family: monospace, sans-serif; 
font-size: 90%;
}
 

/* 
 * minimal base styles 
 */


/* always force a scrollbar in non-IE */ 
html { overflow-y: scroll; }

 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; } 

small { font-size: 85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align: top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
 
/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea { margin: 0; }

/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


/* Content below this point was written by the site's author. */

/********************************************* 
 * Title:		peltierdesign.net
 * Author:		A. Peltier
 * Copyright:	2012-2018, Peltier Design
 *********************************************/



/********************************************* 
 * 
 * Structure
 *
 *********************************************/

html {
	font-size: 10px;
}

body {
	overflow: hidden;
	/*background-color: #FDD478; (orange) */
}

/*header {
	background-color: #717171;
	height: 1rem;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

header:hover {
	background-color: black;
}*/

body>section {
	position: relative;
	height: 50.2rem;
	margin-top: 6.5rem;
	
	/*-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;	*/
}

/*.description {
	position: absolute;
	display: block;
	width: 100%;
	height: 14rem;
	bottom: 1rem;
	padding-top: 2rem;
	z-index: -1;
	opacity: 0;
	white-space: normal;
	
	border-bottom: 1rem solid #eaeaea;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;	
}*/

.desc {
	white-space: normal;
	/*vertical-align: ? check this property for raising base of descriptive paragraph */
	width: 28rem;
	/*padding-right: 5rem;*/
	padding-left: 6rem;
	/*padding-bottom: 20rem;*/
	text-align: right;
	/*background-color: #436e94;
	color: white;
	height: 50rem;*/
}

nav {
	position: fixed;
	overflow: hidden;
	/*margin-left: 20rem;*/
	width: 100%;
	height: 1.2rem; /* 20250301: Was previously 'height' set to 1rem, seemed a little squished. Changing it and reloading made it merge with Safari's titlebar anyway, so it was hard to tell how much difference it made. Experiment with changing it to 'padding-top' */
	top: 0;
	/*background-color: #ffe681; (old)*/
	background-color: #6D7E76; /* Previous dark green was #083712 */
	/*border-bottom: 1rem solid #EFEBE1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;	*/
	/*background-image: url('http://peltierdesign.net/images/bkgdCwhite.gif');*/
}

div#logo {
	display: block;
	background: url('http://peltierdesign.net/images/logoWhite.png') no-repeat;
	margin: 0.5rem 0 0 22rem;
	width: 12rem;
	height: 4rem;
}

footer {
	background-color: #6D7E76; 
	color: white;
	margin-top: 6rem;
	
	/*height: 20rem;*/
	/*background-image: url('http://peltierdesign.net/images/bkgdCwhite.gif');*/
}


/********************************************* 
 * 
 * Lists
 *
 *********************************************/


ul.row {
	position: relative;
	/*height: 100%;*/
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	white-space: nowrap;
	
	z-index: 0;
	
}

* html .row { display:inline; }  /* for IE 6 */
* + html .row { display:inline; }  /* for IE 7 */

ul.row li {
	display: inline-block;
	position: relative;
	margin-right: 2rem;
	
	/*-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;*/
}

ul.row li.hide {
	display: none;
}

ul.row li:last-child {
	margin-right: 0;
}

ul.row li>img { 
	height: 50rem;
	z-index: 1;
}

/*nav ul {
	margin: 4rem 0 0 4rem;
}

nav ul a {
	color: black;
	font-size: 1.3rem;
	line-height: 2rem;
	text-transform: uppercase;
	text-decoration: none;
}

nav ul a:hover {
	color: black;
} */



/********************************************* 
 * 
 * Typography
 *
 *********************************************/

body {
	color: #555555;
    font: lighter 100% Helvetica, sans-serif;
}

/*section>h1 {
	position: absolute;
	z-index: 1;
	display: block;
	top: 2rem;
	left: 38.5rem;
	white-space: nowrap;
	vertical-align: top;
	font-size: 6rem;
	color: black;
	opacity: 0.3;
	font-weight: 100;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}*/

.description>* {
	margin-left: 7rem;
}

/*.description h1 {
	font-size: 2rem;
	font-weight: 100;
	padding-bottom: 1rem;
}*/

.desc h1 {
	color: #383E3A;
	font-size: 2.4rem;
	font-weight: 100;
	padding-bottom: 1rem;
}

.desc p {
	color: #383E3A;
	font-size: 1.6rem;
	line-height: 2.6rem;
	padding-bottom: 2.6rem;
}

/*.description h2 {
	
}

.description p {
	font-size: 1.2rem;
	padding: 0 2rem 1rem 0;
} */

.row li span {
	/* copyright info */
	position: absolute;
	text-align: right;
	right: 1rem;
	top: 47.5rem;
	padding: 0.3rem;
	color: #d4d4d4;
	text-shadow: 1px 1px 1px black;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

.row li span:hover {
	color: white;
	border-radius: .3rem;
	background-color: rgba(0,0,0,0.5);
}

nav a {
	/*display: block;*/
	position: absolute;
	right: 10rem;
	top: 1.4rem;
	color: white;
	font-size: 1.3rem;
	/*line-height: 2rem;*/
	/*text-transform: uppercase;*/
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

/*body>section>h1 {
*	position: absolute;
*	/*left: -50%;*/
/*	top: 4rem;
*	left: 1rem;
*	width: 12rem;
*	color: white;
*	font-weight: 100;
*	font-size: 3rem;
*	/*-webkit-transform: rotate(-90deg);
*	-moz-transform: rotate(-90deg);
*	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
/* }*/


a.aboutToggle {
	display: inline-block;
	margin: 2rem 0 0 37rem;
	color: white;
	cursor: pointer;
	font-size: 1.8rem;
	text-align: right;
}

a.aboutToggle:hover {
	text-decoration: underline;
}

footer div {
	padding-left: 37rem;
	position: relative;
	overflow: hidden;
}

.about {
	color: white;
	width: 55rem;
	font-size: 1.6rem;
	line-height: 2.6rem;
	padding-bottom: 2.6rem;
	z-index: 1;
	height: 50rem;
	top: 2rem;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

.about.hide {
	/*display: none;*/
	height: 0;
	top: 0.5rem;
}

.about h1 {
	color: white;
	font-size: 1.4rem;
	font-weight: 100;
	margin-top: 1.6rem;
	margin-bottom: 1.6rem;
}

.about p {
	margin-top: 1.6rem;
}

.about a {
	color: white;
}

.copyright {
	padding-top: 6rem;
	padding-bottom: 4rem;
	background-color: #6D7E76;
	z-index: 2;
}

/********************************************* 
 * 
 * Images
 *
 *********************************************/

.about img {
	/*position: relative;*/
	float: right;
	padding: 2.2rem 0 2rem 3rem;
	/*left: 30rem;*/
}

/********************************************* 
 * 
 * Miscellaneous
 *
 *********************************************/

/*.row li.haha {
	background-color: red;
}

.singleProjectHasFocus header,
.singleProjectHasFocus ul.row>li,
.singleProjectHasFocus footer {
	opacity: 0.2;
}

.singleProjectHasFocus section>h1 {
	display: none;
}

.singleProjectHasFocus nav {
	margin-left: 1rem;
	width: 3rem;
	opacity: 1.0;
}

.singleProjectHasFocus div#logo {
	margin-left: 0.8rem;
	width: 2rem;
	height: 4rem;
}

.singleProjectHasFocus nav:hover div#logo {
	margin-left: 3.5rem;
}

.singleProjectHasFocus nav ul {
	margin-left: -10rem;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

.singleProjectHasFocus nav:hover {
	width: 9rem;
}

.singleProjectHasFocus nav:hover ul {
	margin-left: 1rem;
}

.rowWithFocus {
	height: 67rem;
}

.singleProjectHasFocus ul.row>li.projectWithFocus {
	opacity: 1.0;
}

.projectWithFocus .description {
	bottom: -16rem;
	opacity: 1.0;
}

.projectWithFocus .description a {
	z-index: 1;
}

.first.row h1, .first.row .desc p, .first.row .description a, .first .row .description a:visited {
	color: #429442;
}

.first.row .description {
	border-bottom-color: #429442;
}

.second.row h1, .second.row .description a, .second .row .description a:visited {
	color: #436e94;
}

.second.row .description {
	border-bottom-color: #436e94;
}

.third.row h1, .third.row .description a, .third .row .description a:visited {
	color: #5e4394;
}

.third.row .description {
	border-bottom-color: #5e4394;
}

.fourth.row h1, .fourth.row .description a, .fourth .row .description a:visited {
	color: #944343;
}

.fourth.row .description {
	border-bottom-color: #944343;
} */