/**
 *
 * Main Layout File
 */



@media all
{
	* { margin:0; padding: 0; }

	/* Das zurücksetzen der Innen- und Außenabstände verursacht zu kleine Selectboxen. Dies wird korrigiert */
	option {padding-left: 0.4em}

	/*
	** Die nachfolgenden Angaben entstammen dem Artikel 'Useful Code Snippets' von Mike Foskett
	** [http://www.websemantics.co.uk/tutorials/useful_css_snippets/]
	*/

	/* Vertikalen Scrollbalken im Netscape & Firefox erzwingen. Dies verhindert, dass zentrierte Layouts
	** um 10 Pixel springen wenn der Seiteninhalt kleiner wird als die Höhe des Browserfensters. */
	html { height: 100% }
	body {
		min-height: 101%;
	/* Beseitigung des Rundungsfehlers bei Schriftgrößen im Opera sowie Standardformatierungen */
		font-size: 100.01%;
	/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Größe des Browser
			Fensters geändert wird. */
		position: relative;

	/* Vorgabe der Standardfarben und Textausrichtung*/
		color: #000;
		background: #fff;
		text-align: left;
	}

	/* Standardrahmen zurücksetzen */
	fieldset, img { border:0; }

	/* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */
	select, input, textarea { font-size: 99% }

/* ######################################################################################################
** ### DIV-Container des Basislayouts ###################################################################
** ######################################################################################################
*/

	#header { position:relative }

	#topnav {
		position:absolute;
		top: 10px;
		right: 10px;
		color: #fff;
		background: transparent;
		text-align: right; /* Erforderlich, damit im Opera 6 wirklich rechts plaziert ! */
	}

	#nav { clear:both; width: auto; }
	#main {	clear:both; width: auto; }


	#col1 {	float: left;
		width: 200px; 	}
	#col3{width:auto; margin:13px 50px;}
    #col3_w_margin {width: auto; margin-left:220px; margin-top:25px;}
	#col1_content,  #col3_content { position:relative; }
    #col1_content {margin: 1em;}

