@import url('//resources.mdns.eu/fonts/font?family=Ubuntu');

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

a, a:hover, a:active, a:focus {
	outline         : 0;
	color           : #00438a;
	text-decoration : none;
}

input::-moz-focus-inner { border : none; }

table {
	border-spacing      : 0;
	position            : absolute;
	top                 : 0;
	right               : 0;
	bottom              : 0;
	left                : 0;
	width               : 100%;
	height              : 100%;
	cursor              : default;
	user-select         : none;
	-moz-user-select    : none;
	-webkit-user-select : none;
}

td {
	margin         : 0;
	padding        : 10% 0;
	vertical-align : top;
	text-align     : center;
}

h1 {
	color : #555753;
}

div {
	font-size : 16pt;
	color     : #555753;
}

div.p {
	text-align : left;
	margin     : 20px auto;
	width      : 500px;
	font-size  : 12pt;
}

div.p1,
div.p2,
div.p3 {
	display     : inline;
	margin-left : 50px;
	font-size   : 12pt;
}

div.p2 {
	margin-left : 75px;
}

div.p3 {
	margin-left : 20px;
}

div.link {
	font-size  : 16pt;
	color      : #00438a;
	margin-top : 25px;
}

div.code {
	background-color  : white;
	border            : 1px solid #555753;
	border-left-width : 3px;
	padding           : 1px 5px 4px 5px;
	font-family       : Ubuntu Mono, sans-serif;
	font-size         : 12pt;
}

div.small {
	font-size : 10pt;
	padding   : 10px;
}

div.bold { font-weight : bold; }

div.text { font-size : 12pt; }

.selectable,
span.select,
div.code,
div.show {
	cursor              : text;
	user-select         : text;
	-moz-user-select    : text;
	-webkit-user-select : text;
}

nav.menu {
	position  : fixed;
	top       : 5px;
	right     : 5px;
	font-size : 12pt;
	padding   : 5px;
}

nav.menu span { display : none; }

div.mobileclose,
div.mobilemenu {
	display : none;
}

div.sitemap {
	width     : 100%;
	max-width : 500px;
	margin    : 5px auto;
	font-size : 12pt;
}

div.sitemap.title { font-size : 14pt; }

div.sitemap a,
div.sitemap span {
	width     : 20%;
	max-width : 20%;
	display   : inline-block;
}

div.sitemap .date {
	width     : 37%;
	max-width : 37%;
}

div.feeds .feed {
	max-width : 100%;
	width     : 1280px;
	position  : relative;
	margin    : 0 auto 20px;
	overflow  : hidden;
}

div.feeds .feed::after {
	content : " ";
	display : block;
	clear   : both;
}

div.feeds .banner {
	float  : left;
	height : 460px;
}

div.feeds .overlay {
	position   : absolute;
	top        : 0;
	right      : 0;
	bottom     : 0;
	left       : 0;
	text-align : left; padding : 20px;
	transition : background-color 0.3s ease-in-out;
}

div.feeds .feed:hover .overlay {
	background-color : rgba(255, 255, 255, 0.75);
}

div.feeds .title {
	margin : 0 0 20px 0;
}

div.feeds .details {
	position   : absolute;
	right      : 20px;
	bottom     : 20px;
	left       : 20px;
	max-height : 360px;
	overflow   : auto;
}

div.feeds .details > div {
	padding-bottom : 20px;
}

div.feeds .feed.layout-big .banner {
	width : 100%;
}

div.feeds .feed.layout-big .title {
	background-color : rgba(255, 255, 255, 0.75);
	margin           : -10px -10px 10px -10px;
	padding          : 10px;
	transition       : background-color 0.3s ease-in-out;
}

div.feeds .feed.layout-big .details {
	opacity    : 0;
	transition : opacity 0.3s ease-in-out;
}

div.feeds .feed.layout-big:hover .title {
	background-color : rgba(255, 255, 255, 0);
}

div.feeds .feed.layout-big:hover .details {
	opacity : 1;
}

div.feeds .feed.layout-small .banner {
	width     : 460px;
	max-width : 100%
}

