body {
		background-image: url('background-skaliert.jpg');
	}
	
	div#menu-wrapper {
		position:fixed;
		bottom:10px;
		left:10px;
	}
	
	div#menu-wrapper div {
		display:inline-block;
		vertical-align:middle;
	}
	
	div#menu-wrapper div#menu {
		display:block;
		margin-bottom:5px;
		padding:10px;
		border-radius:12px;
		background-color:gainsboro;
	}
	
	div#menu-wrapper div.menu-entry {
		display:block;
		padding:10px 5px;
		cursor:pointer;
	}
	
	div#burger-menu {
		padding:0 5px 0px 6px;
		font-size:37px;
		border-radius:10px;
		background-color:gainsboro;
		cursor:pointer;
		-webkit-touch-callout: none; /* iOS Safari */
    	-webkit-user-select: none; /* Safari */
     	-khtml-user-select: none; /* Konqueror HTML */
       	-moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	}
	
	div#password-login {
		display:none;
		margin:100px auto;
		padding:15px;
		width:270px;
		border-radius:10px;
		background-color:gainsboro;
	}

	div#header {
		position:fixed;
		margin:0 auto;
		top:20px;
		left:50%;
		transform:translate(-50%, 0);
	}
	
	div#game-type-display {
        display:inline-block;
		padding:10px;
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
	}
	
	div#bockcount-indicator {
        display:inline-block;
        padding:10px;
        text-align:center;
        font-weight:bold;
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:#ff6666;
    }
	
	div#online-status {
		display:inline-block;
		padding:12px;
		color:white;
		font-weight:bold;
		border-radius:5px;
	}
	
	div.online-status { 
		background-color:green;
	}
	
	div.offline-status { 
		background-color:red;
	}
	
	div#player-list-wrapper {
		position:fixed;
		top:40%;
		left:20px;
		padding:10px;
		transform:translate(0, -50%);
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
	}
	
	div#player-list th.gamepoints, div#player-list td.gamepoints, div#player-list th.status, div#player-list td.status {
		text-align:center;
	}

	div#player-list img.kick-player-icon {
		display:inline;
		vertical-align:text-bottom;
		cursor:pointer;
	}
	
	div#in-card-play {
		text-align:center;
	}
	
	div#message {
		display:inline-block;
		position:fixed;
		bottom:20px;
		right:20px;
		padding:10px;
		min-width:200px;
		text-align:center;
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
	}
	
	td.ready {
		color:green;
		font-weight:bold;
	}
	
	div.seat {
		padding:10px;
		width:110px;
		border:1px solid black;
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
	}
	
	div.seat img.vip-label {
        display:none;
        vertical-align: middle;
        margin-left: 5px;
    }

	div.seat img.quiz-trophy {
		display:none;
		position:absolute;
		top:22px;
		right:10px;
	}
	
	div.seat span.last-bidding-action {
		font-weight:bold;
	}
	
	div.seat.cardrequested {
		background-color:#0066CC;
	}
	
	div.seat.gotlasttrick {
		border:4px solid orange;
	}
	
	div.seat span.player-name {
        vertical-align: middle;
    }
	
	div.seat.startscardplay span.player-name {
		text-decoration:underline;
	}
	
	div#seat-top-left {
		position:fixed;
		top:20px;
		left:20px;
	}
	
	div#seat-top-right {
		position:fixed;
		top:20px;
		right:20px;
	}
	
	div#seat-bottom-wrapper {
		position:fixed;
		bottom:25px;
		left:50%;
		transform:translate(-50%, 0);
	}
	
	div#seat-bottom {
		display:inline-block;
		position:relative;
		vertical-align:middle;
	}
        
        div.seat-notification {
            margin:4px 0;
            text-align:center;
            border:1px solid black;
            box-shadow:4px 4px 8px black;
            background-color:gainsboro;
        }
        
        div#seat-top-left-notifications {
            position:fixed;
            top:106px;
            left:0;
        }
        
        div#seat-top-left-notifications div.seat-notification {
            padding:2px 20px 2px 15px;
            border-radius:0 12px 12px 0;
            border-left:0px;
        }
        
        div#seat-top-right-notifications {
            position:fixed;
            top:106px;
            right:0;
        }
        
        div#seat-top-right-notifications div.seat-notification {
            padding:2px 15px 2px 20px;
            border-radius:12px 0 0 12px;
            border-right:0;
        }
        
        div#seat-bottom-notifications {
            position:fixed;
            bottom:0;
            left:50%;
            transform: translate(-50%, 0);
        }
        
        div#seat-bottom-notifications div.seat-notification {
            display:inline-block;
            margin:0 4px;
            padding:2px 10px;
            border-radius:12px 12px 0 0;
        }
	
	div#bid-options, div#respond-options, div#free-play-options, div#game-type-selector, div#grand-hand-options {
		display:inline-block;
		vertical-align:middle;
		padding:10px;
		box-shadow:4px 4px 8px black;
		border-radius:12px;
		background-color:gainsboro;
	}
	
	div#cards {
		position:fixed;
		bottom:15px;
		left:50%;
		transform:translate(-50%, -50%);
		width:25em;
		height:9.5em;
		text-align:center;
		font-size:1.3em;
	}
	
	div#cards-top-left {
		position:fixed;
		top:10px;
		left:10em;
	}
	
	div#cards-top-right {
		position:fixed;
		top:10px;
		right:34em;
	}
	
	div#cards-top-left .card, div#cards-top-right .card {
		font-size:1em;
		border-width:1px;
	}
	
	div#game-type-selector {
		font-size:12px;
	}
	
	div#game-type-selector input, div#game-type-selector span {
		vertical-align:middle;
	}
	
	div#trick, div#skat {
		position:fixed;
		top:30%;
		left:50%;
		font-size:1.3em;
		transform:translate(-50%, 0);
	}
	
	div#trick {
		text-align:center;
		width:13em;
		height:13em;
	}
	
	div#skat {
		width:13em;
		height:11.5em;
	}
	
	div#skat-card-1 {
		top:0;
		left:0;
	}
	
	div#skat-card-2 {
		top:0;
		right:0;
	}
	
	div#trick .card, div#skat .skat-card {
		display:inline-block;
	}
	
	div#skat .skat-card {
		position:absolute;
	}
	
	div#trick .card {
		position:relative;
	}
	
	div#trick-top-left, div#trick-top-right, div#trick-bottom {
		display:inline-block;
		position:absolute;
	}
	
	div#trick-top-left {
		top:0;
		left:0;
	}
	
	div#trick-top-right {
		top:0;
		right:0;
	}
	
	div#trick-bottom {
		bottom:0;
		left:50%;
		transform:translate(-50%, 0);
	}
	
	div#previous-trick {
		position:fixed;
		bottom:50px;
		right:20px;
		padding:13px;
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
	}
	
	div#previous-trick #prev-card-0 {
		display:inline-block;
		margin-top:1em;
	}
	
	div#previous-trick #prev-card-1 {
		display:inline-block;
		margin-top:1em;
		margin-left:-5em;
	}
	
	div#previous-trick #prev-card-2 {
		display:inline-block;
		margin-top:1em;
		margin-left:-5em;
	}
	
	div#leave-skat, div#select-skat, div#shove-skat {
		position:absolute;
		bottom:0;
		left:50%;
		width:9em;
		transform:translate(-50%, 0);
	}
	
	div#game-end-dialog {
		margin:10px auto 0;
		padding:15px;
		text-align:center;
		color:white;
		background-color:red;
	}
	
	div#game-end-dialog.won {
		background-color:green;
	}
	
	div#game-end-dialog.lost {
		background-color:red;
	}
	
	div#game-end-dialog span.header {
		font-size:40px;
	}
	
	div#game-end-dialog span#player-points, div#game-end-dialog span#game-points {
		font-weight:bold;
	}
	
	div#game-history, div#game-history-overview {
		position:fixed;
		top:210px;
		bottom:30px;
		left:50%;
		padding:10px;
		min-width:600px;
		min-height:300px;
		transform:translate(-50%, 0%);
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
		overflow:auto;
	}
    
    div#game-history table thead th {
        position: sticky; 
        top: 0;
        background-color:gainsboro;
    }
        
        div#game-history-overview {
                display:none;
        }
	
	div#game-history table, div#game-history-overview table {
		width:100%;
	}
	
	div#game-history table th, div#game-history table td, div#game-history-overview th, div#game-history-overview td {
		text-align:center;
	}
	
	div#game-history table td.bock-count {
		text-align:left;
	}
	
	div#game-history table td, div#game-history-overview table td {
		padding:5px 0;
		border-bottom:1px solid black;
	}
	
	div#last-game-cards {
		position:fixed;
		top:50%;
		right:20px;
		width:24.4em;
		height:90%;
		transform:translate(0, -50%);
		padding:10px;
		border-radius:12px;
		box-shadow:4px 4px 8px black;
		background-color:gainsboro;
		overflow:auto;
	}
	
	div#last-game-cards .cards {
		position:relative;
		margin-top:0.5em;
		margin-bottom:10em;
	}
	
	div#video-seat-bottom {
        position:fixed;
        bottom:10px;
        left:200px;
    }
    
    div#video-seat-top-left {
        position:fixed;
        top:10px;
        left:10em;
    }
    
    div#video-seat-top-right {
        position:fixed;
        top:10px;
        right:10em;
    }
    
    div#video-others {
        position:fixed;
        top:30px;
        left:50%;
        transform:translate(-50%, 0);
    }
    
    div#video-passive-players {
        position:fixed;
        top:50%;
        right:10px;
        transform:translate(0, -50%);
        text-align:right;
    }
    
    div#video-passive-players div.video-wrapper {
        display:inline-block;
        margin:3px;
    }
    
    div.video-wrapper {
        position:relative;
        display:inline-block;
        margin:0 3px;
        height:150px;
        border-radius:12px;
        border:1px solid black;
        box-shadow:4px 4px 8px black;
    }

    div.video-wrapper.large {
        position:absolute;
        top:50%;
        left:50%;
        height:75%;
        transform:translate(-50%, -50%);
        z-index:1000;
    }
    
    div.video-wrapper img.loading {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
    }
    
    div.video-wrapper video {
        height:100%;
        border-radius:12px;
        z-index:0;
    }
    
    div#own-video.video-wrapper video {
        transform:scaleX(-1);
    }
    
    div.video-wrapper div.video-buttons {
        display:none;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        background-color:rgba(100, 100, 100, 0.5);
        border-radius:12px 12px 0px 0px;
        z-index:20;
    }
    
    div.video-wrapper:hover div.video-buttons {
        display:block;
    }
    
    div.video-wrapper div.video-buttons img {
        margin:5px;
        cursor:pointer;
    }
    
    div.video-wrapper div.video-indicators {
        position:absolute;
        top:0;
        right:0;
        height:100%;
        z-index:10;
    }
    
    div.video-wrapper div.video-indicators img {
        margin:5px;
    }
    
    div.video-wrapper div.video-indicators img.video-mute-indicator {
        display:none;
    }
    
    div.video-wrapper.muted div.video-indicators img.video-mute-indicator {
        display:inline;
    }
	
	@media screen and (max-height: 900px) {
		div#cards, div#trick, div#skat {
			font-size:1em;
		}
		
		div#cards {
			bottom:38px;
		}
	}