/* ######################################################################################################
** ### Markupfreie CSS-Floatclearing-Lösungen ###########################################################
** ######################################################################################################
*/

	/* Clearfix-Methode zum Clearen der Float-Umgebungen */
	 .clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	/* Diese Angabe benötigt der Safari-Browser zwingend !! */
	.clearfix { display: block; }
	/* Overflow-Methode zum Clearen der Float-Umgebungen */
	.floatbox { overflow:hidden; }
	/* IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
	#ie_clearing { display: none }


	ul, ol, dl { margin: 0 0 1em 1em }
	li { margin-left: 1.5em; line-height: 1.5em; }
	dt { font-weight: bold; }
	dd { margin: 0 0 1em 2em; }
	blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}


body {background:#abbcdd; padding: 0 10px 0 10px;}

#header {position:relative; height:200px; color:#fff; background:#fff;}
#header img {position:absolute; top:10px; left:5px; font-size:208%;}
.temp_img {position:absolute; top:80px; right: 335px;}


#page{border:7px #ffcc33 solid; background:#fff; min-height:800px;}
#page_margins {border:1px #abbcdd solid; min-width:756px; max-width:80em; margin:auto;}

#topnav {color:#999;}
#topnav a {color:#999; background:transparent; text-decoration:none;}


#Navigation {background-color:#ffe599;border-bottom:3px #ffcc33 solid; border-top:3px #ffcc33 solid;height:3em;}



/*** Content ****/
body {color:#222; font-size:83.33%; font-family:'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;}

h1,h2,h3,h4 {font-family:'Lucida Grande', Verdana, Arial, Sans-Serif; font-weight:normal;}
h1,h2,h3,h4 {font-family:'Lucida Grande', Verdana, Arial, Sans-Serif; display:block; font-weight:bold;}

h1 {font-size:1.1em; color:#765; background:inherit;  margin:0.4em 0 0.5em 0; border-bottom:1px #ccc solid; padding-top:1em;}
h2 {font-size:1.0em; color:#fff; background:#765; margin:0.2em 0 0.5em 0; padding:0.3em; margin-top:1em;}
h3 {font-size:1.0em; color:#765; background:transparent; margin:0.4em 0 0.3em 0; padding-top:1em;}
h4 {font-size:1.0em; color:#888; background:transparent; margin:0.4em 0 0.3em 0; border-bottom:1px #ccc solid; padding-top:1em;}

h1.plaene{font-family: "Kristen ITC","Comic sans MS",Helvetica,sans-serif; font-size: 1.4em;
color: #ff402b;	border-bottom:none;}

#teaser h1 {font-size:1.2em; border:0;}

p,ul,dd,dt {line-height:1.5em;}
p {line-height:1.5em; margin:0 0 1em 0;}

strong,b {font-weight:bold;}
em,i {font-style:italic;}
pre, code {	font-family:"Courier New", Courier, monospace;}
address {font-style:normal; line-height:1.5em; margin:0 0 1em 0;}

hr {color:#fff; background:transparent; margin:0 0 0.5em 0; padding:0 0 0.5em 0; border:0; border-bottom:1px #eee solid;}

acronym, abbr {border-bottom:1px dashed #c00; cursor:help;}

p.ziel {border: 2px solid #cca; background: #ffc; padding: 2em 0.5em; margin-right:50px;}


/* ### Bildpositionierung ############################################################################ */
img.float_left {float:left; margin-right:1em; margin-bottom:0.15em; border:0;}
img.float_right {float:right; margin-left:1em; margin-bottom:0.15em; border:0;}
img.center {text-align:center; background:#fff; padding:4px; border:1px #ddd solid;}



/* MAIN NAVIGATION - TABS  */

	#Navigation ul {
 		float: left;
		margin-left: 13px;
		list-style:none;
	}
		#Navigation ul li {
	 		list-style: none;
			margin: 0 5px;
			float: left;
			line-height: 3em;
			display: inline;
		}
  			#Navigation ul li a {
				float: left;
				text-decoration: none;
				display: block;
				height: 2.5em;
				font-size: 1.2em;
				padding: 0 0 0 5px;
				color: #444;
			}
				#Navigation ul li a span {
					text-align: center;
	        		float: left;
					padding-right: 10px;
					height: 2.5em;
				}
					#Navigation ul li a:hover {
			 			background: #cca;
						color: #444;
						cursor: pointer;
					}
					#Navigation ul li a:hover span {
						background: #cca ;
						cursor: pointer;
					}

    			#Navigation ul li a.current,
	    		#Navigation ul li a.section,
	    		#Navigation ul li a.section:hover,
	    		#Navigation ul li a.current:hover {
				 	background: #fff ;
				 	color: #444;
					}
				#Navigation ul li a.current span,
				#Navigation ul li a.section span,
	    		#Navigation ul li a.section:hover span,
				#Navigation ul li a.current:hover span {
					background: #fff ;
					color: #444;
				}

				#Navigation ul li img{float:left; margin-right:-3px;}


#Menu2 {width:100%; overflow:hidden; color:#222; margin-top:13px;; padding:0 0 0 0;}
#Menu2 img {margin-right:0.7em;}
#Menu2 ul {width:100%; overflow:hidden; margin:0em 0 0em 0; list-style-type:none; border-top:1px #ddd solid; border-bottom:1px #ddd solid;}
#Menu2 ul a {display:block; text-decoration:none;}
#Menu2 ul li {float:left; width:100%; margin:0; padding:0;}
#Menu2 ul li {display:block; width:95%; padding:0; }
#Menu2 ul li a { width:100%; padding:3px 0px 3px 7%; background-color:#ffe; color:#444; border-bottom:1px #eee solid;}
#Menu2 ul li a:hover {background-color:#ffe; color:#222;}
#Menu2 ul li a.current, #Menu2 ul li a.current:hover {background-color:#aab; color:#fff; font-weight:bold; border-bottom:1px #ddd solid; display:block;}

/* One-column page
-------------------------------------------*/
.simplepage {width:80%; margin:0 auto; padding-top:40px}



/* BREADCRUMBS
-------------------------------------------- */
#Breadcrumbs {
 	color: #B7C0C5;
	text-align: left;
	font-size: 0.9em;
	margin: 0px 5px 10px 0;
}
	#Breadcrumbs p {
		margin: 0;
	}

