/* Reset Defaults
--------------------------------------------------------------- */
body { margin: 0; padding: 0; color: #AAA; font: 76%/1.5em Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl,
fieldset, address { margin-top: 0; margin-bottom: 1em; }
address, abbr, acronym { font-style: normal; }
a:link , a:visited { color: #FFF; text-decoration: none; }
a:hover , a:active { text-decoration: underline; }
abbr { border: none; font-style: normal; }
img { border: none; }

/* Default Styles
--------------------------------------------------------------- */
h1 { font-size: 2.0em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }
h1, h2, h3 { color: #045683; font-weight: normal; text-transform: uppercase; }
h4, h5, h6 { font-weight: bold; }
h2, h3, h4, h5, h6 { margin: 1.2em 0 0.8em; line-height: 1.2em; }
table, th, td { font-weight: normal; vertical-align: top; text-align: left; font-size: 1.0em; }
ul, ol { padding: 0 0 0 1.6em; }
dl { margin-bottom: 2em; }
dl dt { margin-top: 1em; font-weight: bold; }
dl dd { padding-left: 1em;}
.clear { clear: both; }
.hidden { position: absolute; left: -3000px; }
.lowercase { text-transform: lowercase; }
.production_note { color: #F00; }


/* Basic Layout
--------------------------------------------------------------- */
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

body { background: #222; }

#header {
	height: 60px;
	background: url("images/bg_header.png") left top no-repeat;
	}

#container {
	height: 570px;
	background: url("images/bg_nav_shadow.png") left 480px repeat-x;
	}

#content {
	height: 420px;
	background: url("images/bg_content.jpg") left top no-repeat;
	overflow: hidden;
	}

#columns {
	width: 1020px;
	height: 385px;
	margin: 27px -380px 0 0;
	}

#main_content {
	height: 360px;
	margin: 0 440px 0 60px;
	}

#side_content {
	float: right;
	width: 320px;
	height: 360px;
	margin: 0 60px 0 0;
	}

#nav_menu {
	height: 30px;
	background: url("images/bg_nav.jpg") left top no-repeat;
	overflow: hidden;
	}

#footer {
	height: 120px;
	padding-left: 120px;
	background: url("images/bg_footer.jpg") top left no-repeat;
	}

/* Header
--------------------------------------------------------------- */
#header h1 {
	float: left;
	margin: 0;
	width: 243px;
	height: 58px;
	}

#header h1 a {
	float: right;
	display: block;
	width: 124px;
	height: 33px;
	margin-top: 22px;
	background: url("images/logo.png") left top no-repeat;
	text-indent: -5000px;
	}
#header h1 a:hover { background-position: right bottom; }
#header a:focus { outline: none; }

#header h2 {
	float: left;
	margin: 0;
	width: 230px;
	height: 58px;
	background: url("images/logo_tagline.png") 23px 36px no-repeat;
	text-indent: -5000px;
	}

/* Navigation
--------------------------------------------------------------- */
.nav {
	list-style: none;
	width: 817px;
	height: 24px;
	margin: 0;
	padding: 0 0 0 108px;
	}

.nav li { 
	display: inline;
	margin: 0;
	padding: 0;
	}

ul.nav li a {
	display: block;
	float: left;
	height: 24px;
	background: url("images/nav.png") 0 0 no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	}

ul.nav li a:focus { outline: none; }

/* Buttons */
.nav .home a { width: 108px; background-position: 0 0; }
.nav .design a { width: 107px; background-position: -108px 0; }
.nav .development a { width: 172px; background-position: -215px 0; }
.nav .contact a { width: 170px; background-position: -387px 0; }
.nav .about a { width: 144px; background-position: -557px 0; }

/* Buttons - Hover */
.nav .home a:hover, .nav .home a:focus { background-position: 0 -24px; }
.nav .design a:hover, .nav .design a:focus { background-position: -108px -24px; }
.nav .development a:hover, .nav .development a:focus { background-position: -215px -24px; }
.nav .contact a:hover, .nav .contact a:focus { background-position: -387px -24px; }
.nav .about a:hover, .nav .about a:focus { background-position: -557px -24px; }

