/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 6, 2012 */



@font-face {
    font-family: 'ArimoBold';
    src: url('arimo-bold-webfont.eot');
    src: url('arimo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('arimo-bold-webfont.woff') format('woff'),
         url('arimo-bold-webfont.ttf') format('truetype'),
         url('arimo-bold-webfont.svg#ArimoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArimoRegular';
    src: url('arimo-regular-webfont.eot');
    src: url('arimo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('arimo-regular-webfont.woff') format('woff'),
         url('arimo-regular-webfont.ttf') format('truetype'),
         url('arimo-regular-webfont.svg#ArimoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}




body {
	margin: 0 25px 25px 25px;
	padding: 0;
	background-color: white;
	text-align: center;
	font: 14px/18px 'ArimoRegular', helvetica, arial, sans-serif;
	color: #797a7b;
	text-rendering: optimizeLegibility;
}


h3 {
	margin: 0;
	padding: 0;
}

p {
	margin: 13px 0;
	padding: 0;
	letter-spacing: 1px;
}

ul, ol {
	font-size: 13px;
	line-height: 22px;
	margin: 13px 0 0 0;
	padding: 0;
	list-style-position: inside;
	letter-spacing: 1px;
}
ol {
	list-style-type: none;
}
a {
	color: #359ed2;
	text-decoration: none;
}
a:hover {
	color: #359ed2;
	text-decoration: underline;
}
a:visited {
	color: #359ed2;
}

em {
	color: #359ed2;
	font-style: normal;
}

#container {
	width: 1168px;
	margin: auto;
	text-align: left;
	position: relative;
}

.center {
	text-align: center;
}


/*=== Header & Nav ===*/
header {
	position: absolute;
	height: 57px;
	width: 1023px;
	top: 0;
	left: 74px;
	background: url('../img/logo_bar.jpg') left top no-repeat;
}
body.home header {
	background-image: url('../img/home_bar.jpg');
}

header a.home {
	position: absolute;
	top: 0;
	left: 0;
	height: 74px;
	width: 210px;
	background: url('../img/logo_rollover.png') 0 0 no-repeat;
}
header a.home:hover {
	background-position: 0 -57px;
}

header nav {
	position: absolute;
	bottom: 4px;
	right: 80px;
	opacity: 0.6;
}

header nav a {
	display: inline-block;
	margin-left: 2px;
	height: 9px;
	background: url('../img/headline_sprite.png') 0 0 no-repeat;
	overflow: hidden;
	font: 9px/50px 'ArimoRegular', helvetica, arial, sans-serif;
}
header nav a.about {
	padding: 5px;
	background-position: -272px -102px;
	width: 38px;
}
header nav a.education {
	padding: 5px;
	background-position: -358px -102px;
	width: 64px;
}
header nav a.work {
	padding: 5px;
	background-position: -390px -162px;
	width: 33px;
}
header nav a.watertower {
	padding: 5px;
	/*
	background-position: -345px -222px;
	width: 78px;
	*/
	background-position: -378px -222px;
	width: 44px;
}
header nav a.contact {
	padding: 5px;
	background-position: -370px -282px;
	width: 53px;
}
header nav a.about:hover, header nav a.about.selected {
	background-position: -272px -132px;
}
header nav a.education:hover, header nav a.education.selected {
	background-position: -358px -132px;
}
header nav a.work:hover, header nav a.work.selected {
	background-position: -390px -192px;
}
header nav a.watertower:hover, header nav a.watertower.selected {
	background-position: -378px -252px;
}
header nav a.contact:hover, header nav a.contact.selected {
	background-position: -370px -312px;
}



/*=== Banners ===*/
section.banner {
	height: 430px;
	width: 1168px;
	background: url('../img/home_banner.jpg') left top no-repeat;
	position: absolute;
	top: 57px;
	left: 0px;
}
body.home section.banner {
	background-image: url('../img/home_banner.jpg');
}
body.about section.banner {
	background-image: url('../img/about_banner.jpg');
}
body.education section.banner {
	background-image: url('../img/education_banner.jpg');
}
body.watertower section.banner {
	background-image: url('../img/watertower_banner.jpg');
}
body.contact section.banner {
	background-image: url('../img/contact_banner.jpg');
}




section#content {
	position: absolute;
	top: 487px;
	left: 73px;
	width: 886px;
	min-height: 126px;
	border: 1px solid #88b7de;
	border-top: none;
	background: url('../img/gradient.jpg') left top no-repeat;
	padding: 40px 68px 25px 68px;
}
section#content:before, section#content:after {
	content: "";
	display: table;
}
section#content:after {
	clear: both;
}


section#copyright {
	font-size: 11px;
	/*letter-spacing: 1px;*/
	text-align: center;
	color: #ADAEAE;
	margin: 0;
	position: absolute;
	bottom: -35px;
	left: 0;
	width: 1023px;
}
section#copyright.lower {
	bottom: -65px;
}

