* {
	padding: 0px;
	margin: 0px;
}

html, body {
	font-variant: normal;
	font-size: 13px;
	font-family: 'Century Gothic', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
	height: 100%;
}

a {
	outline:none; 
	-moz-outline:none;
	text-decoration: none;
	}
li {list-style:none;}

.hide {
	display: none;
}

img {border:none;}

#wrapper {
	margin: 0 auto;
	width: 960px;
	height: 100%;
}

#about #wrapper {background: url(../images/bg-main.gif) repeat-y 152px 0;}
#work #wrapper {background: url(../images/bg-main.gif) repeat-y 316px 0;}
#perspectives #wrapper {background: url(../images/bg-main.gif) repeat-y 480px 0;}
#people #wrapper {background: url(../images/bg-main.gif) repeat-y 644px 0;}
#connect #wrapper {background: url(../images/bg-main.gif) repeat-y 808px 0;}

#logotype {
	float: right;
	margin-bottom: 10px;
}

#header { padding-top: 72px; }
#header h1, #header h2 {
	position:absolute;
	top:-9999px;
}

#nav_main {
	margin-bottom: 10px;
	float: right;
	width:882px;
	height:50px;
	clear:both;
}

#nav_main li {
	float: left;
	list-style-type: none;
	margin-left: 12px;
	height:50px;
	width:152px;
	display:inline;
	position:relative;
}
#nav_main li.icon {width:50px;}

#nav_main li a{
	display: block;
	height: 22px;
	width: 152px;
	position:absolute;
	bottom:0;
	right:0;
	background-position: left top;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

#nav_main li a.home {
	background-image: url(../images/icon-xperience.gif);
	width: 25px;
	height: 22px;
}
#nav_main li a.home:hover {background-position: left bottom;}
#nav_main li a.home.active {background-position: left bottom;}

#nav_main li a.about {background-image: url(../images/tab-about.gif);}
#nav_main li a.work {background-image: url(../images/tab-work.gif);}
#nav_main li a.perspectives {background-image: url(../images/tab-perspectives.gif);}
#nav_main li a.people {background-image: url(../images/tab-people.gif);}
#nav_main li a.connect {background-image: url(../images/tab-connect.gif);}
#nav_main li a:hover {background-position: left bottom;}

#nav_main li a.about.active {background-position:left bottom;}
#nav_main li a.work.active {background-position:left bottom;position:static; display:block;margin-bottom:5px;}
#nav_main li a.perspectives.active {background-position:left bottom;}
#nav_main li a.people.active {background-position:left bottom;}
#nav_main li a.connect.active {background-position:left bottom;position:static; display:block;margin-bottom:5px;}

#main {
	min-height: 300px;
	background-repeat: no-repeat;
	background-color: white;
	line-height: 1.5em;
	padding-right: 45px;
	padding-top: 45px;
	border-color: #6f7a85;
	border-style: solid;
	border-width: 1px;
	padding-left: 505px;
	clear: both;
}
#home #main {background-image: url(../images/bg-home.jpg);}
#about #main {background-image: url(../images/bg-about.jpg);}
#work #main {background-image: url(../images/bg-work.jpg);}
#perspectives #main {background-image: url(../images/bg-perspectives.jpg);}
#people #main {background-image: url(../images/bg-people.jpg);}
#connect #main {background-image: url(../images/bg-connect.jpg);}

/* Work 
---------------------*/

#nav_main li a.case_studies{margin-top: 5px;}
#nav_main li a.case_studies, #nav_main li a.clients {
	text-indent:0;
	display:block;
	position: static;
	text-align: right;
	text-decoration: none;
	color: #777;
	font-size: 11px;
	height: 15px;
	width:147px;
	clear:both;
	padding-right:5px;
}
#nav_main li a.case_studies:hover, #nav_main li a.clients:hover {color: #af282e;}

#work #nav_main li a.current {
	width:135px;
	padding-right: 17px;
	color: black;
	background: url(../images/red_dot.gif) no-repeat 140px 4px;
}
#nav_main li a.case_studies.current:hover, #nav_main li a.clients.current:hover {
	color: black;
}

#work #main p {
	margin: 0 0 10px 0;
}

#work #main ul {
	margin: 5px 0 20px 0;
}

#work #main li {
	list-style: none;
	margin: 0;
}

#work #main li a {
	text-decoration: none;
	color: #666;
	border-bottom: 1px solid #ccc;
	padding: 5px 0 7px 5px;
	display: block;
	width: 415px;
	height: 15px;
	position:relative;
}
#work #main ul.scrollbar {
	width: 440px;
	height: 160px;
	overflow: hidden;
}
#work #main li a:hover {
	background: #f3f3f3;
}
#work #main li span {
	position:absolute; 
	right:5px;
	top:5px;
	color: #af282e;
	text-transform: uppercase;
	font-size: 8px;
	letter-spacing: 2px;
}
#work #main li span:hover {
	color: red;
}

