/*-----------------------------------------------------------------------------
Title: Two Twelve Main Style Sheet
Validation: This CSS document validates for conformance to W3C recommendations. Validate upon changes - http://jigsaw.w3.org/css-validator
-----------------------------------------------------------------------------*/

/* Global Resets - remove browser-specific defaults
====================================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	}
:focus {
	outline:none;
	}
ol,ul {
	list-style:none;
	}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse:collapse;
	}
caption, th, td {
	text-align:left;
	font-weight:normal;
	}
	
/* =GENERAL
====================================================================================== */
html {
  height:100%;
	}
body {
	height:100%;
	background:#fff;
	color:#7e7e7e;
	font:normal 62.5%/1.4 Tahoma, Geneva, sans-serif; /* set up 1em = 10px (at standard browser default settings of 16px) */
	}

p {margin:0 0 1em;}
strong {font-weight:bold;}
em {font-style:italic;}
sup {font-family:"Lucida Sans Unicode";}

/* =TYPOGRAPHY
====================================================================================== */
/* COLOR GUIDE
#7e7e7e - main body text
#262626 - headlines
#2b2b2b - darker non-header text, links
*/

/* top level font-size setting // 1.2em = 12px */
div#container {
	font-size:1.2em;
	}

/* Header Defaults
------------------------------------------------------*/
/* h2 */
h2 {
	margin-bottom:1em;
	color:#262626;
	font-size:1.25em;
	font-weight:bold;
	line-height:1;
	}

/* search results page h2 has some unique tweaks */	
body#searchPage h2 {
	color:#7e7e7e;
	font-size:1em;
	font-weight:normal;
	}
body#searchPage h2 em {
	display:block;
	margin:.5em 0;
	color:#262626;
	font-size:1.25em;
	font-style:normal;
	font-weight:bold;
	line-height:1.15em;
	}

body#news div#mainText h2,
body#about div#mainText h2 {
	margin-top:.75em;
	}

body#about div#mainText h2 em {
        display: block;
        margin-top: 0.4em;
        font-size: 0.6em;
        font-style: normal;
        font-weight: normal;
        text-transform: uppercase;
        }

/* h3 */
h3 {
     	color:#2b2b2b;
	line-height:1em;
	}
div.entry h3 {
	font-weight:normal;
	text-transform:uppercase;
	}
#skipLink {display: none;}

/* @LINKS 
====================================================================================== */
/* Defaults */
a, a:link {text-decoration:none; background:transparent;}
a:visited {text-decoration:none;}
a:hover   {text-decoration:none;}
a:active  {text-decoration:underline;}

/* home page menu */
body#home ul a, body#home ul a:link {color:#fff;}
body#home a:hover {text-decoration:underline;}

/* main menu */
ul#nav a, ul#nav a:link,
ul#nav li.selected a,
ul#nav li.selected li a, 
ul#nav li.selected li a:link,
ul#nav li.selected li.selected li a, 
ul#nav li.selected li.selected li a:link,
ul#nav li.selected li.selected li.selected li a,
ul#nav li.selected li.selected li.selected li a:link {color:#7d7d7d;}
ul#nav a:hover, ul#nav li.selected a,
ul#nav li.selected li a:hover, ul#nav li.selected li.selected a,
ul#nav li.selected li.selected li a:hover, ul#nav li.selected li.selected li.selected a,
ul#nav li.selected li.selected li a:hover, ul#nav li.selected li.selected li.selected li.selected a,
ul#nav li.selected li.selected li.selected li a:hover {color:#252525;}

ul#nav a, ul#nav a:link,
ul#nav li.sf-breadcrumb a,
ul#nav li.sf-breadcrumb li a, 
ul#nav li.sf-breadcrumb li a:link,
ul#nav li.sf-breadcrumb li.sf-breadcrumb li a, 
ul#nav li.sf-breadcrumb li.sf-breadcrumb li a:link,
ul#nav li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb li a,
ul#nav li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb li a:link {color:#7d7d7d;}
ul#nav a:hover, ul#nav li.sf-breadcrumb a,
ul#nav li.sf-breadcrumb li a:hover, ul#nav li.sf-breadcrumb li.sf-breadcrumb a,
ul#nav li.sf-breadcrumb li.sf-breadcrumb li a:hover, ul#nav li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb a,
ul#nav li.sf-breadcrumb li.sf-breadcrumb li a:hover, ul#nav li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb a,
ul#nav li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb li a:hover {color:#252525;}

/* ul#nav li.sf-breadcrumb >a{color: #252525 } */


/* body text links */
div#mainText a, 
div#subContent a, 
div#sideText a, 
div#mostRecent a,
div#mainText a:visited, 
div#subContent a:visited, 
div#sideText a:visited, 
div#mostRecent a:visited {color:#2b2b2b;}

div#mainText a:hover, 
div#subContent a:hover, 
div#sideText a:hover, 
div#mostRecent a:hover {text-decoration:underline;}
	
/* projects lists */
ul.projectsList {margin:0; padding:0;}
ul.projectsList li {margin-bottom: 1em;}

ul.projectsList li a,
ul.projectsList li a:link,
ul.projectsList li a:visited, 
div#subContent .projectsList li a, 
div#subContent .projectsList li a:link, 
div#subContent .projectsList li a:visited {color:#7e7e7e;}
.projectsList li a:hover {text-decoration:underline;}

