* {
	padding:0;
	margin:0;
	}
/** All elements with a border-radius */
section, code {
		border-radius: 1rem;
	}
html {
		font-size:1em;
		font-family: 'Tinos', serif;
	}
section {
			margin: 1rem auto;
			width: 500px;
			border:#006 1px solid;
			overflow:hidden;
			z-index:1;
	}
	section > div {
			padding: 20px;
			width: 460px;
			background:#D6E1F1;
		}
	section > div + div{
			padding-top: 0;
		}
code {
		background:#95B3DB;
		font-size: 0.9em;
		display:block;
		padding: .5rem;
		margin: 0 0 .5rem 0;
	}
		
form {
		margin-top: 0.5rem;
	}
label {
		cursor:pointer;
	}
input[type=button]{
		display:inline-block;
		width:auto;
		min-width:227px;
		padding: .5rem;
		background:#E6AE8A;
		border: none;
		text-align:center;
		color: #333;
		font-weight: bold;
		margin: 0 0 .5rem 0;
	}
	input[type=button]:hover {
			
		background:#7FC1D4;
		}

/** margin nach Objekten */
h1,h2,h3,h4,h5,h6,code,p {
		margin-bottom: .5em;
		clear:both;
	}
a {
		text-decoration:none;
	}
	

#content {
	}
	
#manual {
		width: 10em;
		position:fixed;
		top: 0;
		right: 0;
		z-index:-5;
		padding: 1rem;
		font-size:1em;
	}
/*  ************ Jumplist and Navigation related styling**************************************************/

nav#sideNav-jumplist {
	position: absolute;
	top: 0;
	left:0;
	width: 10em;
	}
	nav#sideNav-jumplist > a {
			display:block;
			width:auto;
			background:#E6AE8A;
			color:#333;
			padding: .5rem 1rem;
		}

		nav#sideNav-jumplist a:hover {
				background:#7FC1D4;
			}
	nav#sideNav-jumplist > .h2-link {
			font-weight: bold;
		}
	nav#sideNav-jumplist > .h2-link + h3-link{
			padding-bottom: 0.5rem;
		}
	nav#sideNav-jumplist > .h3-link {
			font-size: 0.75em;
			padding: 0.5rem 1rem;
		}
	nav#sideNav-jumplist > .other-link {
			
		}
		
/** styling for the div whose "id" is selected thoruhg href / "#..." in url  */
	section > div:target{
			/*display:block;
			background-image: linear-gradient(to bottom, #7FC1D4, transparent);*/
		}
		/* hx  */
		section > div:target > h2, section > div:target > h3 {
			text-decoration:underline;
			}
		
/*  ************ Input to show / hide Examples **************************************************/
label.toggleExample {
		display:block;
		width:auto;
		padding: .5rem;
		background:#E6AE8A;
		text-align:center;
		color: #333;
		font-weight: bold;
		margin: 0 0 .5rem 0;
	}
	label.toggleExample:hover {
		background:#7FC1D4;
	}
	/** hides checkboxes (with class toggleExample) if there is a label beforehand */
input[type=checkbox].toggleExample {
		display: none;
	}
	
	.toggleExample + label + div {
		display: none;
}
	.toggleExample:checked + label {
			font-weight: normal;
		}
	.toggleExample:checked + label + div {
		display:block;
	}	
	
/** Div with buttons to control all examples at once*/
div#exampleControl {
		width: auto;
		position: fixed;
		bottom: 0;
		right: 0;
		padding: 0;
	}
	#exampleControl a {
			display:block;
			background:#E6AE8A;
			color:#333;
			padding: 1rem;
		}
		#exampleControl a:hover {
				background:#7FC1D4;
			}
	#exampleControl div {
			display:block;
			background:#E6AE8A;
			color:#333;
			padding: 1rem;
			cursor:pointer;
		}
		#exampleControl div:hover {
				background:#7FC1D4;
			}