@charset "UTF-8";
/* projektspezifische Einstellung, Vereinheitlichung der Browser ----------------------------- */
* 		{	
		margin: 0; padding: 0; border: 0 solid;
		font: inherit; font-size: 100%; vertical-align: baseline;
		
		font: 13px/17px Verdana, Arial, sans-serif;
		color: #222;
		text-align: left;
		}	

html	{font-family: sans-serif;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		height: 100%;
		margin-bottom: 1px;		
		}
body 	{ line-height: 1; text-align: center;

		background-color: #6699cc;
		background-image: url(../images/keyvisual.jpg);
}
article, aside, figcaption, figure, footer, header, hgroup,
	main, menu, nav, section, summary {
	display: block
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}
audio	{max-width: 400px;}
audio:not([controls]){display:none;height:0;}
[hidden], template { display: none; }
a 		{background-color: transparent; 
		text-decoration: none;}
a:active, a:hover {outline: 0;}
abbr[title] 	{ border-bottom: 1px dotted;}
b, strong 		{font-weight: 700;}
dfn 			{font-style: italic;}
h1 				{font-size: 2em; margin: .67em 0;}
svg:not(:root)	{overflow:hidden;}
figure 			{margin: 1em 0px;}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}
pre 			{overflow: auto;}
code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}
button {overflow: visible;
		
		min-height: 2em;
		}
button, select {text-transform: none;}

button, html input[type="button"],
	/* Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls */
	input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled], html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0; padding: 0;
}
input { line-height: normal; border: 1px #0000ec solid; }
input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;padding: 0;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button
	{
	height: auto;
}
input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
	{
	-webkit-appearance: none;
}
fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em;
}
legend { border: 0; padding: 0;}
optgroup {font-weight: 700;}
table 	{border-collapse: collapse;
		border-spacing: 0;
}
article, aside { display: block;}
blockquote { quotes: none;}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
cite {margin: 0 0 1em 1.5em;}
dt {font-weight: 700;}
dd {margin: 0 0 1em 2em;}
dl { margin: 0 0 1em 1em;}
fieldset {border: 0 solid;}
figcaption, figure, footer {
	display: block;
}
header, hgroup {display: block;}
li {margin-left: 1em; line-height: 1.5em;}
img 	{border: 0 solid;}
menu 	{display: block;}
nav 	{display: block;}
option 	{padding-left: .4em;}
ol 		{list-style: none; margin: 0 0 1em 1em;}
q 		{quotes: none;}
q:before, q:after {
		content: ''; content: none;
}
section {display: block;}
table 	{border-collapse: collapse; border-spacing: 0; }
ul 		{ list-style: square; margin: 0 0 1em 1em; }

em {font-weight: 700;}
h1 	{font-size: 120%; font-weight: 700;
	margin: 10px 0 20px; color: #0000ec;
	}
h2 	{font-size: 120%; font-weight: 700;
	margin: 10px 0; color: #369;
	}

hr {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border: solid #369 1px;
}

figure {text-align: center;}
figcaption {
	text-align: center;
	font-style: italic;
	margin: 2px 0 4px 0;
}

img {width: 100%; height: auto;}
li {-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

p { margin: 10px 0 10px 0;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

select {border: 1px solid #0000ec;}
span {font-size: inherit;}
td {padding: 2px;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
th { padding: 2px; color: #0000ec;
	font-weight: 700;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.ui-dialog-title {
	color: #fff;
	font-weight: 700;
}

#menue-side {
	width: 40px; position: fixed; right: 0; bottom: 1%;
	border: 2px solid #0000ec; border-bottom-left-radius: 5px; border-top-left-radius: 5px;
	background: #fff;
	z-index: 50;
}
#menue-side img {margin: 1px 0 0 4px;}
.menue-side-button {
	padding: 6px 0 6px 8px;
	border: 2px solid #0000ec;
	border-radius: 2px;
}

/* CSS für alle ----------------------------------------------------------- */
#container {
	width: 100%; max-width: 1024px;
	margin: 0px auto; 
	background-color: #0000ec;
	text-align: center
}
header { position: relative;}
#h-menue-button 	{ float: left; padding: 3em 1em 1em 1em; cursor:pointer;}
#h-search-button 	{ float: left; padding: 3em 1em 1em 1em; cursor:pointer;}
#h-menue-button img { width: 2em; height: auto;}
#h-search-button img{ width: 2em; height: auto;}

#LogoLang 	{float: left; width: 70%; color: #fff; text-align: center;
			font-size: 100%; vertical-align: middle; line-height: 2;}
#h-logo 	{display: none; max-width:100px;}

#bnbb-search{clear:both; display:none;}
#bnbb-menue {clear:both; display:none; }	

#content {width: 98%; padding: 1%; float:left;
			background-color: #ffffff;
			text-align: left;
			}
#content a 			{color: #0000ec; font-weight:bold;}
#content a:link 	{color: #0000ec}
#content a:visited 	{color: #0000ec}
#content a:hover 	{color: #333;}
#content a:active 	{color: #00c;}
#content ul		{ list-style:square url(../images/li-square.png) }

#joke 		{width: 98%; padding: 1%;
			background-color: #0000ea;
			text-align: left;
			}