/* vcard links on contacts page */
div#mainText dl.vcard a, div#mainText dl.vcard a:link{color:#7d7d7d;}

/* searchResults list on search results page */
ul#searchResults dt a {color:#2b2b2b;}	
ul#searchResults dt a:hover {text-decoration:underline}	

/* sitemap list */
ul#sitemap li a {color:#2b2b2b;}
ul#sitemap ul ul li a {color:#7e7e7e;}
ul#sitemap li a:hover {text-decoration:underline;}

/* PRIMARY @LAYOUT DIVS
====================================================================================== */
div#container {
	min-height:100%;
	}
body#work.level1 #container-bg,
body#news #container-bg,
body#about #container-bg {
        position:absolute;
        width:50%;
        height:482px;
        right:0;
        background:#fff url(/images/bg-bars.png) 100% 0 repeat-x;
        z-index:-1;
        }
div#masthead {
	width:100%;
	background:url(/images/bg-head.png) 0 100% repeat-x;
	}
div#content {
	margin:0 auto;
	width:952px;
	padding:14px 0 4em;
        background:#fff;

	}
body#work.level1 div#content,
body#news div#content,
body#about div#content {
	margin:0 auto;
	width:952px;
	padding:0 0 4em;
	}
div#footer { /* sticky - fixed to the bottom of the browser via height & negative margin */
	padding-left: 10px; 
	margin-top:-3.2em;
	min-height:3.2em;
	background:#545454;
    white-space: nowrap; /* don't allow the footer to wrap */
	}
/* footer */

div#footer a, div#footer a:link {color:#989898;}
div#footer a:hover, div#footer a:active {text-decoration:underline;}

/* @HOME - specific home page styles
====================================================================================== */
body#home {
	background:#666 url(/images/bg-bodytile.png) 0 0 repeat;
	}

body#home div#splashNav {
	width:100%;
	height:485px;
	background:url(/images/bg-bars.png) 0 0 repeat-x;
	}
body#home div#splashNav ul {
        width:952px;
        height:485px;
        margin:0;
        padding:0;
	background:url(/images/home/splash-nav.jpg) 0 0 repeat-x;
        }

body#home div#splashNav ul.splashNavDesign {
        background-position: 0 -485px;
        }

body#home div#splashNav ul.splashNavFor {
        background-position: 0 -970px;
        }

body#home div#splashNav ul.splashNavA {
        background-position: 0 -1455px;
        }

body#home div#splashNav ul.splashNavBetter {
        background-position: 0 -1940px;
        }

body#home div#splashNav ul.splashNavExperience {
        background-position: 0 -2425px;
        }

body#home div#splashNav ul li {
        display: block;

        width: 952px;
        height: 96px;
        margin:0;
        padding:0;                                          
        }

body#home div#splashNav ul li a {
        display: block;

        width: 952px;
        height: 96px;
        margin:0;
        padding:0;

        font-size: 95px;
        line-height: 95px;
        font-weight: bold;
        color: #fff;
	text-indent:-9999px;
        }


body#home div#branding {
	width:952px;
	min-height:145px;
	background:#666 url(/images/bg-branding-home.png) 0 0 no-repeat;
	}
body#home h1 {
	float:left;
	width:224px;
	height:46px;
	background:url(/images/logo-home.png) 0 0 no-repeat;
	text-indent:-9999px;
	}
body#home ul {
	float:left;
	margin-top:15px;
	}
body#home ul li {
	margin:.5em 0 0;
	font-size:1.1em;
	letter-spacing:.125em;
	line-height:normal;
	text-transform:uppercase;
	}	

body#home div#branding div#news {
        float: right;
        margin-top: 20px;
	width:460px;
        text-align: right;
	}

body#home div#branding div#news h2 {
        margin: 0;
        padding: 0;

	font-size:1.1em;
	line-height:normal;
        font-weight: normal;

	color:#c7ac5b;
        }

body#home div#branding div#news h3 {
        margin: 0;
        padding: 0;

	font-size:1.1em;
	line-height:normal;
        font-weight: bold;
        }

body#home div#branding div#news h3 a, body#home div#branding div#news h2 a {
	color:#c7ac5b;
        }

/* @MASTHEAD - Includes Branding, Utility Nav, Main Navigation
====================================================================================== */
div#masthead div {
	margin:0 auto;
	width:952px;
	background:url(/images/bg-head.png) 0 100% repeat-x; /* repeat bg image, address horizontal scrolling bug */
	padding-bottom: 10px; /* create min distance from color bars */
	padding-left: 10px;
	}

/* @logo
------------------------------------------------------*/
div#masthead h1 {
	margin-right:30px;
	float:left;
	position:relative;
	overflow:hidden;
	width:188px;
	height:50px;
	}
div#masthead h1 i {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(/images/logo.png);
	cursor:pointer;
	}

/* @nav 
------------------------------------------------------*/
ul#nav {
	position:relative; /* set positioning context */
	float:left;
	margin-top:22px;
	width:6.4em; /* offset sub-menu left positioning by same value */
	min-height:9.65em;
	}
ul#nav li {
	margin:0 0 .7em;
	font-size:11px;
	letter-spacing:1px;
	line-height:10px;
	text-transform:uppercase;
	}

/* Hide all unselected by default */
ul#nav ul,                            /* Hide all 2nd cols */
ul#nav li.selected ul ul,             /* Hide all 3rd cols */
ul#nav li.selected li.selected ul ul  /* Hide all 4th cols */
{ display: none; }

