/*font-style*/	  

.small { font-family:arial, helvetica, sans-serif; font-size: 11px; color:#898989}
.required { font-family:arial, helvetica, sans-serif; font-size: 11px; color:#e3141c}
.bodytxt {font-family:arial, sans-serif; line-height:18px; font-size:12px; color:#898989; }
.bodytxtbold {font-family:arial, sans-serif; font-weight:bold; line-height:18px; font-size:12px; color:#898989; }
.footergold {font-family:arial, sans-serif; line-height:14px; font-size:12px; color:#f7941c; }
.bodytxtgrnbld {font-family:arial, sans-serif; line-height:13px; font-weight:bold; font-size:12px; color:#4fb36a; }
.clienttxt {font-family:arial, sans-serif; line-height:18px; font-size:12px; color:#898989; }
.contact { font-family:arial, sans-serif; line-height:17px; font-weight:bolder; font-size:13px; text-transform:uppercase; color:#4fb36a; }
.mainnav { font-family:arial, sans-serif; line-height:17px; font-weight:bolder; font-size:14px; text-transform:uppercase; color:#ffffff; }
.tophdr { font-family:arial, sans-serif; font-weight:bold; font-size:30px; color:#ffffff; }
.mainhdr { font-family:arial, sans-serif; font-weight:bolder; font-size:48px; line-height:46px; text-transform:uppercase; color:#e2e2e2; }
.hdr1 { font-family:arial, sans-serif; font-weight:bold; font-size:29px; text-transform:uppercase; color:#898989; }
.subhdr { font-family:arial, sans-serif; font-weight:bolder; font-size:12px; text-transform:uppercase; color:#898989; }
.sidetab { font-family:arial, sans-serif; font-weight:bold; font-size:12px; text-transform:uppercase; color:#e2e2e2; }
.copywright {font-family:arial, sans-serif; line-height:11px; font-size:9px; color:#FFFFFF; }
 

/*main*/
BODY {	background-repeat:repeat-x; 
		background-image:url(../i/background-home.jpg); 
		background-color:#470c0e; 
		text-align:center;
		margin: 0px 0px;
		padding: 0px; }
		
#container
	{	background-image:url(../i/bg-top.jpg);
		background-repeat:no-repeat;
		background-color:transparent; 
		margin: 0em auto;
		width: 955px;
		height:auto;
		margin-left: auto;
		margin-right: auto;
		border: 0;
	}

#banner {
	margin-right: 0px;
	margin-left: 0px;
	height: 393px;
	width:955px;
	padding:0px;
	overflow:hidden;
	position:absolute;
	background-color: transparent;
	float:left;
	z-index:1;
		   }
		  
		   
#leftNav {
	height: 100%;
	width:240px;
	margin-top:45px;
	padding: 0;
	border-right: 1px solid #e2e2e2;
	float:left;
	text-align:left;
	position:relative;
		   }
		   
#leftNav ul {
	margin-left: 38px;
	margin-top:18px;
	padding: 0;
	text-align:left;
	width: 190px;
		   }
		   
#leftNav li {font-family:arial, sans-serif; width: 190px;
			list-style-type:none; line-height:13px; 
			font-size:11px; color:#898989; 
			padding: 0; 
			margin:0; }
			
			
#rightNav {
	height: 100%;
	width:280px;
	margin-top:25px;
	padding: 0;
	top:0px;
	right:20px;
	text-align:left;
	position:absolute;
		   }
		   
#rightNav ul {
	/*
Remove all styles here. It looks like they are redundant with #rightNav. 
*/

		   }
		   
#rightNav li {font-family:arial, sans-serif; width: 200px;
			list-style-type:none; line-height:13px; 
			font-size:11px; color:#898989; 
			padding: 0; 
			margin:0; }
			
hr.EBBdivider {	border:solid #e2e2e2; 
				border-width:1px 0 0 0; 
				height:0;line-height:0;
				font-size:0;
				width:240px;
				position:relative;
				margin:0;
				padding:0px; }			

.corehdr {margin-left:80px;font-size:18px;font-family:Arial, Helvetica, sans-serif;color:#4fb36a; }	
.testhdr {margin-left:0;font-size:18px;font-family:Arial, Helvetica, sans-serif;color:#4fb36a; }
.core li {list-style-image: url(../i/services-arrow.gif);
			margin-left:80px;
}	

#bodycontainer  {
	margin-left: 260px;
	margin-right:50px;
	margin-top:0px;
	text-align:left;
			   }


#bodycontainer ul { margin-right: 0px; margin-left: 20px; padding:0; text-align:left; }
#bodycontainer li {list-style-type:none; font-family:arial, sans-serif; line-height:20px; font-size:12px; color:#898989; }


#aboutcontainer  {
	margin-left: 240px;
	margin-right:280px;
	margin-top:0px;
	text-align:left;
			   }


#aboutcontainer ul { margin-right: 0px; margin-left: 20px; padding: 0; text-align:left; }
#aboutcontainer li {list-style-type:none; font-family:arial, sans-serif; line-height:20px; font-size:12px; color:#898989; }

#content {
	margin-right: 0px;
	margin-left: 0px;
	height: 642px;
	background-repeat:no-repeat;
	background-color:transparent; 
	margin: 0px 0px;
	padding: 0px;
}



#contentinterior {
	background-color:#ffffff;
	height: 100%;
	width:955px;
	padding:0px;
	position:relative;
	float:left;
		   }
			
/* @end */

#footer	{
	clear: both;
	height: 198px;
	width: 955px;
	background-color:transparent; 
	position:relative;
	padding:0px;
	margin-top:25px;
	float:left;
}

#footer p {
	font-family:arial, sans-serif;
	line-height:14px;
	font-size:12px;
	color:#a9151b;
	text-align: center;
	padding:0;
	margin:0;
}
			 
#footer ul { float: none; margin: 0px 10px 0px 0px; padding: 0px;}
#footer li	{width: 49px; border: 0px; margin-top: 10px; margin-left: auto; margin-right: auto; display:inline; list-style-type:none;}

#footercontact { display: block; width: 441px; height: 18px; background: url("../i/contact.png") no-repeat 0 0; }
			 	  	  


/*header*/

#logo {
	background-image:url(../i/js-interactive-logo.png);
	background-repeat:no-repeat;
	float:left;
	position:relative;
	width:325px;
	height:72px;
	top:13px;
	left:10px;
	padding:0px;
	margin:0px;
}

#top {
	background-color:transparent; 
	background-image:url(../i/corner-top.jpg);
	background-repeat:no-repeat;
	height: 134px;
	width:955px;
	padding:0px;
	position:relative;
	float:left;
		   }

#top ul { position:absolute;
			width:400px;
	     	height:30px;
	     	top:60px;
	     	left:38px;
	     	padding:0px;
	     	margin:0px;
		 }
		 
#top li { text-align:left; display:inline;list-style-type:none;float:left; }		 		
		   
#bottom {
	background-color:transparent; 
	background-image:url(../i/base.png);
	background-repeat:no-repeat;
	height: 31px;
	width:955px;
	padding:0px;
	position:relative;
	float:left;
		   }		   

