.img_gallery {

	.gallery_view_list,
	.gallery_thumbs_list {
		li {
			list-style-type: none;
			display: inline-block;
		}
	}

	.gallery_view {
		position: relative;
		margin: 0 auto;

		li {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			z-index: 1;
			@include transition(opacity .3s);
			text-align: center;
			background: $grey; // @fixme

			.img_container {
				max-width: 100%;
				padding: 0;
				margin: 0 auto;
				float: none;
				text-align: left;

				img {
					max-width: 100% !important;
					height: auto !important;
				}
			}
		}

		.active {
			z-index: 2;
			opacity: 1;
		}

		.gallery_browse {
			z-index: 5;
			position: absolute;
			top: 50%;
			margin-top: -20px;
			line-height: 40px;
			overflow: hidden;
			background-color: rgba(255,255,255,.5) !important;
			padding: 5px;
			text-indent: -400px;
			width: 50px;
			opacity: 0;
			@include transition(opacity .3s);

			&:before,
			&:after {
				font-weight: bold;
				font-size: 33px;
				line-height: 40px;
				position: absolute;
				left: 20px;
				text-indent: 0;
			}
		}

		&:hover .gallery_browse {
			opacity: 1;
		}

		.prev {
			&:before {
				content: "‹ ";
			}
			left: 0;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}

		.next {
			&:after {
				content: " ›";
			}
			right: 0;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}
	}

	.gallery_thumbs {
		text-align: center;
		padding: 30px;
		background: $grey; // @fixme

		li {
			border: 3px solid #fff;
			padding: 1px;
			@include transition(border-color .3s);
			margin: 2px;
		}

		li:hover,
		.active {
			border-color: $hilight_dark; // @fixme
		}
	}

	// falls kein JS aktiviert
	.nothasjs & {
		.gallery_view li {
			position: static;
			margin-bottom: 20px;
			opacity: 1;
		}
	}
}