/*LESSONS*/
.faint_list {overflow:auto; color:#999; width:90%;}
.faint_list ul {float:left; list-style:none;}
.faint_list ul li{float:left; display:inline; margin-right:5px;}
.faint_list ul li a {color:#999; text-decoration:none;}
.faint_list ul li a.current {color:#765; font-weight:bold;}


h3.lesson {font-size: 1.25em;}
ul.lesson, ul.menulist {list-style: none; margin-top:1.3em;}
ul.lesson li, ul.menulist li {line-height:2.4em;}
ul.lesson li a,  ul.menulist a {text-decoration:none; }
.lesson_date {font-weight:bold; margin-right:10px;}
h2.album {background:none; color:#765;margin-top:28px}
	.album-nav {border:none}


/* COMMENTS
---------------------------------------- */
#CommentHolder ul {
	list-style: none;
	margin: 20px 0;
}
#PageComments li {
	margin: 5px 0;
	padding: 1px;
	width: 88%;
}
	#PageComments li.odd {
		background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%;
		padding-left: 40px;
		padding-right: 10px;
		border-bottom: 2px solid #BCE4FE;
	}
	#PageComments li.even {
		background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%;
		padding-right: 40px;
		padding-left: 10px;
	}

		#PageComments li.odd p.info {
			color: #3AA0C3;
		}

		.actionLinks li {
		   display: inline;
		   border-right: 1px solid;
		}
			.actionLinks li a {
				padding-right: 3px;
				font-size: 10px;
			}
   			.actionLinks li.last {
      			border-right: none;
   			}

.commentrss {
	background: transparent url(../images/feed-icon-14x14.png) no-repeat;
	padding-left: 20px;
	font-size: 1.1em;
	line-height: 1.6em;
}
#PageCommentsPagination p {
	text-align: center;
	font-size: 1.2em;
}
#PageComments p {
	font-size: 1em;
}
	#PageComments p.info {
		color: #999;
		margin: 0px;
		padding: 0;
		line-height: 1em;
		font-size: 0.9em;
	}

/* SEARCH RESULTS STYLES
------------------------------------------------ */
ul#SearchResults {
	margin: 10px 0;
}
	ul#SearchResults li {
		list-style: none;
		margin: 5px 0;
		font-size: 1em;
	}

/* SEARCH FORM
-----------------------------------------------*/
html #SearchForm_SearchForm {
	float: right;
	width: 240px;
	margin: 5px;
}
html #SearchForm_SearchForm .middleColumn {
	float: left;
	width: 164px;
	margin: 0 5px 0 0;
	padding: 2px;
	background-color: #51a9df;

}
	html #SearchForm_SearchForm .middleColumn input.text {
		width: 160px;
		border: none;
		color: #666;
	}
html #SearchForm_SearchForm #SearchForm_SearchForm_action_results {
	float: left;
	margin-top: 2px;
}

/* MESSAGEBOXS
--------------------------------------------- */
.message {
	margin: 15px;
	padding: 5px;
	width: 92%;
	color: #979908;
	border: 4px solid #F7F8B4;
	background: #FFFFEA;
}
span.middleColumn .message {
	margin: 4px 0 0 3px;
}
.required {
	margin: 4px 0 0 3px;
	padding: 5px;
	width: 92%;
	color: #DC1313;
	border: 4px solid #FF7373;
	background: #FED0D0;
}



p#Remember label {
	margin: -24px 0 0 20px;
	text-align: left;
}
.entry {
	border-bottom: 1px solid #eee;
}

.typography #Content p.authorDate {
	color: #444;
	margin-top: -15px;
	}
/* UNSUBSCRIBE NEWSLETTER
------------------------------------------------ */
#Unsubscribe_MailingListForm_MailingListForm{
	min-height:100px;
}

	#Unsubscribe_MailingListForm_MailingListForm p{
		margin:0 !important;
		padding:10px;
	}
		#Unsubscribe_MailingListForm_MailingListForm p label{
			display: inline;
		}
	#Unsubscribe_MailingListForm_MailingListForm label{
		margin:0;
	}
}




/* ######################################################################################################
** ### Skiplink-Navigation ##############################################################################
** ######################################################################################################
*/
@media screen, print
{
.skip {
	position: absolute;
	left: -1000em;
	width: 20em;
}
}

@media print {
#header, #Navigation, #col1, .faint_list {display:none;}
#col3, #col3_w_margin {width:100%; margin: 20px;}
body {background-color:#fff;}
#page{border:2px #ddd solid; margin:5px;}
}