/*
CSS Name: Schwarzgrau Nextgen
Description: NextGEN Schwarzgrau Gallery Stylesheet
Author: Marc Ruehl
Version: 1.0

This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it's only a template design

*/

.ngg-albumoverview,
.ngg-gallery {
	display: block;
	clear: both;
	overflow: hidden;
}

.ngg-album {
	margin: 0 9px 9px 0;
	background-color: #2e3234;
	position: relative;
	overflow: hidden;	
	width: 207px;
	height: 114px;
	float: left;
}

.ngg-album a img {
	width: 207px;
	height: 114px;
}


.ngg-album a .raster-box {
	display: none;
}

.ngg-album a .ngg-album-desc {
	display: none;
	width: 100%;
	height: 40px;
	padding: 10px;
	background-color: #2e3234;
	position: absolute;
	color: #b4b5b6;
	bottom: -60px;
	z-index: 2;
-webkit-transition: bottom 500ms cubic-bezier(1.000, 0.005, 1.000, 1.000);
   -moz-transition: bottom 500ms cubic-bezier(1.000, 0.005, 1.000, 1.000);
    -ms-transition: bottom 500ms cubic-bezier(1.000, 0.005, 1.000, 1.000);
     -o-transition: bottom 500ms cubic-bezier(1.000, 0.005, 1.000, 1.000);
        transition: bottom 500ms cubic-bezier(1.000, 0.005, 1.000, 1.000);
}

.ngg-album a:hover .ngg-album-desc {
	bottom: 0px;
-webkit-transition: bottom 350ms cubic-bezier(0.000, 0.000, 0.000, 1.000) 1s;
   -moz-transition: bottom 350ms cubic-bezier(0.000, 0.000, 0.000, 1.000) 1s;
    -ms-transition: bottom 350ms cubic-bezier(0.000, 0.000, 0.000, 1.000) 1s;
     -o-transition: bottom 350ms cubic-bezier(0.000, 0.000, 0.000, 1.000) 1s;
        transition: bottom 350ms cubic-bezier(0.000, 0.000, 0.000, 1.000) 1s; 
}

.ngg-album a .ngg-album-desc b {
	display: block;
	text-transform: uppercase;
	font-weight: normal;
	color: #fff;
}

.ngg-albumoverview .ngg-clear {
	display: none;
}

.ngg-gallery-desc {
	padding: 20px;
	background-color: #2e3234;
	margin-bottom: 9px;
}


.single-box .ngg-gallery {
	overflow: hidden;
	clear: both;
	margin: 0;
	padding: 0;
}

.single-box .ngg-gallery .ngg-album {
	width: 110px;
	text-align: center;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::: MEDIA QUERIES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*... Minimum width of 900 pixels ......................................................*/

@media screen and (min-width: 900px) {

	.ngg-albumoverview,
	.ngg-gallery {
		width: 648px;
		min-height: 369px;
		background: url(img/album_back.gif);
	}
	
	.ngg-album a img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
		-webkit-backface-visibility: hidden; /* Fix for transition flickering */
	}

	.ngg-album a:hover img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
		-webkit-filter: grayscale(0%);
	}

	.ngg-album a .raster-box {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		background: url(img/hover_raster.gif);
	}

	.ngg-album a:hover .raster-box {
		display: none;
	}
	
	.ngg-album a .ngg-album-desc {
		display: block;
	}

	
	.ngg-gallery-desc {
		width: 600px;
		height: 74px;
		display: table;
	}
	
	.ngg-gallery-desc span {
		display: table-cell;
		vertical-align: middle;
	}
	
	.single-box .ngg-gallery {
		width: 514px;
		min-height: 114px;
		background-image: url(img/album_film_back.gif);
	}

	.single-box .ngg-gallery .ngg-album {
		width: 162px;
		text-align: center;
	}

}