ul#nav li.selected ul,                        /* Show selected 2nd col */
ul#nav li.selected li.selected ul,            /* Show selected 3rd col */
ul#nav li.selected li.selected li.selected ul /* Show selected 4th col */
{ display: block; }

ul#nav ul,                            /* Hide all 2nd cols */
ul#nav li.sf-breadcrumb ul ul,             /* Hide all 3rd cols */
ul#nav li.sf-breadcrumb li.sf-breadcrumb ul ul  /* Hide all 4th cols */
{ display: none; }

ul#nav li.sf-breadcrumb ul,                        /* Show selected 2nd col */
ul#nav li.sf-breadcrumb li.sf-breadcrumb ul,            /* Show selected 3rd col */
ul#nav li.sf-breadcrumb li.sf-breadcrumb li.sf-breadcrumb ul /* Show selected 4th col */
{ display: block; }

/* 2nd level submenu */
ul#nav ul {
	position:absolute;
	top:0;
	left:6.4em;
	width:auto; /* auto seems to work just as well as an EM value with the added benefit of fixing a bug in the dynamic menu */
	min-height:10.5em; /* value = poke & hope, pure coincidence it equals width value */
	background:url(/images/bg-menu-divider.png) 0% 100% no-repeat;
	}
ul#nav ul li {
	padding-left:20px;
	white-space:nowrap;
	}
/* 3rd level submenu */
ul#nav ul ul {
	left:10.5em;
	}
ul#nav ul ul li {
	padding-left:15px;
	}
/* 4th level submenu */
ul#nav ul ul ul { left:12em; }

/* Override 3rd/4th level for work/by market */
ul#nav ul li.by-market ul ul { left:24em; }

/* Override 3rd/4th level for work/by service */
ul#nav ul li.by-service ul ul { left:18em; }

/* Allow text in 3rd/4th column pager to wrap */
ul#nav ul li ul.pager { 
	width:20em;
}
ul#nav ul li ul.pager li {
	line-height: 12px;
	white-space:normal;
}


/* Never display children of a page, let JS handle that */
#masthead ul#nav ul.pager li {
	display: none;
}

#masthead ul#nav ul.pager li a.disabled:hover, /* Use #masthead, to be sure that this rule is more specific then rules above */
#masthead ul#nav ul.pager li a.disabled:active,
#masthead ul#nav ul.pager li a.disabled:link,
#masthead ul#nav ul.pager li a.disabled {
	color:#b9b9b9;
        cursor:default;
        text-decoration: none;
}

ul#nav li.pager { 
	text-transform: none;
}

	
/* @search 
------------------------------------------------------*/
form.cse-search-box {
	float:right;
	margin-top:105px;
	width:135px;
	}
form.cse-search-box input#q {
	display:block;
	width:130px;
	padding-left:3px;
	border:1px solid #c5c7c9;
	}
form.cse-search-box input#sa {
	margin:-2px 0 0 0;
	float:right;
	width:auto;
	background:none;
	padding:0;
	border:none;
	color:#989898;
	font-size:.83em;
	letter-spacing:-.5px;
	line-height:.75em;
	text-align:right;
	cursor:pointer;
	}

/* @CONTENT
====================================================================================== */	
/* @mainText area 
------------------------------------------------------*/
div#mainText {
	float:left;
	width:188px;
	padding-left:10px;
	}
body#about div#mainText,
body#news div#mainText,
body#work div#mainText,
body#contact div#mainText {
	float:left;
	width:290px;
	padding-right:10px;
	}

/* lists in general content */
div#mainText ul { 
        list-style-position: outside;
        list-style-type: disc;
}
div#mainText ul li { 
        margin: 0 0 1em 1.25em;
        padding: 0 0 0 0.5em;
}

/* project type icons */
div#mainText ul#icons,
div#mainText ul#iconCaptions {
        list-style:none;
        }

div#mainText ul#icons li,
div#mainText ul#iconCaptions li {
	margin:0;
        padding:0;
        }

div#mainText ul#icons {
	float:left;
	margin:-.5em 0 .25em;
	width:288px;
	}
div#mainText ul#icons li {
	float:left;
	margin-right:3px;
	width:24px;
	}

/* project type icons */
div#mainText ul#iconCaptions {
	clear:both;
	margin:0 0 1em;

	width:288px;
        height:1.4em;
	}
div#mainText ul#iconCaptions li {
	font-size:.92em;
	font-weight:bold;
	line-height:1.4em;

        display: none;
	}

div#mainText h2.icon { 
        padding-left: 30px;
        line-height: 30px;
        }

body.sustainable-design div#mainText h2.icon { 
        background: url(/images/icon-sustainable-design.gif) 0 0 no-repeat;
        }
body.wayfinding div#mainText h2.icon { 
        background: url(/images/icon-wayfinding.gif) 0 0 no-repeat;
        }
body.information-design div#mainText h2.icon { 
        background: url(/images/icon-information-design.gif) 0 0 no-repeat;
        }
body.visioning div#mainText h2.icon { 
        background: url(/images/icon-visioning.gif) 0 0 no-repeat;
        }

body.sustainable-design div#mainText h2.icon,
div#mainText ul#iconCaptions li.sustainable-design {
	color:#95c761;
	}
body.wayfinding div#mainText h2.icon,
div#mainText ul#iconCaptions li.wayfinding {
	color:#53bcd5;
	}