#main p {
	margin-bottom: 2em;
}

#footer {
	border-top:1px solid #a6a6a6;
	padding-top:5px;
	margin: 3px 0 20px 0;
	font-size: 0.8em;
	color: #a6a6a6;
	text-align: right;
}


/* Case Studies Section
-------------------------*/

#footer a { text-decoration: none; color: #a6a6a6; }#footer a:hover { color: #af282e; }#work.case_studies #main {
	width:958px;
	height: 395px;
	line-height: 1.5em;
	border: 1px solid #6f7a85;
	clear: both;
	padding: 0;
	position: relative;
	background: none;
}

#work.case_studies #main #info {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 395px;
	background: url(../images/bg-info.png) repeat-y top left;
}
#work.case_studies #main #info h2 {
	color: white;
	padding: 20px 10px 20px 20px;
	line-height: 26px;
	font-weight: normal;	
	font-size:20px;
}

#work.case_studies #main #info h3 {
	color: white;
	padding: 15px 10px 10px 20px;
	line-height: 15px;
	font-weight: normal;
	font-size:16px;
}

#work.case_studies #main #info h4 {
	color: white;
	padding: 0px 10px 0px 20px;
	line-height: 26px;
	font-weight: normal;
	font-size:14px;
	font-style: italic;
}

#work.case_studies #main #info .info_scrollbar {
	width: 290px;
	height: 230px;
	overflow: hidden;
}
#info .jScrollPaneContainer {
	margin: 0 0 15px 0;
}
#info .jScrollPaneTrack {
	background: #000;
}
#info .jScrollPaneDrag {
	background: #555;
}

#work.case_studies #main #info p {
	color: white;
	font-size: 11px;
	line-height: 16px;
	padding: 0px 20px 10px;
	margin: 0;
}
#work.case_studies #main #info .info_scrollbar ul {
	margin: 0;
}
#work.case_studies #main #info .info_scrollbar ul li {
	list-style: disc;
	color: white;
	padding: 5px 0 0 0;
	margin-left: 35px;
	font-size: 11px;
	line-height: 14px;
}
#work.case_studies #main #gallery_nav {
	position: absolute;
	left: 0px;
	bottom: 10px;
	z-index: 1003;
}
#work.case_studies #main #gallery_nav h5 {
	display: inline;
	color: white;
	float: left;
	margin-left: 20px;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 8px;
}
#work.case_studies #main #gallery_nav ul.navi {
	display: inline;
	float: left;
}

#work.case_studies #main #gallery_nav ul.navi li {
	float: left;
	margin-left:10px;
	display: inline;
}

#work.case_studies #main #gallery_nav ul.navi li a{
	width: 7px;
	height: 7px;
	display: block;
	border: none;
	text-indent: -9999px;
	background: url(../images/navi-dot.png) no-repeat left top;
	padding: 0;
}
#work.case_studies #main #gallery_nav ul.navi li a:hover {background-position: left center;}
#work.case_studies #main #gallery_nav ul.navi li a:active {background-position: left bottom;}
#work.case_studies #main #gallery_nav ul.navi li.active a {background-position: left bottom;}
#work.case_studies #main #gallery_nav .jwbox {
	float: left;
}
#work.case_studies #main #gallery_nav a.play_button {
	float: left;
	height: 14px;
	width: 24px;
	background: url(../images/navi-play.png) no-repeat top left;
	text-indent: -9999px;
	margin-left: 10px;
	margin-top: 1px;
}
#work.case_studies #main #gallery_nav a.play_button:hover {
	background-position: left center;
}
#work.case_studies #main #gallery_nav a.play_button:active {
	background-position: left bottom;
}

#work.case_studies #main #imagescroller {
	width: 960px;
	height: 395px;
	position:relative;
	overflow:hidden;
	float: left;
}

#work.case_studies #main #imagescroller .images {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
	width:20000em; 
}

#work.case_studies #main #imagescroller .images li {
	float: left;
	display: inline;
	width: 960px;
    height: 395px;
    position: relative;
    cursor: pointer;
}
 
/* Clients 
----------------------------*/
 
#work.clients #main {
	width:958px;
	height: 395px;
	line-height: 1.5em;
	border: 1px solid #6f7a85;
	clear: both;
	padding: 0;
	position: relative;
	background: white;
}

#work.clients #main .logos {
	width: 940px;
	height: 355px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	outline: none;
	margin-left: 20px;
}

