body {
	background-color: #313131;
	margin: 0px auto;
	font-family: arial,helvetica,sans-serif;
	font-size: 12px;
	color: #c3c2c2;
}
img {
	border: none;
}
a {
	text-decoration: none;
	color: #c3c2c2;
}
a:hover {
	text-decoration: none;
	color: #fff;
}
strong {
	font-weight: bold;
	color: #fff;
}
h1 {
	margin: 0px;
	font-size: 30px;
}
h2 {
	margin: 0px;
	font-size: 24px;
	display: inline;
}
h3 {
	margin: 0px;
	font-size: 24px;
	display: inline;
	color: #48a942;
}
#header {
	width: 950px;
	height: 85px;
	padding-top: 10px;
	margin: 0px auto;
}
h1.logo {
	width: 305px;
	height: 65px;
	position: relative;
	left: -17px;
	top: -1px;
	color: #fff;
	font-family: arial,helvetica,sans-serif;
	font-size: 22px;
	font-weight: normal;
	margin: 0px;
}
h1.logo span {
	background: url(images/Todd_Associates_logo.jpg) top left no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: hand;
}
#wrapper {
	width: 950px;
	margin: 0px auto;
}

/* NAV STYLES */
#navbar {width: 950px; height: 30px; position: relative; background-color: #313131; margin: 0px; z-index: 1;}

#nav, #nav ul {padding: 0px; margin: 0px; list-style: none; width: 950px; letter-spacing: 1px; text-align: left;}

#nav li {float: left;}
#nav li a {float: left; text-decoration: none; font-family: arial,helvetica,verdana,sans-serif; font-size: 14px; color: #a7a9ac; padding-left: 50px;}
#nav li a b {display: block; float: left; height: 30px; line-height: 28px; padding: 0px 20px 0px 10px; font-weight: normal; cursor: pointer;}
#nav li.sub a b {background: url(images/down.png) no-repeat right 6px;}

#nav b.hover {color: #fff;}
#nav b.on {color: #fff;}
#nav i.hover {color: #fff;}
#nav em.hover {color: #fff;}

#nav ul {display: none;}
#nav ul {position: absolute; left: 0px; top: 30px; background: transparent url(images/navbar_bkg.png) top left repeat-x;}
#nav ul li {float: left; position: relative;}
#nav ul li a {display: block; padding: 0px 20px 0px 10px; font-size: 12px; line-height: 25px; cursor: pointer; color: #bcbec0;}
#nav ul li a i {display: block; font-style: normal; cursor: pointer;}
#nav ul li a.sub {background: url(images/down.png) no-repeat right 3px;}

#nav ul ul {width: 330px; left: 0px; top: 25px; background: transparent url(images/subnav_bkg.png) top left;}
#nav ul ul li a {display: block; line-height: 20px; padding: 0px 10px; width: 330px; color: #000;}
#nav ul ul li a em {font-style: normal; display: block; width: 330px; cursor: pointer; padding-bottom: 6px; letter-spacing: 0px;}

#nav li a.on b {float: left; text-decoration: none; font-family: arial,helvetica,verdana,sans-serif; font-size: 14px; color: #fff; font-weight: normal;}
#nav ul li a.on {text-decoration: none; font-family: arial,helvetica,verdana,sans-serif; font-weight: bold;}
#nav ul ul li a.on {font-style: normal; display: block; width: 330px; cursor: pointer; font-weight: bold; color: #fff;}

.title {color: #000; background: transparent url(images/navtitle_bkg.png) top left repeat-x; padding: 6px 10px; width:230px; margin-bottom: 6px;}

.subnav {padding-left: 84px;}
.subnav2 {padding-left: 18px;}
#nav ul ul.dropnavfirst  {width: 350px; left: 0px; top: 25px; background: transparent url(images/subnav_bkg.png) top left;}
#nav ul ul.dropnav  {width: 350px; left: 18px; top: 25px; background: transparent url(images/subnav_bkg.png) top left;}
#nav ul ul.dropnavlast  {width: 350px; left: -158px; top: 25px; background: transparent url(images/subnav_bkg.png) top left;}

#ct .ct, #ct_sustain .ct, #ct_urban .ct, #ct_leadership .ct, #ct_why .ct, #ct_links .ct {color: #fff;}
#ct_sustain .sustain, #ct_urban .urban, #ct_leadership .leadership, #ct_why .why, #ct_links .links {font-weight: bold; color: #bcbec0;}

#cd .cd, #cd_residential .cd, #cd_senior .cd, #cd_student .cd, #cd_conference .cd, #cd_worship .cd, #cd_learning .cd {color: #fff;}
#cd_residential .residential, #cd_senior .senior, #cd_student .student, #cd_conference .conference, #cd_worship .worship, #cd_learning .learning {font-weight: bold; color: #bcbec0;}
.residential, .senior, .student, .conference, .worship, .learning {background: url(images/down.png) no-repeat right 3px;}

#news .news, #careers .careers, #contact .contact {color: #fff;}

/* END NAV STYLES */
#slideshow {
	position: relative;
	width: 950px;
	height: 511px;
	margin: 0px auto;
	overflow: hidden;
}
#feature {
	position: relative;
	z-index: 0;
	width: 950px;
	height: 511px;
	margin: 0px auto;
	overflow: hidden;
}
#flashArea {
	width: 960px;
	height: 580px;
	margin-top: 120px;
	background-color: #313131;
	color: #fff;
	overflow: hidden;
}
#slidenav {
	position: relative;
	width: 950px;
}
#prevnav {
	position: absolute;
	top: -260px;
	left: 20px;
	display: none;
}
#nextnav {
	position: absolute;
	top: -260px;
	right: 20px;
	display: none;
}
#mainContent {
	background-color: #3f3f3f;
	margin: 10px 0px;
}
#container {
	clear: both;
	width: 950px;
	margin: 0px auto;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0px; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

