@charset "utf-8";

@media all {

/* "Yahoo! UI Library: Reset CSS" =================================== */

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
more info: http://developer.yahoo.com/yui/reset/
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

html {overflow-y: scroll;}

body {
/*	background: #f2f4f6 url(../images/bodybg.gif) 0 0 repeat-y; */
	background: #fff; 
	color: #7b96a3; 
    font: 87.5% "trebuchet ms", arial, helvetica, sans-serif; text-align: left; 
    }
    
input, textarea, select { font-family: arial, helvetica, sans-serif; }

#wrapper { width: 980px; position: relative; }

a { color: #95acb7; }
a:hover { color: #afc1ca; }

h1 a { display: block; width: 175px; height: 420px; text-indent: -999em; background: url(../images/op-logo-small.gif) 0 0 no-repeat; position: absolute; top: 0; left: 0; }

h2#strap { position: absolute; background: url(../images/we-tell.gif) 0 0 no-repeat; width: 388px; height: 21px; text-indent: -999em; top: 128px; right: 0; display: none; }

#nav { position: absolute; top: 453px; left: 0; width: 130px; }
#nav li { width: 130px; margin-bottom: 10px; height: 12px; }
#nav li a { background-position: 0 0; background-repeat: 0 0; display: block; height: 12px; text-indent: -999em; outline: none; }
#nav li#work a { background-image: url(../images/our-work.gif); width: 62px; margin-left: 68px; }
#nav li#clients a { background-image: url(../images/our-clients.gif); width: 73px; margin-left: 57px; }
#nav li#brand a { background-image: url(../images/brand-stories.gif); width: 87px; margin-left: 43px; }
#nav li#stories a { background-image: url(../images/our-stories.gif); width: 72px; margin-left: 58px; }
#nav li#contact a { background-image: url(../images/contact.gif); width: 53px; margin-left: 77px; }
#nav li#pov a { background-image: url(../images/points-of-view.gif); width: 93px; margin-left: 37px; }
#nav li a:hover { background-position: 0 -12px; }
#nav li.active a { background-position: 0 -24px; }

#maincol { margin: 0 0 0 194px; padding-top: 160px; width: 786px; overflow: auto; margin-bottom: 40px; }
#subnav { width: 132px; margin-right: 10px; float: left; display: inline; }
#content { width: 644px; float: left; position: relative; }

#subnav li { font-size: 0.857em; line-height: 1; margin-bottom: 4px; }
#subnav li a { text-decoration: none; }
#subnav li.current_page_item a { color: #f7931d; font-weight: bold;}

#content #slideshow { margin-bottom: 21px; width: 644px; height: 483px; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }

#content h2 { font-size: 1.714em; font-weight: bold; color: #7c96a3; font-weight: normal; line-height: 1; margin-bottom: 9px; margin-bottom: 20px; }
#content p { font-size: 0.857em; line-height: 1.5; color: #7d98a4; margin-bottom: 6px; }
#content small { font-size: 90%; }

#content .work-content h2 { font-size: 1.24em; margin-bottom: 4px; }

.project-nav { margin-top: 20px; background: url(../images/dots.gif) 0 0 repeat-x; width: 644px; padding-top: 5px; overflow: auto; clear: both; }
.project-nav .previous-text { width: 322px; float: left; }
.project-nav .next-text { width: 322px; float: right; }
.project-nav a { line-height: 1.5; color: #7d98a4; text-decoration: none; outline: none; }
.project-nav a.next { float: right; }
.project-nav a:hover { color: #f7931d; }

#slide1 img { float: right; }
#slide1 .text-block { float: left; width: 316px; }
#slide2 img { float: right;  }
#slide2 .text-block { float: left; width: 316px; }
#slide3 img { float: right; }
#slide3 .text-block { float: left; width: 316px; }

#slide1 img.alignnone { }

.nav-buttons { margin-top: 20px; background: url(../images/dots.gif) 0 0 repeat-x; padding-top: 5px; width: 316px; }
.nav-buttons .next-button { float: right; text-align: right; width: 158px; } 
.nav-buttons .previous-button { float: left; text-align: left; width: 158px; } 
.nav-buttons a { line-height: 1.5; color: #7d98a4; text-decoration: none; outline: none; }
.nav-buttons a:hover { color: #f7931d; }

#thumbs { position: relative; width: 784px; height: 587px; overflow: hidden; margin-left: 2px; }
.thumb { position: absolute; width: 124px; height: 111px; z-index: 200; overflow: hidden; display: none; }
.title { position: absolute; top: 111px; left: 0px; width: 124px; height: 111px; }
.title a { display: block;	position: relative;	width: 124px; height: 111px; text-decoration: none; color: #fff; }
.title a span { padding: 8px 10px; position: absolute; bottom: 0; left: 0; text-decoration: none; font-size: 1.071em; line-height: 1.1; cursor: pointer; background: url(../images/trans.png); width: 104px; color: #fff; }
#thumb1 { top: 0; left: 0; }
#thumb2 { top: 0; left: 132px; }
#thumb3 { top: 0; left: 264px; }
#thumb4 { top: 0; left: 396px; }
#thumb5 { top: 0; left: 528px; }
#thumb6 { top: 0; left: 660px; }
#thumb7 { top: 119px; left: 0; }
#thumb8 { top: 119px; left: 132px; }
#thumb9 { top: 119px; left: 264px; }
#thumb10 { top: 119px; left: 396px; }
#thumb11 { top: 119px; left: 528px; }
#thumb12 { top: 119px; left: 660px; }
#thumb13 { top: 238px; left: 0; }
#thumb14 { top: 238px; left: 132px; }
#thumb15 { top: 238px; left: 264px; }
#thumb16 { top: 238px; left: 396px; }
#thumb17 { top: 238px; left: 528px; }
#thumb18 { top: 238px; left: 660px; }
#thumb19 { top: 357px; left: 0; }
#thumb20 { top: 357px; left: 132px; }
#thumb21 { top: 357px; left: 264px; }
#thumb22 { top: 357px; left: 396px; }
#thumb23 { top: 357px; left: 528px; }
#thumb24 { top: 357px; left: 660px; }
#thumb25 { top: 476px; left: 0; }
#thumb26 { top: 476px; left: 132px; }
#thumb27 { top: 476px; left: 264px; }
#thumb28 { top: 476px; left: 396px; }
#thumb29 { top: 476px; left: 528px; }
#thumb30 { top: 476px; left: 660px; }

.work-page-thumb { float: left; width: 124px; height: 111px; position: relative; overflow: hidden; margin: 0 8px 8px 0; }
.work-page-thumb.thumb6, .work-page-thumb.thumb12, .work-page-thumb.thumb18, .work-page-thumb.thumb24, .work-page-thumb.thumb30, .work-page-thumb.thumb36, .work-page-thumb.thumb42, .work-page-thumb.thumb48, .work-page-thumb.thumb54, .work-page-thumb.thumb60, .work-page-thumb.thumb66, .work-page-thumb.thumb72, .work-page-thumb.thumb78, .work-page-thumb.thumb84, .work-page-thumb.thumb90 { margin-right: 0; }


#we-tell-text { position: absolute; top: 0; left: 0; width: 388px; height: 111px; display: block; background: url(../images/we-tell-large.gif) 0 0 no-repeat; z-index: 100; text-indent: -999em; display: none; }

#brand-stories-text { position: absolute; top: 238px; left: 132px; width: 652px; height: 111px; display: block; background: url(../images/brand-stories-large.gif) 0 0 no-repeat; z-index: 100; text-indent: -999em; display: none; }

#through-design-text { position: absolute; top: 476px; left: 0; width: 784px; height: 111px; display: block; background: url(../images/through-design-large.gif) 0 0 no-repeat; z-index: 100; text-indent: -999em; display: none; }

#contact-details { width: 384px; float: left; margin-right:40px; display: inline; }
#content #contact-details h2#contact-header { background: url(../images/h-contact.gif) 0 0 no-repeat; width: 84px; height: 18px; margin-bottom: 20px; text-indent: -999em; }

#contact-details p { margin-bottom: 1em; }
#contact-details p.reg-info { font-size: 80%; }
#contact-details img { float: right; margin-right: 13px; display: inline; }

#contact-blocks { width: 220px; float: left; }
#contact-blocks p a { text-decoration: none; }
#contact-blocks .map { background: url(../images/map-bg.gif) 0 0 no-repeat; width: 220px; height: 44px; padding-top: 73px; margin-bottom: 28px;}
#contact-blocks .join { background: url(../images/join-us-bg.jpg) 0 0 no-repeat; width: 220px; height: 72px; padding-top: 48px; margin-bottom: 28px;}
#contact-blocks .contact { background: url(../images/contact-bg.jpg) 0 0 no-repeat; width: 220px; height: 54px; padding-top: 58px; margin-bottom: 28px;}
#contact-blocks .newsletter { background: url(../images/newsletter-bg.jpg) 0 0 no-repeat; width: 220px; height: 68px; padding-top: 30px; margin-bottom: 28px;}

#content h2#points-of-view-header { background: url(../images/h-points-of-view.gif) 0 0 no-repeat; width: 147px; height: 18px; margin-bottom: 20px; text-indent: -999em; }

ul.pov-items li { width: 209px; float: left; position: relative; min-height: 59px; background: url(../images/dots.gif) bottom left repeat-x; padding-right: 73px; margin: 0 40px 25px 0; display: inline; }
ul.pov-items li .image { position: absolute; bottom: 1px; right: 0; width: 73px; }
ul.pov-items li h3 { margin-bottom: 3px; }
#content ul.pov-items li p { font-size: 0.785em; line-height: 1.27; margin-bottom: 9px; }
#content ul.pov-items li p a { color: #f7941d; }
#content ul.pov-items li p a:hover { color: #f7b15c; }

/* scrollable root element */
#slides { min-height: 1000px; margin:0 auto; width:644px; overflow:hidden; position:relative; }  
#slides .items { width:20000em;	clear:both;	 position:absolute;	 }
#slides .page {	width:644px; float:left;}

#brand-story-slides { height:600px; margin:0 auto; width:786px; overflow:hidden; position:relative; }  
#brand-story-slides .items { width:20000em;	clear:both;	position:absolute;	 }
#brand-story-slides .page {	width:786px; float:left;}

#slides #slide2 img { float: none; margin: 0; }

.story-slide h3, #content #slides h2 { font-size: 1.142em; margin-bottom: 9px; line-height: 1.3125; color: #f7931d; }
.story-slide p { font-size: 1em; line-height: 1.5; margin-bottom: 9px; }

.client-list li { margin: 0 0 10px 0; font-size: 1.245em; color: #f7941d; line-height: 1; }

}