body { 
	margin:0px; padding:0px; 
	background-color:#000000; 
	color:#000; 
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	line-height:16px;
	overflow:hidden;
	}
h1 {margin:0; 
	padding:0; 
	display:inline; 
	font-size:inherit; 
	font-size:12px; 
	font-weight:bold; 
	color:#292A3C; 
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	}
	
h2 {font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	margin:0px;
	padding:0px;
	color:#000;
}
  
.float-right {
	padding:10px 20px;
	float:right;
	}
 
blockquote {
	text-style:italic;
	padding:5px 0 5px 30px;
	}
.accordion {
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	font-size:11px; 
	font-weight:bold;
	width:100%; 
	margin-left:auto; 
	margin-right:auto;
	}

.accordion a img  {
	display:block;
} /*  Keep images from underlineing */

.toggler {
	color:#000;
	margin: 0;
	font-size: 11px;
	font-weight: bold;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
.toggler_link a { 
	text-decoration:none;
	color:#0F0;
	}
.toggler_link a:link {
	color: #000;
	
	}
.toggler_link a:visited {
	color: #000;
	}
.toggler_link a:active {
	color:#030;
	}
.toggler_link a:hover {
	color:#000;
	text-decoration:underline;
	cursor:pointer;
	}
.toggler_one {
	border:1px dotted #999; 
	margin-top:2px; 
	padding:10px; 
	padding-left:80px;
	}
.toggler_two {	
	border-top:solid; 
	border-bottom:solid; 
	border-width:1px; 
	border-color:#999; 
	margin-top:0px; 
	padding:10px; 
	padding-left:80px;
	border-style:dotted;
	}
.toggler_pointer {
	cursor:pointer;
	}
	
.rounded_box
{   background-color: #F9F9F9;          /* if needed */
    border: 1px solid #CFCFCF;   /* if needed */
    -webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;/* for Safari */
    -moz-border-radius-bottomright: 4px;       /* for Firefox */
	-moz-border-radius-bottomleft: 4px;       /* for Firefox */
}

#wall {
	margin-left:auto; 
	margin-right:auto; 
	width:700px; 
	position:relative; 
	z-index:1001;
	}
#picture {
	position:absolute; 
	width:700px; 
	left:0;
	}
#popout {
	text-align:left; 
	float:right;
	}
#contact_ini {
	width:100px
	float:right;
	padding-top:4px; 
	font-weight:bold;
	text-align:right;
	}
#popout_main {
	width:240px; 
	padding-top:4px; 
	text-align:left; 
	line-height:18px; 
	padding:10px; 
	color:#6a6a6a;
	}
#popout_sec {
	width:310px; 
	font-size:13px; 
	text-align:center; 
	color:#000;
	margin:20px 0 0 14px;
	padding:0 0 45px 0;
	background-color:#F6F6F6;
	-webkit-border-radius: 2px;
    -moz-border-radius: 2px;       /* for Firefox */
	}
#banner {
	position:absolute; 
	left:30px
	}
#banner_copy {
	position:absolute; 
	left:30px;
	margin:30px 0 0 50px;
	width:315px; 
	line-height:20px; 
	color:#333333; 
	font-size:12px
	}
.banner_type {
	font-size:30px; 
	font-weight:normal; 
	font-family:'New Century Schoolbook' , Georgia, 'Times New Roman', Times, serif;
	margin:0 0 20px 0;
	}
#main_content {
	width:1755px; 
	position:relative; 
	z-index:1000
	}
#main_content_two {
	width:100%; 
	margin-left:auto; 
	margin-right:auto;
	}
#work_wall {
	background-color:#FFF; 
	height:420px; 
	padding-left:80px; 
	overflow: hidden; 
	color:#000; 
	position:relative;
	}
.work_table td {
	position:relative;
	overflow:hidden;
	}
.work_data {
	overflow:hidden; 
	height:380px;
	line-height:20px
	}
.work_images {
	border: 1px #ccc solid; 
	width:195px; 
	height:195px; 
	background-color:#FFF; 
	padding:10px; 
	position:relative; 
	z-index:10; 
	float:left;
	}
.work_images div {
	width:195px; 
	height:195px; 
	overflow:hidden; 
	background-color:#FFF
	}
.work_dropbox {
	position:relative; 
	border:1px #ccc solid; 
	width:215px; 
	height:215px;
	left:3px; 
	top:-213px; 
	background-color:#F5F5F5; 
	z-index:1; 
	float:left;
	}
.work_copy {
	color:#666;
	width:300px; 
	position:relative; 
	float:left; 
	top:-220px; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:9px;
	}
.work_copy h2 {
	color:#666
	}
.work_copy h2 a {
	color: #88400f;
	text-decoration:none;
	border-bottom:1px dotted #CCC;
	}
.work_copy span {
	color:#552343;
	font-size:11px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
	}
.work_other {
	color:#666;
	font-size:9px;
	line-height:18px;
	}
.work_other strong {
	font-weight:bold;
	color:#000;
	}
.work_hr {
	border-top:solid 1px #E1E3C3;
	margin:11px 0 8px 0;
	}
.work_link {
	color:#666;
	font-size:11px;
	font-weight:normal;
	line-height:21px;
	}
.work_link a {
	cursor:pointer;
	}
.work_link h3 {
	padding:0;
	margin:0;
	display:inline;
	color:#2e3367;
	font-weight:bold;
	border-bottom:1px dotted #CCC;
	font-size:11px;
	}
.programing {
	color:#003399;
	}
.consulting {
	color:#2f7500;
	}
.design {
	color:#CC6;
	}
#services_wall {
	background-color:#FFF; 
	height:350px; 
	padding-left:80px; 
	padding-bottom:20px; 
	overflow:hidden; 
	position:relative;
	}
.services { 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:11px; 
	color:#000; 
	font-weight:normal;
	}
.services td { height:25px;}
.services_type {
	font-family:Georgia, "Times New Roman", Times, serif; 
	font-size:14px; 
	color:#666
	}
.services span { 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:11px; 
	color:#000; 
	margin-left:30px; 
	font-weight:normal; 
	color:#666
	}
.services_one {color:#5e5411}
.services_two {color:#552343}
.services_three {color:#2e3367}
.services_four {color:#88400f}
.services_five {color:#5e5411}
.services_six {color:#552343}

#process_wall {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:11px; 
	color:#666; 
	font-weight:normal
	}
#process_wall td {
	padding-right:20px;
	}
#process_wall div { 
	height:142px; width:142px; 
	padding:12px 0 0 12px; 
	line-height:20px
	}
#process_wall h1 {
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; 
	display:block; 
	font-size:16px
}
#our_process {border:solid 1px #FFF;}
#our_process h1 { color:#666}
#our_research {border:solid 1px #5e5411;}
#our_research h1 { color:#5e5411}
#our_define {border:solid 1px #552343;}
#our_define h1 { color:#552343}
#our_construct {border:solid 1px #2e3367;}
#our_construct h1 { color:#2e3367}
#our_promote {border:solid 1px #88400f;}
#our_promote h1 { color:#88400f}

/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	width:1755px; 
	height:1170px;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 300px;
	width: 400px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 300px;
	margin: 0 auto;
	width: 400px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}