/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */


body {
	color: #777;
	font: 12px Arial, Helvetica, FreeSans, sans-serif;
	margin:0;
	padding: 0;
	background:#fff;
	
}

a img { border:none }


.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
  font-size: 0;  
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}




#accessibility {
	display:none;
}

/* anchors
----------------------------------------------- */
a, a:link {
	color: #f18d37;
	text-decoration:none;
}
a:visited {
	color: #f18d37;
}
a:link:hover, a:link:focus, a:visited:hover {
	color: #fdd38e;
}
a:link:active {
	color: #f18d37;
}

/* =Headings
--------------------------------------------------------------------------------*/
.scroll-pane h2, .scroll-pane h3, .scroll-pane h4, .scroll-pane h5, .scroll-pane h6 {
	line-height:1.2em;
	margin-bottom:0.7em;
	font-weight:normal;
}
h1 {
	font-size: 28px;
	color:#ef770e;
	margin:0 0 10px 0;
	text-transform:uppercase;
	font-weight:normal;
	padding:0;
}

h2 {
	font-size: 21px;
	color:#ef770e;
	margin:0 0 5px 0;
	text-transform:uppercase;
	font-weight:normal;
}


h3 {
	font-size: 17px;
	color:#ef770e;
	margin:0 0 10px 0;
	text-transform:none;
	font-weight:normal;
}


.scroll-pane h1 {
	font-size: 17px;
	color:#333;
	text-transform:none;
	margin-right:5px;
	
}
.scroll-pane h2 {
	font-size: 15px;
	color:#333;
	text-transform:none;
	margin-right:5px;
}
.scroll-pane h3 {
	font-size: 14px;
	color:#333;
	margin-right:5px;
}
.scroll-pane h4 {
	font-size: 13px;
	color:#333;
	margin-right:5px;

}
.scroll-pane h5 {
	font-size: 12px;
	color:#333;
	margin-right:5px;
}



/* paragraphs, quotes, Hr and lists
----------------------------------------------- */
p {
	margin-bottom:1em;
	line-height:17px;
	
}

.quoteLarge{font-size:22px;line-height:24px; margin:15px 0 15px 0; }
.quoteSmall{font-size:14px;}

.clear {
	clear:both;
}

ul, ol {
	margin: 0 0 0.7em -10px;
	
}




/* Header and Nav
----------------------------------------------- */
#headerContainer{width:100%; margin:30px 0 0 0; float:left; }
/*.headerContent{width:950px; margin:0 auto; position:relative; height:118px; background:url(/elements/images/header.png) 0 0 no-repeat;}*/
.headerContent{width:950px; margin:0 auto; position:relative; height:118px; background:url(/cms_show_image.php?id=21) 0 0 no-repeat;}
.homePage {height: 98px}
#hmLink{position:absolute; top:0; right:0; height:45px; width:650px; padding:0; margin:0;}
#hmLink a{display:block; height:45px; width:650px; padding:0; margin:0;  cursor:pointer;}

#headerNav{margin:0; padding:0; float:left; height:74px;}
#headerNav ul{margin:54px 0 0 28px; padding:0; float:left; list-style:none; }
#headerNav ul li{margin:0; padding:0 0 0 15px; width:107px; float:left; background:url(/elements/images/nav_divider.png) 0 0 no-repeat; }


#headerNav ul li a{text-transform:uppercase; font-family:"Gill Sans MT", "Gill Sans", Tahoma, "Lucida Sans Unicode", "Lucida Grande"; font-size:15px; color:#fff; float:left;
padding:0 55px 6px 0; margin-top:-2px; }
#headerNav ul li a:hover{color:#bc510a;}
#headerNav ul li a.active{ font-weight:bold;}

.headerSecNav{margin:0; float:left; width:950px; padding:0;}
.headerSecNav ul{ float:left; list-style:none; padding:0; }
.headerSecNav ul li{float:left; background:url(/elements/images/secnav_divider.png) 0 -1px no-repeat; margin:0; padding:0 0 0 11px; width:111px;}
.headerSecNav ul li.news{background:none; width:auto; padding-left: 5px;}
.headerSecNav ul li.newsFirst{background:url(/elements/images/secnav_divider.png) 0 -1px no-repeat; width:auto}

