/* global */
body {
	background: #fff;
	color: #444;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}
.container {
	background: #fff;
	margin: 0 auto;
	overflow: hidden;
	width: 960px;
}
.contentwrap {
  border-top: 1px solid #eee;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 30px;
  width: 960px;
}
.alignleft {
	float: left;
	margin: 0 30px 30px 0;
}

/*types*/
a {
	color: #000;
}
a:hover {
  text-decoration: none;
}
#about a:hover { background-color: #64f0ea; }
#work a:hover { background-color: #e55e55; }
#photos a:hover { background-color: #f7ce44; }
#blog a:hover { background-color: #6ae6bc; }


/* header */
#header { 
	margin: 0 auto 90px;
  min-width: 960px;
	overflow: hidden;
	padding-top: 90px;
	width: 100%;
}

#headwrap {
  margin: 25px auto;
  height: 40px;
  overflow: hidden;
  position: relative;
  width: 960px;
}
#header h1 {
	bottom: 0;
	height: 16px;
	left: 0;
	margin: 0;
	position: absolute;
	width: 191px;
}
#header h1 a {
	background: url(/img/jbw.png) no-repeat;
	color: #000;
	display: block;
	height: 16px;
	overflow: hidden;
	position: absolute;
	text-indent: -999em;
	width: 191px;
}
#header h2 {
	overflow: hidden;
	position: absolute;
	text-indent: -999em;
}

#mainnav {
  background: #fff;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  position: absolute;
  list-style: none;
  margin: 0;
  overflow: hidden;
  right: 0;
  width: 510px;
}
#mainnav li {
  float: left;
  padding: 0;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  width: 120px;
}
#mainnav li.last {
  margin-right: 0;
}
#mainnav li a {
  background: url(/img/main-nav-bg.png) no-repeat;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  text-align: center;
  text-indent: -999em;
  width: 120px;
}
#mainnav li a.about { background-position: 0 0; color: #000; }
#mainnav li a.work { background-position: -130px 0; color: #000; }
#mainnav li a.photos { background-position: -260px  0; color: #000; }
#mainnav li a.blog { background-position: -390px 0; color: #000; }

#mainnav li a.about:hover { background-position: 0 -40px; color: #64f0ea; }
#mainnav li a.work:hover { background-position: -130px -40px; color: #e55e55; }
#mainnav li a.photos:hover { background-position: -260px  -40px; color: #f7ce44; }
#mainnav li a.blog:hover { background-position: -390px -40px; color: #6ae6bc; }

/* content */
.wrapper {
  margin: 0 auto;
  width: 960px
}
img {display: block;}

/* blog */
#blog .post {
  margin: 0 auto 90px;
  overflow: hidden;
  width: 960px;
}
#blog .date {
  float: left;
  margin-right: 169px;
  text-align: right;
  width: 191px
}
#blog .date p {
  color: #111;
  font-size: 11px;
  margin: 0;
}
#blog .content {
  border-top: 2px solid #6ae6bc;
  float: left;
  padding-top: 30px;
  width: 600px;
}

/* about */
#about .left {
  border-top: 2px solid #64f0ea;
  float: left;
  height: 300px;
  margin-right: 30px;
  width: 450px;
}
#about .middle {
  border-top: 2px solid #64f0ea;
  float: left;
  height: 240px;
  margin-right: 30px;
  padding: 30px 0;
  width: 195px
}
#about .right {
  border-top: 2px solid #64f0ea;
  float: left;
  height: 240px;
  padding: 30px 0;
  width: 195px
}
#about .right h4 {
  font-size: 14px;
}
#about .right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.grey { color: #aaa; }

/* photos */
#photos {
  background: #f7ce44;
}