#joke-frame	{width:96%; height:200px;}
footer{
	clear:both;
	width: 98%; padding: 1%; 
	background-color: #0000ea; color: #fff;
	text-align: center; vertical-align: middle; line-height: 1.2em;	
}

.picPortrait{margin-left:20%;margin-right:20%;}

/** -------------------------------------------------------------- Phones **/
@media only screen and (max-width: 599px) {
	#LogoLang {float: left; width: 60%; font-size: 150%;  line-height: 2;
	}	
	.picPortrait {margin-left: 2%; margin-right: 2%;}
}

/** ------------------------------------------------------------- Tablets **/
@media only screen and (min-width: 600px ) {
	#LogoLang {width:80%; font-size: 200%; line-height: 3.5;}
}

/** ------------------------------------------------------------------ PC **/
@media only screen and (min-width: 980px ) { 
	#LogoLang {width:70%; font-size: 250%; line-height: 3.5;}
	#h-logo {float:right; display: inline;}
	#LogoLang {width:70%; font-size: 250%; line-height: 3.5;}
	#content {width: 80%; }
	#joke 	{width: 15%; float:right; display: inline; margin-right:1%; height:500px;}
	#joke-frame{height:500px;}
}

 /** -------------------------------------------------------- extra breit **/
@media only screen and (min-width: 1260px ) {

}


/* ***************************************************************************
*  Navigation
*****************************************************************************/
#nav {	position: fixed; z-index:50; 
		width: 250px;
		line-height:2;
		-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.2);
		-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.2);
		box-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#nav ul	{margin:0;}
.menu-item{background:#fff; width:100%}
.menu-item h4{color:#fff; padding:7px; background:#0000ec}
.menu-item h4 a{color:#fff; display:block; text-decoration:none; width:100%}
.menu-item h4{
		border-bottom:1px solid rgba(0,0,0,0.3);
		border-top:1px solid rgba(255,255,255,0.2);
		color:#fff; padding:7px; background:#0000ec; 
		background:-moz-linear-gradient(top,#0000ec 0%,#00a 50%, #0000ec 100%);
		background:-webkit-gradient(linear,left top, left bottom,
					color-stop(0%, #0000ec), 
					color-stop(44%,#222288),
					color-stop(100%, #0000ec));
		background:-webkit-linear-gradient(top,#0000ec 0%,#00a 50%,#0000ec 100%);
		background:-o-linear-gradient(top,#0000ec 0%, #00a 50%,#0000ec 100%);
		background:-ms-linear-gradient(top,#0000ec 0%,#00a 50%, #0000ec 100%);
		background:linear-gradient(top,#0000ec 0%, #00a 50%,#0000ec 100%);
		}
.menu-item h4:hover, .menu-item h4:focus, .menu-item h4:active{
		background:#00f;
		background:-moz-linear-gradient(top, #00a 0%,#00c 100%);
		background:-webkit-gradient(linear,left top, left bottom, color-stop(0%,#00a),color-stop(100%,#00c));
		background:-webkit-linear-gradient(top,#00a 0%, #00c 100%);
		background:-o-linear-gradient(top, #00a 0%, #00c 100%);
		background:-ms-linear-gradient(top,#00a 0%,#00c 100%);
		background:linear-gradient(top,#00a 0%, #00c 100%);
}
.menu-item ul{
		background:#fff;height:0;max-height:0;list-style-type:none;
		overflow:hidden; padding:0;
		-webkit-transition:max-height 1s ease-in;
		-moz-transition:max-height 1s ease-in;
		-o-transition:max-height 1s ease-in;
		-ms-transition:max-height 1s ease-in;
		transition:max-height 1s ease-in
		}
.menu-item:hover ul, .menu-item:focus ul, .menu-item:active ul
		{height:auto; max-height:500px}
.menu-itemv ul a
		{text-decoration: none;
		border-bottom: 1px solid #0000ec; display:block; width:100%;
		-webkit-hyphens:auto;
		-moz-hyphens:auto;
		-ms-hyphens:auto;
		hyphens:auto
		}
.menu-item li{
		padding:5px 0 5px 15px;
		margin:0; color:#0000ec;
		border-right:1px solid #0000ec;
		-webkit-transition:background-color .5s;
		-moz-transition:background-color .5s;
		-o-transition:background-color .5s;
		-ms-transition:background-color .5s;
		transition:background-color .5s
		}
.menu-item li:last-child
		{border-bottom:0;}
.menu-item li:hover
		{background:#aaf;}
#bnbb-search{
		display:none;
		width:100%; height:5.5em;
		border:2px solid #fff; border-radius:5px;
		background:#0000ea;}


/* Druckausgabe ----------------------------------------------------------------------------------------*/
@media print {
	header {border-bottom: 2px solid #000;}
	#menue-side {display: none;}
	#bnbb-search {display: none;}
}