html, body { margin: 0; }
body {
	background-color: #33383f;/* #3F474C */
	font-family: Georgia, Times, 'Times New Roman', serif;
}
.center {
	margin: 0 auto 0 auto;
	text-align: center;
}
.right { text-align: right; }
.clear {
	clear: both;
}
.invisible {
	visibility: hidden;
}
.hide {
	display: none;
}
#strip {
	background-color: rgba(0,0,0,0.7);
	/* Horizontal scrollbar */
	width: max-content;
	width: -moz-max-content;
	/* Safari horizontal scrollbar */
	width: intrinsic;
	white-space: nowrap;
	/* Safari 10.1.2 */
	width: -webkit-max-content;
	/* Ensure the strip is full width with short content */
	min-width: 100%;
	height: 35px;
	position: absolute;
	/*left: 100px;*/
	top: 55%;
	margin-top: -35px;
	z-index: 4;
	/*overflow: auto;*/
	/*border-top: 1px solid #550412; red
	border-bottom: 1px solid #550412;*/
	/*border-top: 1px solid #4D2600; dark orange
	border-bottom: 1px solid #4D2600;*/
	border-top: 1px solid #CC6600;
	border-bottom: 1px solid #CC6600;
}
#heading { /* on Hover: make a navigation appear to see About, etc. sections */
	width: 180px;
	height: 35px;
	position: fixed;
	left: -5px;
	margin-top: -5px;
	z-index: 5;
	background: url('../images/logo-background.png') no-repeat 5px 5px;
}
#heading a { width: 180px; height: 35px; display: block; text-indent: -99999px; }
#strip-large #heading {
	position: absolute;
	bottom: 5px;
}
/* Large strip for static pages that need more room */
#strip-large {
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 131px;
	position: absolute;
	top: 55%;
	margin-top: -160px;
	z-index: 4;
	border-top: 1px solid #CC6600;
	border-bottom: 1px solid #CC6600;
}
#inner-strip {
	margin-left: 185px;
}
.strip-left {
	width: 170px;
	padding: 5px;
	float: left;
}
.strip-content {
	margin-left: 190px;
}
/* --- Noscript --- */
noscript div {
	position: absolute;
	height: 20px;
	padding: 5px;
	background-color: #D1404A;
	border: 1px solid #C30F1B; border-left: none;
	top: 100px;
	text-shadow: 0 1px 0 #757575;
	text-indent: 25px;
}
#portfolio {
	padding-top: 8px;
	/* Align navigation to the bottom edge */
	height: 19px;
	margin-bottom: 10px;
	font: italic 16px Georgia, Times, 'Times New Roman', serif;
	color: white;
	/*text-shadow: 1px 1px 5px #555;*/
}
#portfolio ul {
	margin: 0;
	margin-left: 180px;
	padding: 0;
	position: relative;
	top: 1px;/* 8px */
	list-style-type: none;
}
#portfolio ul li {
	float: left;
	padding: 0 10px;
	position: relative;
	color: #454545;
}
/* #portfolio ul li:after { content: ','; } */
#portfolio a {
	color: #ccc;
	text-shadow: 1px 1px 3px #555;
	text-decoration: none;
	-webkit-transition: all 0.8s linear;
	-moz-transition: all 0.8s, linear;
	-o-transition: all 0.8s linear;
	transition: all 0.8s linear;
	cursor: pointer;
}
#portfolio a:hover {
	color: #fff;
	text-shadow: 1px 1px 5px #999;
}
#overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 15;
}
#portfolio-detail {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: transparent;
	background-color: rgba(0,0,0,0.7);
}
#portfolio-detail img {
	border: 6px solid #212121;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#portfolio-detail .detail { display: none; position: absolute; z-index: 1000; }
#portfolio-detail .detail .title,
	#portfolio-detail .detail .date,
	#portfolio-detail .detail .website,
	#portfolio-detail .detail .description {
		color: #d5d5d5;
		background-color: #000;
		background-color: rgba(0,0,0,0.6);
		margin: 5px 0;
}
#portfolio-detail .detail .text-section {
	position: absolute;
	/*top: 0;*/
}
#portfolio-detail .detail .title { padding: 8px 10px; width: 300px; }
#portfolio-detail .detail .date, #portfolio-detail .detail .website {
	font: 10px 'Lucida Grande', 'Lucida Sans', sans-serif;
	padding: 3px 10px;
	width: 300px;
}
#portfolio-detail .detail .date {
	color: #b5b5b5;
	text-align: center;
}
#portfolio-detail .detail .website { text-align: center; padding: 2px 10px 4px; }
#portfolio-detail .detail .description {
	font: 11px/135% 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, sans-serif;
	padding: 0 9px;
	border: 1px solid transparent;
	width: 300px;
	position: relative;
}
#portfolio-detail .detail .description p { margin: 10px 0; }
#portfolio-detail .detail .pagination {
	margin: 8px 0 15px;
	text-align: center;
}
#portfolio-detail .detail .pagination ul {
	margin: 0;
	padding: 3px 5px 5px;
	list-style-type: none;
	display: inline;
	background-color: #222;
	background-color: rgba(0,0,0,0.6);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