body.information-design div#mainText h2.icon,
div#mainText ul#iconCaptions li.information-design {
	color:#cb5d9f;
	}
body.visioning div#mainText h2.icon,
div#mainText ul#iconCaptions li.visioning {
	color:#ee8625;
	}

/* image and caption 
------------------------------------------------------*/
div#imageBox {
	float:right;
	width:639px;
	padding-left:0;
	}	
div#imageBox img {
        border: 1px solid #ccc;
	}	

div#imageCaptionBox {
	float:right;
	width:639px;
	padding-left:0;
	}	
div#imageCaptionBox img {
	width:639px;
	line-height:1em;
	}
div#imageCaptionBox p {
	float:left;
	margin-top:.5em;
	font-size:.92em;
	line-height:1em;

        width: 509px;
	}

div#imageCaptionBox-Caption {
        float: left;

        width: 509px;
        height: 3em;
	}

div#imageCaptionBox-Caption p {
	margin-top:0;
	}

/* image rotation / pagination */	
div#imageCaptionBox div.pagination {
	float:right;
	}
div#imageCaptionBox div.pagination em {
	float:left;
	margin-right:.5em;
	color:#2b2b2b;
	font-size:11px;
	font-style:normal;
	}
div#imageCaptionBox div.pagination ul {
	float:left;
	color:#2b2b2b;
	font-size:11px;
	}
div#imageCaptionBox div.pagination li.prev {
	float:left;
	margin-right:.3em;
	}
div#imageCaptionBox div.pagination li.next {
	float:left;
	}	
div#imageCaptionBox div.pagination li a,
div#imageCaptionBox div.pagination li a:link {
	display:block;
	margin-top:0;
	width:auto;
	padding:0 .3em .2em;
	background:#fff;
	border:1px solid #2b2b2b;
	color:#2b2b2b;
	font-size:10px;
	line-height:normal;
	text-align:center;
	}
div#imageCaptionBox div.pagination li a:hover { /* not specified by mock-ups, edit as needed */
	color:#fff;
	background-color:#69C;
	}
div#imageCaptionBox div.pagination li.end a,
div#imageCaptionBox div.pagination li.end a:link,
div#imageCaptionBox div.pagination li.end a:hover {
	background:#fff;
	border-color:#ccc;
	color:#ccc;
	cursor:default;
	}

div#sideText {
	float:right;
	width:733px;
	}

body#work div#sideText,
body#contact div#sideText {
	float: right;
        width: 633px;
	}

body#contact div#sideText.careers ul {
	margin-bottom: 15px;
	}
	
body#contact div#sideText.careers li {
	list-style-type: disc;
	margin-left: 15px;
	}

/* @searchResults - lists on search results page
------------------------------------------------------*/
div#searchResults {
	float:right;
	width:400px;
	padding:0 333px 0 31px;
	}	
ul#searchResults {
	float:right;
	width:400px;
	padding:0 333px 0 31px;
	}	
ul#searchResults li {
	background:url(/images/bg-list-dash.png) 0 0 no-repeat;
	padding:16px 0 0;
	color:#7d7d7d;
	font-size:1.25em;
	font-weight:bold;
	line-height:.5em;
	}
ul#searchResults dl {
	margin:0 0 3em;
	font-size:.8em;
	font-weight:normal;
	line-height:1.2em;
	}
ul#searchResults dt {
	width:240px;
	margin:.8em 0 0;
	text-transform:uppercase;
	}
ul#searchResults dd {
	}

/* @sitemap - list on sitemap page
------------------------------------------------------*/
ul#sitemap {
	float:right;
	margin:0 0 0 188px;
	width:733px;
	padding:0 0 0 31px;
	}	
ul#sitemap li {
	margin-bottom:.8em;
	color:#2b2b2b;
	font-size:1.25em;
	font-weight:bold;
	line-height:1.2em;
	}
ul#sitemap ul {
	font-size:.8em;
	}
ul#sitemap ul li {
	margin:.4em 0;
	color:#2b2b2b;
	font-size:1em;
	font-weight:normal;
	}
ul#sitemap ul ul li {
	font-size:1.25em;
	text-indent:1.25em;
	}
	
ul#sitemap ul ul ul li {
	font-size:1.25em;
	text-indent:2.5em;
	}
ul#sitemap ul ul ul li:before {
        content: "- ";
        }
	
/* @subContent - spanning full width of content area
------------------------------------------------------*/
div#subContent {
        float: right;
        margin: 2em 0 0 0;
        width: 638px;
	}

body#work.level2 div#subContent {
        margin-top: 0;
        }

/* @mostRecent - as on Featured News, News Archive, Awards
------------------------------------------------------*/
div#mostRecent {
	float:right;
	margin:2em 333px 0 0;
	width:400px;
	}
em.dateStamp {
	font-style:normal;
	}
div#mostRecent em.dateStamp {
	color:#2b2b2b;
	}
	
/* @projectsList - projects listed in columns as on 'by industry' page
------------------------------------------------------*/
div.projectsList {
	float:right;
	width:638px;
	}
div.projectsList ul {
	float:left;
	margin-right:2.5em;
	width:auto;
	}	
div.projectsList ul li {
	margin:0 0 1em;
	}

/* @Contacts page
------------------------------------------------------*/
/* vCard */
dl.vcard {
	color:#7d7d7d;
	line-height:1.2em;
	}
