/* ------------------------------------ Allgemeines */

html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	-ms-text-size-adjust: 100%; /* For IE Phones */
	-moz-text-size-adjust: 100%; /* Firefox */
}

body {
	margin : 0;
	padding : 16px;
	background-color : #ffffff;
	background-image : url(https://www.schimba.de/includes/tiles.png);
}

@media (min-width: 1316px) {
	body {
		margin : 0;
		padding : 0;
		background-image : none;
	}
}

/* ------------------------------------ Container */

div#container * {
	margin : 0;
	padding : 0;
	color : #222222;
	font-family : monospace;
	font-weight : normal;
	font-style : normal;
	font-size : 0;
	text-decoration : none;
	text-align : left;
	line-height : 0;
	border-style : none;
	border-width : 0;
}

@media (min-width: 1316px) {
	div#container {
		position : relative;
		top : 16px;
		margin : auto;
		padding : 0;
		height : 614px;
		width : 1300px;
		max-width : 1300px;
		background-image : url(https://www.schimba.de/includes/tiles.png);
		border-style : solid;
		border-width : 8px;
		border-color : #eeeeee;
	}
}


/* ------------------------------------ Logo */

div#logo {
	margin-top : 16px;
	margin-bottom : 32px;
}

@media (min-width: 1316px) {
	div#logo {
		position : absolute;
		top : 16px;
		left : 16px;
		margin : 0;
		height : 110px;
		width : 280px;
		overflow : hidden;
	}

	div#logo * {
		vertical-align : middle;
		text-align : center;
	}
}

/* ------------------------------------ Navigation */

div#navigation {
	margin-bottom : 16px;
}

div#navigation a {
	color : #92d050;
	font-size : 16px;
	font-weight : bold;
	line-height : 24px;
}

div#navigation a:hover {
	color : #777777;
}

div#navigation li {
	display : inline;
	list-style-type : none;
	margin-right : 16px;
}

@media (min-width: 1316px) {
	div#navigation {
		position : absolute;
		top : 158px;
		left : 16px;
		margin : 0;
		height : 280px;
		width : 280px;
		overflow : hidden;
	}

	div#navigation .ahide {
		font-size : 0;
		line-height : 0;
		margin : 0;
	}

	div#navigation h2 {
		font-size : 24px;
		font-weight : bold;
		line-height : 36px;
		margin-bottom : 24px;
		text-align : center;
	}

	div#navigation li {
		margin : 0;
		display : block;
		text-align : center;
	}
}

/* ------------------------------------ Info */

div#info {
	margin-bottom : 24px;
}

div#info .author {
	font-size : 12px;
	font-weight : bold;
	line-height : 18px;
	color : #777777;
}

div#info .citation {
	font-size : 12px;
	line-height : 18px;
	color : #777777;
	margin-bottom : 16px;
}

div#info p {
	font-size : 16px;
	line-height : 24px;
	margin-bottom : 16px;
}

@media (min-width: 1316px) {
	div#info {
		position : absolute;
		top : 16px;
		left : 350px;
		margin : 0;
		height : 110px;
		width : 934px;
		overflow : hidden;
	}
}

/* ------------------------------------ Content */

div#content {
	margin-bottom : 24px;
}

div#content .ulhide {
	margin-bottom : 24px;
}

div#content .ulmenu {
	margin-bottom : 24px;
}

div#content .limenu {
	display : inline;
	list-style-type : none;
	margin-right : 16px;
}

div#content a {
	color : #92d050;
	font-size : 16px;
	font-weight : bold;
	line-height : 24px;
}

div#content a:hover {
	color : #777777;
}

div#content h2 {
	font-size : 24px;
	font-weight : bold;
	line-height : 36px;
	margin-bottom : 24px;
}

div#content input {
	font-size : 12px;
	line-height : 18px;
	margin-right : 16px;
	padding : 10px;
	background-color : #dddddd;
}

div#content input:hover {
	background-color :  #999999;
}

div#content p {
	font-size : 16px;
	line-height : 24px;
	margin-bottom : 16px;
}

