html, body { 
	background-color: #000;
	margin: 0;
	padding: 0;
	color: #eee;
	font: normal normal normal 0.95em/1.6 Helvetica, Arial, sans-serif;
}

h1 { margin: 0; font-size: 3em; white-space: nowrap; }
a { text-decoration: none; color: #D93A03; }
a img { border: none; }
big { font-size: 1.3em; }
em em { font-style: normal; }

.clear { display: block; clear: both; }

#page {
	background-color: #141414;
}

.stage {
	width: 838px;
	margin: 0 auto;
}

#header { height: 10em; position: relative; }
#header .logo { position: absolute; left: 0; top: 2.75em; }
#nav { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	position: absolute; 
	right: 0;
	top: 5.8em;
	float: right; 
	height: 40px;
}
#nav li { float: left; }
#nav li a {
	display: block;
	float: left;
	background: transparent url('/img/nav-sprite.gif') scroll no-repeat 0 0;
	text-indent: -9999px;
	outline: none;
	height: 40px;
}

#nav li#nav-about a { width: 69px; background-position: 0px 0; }
#nav li#nav-about a:hover, #nav li#nav-about.active a:hover { background-position: 0px -80px; }
#nav li#nav-about.active a { background-position: 0px -40px; }

#nav li#nav-projects a { width: 87px; background-position: -63px 0; }
#nav li#nav-projects a:hover, #nav li#nav-projects.active a:hover { background-position: -63px -80px; }
#nav li#nav-projects.active a { background-position: -63px -40px; }

#nav li#nav-contact a { width: 69px; background-position: -147px 0; }
#nav li#nav-contact a:hover, #nav li#nav-contact.active a:hover { background-position: -147px -80px; }
#nav li#nav-contact.active a { background-position: -147px -40px; }

#nav li span {
	width: 18px;
	height: 40px;
	float: right;
	display: block;
	background: transparent url('/img/nav-sprite.gif') scroll no-repeat -231px 0;
}

#band { 
	background-color: #670b0b; 
	color: #cb7e7e; 
	text-align: center;
	line-height: 10em;
}
#band { text-align: center; }
#band strong { color: #fff; }
#band-tab {
	display: block;
	width: 188px; 
	height: 28px;
	float: right;
	background: transparent url('/img/age-tab.png') scroll no-repeat 0 0;
	color: #a66363;
	text-align: center;
	opacity: 0.6;
	font: normal normal normal 0.7em/2.8 "Lucida Grande", Helvetica, Arial, sans-serif;
}
#band-tab:hover { opacity: 1.0; }

.projects { padding: 0 0 1em 0; }
.project { 
	float: left;
	margin-left: 16px;
	margin-bottom: 16px;
	background-color: #333;
	cursor: pointer;
	display: block;
	outline: none;
	border-radius: .2em;
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	text-indent: -9999px;
}
.project:hover { 
	box-shadow: 0px 0px 1em #777;
	-moz-box-shadow: 0px 0px 1em #777;
	-webkit-box-shadow: 0px 0px 1em #777;
}
.project:active {
	box-shadow: 0px 0px 2em #D93A03;
	-moz-box-shadow: 0px 0px 2em #D93A03;
	-webkit-box-shadow: 0px 0px 2em #D93A03; 
}

.project.grid-3-by-2 { width: 350px; height: 200px; }
.project.grid-2-by-2 { width: 228px; height: 200px; }
.project.grid-1-by-2 { width: 106px; height: 200px; }
.project.grid-1-by-1 { width: 106px; height: 84px; }
.project.grid-1-by-1.top { width: 106px; height: 100px; }
.project.grid-2-by-1 { width: 228px; height: 84px; }
.project.grid-2-by-1.top { width: 228px; height: 100px; }

.project.first {
	margin-left: 0;
}

.project#proj-mbta { background: transparent url('/img/projects/mbta-alerts.png') scroll no-repeat 0 0; }
.project#proj-hirefred { background: transparent url('/img/projects/hire-fred.png') scroll no-repeat 0 0; }
.project#proj-suredev { background: transparent url('/img/projects/suredev.png') scroll no-repeat 0 0; }
.project#proj-build-guild { background: transparent url('/img/projects/buildguild.png') scroll no-repeat 0 0; }
.project#proj-clouds { background: transparent url('/img/projects/clouds.png') scroll no-repeat 0 0; }
.project#proj-roundabout { background: transparent url('/img/projects/roundabout.png') scroll no-repeat 0 0; }
.project#proj-shapes { background: transparent url('/img/projects/roundabout-shapes.png') scroll no-repeat 0 0; }

/* page-specific */
#about-page #band { text-align: left; padding: 1.6em 0; background-color: #D93A03; color: #571600; margin-bottom: 2em; }
#about-page #band h1 { line-height: 1.6; }
#about-page #band h1 small { display: block; font-size: 0.5em; }
#about-page h2 { margin-bottom: 0; }
#about-page .column { width: 295px; margin-left: 32px; float: left; padding-bottom: 2em; }
#about-page .portrait { 
	border-radius: 6px; 
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	width: 184px; 
	height: 184px; 
	background: transparent url('/img/fred.jpg') scroll no-repeat 0 0;
	float: left;
	margin: 1.2em 0 1em;
}

#contact-page #band { text-align: left; background-color: #305C77; color: #82ADC7; }
#contact-page p big { font-size: 5em; display: block; font-weight: bold; line-height: 1.1; }
#contact-page .column { width: 582px; margin-left: 32px; float: left; padding-bottom: 2em; }

#contact-page .column.first { margin-left: 0; width: 222px; }