dl.vcard dt {
	margin-top:1em;
	font-weight:bold;
	}
dl.vcard dt.org {
	margin:0;
	color:#252525;
	font-size:1em;
	}
dl.vcard em {
	font-style:normal;
	}
dl.vcard dd.adr {
	margin-bottom:1em;
	}
/* direx */
div.direx {
	float:right;
	margin-right:318px; /* TODO: fix for IE6; */
	width:415px;	
	}

div#locationMap {
        /*position: absolute;*/
	/*float:top;*/
	/*width:733px;*/
        width:500px;
	padding-left:31px;

	}	
div#locationMap img {
	line-height:1em;
	margin-left: 220px;
	}


/* @About pages, @aside area 
------------------------------------------------------*/
div#aside {
	position:relative; /* setup pos context */
	float:right;
	width:642px;
	height:482px;
	background-position:100% 0;
	background-repeat:no-repeat;
	}
/* #aside bg image may need to be changed per page reqs - add & use unique class/id combos to target as needed */	
body.company div#aside {background-image:url(/images/subnav/bg-about-aside.png);}
body.people div#aside {background-image:url(/images/subnav/bg-about-aside-people.png);}
body.process div#aside {background-image:url(/images/subnav/bg-about-aside-process.png);}

body.david-gibson div#aside,
body.ann-harakawa div#aside,
body.sarah-haun div#aside,
body.jim-plattner div#aside,
body.directors div#aside,
body.leadership div#aside {background:0;}

body.collaborators div#aside {background-image:url(/images/subnav/bg-about-aside-collaborators.png);}

body.two-twelve-day div#aside {background-image:url(/images/subnav/bg-stories-aside.png);}
body.the-wayfinding-handbook div#aside {background-image:url(/images/subnav/bg-about-aside-wayfinding.png);}

body#news div#aside {background-image:url(/images/subnav/bg-news-aside.png);}
	
/* aside nav section */
ul.navSection {
	position:absolute;
	top:288px;
	left:0;
	width:100%;
	height:194px;
	}
/* image replacement setup */	
ul.navSection li {
	position:relative;
	float:right;
	clear:right;
	}
ul.navSection li * {
	display:block;
	width:100%;
	height:100%;
	}
ul.navSection li i {
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
	}

/* ABOUT MENU IR */
body#about div#aside.navMenu {
	width:952px;
        background: url(/images/subnav/bg-about-menu.png);
        background-repeat: no-repeat;
	}
/* aside nav section */
ul.navMenu {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:482px;

        cursor: pointer;
	}

/* setting the text as follows eliminates the flicker that would
   occur when text is replaced by image */
ul.navMenu a, 
ul.navMenu a:hover, 
ul.navMenu a:visited, 
ul.navMenu a:link { color: #fff; font-size: 1px; }

/* image replacement setup */	
ul.navMenu li {
	position:relative;
	float:right;
	clear:right;
        font-size: 0.9em;
	}
ul.navMenu li * {
	display:block;
	width:100%;
	height:100%;
	}
ul.navMenu li i {
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
	}

body#about ul#nav-menu-about li {
	width:952px;
	}
body#about ul#nav-menu-about li i {
	background-image:url(/images/subnav/bg-about-menu.png);
	background-repeat:no-repeat;
	}	

li#nav-mi-about-company {height:94px; margin-bottom: 100px;}
li#nav-mi-about-company i {background-position:0 0;}
li#nav-mi-about-company a:hover i, 
li#nav-mi-about-company.selected a i {background-position:100% 0;}

li#nav-mi-about-people {height:94px; margin-bottom: 100px;}
li#nav-mi-about-people i {background-position:0 -194px;}
li#nav-mi-about-people a:hover i, 
li#nav-mi-about-people.selected a i {background-position:100% -194px;}

li#nav-mi-about-stories {height:94px;}
li#nav-mi-about-stories i {background-position:0 -388px;}
li#nav-mi-about-stories a:hover i, 
li#nav-mi-about-stories.selected a i {background-position:100% -388px;}

/* ABOUT MENU > Company sub-menu IR */
body#about ul#nav-menu-about-company {
	width:73px;
        z-index:2;
        display: none;
	}
body#about ul#nav-menu-about-company.hover {
        display: block;
        }
body#about ul#nav-menu-about-company li {
	width:73px;
	}
body#about ul#nav-menu-about-company li i {
	background-image:url(/images/subnav/mi-about-company.png);
	background-repeat:no-repeat;
	}	
ul#nav-menu-about-company li#nav-mi-profile {height:16px;}
ul#nav-menu-about-company li#nav-mi-profile i {background-position:0 0;}
ul#nav-menu-about-company li#nav-mi-profile a:hover i, 
ul#nav-menu-about-company li#nav-mi-profile.selected a i {background-position:100% 0;}

ul#nav-menu-about-company li#nav-mi-mission {height:16px;}
ul#nav-menu-about-company li#nav-mi-mission i {background-position:0 -16px;}
ul#nav-menu-about-company li#nav-mi-mission a:hover i,
ul#nav-menu-about-company li#nav-mi-mission.selected a i {background-position:100% -16px;}

ul#nav-menu-about-company li#nav-mi-process {height:16px;}
ul#nav-menu-about-company li#nav-mi-process i {background-position:0 -32px;}
ul#nav-menu-about-company li#nav-mi-process a:hover i,
ul#nav-menu-about-company li#nav-mi-process.selected a i {background-position:100% -32px;}