/* Buttons - Active */
.nav .home a:active, .nav .home a:focus { background-position: 0 -48px; }
.nav .design a:active, .nav .design a:focus { background-position: -108px -48px; }
.nav .development a:active, .nav .development a:focus { background-position: -215px -48px; }
.nav .contact a:active, .nav .contact a:focus { background-position: -387px -48px; }
.nav .about a:active, .nav .about a:focus { background-position: -557px -48px; }

/* Buttons - Active Page */
#home .nav .home a { background-position: 0 -72px; }
#design .nav .design a { background-position: -108px -72px; }
#development .nav .development a { background-position: -215px -72px; }
#contact .nav .contact a { background-position: -387px -72px; }
#about .nav .about a { background-position: -557px -72px; }

/* Portfolio Navigation */
#portfolio_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

#portfolio_nav ul li {
	display: inline;
	margin: 0;
	}

#portfolio_nav ul#item {
	width: 320px;
	height: 15px;
	}

#portfolio_nav ul#item li {
	display: block;
	float: left;
	height: 15px;
	background: #222;
	color: #AAA;
	overflow: hidden;
	opacity: .90;
	filter: alpha(opacity=90);
	}

#portfolio_nav ul#item li.btn_previous {
	width: 103px;
	}

#portfolio_nav ul#item li.btn_next {
	width: 67px;
	}

#portfolio_nav ul#item li.item_count {
	width: 140px;
	margin-left: 3px;
	text-align: right;
	}

#portfolio_nav ul#item li.item_count span {
	display: block;
	margin-top: -1px;
	padding-right: 4px;
	font-size: .86em;
	letter-spacing: .1em;
	}

#portfolio_nav ul#item li a {
	display: block;
	height: 15px;
	background: url("images/btn_portfolio.png") no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	opacity: .70;
	filter: alpha(opacity=70);
	}

#portfolio_nav ul#item li a:hover, #portfolio_nav ul#item li a:active {
	opacity: .99;
	filter: alpha(opacity=99);
	}

#portfolio_nav ul#item li.btn_previous a {
	width: 94px;
	background-position: left top;
	}

#portfolio_nav ul#item li.btn_next a {
	float: right;
	width: 58px;
	background-position: right top;
	}

#portfolio_nav ul#item li.btn_previous a:focus, #portfolio_nav ul#item li.btn_next a:focus { outline: none; }

#portfolio_nav ul#category {
	display: none;
	height: 13px;
	margin-top: 8px;
	}

#portfolio_nav ul#category li {
	height: 13px;
	overflow: hidden;
	}

#portfolio_nav ul#category li a {
	display: block;
	float: left;
	height: 13px;
	margin: 0 10px;	
	background: url("images/btn_categories.png") no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	}

#portfolio_nav ul#category li.web a { margin-left: 19px; }

#portfolio_nav ul#category li.web a { width: 38px; background-position: 0px 0; }
#portfolio_nav ul#category li.print a { width: 54px; background-position: -60px 0; }
#portfolio_nav ul#category li.other a { width: 61px; background-position: -133px 0; }

#portfolio_nav ul#category li.web a:hover { background-position: 0px -13px; }
#portfolio_nav ul#category li.print a:hover { background-position: -60px -13px; }
#portfolio_nav ul#category li.other a:hover { background-position: -133px -13px; }

body.web #portfolio_nav ul#category li.web a { 
	background-position: 0 -13px;
	opacity: .70;
	filter: alpha(opacity=70);
	}


/* Content Styles
--------------------------------------------------------------- */
#content { 
	color: #222;
	font-size: 1em;
	line-height: 1.5em;
	letter-spacing: .04em;
	}

#content h3 { 
	margin: 0 0 .4em;
	font-size: 1.2em;
	letter-spacing: .11em;
	}

