/* Farben: Grün (dunkel): #336666 Gelb (dunkel): #ffcc00 Gelb (hell): #ffffcc Grau (dunkel): #666666 Grau (hell): #999999 */
/* Zurücksetzen der Browsereigenen Formatierungsvorgaben */
body {font-size:62.5%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align:left;}
* {margin:0; padding:0;}
/* Allumfassender Container */
#top {background-color:#ffcc00; margin-left:auto; margin-right:auto; width:90%; min-width:760px;max-width:1600px; color:#000000; border:1px solid #cecece; text-align:left;}
/* Headerbereich */
#header_panel {height:100px; width:100%; background-color:#ffffff; color:#000000; border-top:6px solid #336666; padding-top:0.6em;}
#header_panel h1 {background-color:#ffffff; color:#336666; font-size:1.4em; font-weight:400; line-height:1.5em; margin-left:1em;}
#header_panel #logo {position:absolute;top:2.5em;right:7%; width:280px; height:100px; background: url(../images/bg_logo.gif) no-repeat; background-position: top right; margin-right:1.6em;}
/* Hauptbereich */
#main {background-image:url(../images/bg_content.gif); background-repeat:no-repeat; background-position:top right; background-color:#ffcc00; color:#000000;}
/* Menübereich */
#menu_panel {/*border:1px solid green;*/display:block;position: relative; float:right; width:235px; font-size:1.2em; height:auto;z-index:2;/* margin-top:1em;*/}
#menu {width:auto;/*font-size:1.2em;*/margin-top:2.5em;}
#menu ul {margin:0; line-height:1.4em; list-style-type:none; display:inline; padding-top: 1px;}
* html #menu li {display: inline;}
#menu li h3,#usermenu a h3 {display:inline; font-weight:400;/*font-size:1.2em;*/}
#menu li a, #menu li strong {font-weight:bold; display: block; line-height: 1em; padding: 5px 2px 5px 7px; margin-top: 0.9em;}
#top #menu a.on {color:#336666; background-color:inherit;font-weight:bold; display: block; line-height: 1em;}
/*#top #menu a.on:before {content:"\>> ";}*/
* html #menu li a, * html #menu li strong {height: 1em;}
#menu li strong a, #menu li li strong a {background-image: none !important; padding: 0 !important; border: none !important; margin-top: 0;}
#menu a:link, #menu a:visited, #menu strong {color: #336666; /**/background:#ffcc00;/**/ text-transform: uppercase;}
#menu_panel a:link, #menu_panel a:visited {color: #336666; text-decoration:none;}
/*
#menu_panel a:hover {text-decoration:underline;}
*/
#menu a:link, #menu a:visited {text-decoration: none;}
#menu a:focus, #menu a:hover, #menu a:active {color: #336666 !important; background:#ffcc00; text-decoration: underline;}
/* Hauptmenue Ebene 2 */
#menu ul ul {display:block;}
#menu li li a, #menu li li strong {font-weight: bold !important; text-transform: none !important; padding: 5px 2px 5px 20px !important; margin: 0;}
#menu li li a:link, #menu li li a:visited {background-color:#ffcc00; color:#ffffff; text-decoration: none;}
/* Inhaltsbereich */#content_panel {/*height:50em;*/}
#content_panel #breadcrumbs {background:#ffffff; color:#000000; /*width:56%;*/ width:66%; height:1em; margin-left:2.2em;}
#content_panel #breadcrumbs a{background:inherit; color:#336666;  text-decoration:none !important;}
#content_panel #breadcrumbs a:hover{background:inherit; color:#336666;  text-decoration:underline !important;}
#content_panel #content #text {/*border:1px solid red;*//*margin: 2.4em 278px 2em 2em;*/margin: 1em 227px 0 0; padding:0 4em 0 2em;height:100%;font-size:1.1em;}
#content_panel #content #text #canvas {padding:1em;border:1px solid #336666;background:#ffffff; /*margin-right:44px;*//*
margin-top:-4px;
*/
margin-right:2em;

min-width:420px;}
#content_panel #content #text #inhaltsverzeichnis {
background:#ffffff;
 padding-left:0.6em;}
