@charset "UTF-8";

/*
Version: 1.0
Author: Adam Faja for Eye Level
Legal: © 2008 Eye Level
URL: http://www.youreyelevel.com/

CONTENTS 
********************

1)  GLOBAL BASELINE and OVERRIDES
1a) sIFR styles
1b) clear fixes, transparent PNG/IE fix

2) GLOBAL NAV "TABS"

3) GLOBAL LAYOUT STRUCTURE

4) NAV STRIPE gradient

5) SIDENAV

6) PAGE: Splash

7) PAGE: Portfolio
7a) splash rollover overlays
7b) image slider

8) PAGE: Experience

9) PAGE: Process

10) PAGE: Contact

******************** */


/**************************/
/* 1) GLOBAL BASELINE and OVERRIDES */
/**************************/

* {margin:0; padding:0;}

html { margin: 0;
	padding: 0;
	height: 100%;
	min-width: 100%;}

body { margin: 0;
	padding: 0;
	height: 100%;
	min-width: 1000px;
	text-align: left;
	font: 13px/1.7em arial, helvetica, sans-serif;
	letter-spacing: .5px;
	color: #a3bbcc;
	background: #3a4d5c;}

a:link, a:visited { text-decoration: none;
	color: #ffb700;}

a:hover, a:active { text-decoration: none;
	color: #fff;}

p {	margin: 0 0 1.7em 0;
	padding: 0;}

h1, h2, h3, h4, h5, h6 { margin: 0;
	font-family: arial, helvetica, sans-serif;
	font-weight: normal;
	line-height: 1em;}

h1 { color: #fff;
	font-size: 20px;}

h2 { color: #fff;
	font-size: 14px;
	font-weight: normal;}

h3 { color: #a3bbcc;
	font-size: 13px;}

img { border: none;}

.golink {
	background: url(images/wedge.gif) no-repeat left;
	padding: 4px 4px 4px 16px;
	font-size: 1.0em;
	}
	
.caps { text-transform: uppercase;}

.label {
	color: #7a8c99;
	text-transform: uppercase;
	margin: 0 0 0 0;
	font-family: geneva, tahoma, arial, helvetica, sans-serif;
	font-size: 10px;}

.bumpup { font-size: 150%;}

.floatleft {float: left;}
.floatright {float: right;}

.clearboth {
	clear: both;}


/**************************/
/* 1a) These are standard sIFR styles... do not modify */
/**************************/

.sIFR-flash {
	visibility: visible !important;
	margin: 0;}

.sIFR-replaced {
	visibility: visible !important;}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	font-size: 20px;}

/*.sIFR-hasFlash h2 {
	visibility: hidden;
	font-size: 15px;
	text-transform: uppercase;
	background: url(images/wedge.gif) no-repeat left;
	padding: 0 0 0 16px;}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;}*/


/**************************/
/* 1b) apply to floating divs to fix the expand-to-contain-content problem */
/**************************/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

<!--[if IE]> /* Only IE can see inside the conditional comment and read this CSS rule. Don't ever use a normal HTML comment inside the CC or it will close prematurely. */
<style type="text/css">
/* triggers hasLayout */
.clearfix { zoom: 1;}

/* designates classes/ids/objects affected by PNG fix */
img, a { behavior: url(../scripts/iepngfix.htc);behavior: url(../../scripts/iepngfix.htc);}
</style>
<![endif]-->



/**************************/
/* 2) GLOBAL NAV "TABS" */
/**************************/

#nav {
	float: left;}

#nav ul {
	margin: 0;
	padding: 0;
	font-size: 1.15em;
	list-style: none;
	text-align: center;}

#nav li {
	display: inline;
	float: left;}

#nav li a, #nav li a:visited {
	height: 50px;
	width: 160px;
	float: left;
	color: #798b98;
	padding-top: 70px;
	text-decoration: none;}

#nav li a:hover {
	color: #ffb700;}

body.portfolio #nav .portfolio,
body.experience #nav .experience,
body.process #nav .process,
body.contact #nav .contact {
	color: #fff;
	background: #ffb700;}

body.portfolio #nav .portfolio:hover,
body.experience #nav .experience:hover,
body.process #nav .process:hover,
body.contact #nav .contact:hover {
	cursor: text;
	text-decoration: none;}

body.splash #nav li a, body.splash #nav li a:visited {
	height: 50px;
	width: 160px;
	float: left;
	color: #fff;
	padding-top: 30px;
	text-decoration: none;}

