.module {
	margin: 1em;
}

.about img {
	float: right;
	margin: 0 0 1em 1em;
	max-width: 40%;
}

.photography {
	overflow: hidden;
	position: relative;
	height: 150px;
}
.photography h2 {
	position: absolute;
	left: -1000000px;
}
.photography ul {
	margin-right: 9em;
}
.photography li {
	float: left;
	display: block;
	height: 150px;
	width: 150px;
	overflow: hidden;
	margin-right: 6px;
	background: black;
}
.photography li a {
	display: block;
	height: 240px;
	width: 240px;
	line-height: 240px;
	margin-left: -45px;
	margin-top: -45px;
	text-align: center;
	
	*height: auto;
	*width: auto;
	*line-height: normal;
	*margin-left: 0;
	*margin-top: 0;
}
.photography li a:focus img {
	
}
.photography li img {
	vertical-align: middle;
	/*
	min-height: 159px;
	min-width: 159px;
	*/
}
.photography .more {
	position: absolute;
	right: 0;
	top: 0;
}
.photography .more a {
	height: 150px;
	width: 8em;
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}

.ephemera time {
	display: inline-block;
	width: 3.6em;
	color: #666;
}
.blog time {
	display: block;
	width: auto;
	margin-bottom: 0.5em;
}
.blog article {
	margin-bottom: 2em;
}
.blog .more {
	font-style: italic;
}

/* uses oocss media object technique */
.chronology li {
	margin: 0 0 1em;
}
.chronology .meta {
	float: left;
}
.chronology .type {
	margin-right: 0.6em;
	background: #888;
	border-radius: 3px;
	vertical-align: middle;
}
.chronology, .chronology .body {
	overflow: hidden;
	_overflow: visible;
	zoom: 1;
	display: block;
}
.chronology .body {
  text-overflow: ellipsis;
}
.chronology time {
	margin-right: 1em;
}

/* responsive grid breaking */

@media screen and (max-width: 40em) {
	.unit,
	.rev .unit {
		float: none;
		width: auto;
	}
	
	.photography.module {
		height: auto;
	}
	.photography ul {
		margin-right: 0;
	}
	.photography li {
		margin-bottom: 4px;
	}
	.photography .more {
		position: static;
		clear: both;
	}
	.photography .more a {
		height: auto;
		width: auto;
		display: inline;
		vertical-align: baseline;
		text-align: left;
	}
}
@media screen and (max-width: 30em) {
	.chronology .body {
		padding-bottom: 0.4em;
		overflow: hidden;
		clear: both;
	}
}
