/*
---

name: Spin Galleries

provides: CSS.SPIN2Galleries

...
*/

.slideshowStyle1, .slideshowStyle2 { clear: both; margin-bottom: 0px; }
.slideshowStyle1:AFTER, .slideshowStyle2:AFTER {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear:both;
}

/* STYLE 1 */
.slideshowStyle1 {
	border-bottom: 1px solid #CCC;
	padding-bottom: 4px;
}

.grid .slideshowStyle1 .display {
	background-color: #EEE;
	height: auto;
	position: relative;
	overflow: hidden;
	width: 100%;
}
	.grid .slideshowStyle1 .display img {
		position: relative;
	}
	.grid .slideshowStyle1 .display .caption {
		background: url(/magazine/graphics/caption_background.png);
		background: rgba(0,0,0,.6);
		bottom: 0;
		height: auto;
		left: 0;
		margin: 0;
		opacity: 1;
		right: 0;
		visibility: visible;
		width: auto;
	}
		.grid .slideshowStyle1 .display .caption h4 {
			font-size: 1.539em;
			font-weight: bold;
			line-height: 1.1;
			margin-bottom: 0;
		}
		.grid .slideshowStyle1 .display .caption .read {
			background: url(/magazine/graphics/icons/sprite.icons.png) no-repeat 0 -457px;
			display: block;
			font-size: 0.9231em;
			font-weight: bold;
			line-height: 1.1667;
			margin-top: 10px;
			padding: 0 0 0 12px;
		}
	.grid .slideshowStyle1 .thumbs li {
		margin: 0 -3px 0 0;
	}

#main .oneColumn .slideshowStyle1 .caption h4,
#top .grid .twoColumnsSmallLeft .columnTwo .slideshowStyle1 .display .caption h4,
#top .grid .twoColumnsSmallRight .columnOne .slideshowStyle1 .display .caption h4,
#foot .grid .twoColumnsSmallLeft .columnTwo .slideshowStyle1 .display .caption h4,
#foot .grid .twoColumnsSmallRight .columnOne .slideshowStyle1 .display .caption h4 {
	font-size: 2.3077em;
	font-weight: bold;
    line-height: 1.2;
}
#top .oneColumn .slideshowStyle1 .caption h4,
#foot .oneColumn .slideshowStyle1 .caption h4 {
	font-size: 2.923em;
    line-height: 1.1053;
}
#top .oneColumn .slideshowStyle1 .caption p,
#foot .oneColumn .slideshowStyle1 .caption p {
	font-size: 1.3846em;
    line-height: 1.33334;
    margin-top: 8px;	
}

/* STYLE 2 */
.grid .slideshowStyle2 .display {
	background: #FFF;
	height: 232px;
	width: 308px;
}
.grid .slideshowStyle2 .thumbs {
	background-color: #C7C7C7;
	border-top: 1px solid #999;
	clear: both;
	padding: 0;
	width: 328px;
}
.grid .slideshowStyle2 .thumbs LI {
	background-color: #E3E3E3;
	height: 77px;
	margin-top: 0;
	position: relative;
	width: auto;
}
.grid .slideshowStyle2 .thumbs .selected {
	background: transparent;
	position: relative;
	z-index: 10;
}
.grid .slideshowStyle2 .thumbs .selected {
	margin: 0 0 0 -15px;
	padding: 0 0 0 15px;
}
	.grid .slideshowStyle2 .thumbs .selected:before {
		background: transparent;
		border: 0;
		border-top: 38px solid transparent;
		border-bottom: 38px solid transparent;		
		border-right: 15px solid #C7C7C7;
		content: '';
		display: block;
		height: 0;
		margin: 0 0 0 -15px;
		position: absolute;
		width: 0;
	}
	.grid .slideshowStyle2 .thumbs .selected:after {
		bottom: 0;
	}
	.grid .slideshowStyle2 .thumbs .selected .heading,
	.grid .slideshowStyle2 .thumbs .selected .heading A {
		color: #C60508;
		text-decoration: none;
	}
.grid .slideshowStyle2 .thumbs .caption {
	border: 1px solid #FFF;
	border-right: 0;
	height: 62px;
	padding: 6px 8px;
}
.grid .slideshowStyle2 .thumbs .selected .caption {
	padding-left: 9px;
}
.grid .slideshowStyle2 .thumbs .selected .caption {
	border-left: 0;
}
.grid .slideshowStyle2 .thumbs .caption:after {
	border-bottom: 1px solid #999;
	bottom: 0;
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	margin: 0 0 0 -9px;
}
	.grid .slideshowStyle2 .thumbs  .caption .heading {
		font-size: 1.2308em;
		font-weight: bold;
		line-height: 1.25;
		margin: 0;
	}
	.grid .slideshowStyle2 .thumbs  .caption .heading a {
		text-decoration: none;
	}
	.grid .slideshowStyle2 .thumbs  .caption .heading a:hover {
		text-decoration: underline;
	}

/* TOP/FOOT ONE COLUMN */
#top .oneColumn .slideshowStyle2 .display,
#foot .oneColumn .slideshowStyle2 .display {
	height: 353px;
	width: 529px;
}
#top .oneColumn .slideshowStyle2 .thumbs,
#foot .oneColumn .slideshowStyle2 .thumbs {
	width: 435px;
}
	#top .oneColumn .slideshowStyle2 .thumbs li,
	#foot .oneColumn .slideshowStyle2 .thumbs li {
		height: 117px;
	}
	#top .oneColumn .slideshowStyle2 .thumbs .selected,
	#foot .oneColumn .slideshowStyle2 .thumbs .selected {
		margin-left: -24px;
		padding-left: 24px;
	}
	#top .oneColumn .slideshowStyle2 .thumbs .selected:before,
	#foot .oneColumn .slideshowStyle2 .thumbs .selected:before {
		border-width: 59px 24px 58px 0;
		margin-left: -24px;
	}
		#top .oneColumn .slideshowStyle2 .thumbs .caption,
		#foot .oneColumn .slideshowStyle2 .thumbs .caption {
			padding: 16px 20px;
			height: 82px;
		}
		#top .oneColumn .slideshowStyle2 .thumbs .selected .caption,
		#foot .oneColumn .slideshowStyle2 .thumbs .selected .caption {
			padding-left: 21px;
		}
		#top .oneColumn .slideshowStyle2 .thumbs .caption:after,
		#foot .oneColumn .slideshowStyle2 .thumbs .caption:after {
			margin-left: -20px;
		}
			#top .oneColumn .slideshowStyle2 .thumbs .caption .heading,
			#foot .oneColumn .slideshowStyle2 .thumbs .caption .heading {
				font-size: 1.6923em;
				line-height: 1.2727;
			}