/**  * main.css *  * 
1. General HTML tags * 
2. Masthead area * 
3. Main content and sidebar * 
4. Footer * 
5. Media queries for responsive layout * 
6. Accessibility helpers **/

/********************************************************************* 
* 1. General HTML tags * */

* {	box-sizing: border-box; }
body {	padding: 5%;	max-width: 1600px; 	margin: 0 auto; }
body, td, input[type=text], textarea {	font-family: 'Verdana', 'Arial', sans-serif;	font-size: 100%; 	line-height: 1.4em;	color: #444; background-color: #FFF; }
img {	max-width: 100%; }
h1, h2 {	font-size:110%; color:#C80014;	font-weight: bold;}	
h3, h4, h5, h6, p, ul { font-size: 95%; }
h3 {	border-top: 1px solid #eee; 	padding-top: 1em;	}
p { color: #black; }
a {	color: #333;	text-decoration: none;	border-bottom: 1px solid #ccc; }	
a:hover,	.nav a:hover {		color: #000;		border-color: #aaa; 	}
blockquote {	margin-left: 0;	padding-left: 1.5em;	padding-right: 2em; 	border-left: 4px solid #ddd; 	font-style: italic; 	color: #777; }
pre, code {	background: #eee; 	border: 1px solid #ddd; }
pre {	font-size: 14px; 	line-height: 1.4em;	padding: 1em;	border-left: 4px solid #ddd; }

/********************************************************************* 
* 2. Masthead area * */ 

.topnav, .topnav li {	background-color:#aaa; list-style: none; 	font-family: 'Arial', serif;	padding: 0;	margin: 0;}	
.topnav li {	float: left; 	margin-right: 1em;	margin-bottom: 1em;	}	
.topnav a {	padding: 0.1em 0.1em;	text-decoration: none; 	display: block;	background:#FFF; color: #CC3300; 		border: none; 	}	
.topnav a:hover {	background: #FFF;	border-top: 1px solid #CC3300; }	
.topnav li.current a {	background: #FFF; 	border-top: 1px solid #CC3300; 	}	
.topnav li.edit a {		background: none; 	}
form.search {	float: right; 	margin: 0;	width: 30%; }	
form.search input {	font-family: 'Arial', serif; margin: 0;	padding: 0.1em 0.5em;	border: 1px solid #ccc; 		width: 100%; 	}
.breadcrumbs {	clear: both; 	padding-top: 1em; }	
.breadcrumbs span:after {		content: ">";		color: #999; 		padding-left: 0.5em;		padding-right: 0.25em; 	}

/********************************************************************* 
* 3. Main content and sidebar * */ 

#main {	float:left; background:url(../elements/bg_gelb_struktur1.gif) top left repeat; border-top: 1px solid #333; 	padding-top: 1em; 	margin-top: 1em; 	clear: both; height:100%; }
#content {	float: left;	padding: 2em; margin:0 0 0 20px; background-color:#fff; border:1px solid green; } 
#content ul.elements {	background:url(../elements/bg_gelb_struktur1.gif) top left repeat; padding:5px; margin:-40px 20px 20px -20px; list-style-type:none; border:1px solid red;}

#sidebar {	padding-left: 5%; 	padding-bottom: 2em; background-color:#eee; }
.nav {	margin-left: 0;	padding-left: 0;	list-style: none; }	
.nav .nav {		padding-left: 1.5em;		list-style: disc;	}	
.nav li {		margin: 1em 0;	}	
.nav-tree li {		margin-top: 0;		margin-bottom: 0;	}	
.nav a {		font-weight: bold;	}	
.nav-tree li a {		color: #777; 	}	
.nav .current > a {		color: #333; 	}
.align_left {	/* for images placed in rich text editor */ 	float: left;	margin: 0 1em 0.5em 0; 	position: relative;	top: 0.5em;	max-width: 50%; }
.align_right {	/* for images placed in rich text editor */ 	float: right;	margin: 0 0 0.5em 1em;	max-width: 50%; }
.align_center {	/* for images placed in rich text editor */ 	display: block;	margin: 1em auto; 	position: relative;	top: 0.5em;}
figure {	display: table;	width: 1px;	margin: 1em 0;}
figure img {	display: table-row;	margin-bottom: 0.5em;}
figure figcaption {	display: table-row;	font-size: smaller;	color: #777;	line-height: 1.4em;}

/********************************************************************* 
* 4. Footer * */	

#footer {	clear: both; 	border-top: 1px solid #eee; 	font-size: 80%; }

/********************************************************************* 
* 5. Media queries for responsive layout * */

@media only screen and (max-width: 767px) {	/* mobile layout */ 	
body, td, textarea {		font-size: 100%; 	}	
#content, 	#sidebar {		float: none;		width: 100%; 		padding: 0; 	}	
form.search {		float: none; 		width: 100%; 	}	
#content {		width: 100%; }	
#sidebar {		border-top: 1px solid #eee;		padding-top: 1em; 	}	
.align_left, .align_right, .align_center {		display: block;		float: none; 		margin: 1em auto;		max-width: 100%; }
}
@media only screen and (min-width: 1200px) {	/* extra-wide desktop layout */ 		body, td, textarea {		font-size: 115%; 	}
}

/********************************************************************* 
* 6. Accessibility helpers * *//* Hide visually, but remain approachable for screenreader */

.visually-hidden {	position: absolute;	width: 1px;	height: 1px;	padding: 0;	margin: -1px;	white-space: nowrap;	overflow: hidden;	clip: rect(1px, 1px, 1px, 1px);	border: 0;}

/* Show bypass link on hover */

.element-focusable:focus {	clip: auto;	overflow: visible;	height: auto;}

/* Sample styling for bypass link */

.bypass-to-main:focus {	top: 0;	left: 0;	width: 100%;	height: 40px;	line-height: 40px;	text-align: center;	background: #333;	color: #fff;}