#work.clients #main .logos ul{
	width: 880px;
	height: 60px;
	padding: 6px 0;
	display: block;
	border-bottom: 1px solid #ddd;
	margin-left: 5px auto;
}
#work.clients #main .logos ul.last {
	border: none;
}
#work.clients #main .logos ul li {
	float: left;
	display: inline;
	
}

 
/* Perspectives 
----------------------------*/
#perspectives #main {
	padding: 10px 10px 10px 475px;
	margin: 0 auto;
	height: 375px;
	width: 475px;
}

#main div.scrollbar {
	height: 335px;
	width: 435px;
	margin: 0;
	padding: 0 20px;
} 

ul.presentations li.pres_item {
	position: relative;
	padding: 20px 10px;
	border-bottom: 1px solid #eee;
	display: block;
	width: 415px;
	cursor: pointer;
}

ul.presentations li.pres_item:hover {
	background: #f3f3f3;
}
ul.presentations li.pres_item:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	}	
ul.presentations li.pres_item p {
	padding: 10px 10px 0 0;
	display: block;
	float: left;
	font-size: 12px;
	color: #777;
	margin: 0;
	display:none
}

ul.title li.pres_date {
	float: left;
	letter-spacing: 1px;
	font-size: 13px;
	color: #999;
	width: 65px;
}
ul.title li.pres_title {
	float: left;
	letter-spacing: 1px;
	font-size: 13px;
	color: #555;
	width: 285px;
}

ul.title li.download a{
	float: right;
	text-align: right;
	color: #0097dc;
	text-transform: uppercase;
	font-size: 8px;
	letter-spacing: 1px;
	width: 50px;
	text-decoration: none;
	display: inline;
	padding-right: 10px;
}

ul.title li.download a:hover {
	color: #af282e;
}

/* People 
----------------------------*/

#people #main {
	height: 365px;
	padding-top: 30px;
}

#people.anna_varghese #main {background-image: url(../images/people/anna_varghese.jpg);}
#people.jim_charlton #main {background-image: url(../images/people/jim_charlton.jpg);}
#people.joe_wenke #main {background-image: url(../images/people/joe_wenke.jpg);}
#people.john_jones #main {background-image: url(../images/people/john_jones.jpg);}
#people.john_kuzava #main {background-image: url(../images/people/john_kuzava.jpg);}
#people.mary_kay_francis #main {background-image: url(../images/people/mary_kay_francis.jpg);}
#people.michael_carrera #main {background-image: url(../images/people/michael_carrera.jpg);}
#people.michael_kort #main {background-image: url(../images/people/michael_kort.jpg);}
#people.mike_lucas #main {background-image: url(../images/people/mike_lucas.jpg);}
#people.mitch_jacobs #main {background-image: url(../images/people/mitch_jacobs.jpg);}
#people.shawn_carter #main {background-image: url(../images/people/shawn_carter.jpg);}
#people.steve_flemion #main {background-image: url(../images/people/steve_flemion.jpg);}
#people.trish_moritz #main {background-image: url(../images/people/trish_moritz.jpg);}

#people #main li a {
	text-decoration: none;
	color: #666;
	border-bottom: 1px solid #ccc;
	padding: 5px 0 7px 5px;
	display: block;
	width: 415px;
	height: 15px;
	position:relative;
}
#people #main ul.scrollbar {
	width: 440px;
	height: 160px;
	overflow: hidden;
}
#people #main li a:hover {
	background: #f3f3f3;
}
#people #main li span {
	position:absolute; 
	right:5px;
	top:5px;
	color: #f78b00;
	text-transform: uppercase;
	font-size: 8px;
	letter-spacing: 2px;
}
#people #main li span:hover {
	color: red;
}

#people #main h3 {
	font-size: 24px;
	font-weight: normal;
	color: #aaa;
}
#people #main h4 {
	font-size: 16px;
	font-weight: bold;
	line-height: 36px;
	color: #bbb;
	margin-bottom: 20px;
}

#people #main a.email {
	color: #f78b00;
}
#people #main a.email:hover {
	text-decoration: underline;
}

/* Connect 
---------------------------*/
#nav_main li a.new_business, #nav_main li a.employment {
	text-indent:0;
	display:block;
	position: static;
	text-align: right;
	text-decoration: none;
	color: #777;
	font-size: 11px;
	height: 15px;
	width:147px;
	clear:both;
	padding-right:5px;
}
#nav_main li a.new_business.current, #nav_main li a.employment.current {
	color: black;
}
#nav_main li a.new_business:hover, #nav_main li a.employment:hover {color: #af282e;}

