body {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

fieldset {
	max-width: 41em;
	min-width: 25em;
	border: 0px;
	margin: 0px;
	padding: 0px;
	vertical-align: top;
	margin-bottom: 1ex;
}

fieldset.small {
	max-width: 31em;
	min-width: 20em;
}

fieldset.bordered {
	border: 1px inset darkgrey;
	margin: 0.5em 0;
	padding: 0.5em;
	max-width: 40em;
	border-radius: 10px;
	position: relative;
}

fieldset.small.bordered {
	max-width: 30em;
	min-width: 18em;
}

fieldset.floating {
	display: inline-block;
	min-width: 29em;
}

fieldset.displayboxselect {
	width: 100%;
}

fieldset.actionbuttons {
	position: fixed;
	right: 0;
	bottom: 0.3em;
	background: lightgrey;
	width: inherit;
	min-width: inherit;
	max-width: inherit;
	border: 1px solid darkgray;
	border-bottom: none;
	border-right: none;
	border-radius: 10px 0 0 0;
	padding: 10px;
	background-image: linear-gradient(#f0f0f0 0%, lightgray 70%, lightyellow 130%);
}

fieldset.nowidth {
	width: inherit !important;
	max-width: inherit !important;
	min-width: inherit !important;
}

fieldset.bordered legend {
	border: 1px inset darkgrey;
	padding: 3px;
}

div.field {
	margin-bottom: 1ex;
}

div.field p {
	font-size: 90%;
	margin: 2px;
}

div.field label {
	font-weight: bold;
	font-size: 120%;
}

div.field div.inputwraper {
	display: inline-block;
	width: 99%;
	margin: 0;
	padding: 0;
}

div.field input[type=text] {
	margin-bottom: 0.5em;
	background-color: white;
}

div.field input.maxlength {
	display: block;
	width: 100%;
}

div.field textarea {
	display: block;
	width: 100%;
	margin-bottom: 0.5em;
}

div.field select {
	margin-bottom: 0.5em;
}

div.field select.visibility {
	font-size: 70%;
	float: right;
}

div.field.error {
	border: 1px solid red;
	border-radius: 10px;
	padding: 1em;
	background-color: #fff0f0;
	margin-bottom: 1em;
}

div.field div.errormsg {
	color: red;
	padding: 4px 0 6px 0;
	font-size: 80%
}

div.actions {
	border: 1px solid darkgrey;
	border-radius: 5px;
	position: absolute;
	right: 1em;
	top: 1em;
	padding: 2px;
	background-color: white;
}

div.actions a.action {
	display: block;
	border: 1px solid darkgrey;
	margin: 1px;
	text-decoration: none;
	color: black;
	padding: 1px 3px;
	background-image: linear-gradient(5deg, lightgrey 0%, #f0f0f0 50%, lightgrey 100%);
}

/* Main Layout */
div#header {
	position: relative;
	height: 8em;
	background-image: url(/static/header_background.png);
	background-color: #f0fff0;
	background-size: contain;
	border-bottom: 1px solid darkgray;
}

div#body {
	display: table;
	width: 100%;
}

div#leftspace, div#rightspace {
	width: 15%;
	min-width: 10em;
	display: table-cell;
	vertical-align: top;
	padding-top: 0.5em;
	background-color: white;
}

div#maincontent {
	position: relative;
	padding: 1em;
}

div#footer {
	background-image: linear-gradient(#f0f0f0 0%, white 75%);
	background-color: #f0f0f0;
	border-top: 1px solid darkgrey;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
}

div#messages {
	background-color: lightgreen;
	border: 1px solid green;
	border-radius: 5px;
	padding: 4px;
	font-size: 70%;
	margin-bottom: 2px;
}

div#messages p {
	margin: 0;
}

div#warnings {
	background-color: #ffe580;
	border: 1px solid orange;
	border-radius: 5px;
	padding: 4px;
	font-size: 70%;
	margin-bottom: 2px;
}

div#warnings p {
	margin: 0;
}

div#errors {
	background-color: #ffb0b0;
	border: 1px solid red;
	border-radius: 5px;
	padding: 4px;
	font-size: 70%;
	margin-bottom: 2px;
}

div#errors p {
	margin: 0;
}

h1#mainheading {
	margin-top: 0.2em;
	border-bottom: 2px ridge black;
	margin-bottom: 0
}

div.helpview {
	display: block;
	position: absolute;
	top: 1em;
	right: 1em;
	border: 1px solid darkgrey;
	border-radius: 5px;
	width: 12em;
	right: 1em;
	width: 12em;
}

div.helpview div.title {
	background-color: lightgrey;
	text-align: center;
	padding: 3px;
	border-bottom: 1px solid darkgrey;
}

div.helpview div.body {
	padding: 3px;
}

div.helpview div.body dl {
	margin: 0;
}

div.helpview div.body dl dt {
	fontweight: bold;
	margin: 3px 0;
}

div.helpview div.body dl dd {
	font-size: 80%;
	margin: 0;
}

/* footer */
div#footer {
	display: table
}

