/*** Web publishing slideshows - ID7 ***/

#design-hp-tabs .design-slide-container {display: none;}

@media (min-width: 768px) {

	
	#design-hp-tabs {padding-top: 20px;}
	#design-hp-tabs ul.tabs {margin: 0px; padding: 0px;}
	#design-hp-tabs ul.tabs li { 
		display: inline-block;
		padding: 2px 12px;
		margin: 0px;
		margin-right: 6px;
		background-color: #dddddd;
		cursor: pointer;
		font-size: larger;
	}
	#design-hp-tabs ul.tabs li a:link, #design-hp-tabs ul.tabs li a:visited, #design-hp-tabs ul.tabs li a:hover {text-decoration: none;}
	#design-hp-tabs ul.tabs li.active { 
		background-color: white;
		border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd;
		z-index: 1;
		position: relative;
		cursor: text;
	}
	#design-hp-tabs ul.tabs li.active a:hover {cursor: text;}
		#design-hp-tabs .design-slide-container {display: block;}
	#design-hp-tabs div.pane { 
		border: 1px solid #dddddd;
		padding: 20px;
		position: relative;
		top: -1px;
	}
	/*** Panes with slideshows **/
	#design-hp-tabs div.pane .slideshow-container {
		position: relative; 
		height: 486px;
		margin: -20px;
	}
	#design-hp-tabs div.pane ul.slideshow-images {
		position: absolute; 
		top: 0;
		margin: 0;
		padding: 0; 
		width: 100%;
		list-style-type: none;
	}
	#design-hp-tabs div.pane ul.slideshow-images li {
		position: absolute;
		width: 100%;
		height: 440px;
		background-position: left top;
		background-repeat: no-repeat;
		/** background-size: contain; **/
	}

	.slideshowControl {
		position: absolute;
		bottom: 0px;
		right: 20px;
	}
	.slideshowControl .controller {
		background: transparent url('greysquare.png') top left no-repeat;
		display: inline-block;
		height: 21px;
		width: 21px;
		margin-left: 6px;
		cursor: pointer;
	}
	.slideshowControl .controller.active {
		background-image: url('bluesquare.png');
	}
	.design-slide-container .slideshow-container a.more-web-design {position: absolute; bottom: 30px; right: 40px;}
	
	/*** Caption text overlay on panes ***/
	#design-hp-tabs div.pane .slideshow-text {
		position: absolute;
		bottom: 0;
		color: white;
		background-color: black;
		width: 100%;
		padding: 20px;
		min-height: 8em;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter: alpha(opacity=80);
		-moz-opacity: 0.8;
		-khtml-opacity: 0.8;
		opacity: 0.8;
	}
	#design-hp-tabs div.pane .slideshow-text a:link, #design-hp-tabs div.pane .slideshow-text a:visited {color: white;}
	#design-hp-tabs div.pane .slideshow-text a:hover {color: #dddddd;}
	#design-hp-tabs div.pane .slideshow-text h3 {color: white;}
	
	#design-hp-tabs div.pane ul.slideshow-images li {
		background-position: 50% top;
	}
}

@media (min-width: 1200px) {
	#design-hp-tabs div.pane ul.slideshow-images li {height: 546px; 
		/** background-size: cover;**/
	}
	#design-hp-tabs div.pane .slideshow-container {height: 592px;}
}