* { margin:0; padding:0; }
/* misc */
img { border:none; }
html {height:100.2%}
/*layout */
body { overflow-x:hidden; height:100%; font-family:Helvetica, sans-serif, Arial; color: #333333; background: #ffffff}
/* #wrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;z-index:6000;background: url(../../images/background.jpg) repeat-x scroll;}*/
#wrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;z-index:6000;}
#nav { margin:0px auto; width:100%; border-top:1px solid #DF971B; border-bottom:1px solid #DF971B; background:#FFC425 url(../../images/navbg.png) top left repeat-x; }
/*#content { width:100%; background: url(../../images/contentbg.png) top left; border-bottom:1px solid #ffffff; }*/
#content { width:100%; background: #f6f6f6; top left; border-bottom:1px solid #ffffff; }
#homecontent { float:left; width:232px; margin:0px 8px 8px 0px }
#homecontent h3 span {line-height: 24px; padding:0px 20px 2px 4px; color:#ffffff;background:#999999; margin: 0 20px 20px 0;}
#vidplayer { float:left; width:472px; margin:0px 8px 8px 0px }
#footer { width:100%; margin:20px 0px }

/*nav */
#nav .pad { padding:0px; width:960px; margin:0px auto }
#nav .pad img { float:right; margin:0px 0px;padding:0px 0px; }
#nav ul.nav { list-style:none; list-style-type:none; font-weight:normal;border-top:1px solid #ffffff;margin:10px 0px 0px 0px;width:640px }
#nav ul.nav li { list-style:none; list-style-type:none; display:block; float:left; border-left:1px solid #ffffff; color:#ffffff; text-decoration:none; width:159px; padding:5px 0px 0px 0px; }/*#CF9D19 background:#FBAA1B*/
#nav ul.nav li span { padding:10px 0px 0px 8px; margin:0px }
#nav ul.nav li span.selectednav a { background:inherit; color:#000000;}
#nav ul.nav a:link { color:#ffffff; text-decoration:none; }
#nav ul.nav a:visited { color:#ffffff; text-decoration:none; }
#nav ul.nav a:hover { color:#444444; }

#nav ul.sub { list-style:none; list-style-type:none; margin:5px 10px 10px 0px; width:960px;}
#nav ul.sub li { list-style:none; list-style-type:none; display:inline; padding:2px 10px 5px 0px; font-weight:normal; font-size:32px; line-height:24px;}
#nav ul.sub li span {font-size:32px; padding:2px 10px 0px 2px; margin:0px;}
#nav ul.sub li span.selectedsub { color:#ff3333; background:#ffffff; margin:0px }
#nav ul.sub a { margin:0px 0px }
#nav ul.sub a:link { color:#333333; text-decoration:none; }
#nav ul.sub a:visited { color:#333333; text-decoration:none; }
#nav ul.sub a:hover { color:#666666; }
#nav h1 {color:#333333; font-size:36px; font-weight:bold;clear:left; padding:25px 0px 0px 40px;margin:0 0 0 0; }
#nav h1.sphere {background:url(../../images/sphere.png) no-repeat 0 32px;}
#nav h1.pyramid {background:url(../../images/pyramid.png) no-repeat 0 32px;}
#nav h1.interface {padding:25px 0px 0px 0px;}
#nav h2 {color:#333333; font-size:32px; line-height:24px; font-weight:bold;margin:0px 10px 10px 0px; padding: 0 0 0 0; }

/*content */
#content .pad { padding:8px 0px 0px 0px; width:960px; margin:0px auto; border:0px solid #666; }
#content h2 {font-size:22px; font-weight:normal; margin:5px 0px 10px 0px;}
#content h2 span {padding:2px 20px 2px 2px;color:#ffffff;background:#999999}
#content h2.p { font-size:13px; font-weight:normal; padding:0px 0px 7px 5px; }
#content h3 {font-size:18px; line-height:20px; font-weight:normal; }
#content h4 {font-size:16px; line-height:20px; font-weight:normal; color: #555555; }

#content p { line-height:20px; font-size:13px; padding:0px 2px 20px 2px; }
#content p.small { line-height:18px; font-size:10px; padding:0px 0px 10px 0px; }
#content li { font-size:13px;}

#content a:link { color:#009999; font-weight:normal; }
#content a:visited { color:#009999; font-weight:normal; }
#content a:hover {color:#999999}




/*footer */
#footer .pad { width:958px; margin:0px auto; padding:5px; color:#666;font-size:13px;}

#footer  .contact {border-top:1px solid #666}
#footer p  { padding:5px 10px;border-left:1px solid #666;}
#footer ul { list-style:none; list-style-type:none;}
#footer ul li { padding:5px 10px;list-style:none; list-style-type:none; display:block; float:left; border-left:1px solid #666; color:#666; text-decoration:none;} 

#footer a:link { color:#009999 }
#footer a:visted {color:#009999 }

/*scrolling content*/



/*indexes - archive, showcases*/
.indexitems { margin:5px auto; }
.indexitem { float:left; width:150px; margin:0px 8px 8px 0px; cursor:pointer; border:0px solid #ffffff; }
#content .indexitem h3 { font-size:12px; font-weight:normal; padding:5px 10px; font-weight:bold; }
.active { background:#ffffff; border:0px solid #cccccc; }
.indexitem p, .indexitem h4 { display:none }
.indexitem img { margin:2px; padding:0px; }
.indexitemdescription { height:240px;}
#content .indexitemdescription h3 { background:#999999; color:#ffffff; width:292px; margin:16px 0px 8px 0px; padding:2px 20px 2px 2px; font-size:18px; }
.indexitemdescription h4 { padding:5px 0px; }
.indexitemdescription p { width:632px; line-height:22px; padding:5px; }
.indexitemdescription img { display:none }



/*tweet feed */
#tweetscontainer { float:right; width:232px; }
#tweetscontainer h3 span {padding:2px 20px 2px 2px;color:#ffffff;background:#999999; margin: 0 0 10px 0;}
.tweetcontainer { background:#ffffff url(../../images/contentbg.png) top left; margin:5px 0px 10px 0px }
.tweet { padding:10px }
.tweetdetail { padding:10px; font-size:10px; }

/*three col */
.threecol {clear:both}
.col1 { float:left; width:312px; padding:10px 8px 10px 0px }
.col2 { float:left; width:312px; padding:10px 8px 10px 0px }
.col3 { float:right; width:312px; padding:10px 8px 10px 0px }

/*map */
#map { width:310px; height:310px; border:1px solid #999999; overflow:hidden; }

#list { width:200px; list-style:none; padding:0; }
#list li { padding:5px; margin:0px }
#list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }


#content .projectdetails { border-top:1px solid #999999;  padding:0px 0px; margin:6px 0px }
#content .projectdetails h3  { font-size:13px; font-weight:normal; margin:4px 0px; padding: 0 0 4px 0; border-bottom:1px solid #999999; clear:both  }
#content .projectdetails h3 span { width:50px;display:block;float:left;text-align:left;font-weight:bold;margin:0px 10px 10px 0px }


/* clearfix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }



.recentscrollablewrapper {overflow:hidden;width:960px;padding:0px;margin:0px auto;}
.clientscrollablewrapper {overflow:hidden;width:462px;padding:0px;margin:0px;}

.recentscrollablewrapper .scrollableelements {width:3000px} 
.clientscrollablewrapper .scrollableelements  {width:3000px}
.recentscrollablewrapper .scrollableelements .element {position:relative;float:left; width:960px; height:380px;}
.clientscrollablewrapper .scrollableelements .screenshot {position:relative;float:left; width:472px; height:345px;overflow:hidden}

.fixedcopy { float:left;width:472px;margin:0px 8px 0px 0px; border:0px solid #666;}


li.element {width:944px}

li.element .copy {float:left; width:472px; text-align:left }
li.element .img { float:right; width:472px; text-align:left;margin:0px 0px 0px 0px }

.links {width: 472px; }
.links ul { list-style:none; list-style-type:none;clear:both;padding:0px;margin:0px 0px 5px 0px;}
.links ul li { list-style:none; list-style-type:none;display: inline;}


.links ul li span {padding:10px;}
.links ul li a {font-size:10px; text-align:center}
.links ul li a:link {text-decoration:none;color:#999999}
.links ul li a:visited {text-decoration:none;color:#999999}
.links ul li a:hover {color: #FFF;}


#theysaid {height:250px}
#theysaidtrigger {cursor:pointer}


#theysaidquote {background: url(../../images/theysaidbg.png) no-repeat top left;height:240px;width:400px;display:none;cursor:pointer;z-index:7000}
#theysaid p {height:140px;width:360px;color:#ffffff;padding:20px 0px 20px 20px;}
#theysaid h2 {display:none}





#slideshowwrapper{
	position:relative;
	width:960px;
 padding:10px 0px;
	margin:10px auto;
}
	#slideshowwrapper #buttons{
		border:1px solid #777;
		margin-bottom:5px;
		width:679px;
	}
	
	#slideshowwrapper #buttons a{
		margin:10px 10px;
		color:#69C;
	}
	#slideshowwrapper .prev{
		float:left;
	}
	#slideshowwrapper .next{
		float:right;
	}

#slideshow{
	overflow:hidden;
	width:960px;
   background:#ffffff;
	border:0px solid #777;
}

	#slideshow ul{
		width:4000px;

		list-style:none; list-style-type:none;
	}

		#slideshow li{
			float:left;
			margin:0px 8px; 
			cursor:pointer;list-style:none; list-style-type:none;
		}


.caption-top, .caption-bottom {
	color: #ffffff;	
	padding: 10px;	
	cursor: default;
	border: 0px solid #334143;
	background: #999999;
 margin:0px 0px 0px 20px;

}
.caption-top {
   border-width: 0px;
}
.caption-bottom {
   border-width: 0px;
}
.caption a, .caption a {
	border: 0 none;
	text-decoration: none;
	background: #ffffff;
	padding: 0.3em;
}
.caption a:hover, .caption a:hover {
	background: #202020;
}
.caption-wrapper {
	float: left; margin:10px;
}
br.c { clear: both; }



.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #aaa;
}

.jScrollIntervalTrack { 
	position: absolute;

}

.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragLeft {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragRight {
	position: absolute;
	bottom: 0;
	right: 0;
	overflow: hidden;
}
a.jScrollArrowLeft {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	text-indent: -2000px !important;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
	width: 10px;
}
a.jScrollArrowLeft:hover {
	/*background-color: #f60;*/
}
a.jScrollArrowRight {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px !important;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
	width: 10px;
}
a.jScrollArrowRight:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
ul.blocks li.intro {width:232px;padding:10px 8px 0px 0px;vertical-align:top}
ul.recentblocks li.element {width:960px;padding:10px 0px 0px 0px;vertical-align:top}
.scroll-pane { background: #fff; float: left; padding: 0; }
#scrollingpane { height:357px; width: 944px; padding: 0; display: block; _overflow: hidden; }
a.jScrollArrowLeft { background: url(../../../images/pane/osx_arrow_up.png) no-repeat 0 0; }
a.jScrollArrowLeft:hover { background-position: 0 -15px; }
a.jScrollArrowRight { background: url(../../../images/pane/osx_arrow_down.png) no-repeat 0 0; }
a.jScrollArrowRight:hover { background-position: 0 -15px; }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { background-position: 0 -30px; }
.jScrollPaneTrack { background: #eee url(../../images/pane/trackbg.jpg) repeat-x; } 
.jScrollPaneDrag {background: #FBAA1B url(../../images/pane/drag_grab.gif) no-repeat 50% 50%;}

ul.blocks { padding: 0; width: 11000px; display: block; height: 350px; }
ul.recentblocks { padding: 0; width: 2100px; display: block; height: 350px; }

ul.blocks li { margin: 0 0 0 0px; float: left; display: block; padding:0 8px 0 0;}

ul.recentblocks li { margin: 0 0 0 0px; float: left; display: block; padding:0 8px 0 0;}
.holder { margin: 0; display: block; /* TEMP */ 
	padding:0px 8px 8px 8px;background:#ffffff;margin:0px 0px 10px 0px;width:944px;}
 
 
#numbering
{
    text-decoration:none;
	
    display:block;
    background-image:url(number_dots.png);
    background-position:191px 0;
}

#logo-link:hover,#logo-link:active  {background-position:0 0;}

#content ul.services {
	color: #55555; list-style:none; list-style-type:none;
}

#content ul.services li {
	line-height: 20px;
	background:url(../../images/side_arrow_sm_t2.png) no-repeat 0 0;
	padding: 0 0 0 20px;
}

.imagewrapper {float:right;width:472px;}