div#footer span {
	font-size: 70%;
	display: table-cell;
	white-space: nowrap;
	padding: 0 1ex;
}

span#copyright {
	text-align: right;
}

/* Header */
span#pagetitle {
	font-size: 300%;
	font-weight: bold;
	text-align: center;
	display: block;
	position: absolute;
	top: 12px;
	width: 100%;
	color: white;
	text-shadow: 0 0 5px black;
}

div#globalnavigation {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1ex;
	border-color: darkgrey;
	border-image: none;
	border-radius: 0 10px 0 0;
	border-style: solid;
	border-width: 1px 1px 0 0;
	background-image: linear-gradient(#f0f0f0 0%, lightgray 70%, lightyellow 130%);
}

div#globalnavigation a {
	border: 1px outset darkgrey;
	background-color: lightgray;
	padding: 2px 8px;
	border-radius: 5px;
	background-image: linear-gradient(5deg, lightgrey 0%, #f0f0f0 50%, lightgrey 100%);
	text-decoration: none;
	color: black;
}

div#globalactions {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 1ex;
	border-color: darkgrey;
	border-image: none;
	border-radius: 10px 0 0 0;
	border-style: solid none none solid;
	border-width: 1px 0 0 1px;
	background-image: linear-gradient(#f0f0f0 0%, lightgray 70%, lightyellow 130%);
}

div#globalactions a {
	border: 1px outset darkgrey;
	background-color: lightgray;
	padding: 2px 8px;
	border-radius: 5px;
	background-image: linear-gradient(5deg, lightgrey 0%, #f0f0f0 50%, lightgrey 100%);
	text-decoration: none;
	color: black;
}

div#globalactions a:hover {
	border: 1px solid darkgrey;
	background-image: linear-gradient(5deg, lightgrey 0%, lightyellow 50%, lightgrey 100%);
}

div#globalactions span.user {
	border: 1px solid black;
	background-color: lightred;
	padding: 2px 8px;
	border-radius: 5px;
}

/* 
 * Repeating elements
 */
div#tabbar {
	border-bottom: 1px solid darkgrey;
	padding: 1em 0 0 1em;
	margin-bottom: 1ex;
}

div#tabbar a.tab {
	display: inline-block;
	border: 1px solid darkgrey;
	border-radius: 5px 5px 0 0;
	border-bottom: none;
	padding: 3px;
	background-color: lightgrey;
	vertical-align: bottom;
	text-decoration: none;
	color: initial
}

div#tabbar a.tab.active {
	background-color: orange;
	font-size: 120%;
	font-weight: bold;
}

select#tabselect {
	display: none;
}
/* 
 * Pages 
 */

/* Activity List */
a.activityview {
	border: 1px solid darkgray;
	border-radius: 10px;
	width: 29.5em;
	padding: 1ex;
	background-color: #ffdf9a;
	background-image: linear-gradient(#ffdf9a 20%, #ffcd63 80%);
	margin-top: 2em;
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: black;
	vertical-align: top;
}

a.activityview div.actions {
	position: absolute;
	right: 1em;
	top: -1em;
	text-align: right;
}

a.activityview div.distance {
	position: absolute;
	right: 1ex;
	top: -1.2em;
	font-size: 70%;
}

a.activityview div.type {
	position: absolute;
	left: 1ex;
	top: -1.2em;
	font-size: 110%;
	font-weight: bold;
	border: 1px solid darkgrey;
	border-radius: 5px;
	background-color: #ffdf9a;
	background-image: linear-gradient(#ffdf9a 20%, #ffcd63 80%);
	padding: 3px;
}

a.activityview div.title {
	font-weight: bold;
	font-size: 130%;
}

a.activityview div.status {
	font-weight: bold;
	font-size: 70%;
	float: right;
	display: inline-block;
	margin-left: 1em;
	margin-bottom: 1ex;
}

a.activityview div.date {
	display: table;
	width: 100%
}

a.activityview div.date span {
	display: table-cell;
}

a.activityview div.date span.time {
	text-align: right;
	width: 40%;
}

a.activityview div.date span.date {
	width: 60%;
}

a.activityview div.description {
	margin-top: 1ex;
}

a.activityview div.infos {
	display: table;
	width: 100%;
	margin-top: 1ex;
}

a.activityview div.infos div.orga {
	display: table-cell;
	vertical-align: top;
}

a.activityview div.infos div.flags {
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
}

a.activityview div.infos div.orga div.tag {
	font-size: 60%;
}

/* activity_view */
div#personneltypes {
	width: 16em;
	float: right;
}

div#generalinfos {
	width: 30em;
}