.col1, .col2 {
	float: left;
}
body.home .col1 {
	width: 461px;
	padding-right: 80px;
	border-right: 1px solid #d2e8fb;
}
body.home .col2 {
	width: 265px;
	padding-left: 79px;
	margin-left: -1px;
	border-left: 1px solid #d2e8fb;
}
body.about .col1 {
	width: 550px;
	padding-right: 74px;
	border-right: 1px solid #d2e8fb;
}
body.about .col2 {
	width: 187px;
	padding-left: 74px;
	margin-left: -1px;
	border-left: 1px solid #d2e8fb;
}
body.about .col2 ul {
	font-size: 12px;
	line-height: 26px;
	list-style-type: none;
}
body.about section#awards_popup .spacer {
	position: absolute;
	width: 29px;
	height: 2px;
	border-top: 1px solid #B5C8D6;
	/*top: 0;*/
	bottom: -2px;
	left: -29px;
}



body.education #content {
	width: 944px;
	padding-right: 10px;
}
body.education .col1 {
	width: 540px;
	padding-right: 50px;
	border-right: 1px solid #d2e8fb;
}
body.education .col2 {
	width: 245px;
	padding-left: 50px;
	margin-left: -1px;
	border-left: 1px solid #d2e8fb;
	font-size: 12px;
	line-height: 21px;
	color: #9b9797;
}
body.education .col2 p {
	margin: 6px 0 0 0;
}
body.watertower .col1 {
	width: 540px;
	padding-right: 50px;
	border-right: 1px solid #d2e8fb;
}
body.watertower .col2 {
	width: 245px;
	padding-left: 50px;
	margin-left: -1px;
	border-left: 1px solid #d2e8fb;
	font-size: 12px;
	line-height: 21px;
	color: #9b9797;
}
body.watertower .col2 p {
	margin: 6px 0 0 0;
}
body.contact #content {
	width: 924px;
	padding-right: 30px;
}
body.contact .col1 {
	width: 537px;
	margin-right: 90px;
}
body.contact .col2 {
	width: 290px;
}



/*=== Myriad headers ===*/
h3, a.mailto, p.seattlephone, p.catalinaphone {
	background: url('../img/headline_sprite.png') 0 0 no-repeat;
	height: 18px;
	line-height: 54px;
	overflow: hidden;
	margin-bottom: 21px;
}
h3 {
	margin-bottom: 13px;
}
h3.header1 {		/* Creators of Emotive Design and Content */
	background-position: -10px -10px;
	width: 334px;
}
h3.header2 {		/* Some of what we do... */
	background-position: -11px -30px;
	width: 182px;
}
h3.header3 {		/* About what we do... */
	background-position: -10px -50px;
	width: 166px;
}
h3.header4 {		/* Why all the butterflies and hummingbirds you ask? */
	background-position: -9px -70px;
	width: 422px;
	margin-top: 35px;
}
h3.header5 {		/* Clients include (but of course are not limited to) */
	background-position: -10px -90px;
	width: 147px;
	height: 29px;
	line-height: 80px;
}
h3.header6 {		/* Conservation Education */
	background-position: -10px -377px;
	width: 197px;
}
h3.header7 {		/* It's a Young World Out There! */
	background-position: -12px -400px;
	margin-top: 35px;
	width: 238px;
}
h3.header8 {		/* Some of Our Favorite Projects */
	background-position: -10px -423px;
	width: 246px;
}
h3.header9 {		/* Some of Our Favorite Books */
	background-position: -10px -447px;
	width: 228px;
	margin-top: 35px;
}
h3.header10 {		/* WATERTOWER - Motion Graphics and Animation */
	background-position: -10px -351px;
	width: 417px;
	height: 19px;
}
h3.header11 {		/* Let us hear from you */
	background-position: -10px -130px;
	width: 168px;
}
h3.header12 {		/* Seattle */
	background-position: -11px -190px;
	width: 57px;
	height: 19px;
}
h3.header13 {		/* Catalina */
	background-position: -11px -280px;
	width: 67px;
	height: 19px;
}

a.mailto {
	display: inline-block;
	background-position: -10px -160px;
	width: 167px;
	height: 20px;
}
p.seattlephone {
	background-position: -11px -216px;
	width: 288px;
	height: 34px;
	line-height: 100px;
}
p.catalinaphone {
	background-position: -10px -306px;
	width: 289px;
	height: 34px;
	line-height: 100px;
}


/*=== portfolio ===*/
.work_wing {
	height: 410px;
	width: 72px;
	background-color: #7BAFDA;
	position: absolute;
	left: 2px;
	top: 57px;
}
.work_wing.right {
	left: auto;
	right: 0px;
}