body.splash #nav li a:hover {
	color: #ffb700;}


/**************************/
/* 3) GLOBAL LAYOUT STRUCTURE */
/**************************/

#header {
	height: 120px;
	background-color: #fff;
	border-bottom: 1px solid #fff;}

#logo {
	float: right;
	margin: 20px 28px;}

#subheader {
	background: url(images/grad-subhead.png) top repeat-x #7a8c99;
	border-bottom: 1px solid #fff;}

#content {
	background: url(images/grad-content.png) top repeat-x;}
	
.bodycolumn {
	width: 960px;
	padding: 0 20px;
	margin: 0 auto;}

#subheader .bodycolumn {
	padding-top: 36px;
	padding-bottom: 30px;}

#content .bodycolumn {
	padding-top: 60px;
	padding-bottom: 60px;
	height: 340px;
	position: relative;}



/**************************/
/* 4) NAV STRIPE gradient */
/* NOTE! 100% height extension is handled by live.css, relative to each html page */
/**************************/

#subheader .liveFull {
	background: url(images/grad-subhead-full.png) no-repeat 20px 0px;}

#subheader .live1 {
	background: url(images/grad-subhead-live.png) no-repeat 20px 0px;}

#content .live1 {
	background: url(images/grad-content-sidenav.png) no-repeat 19px 0px;}

#subheader .live2 {
	background: url(images/grad-subhead-live.png) no-repeat 180px 0px;}

#content .live2 {
	background: url(images/grad-content-live.png) no-repeat 179px 0px;}

#subheader .live3 {
	background: url(images/grad-subhead-live.png) no-repeat 340px 0px;}

#content .live3 {
	background: url(images/grad-content-live.png) no-repeat 339px 0px;}

#subheader .live4 {
	background: url(images/grad-subhead-live.png) no-repeat 500px 0px;}

#content .live4 {
	background: url(images/grad-content-live.png) no-repeat 499px 0px;}



/**************************/
/* 5) SIDENAV */
/**************************/

#sidenav {
	float: left;
	width: 160px;}

#sidenav ul {
	padding: 0;
	margin: 0;
	font-size: 12px;
	list-style: none;}

#sidenav li {
	display: inline;
	padding: 0;
	margin: 0;}

#sidenav a, #sidenav a:visited {
	text-decoration: none;
	display: block;
	width: auto;
	padding: 6px 4px 6px 16px;
	color: #fff;}

#sidenav a:hover {
	text-decoration: none;
	color: #ffb700;}

/* when new items are added to the sidenav.html include, they must be given their own unique class, and added below */

body.avaya #sidenav .avaya,
body.bardo #sidenav .bardo,
body.bonanzle #sidenav .bonanzle,
body.chase-me #sidenav .chase-me,
body.codeplex #sidenav .codeplex,
body.eventbrite #sidenav .eventbrite,
body.smt #sidenav .smt,
body.isilon #sidenav .isilon,
body.mixpo #sidenav .mixpo,
body.ms-ceo #sidenav .ms-ceo,
body.ms-cta #sidenav .ms-cta,
body.nuance #sidenav .nuance,
body.pgsp #sidenav .pgsp,
body.ruksak #sidenav .ruksak,
body.upside #sidenav .upside,
body.voyagetrek #sidenav .voyagetrek {
	width: 156px;
	margin: 2px 0;
	padding: 4px 4px 4px 16px;
	font-weight: bold;
	color: #23323e;
	background: url(images/sidenav-live.gif) no-repeat center right;}

body.avaya #sidenav .avaya:hover,
body.bardo #sidenav .bardo:hover,
body.bonanzle #sidenav .bonanzle:hover,
body.chase-me #sidenav .chase-me:hover,
body.codeplex #sidenav .codeplex:hover,
body.eventbrite #sidenav .eventbrite:hover,
body.smt #sidenav .smt:hover,
body.isilon #sidenav .isilon:hover,
body.mixpo #sidenav .mixpo:hover,
body.ms-ceo #sidenav .ms-ceo:hover,
body.ms-cta #sidenav .ms-cta:hover,
body.nuance #sidenav .nuance:hover,
body.pgsp #sidenav .pgsp:hover,
body.ruksak #sidenav .ruksak:hover,
body.upside #sidenav .upside:hover,
body.voyagetrek #sidenav .voyagetrek:hover {
	cursor: text;
	text-decoration: none;
	}


