@charset "UTF-8";

	html,body{
		overflow: hidden;
	}
	IMG.center {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width:55%;
		margin-top:3%;
	}
 
 /*--------------------text---------------------*/
	
	#textframe {
		position:absolute;
	
		left:26%;    
		top:76%;     
	 
 		background-image:url(../grafiken/Rahmen_Bildwoerter.svg); 
		background-size: contain;
    	background-repeat: no-repeat;
    	width: 33%;      /*av */
    	height: 0;
    	padding-top: 4.95%; /* adjust!!! (img-height / img-width * width) */
                /*  *0.15 */
		
		
		display: table; 
		vertical-align: middle;
	}
	
/*----------------------------------------------*/
	
	.arrowContainer {
		position:absolute;
		
		left:66%;     	/*aw   min 16 + 45 */
		top:22%;    	/*aw*/
		 
		background-image:url(../grafiken/Rahmen_Text.svg); 
		background-size: contain;
		background-repeat: no-repeat;
		width: 17%;
		height: 0;
		padding-top: 36.72%; /* adjust!!! (img-height / img-width * width) */
					/* (214 / 463) = 2.16 */
	}
	
	.arrow {
		position:absolute;
		width:22%;
		height:auto;
		left:39%;
		cursor:pointer;
	}
		
	#arrowUp {
		top:5%;
	}
	
	#arrowDown {
		top:88%;
	}

	#wordsContainer {  
		position:absolute; 
		 
		top:18%;	/*w*/
		left:10%;   /*w*/
		width: 89%; /*w*/
		height: 100%;
	}

	#wordsContainer div
	{
		width: 6.4vw;
	/*	height: 6vw;*/
		display: inline-block;
		position: relative;
	/*	vertical-align: middle;*/
		line-height: 6vw;
		padding: 0.5vw;
	}

	#wordsContainer div img
	{
		display: inline-block;
		width: 80%;
		margin: 1%;
		max-height: 6vw;
	}

	#wordsContainer div>span
	{
		position: absolute;
		bottom: -1vw;
		left:-200px;
		right:-200px;
		text-align: center;
		z-index: 1;
		display: none;
		pointer-events: none;
	}

	#wordsContainer div:hover>span
	{
		display: block;
	}

	#wordsContainer div>span>span
	{
		font-size: 30px;
		font-family: Verdana, Geneva, sans-serif;
		white-space: nowrap;
		border-radius: 10px;
		padding: 5px;
		color: #000;
		background-color: white;
		border: 1px solid #000;
	}


/* ------------------------------------------- */
/* --              Video-Player             -- */
/* ------------------------------------------- */

.videoFrame
{
	position:absolute;
	left:20%;   /*aw*/   /*av */
	top:22%;    /*aw*/
	width:42.7vw;
	height:24.5vw;

	background-image:url(../grafiken/Rahmen_16_9.svg);
	background-repeat:no-repeat;
	background-position: 0% 0%;
	background-size:100%;

	padding: 0px;
	padding-left:1vw;
	padding-top:.9vw;
	
}
.videoFrame iframe
{
	width:42.5vw;
	height:23.90625vw;
	margin: 0px;
	padding: 0px;
}


/* video-only mode on portrait viewport layout */
@media (max-aspect-ratio: 6/5)
{
	.arrowContainer,#cornerButtonsContainer, #menuLeftIconsContainer {
		display: none;
	}
	.videoFrame {
		left: 0px;
		top: 0px;
		bottom: 0px;
		right: 0px;
		width: auto;
		height: auto;
		background: none;
	}
	.videoFrame iframe{
		width: 100%;
		height: 100%;
	}
}

/* ------------------------------------------- */
/* ---        Buttons rechts unten         --- */
/* ------------------------------------------- */

.button_right
{
        display: inline-block;
        background-color: transparent;
        transition: background-image 1s;
        background-size: contain;
        width:    6vh;
        height:   6vh;
	border: none;
}

#createComicButton
{
        background-image: url(menu/tricktisch_in_kreis.svg);
}
#createSheetButton
{
        background-image: url(menu/arbeitsblatt_anlegen.svg);
}
#comicsArchiveButton
{
        background-image: url(menu/archiv.svg);
}
#sheetsArchiveButton
{
        background-image: url(menu/arbeitsblatt_archiv.svg);
}

#soundArchiveButton
{
        background-image: url(grafiken_trickfilm/audio.svg);
}
#backgroundArchiveButton
{
        background-image: url(grafiken_trickfilm/hintergrund.svg);
}

#cornerButtonsContainer
{
	text-align:center;
	padding-top: 1vw;
}

#cornerButtonsContainer a
{
        text-decoration: none;
	position:relative;
}

#cornerButtonsContainer div
{
        /*margin-top: 1vw;*/
	display: inline-block;
	
}
.button_container_div
{
        position: relative;
        display: inline-block;
}
.anchor_div
{
        position: absolute;
        width:    35vw;
        height:    0px;
        top:       0px;
        left:      0px;
}
.selection_div
{
        position: absolute;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        bottom: 2vh;
	width: auto;
	white-space: no-break;
        /*width: 35vw;*/
        vertical-align: middle;
	border: 4px solid #000;
	height: 50vh;
	overflow: auto;
}
.selection_div img{
	display: inline-block;
}
.background_thumb{
	margin: 2px;
}