#header { height:85px; background-color:transparent; position:relative; width:955px; }

#header ul {
	position:relative;
	top:5px;
	float:right;
	width:450px;
	padding-top:5px;
	padding-right:12px;
	margin:0px;
}
#header li {display:inline;list-style-type:none;float:left;width: 85px;padding:1px 2px 1px 2px;}
#header .front{border-right:solid 0px #F7941D; }
#header .last{}

#interiorNav {position:relative; padding:0; width:140px; margin-top: 20px; margin-left: 38px; }
#interiorNav li {list-style-type:none; padding:0px 0 10px 0px; }


#clientlist {position:relative; left:-40px;float:left; line-height:13px; width:120px; }
#clientlist li {list-style-type:none;padding:2px 12px 2px 0; margin:0;}
#clientlist a{color:#4fb36a; font-size:11px; text-decoration:none; }
#clientlist a:hover{color:#f7941d; }

/* @end */

	
/*Base Home */

#base { /* full column */
	background-color:transparent; 
	background-image:url(../i/plate.png);
	background-repeat:no-repeat;
	float:left;
	position:relative;
	width:955px;
	height:273px;
	top:369px;
	left:0px;
	margin: 0;
	padding:0;
}

#columnone  { /* individual web column */
	float: left;
	width: 224px;
	height:225px;
	margin-left:10px;
	padding:0;
	text-align:left;
	position:relative;
	padding: 25px 0px 0 0px;
	background-color:transparent;
	display:inline;
}

#columntwo  { /* individual print column */
	float: left;
	width: 224px;
	height:225px;
	margin-left:10px;
	padding:0;
	text-align:left;
	position:relative;
	padding: 25px 0px 0 0px;
	background-color:transparent;
	
}