#content_panel #content #text #inhaltsverzeichnis #contentheader {float:right; margin-bottom:1em; }
#content_panel #content #text #inhaltsverzeichnis #contentheader:hover {text-decoration:underline;}
#contentheader {background:inherit; color:#336666; font-size:1.2em; cursor:pointer;}
#content_panel #content #text a {font-weight:bold; background:inherit; /*
color:#ffffff;
*/ color:#336666;}
#content_panel #content #text a:link {background:inherit; /*
color:#ffffff;
*/ 
color:#336666;font-weight:bold; text-decoration:none;}
#content_panel #content #text a:hover {background:inherit; color:#336666; font-weight:bold; text-decoration:underline;}
#content_panel #content #text h2.wide {background:inherit; color:#336666; font-weight:bold; font-size:1.4em;/*
 margin-bottom:1em;
*/ height:3em;}
#content_panel #content #text h2.slim{background:inherit; color:#336666; font-weight:bold; font-size:1.4em;}
#content_panel #content #text h3 {background:inherit; color:#336666;font-weight:bold; font-size:1.3em;}
#content_panel #content #text .vcard h3 {
	font-size:1em;

}
#content_panel #content #text ul#vorstand {display:block; border:1px solid red;}
#content_panel #content #text ul#vorstand li span {width:12em;border:1px solid green;}
#content_panel #content #text p, #content_panel #content #text h3 {margin-bottom:1em;}
#content_panel #content #text p {background:inherit; color:#336666; line-height:1.4em;/* font-size:1.4em;*/ margin-bottom:1em;}
#content_panel #content #text p strong {display: block; /*
float:left;
*/ width:220px;}
#content_panel #content #text p.indent {line-height:1.4em;/* font-size:1.2em;*/ margin-left:1em; /*
border-bottom:1px solid #336666;
*/ padding-bottom:1.6em;}
#content_panel ul {/*
margin:1em;
*/ line-height:1.4em;
    
}
#content_panel ul li {
	list-style-position:inside;
}
#content_panel ul.block {margin:1em; list-style-type:none;}
.section .block li strong {
	
}
#content_panel ul.list {margin:1em; list-style-type:circle !important; color:#336666;}
#content_panel ul.block ul {list-style-type:none;}
#content_panel ul.block li {background:inherit; color:#336666;/*font-size:1.1em;*/}
#content_panel ul.block li li {clear:left;}
#content_panel ul.block li span {display:block; float:left; width:9em;}
#footer {height:4em; padding:1em; text-align:center;}
/* Versteckte Elemente */
.doclinks, #header_panel h2, #menu h2, #menu ul span {display:none;}
#menu h3.extra {visibility:hidden;}
/* Allgemeine Layoutelemente */
h1, h2, h3, h4, h5, h6 { font-size:100%; }
a.print { color:#336666; background:inherit; font-weight:400; text-transform:uppercase;}
a.print:before {content:url(../images/icon_druckversion.gif);}
a.top {float:right;/* margin-bottom:1em;*/ text-decoration:none;line-height:1.8em;}
/*a.top:before {content:url(../images/icon_toparrow_weiss.gif);}*/
a.top:hover {color:#336666; background:inherit;}
/*a.top:hover:before {content:url(../images/icon_toparrow_gruen.gif);}*/
a.top:visited {color:#ffffff; background:inherit; font-weight:bold;}
#pagetools {
/*border-top:1px solid #336666;*/
/*
margin-top:2em;
*/
margin-right:2em;
padding-top:0.4em;
text-transform:uppercase;
/*margin-bottom:1em;height:2em;*/
}
a.back,
a.more {
	text-transform:uppercase;
	text-decoration:underline !important;
}
small, sup {/*font-size:0.7em;*/}
abbr {cursor:help;}
/* Sonstige Layoutelemente */
.klaerchen {clear:both;}
em {background:inherit; color:#336666;/*font-size:1.2em;*/ display:block; /*
margin:2em 0 2em 0;
*/}
ins {text-decoration:none !important;}
.sandbag-image {margin-left:-1em;}
.tabberlive .sandbag-image {margin-left:1em;}
.sandbag-image span {display: none;}
.sandbag-right {border: 0; padding: 0; font-size: 0; margin: 0 0 0 0; float: right; clear: right;}
.sandbag-left {border: 0; padding: 0; font-size: 0; margin: 0 35px 0 0; float: left; clear: left;}
.first-sandbag {margin-top: 10px;}
.last-sandbag {margin-bottom: 5px;}

#content_panel #content #text .bcard_hor, #content_panel #content #text .bcard_vert {font-family:Arial, Helvetica, sans-serif; float:left; width:31.8em; height:22em; border:1px solid #336666; color:#336666; background:#ffffff; margin-right:1em; margin-bottom:1em;}
#content_panel #content #text .bcard_vert .ad_vert {height: 230px;border:1px solid #336666; margin:0.4em; margin-right:1em; float:left;}
#content_panel #content #text .bcard_hor .ad_hor, #content_panel #content #text .bcard_hor_last .ad_hor {border:1px solid #336666; margin:0.4em;}
#content_panel #content #text .bcard_hor ul, #content_panel #content #text .bcard_hor_last ul {font-size:80%; list-style-type:disc; float:left; width:15em; margin-left:2.5em; color:#336666; background:#ffffff; margin-bottom:3em;}
#content_panel #content #text .bcard_vert ul {font-size:80%; list-style-type:disc; float:left; width:15em; color:#336666; background:#ffffff;}
#content_panel #content #text .bcard_hor_last {font-family:Arial, Helvetica, sans-serif; float:left; clear:left; width:31.8em; height:22em; border:1px solid #336666; color:#336666; background:#ffffff; margin-right:1em; margin-bottom:1em;}
#content_panel #content #text .vcard {background:ffffff; color:#336666; -moz-border-radius-topLeft:10px;
	-moz-border-radius-topRight:10px;
	-moz-border-radius-bottomLeft:10px;
	-moz-border-radius-bottomRight:10px;
	-webkit-border-radius:10px;
	padding:0.6em;
	margin-top:1em;
	margin-right:1em;
	/*
float:right;
*/
	}
#content_panel #content #text .vcard a:link, #content_panel #content #text .vcard a:visited {color:#336666; background:inherit; text-decoration:none;}
#content_panel #content #text .vcard a:hover {color:#336666; background:inherit; text-decoration:underline;}
#content_panel #content #text #kontakt, #content_panel #content #text #impressum {/*font-size:1.2em;*/ line-height:1.4em; margin-bottom:2em;}
#content_panel #content #text #kontakt .adr, #content_panel #content #text #impressum .adr {margin-bottom:0.4em;}
#content_panel #content #text #kontakt .net, #content_panel #content #text #impressum .net {line-height:1.4em; margin-top:0.4em;}
#content_panel #content #text #kontakt .tel, #content_panel #content #text #impressum .tel {line-height:1.4em;}
	
#menu_panel ul#pfs {
  font-family:Arial, Helvetica, sans-serif;
  padding : 0;
  margin:0;
  width : 160px;
}

