body {
	background-color: #333C43;
	text-align: center;
	font-family: Helvetica, Arial;
	font-size: 14px;
	background-image:url(/images/tile-bg.jpg);
	background-repeat:repeat-x;
}


#page-wrapper {
	position: relative;
	text-align: left;
	margin: 0 auto;
	width: 1000px;
	height: 709px;
	background-image: url(/images/page-wrapper-bg.jpg);
	background-repeat: no-repeat;
}

#header {
	margin:auto 0px;
	height: 410px;
	margin-left:100px;
	
	background-image:url(/images/flash-placeholder.jpg);
	background-repeat:no-repeat;
}

#logo {

}
#logo a {
	display: block;
	margin: 0 auto;
	width: 457px;
	height: 193px;
	text-indent: -999em;
	overflow: hidden;
	background: transparent url(../images/logo-large.png) no-repeat top left;
}

#navigation {
	width: 1000px;
	height: 53px;
	background-image: url(/images/nav-bg.jpg);
}

#navigation ul {
	padding: 15px 0 0 175px;
	list-style-type: none;
}

#navigation ul li {
	display: block;
	float: left;
	padding-top: 3px;
	padding-right: 15px;
	margin-right: 15px;
	background-image: url(/images/nav-separator.gif);
	background-position: top right;
	background-repeat: no-repeat;
}

#navigation ul li.last { background-image: none; padding-right: 0; margin: 0; }

#navigation ul li a {
	display: block;
	background-position: 0 0;
	background-repeat: no-repeat;
	overflow: hidden;
	height: 0px;
	padding-top: 21px;
}

#navigation ul li a:hover, #navigation ul li a.selected {
	background-position: 0 -21px;
}

#navigation ul li a#nav-home { background-image: url(/images/nav-home.gif); width: 57px; }
#navigation ul li a#nav-aboutotl { background-image: url(/images/nav-about.gif); width: 57px; }
#navigation ul li a#nav-marketing { background-image: url(/images/nav-marketing.gif); width: 97px; }
#navigation ul li a#nav-web { background-image: url(/images/nav-web.gif); width: 42px; }
#navigation ul li a#nav-design { background-image: url(/images/nav-design.gif); width: 66px; }
#navigation ul li a#nav-pr { background-image: url(/images/nav-pr.gif); width: 27px; }
#navigation ul li a#nav-development { background-image: url(/images/nav-development.gif); width: 130px; }


.case-study-scroller-panel {
	margin: 0 25px;
	padding-top: 30px;
	display: none;
	height: 0;
	width: 950px;
	overflow: hidden;
	position: relative; /* IE fix */
}
.case-study-scroller {
	position: relative;
	width: 1140px;
}

.case-study {
	position: relative;
	display: block;
	float: left;
	margin: 0 20px;
}
.case-study a { position: relative; top: 0px; display: block; }



/* CASE STUDY CONTENT CONTAINER */
#content-panel-container { display:none; position:absolute; top:0; left:0; float:left; z-index: 10; color: #c6cac9;}
#content-panel-container div.bg-top { display: none; position:absolute;width:950px;background:url(/images/case-study-bg-top.gif) no-repeat top left;padding-top:10px;top:17px;left:25px;z-index:10;}
#content-panel-container div.bg-bottom {width:910px;height:67px;background:url(/images/case-study-bg-bottom.gif) no-repeat bottom left;padding:10px 20px 20px 20px;overflow:hidden;}

#content-panel-container a#logo-small { 
	float: left;
	display:block;
	height: 55px;
	width: 130px;
	text-indent: -999em;
	background: transparent url(../images/logo-small.png) no-repeat top left;
}
#content-panel-container a {color: #fff;}
#content-panel-container a#close-content-panel { display: none; float: right; text-decoration: none; }
#content-panel-container div.content-one-col { 
	height: 530px;
	margin: 0 45px;
	overflow: hidden;
}

#content-panel-container .text-scroller-wrapper {
	position: relative;
	overflow: hidden;
}

#content-panel-container .text-scroller-content {
	position: absolute;
	top: 0;
	left: 0;
}
#content-panel-container .scroll-controls {
	float: right;
	display: none;
	margin: 0 45px;
}

#content-panel-container div.content-left-col {float: left; width: 440px; margin: 0 0 0 45px;}
#content-panel-container h2 {background-repeat:no-repeat;height:81px;width:440px;text-indent:-999em; margin: 45px 0 25px 0; }

#content-panel-container p {
	margin-bottom: 10px;
}
#content-panel-container ul {
	margin: 0 0 10px 25px;
}

#content-panel-container #thumbs { }
#content-panel-container #thumbs img {float:left;margin-right:20px;}

#content-panel-container div.content-right-col { float: right; width: 380px; margin: 45px 0 0 0; color: #fff; }

#content-panel-container div.content-right-col h3 {
	background-repeat: no-repeat;
	overflow: hidden;
	height: 0;
	padding-top: 32px;
	margin-bottom: 5px;
}
#content-panel-container div.content-right-col h3#project { background-image: url(/images/project-heading.gif); }
#content-panel-container div.content-right-col h3#description { background-image: url(/images/description-heading.gif); }
#content-panel-container div.content-right-col h3#our-role { background-image: url(/images/our-role-heading.gif); }

#content-panel-container div.content-right-col div { margin-bottom: 15px; padding-left: 9px; color: #ccc; line-height: 120%; }

#contact-details {
	display: block;
	position: relative;
	padding: 0 0 20px 0;
	width:100%;
	color: #ddd;
	font-size: 12px;
}
#contact-details #tel-no {
	display: inline;
	padding: 0px 0px 0px 0; 
}
#contact-details #email {
	display: inline;
	padding: 0px 0px 0px 0px;
}
#contact-details a {
	color: #ddd;
	text-decoration: none;
}



/* CONTENT STYLING */


/* about text - this is a text-scroller so inherits properties from above, we just need to declare height
 here for the scroller to work */      
#about-text {
	height: 350px;
}

#gradleft
{
	background:url(../images/grad.png);
	background-repeat: no-repeat;
	width:200px;
	height:225px;
	position:absolute;
	z-index:1;
	display:none;
}

#gradright
{
	background:url(../images/gradright.png);
	background-repeat: no-repeat;
	width:225px;
	height:225px;
	position:absolute;
	z-index:1;
	left:900px;
	display:none;
}