body, th, td, input { font-family: arial; font-size: 14px; }
body { background: #aaa; margin: 0; padding: 8px; }
.page { margin: 0 auto; width: 1000px; background: #eee; box-shadow: 0 0 8px #000; padding: 0; min-height: 400px; border-radius: 8px; }
.header { }
.header .block { position: relative;
	background: #024 url(../img/img_earth.jpg) no-repeat 50% 5%;
	background-size: 100%;
	border-radius: 8px 8px 0 0;
}
.header .block .logo { height: 100px; float: left; margin: 10px; cursor: pointer; }
.header .block .title { float: left; /*color: #000;*/ margin-left: 20px; line-height: 100px; padding-top: 10px; font-size: 30px; cursor: pointer;
	color: #fff;
}
.header .block .institute { position: absolute; right: 10px; top: 10px; text-align: right; /*text-transform: uppercase;*/ font-size: 16px; /*color: #13a89e;*/
	color: #fff;
	text-shadow: 0 0 10px #000;
}
.header .block .institute .mtacsfk { font-size: 75%; }
.header .menu { background: #13a89e; color: #175; padding: 5px 10px; margin-bottom: 10px; line-height: 1.5em; font-size: 13px;
	box-shadow: 0 0 5px #000;
	position: relative;
}
.header .menu a { color: #fff; font-weight: bold; text-decoration: none; white-space: nowrap; }
.header .menu a:hover { text-decoration: underline; }
.header .login { float: right; color: #000; }
.header .login .profile a { color: #000; font-weight: normal; }
.content { padding: 0 10px 10px 10px; }
.icon {
	float: left; width: 148px; height: 128px; display: block; text-align: center; text-decoration: none;
	cursor: pointer; background: #f0f0f0; margin: /*0 10px 10px 0*/ 0 4px 14px 10px; overflow: hidden; border-radius: 10px;
	color: #444; font-weight: bold; box-shadow: 0 0 4px #aaa; position: relative; font-size: 14px;
}
.icon .imgContent { display: block; height: 64px; line-height: 64px; margin: 5px 0; position: relative; }
.icon .imgContent .ic { max-height: 64px; max-width: 95%; margin: 0 auto; vertical-align: middle; }
.icon .imgContent .lnk { width: 16px !important; height: 16px !important; position: absolute; right: 10px; top: 4px; opacity: 0.3; }
.icon:hover { background: #f8f8f8; }
.icon .permission { font-size: 75%; font-weight: normal; }
h1 { margin-top: 0; }

.categoryTitle { margin: 0 0 15px 0; padding: 4px 8px; background: #ddd; border: 1px solid #ccc; font-weight: bold; font-size: 16px; border-radius: 5px; }

.administration { height: 32px; float: right; cursor: pointer; opacity: 0.5; }
.administration:hover { opacity: 1; }

.al { text-align: left; }
.ac { text-align: center; }
.ar { text-align: right; }

.successMessage { background: #8f8; color: #000; border: 1px solid #0a0; padding: 10px; margin-bottom: 10px; font-weight: bold; }
.errorMessage { background: #f88; color: #000; border: 1px solid #f00; padding: 10px; margin-bottom: 10px; font-weight: bold; }
.infoMessage { background: #ffc; color: #000; border: 1px solid #cc8; padding: 10px; margin-bottom: 10px; font-weight: bold; }

.back { text-decoration: none; font-weight: bold; color: #800; }
.back:hover { text-decoration: underline; }

.impresszum { text-align: center; padding-top: 8px; font-size: 12px; }
.impresszum a { text-decoration: none; color: #000; }
.impresszum a:hover { text-decoration: underline; }

.clear { clear: both; font-size: 0; line-height: 0; }

@media screen and (max-width: 1024px) {
	.responsive .page { width: auto; }
}
@media screen and (max-width: /*840px*/ 860px) {
	.responsive .icon { width: /*132px*/ 116px; height: 104px; margin: /*0 10px 10px 0*/ 4px 4px 5px 5px; font-size: 13px; }
	/*.responsive .icon img { height: 48px; margin: 5px auto; }*/
	.responsive .icon .imgContent { height: 48px; line-height: 48px; margin: 5px auto; }
	.responsive .icon .imgContent .ic { max-height: 48px; }
	.responsive .categoryTitle { margin: 5px 0 5px 0; }
}
@media screen and (max-width: 660px) {
	.responsive .header .block .logo { float: none; height: 75px; }

	.responsive .header .block .title { float: none; line-height: 1.2em; padding: 0; margin: 0; text-align: right; position: absolute; top: 55px; right: 10px; font-size: 24px; }
	.responsive_title .header .block .title { line-height: 2.4em !important; margin-left: 20px !important; padding-top: 10px !important; text-align: left !important; position: relative !important; top: 0 !important; right: 0 !important; }

	.responsive .header .block .institute { font-size: 12px; }
	.responsive .header .block .institute .mtacsfk { /*xfont-size: 75%;*/ }
}