page, body, html {
    border: 0px none;
    height: 100%;
    left: 0px;
    margin: 0px;
    padding: 0px;
    top: 0px;
    width: 100%;
    position: absolute;
    overflow: hidden;
    background-color: #ffffff;
}

#container {    /* Der Bildrahmen inkl. Menüleiste, Nav-Schaltseiten und Preview-Hover-Bereichen */
    height: 89%; /* alt:83%/84%; */
    left: 0%;
    position: absolute;
    bottom: 6%;
    width: 100%;
    /*overflow: hidden;  braucht noch span.image-wrapper img max-width weg. Zu sehr Querformat wird abgeschnitten - ohne wird´s verzerrt. */
    text-align: center;

}

#MainpageBild{
	max-width: none;
	height: 110%;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	cursor: default;
	overflow: visible;
	/*	Border: 1px solid rgb(240,240,240); Style mit Rahmen */
	box-shadow: 0px 0px 0px;
}

span.image-wrapper, a.advance-link {	/* werden vom jquery.gallerific script angelegt!   */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0pt;
    left: 0pt;
}


.Pfeile{
	opacity: 0.23;
}


#Pfeil_links{
	float: right;
	z-index:14;
	top: 0px;
	height: 100%;
	cursor:pointer;
}

.half {
	top: 0px;
	z-index:14;
	height: 100%;
}

#half_rechts {
	float: left;
}

#half_links {
	float: right;
}

#Pfeil_rechts{
	float: left;
	z-index:14;
	top: 0px;
	height: 100%;
	cursor:pointer;
}

@media screen and (min-aspect-ratio: 2/3){
	span.image-wrapper img{		/* wird vom jquery.gallerific script angelegt   */
		max-width: 100%;
		max-height: 100%;
		position:relative;
		display:block;
		margin-left:auto; 
		margin-right:auto;
		cursor: default;
	/*    border-style: dotted;
		border-width: 0px;
		border-color: rgb(207,206,207);*/
	/*    box-shadow: 4px 7px 4px rgba(0, 0, 0, 0.2); */
	/*    border-color: rgb(170,170,170) rgb(204,204,204) rgb(204,204,204) rgb(180,180,180);*/
	}
}

@media screen and (max-aspect-ratio: 2/3){	/* höherformatig */
	span.image-wrapper img{		/* wird vom jquery.gallerific script angelegt   */
		max-width: 99%;
		max-height: 100%;
		position:relative;
		display:block;
		margin-left:auto; 
		margin-right:auto;
		cursor: default;
	/*    border-style: dotted;
		border-width: 0px;
		border-color: rgb(207,206,207);*/
	/*    box-shadow: 4px 7px 4px rgba(0, 0, 0, 0.2); */
	/*    border-color: rgb(170,170,170) rgb(204,204,204) rgb(204,204,204) rgb(180,180,180);*/
	}
}



.navigate {
	z-index: 3;
	position:absolute;
	/*background-color: #000; DEB*/
	height: 100%;
	width: 50%;
}

#navigate_back {
	left: 0px;	
}

#playPause{
	position: relative;
	width: 30px;
	height: 30px;
	margin: auto;
	background-image: url("../res/Play.ico");
	background-size: 100%;
	background-position: center;
	z-index: 0;
	bottom:-50%;
}

#navigate_fwd {
/* 	right: 0px; */
	left: 50%;
}

#rechteSeite{
	left: 50%;	
}

#linkeSeite{
	left: 0%;
}

#menuleiste{
	z-index: 3;
}
/* Thumbsleiste */

div.navigation { /* unter dem container, das, was eigentlich die images enthält */
/*	background-color: #000; Style a*/ 
}

div.navigation a.prev {
	background-image: url(../res/images/prevPageArrowWhite.gif);
}
div.navigation a.next {
	background-image: url(../res/images/nextPageArrowWhite.gif);
}

#thumbHider {

	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 1;
}

.navigation ul {
	position: relative;
/*	float: left; */
	margin: 0px;
	padding: 0px;
	height: 2em;
	bottom: 0px;
	list-style:none;
}

.navigation ul li {
    float: left;
    padding: 0px;
    margin: 1em; /*wirkt mit beim "unbewegtbleiben der anderen" beim hovern eines thumbs*/
    height: 1.2em;
    width: 1.2em;
    overflow: hidden;
    opacity: 1; /*0.78 */
    background-color: rgb(224,224,224);
	/*box-shadow: 1px 2px 2px rgba(0,0,0,0.3);*/
/*    box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.7); */
/*    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);*/
    border-radius: 50%;
    /*
    filter: grayscale(100%);
	-webkit-filter: grayscale(100%); 
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%); 
	-o-filter: grayscale(100%);
	filter: url(./res/desaturate.svg#greyscale);
	filter: gray;
	-webkit-filter: grayscale(1); 
	*/
}

.navigation ul a {
	padding: 0px;
	display: block;
	position: relative;
	height: 100%;
	/*sw-thumbs*/	
	left: 0%;

}
.navigation ul li.selected {
    height: 1.2em;
    width: 1.2em;
	padding:0px;
	border-width: 0px;
	border-style: solid;
	border-color: #111000; /* Farbe des Rahmens um das aktuelle Thumb */
	list-style: none;
	display: block;
	opacity: 1;
	background-color: rgb(136,136,136);
}
/*  für slices methode */
/*.navigation ul img:hover {
	*//*margin: 2px;*/
	/*sw-thumbs*//*
	left: -100%;
}*/


a.thumb:focus {
	outline: none;
}
.navigation ul img {
	border: none;
	padding: 0px;
	margin: 0px;
	display: block;
	height: 100%;
    width: auto;
    /*sw-thumbs*/
}

.navigation ul li img {
	opacity: 0;
}

.navigation ul li.selected img {
	opacity: 0;
}

.navigation ul li.hover {
	/* cooler effekt: margin: 4em; beim ersten bild! Dann sind die andern verzerrt, sieht cool aus */
    height: 2em;
    width: 2em;
    overflow: hidden;
    margin: 0.5em; /*muss abgestimmt sein auf die width, damit die anderen nicht verschoben werden beim hovern*/
	background-color: transparent;
/*	outline: 4px rgb(136,136,136) solid; */
	/* box-shadow: 1px 2px 2px rgba(0,0,0,0.3); */
/*    box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.7); */
/*    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);*/
    border-radius: 50%;
    border: 2px rgb(136,136,136) solid;
}

.navigation ul li.hover img {
	opacity: 1;
	
}



#swLi {
	opacity: 1;
	background-color: transparent;
}

#swImage {
	opacity: 1;
	position: relative;
	left:50%;
}

#homelink {
	text-decoration: none;
	cursor: pointer;
}


/* T */

div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../res/images/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
}