/* CSS Document */

body {
 	background: #013 url(images/bg-body.gif) repeat-x; 
	text-align: center;
	margin: 0; 
	padding: 0;
	font: 11px/16px Lucida Sans, Helvetica, sans-serif;
	color: #444;
	}
	
#wrapper { 
	padding: 50px 0 110px 0;
	background: url(images/bg-wrapper.jpg) no-repeat center top;
	}	
	
#container { 
	width: 900px;
	background: #FFF url(images/bg-container.jpg) no-repeat 0 176px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	display: block;
	position: relative;
	}
	
	.page-portfolio #container { 
		background: #FFF url(images/bg-containerPortfolio.jpg) no-repeat 0 176px;
		}
	
#banner { 
	height: 206px;
	width: 900px;
	clear: both;
	background: url(images/bg-banner.jpg) no-repeat;
	}
	
	#banner #logo {
		width: 320px;
		height: 148px;
		display: block;
		float: left;
		}
		
		#banner #logo a { 
			width: 320px;
			height: 135px;
			display: block;
			text-indent: -5000px;
			}
		
	#banner #ad {
		margin-left: 360px;
		margin-top: 25px;
		float: left;
		display: block;
		width: 198px;
		}
		
		#banner #ad a { 
			width: 198px;
			height: 82px;
			display: block;
			text-indent: -5000px;
			}
			
		#banner #ad a:hover { 
			background-position: 0 -82px;
			}
		
#menu { 
	position: relative;
	display: block;
	clear: both;
	height: 58px;
	background: #f3f3f3;
	margin-left: 225px;
	}
	
	#menu ul { 
		margin: 0; 
		padding: 0;
		list-style-type: none; 
		display: block;
		}
		
	#menu ul li { 
		margin: 0;
		padding: 0;
		display: block;
		float: left;
		}
		
	#menu ul li a.first { 
		height: 28px;
		width: 135px;
		text-decoration: none;
		outline: none;
		background-position: 0 0; 
		background-repeat: no-repeat;
		display: block;
		text-indent: -5000px;
		}
		
	#menu ul li a.first:hover { 
		height: 28px;
		background-position: 0 -28px; 
		}
		
		#menu ul li #home { background-image: url(images/menu-home.gif); }
		#menu ul li #services { background-image: url(images/menu-services.gif); }
		#menu ul li #studio { background-image: url(images/menu-studio.gif); }
		#menu ul li #clients { background-image: url(images/menu-clients.gif); }
		#menu ul li #portfolio { background-image: url(images/menu-portfolio.gif); }
	
		
			#menu ul li div.submenu {
				list-style: none;
				margin: 0 auto;
				padding: 0;
				background-image: none;
				border: none;
				z-index: 100;
				display: none;
				text-align: center;
				width: 675px;
				position: absolute;
				top: 28px;
				left: 0;
				}
			
			#menu ul li:hover div.submenu,
			#menu ul li.sfhover div.submenu {
				display: inline;
				top: 28px;
				background: #021d36 url(images/bg-submenu.gif) repeat-x;
				}
				
			#menu ul li > div {

				}
					
			#menu ul li div.submenu div.item {
				color: #89A;
				position: relative;
				z-index: 100;
				display: inline;
				margin: 0 2px;
				background-image: none;
				height: 30px;
				}
			
			#menu ul li div.submenu div.item a {
				padding: 10px 6px;
				color: #89A;
				text-decoration: none;
				line-height: 30px;
				background-color: transparent;
				border: 0;
				text-indent: 0;
				background-image: none;
				height: 30px;
				}
			
			#menu ul li.sfhover  div.submenu div.item a:hover,
			#menu ul li:hover  div.submenu div.item a:hover {
				color: #FFF; 
				}
				
			#menu ul li.sfhover a.first, 
			#menu ul li:hover a.first {
				background-position: 0 -28px; 
				}
			
				
			#menu ul li div.submenu div.item:hover,
			#menu ul li div.submenu div.item.sfhover { 
				color: #FFF;
				}
				
				
				
		.page-services #menu ul li a#services, 
		.page-studio #menu ul li a#studio, 
		.page-clients #menu ul li a#clients,
		.page-portfolio #menu ul li a#portfolio 
			{ background-position: 0 -28px; }
			
		.page-services #menu ul li.servicesMenu div.submenu,
		.page-studio #menu ul li.studioMenu div.submenu,
		.page-portfolio #menu ul li.portfolioMenu div.submenu 
			{
			display: block;
			background: #021d36 url(images/bg-submenu.gif) repeat-x;
			z-index: 0;
			}
			
		.page-portfolio #menu ul li.portfolioMenu div.submenu a  
			{ color: #89A; }
			
		.page-logos #menu ul li.portfolioMenu div.submenu .logos a,
		.page-identity #menu ul li.portfolioMenu div.submenu .identity a,
		.page-brochure #menu ul li.portfolioMenu div.submenu .brochure a,
		.page-publication #menu ul li.portfolioMenu div.submenu .publication a,
		.page-annual-report #menu ul li.portfolioMenu div.submenu .annual-report a,
		.page-advertising #menu ul li.portfolioMenu div.submenu .advertising a,
		.page-direct-mail #menu ul li.portfolioMenu div.submenu .direct-mail a,
		.page-website #menu ul li.portfolioMenu div.submenu .website a
			{ color: #FFF; }
			
			
#main { 
	clear: both; 
	}
	
#sidebar { 
	float: left;
	width: 185px;
	display: block;
	padding: 20px;
	margin-top: -30px;
	color: #888;
	}
	
	#sidebar h2 { 
		margin: -20px -20px 20px -20px;
		height: 30px; 
		width: 225px;
		background-repeat: no-repeat;
		display: block;
		text-indent: -5000px;
		background: #021d36 url(images/bg-submenu.gif) repeat-x;
		}
		
		#sidebar h2.featured { background: #FFF url(images/hd-featured.gif) no-repeat; }
		
	#sidebar h1 { 
		margin: -10px -20px 15px -20px;
		padding: 20px 20px 0 20px;
		font-size: 14px;
		font-weight: normal;
		color: #357;
		}
		
	#sidebar ul { 
		list-style-type: none;
		margin: 0;
		padding: 0;
		}
				
	#sidebar .viewMore { 
		color: #E52;
		font-size: 10px;
		font-weight: bold;
		text-align: right;
		}
		
		#sidebar .viewMore a { 
			color: #E52;
			text-decoration: underline; 
			border: none;
			}

		#sidebar .viewMore a:hover { 
			color: #048;
			}	
		