ul#nav-menu-about-company li#nav-mi-history {height:13px;}
ul#nav-menu-about-company li#nav-mi-history i {background-position:0 -48px;}
ul#nav-menu-about-company li#nav-mi-history a:hover i,
ul#nav-menu-about-company li#nav-mi-history.selected a i {background-position:100% -48px;}

/* ABOUT MENU > People sub-menu IR */
body#about ul#nav-menu-about-people {
	width:137px;
        z-index:2;
        display: none;
	}
body#about ul#nav-menu-about-people.hover {
        display: block;
        }
body#about ul#nav-menu-about-people li {
	width:137px;
	}
body#about ul#nav-menu-about-people li i {
	background-image:url(/images/subnav/mi-about-people.png);
	background-repeat:no-repeat;
	}	
ul#nav-menu-about-people li#nav-mi-our-team {height:16px;}
ul#nav-menu-about-people li#nav-mi-our-team i {background-position:0 0;}
ul#nav-menu-about-people li#nav-mi-our-team a:hover i, 
ul#nav-menu-about-people li#nav-mi-our-team.selected a i {background-position:100% 0;}

ul#nav-menu-about-people li#nav-mi-leadership {height:16px;}
ul#nav-menu-about-people li#nav-mi-leadership i {background-position:0 -16px;}
ul#nav-menu-about-people li#nav-mi-leadership a:hover i,
ul#nav-menu-about-people li#nav-mi-leadership.selected a i {background-position:100% -16px;}

ul#nav-menu-about-people li#nav-mi-collaborators {height:16px;}
ul#nav-menu-about-people li#nav-mi-collaborators i {background-position:0 -32px;}
ul#nav-menu-about-people li#nav-mi-collaborators a:hover i,
ul#nav-menu-about-people li#nav-mi-collaborators.selected a i {background-position:100% -32px;}

/* ABOUT MENU > Stories sub-menu IR */
body#about ul#nav-menu-about-stories {
	width:240px;
        z-index:2;
        display: none;
	}
body#about ul#nav-menu-about-stories.hover {
        display: block;
        }
body#about ul#nav-menu-about-stories li {
	width:240px;
	}
body#about ul#nav-menu-about-stories li i {
	background-image:url(/images/subnav/mi-about-stories.png);
	background-repeat:no-repeat;
	}	
ul#nav-menu-about-stories li#nav-mi-two-twelve-day {height:16px;}
ul#nav-menu-about-stories li#nav-mi-two-twelve-day i {background-position:0 0;}
ul#nav-menu-about-stories li#nav-mi-two-twelve-day a:hover i, 
ul#nav-menu-about-stories li#nav-mi-two-twelve-day.selected a i {background-position:100% 0;}

ul#nav-menu-about-stories li#nav-mi-the-wayfinding-handbook {height:16px;}
ul#nav-menu-about-stories li#nav-mi-the-wayfinding-handbook i {background-position:0 -16px;}
ul#nav-menu-about-stories li#nav-mi-the-wayfinding-handbook a:hover i,
ul#nav-menu-about-stories li#nav-mi-the-wayfinding-handbook.selected a i {background-position:100% -16px;}

/* ABOUT -> COMPANY section IR */
body.company ul#nav-section-about-company {
	background:url(/images/subnav/bg-about-navsection.png) 0 0 no-repeat;
        }
body.company ul#nav-section-about-company li {
	width:259px;
	}
body.company ul#nav-section-about-company li i {
	background-image:url(/images/subnav/navsection-company.png);
	background-repeat:no-repeat;
	}	
li#nav-profile {height:36px;}
li#nav-profile i {background-position:0 0;}
li#nav-profile a:hover i, 
li#nav-profile.selected a i {background-position:100% 0;}

li#nav-mission {height:33px;}
li#nav-mission i {background-position:0 -36px;}
li#nav-mission a:hover i,
li#nav-mission.selected a i {background-position:100% -36px;}

li#nav-process {height:31px;}
li#nav-process i {background-position:0 -69px;}
li#nav-process a:hover i,
li#nav-process.selected a i {background-position:100% -69px;}

li#nav-history {height:30px;}
li#nav-history i {background-position:0 -100px;}
li#nav-history a:hover i,
li#nav-history.selected a i {background-position:100% -100px;}


/* ABOUT -> PEOPLE section IR */
body.people ul#nav-section-about-people-team {
	background:url(/images/subnav/bg-about-navsection.png) 0 0 no-repeat;
        }
body.people ul#nav-section-about-people-team li {
	width:322px;
	}
body.people ul#nav-section-about-people-team li i {
	background-image:url(/images/subnav/navsection-people.png);
	background-repeat:no-repeat;
	}	
li#nav-our-team {height:37px;}
li#nav-our-team i {background-position:0 0;}
li#nav-our-team a:hover i, 
li#nav-our-team.selected a i {background-position:100% 0;}
li#nav-leadership {height:32px;}
li#nav-leadership i {background-position:0 -37px;}
li#nav-leadership a:hover i,
li#nav-leadership.selected a i {background-position:100% -37px;}
li#nav-collaborators {height:28px;}
li#nav-collaborators i {background-position:0 -69px;}
li#nav-collaborators a:hover i, 
li#nav-collaborators.selected a i {background-position:100% -69px;}