.headerSecNav ul li a{text-transform:uppercase; font-family:"Gill Sans MT", "Gill Sans", Tahoma, "Lucida Sans Unicode", "Lucida Grande"; font-size:13px; color:#333; float:left;
padding:7px 0 6px 0; }

.headerSecNav ul li a.active{font-weight:bold;}

/* Each Section requires different left margins to align with parent navigation item ---------- */
ul.subMenu0{margin: 0 0 0 21px;}
ul.subMenu1 {margin: 0 0 0 143px;}
ul.subMenu2{margin: 0 0 0 265px;}
ul.subMenu3{margin: 0 0 0 387px;}
ul.subMenu4{margin: 0 0 0 509px;}


/* Home Animation
----------------------------------------------- */
#homeHeroContainer{width:100%; margin:0; float:left;}
#homeHero{width:950px; margin:0 auto; padding:0;}
/*#homeHeroInner{background:url(/elements/images/slider_base.png) no-repeat; height: 256px}*/
#homeHeroInner{background:url(/cms_show_image.php?id=22) no-repeat; height: 256px}
#homeHero h1
{
	margin:0 0 0 70px; 
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
	cursor: pointer;
	font-family:"Gill Sans MT", "Gill Sans", Tahoma, "Lucida Sans Unicode", "Lucida Grande";
	-khtml-opacity:.40; -moz-opacity:.40; -ms-filter:”alpha(opacity=40)”; filter:alpha(opacity=40); opacity:.40;
}

/* For the current one, don't make it semi transparent */
#homeHero h1.current
{
	-khtml-opacity:1.0; -moz-opacity:1.0; -ms-filter:”alpha(opacity=100)”; filter:alpha(opacity=100); opacity:1.0;
}

/* ---------------------------------------------------------- */	
div.homeTitle
{
	height: 95px;
	width: 320px;
	margin-bottom: 1em;
}

#aArchitecture
{
	font-weight: 200;
	font-size: 0.93em;
}
/* ---------------------------------------------------------- */	

img.noMargin
{
	margin: 0;
}

.animHidden
{
	visibility: none;
	display: none;
}

/* This "floats" the titles over the transition slideshow images */
#nTitles
{
	position: fixed;
	padding-top: 26px;
	z-index: 99;
}

#slideshowHolder
{
	display: inline;
}