#content { 
	float: left;
	display: block;
	width: 635px;
	padding: 20px 20px 35px 20px;
	min-height: 415px;
	height: expression('450px');
	}

	.page-portfolio #content { 
		padding: 20px 20px 0 20px;
		min-height: 450px;
		height: expression('450px');
		}
		
	.page-studio #content { background: url(images/bg-studio.jpg) no-repeat right bottom; }
	.page-home #content { background: url(images/bg-home.jpg) no-repeat right bottom; }
	.page-services #content { background: url(images/bg-services.jpg) no-repeat right bottom; }
	
	#content ul { 
		list-style-type: none;
		padding: 0;
		margin: 0;
		}
		
	#content ul li {
		background: url(images/bullet.gif) no-repeat 5px 4px;
		padding: 0 0 0 20px;
		}
		
	#content a {
		color : #157;
		text-decoration: none;
		border-bottom: 1px solid #CDE;
		}

	#content a:hover {
		color : #379;
		text-decoration: none;
		border-bottom: 1px solid #ABC;
		}
		
	#content ul.servicesListing { 
		list-style-type: none;
		padding: 0;
		margin: 25px 15px;
		}	

	#content ul.servicesListing li {
		background: url(images/bullet.gif) no-repeat 5px 6px;
		padding: 0 0 0 20px;
		font-size: 14px;
		margin: 0 0 10px 0;
		color: #357;
		}
		
	#content h1 { 
		margin: 0 0 20px 0;
		}
		
	.homeContent {
		margin: 10px 20px;
		width: 405px;
		}
		
	#content .homeContent h1 { 
		margin: 0 0 30px 0;
		}

	#content a.discuss { 
		height: 24px;
		width: 218px;
		text-decoration: none;
		outline: none;
		background-position: 0 0; 
		background-repeat: no-repeat;
		background-image: url(images/discuss.gif);
		display: block;
		text-indent: -5000px;
		float: right;
		border-bottom: none;
		margin: 125px 0 0 0;
		}
	
	#content a.discuss:hover { 
		background-position: 0 -24px;
		}
	
