body{
	background:#FFF;
	padding:0px;
	margin:0px;
	font-family: 'Jacques Francois', serif;
}

#top {
	position: relative;
	overflow: hidden;
	height:200px;
	width:100%;
	background: #b01f09;
}

.logo {
	max-width: 500px;
	max-height: 200px;
	
	height:auto;
	z-index: 2;
	position: absolute;
	left:-250px;
	margin-left:50%;
	border:0px;
}

.stretch {
	width:100%;
	position: absolute;
	top:0px;
	z-index: 1;
	height:200px;
}
.stretch.left {
	left:-50%;
	background: url(/images/left.png) top left repeat-x;
}
.stretch.right {
	right:-50%;
	background: url(/images/right.png) top left repeat-x;
}
.blank {
	width:200px;
	height:300px;
	background: #F1F1F1;
}
nav {
	display: table;
	width: 300px;
	padding: 40px 20px 20px;
	margin:0px auto;
}
nav ul {
	list-style: none;
	margin:0px;
	padding: 0px;
	display: table-row;
}
nav li {
	display: table-cell;
	text-align: center;
	padding:0px 5px;
}
nav a {
	color:#000;
	text-decoration: none;
	padding:10px 20px;
	border-radius: 3px;
	line-height: 10px;
	display: block;
	font-size: .9em;
}
nav a:hover, nav a.selected {
	color:#999;
}
nav a:active {
	background:#F1F1F1;
}

article {
	padding:20px;
	text-align: center;
	max-width: 800px;
	margin:0px auto;
	text-align: center;
}
article.stretchimg img {
	width:100%;
	height:auto;
}

.home article {
	max-width: inherit;
}
article hr {
	border:0px;
	border-top:1px dotted #999;
	margin:20px 0px;
}
article h1, article h2, article h3 {
	font-weight: normal;
}
article h2 ~ h1 {
	margin-bottom:0px;
}
article h1 ~ h2 {
	margin-top:0px;
}
article p ~ h2 {
	margin-bottom:5px;
}
article h2 ~ p {
	margin-top:5px;
}

#work {
	list-style-type: none;
	position: relative; /** Needed to ensure items are laid out relative to this container **/
	margin: 0;
	padding:0px;
}

#work li {
	width:250px;
	display: none; /** Hide items initially to avoid a flicker effect **/
	text-align: center;
	color:#000;
	font-size: .75em;
}
#work a {
	text-decoration: none;
	
	color:#000;
}

#work li a:hover img {
	box-shadow:0px 0px 3px #666;
}
#work li p a:hover {
	text-decoration: underline;
}

.piece img {
	width:100%;
	max-width: 800px;
	height:auto;
	margin:40px 0px;
}


#tiles li img {
	display: block;
}



/**
* Some extra styles to randomize heights of grid items.
*/
#tiles ali:nth-child(3n) {
height: 175px;
}

#tiles ali:nth-child(4n-3) {
padding-bottom: 30px;
}

#tiles ali:nth-child(5n) {
height: 250px;
}


footer {
	text-align: center;
	margin-bottom:20px;
	font-size: .9em;
}
footer a{
	font-size:.75em;
	color:#333;
}

@media all and (max-width: 500px) {
  .logo {
  	position: relative;
  	margin:0px;
  	left:0px;
  	width:100%;
  }
  .stretch {
  	display:none;
  }
  #top {
  	overflow: auto;
  	height:auto;
  }
  nav {
  	width:auto;
  	padding: 20px 20px 0px;
  }
  nav, nav ul, nav li {
  	display: block;
  }
}