#connect #nav_main li a:hover {
	color: #66bd2b;
}

#connect #nav_main li a.current {
	width:135px;
	padding-right: 17px;
	color: black;
	background: url(../images/green_dot.gif) no-repeat 140px 4px;
}
#connect #nav_main li a.current:hover {
	color: black;
}

#connect #main {
	height: 365px;
	padding-top: 30px;
}

#connect #main div.box {
	width: 200px;
	height: 115px;
	display: block;
	float: left;
	margin:0 0 10px;
	font-size:12px;
}

#connect #main div.box h4 {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
}

#connect #main div.box a {
	font-size: 9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #66bd2b;
}

#connect #main div.box a:hover {
	color: red;
}

#connect.new_business p {
	margin: 7px 0;
}
#connect.new_business #main h4 {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
	margin-top: 20px;
}

#connect.new_business #main a.email {
	font-size: 13px;
	color: #66bd2b;
}

#connect.new_business #main a.email:hover {
	text-decoration: underline;
}

#connect.employment #main div.break {
	display: block;
	width: 300px;
	height: 1px;
	border-top: 1px solid #ccc;
	margin: 20px 0;
}
#connect.employment p {
	margin: 7px 0;
}
#connect.employment #main h4 {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
	margin-top: 20px;
}

#connect.employment #main a.email {
	font-size: 13px;
	color: #66bd2b;
}

#connect.employment #main a.email:hover {
	text-decoration: underline;
}

/* Custom Scrollbars
----------------------------*/

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	outline: none;
	margin-top: 20px;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 10%;
	background: #e0e0e0;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;

}
.jScrollPaneDrag {
	position: absolute;
	background: #333;
	cursor: pointer;
	overflow: hidden;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

.jScrollPaneDragTop {
	position: absolute;
	top: 10px;
	left: 0;
	overflow: hidden;
	width: 6px;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 10px;
	left: 0;
	overflow: hidden;
	width: 6px;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 10px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0px;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 10px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

a.jScrollArrowUp {
	background: url(../images/arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: left center;
}
a.jScrollArrowDown {
	background: url(../images/arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: left center;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: left bottom;
}

/* Carousel for thumbnails
-------------------------- */

#thumbscroller {
	margin-top: 2px;
	margin-left:1px;
	position:relative;
	overflow:hidden;
	width:958px;
	height:65px;
}

.items {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
	width:20000em; 
}

.items a {
    float: left;
    list-style: none;
    width: 190px;
    height: 65px;
    position: relative;
    cursor: pointer;
    margin-right: 2px;
    text-decoration: none;
}
div.mask {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 3;	
	width: 190px;
	height: 65px;
	background: url(../images/scroller-hover.png) no-repeat left top;
	cursor: pointer;
	display: none;
}
#people div.mask {
	background-image: url(../images/scroller-hover-people.png);
}

.items li.active div.mask {
	display: block;
}

div.mask h4 {
	color: white;
	position: absolute;
	left: 15px;
	top: 25px;
	font-size: 11px;
	font-weight: normal;
	font-weight:bold;
}
div.mask h5 {
	position: absolute;
	color: white;
	bottom: 14px;
	left: 15px;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: normal;
	font-weight:normal;
	letter-spacing: 1px;
}

.nextPage {
	position: absolute;
    top: 1px;
    right: 0;
    width: 19px;
    height: 63px;
    cursor: pointer;
    background: transparent url(../images/scroller-arrow_right.png) no-repeat 0 0;
    z-index: 3;
    display: none;
}

.prevPage {
	position: absolute;
    top: 1px;
    left: 0px;
    width: 19px;
    height: 63px;
    cursor: pointer;
    background: transparent url(../images/scroller-arrow_left.png) no-repeat 0 0;
    z-index: 3;
    display: none;
}

*:first-child+html #nav_main {margin-top:-50px;}
*:first-child+html #work.case_studies #main #gallery_nav {bottom:20px;}

* html #nav_main {margin-top:-50px;}
* html #nav_main li a.active {position:absolute; bottom:0;right:0;}
* html #work #nav_main li a.active {position:static; width:152px;}
* html #connect #nav_main li a.active {position:static; width:152px;}
* html #home #main {height:335px; padding:30px 30px 20px 495px;}
* html #about #main {height:335px; padding:30px 30px 20px 495px;}
* html #work #main {height:335px;padding:30px 30px 20px 495px;}
* html #work.case_studies #main {margin-top:0px;padding:0;}
* html #work.clients #main {margin-top:0px;}
* html #work.case_studies #main #imagescroller {z-index:-1;}
#work #wrapper #main #info .info_scrollbar ul {
	padding-bottom: 10px;
}