/* this is also being used, in part, to help position the list and set the intial font */
#menu_panel ul#pfs li  {
  float : left;
  list-style-type : none;
  font-size : 100%;
  text-align : center;
}

/* 
  this makes the link box with its style... embedded images could be used instead of text 
  the size of the box allows the text to be resized if allowed to do so (keep reading)
*/
#menu_panel ul#pfs li a {
  padding : 9px 4px 0 2px;
  background-color : #ffffdd;
  border : 2px outset #aaa;
  text-decoration : none;
  color : #000;
  display : block;
  width : 30px;
  height : 30px;
}

/* hover styles are set here to create more obvious interaction */
#menu_panel ul#pfs li a:hover {
  background-color : #669900;
/*  border : 2px outset #669900;*/border-style:outset;
  color : #fff;
text-decoration : underline;
}

/* focus styles are set here to create more obvious interaction */
#menu_panel ul#pfs li a:focus, ul#pfs li a:active {
  background-color : #396c00;
/*  border : 2px inset #396c00;*/border-style:inset;
  color : #fff;

}

/** 
  this sets the font size on the button face (an image could be used instead of text)
  also, you might want to use a fixed text size on the buttons to keep them looking good
  if the user has a different default font size, but this would only be for IE (which is
  the only browser which the button text resizing looks a little odd as it affects the 
  button size. stupid IE 6
*/
ul#pfs li#pfs_large a {
  font-size : 1.2em;
  padding : 8px 4px 1px 2px;
}

/* same as above, but for the "larger" size */
ul#pfs li#pfs_larger a {
  font-size : 1.4em;
  padding : 7px 4px 2px 2px;
}

/* same as above, but for the "largest" size */
ul#pfs li#pfs_largest a {
  font-size : 1.6em;
  padding : 4px 4px 5px 2px;
}

/* this moves the explanatory text and list skip links out of view */
#menu_panel ul#pfs li a span,#menu_panel ul#pfs li#skip_pfs,#menu_panel ul#pfs li#top_pfs {
  position : absolute;
  top : -9000px;
  left : -9000px;
}

