/**
 * module.showcase.css 
 * CSS for the Showcase Pages. 
 * @author Tony Collings
 * @package MCD
 * @version 1.0 
 * @date Jan 2013
 */
 
 
/*	LAYOUT
	------------------------------------------------------------------------- */ 
	
	body.showcase div.page-content{
		padding: 20px 67px /* 1024 - 890/2 */; 
		padding-bottom: 67px; 
		width: 890x;    
	}
		.page-content h1.page-title {
			font-size: 38px; 
		}
	
	body.showcase ul.social-networking {
		position: absolute; 
		top: 10px; right: 67px;
		 
	}	
	
	div#item-container {
		position: relative;  
	}
	
	span.image-credit {
		display: inline-block; 
		padding: 5px 10px; 
		font-size: 10px; 
		position: absolute; 
		top: 10px; right: 20px; 	
		z-index: 300000; 
	}
	span.showcase-opacity:before {
		display: block; 
		position: absolute; 
		width: 100%; height: 100%; 
		background-color: #fff; 
		opacity: 0.5; 
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
		filter: alpha(opacity=50); 		
		content: " "; 
		top: 0px; left: 0px; 
		z-index: -1; 	
		-webkit-border-radius: 4px;
	    border-radius: 4px;		
		-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		border: 1px solid #a5a5a5; 
	}
	
	.is-spread #item-detail {
		width: 880px; overflow: hidden; 
	}
	.is-spread #item-detail img {
		height: 493px !important; width: auto !important; 	
	}
	.is-spread #item-preview {
		display: none; 
	}
		
		/* Left */ 
		#item-detail {width: 500px; height: 493px; overflow: hidden; position: relative !important; /* NOTE: For Mootools Effects! */ }
			#item-detail img {
				width: 500px; height: auto; 		
			}
			#item-detail img.detail-over {
				position: absolute; top: 0px; left: 0px; 	
			}
		/* Right */ 
		#item-preview {width: 380px; height: 493px; overflow: hidden; margin-left: 10px; position: relative !important; /* NOTE: For Mootools Effects! */ }
			#item-preview img {
				width: 380px; height: auto; 		
			}	
			#item-preview img.preview-over {
				position: absolute; top: 0px; left: 0px; 	
			}
		
	/* Scroller */ 
	div#item-scroller{
		width: 100%; 
		position: relative; 
		margin: 0px auto; 
		overflow: hidden;
		margin-top: 12px;  
	}
	a.scroll-control {
		position: absolute; 
		display: block; width: 20px; height: 20px; text-align: center; 
		top: 50px; 
			
	}
	a#scroll-left{
		left: -50px; 
	}
	a#scroll-right{
		right: -50px;	
	}
	div.scroll-mask {
		width: 100%; overflow: hidden; /* Set to auto to debug */  
		height: 91px; /* Height of Graphics */ 
	}
	div.scroll-content{
		width: 3000px; 	
		height: 91px; 
	}
		div.item {
			width: 70px; height: 91px; /* Size of Graphics */ 
			overflow: hidden; 
			position: relative; 
			float: left; 
			margin-left: 12px; 	
		}
		div.item:first-child{
			margin-left: 0px; 	
		}