section#content.portfolio_grid {
	position: absolute;
	top: 57px;
	left: 74px;
	width: 960px;
	height: 760px;
	background: #FFF;
	margin-left: 0;
	padding: 30px 30px 10px 30px;
}
.portfolio_grid table {
	width: 970px;
}
.portfolio_grid tr {
	vertical-align: top;
}
.portfolio_grid td {
	padding-bottom: 20px;
	width: 184px;
}
.portfolio_grid td img {
	display: block;
	height: 101px;
	width: 184px;
}
.portfolio_grid a {
	color: #797a7b;
}
.portfolio_grid a:hover {
	color: #359ed2;
	text-decoration: none;
}
.portfolio_grid td p {
	font-size: 10px;
	line-height: 11px;
	letter-spacing: 0;
	margin: 4px 0 0 0;
	padding: 0;
}
/*.portfolio_grid #overlay, .portfolio_grid #overlay_new {*/
#overlay, #overlay_new {
	position: absolute;
	top: 0;
	left: 74px;
	display: none;
}

/*=== ajax overlay ===*/
section#work {
	position: absolute;
	width: 988px;
	height: 790px;
	top: 57px;
	left: 74px;
	padding-bottom: 10px; /*48px;*/
	background-color: white;
	border-right: 17px solid #3B6588;
	border-left: 17px solid #3B6588;
}
section#work .headerwrapper {
	margin: 0 -17px;
	background-color: black;
	padding: 15px 0 15px 68px;
}
html.ie7 section#work .headerwrapper {
	width: 954px;
	padding-bottom: 0;
	padding-top: 16px;
}
#overlay #work {
	left: 0;
}
section#work h1 {
	height: 25px;
	width: 952px;
	background: url("../img/work_headline_sprite.png") 0 0 no-repeat;
	line-height: 76px;
	overflow: hidden;
}
section#work h1.nineelephants {
	background-position: 0 0;
}
section#work h1.fortyeighthours {
	background-position: 0 -25px;
}
section#work h1.allied {
	background-position: 0 -50px;
}
section#work h1.aquarium {
	background-position: 0 -75px;
}
section#work h1.artwolfe {
	background-position: 0 -100px;
}
section#work h1.cablecenter {
	background-position: 0 -125px;
}
section#work h1.e3 {
	background-position: 0 -150px;
}
section#work h1.eaglemont {
	background-position: 0 -175px;
}
section#work h1.faconnable {
	background-position: 0 -200px;
}
section#work h1.familyfarm {
	background-position: 0 -225px;
}
section#work h1.greatrain {
	background-position: 0 -250px;
}
section#work h1.greenseattle {
	background-position: 0 -275px;
}
section#work h1.hpg {
	background-position: 0 -300px;
}
section#work h1.logodesign {
	background-position: 0 -325px;
}
section#work h1.msft {
	background-position: 0 -350px;
}
section#work h1.natgeo_allroads {
	background-position: 0 -375px;
}
section#work h1.natgeo_tv {
	background-position: 0 -400px;
}
section#work h1.screenplay {
	background-position: 0 -425px;
}
section#work h1.sierra {
	background-position: 0 -450px;
}
section#work h1.snowleopard {
	background-position: 0 -475px;
}
section#work h1.teldesign {
	background-position: 0 -500px;
}
section#work h1.wildwise {
	background-position: 0 -525px;
}
section#work h1.zoocapital {
	background-position: 0 -550px;
}
section#work h1.zoofood {
	background-position: 0 -575px;
}
section#work h1.zoomazium {
	background-position: 0 -600px;
}

section#work a#closebutton {
	position: absolute;
	top: 11px;
	right: 6px;
	height: 26px;
	width: 26px;
	background: url("../img/closebutton_icon.png") 0px 0px no-repeat;
}
section#work .lines_top {
	margin: 0 48px 0 48px;
	border-left: 1px solid #7D7D7D;
	height: 12px;
}
section#work .lines_main {
	margin: 0 48px 0 48px;
	border: 1px solid #7D7D7D;
	border-bottom: none;
}
section#work .lines_bottomborder {
	border-bottom: 1px solid #7D7D7D;
}

