body {
		color: black;
		font-family: calibri, arial;
		font-size:14px;
	}
	.main {
		position: absolute;
        z-index:1;
        /*border: red solid 5px;*/
	}
	#frame, #viewer, #menu, #comment {
		position: absolute;
	}
	.frame {
        position: absolute;
		width: 680px;
		height: 472;
		cursor: pointer;
        visibility: visible;
		z-index: 4;
        /*border: green solid 5px;*/
	} 
	.viewer {
        border: solid 2px darkgray;
	    top: 80px;    
		left: 80px;
		width: 515px;
		height: 309;
		background-color: white;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
        position: absolute;
        visibility: visible;
	}
    
   .viewer1 {
        border: solid 2px darkgray;
	    top: 95px;    
		left: 96px;
		width: 605px;
		height: 363px;
		background-color: white;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
        position: absolute;
        visibility: visible;
	}
    
	.comment {
	    top: 82px;    
		left: 82px;
		width:400px;
		height: 300;
		font-weight: bold;
        position: absolute;
        text-align: left;
        z-index: 6;
        visibility: visible;
	}

    .menu {
        top: 30px;    
        left: 86px;
        max-width: 550;
        max-height: 45;
        border-radius: 6px;
        text-align: left;
        border: 1px solid darkgray;
        z-index: 17;
        position: absolute;
        visibility: visible;
    }
        
	img#frame_img_cont {
		border: 1px solid darkgray;
		cursor: pointer;
        max-width:100%;
        max-height: 100%;
	}
    
    #button1, #button2, #button3 {
        cursor: pointer;
    }
    
    .buthidden{
       cursor : pointer;
       visibility : hidden;
    }
    span#hm {
        font-size:17px; 
        color: #701f29; 
        cursor:pointer; 
        border:5px solid darkgray; 
        border-radius:8px;
    }
    #comnt {
        vertical-align: bottom;
    }
    a {
      text-decoration: none;
      color: black;
    }
    
    a#ctrlchar {
        font-size:24px;
    }
    
    #menuhere {
        min-width: 100px;
        border: 1px solid black;
        min-width: 300px;
        background-color: white;
        font-weight: bold;
        padding: 8px;
        visibility: hidden;
    }

    .mein-element {
       opacity: 0%;
       -transition: opacity 1,5s linear;
       transform: rotate(360 deg);
    } 

    .visible {
       opacity: 100%; 
    } 
     
    .but {
        border:1px solid black;
        background-color: yellow;
        margin: 2px;
        padding: 2px;
        cursor: pointer;
        border-radius: 5px;
    }
    
    .but:hover {
        box-shadow: 0 6px 8px 0 rgba(0,0,0,0.54),0 6px 8px 0 rgba(0,0,0,0.19);
    }
    
    div.scroll {
        background-color: white;
        width: 300px;
        height: 150px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: left;
        padding: 5px;
    }