@charset "UTF-8";
/* CSS Document */


/* RESET CSS */

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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: Arial, Helvetica, sans-serif; text-align: left; vertical-align: baseline; }

a img, :link img, :visited img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after,
blockquote:before, blockquote:after { content: ""; } 

*:focus { outline: 0; }

body { background: #FFFFFF;	text-align: center; }

sup { font-size: 10px; vertical-align: top; }

#wrapper { width: 868px; margin: 0 auto; text-align: left; }

.emphasis { font-weight: bold; }

/* HEADER STYLE */

#header { margin: 0 auto; width: 868px; height: 119px; overflow: hidden; }

#logo {	background: url(../images/header_logo.png) 0 0 no-repeat; width: 344px;	height: 62px; margin: 42px 0 0 26px; }

#quote { width: 423px; height: 109px; position: relative; top: -96px; left: 412px; }

/* MAIN STYLE */

#main { width: 868px; height: 536px; background: url(../images/content_bg.png) no-repeat 146px 20px; position: relative; z-index: 1; padding: 16px 0 0 0; }
#main2 { width: 868px; height: 536px; background: url(../images/content_bg_big.png) no-repeat 146px 20px; position: relative; z-index: 1; padding: 16px 0 0 0; }

/* MENU STYLE */

#menu { position: absolute; top: 40px; left: 20px; width: 138px; height: 325px; overflow: visible; z-index: 100; }

#menu:hover { z-index: 2000; }

/* CONTENT STYLE */

#content1 { position: relative; top: 38px; left: 148px; padding: 0 36px 0 54px; width: 362px; height: 440px; z-index: 500; font: normal normal .8em/130% Arial, Helvetica, sans-serif; color: #535353; }

#content2 { position: relative; top: 38px; left: 148px; padding: 0 36px 0 54px; width: 632px; height: 440px; z-index: 500; font: normal normal .8em/130% Arial, Helvetica, sans-serif; color: #535353; }

.scroll-pane { width: 362px; height: 440px; overflow: auto; padding-right: 20px; }

.scroll-pane2 { width: 632px; height: 440px; overflow: auto; padding-right: 0px; }

#content1 p, #content2 p { padding-bottom: 12px; line-height: 140%; }

#content1 .spaced, #content2 .spaced { line-height: 160%; }

.pullquote { width: 350px; margin: 10px 0 0; padding-top: 26px; background: transparent url(../images/pull-quote-top.gif) no-repeat 0 0; text-align: center; }
.pullquote p { width: 260px; margin: 0 auto; padding-bottom: 0; }
.pullquoteBottom { margin-bottom: 20px; width: 350px; height: 20px; background: transparent url(../images/pull-quote-bottom.gif) no-repeat 0 0; }

.bigP { font-size: 110%; line-height: 120%; }

.biggerP { font-size: 140%; line-height: 120%; }

.contentHeader { color: #808285; font-size: 160%; margin-bottom: 18px; }

.contentH2 { color: #FF9C00; font-size: 130%; margin-bottom: 10px; }

.statement { font-weight: 900; line-height: 20%; }

.plusStatement { padding: 6px 0; display: block; }

.slant { font-weight: 900; font-style: italic; color: #FF9C00; }

.contentEmphasis { font-weight: bold; color: #FF9C00; }

.clientPoints { list-style: none; }

.clientPoints li { padding: 0 0 8px 15px; background: url(../images/plus_bullet.png) no-repeat 0 2px; line-height: 130%; }

.clientLogo { padding: 5px 20px 0 0; }

.clientLink { color: #8AAA00; font-weight: 700; display: block; padding: 5px 20px 20px 0; }
.clientLink:hover { color: #B1D900; }

.clientList { padding-top: 10p; }

#footer { text-align: center; position: relative; left: 158px; width: 431px; margin-top: 86px; }

#footer .socialMedia { font-weight: bold; font-size: 12px; padding-bottom: 4px; }

#footer p { color: #4B4B4B; text-align: center; font: normal normal .6em Helvetica, Arial, sans-serif; }

#footer a { color: #8CC800; text-decoration: none; }

#brandsList { padding-top: 20px; padding-bottom: 0; }
#brandCol1 { width: 154px; float: left; margin-top: -8px; }
#brandCol2 { width: 206px: float: left; margin-top: -8px; }

/* APPROACH STYLE */

.serviceCat { padding-bottom: 6px; text-decoration: underline; color: #FF9C00; cursor: pointer; }

/* CLIENT STYLE */

.logoHeader { margin-bottom: 20px; text-align: left; width: 200px; }
#content1 .aside { font-size: 11px; padding-top: 4px; padding-bottom: 0; }

.clientH5 { padding-top: 10px; font-size: 100%; }

.consultingLogo, .consultingInfo { padding-top: 10px; }

/* PRESS STYLE */

#content1 .pressBlurb { line-height: 120%; padding: 0; }
.pressLink { display: block; color: #8AAA00; font-weight: 700; padding: 4px 0 12px; overflow: auto; }
.pressLink img { display: block; float: left; padding-right: 10px; }
.pressLink span { display: block; width: 265px; float: left; line-height: 130%; padding-top: 0px; }
.pressLink:hover { color: #B1D900; }

/* PEOPLE STYLE */

.headshot {	float: left; width: 80px; height: 100px; }

#phoebe { background: url(../images/headshots/phoebe.jpg) no-repeat 0 0; }

#lori {	background: url(../images/headshots/lori.jpg) no-repeat 0 0; }

#wendye { background: url(../images/headshots/wendye.jpg) no-repeat 0 0; }

#paula { background: url(../images/headshots/paula.jpg) no-repeat 0 0; }

.whoTop { width: 580px; margin-bottom: 4px; }

.whoLeft { float: left; width: 160px; margin-right: 8px; }

.bioLink { float: left; width: 300px; height: 100px; margin-bottom: 10px; }

.contact { float: left; font-size: 90%; margin-left: 6px; }

.contact li { line-height: 130%; padding: 2px; overflow: visible; text-align: left; }

.name { color: #000000; font-size: 110%; }

.name a, .whoLeft a { color: #FF9C00; }

.title { }

.bio { float: left; width: 400px; margin-left: 16px; }

.toplineInfo { font-size: 110%; line-height: 130%; }

.funFact { padding-top: 12px; text-indent: -21px; }

.firstBlurb p { margin-top: 10px; }

.address { clear: both; padding-top: 18px; }

.whoLeft p { padding-top: 12px; }

/* SIDEBAR STYLE */

#sidebar { position: absolute; top: 16px; right: 22px; width: 251px; height: 487px; }

.sideTop { width: 252px; height: 45px; overflow: hidden; }

.sideCopy { width: 252px; background: url(../images/side_bottom.png) no-repeat bottom left;	padding-bottom: 40px; color: #535353; }

#successes { background: url(../images/side_brandSoul_marketplace.png) no-repeat 0 0; }

#servicesDiagram { width: 252px; height: 452px; background: url(../images/services-diagram.png) no-repeat top left; }

#licensingOpps { background: url(../images/side_licensing.png) no-repeat 0 0; }

#consulting { background: url(../images/side_consulting.png) no-repeat 0 0; }

#whoTheyAre {
	background: url(../images/side_who.png) no-repeat 0 0;
}

#slideshow { background: url(../images/side_bottom.png) no-repeat bottom left; width: 252px; height: 468px; text-align: center;	padding-top: 16px; }

.sideCopy h5 { font: normal 900 .75em/135% Arial, Helvetica, sans-serif; padding: 12px 24px 0 32px; margin-bottom: -9px; }

.sideCopy h6 { font: normal 900 .75em/135% Arial, Helvetica, sans-serif; padding: 12px 24px 0 32px; }

.sideCopy p { font: normal 400 .75em/135% Arial, Helvetica, sans-serif;	padding: 12px 24px 0 32px; }

.sideCopy ul { font: normal 600 .8em Arial, Helvetica, sans-serif; list-style: outside; padding: 12px 0 0 46px; }

.sideCopy li { padding: 0 0 5px 0; }

/* ACCORDION */

@charset "UTF-8";

/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.accordion {
	border: none;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 *
 * NOTE:
 * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
 * user from selecting the text in the AccordionPanelTab. These are proprietary browser
 * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
 * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
 * validate, and don't care if the user can select the text within an AccordionPanelTab,
 * you can safely remove those properties without affecting the functionality of the widget.
 */
.AccordionPanelTab { margin: 0px; padding: 2px; cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent { overflow: auto; margin: 0px; padding: 0px; }

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {

}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {

}
.AccordionPanelOpen .AccordionPanelTabHover {

}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {

}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

}