/* Default Desktop sizes of header items */
@media screen and (min-width: 801px) {
	.header-text {
		font-size: large;
		line-height: 35px;
	}

	#header-app-text {
		font-size: x-large;
	}

	#header-app-icon {
		padding: 10px;
	}

	ul.header li a {
		display: block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}	
}

/* Widescreen Mobile sizes of header items */
@media screen and (max-width: 800px) {
	.header-text {
		font-size: medium;
		line-height: 50px;
		padding: 0px;
	}

	#header-app-text {
		font-size: large;
	}

	#header-app-icon {
		padding: 10px;
		height: 40px;
		width: auto;
	}

	ul.header li a {
		display: block;
		color: white;
		text-align: center;
		padding: 5px 5px;
		text-decoration: none;
	}
}

ul.header {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #8baddb;
}

ul.header li {float: left;}

ul.header li a:hover:not(.active) {background-color: #0168b5;}

ul.header li a.active {background-color: #0168b5;}

ul.header li.right {float: right;}

ul.header li img {
    display: block;
    margin: 0 auto;
}

/* For narrow screens the main header items stack on top of each other. */
@media screen and (max-width: 650px) {
    ul.header li.right, 
    ul.header li {float: none;}

    /* Reduce items in height */
    .header-text {
        height: 30px;    
	    line-height: 20px;
    }

    /* Set a small vertical, but no horizontal padding */
    ul.header li a {
        padding: 5px 0px;
    }
	
    /* Reduze font size of app name, so that it can be shown without linebreak. */
	@media screen and (max-width: 500px) {
		#header-app-text {
			padding: 0px;
			font-size: small;
		}
	}
}

/* For normal (wide) screens */
@media screen and (min-width: 651px) {
    #header-app-text {
	    padding-right: 40px;
    }

    /* Make impressum header float right*/
    #header-item-impressum {
        float: right;
    }
}

/* Change layout of disabled header items, which are unavailable until the user logs in. */
.link-disabled {
    background: gray;
}