/**************************/
/* 6) PAGE: Splash */
/**************************/

#splashheader {
	margin: 0;
	padding: 0;
	height: auto;
	background-color: #fff;
	border-bottom: 1px solid #fff;}

#splashheader #logo {
	float: left;
	margin: 0px;}

#splashheader .bodycolumn {
	padding: 0px 0px 0px 0px;}


.splash #subheader .bodycolumn {
	padding-top: 0px;
	padding-bottom: 0px;}

.splash .leftcolumn {
	width: 520px;
	padding: 0 60px;
	float: left;
	margin-right: 55px; /* was 60px */
	}

.splash .rightcolumn {
	width: 260px;
	padding: 0;
	float: left;
	}

.splash h1 {
	margin: 0 0 1em 0;
	}

.splash .golink {
	text-transform: uppercase;
	display: block;}

.splash #content {
	background: none;}

.splash #content .bodycolumn {
	padding-top: 60px;
	padding-bottom: 10px;
	height: auto;
	position: relative;
	background: none;}

.splashtag {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 273px;
	height: 63px;}



/**************************/
/* 7) PAGE: Portfolio */
/**************************/

#portfoliocol {
	float: right;
	width: 740px;}

#portfoliocol h1 {
	width: 680px;
	margin: 0 30px;}

#portfoliocol .thumbclient {
	border: none;
	margin: 0 15px 15px 15px;}

#portfoliocol .leftcolumn {
	width: 460px;
	margin-right: 60px;
	color: #fff;}

#roles {
	width: 220px;}

#roles li {
	font-family: geneva, tahoma, arial, helvetica, sans-serif;
	font-size: 10px;
	list-style: none;
	}

#roles .label {
	list-style: none;
	list-style-image: none;
	color: #7a8c99;
	text-transform: uppercase;}

.bullet {
	background: url(images/dot.gif) left center no-repeat;
	display: block;
	padding: 0px 0px 0px 10px;}
	
.other { margin-top: 1.7em; }

.other li {
	list-style: none;
	list-style-image: none;
	font-family: geneva, tahoma, arial, helvetica, sans-serif;
	font-size: 10px;}

#projectnavbar .golink {
	margin: 0 0 0 0;
	padding: 4px 4px 4px 16px;
	text-transform: none;}

.imgleft {
	margin: 0 22px 0 0;
	border: solid 4px #23323e;}

.imgcenter {
	margin: 0 46px 0 46px;
	border: solid 4px #23323e;}

.imgright {
	margin: 0 0 0 22px;
	border: solid 4px #23323e;}


/**************************/
/* 7a) splash rollover overlays */
/**************************/

.thumb-block {
	margin: 12px;
	padding: 0;
	border: 4px solid #23323e;
	float: left; }

.thumb-image {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 212px;
	height: 111px; }

.thumb-image:hover .thumb-overlay {
	display: block;
	cursor: pointer; }

.thumb-image .thumb-overlay {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 15px;
	width: 182px;
	height: 81px;
	background: url(images/overlay_85.png) repeat;
	z-index: 999; }

.thumb-block p {
	color:#fff;
	font-family: arial,helvetica,sans-serif;
	font-size: 13px;
	text-shadow: 1px 1px 2px #23323e; }

.thumb-block .label {
	color:#ffb700;
	text-transform: none; }

.thumb-floater {
	margin: 12px;
	padding: 50px 0;
	width: 212px;
	height: 19px;
	float: right;
	text-transform: uppercase;
	display:block; }


/**************************/
/* 7b) image slider (from http://jqueryfordesigners.com/coda-slider-effect/)*/
/**************************/

#wrapper {
    width: 740px;
    margin: 0 auto;}

#slider {
    width: 739px;
    margin: 0 auto;
    position: relative;}

.scroll {
    height: 263px;
    width: 740px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
	clear: left;
	margin-bottom: 40px;}

.scrollContainer div.panel {
    padding: 0;
	height: 263px;
    width: 740px;}

.panel {
	width: 740px;
	float: left;
	position: relative;}

#projectnavbar {
	background: #23323e;
	padding: 6px;
	margin-bottom: 30px;
	line-height: normal;}

ul.projectnav {
	margin: 4px 0;
    padding: 0;
	list-style: none;
	display: block;
	float: left;}

ul.projectnav li {
    display: inline;
	margin: 0;
	padding: 0;}

ul.projectnav a {
    color: #a3bbcc;
	margin: 0;
	padding: 6px 8px;
	text-decoration: none;}

ul.projectnav a:hover {
    color: #ffb700;}

ul.projectnav a.selected {
    margin: 0;
	background-color: #ffb700;
	color: #23323e;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-opera-border-radius: 2px;
	-moz-border-radius: 2px;}

/*scroll buttons not currently used */

.scrollButtons { cursor: pointer;}

.scrollButtons.left {left: -20px;}

.scrollButtons.right {right: -20px;}


/**************************/
/* 8) PAGE: Experience */
/**************************/

.experience .text {
	width: 600px;
	margin: 0 30px 0 0;} /* R was 40 */

.experience .text p {
	margin-right: 20px;}

.experience .text h1 {
	margin: 40px 0 0 0;}
	
.person {
	width: 270px;
	float: left;
	margin: 15px 30px 15px 0;
	height: 100px;}

.person img {
	float: left;
	margin: 0 20px 0 0;
	border: solid 4px #23323e;}

.person h2 {
	margin: 10px 0;}

.person p {
	margin: 10px 0;
	font-size: 10px;
	line-height: 1.7em;
	font-family: geneva, tahoma, arial, helvetica, sans-serif;}

#sidebox {
	padding: 25px 0px 30px 30px;
	margin-bottom: 20px;
	width: 290px;
	background-color: #23323e;}

#sidebox h2 {
	margin-bottom: 15px;
	text-transform: uppercase;}

#sidebox ul {
	width: 125px;
	margin-right: 10px;} /* was 20px */

#sidebox li {
	list-style: none;
	font-family: geneva, tahoma, arial, helvetica, sans-serif;
	font-size: 10px;}



