header {
	text-align: center;
}

footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	font-size: 12px;
	height: 13px;
	padding-bottom: 2px;
	background-color: #CCCCCC;
}

h4 {
	margin-top: 16px;
}

p {
	margin-top: 10px;
}

aside input.datepicker {
	width: 64px;
}
	
div.filter-element {
	margin-top: 8px;
}

div.filter-element > a {
	display: inline-block;
	width: 50px;
}

div.ui-datepicker, div.ui-timepicker {
	font-size: 12px;
}

button.btnui {
	font-size: 12px;
	margin-top:4px;
}

#sidebar div#tools {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #EEEEEE;
	min-height: 27px;
}

#sidebar div#manage {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #EEEEEE;
}

#sidebar div#tools button.btnui {
	float: right;
}

#sidebar > h3 > button.btnui {
	float: right;
}

div#content {
	min-height: 500px;
	overflow: auto;
}

table {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 100%;
	max-width: 1000px;
}

table tr:not(.details-content) {
	cursor: pointer;
}

table th{
	border-bottom: 1px solid black;
	padding: 1px 6px 1px 6px;
}

table td {
	padding: 1px 6px 1px 6px;
}

table td a {
	color: blue;
}

table td a:hover {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
}

table td.details {
	background-color: #FFDDDD;
	font-weight: bold;
	font-size: 13px;
}

table tbody tr:nth-child(odd) {
	background-color: #EEEEEE;
}

table tbody tr.myevent:nth-child(even) {
	background-color: #DDDDFF;
}

table tbody tr.myevent:nth-child(odd) {
	background-color: #CCCCFF;
}

form {
	margin-left: auto;
	margin-right: auto;
	max-width: 350px;
}

form h1 {
	font-size: 19px;
	margin-bottom: 20px;
}

form label {
	display: inline-block;
	width: 80px;
}

form input[type=text], select {
	width: 250px;
}

form div.inputgroup {
	margin: 5px;
}

form div.buttongroup {
	margin-top: 20px;
	padding-top: 5px;
	border-top: 1px solid #AAAAAA;
	text-align: right;
}

form.login label {
	display: inline-block;
	width: 170px;
}

form.login input {
	width: 150px;
}

div.flash-error {
	border: 1px solid red;
	background-color: #FFAAAA;
}

div.flash-warning {
	border: 1px solid orange;
	background-color: #FFFFAA;
}

div.flash-info {
	border: 1px solid blue;
	background-color: #AAAAFF;
}

div.flash-success {
	border: 1px solid green;
	background-color: #AAFFAA;
}

@media screen and (min-width: 880px) {
	header > div#logoalpina {
		width: 79px;
		height: 79px;
		position: fixed;
		background-image: url("../img/logo_alpina.png");
		top: 50px;
		right: 100px;
	}
	
	header > h2#textalpina {
		font-size: 20px;
		position: fixed;
		top: 10px;
		right: 20px;
	}
}

@media screen and (max-width: 879px) {	
	header > h2#textalpina {
		display: none;
	}
}

@media screen and (min-width: 701px) {
	#header {
		height: 130px;
	}

	header > div.image {
		width: 70px;
		height: 70px;
		display: inline-block;
		margin: 10px 4px 0px 4px;
	}
	
	header > div.image#logo1 {
		background-image: url("../img/logo1_70.png");
	}
	
	header > div.image#logo2 {
		background-image: url("../img/logo2_70.png");
	}
	
	header > div.image#logo3 {
		background-image: url("../img/logo3_70.png");
	}
	
	header > div.image#logo4 {
		background-image: url("../img/logo4_70.png");
	}
	
	header > div.image#logo5 {
		background-image: url("../img/logo5_70.png");
	}
	
	header > div.image#logo6 {
		background-image: url("../img/logo6_70.png");
	}
	
	header > div.image#logo7 {
		background-image: url("../img/logo7_70.png");
	}

	header > div.image#logo8 {
		background-image: url("../img/logo8_70.png");
	}

	table tr.details {
		color: #AA0000;
	}
	
	div.flash {
		padding: 5px;
		margin: 10px;
		width: 65%;
	}
}

@media screen and (max-width: 700px) {		
	header > div.image {
		width: 24px;
		height: 24px;
		display: inline-block;
		margin: 7px 4px 0px 4px;
	}
	
	header > div.image#logo1 {
		background-image: url("../img/logo1_24.png");
	}
	
	header > div.image#logo2 {
		background-image: url("../img/logo2_24.png");
	}
	
	header > div.image#logo3 {
		background-image: url("../img/logo3_24.png");
	}
	
	header > div.image#logo4 {
		background-image: url("../img/logo4_24.png");
	}
	
	header > div.image#logo5 {
		background-image: url("../img/logo5_24.png");
	}
	
	header > div.image#logo6 {
		background-image: url("../img/logo6_24.png");
	}
	
	header > div.image#logo7 {
		background-image: url("../img/logo7_24.png");
	}

	header > div.image#logo8 {
		background-image: url("../img/logo8_24.png");
	}
	
	table .large {
		display: none;
	}

	table tr.details {
		color: #AA0000;
	}
	
	div.flash {
		border: 0px;
		padding: 5px 0px 5px 0px;
		width: 100%;
	}
}