#leftCol {
	width: 543px;
	float: left;
}
#leftCol .content {
	text-align: left;
	padding: 20px 0px 20px 14px;
	line-height: 1.8em;
	letter-spacing: 1px;
}
#rightCol {
	width: 407px;
	float: left;
}
#rightCol .content {
	text-align: left;
	padding:  20px 14px 20px 0px;
	line-height: 1.8em;
	letter-spacing: 1px;
}
#wideCol {
	width: 950px;
	float: left;
}
#wideCol .content {
	text-align: left;
	padding:  20px 14px;
	line-height: 1.8em;
	letter-spacing: 1px;
	text-align: justify;
}
#halfContent {
	background-color: #3f3f3f;
	margin-bottom: 10px;
}
#halfCol {
	width: 475px;
	float: left;
}
#halfCol .content {
	text-align: left;
	padding:  20px 14px;
	letter-spacing: 1px;
	line-height: 2em;
}
.white {
	color: #fff;
}
.float {
	float: right;
}
#slidebox {
	padding-top: 10px;
}
a.green {

}
a.green:hover {
	color: #48a942;
}
a.greennews {
	color: #48a942;

}
a.greennews:hover {
	color: #fff;
	
}
a.pdf {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 4px;
	vertical-align: middle;
	background: url(images/pdf.gif);
}
a.pdflink {
	padding-left: 24px;
	font-size: 11px;
	background: url(images/pdf_icon.gif) top left no-repeat;
}
.featuredImg {
  display: inline;
  float: left;
  height: 124px;
  overflow: hidden;
  position: relative;
  width: 393px;
  cursor: hand;
}
.featuredImg span {
  display: none;
}
.featuredImg:hover span {
  opacity: 0.75;
  filter: alpha(opacity = 75);
  background: #000;
  bottom: 0;
  display: block;
  font-size: 1.2em;
  padding: 8px;
  position: absolute;
  width: 393px;
}
* html .featuredImg:hover span {
  width: 393px;
}
.featuredImg:hover span b {
  display: block;
}
#scrollpane {
	width: 440px;
	height: 420px;
	overflow: auto;
}
#linknav {
	margin-top: 10px;
}
.linktext {
	margin: 10px 12px;
}
.arrownav {
	position: relative;
	top: 3px;
	padding-left: 6px;
}
#tag {
	width: 950px;
	height: 120px;
	margin: 0px auto;
	background: transparent url(images/footerTag.jpg) top center no-repeat;
}
#footer {
	width: 950px;
	margin: 0px auto;
}
#footer .content {
	font-size: 11px;
	color: #999;
	line-height: 1.4em;
	letter-spacing: 1px;
}
#footer .splash {
	font-size: 11px;
	color: #999;
	line-height: 1.4em;
	text-align: center;
}
#footer a {
	text-decoration: none;
	color: #999;
}
#footer a:hover {
	text-decoration: none;
	color: #fff;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 28px;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -4px;
	line-height: 1.1em;
	font-size: 26px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -4px;
	line-height: 1.1em;
	font-size: 26px;
}

/*END SIFR STYLES*/

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 870px;	
	height: 113px;	
	
	/* custom decorations */
	padding:0px;			
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;	
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:210px;
	padding:0px;
	font-size:30px;
	font-family: arial, helvetica, sans-serif;
	background-color: #ddd;
	margin-right: 10px;	
}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;		
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:25px;
	height:113px;
	background:url(images/left.png) no-repeat;
	float:left;
	margin:0px;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -113px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(images/right.png);
	clear:right;	
}

/* set hidden content to not display on initial load to avoid FOUC */

.js #related {display: none;}
.js #slidebox {display: none;}

/* related projects image slider styles */

#related {
  margin: 10px 0px;
}

.relatedImg {
  display: inline;
  float: left;
  height: 113px;
  overflow: hidden;
  position: relative;
  width: 210px;
  cursor: hand;
}
.relatedImg span {
  display: none;
  padding: 8px;
}
.relatedImg:hover span {
  opacity: 0.75;
  filter: alpha(opacity = 75);
  background: #000;
  bottom: 0px;
  display: inline-block;
  font-size: 12px;
  text-align: left;
  line-height: 1.2em;
  position: absolute;
  width: 210px;
}

* html .relatedImg:hover span {
  width: 210px;
}