/*
  NOTE: The font size applied to the body element -- or element(s) of your choosing
  is shown in the PHP file. It, too, is CSS, but it cannot be added to your style sheet
*/

/* End Styles */

#csc {
/*  background : #669900 url(images/csc_tl.png) no-repeat;*/
  width : 20em;
  height : auto;
  position : relative;
  padding : 30px 40px;	
}	
/* these are the other three spans. classes were used to allow multiuse on a page */
.tr, .bl, .br {
  position : relative;
  width : 39px;
  height : 39px;  /* corner images are 40x40 */
  display : block;
  margin-bottom : -1px;  /* this is for IE */
}
/* change position and image: top-right */
.tr {
  background : transparent url(../images/csc_tr.png) no-repeat;
  top : 0;
  right : 0;
  float:right;
/*border:1px solid red;*/
z-index:1;
}
/* change position and image: bottom-left */
.bl {
  background : transparent url(../images/csc_bl.png) no-repeat;
  bottom : 0;
  left : -1px;
}

/* change position and image: bottom-right */
.br {
  background : transparent url(../images/csc_br.png) no-repeat;
  right : -1px;
  bottom : 0;float:right;
}
hr {
	border-width:0;
	background-color: #336666;
	color: #336666;
	height:1px;
	margin:2em 0 1em 0;
}
#menu_panel #usermenu #settings{background:inherit; color:#336666;display:none;}
#menu_panel a#usermenu:active #settings,#menu_panel a#usermenu:hover #settings {display:block; width:100%; height:auto; padding:0.4em;border:1px solid red;}

#menu_panel #usermenu h3 { font-weight:400;}
/*div#text { border:1px solid red;}*/
#menu_panel a#usermenu {
	margin-top:1em;
	display:block;
	color:#336666;
	text-decoration:none;
	background-color:inherit;

	text-transform:uppercase;
}
.teaser {
	background:#ffffff;
	/*
border:1px solid #336666;
*/
	border-bottom:0;
	margin-bottom:2em;
	/*
margin:1em;
*/
	padding:0.8em;

}
.section .teaser {
	border-left:1px solid #336666;
	border-right:1px solid #336666;
	
}
#content_panel #content #text .teaser a:link,
#content_panel #content #text .teaser a:active,
#content_panel #content #text .teaser a:visited {
color:#336666;
}
#content_panel #content #text .teaser a:hover {
color:#336666;
text-decoration:underline;
}
.section {
	background:#00898e;
	/*background:#336666;*/
	-moz-border-radius-topLeft:10px;
	-moz-border-radius-topRight:10px;
	-moz-border-radius-bottomLeft:10px;
	-moz-border-radius-bottomRight:10px;
	-webkit-border-radius:10px;
	height:auto;
	margin-bottom:1em;
}
 .vcard {
	background:#ffffff;
}
.section h2#caritas {
	background:url(../images/caritas.gif)no-repeat;
	width:120px;
	height:120px;
	position:relative;
	top:-20px;
	left:-15px;
}
.section h2#hwh {
	background:url(../images/hwh.gif)no-repeat;
	width:490px;
	height:120px;
	position:relative;
	top:-20px;
	left:-15px;
}
.section h2#invia {
	background:url(../images/invia.gif)no-repeat;
	width:120px;
	height:120px;
	position:relative;
	top:-20px;
	left:-15px;
}
.section h2 span {
	/*
display:none;
*/
display:block;
padding-top:2em;
padding-left: 7em;
}
.section h2 {
	color:#ffffff;
	font-size:1.6em;
}
#content strong,
#content #text dl {
	color:#336666;
}
#content dt {
	font-weight:bold;
}
.fr {
	float:right;
}
table#moreforkids tbody > tr {border-bottom:1px solid #336666;}
table#moreforkids tbody tr td {height:5em; vertical-align:top; padding-top:0.9em; padding-bottom:0.9em;border-bottom:1px solid #336666;}
table.jahreskalender {
	/*width:100% !important;
	width:88%;*/
	width:80%;
	
	border-collapse:collapse;
	color:#336666;
	max-width:600px;
}
.jahreskalender thead {
	height:3em;
	display:none;
}
.jahreskalender th {
	font-size:1.2em;
	
}
.jahreskalender tfoot td {
    padding-top:1em;
	color:#808080;
}

#content_panel #content #text #canvas p.liste strong {
	float:left;
}
#content_panel #content #text #canvas p.liste em {
	margin:1em 0 2em 0;
}