div.feeds .feed.layout-small .overlay {
	padding-left : 480px;
}

div.feeds .feed.layout-small .details {
	left : 480px;
}

input {
	border        : 1px solid #888;
	padding       : 5px;
	border-radius : 3px;
	font-size     : 16pt;
	margin        : 0;
	color         : #555753;
	font-family   : Ubuntu, sans-serif;
}

input[type=text] {
	width         : 400px;
	box-shadow    : inset 0 0 3px #4a6982;
	border-radius : 3px 0 0 3px;
}

input[type=text]:focus {
	box-shadow : inset 0 0 5px #4a6982;
}

input[type=submit] {
	border-left      : none;
	background-color : #d5d1ce;
	cursor           : pointer;
	font-style       : italic;
	padding          : 5px 15px 5px 10px;
	border-radius    : 0 3px 3px 0;
	box-shadow       : inset 0 0 3px #888;
}

input[type=submit]:active {
	box-shadow : inset 0 0 5px #888;
}

@media (max-width : 640px) {
	div.mobilemenu {
		display   : block;
		z-index   : 20;
		position  : relative;
		font-size : 12pt;
		margin    : 5px 0 5px 5px;
	}

	div.mobilemenu div {
		cursor    : pointer;
		display   : inline;
		padding   : 5px;
		font-size : 12pt;
		color     : #00438a;
	}

	table { top : 25px; }

	nav.menu {
		top        : 0;
		left       : 0;
		right      : 0;
		bottom     : auto;
		font-size  : 0;
		padding    : 0;
		max-height : 0;
		overflow   : hidden;
		z-index    : 21;
		transition : max-height 0.5s ease-in-out, box-shadow 0.1s ease-in-out 0.5s;
	}

	div.langmenu .languages a,
	div.mobileclose,
	nav.menu a {
		display          : block;
		background-color : #dcdcdc;
		font-size        : 12pt;
		padding          : 10px;
		color            : #00438a;
		cursor           : pointer;
	}

	nav.menu.visible {
		max-height : 250px;
		box-shadow : 0 0 9px 3px #585858;
		transition : max-height 0.5s ease-in-out;
	}

	div.langmenu {
		max-height : 0;
		overflow   : hidden;
		position   : fixed;
		right      : 0;
		top        : 0;
		left       : 0;
		z-index    : 21;
		transition : max-height 0.5s ease-in-out, box-shadow 0.1s ease-in-out 0.5s;
	}

	div.langmenu .curlang {
		display : none;
	}

	div.langmenu.visible {
		max-height : 150px;
		box-shadow : 0 0 9px 3px #585858;
		transition : max-height 0.5s ease-in-out;
	}

	div.langmenu:hover .languages,
	div.langmenu .languages {
		position         : static;
		display          : block;
		max-height       : none;
		padding          : 0;
		width            : 100%;
		background-color : #dcdcdc;
		box-shadow       : none;
	}

	div.sitemap.title { font-size : 13pt; }

	div.sitemap .target { width : 22%; }

	div.sitemap .clicks { width : 16%; }

	input[type=text],
	input[type=submit] {
		width         : 100%;
		box-sizing    : border-box;
		margin        : 5px 0;
		border-radius : 3px;
		border        : 1px solid #888;
	}

	div.p {
		width : 100%;
	}

	div.feeds .feed {
		margin-bottom : 40px;
	}

	div.feeds .overlay {
		position : static;
		opacity  : 1;
	}

	div.feeds .banner {
		float  : none;
		height : auto;
	}

	div.feeds .title {
		font-size : 20pt;
	}

	div.feeds .details {
		position   : static;
		font-size  : 12pt;
		max-height : initial;
	}

	div.feeds .details div {
		font-size : 12pt;
	}

	div.feeds .details div .links {
		display : block;
	}

	div.feeds .details div .br {
		display : none;
	}

	div.feeds .feed.layout-big .details {
		opacity : 1;
	}

	div.feeds .feed.layout-small .overlay {
		padding-left : 20px;
	}

	div.feeds .feed.layout-small .details {
		left : 20px;
	}
}