div.personnel {
	display: inline-block;
	border: 1px solid darkgray;
	border-radius: 5px;
	margin-top: 1em;
	padding: 1ex;
	position: relative;
	width: 20em;
	height: 16em;
	background-color: #8fdcff;
	background-image: linear-gradient(#8fdcff 20%, #54c9ff 80%);
	vertical-align: top;
}

div.personnel div {
	padding-bottom: 5px;
}

div.personnel img.avatar {
	float: right;
	padding-left: 1em;
	padding-bottom: 1em;
}

div.personnel span.indicator {
	height: 1ex;
	display: inline-block;
	border: 1px solid black;
	width: 2em;
}

div.personnel div.indicator {
	position: absolute;
	right: 1ex;
	top: -1ex;
}

div.personnel div.time {
	position: absolute;
	bottom: 1ex;
}

div.personnel table.contacts {
	padding: 0;
	padding-bottom: 5px;
	border-collapse: separate;
	border-spacing: 0
}

div#personneltypes span.indicator {
	display: inline-block;
	border: 1px solid black;
	width: 2em;
	margin-bottom: 1px;
}

div#description {
	display: table-cell;
	max-width: 40em;
}

div.map {
	position: absolute;
	right: 9em;
	top: 1em;
	left: 31em;
	height: 20em;
	min-width: 20em;
}

div.map iframe {
	width: 100%;
	height: 100%;
	border: 2px inset darkgrey;
	border-radius: 5px;
}

div.map a {
	bottom: 0em;
	left: 1em;
	position: absolute;
	font-size: 70%;
	text-decoration: none;
	color: inherit;
	background-color: white;
	padding: 4px;
	border-radius: 5px
}

}
div#topaction {
	display: table-cell;
	width: 10em;
}

/* calendar view */
div.calendar-month {
	display: inline-block;
	width: 19em;
	height: 11em;
	border: 1px solid darkgray;
	border-radius: 10px;
	padding: 1ex;
	background-color: #ffdf9a;
	background-image: linear-gradient(#ffdf9a 20%, #ffcd63 80%);
	margin-bottom: 1ex;
}

div.calendar-month div.title {
	text-align: center;
	font-weight: bold;
}

div.calendar-month table {
	width: 100%;
	table-layout: fixed;
}

div.calendar-month table td.active {
	text-align: center;
	border: 1px inset darkgrey;
	background-color: rgba(255, 255, 255, 128);
	position: relative;
}

div.calendar-month table td.active.level1 {
	background-color: #FFC0C0
}

div.calendar-month table td.active.level2 {
	background-color: #FF9090
}

div.calendar-month table td.active.level3 {
	background-color: #FF6060
}

div.calendar-month table td.active.level4 {
	background-color: #FF3030
}

div.calendar-month table td.active.level5 {
	background-color: #FF0000
}

div.calendar-month table td a {
	color: inherit;
	text-decoration: none;
}

div.calendar-month table td.active div.activitylist {
	display: none;
	position: absolute;
	width: 14em;
	min-height: 4em;
	background-color: white;
	border: 1px solid darkgrey;
	border-radius: 5px;
	left: -6em;
	text-align: left:
}

div.calendar-month table td.active div.activitylist div.date {
	text-align: center;
	padding: 4px;
	background-color: lightgrey;
}

div.calendar-month table td.active div.activitylist div.activity {
	text-align: left;
	padding: 2px;
	background-color: #f0f0f0;
}

div.calendar-month table td.active div.activitylist div.activity.even {
	background-color: #fbfbfb;
}

div.calendar-month table td.active:hover div.activitylist {
	display: block;
	z-index: 255;
}

/* Responsive */

/* Tablets und kleine Monitore */
@media only screen and (max-width: 50em) {
	div.map {
		position: inherit;
		top: initial;
		right: initial;
		left: initial;
		width: 100%;
	}
	span#pagetitle {
		font-size: 225%;
	}
}

/* Smartphone */
@media only screen and (max-width: 750px) {
	body {
		
	}
	h1 {
		font-size: 140%;
	}
	div.actions a.action {
		font-size: 80%
	}
	div#globalnavigation {
		font-size: 80%;
		padding: 5px;
	}
	div#globalactions {
		font-size: 80%;
		padding: 5px;
	}
	a.activityview {
		width: inherit;
		display: inherit;
	}
	span#pagetitle {
		font-size: 180%;
	}
	fieldset {
		min-width: initial;
		width: initial;
	}
	fieldset.floating {
		min-width: initial;
		display: inherit;
	}
	div#personneltypes {
		float: inherit;
		width: inherit;
	}
	div#generalinfos {
		width: inherit;
	}
	div.personnel {
		display: block;
		width: initial;
		height: inherit;
	}
	div.personnel div.time {
		position: relative;
		bottom: none;
	}
	div.helpview {
		position: relative;
		border: none;
		width: initial;
		top: initial;
		right: initial;
	}
	div.helpview div.title {
		border: 1px solid darkgrey;
	}
	div.map {
		position: inherit;
		top: initial;
		right: initial;
		left: initial;
		width: initial;
		min-width: initial;
	}
	div#tabbar {
		display: none;
		padding: 1em 0 0 1em;
		margin-bottom: 1ex;
	}
	select#tabselect {
		display: initial;
		width: 100%;
		font-size: 120%;
		margin-bottom: 1ex;
	}
	div.calendar-month {
		display: block;
		width: initial;
		max-width: 22em;
		height: initial;
	}
}