/***********************************************************
                    fotoalbum.html -> styles.css

Projekt: die-Morgenlandfahrer.de
Autor:   Robert Kesseler
Datum:   7.3.2022
Version: 20.3.2022

Webseite für Der Kräuter-Krämer und Die Morgenlandfahrer.
Roswitha Fotoalbum

    die-Morgenlamdfahrer -> Allerley Teespecereyen -> Album 

Styles für das Fotoalbum



***********************************************************/




body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
/************************************
* object-fit um die Grafik einzupassen
*/
.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

/**************************
* div 
* die komplette Seite, der Rahmen für das Fotoalbum
******** */
.fotoalbum {
	position: relative;
	width: 100%;
	height: 100%;
   background-image: url("./pic/texture1.jpg");	
	
}

/***********************************************************
*  Zuerst der Satz styles für das Handy (Portrauit)
*/

/***********************************************************
* DAS EINZELNE Bild	
* DARUNTER SOLLEN NOCH Die Bildbeschreibung
* und die Steuerelemente		
***********/
.bild { /* Portrait */
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	/**** Handy first  *********/
	top: 0;
	width: 100%;
	height: 75%;

	border: 4px double brown;
}

.bild img { /* Portrait */
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.thumbs { /* Portrait */
	position: absolute;
   box-sizing: border-box;
	top: 80%;
	width: 100%;
	height: 20%;
	left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	border: 4px double brown;
}

.thumbs img { /* Portrait */
	padding: 2px;
   width: 20vh;
   height: 20vh;
   border: 0;
   object-fit: contain;
	cursor: pointer;
}

.thumbimage { /* Portrait */
border: 0;
}

.steuerung { /* Portrait */
	position: absolute;
	box-sizing: border-box;
	top: 75%;
	width: 100%;
	height: 5%;
	left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-y: hidden;
	overflow-x: auto;       
	align-items: center;
  	border: 4px double brown;
  	border-top: 0;
  	border-bottom: 0;
/*   justify-content: center; */	
}

.str-item { /* Portrait */
flex: 1;
border: black solid 2px;
cursor: pointer;
text-align: center;
}

.steuerung img { /* Portrait */
	padding: 2px;
   width: 100%;
   height: 100%;
   border: 0;
   object-fit: contain;
	cursor: pointer;
}

@media only screen and (min-height: 400px) {
	.steuerung img { /* Portrait */
   	height: 60%;
	}

}

/**************
* bild textbereich liegt unten innerhalb des  Bildes Unten
***********/
.bild-textbereich { /* Portrait */
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 70%;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    text-align: center;
    font-family: sans-serif;
    padding: 0 15% 0 15%;
    overflow: auto;
}

@media only screen and (orientation: Landscape) {

	/*********
	* DAS EINZELNE Bild	
	* DARUNTER SOLLEN NOCH Die Bildbeschreibung
	* und die Steuerelemente		
	***********/
	.bild { /* Landscape */
		top: 0;
		width: 80%;
		height: 95%;
		border: 4px double brown;
		border-right: 0;
		border-bottom: 0;
	}

	.thumbs { /* Landscape */
		position: absolute;
   	box-sizing: border-box;
		top: 0;
		width: 20%;
			height: 100%;
		left: 80%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-y: auto;
		overflow-x: hidden;
		border: 4px double brown;
	}

	.thumbs img { /* Landscape */
		padding: 2px;
	   width: 100%;
	   height: 20vh;
	   border: 0;
		object-fit: contain;
		cursor: pointer;
	}

	.thumbimage { /* Landscape */
	border: 0;
	}	

	.steuerung { /* Landscape */
		position: absolute;
		box-sizing: border-box;
		top: 95%;
		width: 80%;
		height: 5%;
		left: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-y: hidden;
		overflow-x: auto;
		border: 0;       
	
	   align-items: center;
	  	border: 4px double brown;
	  	border-right: 0;
	/*   justify-content: center; */	
	}

	.str-item {/* Landscape */
		flex: 1;
		border: black solid 2px;
		cursor: pointer;
		text-align: center;
	}
}