/* Secondary Pages 
-----------------------------------------------*/
#contentContainer{width:100%; margin:0; float:left; }
#content{width:950px; margin:0 auto; position:relative;}

	#leftColumn, #leftColumnLower{width:300px; float:left; padding:12px 0 0 0;}
	#rightColumn,#rightColumnLower{width:630px; padding:17px 0 0 20px; float:left; }
	#fullColumn{with:950px; float:left; padding:12px 0 0 0;}
		#rightColumn .rightPic{position:relative;}
		.picOverlay{position:absolute; bottom:0; left:0; padding:6px 5px 5px 5px; margin:0; width:620px; background-color:#fff; -khtml-opacity:.70; -moz-opacity:.70; -ms-filter:”alpha(opacity=70)”; filter:alpha(opacity=70); opacity:.70; z-index:99}
		.picOverlay p{margin:0; text-transform:uppercase; color:#333;}
	
	
	
	
	.gradientBreak{width:300px; height:5px; float:left; background:url(/elements/images/gradientbreak.jpg) 0 0 no-repeat; margin:0 0 22px 0;}
	
	/*.workIndexThumb{float:left; padding:0; margin:0 7px 7px 0; width:203px; height:149px; overflow:hidden; position:relative;} */
	.workIndexThumb{float:left; padding:0; margin:0 7px 7px 0; width:200px; height:147px; overflow:hidden; position:relative;}
	.workIndexOverlay{width:200px; height:147px; padding:1px 0px; margin:0; position:absolute; top:0; left:0;}
	.workIndexOverlay a{width:200px; height:19px; background:url(/elements/images/index_overlay.png) 0 0 no-repeat; display:block; cursor:pointer; color:#333; padding:131px 0 0 5px;}
	.workIndexOverlay a:hover{background-position:0 -148px; color:#fff;}
	.workIndexOverlay a span{color:#ef770e;}


.projectThumbContainer{float:left; margin:20px 0 0 0;}
	.projectThumb{float:left; padding:0; margin:0 6px 6px 0; width:70px; height:49px; overflow:hidden; position:relative;}
	.noMrg{margin-right:0;}
	.projectThumbOverlay{width:70px; height:49px; padding:0; margin:0; position:absolute; top:0; left:0;}
	.projectThumbOverlay a{width:70px; height:49px; background:url(/elements/images/thumb_overlay.png) 0 0 no-repeat; display:block; cursor:pointer; text-indent:-9999px; }
	
	.projectThumbOverlay a:hover, .projectThumbOverlay a.current{background:none;}
	
	
	
	
	

/* Scroll Pane
-----------------------------------------------*/
.scroll-pane
{
	width: 100%;
	overflow: auto;
}


.scroll-pane p{margin:0 5px 10px 0; color:#333;}
.scroll-pane p span{text-transform:uppercase; color:#666;}
.scroll-pane ul{color:#333;}
.scroll-pane ul li{line-height:17px;}
			
.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
	
}

/* This should not need any styles
.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}
*/

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #e2e3e4;
	position: relative;
}

.jspDrag
{
	background: #808184;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}



/* Homepage Specific Footer
----------------------------------------------- */
	
#hmFooterContainer{width:100%; margin:40px 0 0 0; float:left; padding-bottom:30px; }
#hmFooterContent{width:950px; margin:0 auto; }
	
#hmFooterNav{width:950px; float:left; border-bottom:1px solid #ef8823;}	
#hmFooterNav ul{margin:0; padding:0; float:right; list-style:none; }
#hmFooterNav ul li{margin:0; padding:0 15px 6px 10px; float:left; background:url(/elements/images/footer_divider.png) top right no-repeat; text-transform:uppercase; color:#747578; font-family:"Gill Sans MT", "Gill Sans", Tahoma, "Lucida Sans Unicode", "Lucida Grande"; font-size:12px; }
#hmFooterNav ul li.last{background:none; padding-right:0;}
#hmFooterNav ul li a{text-transform:none; color:#747578;}
#hmFooterNav ul li a:hover{ color:#fdd38e;}



/* Secondary Specific Footer
----------------------------------------------- */

#footerContainer{width:100%; margin:30px 0 0 0; float:left; padding-bottom:30px; }
#footerContent{width:950px; margin:0 auto; }
	
#footerNav{width:950px; float:left; border-bottom:1px solid #ef8823;}	
#footerNav ul.right{margin:0; padding:0; float:right; list-style:none; }
#footerNav ul.left{margin:0; padding:0; float:left; list-style:none; }
#footerNav ul li{margin:0; padding:0 12px 6px 7px; float:left; background:url(/elements/images/footer_divider.png) top right no-repeat; text-transform:uppercase; color:#666; font-family:"Gill Sans MT", "Gill Sans", Tahoma, "Lucida Sans Unicode", "Lucida Grande"; font-size:12px; }
#footerNav ul li.last{background:none; padding-right:0;}
#footerNav ul li.first{padding-left:0;}

#footerNav ul li a.small{text-transform:none; color:#747578;}
#footerNav ul li a.small:hover{text-transform:none; color:#fdd38e;}


#footerNav ul li.active, #footerNav ul li a.active{color:#333;}

/* Other styles added */
.hiddenItem
{
	display: none;
}

/* ===================================================================
   NEW styles added for the re-development.
*/

/* Span to make parts of the text orange */
span.orange{
	color: #F18D37;
}

/* Home canvas styles */
/* Do not set canvas width or height via CSS as it results in blurry output and things appearing the incorrect size */
#homeCanvas{
	cursor: pointer;
}

div.homeCategories{
	margin-top: 20px;
	height: 20px;
	margin-bottom: 25px;
}

#homeCategories div{
	float: left;
	width: 237px;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 2px;
}

#homeCategories div a {
	color: #000000;
}

/* Javascript will change the class as needed during the animation so titles fade in and out with the animation */
#homeCategories div a.o3 {opacity: 0.3;}
#homeCategories div a.o35 {opacity: 0.35;}
#homeCategories div a.o4 {opacity: 0.4;}
#homeCategories div a.o45 {opacity: 0.45;}
#homeCategories div a.o5 {opacity: 0.5;}
#homeCategories div a.o55 {opacity: 0.55;}
#homeCategories div a.o6 {opacity: 0.6;}
#homeCategories div a.o65 {opacity: 0.65;}
#homeCategories div a.o7 {opacity: 0.7;}
#homeCategories div a.o75 {opacity: 0.75;}
#homeCategories div a.o8 {opacity: 0.8;}
#homeCategories div a.o85 {opacity: 0.85;}
#homeCategories div a.o9 {opacity: 0.9;}
#homeCategories div a.o95 {opacity: 0.95;}
#homeCategories div a.o10 {opacity: 1.0;}

#homeCategories div a.off {
	color: #cccccc;
}

#homeCategories div a.on {
	color: #000000;
}

/*
#homeCategories div a {
	color: #c8c8c8;
}
*/

#homeCategories div a:hover
{
	color: #f18d37;
	opacity: 1.0;
}

.clears {
	clear: both;
}

/* ===========================  */
/* Styles for non-canvas slider */
.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
}

.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
	margin-left: 0px;
}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
}