#portfolio-detail .detail .pagination ul li {
	display: inline;
	padding: 0 3px;
}
#portfolio-detail .detail .pagination a {
	color: #ddd;
	text-decoration: underline;
	cursor: pointer;
}
/* --- Retinal Burn --- */
#retinal-burn {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
}
#retinal-burn div {
	/*border: 4px solid black;*/
	position: absolute;
}
/* --- Links --- */
#navigation {
	position: fixed;
}
#navigation div {
	width: 1px;
	background-color: #43494f;
	position: absolute;
	overflow: visible;
}
#strip-large #navigation div { top: 1px; }
#navigation .about {
	height: 257px;
	left: 99px;
}
#navigation .contact {
	height: 174px;
	left: 148px;
}
#navigation .home {
	height: 81px;
	left: 67px;
}
#navigation div a {
	display: block; text-indent: -99999px; /* text-indent doesn't work on non-block elements */
	position: relative;
	/*padding-right: 5px;*/
	left: -15px;
}
#navigation .about a {
	background: url('../images/links.png') no-repeat;
	width: 11px; height: 49px;
	top: 208px;
}
#navigation .contact a {
	background: url('../images/links.png') no-repeat 0 -49px;
	width: 11px; height: 71px;
	top: 103px;
}
#navigation .home a {
	background: url('../images/links.png') no-repeat 0 -120px;
	width: 11px; height: 44px;
	top: 37px;
}
#navigation .about a:hover { background-position: -11px 0; }
#navigation .contact a:hover { background-position: -11px -49px; }
#navigation .home a:hover { background-position: -11px -120px; }
form.email { position: relative; }
form.email p { margin: 5px 0; }
form.email input[type="text"], form.email textarea {
	margin: 1px;
	padding: 4px;
}
form.email input[type="text"] {
	width: 288px; /* 48% */
	font-size: 13px;
	border: none;
}
form.email textarea {
	width: 590px;
	height: 80px;
	border: none;
	font-size: 13px;
}
.field-subject { display: none; }
form.email div.submit {
	position: absolute;
	bottom: 0;
	left: 608px;
}
form.email input[type="submit"] {
	background-color: #82061C;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.41, rgb(130,6,29)),
		color-stop(0.71, rgb(156,5,33))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(130,6,29) 41%,
		rgb(156,5,33) 71%
	);
	border: 1px solid #A80823;
	color: #b5b5b5;
	font-size: 12px;
	text-shadow: 0 -1px 0 #555;
	cursor: pointer;
	padding: 3px 15px 4px;
	border-radius: 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 10px;
	width: 100px;
}
form.email input[type="submit"]:hover {
	background-color: #8D071E;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.41, rgb(135,7,33)),
		color-stop(0.71, rgb(166,5,35))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(135,7,33) 41%,
		rgb(166,5,35) 71%
	);
	color: #BDBDBD;
}
form.email input[type="submit"]:active {
	background-color: #5D0414;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.15, rgb(133,15,42)),
		color-stop(0.71, rgb(168,7,42))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(133,15,42) 15%,
		rgb(168,7,42) 71%
	);
	border-color: #990720;
	color: #AAAAAA;
}
.contact-errors {
	position: relative;
	z-index: 10;
	margin-top: -142px;
	font-style: italic;
	font-size: 12px;
	line-height: 125%;
	color: #b5b5b5;
	text-shadow: 0 -1px 0 #8D4C58;
}
.contact-errors ul { list-style-type: circle; padding-left: 16px; }
/*.contact-errors ul li:before { content: '– '; }*/
.contact-errors ul li { margin: 2px 0; }
.error {
/*	background-color: #000;*/
	border-bottom: 1px solid #000;
}
.error p {
	margin: -6px 190px 5px;
}
#portfolio.success-message { color: #399276; text-shadow: 0 1px 1px #293733; }
.error {
	position: absolute;
	bottom: -32px;
	width: 100%;
	color: #C5363C;
	text-shadow: 0 1px 1px #521D19;
	border-color: #A52D32;
}
.about {
	color: #e1e1e1;
	font-family: 'Hoefler Text', Garamond, Georgia, serif;
	line-height: 1.3em;
	height: 100%;
	overflow: auto;
}
a { color: #CC6600; }
a:hover { color: #E07000; }
a:active { color: #BD5F00; }
#le_modulateur_epistolaire { top: 12%; left: 15px; }
#le_modulateur_epistolaire .text-section {
	top: -41px;
	right: -283px;
}
#portfolio-detail #le_modulateur_epistolaire .title { width: 250px; }
#portfolio-detail #le_modulateur_epistolaire .date { width: 250px; }
#portfolio-detail #le_modulateur_epistolaire .website { width: 250px; }
#portfolio-detail #le_modulateur_epistolaire .description { width: 250px; }
#video_tuneup { top: 10px; right: 53px; }
#video_tuneup .text-section {
	top: 250px;
	left: -330px;
	width: 300px;
}
#parallelcities_app { bottom: 12%; right: 22%; }
#parallelcities_app .text-section {
	top: 225px;
	left: -330px;
	width: 300px;
}
#ian_wulfson_architecture { top: 145px; left: 63px; }
#ian_wulfson_architecture img { width: 510px; }
#ian_wulfson_architecture .text-section {
	top: 145px;
	right: -310px;
	width: 300px;
}
#state_im_in { top: 235px; right: 20px; }
#state_im_in img { width: 510px; }
#state_im_in .text-section {
	top: 65px;
	left: -330px;
	width: 300px;
}
#schloss_tirol { top: 103px; left: 25%; }
#schloss_tirol img { width: 340px; }
#schloss_tirol .text-section {
	top: 10px;
	right: -310px;
	width: 300px;
}
#the_fog { bottom: 46px; right: 57px; }
#the_fog img { width: 500px; }
#the_fog .text-section {
	top: 48px;
	left: -330px;
	width: 300px;
}
#philharmonia_baroque_orchestra { bottom: 30px; left: 50px; }
#philharmonia_baroque_orchestra img { width: 500px; }
#philharmonia_baroque_orchestra .text-section {
	top: -50px;
	right: -340px;
	width: 320px;
}