#main_content blockquote {
	margin: 1em 0 1.5em 1em;
	padding: 0 0 .75em 1em;
	background: url("images/bg_blockquote.png") left bottom no-repeat;
	border-left: 5px solid #FFF;
	color: #FFF;
	font-size: 1.2em;
	}

/* UL Styles */
#content ul { text-indent: -1.6em; }
#content ul li { text-indent: 0; }
	
/* Sidebar Styles
--------------------------------------------------------------- */
/* Highlights */
.highlights dt {
	margin: 1em 0 .5em;
	padding-bottom: .1em;
	background: url("images/bg_divider_320.png") left bottom no-repeat;
	color: #FFF;
	font-size: .86em;
	text-transform: uppercase;
	letter-spacing: .11em;
	opacity: .80;
	filter: alpha(opacity=80);
	}

.highlights dd { color: #045683; }

.highlights dd ul {
	list-style: none;
	padding: 0;
	}

.highlights dd ul li a {
	padding-left: 1em;
	background: url("images/bullet_highlights.png") 0 2px	no-repeat;
	}

.highlights dd ul li a:hover, .highlights dd ul li a:active {
	background-position: 0 -86px;
	color: #045683;
	text-decoration: none;
	}

.highlights dd ul li a:focus { outline: none; }

/* Footer
--------------------------------------------------------------- */
#footer { 
	font-size: .76em;
	letter-spacing: .11em;
	}

ul#utility_menu {
	list-style: none;
	padding: 1px 0 0;
	}

ul#utility_menu li {
	display: inline;
	padding: 0 7px 0 12px;
	background: url("images/divider_utility.png") left 2px no-repeat;
	}

ul#utility_menu li.first, ul#utility_menu li.last { padding-left: 6px; background: none; }
ul#utility_menu li.first { padding-left: 0; }

ul#utility_menu li a:focus { outline: none; }

/* Forms
--------------------------------------------------------------- */
.required { color: #FFF; }
.unrequired { color: transparent; }

input, textarea {
	padding: 2px;
	border: 2px solid #FFF;
	border-bottom: 3px solid #FFF;
	border-left: 7px solid #FFF;
	background: transparent;
	color: #222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	opacity: .85;
	filter: alpha(opacity=85);
	}

input.btn {
	background: #045683;
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: .15em;
	}

/* Page Specific Styles
--------------------------------------------------------------- */
/* Home */
body#home #content {
	background: url("images/bg_content_home.jpg") left top no-repeat;
	}

body#home #content #main_content {
	margin: 0 60px 0 60px;
	}

body#home #content #main_content h3 {
	width: 482px;
	height: 138px;
	margin: 0;
	margin-left: 303px;
	background: url("images/home_h3_welcome.jpg") left top no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	}

body#home #content #main_content h4 {
	width: 470px;
	height: 47px;
	margin: 0;
	margin-left: 378px;
	background: url("images/home_h4_tagline.jpg") left top no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	}

body#home #nav_menu { background: url("images/bg_nav_home.jpg") left top no-repeat; }

body#home ul.nav li a { background-image: url("images/nav_home.png"); }

/* Design */

#design_list dt {
	height: 12px;
	margin: 2em 0 .5em;
	background: url("images/design_list.png") 0 0 no-repeat;
	text-indent: -5000px;
	}

#design_list dt.web {
	background: none;
	text-indent: 0;
	}

#design_list dt.web a {
	display: block;
	width: 45px;
	height: 12px;
	background: url("images/design_list.png") 0 0 no-repeat;
	text-indent: -5000px;
	}

#design_list dt.flash { background-position: 0 -20px; }
#design_list dt.print { background-position: 0 -40px; }
#design_list dt.other { background-position: 0 -60px; }

#design_list dt.web a:hover, #design_list dt.web a:active { background-position: 0 -80px; }

#design_list dt a:focus { outline: none; }

#design_list dd a.btn_design {
	background: url("images/arrow.png") top right no-repeat;
	padding: 0 11px 0 5px;
	font-size: .91em;
	text-transform: uppercase;
	letter-spacing: .11em;
	}

