
@mixin gradient-fade-right-left()
{
	background: -webkit-linear-gradient(left, $background-color-rgb, $background-color-rgb-fade);
	background: -o-linear-gradient(left, $background-color-rgb, $background-color-rgb-fade);
	background: -moz-linear-gradient(left, $background-color-rgb, $background-color-rgb-fade);
	background: linear-gradient(left, $background-color-rgb, $background-color-rgb-fade);
}

@mixin gradient-fade-left-right()
{
	background: -webkit-linear-gradient(right, $background-color-rgb, $background-color-rgb-fade);
	background: -o-linear-gradient(right, $background-color-rgb, $background-color-rgb-fade);
	background: -moz-linear-gradient(right, $background-color-rgb, $background-color-rgb-fade);
	background: linear-gradient(right, $background-color-rgb, $background-color-rgb-fade);
}

$photo-max-width: 800px;
$nav-width: 40px;
$control-spacing: 24px;
$gallery-bg-indicators: url('images/gallery-indicators-x2.png');
$gallery-bg-nav: url('images/gallery-nav-alt-x2.png');

@mixin gallery-layout-basic() {
	position: relative;
	margin: 0 auto;
	padding: 24px $nav-width;
	max-width: 880px;
	box-sizing: border-box;
	@media (max-width: 960px) {
		/*padding: 0 20px;
		width: 100%;*/
	}
}

article.gallery {
	@include article-layout-basic();
	width: $post-width-outer;
	main
	{
		@include gallery-layout-basic();
		ul.gallery-wrap.rslides {
			position: relative;
			margin: 0;
			padding: 0;
			width: 100%;
			list-style: none;
			overflow: hidden;
			li {
				-webkit-backface-visibility: hidden;
				position: absolute;
				display: none;
				width: 100%;
				left: 0;
				top: 0;
			}
			li:first-child {
				position: relative;
				display: block;
				float: left;
			}
			img {
				display: block;
				height: auto;
				/*float: left;*/
				width: 100%;
				border: 0;
  			}
		}
		div.rslides-controls-wrap
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 2em;
			text-align: center;
	
			div.rslides-controls
			{
				position: relative;
				margin: 0 auto;
				display: inline-block;
	
				ul.rslides_tabs {
					height: 24px;
					text-align: center;
					li {
						width: 24px;
						height: 24px;
						display: inline-block;
						background: $gallery-bg-indicators no-repeat center top;
						background-size: 24px 48px;
						opacity: 0.8;
						transition: opacity 0.5s;
						a {
							opacity: 0;
						}
					}
					li:hover {
						opacity: 1;
					}
					li.rslides_here {
						background: $gallery-bg-indicators no-repeat center bottom;
						background-size: 24px 48px;
						opacity: 0.8;
						transition: opacity 0.5s;
					}
					li.rslides_here:hover {
						opacity: 1;
					}
				}
	
				a {
					position: absolute;
					top: 0;
					width: $control-spacing;
					height: $control-spacing;
					opacity: 0.25;
					transition: opacity 0.5s;
				}
				a:hover {
					opacity: 0.8;
				}
				a.prev {
					left: -($control-spacing*1.5);
					background: $gallery-bg-nav no-repeat center top;
					background-size: 24px 48px;
				}
				a.next {
					right: -($control-spacing*1.5);
					background: $gallery-bg-nav no-repeat center bottom;
					background-size: 24px 48px;
				}
			}
		}
	}
}

li.landscape {
	aside {
		margin: 0 auto;
		padding: 1em 0;
		max-width: 480px;
		text-align: center;
	}
	span.description {
		display: block;
	}
}


