p {
	font-size:11px;
}

#content {
	position: relative;
	height: 595px;
}

/* === DROPDOWN MENU === */
#dropdownFilters{
  width:695px;
  padding:0px;
}
	#dropdownFilters a {
		color:#ff4e00;
		font-size:1.3em;
		font-style:italic;
		text-decoration:none;
	}
	.filterLbl{
		padding-top:5px;
		padding-left:10px;
		padding-right:10px;
	}
	#DDmenuHldr{
		width:130px;
		padding-top:4px;
	}
		.DDmenu{
			width:120px;
		}

/* === SHOWCASE === */
	#showcaseContent {
		margin-top:5px;
		height:525px;
		width:694px;
	  float:left;
/*	 	border:1px solid #000;*/
	 	overflow:auto;
	}
		.showcaseThumbnail{
			float:left;
			margin:5px 6px;
		  height:120px;
		  width:152px;		  
		}
			.showcaseThumbnail:hover{
				background-color:#faf7f6;
				float:left;
				margin:5px 6px;
			  height:120px;
			  width:152px;		  
			}		
			.showcaseThumbnail:active{
				background-color:#faf7f6;
				float:left;
				margin:5px 6px;
			  height:120px;
			  width:152px;		  
			}				
.showcaseThumbnailImg img{
	border: 1px solid #fff;
}
	.showcaseThumbnailImg:hover img{
		border: 1px solid #ff4e00;
	}
	.showcaseThumbnailImg:hover p{
		color: #ff4e00;
	}
	.showcaseThumbnailImg:hover{
		color: #ff4e00; /* irrelevant definition to overcome IE bug */
	}
.showcaseThumbnailImgClicked{
	background-color:#faf7f6;
	float:left;
	margin:5px 6px;
	height:120px;
	width:152px;		
}


.showcaseThumbnailTitle{
	letter-spacing: -.015em;
	color: #252525;
	margin: 5px 0;
	position:relative;
	text-align:center;
	text-decoration: none;
}

/* === SIDEBAR CONTENT === */
#sideContent {
	background-color: #F5F5F5;
	position: absolute;
	padding: 10px;	
	top: 0;
	right: 0;
	width: 278px;
	height: 574px;
}
	#sideContent a { color: #FF4E00; text-decoration:none; }
	#sideContent h2 {
		margin: 0;
		padding-bottom:5px;
		width: auto;
		height: auto;
/*		background: url(/images/gallery/hdr_ourPortfolio.jpg) no-repeat;*/
		font-size: 24px;
		font-family: Arial, sans-serif;
		border-bottom:1px #ccc solid;
/*		text-indent: -9999px;		*/
	}
	#sideContent h3 {
		margin: 0;
		padding:5px 0;
		width: 283px;
		height: auto;
/*		background: url(/images/gallery/hdr_CharacterDrivenCampaign.jpg) no-repeat;*/
		font-size: 12px;
		font-weight:lighter;
		font-family: Arial, sans-serif;
		border-bottom:1px #ccc solid;
/*		text-indent: -9999px;		*/
	}
	#sideContent h4{
		font-size:14px;
		margin-top:10px;
		}
		#sideContentTop{
			width:283px;
			height:358px;
		}

div#description {
	font-size:11px;
	margin:10px 0 0 0;
	height:50px;
	padding-right:10px;
}
a, span#tryout #case_study #demo_video{
	font-size:12px;
	margin:10px 0;	
}		
/* ==== START JQUERY SLIDESHOW ==== 
	Important:
	Set the width of your slides If height not specified height will be set by the slide content, Set to display block
*/

#slides {
	position:relative;
	z-index:100;
}
	.slides_container {
		width:278px;
		overflow:hidden;
		position:relative;
		display:none;
	}
		.slides_container a {
			width:278px;
			height:212px;
			display:block;
		}
			.slides_container a img {
				display:block;
			}

/* ===== Next/prev buttons NOTE: NOT USED IN OUR IMPLEMENTATION!!!! ==== */

#slides .next,#slides .prev {
	position:absolute;
	top:200px;
	left:120px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:140px;
}


/*	==== Pagination ===== */
.pagination {
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	height:7px;
	padding:0px;
}
	.pagination li {
		float:left;
		margin:0 3px;
		list-style:none;
	}
		.pagination li a {
			display:block;
			width:19px;
			height:0;
			padding-top:7px;
			background-image:url(/images/jquerySlides/sprite_pagination.jpg);
			background-position:0 0;
			float:left;
			overflow:hidden;
		}
			.pagination li.current a {
				background-position:0 -7px;
			}


/*	==== Truncate text ===== */
/*
 * #content get replace with our own content div - in this case
 * 
 *#content {  
    width: 800px;
    clear:both;
    clip:auto;
    overflow: hidden;
}*/
.revealText {
    background: white; /* Strange problem in ie8 where the sliding animation goes too far
                            if revealText doesn't have a background color!  */
}
.hiddenText {

}
.readMore {
    cursor: pointer;
    color: blue;
}

.ellipsis {
    color: black;
}