/* People faces @nav-people */
div#nav-people {
	float:right;
	width:579px;
	height:288px;
	}
div#nav-people dl {
	clear:right;
	float:right;
	}
div#nav-people dd {
	position:relative; /* IR setup */
	float:left;
	width:97px;
	}
div#nav-people dd * { /* IR setup */
	display:block;
	width:100%;
	height:100%;
	}
div#nav-people dd i {
	position:absolute;
	top:0;
	left:0;
	background-image:url(/images/subnav/nav-people-faces.jpg);
	background-repeat:no-repeat;
	cursor:pointer;
	}	
/* principals */	
dl#principals {
	width:288px;
	height:94px;
	}
dl#principals dd {
	height:94px;
	}	
dl#principals dt {
	float:right;
	width:94px;
	height:94px;
	background:#41b9d3;
	text-indent:-9999px;
	}

dd#david i {background-position:-676px 0;}
dd#david a:hover i, div.leadership dd#david i, 
body.david-gibson dd#david i {background-position:-194px 0;}

dd#ann i {background-position:-773px 0;}
dd#ann a:hover i, div.leadership dd#ann i, 
body.ann-harakawa dd#ann i {background-position:-291px 0;}

/* officers */	
dl#officers {
	width:385px;
	height:97px;
	}
dl#officers dt {
	float:right;
	width:191px;
	height:94px;
	background:#cb5d9f;
	border-top:3px solid #fff;
	text-indent:-9999px;
	}
dl#officers dd {
	height:97px;
	}
	
dd#sarah i {background-position:-579px -94px;}
dd#sarah a:hover i, div.leadership dd#sarah i, body.sarah-haun dd#sarah i {background-position:-97px -94px;}

dd#jim i {background-position:-676px -94px;}
dd#jim a:hover i, div.leadership dd#jim i, body.jim-plattner dd#jim i {background-position:-194px -94px;}

/* directors */	
dl#directors dt {
	position:absolute;
	left:-9999px;
	}	
dl#directors dd {
	width:470px;
	height:97px;
	}
dl#directors dd i {background-position:-494px -191px;}
dl#directors dd a:hover i, div.leadership dl#directors dd i, body.directors dl#directors dd i {background-position:-12px -191px;}
	
	
/* ABOUT -> STORIES section IR */
body.stories ul#nav-section-about-stories {
	background:url(/images/subnav/bg-about-navsection.png) 0 0 no-repeat;
        }
body.stories ul#nav-section-about-stories li {
	width:477px;
	}
body.stories ul#nav-section-about-stories li i {
	background-image:url(/images/subnav/navsection-stories.png);
	background-repeat:no-repeat;
	}	
li#nav-two-twelve-day {height:35px;}
li#nav-two-twelve-day i {background-position:0 0;}
li#nav-two-twelve-day a:hover i, 
li#nav-two-twelve-day.selected a i {background-position:100% 0;}

li#nav-the-wayfinding-handbook {height:30px;}
li#nav-the-wayfinding-handbook i {background-position:0 -35px;}
li#nav-the-wayfinding-handbook a:hover i,
li#nav-the-wayfinding-handbook.selected a i {background-position:100% -35px;}

/* WORK MENU IR */
body#work div#aside.navMenu {
	width:952px;
        background: url(/images/subnav/bg-work-menu.png);
        background-repeat: no-repeat;
	}

body#work ul#nav-menu-work li {
	width:952px;
	}
body#work ul#nav-menu-work li i {
        background-image:url(/images/subnav/bg-work-menu.png);
	background-repeat:no-repeat;
	}	

li#nav-mi-work-by-client {height:94px; margin-bottom: 100px;}
li#nav-mi-work-by-client i {background-position:0 0;}
li#nav-mi-work-by-client a:hover i, 
li#nav-mi-work-by-client.selected a i {background-position:100% 0;}

li#nav-mi-work-by-market {height:94px; margin-bottom: 100px;}
li#nav-mi-work-by-market i {background-position:0 -194px;}
li#nav-mi-work-by-market a:hover i, 
li#nav-mi-work-by-market.selected a i {background-position:100% -194px;}

li#nav-mi-work-by-service {height:94px;}
li#nav-mi-work-by-service i {background-position:0 -388px;}
li#nav-mi-work-by-service a:hover i, 
li#nav-mi-work-by-service.selected a i {background-position:100% -388px;}

/* WORK MENU > By Market sub-menu IR */
body#work ul#nav-menu-work-by-market {
	width:288px;
        display: none;
        z-index:2;
	}
body#work ul#nav-menu-work-by-market.hover {
        display: block;
        }
body#work ul#nav-menu-work-by-market li {
	width:288px;
	}
body#work ul#nav-menu-work-by-market li i {
	background-image:url(/images/subnav/mi-work-market.png);
	background-repeat:no-repeat;
	}	
ul#nav-menu-work-by-market li#nav-mi-health-care {height:16px;}
ul#nav-menu-work-by-market li#nav-mi-health-care i {background-position:0 0;}
ul#nav-menu-work-by-market li#nav-mi-health-care a:hover i, 
ul#nav-menu-work-by-market li#nav-mi-health-care.selected a i {background-position:100% 0;}

ul#nav-menu-work-by-market li#nav-mi-sre {height:16px;}
ul#nav-menu-work-by-market li#nav-mi-sre i {background-position:0 -16px;}
ul#nav-menu-work-by-market li#nav-mi-sre a:hover i, 
ul#nav-menu-work-by-market li#nav-mi-sre.selected a i {background-position:100% -16px;}