div#content span {
	font-size : 16px;
	line-height : 24px;
	margin-bottom : 16px;
}

div#content strong {
	font-size : 16px;
	line-height : 24px;
	margin-bottom : 16px;
	display : block;
}

div#content table {
	margin-bottom : 16px;
}

div#content th {
	font-size : 16px;
	font-weight : bold;
	line-height : 24px;
	padding-bottom : 8px;
	padding-right : 16px;
	white-space : nowrap;
}

div#content td {
	font-size : 12px;
	line-height : 18px;
	padding-right : 16px;
	white-space : nowrap;
}

@media (min-width: 1316px) {
	div#content {
		position : absolute;
		top : 158px;
		left : 350px;
		margin : 0;
		height : 440px;
		width : 934px;
		overflow : hidden;
		overflow-y : auto;
	}

	div#content .ahide {
		font-size : 0;
		line-height : 0;
		margin : 0;
	}

	div#content .h2second {
		margin-top : 24px;
	}

	div#content .ulhide {
		margin-bottom : 0;
	}
}

/* ------------------------------------ Footer */

div#footer h2 {
	font-size : 24px;
	font-weight : bold;
	line-height : 36px;
	margin-bottom : 24px;
}

div#footer p {
	font-size : 12px;
	line-height : 18px;
	font-weight : bold;
}

@media (min-width: 1316px) {
	div#footer {		
		position : absolute;
		top : 470px;
		left : 16px;
		height : 128px;
		width : 280px;
		overflow : hidden;
	}

	div#footer * {
		text-align : center;
	}
}

/* ------------------------------------ Demonstrator General */

div#div_demonstrator div * {
	margin : 0;
	padding : 0;
	font-size : 0;
	line-height : 0;
	text-align : center;
	vertical-align : middle;
	border-style : none;
	color : #222222;
}

div#div_demonstrator button.active:hover,
div#div_demonstrator input.active:hover {
	background-color : #999999;
}

/* ------------------------------------ Demonstrator ContextMenu */

div#div_demonstrator div.contextmenu {
	position : absolute;
	top : 24px;
	left : 24px;
	width : 200px;
	background-color : #dddddd;
	display : none;
}

div#div_demonstrator button:focus + div.contextmenu,
div#div_demonstrator button + div.contextmenu:hover {
	display : block;
}

/* ------------------------------------ Demonstrator Menu */

div#div_demonstrator div.divmenu {
	position : absolute;
	width : 934px;
	background-color : #777777;
}

div#div_demonstrator div.divmenu span {
	font-size : 16px;
	line-height : 16px;
}

div#div_demonstrator button.buttonmenu {
	font-size : 12px;
	line-height : 18px;
	padding : 10px;
	background-color : #dddddd;
}

/* ------------------------------------ Demonstrator Input */

div#div_demonstrator div.divinput {
	position : absolute;
	top : 156px;
	left : 292px;
	height : 200px;
	width : 350px;
	background-color : #dddddd;
}

div#div_demonstrator textarea.textinput {
	font-size : 16px;
	line-height : 24px;
	height : 100px;
	width : 334px;
	border-style : solid;
	border-width : 8px;
	border-color : #777777;
	background-color : #ffffff;
}

/* ------------------------------------ Demonstrator ButtonInput */

div#div_demonstrator button.buttoninput,
div#div_demonstrator input.buttoninput {
	width : 350px;
	font-size : 16px;
	line-height : 18px;
	padding : 16px;
	background-color : #777777;
}

/* ------------------------------------ Demonstrator Node */

div#div_demonstrator div.divnode {
	position : absolute;
	height : 150px;
	width : 350px;
	background-color : #bbbbbb;
}

div#div_demonstrator div.divnode p {
	font-size : 16px;
	line-height : 24px;
	padding : 8px;
}

/* ------------------------------------ Demonstrator ButtonNode */

div#div_demonstrator button.buttonnode {
	width : 350px;
	font-size : 16px;
	line-height : 18px;
	padding : 8px;
	background-color : #bbbbbb;
}

/* ------------------------------------ Demonstrator Switch */