.rslides li div {
    width: 100%;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 2px;
    color: #808080;
    font-size: 0.78em;
    float: left;
}

.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
}

.rslides_tabs {
    list-style: none outside none;
    max-width: 950px;
    text-align: center;
	height: 30px;
	z-index: 9999;
}
.rslides_tabs li {
    display: inline;
    float: none;
    margin-right: 1px;
	margin-left: 0px;
	background: url(../images/slide_button_off.png) no-repeat transparent;
	padding: 3px;
	z-index: 500;
}
.rslides_tabs a {
	color: #e7e7e7;
    display: inline-block;
    line-height: 0px;
    padding: 9px 15px;
	text-indent: -100px;
	overflow: hidden;
}
.rslides_tabs a:hover {
     border: 0 none;
}
.rslides_tabs li:first-child {
     margin-left: 0;
}
.rslides_tabs .rslides_here  {
	background: url(../images/slide_button_on.png) no-repeat transparent;
}


/* =========================================================== */
/* Styles for news reel / carousel */

.jcarousel {
    position: relative;
    overflow: hidden;
	width: 950px;
}

/*
	This is the container of the carousel items.
	You must ensure that the position is relative or absolute and
	that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
	These are the item elements. jCarousel works best, if the items
	have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
	width: 229px;
	height: 123px;
	margin-left: 7px;
	border-bottom: 4px solid #FFFFFF;
}

.jcarousel li.active {
    border-bottom: 4px solid #F18D37;
}

.jcarousel li a img{
	float: left;
	border: none;
}

.jcarousel li a {
	color: #333333;
	text-decoration: none;
}

.jcarousel li div{
	display: table-cell;
	vertical-align: middle;
	width: 130px;
	height: 117px;
	overflow: hidden;
	padding: 3px;
}

div.noCanvas {
	margin-top: 35px;
}

/* Styles for new key people page */
div.fullColumnKey
{
	float: left;
	width: 950px;
	padding: 12px 0 0;
}

table.keyPeople p
{
	margin: 0;
}

table.keyPeople td
{
	padding-bottom: 5px;
}

#leftColumnLower
{
	padding: 4px 0 0;
}

#rightColumnLower
{
	padding: 4px 0 0 20px;
}

div.lastRow
{
	margin-bottom: 0;
}

div.fullDivider
{
	float: left;
	padding: 0;
	margin-top: -3px;
}

table.keyPeople h3
{
	margin: 0;
}