/**************************/
/* 9) PAGE: Process */
/**************************/

.process .text {
	width: 640px;
	margin: 0 60px 60px 0;}

#diagramblock {
	width: 920px;}


/**************************/
/* 10) PAGE: Contact */
/**************************/

.contact .text {
	width: 640px;
	margin: 0 40px 0 0;}

.contact .text p {
	margin-right: 20px;}

.contact .text h1 {
	margin: 0 0 0 0;}

.fieldbox, .fieldbox2 {
	float: left;
	padding: 0;
	border: solid 4px #23323e;
	background-color: #23323e;}

.fieldbox {
	width: 240px; /* was 280px */
	margin: 0 30px 30px 0; /* Bot was 30px */
	}

.fieldbox2 {
	width: 598px;
	}

.fieldbox h3, .fieldbox2 h3 {
	margin: 4px 6px 7px 6px;}

.field, .field2 {
	background: url(images/field-bg.gif) top left #fff;
	font: 13px/1.7em arial, helvetica, sans-serif;
	letter-spacing: .5px;
	color: #3a4d5c;
	border: none;
	padding: 6px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-opera-border-radius: 2px;
	-moz-border-radius: 2px;}

.field {width: 220px;} /* was 268 */

.field2 {width: 586px;}

.contact #sidebox {
	padding: 30px;
	width: 220px;
	background-color: #23323e;}

.contact #sidebox h2, .contact #sidebox p {
	margin-left: 14px;}

.submitbox {
	float: right;
	margin-right: 34px;
	padding: 2px 20px 6px 24px;
	background-color: #23323e;
	text-transform: uppercase;
	}

.contact_row {
	padding-top: 2px;
	padding-bottom: 2px;	
	}

.contact_title {
	float: left;
	width: 180px;
	text-align: right;
	margin-right: 10px;
	}

.contact_titlename {
	line-height: 1em;
	margin: 4px 6px 8px 6px;
	}

.contact_field {float: left;}

.formcellspacer {
	height: 10px;
	width: 14px;
	float: left;
	text-align: center;
	vertical-align: middle;
	padding-top: 4px;
	}

p.contact_details {color: #ffffff;}

.submitform {
	display: block;
	color: #ffb700;
	border: 0;
	padding: 4px 4px 4px 16px;
	font-family: arial, helvetica, sans-serif;
	font-size: 1.0em;
	text-transform: uppercase;
	background: url(images/wedge.gif) no-repeat left; }

.submitform:hover {
	color: #ffffff;}



/**************************/
/* X) TEMPORARY SPLASH */
/**************************/

#note {
	float: left;
	margin: 24px 0 24px 60px;
	padding: 0;
	font-size: 1.2em;
	color: #FFB700;
	text-decoration: none;}

#note .label {color: #FFB700;}