div#div_demonstrator div.divswitch {
	position : absolute;
}

div#div_demonstrator button.buttonswitch {
	height : 150px;
	width : 32px;
	font-size : 32px;
	line-height : 150px;
	background-color : #dddddd;
}

/* ------------------------------------ Demonstrator List */

div#div_demonstrator div.divlist {
	position : absolute;
	height : 368px;
	width : 200px;
	overflow-y : auto;
	background-color : #dddddd;
}

div#div_demonstrator button.buttonlist {
	width : 200px;
	font-size : 16px;
	line-height : 18px;
	margin-bottom : 8px;
	padding : 8px;
	background-color : #dddddd;
}

/* ------------------------------------ Demonstrator Item */

div#div_demonstrator button.buttonitem {
	width : 152px;
	font-size : 12px;
	line-height : 18px;
	margin-bottom : 8px;
	padding : 8px;
	background-color : #bbbbbb;
}

/* ------------------------------------ Demonstrator ItemText */

div#div_demonstrator div.itemtext {
	width : 136px;
	font-size : 12px;
	line-height : 18px;
	margin-bottom : 8px;
	margin-left : 24px;
	padding : 8px;
	display : none;
}

div#div_demonstrator button:focus + div.itemtext,
div#div_demonstrator button + div.itemtext:hover {
	display : block;
}

/* ------------------------------------ Demonstrator Label */

div#div_demonstrator div.divlabel {
	position : absolute;
	width : 100px;
}

div#div_demonstrator div.divlabel p {
	font-size : 16px;
	line-height : 16px;
}

/* ------------------------------------ Demonstrator Rel */

div#div_demonstrator div.divrel {
	position : absolute;
}

/* ------------------------------------ Demonstrator ButtonHRel */

div#div_demonstrator button.buttonhrel {
	height : 100px;
	width : 50px;
	font-size : 32px;
	line-height : 100px;
	background-color : #777777;
}

/* ------------------------------------ Demonstrator ButtonVRel */

div#div_demonstrator button.buttonvrel {
	height : 50px;
	width : 100px;
	font-size : 32px;
	line-height : 50px;
	background-color : #777777;
}

/* ------------------------------------ Demonstrator Statistics */

div#div_demonstrator div.divstatistics {
	position : absolute;
	height : 100px;
	width : 175px;
	background-color : #dddddd;
}

/* ------------------------------------ Demonstrator Meta */

div#div_demonstrator div.divmeta {
	position : absolute;
	height : 190px;
	width : 620px;
	background-color : #bbbbbb;
}

div#div_demonstrator button.buttonmeta {
	width : 620px;
	font-size : 16px;
	line-height : 18px;
	margin-bottom : 8px;
	padding : 8px;
	background-color : #bbbbbb;
}

/* ------------------------------------ Demonstrator SNode */

div#div_demonstrator div.divsnode {
	position : absolute;
	height : 120px;
	width : 250px;
	background-color : #dddddd;
}

div#div_demonstrator div.divsnode p {
	font-size : 12px;
	line-height : 18px;
	padding : 6px;
}

/* ------------------------------------ Demonstrator ButtonSNode */

div#div_demonstrator button.buttonsnode {
	width : 250px;
	font-size : 12px;
	line-height : 14px;
	padding : 6px;
	background-color : #dddddd;
}

/* ------------------------------------ Demonstrator ButtonSSwitch */

div#div_demonstrator button.buttonsswitch {
	height : 120px;
	width : 24px;
	font-size : 24px;
	line-height : 120px;
	background-color : #bbbbbb;
}

/* ------------------------------------ Demonstrator SLabel */

div#div_demonstrator div.divslabel {
	position : absolute;
	width : 75px;
}

div#div_demonstrator div.divslabel p {
	font-size : 12px;
	line-height : 12px;
}

/* ------------------------------------ Demonstrator ButtonSRel */

div#div_demonstrator button.buttonsrel {
	height : 80px;
	width : 38px;
	font-size : 24px;
	line-height : 80px;
	background-color : #777777;
}