#contentPortfolio { 
	display: block;
	position: relative;
	}
	
	
#footer { 
	clear: both;
	height: 40px;
	color: #579;
	font-size: 9px;
	background: #e9e9e9 url(images/bg-footer.gif) no-repeat 0 bottom; 
	text-align: left; 
	padding: 0 20px;
	line-height: 36px;
	letter-spacing: .03em;
	border-top: 1px solid #DDD;
	}	
	
	#footer a { 
		color: #579; 
		text-decoration: none; 
		}
		
	#footer a:hover { 
		color: #222; 
		}
		
	#footer .bar { margin: 0 5px; }
	
#column1 {
	float: left;
	width: 280px;
	padding: 0;
	margin: 0 20px 0 0;
	}

#column2 {
	float: left;
	width: 280px;
	padding: 0;
	}
	
p.sansBold {
	color: #f70;
	font: bold 14px/40px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	}

.sansBold {
	color: #f70;
	letter-spacing: 1px;
	font-weight: bold;
	font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	}

.contactInfo { 
	border-left: 1px solid #DEEDDE;
	padding: 0 0 5px 30px;
	margin: 0;
	}
	
	.contactInfo strong { 
		font-size: 12px;
		line-height: 20px;
		}
		
.left { 
	float: left; 
	display: block;
	width: 60px;
	color: #888;
	text-align: right;
	margin: 0 10px 10px 0;
	}
	
.right { 
	float: left; 
	display: block;
	width: 210px;
	margin: 0 0 10px 0;
	}
		
input.inputText, textarea { 
	width: 190px;
	border: 1px solid #DDD; 
	background: url(images/bg-input.gif) no-repeat 0 0;
	padding: 3px 5px;
	font: 11px/16px Lucida Sans, Helvetica, sans-serif;
	color: #444;
	}
	
.clear { clear: both; }

#logos { 
	position: absolute; 
	bottom: 55px;
	left: 0;
	width: 200px; 
	text-align: center;
	text-decoration: none;
	border: 0; 
	}
	
#logos a, #logos a:hover, #logos img { border: 0; text-decoration: none; padding: 0; border-bottom: 0; text-decoration: none; }

a { outline: none; }
img { behavior: url(/dev/js/iepngfix.htc); }
.hide { display: none; }

/* GALLERIA STYLES 
-----------------------------------------------------*/

.galleria { list-style:none; width:185px; }
.galleria li { display:block; width:80px; height:80px; overflow:hidden; float:left; margin:0; }
.galleria li a { display:none; }
.galleria li div { position:absolute; display:none; top:0; left:0; }
.galleria li div img { cursor:pointer}
.galleria li.active div img,.galleria li.active div { display:block; }
.galleria li img.thumb { cursor:pointer; top:0; left:0; display:block; width:auto; height:auto; }
* html .galleria li div span { width: 185px; } /* MSIE bug */

	/* BEGIN DEMO STYLE */
	.gallery { width: 185px; }
	.gallery ul { margin: 0; padding: 0; list-style-type: none; }
	.gallery li { width: 54px; height:42px; border:1px solid #CCC; margin: 0 5px 5px 0; background:#eee; }
	.gallery li.hover{ border-color:#bbb;}
	.gallery li.active{ border-style:solid; border-color:#777; }
	.gallery li div{}
	
	.captionPosition  { display:block; position: absolute; top: 300px; left: 20px; color: #99978b; width: 185px; font-weight: bold; }

	.caption { display:block; position: absolute; top: 320px; left: 20px; color: #99978b; width: 185px; }
	.captionTitle  { display:block; position: absolute; top: 300px; left: 20px; color: #99978b; width: 185px; font-weight: bold; line-height: 12px; }
	
	.galleria_container { padding: 0; }
	.galleria_container img { border: 0; width: 635px; height: 450px; }