#columnthree  { /* individual video column */
	float: left;
	width: 224px;
	height:225px;
	margin-left:10px;
	padding:0;
	text-align:left;
	position:relative;
	padding: 25px 0px 0 0px;
	background-color:transparent;
	
}

#columnfour  { /* individual 3d column */
	float: left;
	width: 224px;
	height:225px;
	margin-left:10px;
	padding:0;
	text-align:left;
	position:relative;
	padding: 25px 0px 0 0px;
	background-color:transparent;
	
}


.column { 
	float: left;
	width: 224px;
	height:101px;
	padding:0;
	margin:0;
	text-align:left;
	background-color:#e2e2e2;
	position:relative;
	list-style-type:none;
}

.columnimg	{list-style-type:none;float:left;padding:10px 10px 10px 10px;width: 205px; }

.date { font-family:arial narrow, helvetica, sans-serif; 
			font-weight:bold; font-size: 13px; 
			color: #fb9902; text-align:left; padding-bottom:10px;
			margin:0; }	
			
.title { font-family:arial, helvetica, sans-serif; 
		     text-transform:uppercase; 
		     font-size:12px; font-weight:bold; 
		     color:#fb9902; 
			 margin-top: 10px;
			 margin-bottom:0;
		     float: left;
		     text-align: left;
		     width: 224px;
		     padding: 0;}	
		
.caption {  font-family:arial, helvetica, sans-serif; font-size:11px; line-height:14px; color: #4fb36a; 
			 margin:0;
			 margin-bottom:0;
		     float: left;
		     text-align: left;
		     width: 224px;
		     padding: 0;}			
	
/*Base Interior */

#baseinterior {
	background-color:transparent; 
	float:left;
	width:955px;
	height:118px;
	left:0px;
	margin:0;
	padding-top: 10px;
}

#interiorcolumnone { 
	float: left;
	width: 224px;
	height:101px;
	padding:0;
	margin-left:10px;
	background-color:#e2e2e2;
	position:relative;
}

#interiorcolumntwo { 
	float: left;
	width: 224px;
	height:101px;
	padding:0;
	margin-left:10px;
	background-color:#e2e2e2;
	position:relative;
}

#interiorcolumnthree { 
	float: left;
	width: 224px;
	height:101px;
	padding:0;
	margin-left:10px;
	background-color:#e2e2e2;
	position:relative;
}

#interiorcolumnfour { 
	float: left;
	width: 224px;
	height:101px;
	padding:0;
	margin-left:10px;
	background-color:#e2e2e2;
	position:relative;
}

 
.interiorimg {list-style-type:none;float:left;padding:10px 10px 10px 10px;width: 205px; position:relative;}

#videodesc {
	height: 100%;
	width:630px;
	margin:0px;
	padding-top: 30px;
	float:left;
	position:relative;
		   }

		
/* Main nav */
#home { display: block; width: 85px; height: 38px; background: url("../i/home-butn.gif") no-repeat 0 0; }
#home:hover { background-position: 0 -38px; }
#home:active { background-position: 0 -76px; }
#home span { display: none; }

#work {display: block; width: 85px; height: 38px; background: url("../i/work-butn.gif") no-repeat 0 0; }
#work:hover { background-position: 0 -38px; }
#work:active { background-position: 0 -76px; }
#work span { display: none; }

#about { display: block; width: 85px; height: 38px; background: url("../i/about-butn.gif") no-repeat 0 0; }
#about:hover { background-position: 0 -38px; }
#about:active { background-position: 0 -76px; }
#about span { display: none; }


#blog { display: block; width: 85px; height: 38px; background: url("../i/blog-butn.gif") no-repeat 0 0; }
#blog:hover { background-position: 0 -38px; }
#blog:active { background-position: 0 -76px; }
#blog span { display: none; }

#services { display: block; width: 85px; height: 38px; background: url("../i/services-butn.gif") no-repeat 0 0; }
#services:hover { background-position: 0 -38px; }
#services:active { background-position: 0 -76px; }
#services span { display: none; }

#contact { display: block; width: 85px; height: 38px; background: url("../i/contact-butn.gif") no-repeat 0 0; }
#contact:hover { background-position: 0 -38px; }
#contact:active { background-position: 0 -76px; }
#contact span { display: none; }

/* @end */

/* about nav */

#ataglancetab { display: block; width: 80px; height: 10px; background: url("../i/AtAGlance-tab.gif") no-repeat 0 0; }
#ataglancetab:hover { background-position: 0 -10px; }
#ataglancetab:active { background-position: 0 -20px; }
#ataglancetab span { display: none; }