#design_list dd a.btn_design:hover, #design_list dd a.btn_design:active {
	opacity: .85;
	filter: alpha(opacity=85);
	}

#design_list dd a.btn_design:hover, #design_list dd a.btn_design:active { text-decoration: none; }

#design_list dd a.btn_design:focus { outline: none; }

/* Portfolio */

body.portfolio #main_content {
	background: url("images/bg_portfolio.jpg") left top no-repeat;
	text-align: center;
	}

body.portfolio #main_content #enlarge {
	height: 15px;
	color: #FFF;
	font-size: .86em;
	text-transform: uppercase;
	letter-spacing: .2em;
	opacity: .90;
	filter: alpha(opacity=90);
	}

body.portfolio #main_content #large_image {
	padding: 15px 0 10px;
	}

body.portfolio #main_content #large_image img {
	margin: 0 auto;
	border: 1px solid #FFF;
	}

body.portfolio #main_content #large_image a:hover img {
	opacity: .80;
	filter: alpha(opacity=80);
	}

body.portfolio #main_content #thumbnails { padding: 0 10px; }

body.portfolio #main_content #thumbnails img {
	margin: 0 7px;
	border: 1px solid #FFF;
	}

body.portfolio #main_content #thumbnails .top img,
body.portfolio #main_content #thumbnails .bottom img {
	height: 49px;
	width: auto;
	}

body.portfolio #main_content #thumbnails .top img { margin: 0 7px 11px; }


body.portfolio #main_content #thumbnails a:hover img {
	opacity: .70;
	filter: alpha(opacity=70);
	}

body.portfolio #main_content #large_image a:active img,
body.portfolio #main_content #large_image a:focus img,
body.portfolio #main_content #thumbnails a:active img,
body.portfolio #main_content #thumbnails a:focus img {
	opacity: .30;
	filter: alpha(opacity=30);
	}

body.portfolio #main_content #large_image a:focus,
body.portfolio #main_content #thumbnails a:focus { outline: none; }

body.portfolio #side_content #description {
	height: 285px;
	font-size: 1.05em;
	line-height: 1.67em;
	}

body.portfolio #side_content h3 {
	margin-bottom: .1em;
	padding-top: 40px;
	}

body.portfolio #side_content p {
	margin-bottom: 1.75em;
	}

/* Development */
/*
body#development #main_content { background: #FF0; }
body#development #side_content { background: #0F0; }*/

body#development #columns {
	width: 1020px;
	height: 385px;
	margin: 27px -380px 0 0;
	}

body#development #main_content {
	height: 360px;
	margin: 0 640px 0 60px;
	}

body#development #side_content {
	float: right;
	width: 520px;
	height: 360px;
	margin: 0 60px 0 0;
	}

body#development ul.client_list {
	list-style: none;
	float: left;
	width: 230px;
	margin: 0 10px 0 0;
	padding: 0 0 0 15px;
	border-left: 1px dotted #FFF;
	}

/* Contact */

body#contact #main_content { border-right: 1px dotted #FFF; }

body#contact #main_content h3, body#contact #main_content p { padding-left: 90px; }

body#contact #form_content {
	font-size: .91em;
	}

body#contact #form_content div {
	margin-bottom: .7em;
	}

body#contact #form_content label {
	display: block;
	clear: left;
	float: left;
	width: 90px;
	padding-top: 2px;
	}

body#contact textxarea { width: 300px; }

body#contact #form_content .button_row {
	margin-top: 1.5em;
	padding-left: 90px;
	opacity: .99;
	filter: alpha(opacity=100);
	}

/* Thank You */
body#thankyou #main_content { font-size: 1.5em; }
body#thankyou #main_content h3 { margin-top: 3em; }

/* About */

body#about #main_content blockquote .mission_head {
	font-size: .75em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .15em;
	opacity: .80;
	filter: alpha(opacity=80);
	}

/* 
	Station 8: Version 3.0
	Design and Development by Station 8: Design for the future.
	http://www.station8design.com
	Copyright 2009 Station 8 (Sean C. Duffey)
*/