ul#nav-menu-work-by-market li#nav-mi-transit {height:16px;}
ul#nav-menu-work-by-market li#nav-mi-transit i {background-position:0 -32px;}
ul#nav-menu-work-by-market li#nav-mi-transit a:hover i, 
ul#nav-menu-work-by-market li#nav-mi-transit.selected a i {background-position:100% -32px;}

ul#nav-menu-work-by-market li#nav-mi-higher-education {height:16px;}
ul#nav-menu-work-by-market li#nav-mi-higher-education i {background-position:0 -48px;}
ul#nav-menu-work-by-market li#nav-mi-higher-education a:hover i, 
ul#nav-menu-work-by-market li#nav-mi-higher-education.selected a i {background-position:100% -48px;}

ul#nav-menu-work-by-market li#nav-mi-public-sector {height:16px;}
ul#nav-menu-work-by-market li#nav-mi-public-sector i {background-position:0 -64px;}
ul#nav-menu-work-by-market li#nav-mi-public-sector a:hover i, 
ul#nav-menu-work-by-market li#nav-mi-public-sector.selected a i {background-position:100% -64px;}

ul#nav-menu-work-by-market li#nav-mi-corporate {height:16px;}
ul#nav-menu-work-by-market li#nav-mi-corporate i {background-position:0 -80px;}
ul#nav-menu-work-by-market li#nav-mi-corporate a:hover i, 
ul#nav-menu-work-by-market li#nav-mi-corporate.selected a i {background-position:100% -80px;}

/* WORK MENU > By Service sub-menu IR */
body#work ul#nav-menu-work-by-service {
	width:204px;
        display: none;
        z-index:2;
	}
body#work ul#nav-menu-work-by-service.hover {
        display: block;
        }
body#work ul#nav-menu-work-by-service li {
	width:204px;
	}
body#work ul#nav-menu-work-by-service li i {
	background-image:url(/images/subnav/mi-work-service.png);
	background-repeat:no-repeat;
	}	
ul#nav-menu-work-by-service li#nav-mi-sustainable-design {height:16px;}
ul#nav-menu-work-by-service li#nav-mi-sustainable-design i {background-position:0 0;}
ul#nav-menu-work-by-service li#nav-mi-sustainable-design a:hover i, 
ul#nav-menu-work-by-service li#nav-mi-sustainable-design.selected a i {background-position:100% 0;}

ul#nav-menu-work-by-service li#nav-mi-wayfinding {height:16px;}
ul#nav-menu-work-by-service li#nav-mi-wayfinding i {background-position:0 -16px;}
ul#nav-menu-work-by-service li#nav-mi-wayfinding a:hover i, 
ul#nav-menu-work-by-service li#nav-mi-wayfinding.selected a i {background-position:100% -16px;}

ul#nav-menu-work-by-service li#nav-mi-information-design {height:16px;}
ul#nav-menu-work-by-service li#nav-mi-information-design i {background-position:0 -32px;}
ul#nav-menu-work-by-service li#nav-mi-information-design a:hover i, 
ul#nav-menu-work-by-service li#nav-mi-information-design.selected a i {background-position:100% -32px;}

ul#nav-menu-work-by-service li#nav-mi-visioning {height:16px;}
ul#nav-menu-work-by-service li#nav-mi-visioning i {background-position:0 -48px;}
ul#nav-menu-work-by-service li#nav-mi-visioning a:hover i, 
ul#nav-menu-work-by-service li#nav-mi-visioning.selected a i {background-position:100% -48px;}

/* NEWS section IR */
body#news ul#nav-section-news {
	background:url(/images/subnav/bg-news-navsection.png) 0 0 no-repeat;
        }
body#news ul#nav-section-news li {
	width:316px;
	}
body#news ul#nav-section-news li i {
	background-image:url(/images/subnav/navsection-news.png);
	background-repeat:no-repeat;
	}	
li#nav-releases {height:34px;}
li#nav-releases i {background-position:0 0;}
li#nav-releases a:hover i, 
li#nav-releases.selected a i {background-position:100% 0;}

li#nav-awards {height:31px;}
li#nav-awards i {background-position:0 -34px;}
li#nav-awards a:hover i,
li#nav-awards.selected a i {background-position:100% -34px;}

li#nav-press {height:33px;}
li#nav-press i {background-position:0 -65px;}
li#nav-press a:hover i,
li#nav-press.selected a i {background-position:100% -65px;}

/* @FOOTER
====================================================================================== */	
#footer p {
	margin:0 auto;
	width:952px;
	background:#545454;
	color:#fff;
	font-size:1em;
	line-height:3.2em;
	}


/* @MISC 
====================================================================================== */
/*-------------------
P.I.E. FLOAT CLEARING - non-IE browsers only
See http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}
/* END P.I.E. FLOAT CLEARING 
--------------------- */

/* Generic classes for floats */
.floatleft {float:left;}
.floatright {float:right;}

/* Generic Class for clearing floats with existing element  */
.clear {
	clear:both; 
}

/* Generic Class for clearing floats with EMPTY div */
.cleardiv {
	clear:both; height:0px;
	line-height:0px; visibility: hidden;
}

/* Generic class for no visibility and no display */
.hide {
	display:none;
	visibility:hidden;
}