section#work .lines_left {
	float: left;
	position: relative;
	width: 535px;
	border-right: 1px solid #7D7D7D;
}
section#work .lines_right {
	float: left;
	position: relative;
	margin-left: -1px;
	width: 353px;
	border-left: 1px solid #7D7D7D;
}
section#work em.creditspopup,
section#work em.credits{
	position: absolute;
	right: 65px;
	bottom: 14px;
	z-index: 5000;
	background-color: white;
	color: #4A91CC;
	cursor: pointer;
}
section#work section#creditspopup,
section#work section#credits {
	width: 144px;
	min-width: 144px;
	padding: 8px;
	font-size: 10px;
	line-height: 14px;
	background-color: #4A91CC;
	color: white;
	border-color: #88B7DE;
	box-shadow: none;
	z-index: 4999;
}
section#work section#credits div.spacer,
section#work section#creditspopup div.spacer {
	background-color: white;
	height: 16px;
	margin: 8px -8px -8px -8px;
}
section#work section#creditspopup a,
section#work section#credits a {
	display: block;
	color: white;
	text-align: center;
}
section#work section#creditspopup a {
	font-size: 11px;
}
section#work nav {
	position: absolute;
	left: -17px;
	bottom: -36px;
	width: 1022px;
	background-color: white;
	border-top: 1px solid #88b7de;
	text-align: center;
}
html.ie7 section#work nav {
	bottom: -31px;
}

section#work nav div {
	display: inline-block;
	border: 1px solid #88b7de;
	border-top: none;
	height: 29px;
	padding: 0 35px;
	margin: 0 9px;
}
html.ie7 section#work nav div {
	float: left;
}
section#work nav a {
	display: inline-block;
	height: 15px;
	width: 15px;
	margin: 8px 0px 7px 1px;
	background: url("../img/slider_circle.gif") 0 0 no-repeat;
}
html.ie7 section#work nav a {
	margin-left: 2px;
	margin-right: 2px;
}
section#work nav a.selected {
	background-image: url("../img/slider_circle_filled.gif");
}
section#work nav a.leftarrow {
	height: 27px;
	width: 13px;
	margin: 0;
	background: url("../img/slider_leftarrow.gif") 0 0 no-repeat;
}
section#work nav a.rightarrow {
	height: 27px;
	width: 13px;
	margin: 2px 0 0 0;
	background: url("../img/slider_rightarrow.gif") 0 0 no-repeat;
}
html.ie7 section#work nav a.leftarrow, html.ie7 section#work nav a.leftarrow {
	float: left;
}
section#work nav span.placeholder {
	height: 27px;
	width: 13px;
}


section#work figure.rightcol_picture {
	display: inline-block;
	margin: 12px auto;
	text-align: left;
}
section#work div.video {
	width: 480px;
	margin: 12px auto 0 auto;
	text-align: left;
	font-size: 15px;
	line-height: 18px;
}
section#work div.video p {
	margin: 14px 0 10px 0;
}
section#work figcaption {
	font-size: 12px;
	margin-top: 8px;
}
section#work figcaption em {
	font-style: italic;
	color: #797A7B;
}
section#work figure.filmstrip {
	margin: 12px 0 0 49px;
}
section#work figure.filmstrip figcaption {
	font-size: 14px;
	margin-top: 3px;
}
section#work p.blacklabel {
	position: absolute;
	top: 0;
	left: 0;
	color: white;
	background-color: black;
	padding: 0 12px;
	margin: 0;
	font-size: 12px;
	line-height: 18px;
}

section#work section#copyright {
	position: absolute;
	bottom: -55px;
	width: 100%;
}


/*=== popup links ===*/
em.popup {
	cursor: pointer;
}


section.popup {
	position: absolute;
	top: 0;
	left: -999em;
	background-color: #7CB0DA;
	border: 1px solid #B5C8D6;
	box-shadow: 27px 27px 54px #B5B8D8;
	color: white;
	max-width: 340px;
	padding: 27px;
	text-align: left;
}
section.popup p {
	margin: 0;
}
section.popup p.second {
	margin-top: 1em;
}
section.popup ul {
	font-size: 13px;
	line-height: 22px;
	margin: 0;
	list-style-type: none;
	white-space: nowrap;
}
section.popup a.close {
	position: absolute;
	top: 0px;
	right: 3px;
	color: white;
	text-decoration: none;
	cursor: pointer;
}
section.popup a.close:hover {
	color: white;
	text-decoration: none;
}


@media screen and (max-width: 720px) {
	body {
		color: red;
	}
}


.vjs-default-skin .vjs-fullscreen-control {
	display: none;
}
.vjs-default-skin .vjs-volume-control {
	margin-right: 10px;
}
.vjs-default-skin .vjs-big-play-button {
	display: none;
}
.vjs-default-skin .vjs-controls {
	visibility: visible;
	opacity: 1;
}

#hack {
	position: absolute;
	top: -16px;
	right: -9px;
	height: 20px;
	width: 8px;
	background-color: white;
}


#demoreelwrapper {
	position: absolute;
	top: 15px;
	left: 264px;
	box-shadow: 27px 27px 54px #333;
	background-color: black;
	padding-top: 20px;
	display: none;
}
#demoreelwrapper #closebutton {
	position: absolute;
	top: 2px;
	right: 4px;
	color: white;
	cursor: pointer;
}
#demoreelwrapper #closebutton:hover {
	text-decoration: none;
}
#demoreellink {
	cursor: pointer;
}