html, body { width: 100%; height: 100%; font-family: Helvetica, Arial, sans-serif; font-size:100%; overflow: hidden; background: #58595b; color: white; }

#wrapper {
	width: 100%;
	height: 100%;
	font-size: 12px;
	line-height: 1.4em;
	overflow: hidden;
	position: relative;
}

div.test-strip {
	position: absolute;
	width: 21%;
	height: 100%;
}

#menu ul { margin: 24px 16px; }
#menu ul li ul { margin: 0 0 0 12px; }

#menu {	background: #58595b; left: 0%; }

#about { background: #6d6e71; left: 20%; }
#work { background: #808285; left: 40%; }
#cv { background: #939598; left: 60%;  }
#blog {	background: #a7a9ac; left: 80%; }


#menu a, #menu a:visited, #menu a:active { text-decoration: none; color: white;  }
a, a:visited, a:active { text-decoration: none; color: #8ed8f8}

#menu a:hover, a:hover { text-decoration: underline; }
a:focus { outline: none; }

#menu a.active, #menu a.expanded { text-decoration: underline; }


div.photo-matte { background: red; display: inline-block; text-align: center; }


div.test-strip div.inner { width: 100%; height: 100%; overflow: hidden; }
div.test-strip div.inner div.frame { width: 500px; height: 100%; padding: 24px 16px; }
#links { width: 100%; } /* Exception to width for multi-columnar links */

div#work div.inner { overflow: hidden; position: relative; }


div#menu-arrow { float: right; width: 100%; height: 100%; background-image: url(../graphics/menu-arrow-left.png); background-repeat: no-repeat; background-position: center right; background-color: transparent; cursor: pointer; display: none;  }
div.squished { background-image: url(../graphics/menu-arrow-right.png) !important; }

div#work div.inner div#left-arrow { top: 0; left: 20%; position: fixed; width: 50px; height: 50px; background-repeat: no-repeat; background-position: left; background-image: url(../graphics/arrow-left.png); cursor: pointer; }
div#work div.inner div#right-arrow { top: 0; right: 0; position: fixed; width: 50px; height: 50px; background-repeat: no-repeat; background-position: right; background-image: url(../graphics/arrow-right.png); cursor: pointer; }


div#work div.inner div.photoset { height: 100%; width: 30000px; }
div#work div.inner div.photoset div.frame { position: relative; float: left; text-align: center; padding: 0; }
div#work div.inner div.photoset div.frame div.meta { position: absolute; width: 150px; left: 0; top: 70%; text-align: left; }
div#work div.inner div.photoset div.frame div.meta h2 { text-decoration: underline; font-size: 12px; font-weight: normal; margin: 0; }

/* Center videos */
div#work div.inner div.photoset div.frame div.center { margin-left: auto; margin-right: auto; }


h1 { text-decoration: underline; margin-bottom: 1.3em; }
h2 { text-decoration: underline; margin-bottom: 1.3em; }
h3 { text-decoration: underline; }

p { margin-bottom: 1.3em; }

span.aside { font-style: italic; font-size: 10px; }


#links-frame, #morelinks-frame { width: 95%; }
#links-frame a, #morelinks-frame a { display: block; }
div.column  { width: 220px; float: left; margin-right: 16px;}


/* CV */
#cv .inner { }
#cv h3 { margin-left: 108px; padding-top: 1.3em; clear: both; }
#cv .frame { width: 600px; height: auto; }
span.date { width: 80px; float: left;}
span.separator { width: 28px; text-align: center; float: left; }
span.big-separator { padding-left: 80px; width: 28px; text-align: center; float: left;}
span.item { width: 492px; float: right; }
#cv .inner .frame div { clear: both; }

#cv-appointments { padding-bottom: 100%; }


#teaser { margin: 24px 24px 0 16px; }
#teaser h3 { font-style: italic; color: #8ed8f8; }


div.padding { height: 100%; }


/* IMAGE LOADING */
div.load-background { border: 1px solid #464648;  }

div.description { text-align: left; }