@CHARSET "UTF-8";
/*
 * File:		ml4.css
 * Author:		Peter Torpey (www.petertorpey.com)
 * Version:		4.0	12-17-08
 *              Original code Copyright 2008 Peter Torpey.
 *              This code may not be used, distributed, and modified without
 * 				the express written consent of the original author. This
 * 				notice and the name and URL of the original author, above,
 * 				must remain intact.
 *
 * Description:
 * 	Stylesheet for Media Lab personal website.
 *
 */

body {line-height: 1.5em; position: absolute; width: 100%; height: 100%; background: #FFF; font-family: helvetica, arial, sans-serif; color: #334;}

a {text-decoration: none; color: #449;}
a:hover {color: #636; text-decoration: underline;}

h1 {font-size: 2em; font-weight: bold; text-transform: uppercase;}
h2 {font-size: 1.5em; text-transform: uppercase; letter-spacing: 0.1em; position: absolute; top: -2em; left: 0; padding-left: 0.5em; line-height: 2em; color: #FFF;}
h2 a {color: #FFF; display: block; width: 10em; height: 2em;}
h2 a:hover {color: #FFF; text-decoration: none;}
h3 {font-weight: bold; text-transform: uppercase; color: #556; margin: 1.5em 1em 0 1em;}

#wrap {height: 30em; position: absolute; top: 50%; margin-top: -20em; width: 100%;}

#banner {position: relative; width: 32em; padding: 1.1em 0 0.9em 0; text-align: right; text-transform: uppercase; line-height: 2em; border-top: 80em solid #334; margin-top: -80em; margin-bottom: -3em;}
#banner a {color: #334; font-size: 2em; font-weight: bold; display: block; height: 2em; letter-spacing: 0.03em; margin-right: -0.04em;}
#banner a:hover {text-decoration: none;}
#banner p {position: absolute; right: 0.1em; top: 3.1em; color: #223;}

.section {width: 16em; position: relative; float: left; height: 25em; margin-top: 3em; margin-right: 1em; background: #EEE; border-style: none; border-top: 3em #334 solid; border-bottom: 1px #333 solid;}
.section p {margin: 1.5em 1em;}
.section h3 + p {margin-top: 0em;}
.section ul, .section ol {margin: 1.5em 1em 1.5em 2em; list-style-type: square;}
.section.medium {width: 32em;}
.section.long {width: 48em;}
.section.long4 {width: 64em;}
.section.long5 {width: 80em;}
.section.long6 {width: 96em;}
.section.long7 {width: 112em;}
.section.long iframe {width: 48em; height: 25em;}
.section li {margin-bottom: 1em;}

.section .tilenav {list-style: none; overflow: hidden; width: 100%; margin: 0;}
.tilenav li {float: left; padding: 1px 1px 0 0; background: #EEE; margin-bottom: 0;}
.tilenav li a {display: block; width: 14.421875em; color: #FFF; text-decoration: none; padding: 6.45em 0.75em 0.3em 0.75em; text-align: right; background: #666 no-repeat; opacity: 0.9;}
.gallery .tilenav li a {padding: 0 !important;}
.gallery .tilenav a {margin-right: 19px;}
.tilenav li.wrapped a {padding-top: 4.95em;}
.tilenav li a:hover {background-color: #434; color: #FFF; text-decoration: none; opacity: 1;}

#firstsection {width: 32em;}
#firstsection p {margin-left: 6em;}
#firstsection a[rel~=external] {background: none; padding: 0;}
#firstsection h1 {margin: 0.75em 0.5em 0.75em 3em; text-align: right; line-height: 1.25em;}
#firstsection.dark h1 {color: #EEE;}

#breadcrumbs {list-style: none; position: absolute; bottom: -6em; left: 0; text-align: right; width: 32em; margin: 0;}
#breadcrumbs li {display: inline;}
#breadcrumbs li:before {content: ' ▶ ';}
#breadcrumbs li:first-child:before {content: '';}
#breadcrumbs a {color: #335;}

p.photocredit {position: absolute; bottom: 0; right: 0; color: #556; padding: 0 0.5em; margin: 0;}

.vcard .additional-name, .vcard .adr .type {display: none;}
.vcard .section div {margin: 0 1em;}
.vcard .section div div {margin: 0;}
.vcard .fn, .vcard .adr, .vcard .tel {margin-top: 1.5em !important;}

#imagePane {padding: 6em; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.9) !important;}
#imagePane.shown {display: block;}
#imagePane img, #imagePane span {padding: 1.5em; border: #334 1px solid; position: absolute; margin: auto;}
#imagePane img {top: 50%; left: 50%;}

[title] {position: relative; overflow: visible;}
[title]:hover:after {display: block; background: rgba(221, 221, 221, 0.8); border: 1px solid #88A; color: #334; position: absolute; z-index: 120; content: attr(title); padding: 0.2em; bottom: 1.5em; min-width: 8em; max-width: 20em; text-align: center; left: -100%;}
.tilenav a[title]:hover:after {display: none;}