#thedifferencetab { display: block; width: 104px; height: 10px; background: url("../i/TheDifference-tab.gif") no-repeat 0 0; }
#thedifferencetab:hover { background-position: 0 -10px; }
#thedifferencetab:active { background-position: 0 -20px; }
#thedifferencetab span { display: none; }

#philosophytab {display: block; width: 77px; height: 10px; background: url("../i/philosophy-tab.gif") no-repeat 0 0; }
#philosophytab:hover { background-position: 0 -10px; }
#philosophytab:active { background-position: 0 -20px; }
#philosophytab span { display: none; }

#coreservicestab {display: block; width: 98px; height: 10px; background: url("../i/CoreServices-tab.gif") no-repeat 0 0; }
#coreservicestab:hover { background-position: 0 -10px; }
#coreservicestab:active { background-position: 0 -20px; }
#coreservicestab span { display: none; }

#testimonialstab { display: block; width: 88px; height: 10px; background: url("../i/testimonials-tab.gif") no-repeat 0 0; }
#testimonialstab:hover { background-position: 0 -10px; }
#testimonialstab:active { background-position: 0 -20px; }
#testimonialstab span { display: none; }

#contacttab { display: block; width: 59px; height: 10px; background: url("../i/contact-tab.gif") no-repeat 0 0; }
#contacttab:hover { background-position: 0 -10px; }
#contacttab:active { background-position: 0 -20px; }
#contacttab span { display: none; }


/* worknav */

#brandtab { display: block; width: 101px; height: 10px; background: url("../i/brand-tab.gif") no-repeat 0 0; }
#brandtab:hover { background-position: 0 -10px; }
#brandtab:active { background-position: 0 -20px; }
#brandtab span { display: none; } 

#printtab { display: block; width: 148px; height: 10px; background: url("../i/print-tab.gif") no-repeat 0 0; }
#printtab:hover { background-position: 0 -10px; }
#printtab:active { background-position: 0 -20px; }
#printtab span { display: none; }

#webtab { display: block; width: 183px; height: 10px; background: url("../i/web-tab.gif") no-repeat 0 0; }
#webtab:hover { background-position: 0 -10px; }
#pwebtab:active { background-position: 0 -20px; }
#webtab span { display: none; }

#videotab { display: block; width: 89px; height: 10px; background: url("../i/video-tab.gif") no-repeat 0 0; }
#videotab:hover { background-position: 0 -10px; }
#videotab:active { background-position: 0 -20px; }
#videotab span { display: none; }

#phototab {display: block; width: 93px; height: 10px; background: url("../i/photo-tab.gif") no-repeat 0 0; }
#phototab:hover { background-position: 0 -10px; }
#phototab:active { background-position: 0 -20px; }
#phototab span { display: none; }

#threedtab { display: block; width: 84px; height: 10px; background: url("../i/3d-tab.gif") no-repeat 0 0; }
#threedtab:hover { background-position: 0 -10px; }
#threedtab:active { background-position: 0 -20px; }
#threedtab span {display: none; }


/*gallery */

.thumbnail
{
float: left;
width: 198px;
border: 0;
margin: 0 5px 5px 0;
padding: 0;
}

.clearboth { clear: both; }


/* Online Form */

/* form.css */

.contactus{
	padding: 0px;
	padding-top: 30px;
	padding-bottom: 30px;
}

div.fieldframe{ 
width: 500px; 
overflow: hidden;
padding: 5px 0;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:13px;
color:#898989;

}

div.fieldframe label.styled{ 
float: left;
width: 150px; /*width of label (left column)*/
text-align:right;
border-bottom: 0;
margin-right: 10px; 
}

div.fieldframe div.textfield{ 
float: left;
margin-bottom: 5px; /* space following the field */
}

div.fieldframe div.textfield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}

div.fieldframe div.textfield textarea{ /* style for TEXTAREA fields. */
width: 250px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; 
/*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 67px;
}

/* slideshow */

#clientdesc {
	height: 100%;
	width:620px;
	margin:0px;
	padding-top: 10px;
	float:left;
	position:relative;
		   }
		   
/* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */



/* Easy Slider */

	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}

	#slider li{
		/* 
			
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:630px;
		height:310px;
		overflow:hidden;
		}	
#prevBtn, #nextBtn{ 
		display:block;
		width:38px;
		height:38px;
		position:absolute;
		left:245px;
		top:170px;
		}	
	#nextBtn{ 
		left:870px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:38px;
		height:38px;
		background:url(../i/btn_prev.png) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(../i/btn_next.png) no-repeat 0 0;	
		}