/* ================================
    CSS Styles for Kanzler4Kids
    Last updated: 20070927
   ================================
*/

/* ============================================
GENERAL CLEANUP STYLES
according to eric meyer
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
 ============================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
label, 
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* fieldset, form, label, legend, */

:focus {
  outline: 0;
}

div {
	/*height: 1%;*/
}

* html th, * html td	{
	fon\t-size: inherit; /*IE6*/
}

html {
	position: relative;
}

body
{
	font-family: Verdana, Helvetica, sans-serif;
	color: #000;
	background: #AAA;
	background-color: #AAA;
	min-height: 101%;
	word-wrap: break-word;	/* IE */
}


/* *************************** BODY ***************** */
/* background color for the content part of the pages */
body
{
	background-image: url('../img/page_hg_kachel_gelb.gif');
	background-repeat: repeat;
    background-color: #FFF;
	margin: 0;
	position: relative;
}

/* ==============================================
   PAGE SETTINGS
============================================== */

#pagebase
{ 
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#page
{
	width: 50em;
	text-align:  center;
	margin: 0.5em auto 0 auto;
	padding: 0;
    background-color: transparent;
	/* overflow: hidden; */
}

/* ==============================================
   MAIN
============================================== */

#main
{
	position: relative;
	width: 50em;
	text-align: left;
	background-color: #F2EEED;
	padding-bottom: 1em;
	/*height: 100%;*/
}

#navPane
{
	position: relative;
	margin: 0; 	padding: 0;
	width: 11.25em;
	overflow: hidden;
	float: left;
}

#navPaneContainer
{
	position: relative;
	margin-left:0.2em;
	margin-right:0.3em;
	margin-top: 1em;
}

#contentPane
{
	position: relative;
	width: 38.5em;
	margin: 0; 	padding: 0;
	overflow: hidden;
}

#contentPaneContainer
{
	margin-top: 1em;
	margin-bottom: 0em;
	margin-right: 0.5em;
	width: 100%;
	position: relative;
	/*height: 100%;*/
}

/* innerhalb content */
#colLeft
{
	position: relative;
	margin: 0; 	padding: 0;
	width: 58%;
	float: left;
}

#colLeftContainer
{
	margin-left:0em;
	margin-right:0em;
	margin-top: 0em;
	margin-bottom: 0em;
	background-color: #AAA;
	padding: 0px;
}

#colRight
{
	position: relative;
	width: 40.9%;
	margin: 0; 	padding: 0;	
	float: right;
}

div.colRightContainer
{
	margin-top: 0em;
	background-color: #AAA;
	padding: 0px;
	margin-left:0.25em;
	margin-right:0.5em;
	margin-bottom: 0em;
}


#colWide
{
	position: relative;
	margin: 0; 	padding: 0;
	width: 98%;
	float: left;
}

#colWideContainer
{
	margin-top: 0em;
	background-color: #AAA;
	padding: 0px;
	margin-left:0em;
	margin-right:0.5em;
	margin-bottom: 1em;
}


/* ==============================================
   HEADER
============================================== */


div#header {
	background-color:transparent;
	overflow: visible;
	text-align: left;
}

div#header_background {
	/*background-image: url('../img/hg_header_kanzler4kids.gif');
	background-repeat: no-repeat;
	background-position: bottom right;*/
	background-color:transparent;
	height: 12.63em;
}

div#header_background img.innerHeader_Bg {
	display: block;
	float: right;
	width: 27.38em;
	z-index: 1;
}

div#header_background img.innerHeader_Logo {
	display:block;
	position: relative;
	top: 3.2em;
	width: 20.5em;
	background-color: transparent;
	z-index: 25;
}

div.innerHeader_li {
	clear: both;
	height: 3.44em;
	z-index: 5;
	width: 50em;
	margin: 0; padding: 0;
	background-image: url('../img/li_o.gif');
	background-repeat: no-repeat;
	background-position: top left;
	background-color: transparent;
}

div.innerHeader_re {
	clear: both;
	height: 3.44em;
	z-index: 7;
	width: 50em;
	margin: 0; padding: 0;
	background-image: url('../img/re_o.gif');
	background-repeat: no-repeat;
	background-position: top right;
	background-color: transparent;
	text-align: right;
}

div.innerHeader_serviceNav {
	clear: both;
	height: 3.44em;
	z-index: 20;
	width: auto;
	margin: 0; padding: 0;
	margin-left: 14px;
	margin-right: 14px;
	background-color: #BA1302;
	overflow: hidden;
	text-align: right;
}

div.innerHeader_serviceNav p.right {
	clear: both;
	text-align: right;
	color: white;
	font-weight: bold;
	font-size: 100%;
	margin: 0; padding: 0;
	padding-right: 10px;
	height: 3.44em;
}

img.imgBtnHome {
	padding-right:1em;width:9em;
}

img.imgBtnKontakt {
	width:7.5em;
}


/* ==============================================
   FOOTER 
============================================== */

div#footer {
	clear: both;
	position: relative;
	height: 3.5em;
	width: 50em;
	margin: 0; padding: 0;
	text-align: left;
	z-index: 1;
}

div#footer img.footer_logo_bka {
	display: block;
	position: relative;
	top: -6.83em;
	left: 0.4em;
	width: 11.1em;
	z-index: 30;
	margin: 0; padding: 0;
	background-color: transparent;
}

div#footer div.leftfooter {
	position: relative;
	top: 0em;
	left: 0em;
	margin: 0; padding: 0;
	width: 50em;
	height: 3.5em;
	background-image: url('../img/li_u.gif');
	background-repeat: no-repeat;
	background-position: bottom left;
	width: 50em;
	height: 3.5em;
	z-index: 10;
}

div#footer div.rightfooter {
	margin: 0; padding: 0;
	width: 50em;
	height: 3.5em;
	background-image: url('../img/re_u.gif');
	background-repeat: no-repeat;
	background-position: bottom right;
	z-index: 15;
}

div#footer div.innerfooter {
	width: auto;
	height: 3.5em;
	z-index: 20;
	margin: 0; padding: 0;
	margin-left: 14px;
	margin-right: 14px;
	background-color: #BA1302;
	overflow: hidden;
	text-align: right;
}


/* ==============================================
   GENERAL CLASSES
============================================== */

/* visible hidden, but available for search engines, screenreaders etc. */
.hidden {
  position: absolute;
  top: -1000em;
  left: -1000em;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* clear those floating columns */
 
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* for safari */
.clearfix { display: block }

/* no border for images */
img, a img {
	border: none;
	boder: 0;
}



/* ==============================================
   NAVIGATION
============================================== */

#ulHauptMenu {
	width: auto;
	text-align: left;
	font-weight: bold;
	background-color: transparent;
}

#ulHauptMenu ul  {
	display: block; 
	width: auto;
	font-size: 75%;
	padding: 20px 0 20px 0; 
	margin: 0px 0.45em 0px 0.75em;
	text-align: left;
	background-color: #FFF;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	color: #FFF;
 	font-weight: bold;
	letter-spacing:0px;
}

#ulHauptMenu ul li {
	list-style: none; 
	margin-left: 20px;
	text-align: left;
}

#ulHauptMenu ul li.selected {
	list-style-image: url('../icons/ball.png'); 
	margin-left: 20px;
	text-align: left;
}


/* text style for the selected tab */
#ulHauptMenu ul li a.current {
	display: block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background: #BA1302;
	width: 100%;
	color: #FFF;
}

#ulHauptMenu ul li a.current:visited, 
#ulHauptMenu ul li a.current:link {
   text-decoration:none;
}

#ulHauptMenu ul li a.current:hover, 
#ulHauptMenu ul li a.current:focus, 
#ulHauptMenu ul li a.current:active
{
   text-decoration: underline;
}

/* text style for the unselected tabs */
#ulHauptMenu ul li a {
    display: block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	width: 100%;
	color: #000;
	text-decoration: none;
}

#ulHauptMenu ul li a:visited; 
#ulHauptMenu ul li a:link {
    text-decoration: none;
}

#ulHauptMenu ul li a:hover, 
#ulHauptMenu ul li a:focus, 
#ulHauptMenu ul li a:active {
    text-decoration: underline;
}

/* ende used in Hauptmenu */


img.imgUlHauptmenu {
	display:block; width:100%
}



/* ==============================================
   CONTENT STYLES
============================================== */

div.moduleContainer {
	width: auto;
	margin: 0px;
	position: relative;
	top: -3px;
	left: 3px;
	padding: 1em;
	font-size: 80%;
	background-color: #FFF;
	border: 2px solid #000;
	overflow: hidden;
}

div.colRightContainer div.moduleContainer_notiz {
	width: auto;
	margin: 0px;
	position: relative;
	top: -3px;
	left: 3px;
	background-image: url('../img/rand_o_notizzettel.gif');
	background-position: top left;
	background-repeat: repeat-x;
	
	font-size: 80%;
	background-color: #FFF;
	border-bottom: 2px solid #000;
	border-left: 2px solid #000;
	border-right: 2px solid #000;

	overflow: hidden;
		padding: 1em;
		padding-top: 2.5em;
}

div.moduleContainer_notiz *, div.moduleContainer * {
	font-size: 100%;
	line-height: 160%;
	position: relative;
}


#indexvideo {
	position: relative;
	background-image: url('../icons/tvhg.png');
	background-position: top left;
	background-repeat: no-repeat;	
	height: 319px;
	width: 318px;
	padding-top: 4em;
	text-align: center;
}

#indexvideo div.introcenter {
	padding: 4em;
}

#videopage {
	position: relative;
	background-image: url('../icons/tvgross_580.jpg');
	background-position: top left;
	background-repeat: no-repeat;	
	height: 580px;
	width: 561px;
	text-align: center;
}

#videopage div.video {
	width: 400px;
	text-align:center;
	position: absolute;
	top: 170px;
	left: 85px;
	background: transparent;
}


div.moduleContainer_notiz div.notizInner {
}


/* haupttitel fuer Content-Titel und Modultitel - ist immer h1 */
div.moduleContainer_notiz h2
{
	font-weight: bold;
	color: #BA1302;
	font-size:120%; 
	margin: 0;
	padding: 0;
	margin-top: 0em;
	margin-bottom: 0.8em;
	line-height: 140%;
}

div.moduleContainer h2
{
	font-weight: bold;
	color: #333;font-size:120%; 
	margin: 0;
	padding: 0;
	margin-top: 0em;
	margin-bottom: 0.8em;
	line-height: 140%;
}

/* haupttitel fuer Content-Titel und Modultitel - ist immer h1 */
div.moduleContainer h1
{
	font-weight: normal;
	color:#000;font-size:200%; 
	margin: 0;
	padding: 0;
	margin-top: 0em;
	margin-bottom: 0.8em;
	line-height: 140%;
}

div.moduleContainer h1 span {
	border-bottom:4px solid #BA1302;
}


/* *** special Module Styles *** */

div.textblock {
	font-size: 100%;
	line-height: 160%;
	margin-bottom: 2em;
}


/* content */ 
div.moduleContainer_notiz p,
div.moduleContainer_notiz h2,
div.moduleContainer_notiz h3,
div.moduleContainer_notiz ul,
div.moduleContainer_notiz ol,
div.moduleContainer_notiz dl,
div.moduleContainer p,
div.moduleContainer h2,
div.moduleContainer h3,
div.moduleContainer ul,
div.moduleContainer ol,
div.moduleContainer dl,
{
  margin-bottom: 1em;
}

div.moduleContainer_notiz a, div.moduleContainer a {
	color: #BA1302;
}

div.moduleContainer p, div.moduleContainer_notiz p
{
  margin-bottom: 1em;
}

div.moduleContainer p.intro
{
  font-size: 120%;
}

div.moduleContainer ul li,
div.moduleContainer ul ul li,
div.moduleContainer ol ul li,
div.moduleContainer ul li,
div.moduleContainer ul ul li,
div.moduleContainer ol ul li, div.moduleContainer ol li {
  padding-left: 20px;
  margin-left: 20px;
 /* background: url(../img/menu_selected_list_item.gif) 0.8em 0.4em no-repeat;
  list-style-type: none; */
  list-style: url(../img/menu_selected_list_item.gif);
}

em {
	font-style: italic;
}

strong {
	font-style: bold;
}

div.moreContainer {
clear:left;padding-top:0.5em
}

img.righttop {
	display:block;padding:0.3em;width:15em;
}

div.moduleContainer_notiz p.notizinfo {
	clear:left;
	padding-top:1em;
}

div.moduleContainer_notiz a.more {
	background-image: url('../icons/link_mehr.png');
	background-repeat: no-repeat;
	background-position: top left;
	padding-left: 20px;
}

div.moduleContainer_notiz h2 img.info {
	float:left;display:block;padding-right:0.5em;
}

div.clearfloat { 
	clear:left;float:none;
}



/* lexikon */

div.lexikon {
	padding-right:2em;
	border: 1px solid green;
}

div.moduleContainer a.iconPopup {
	display: block;
	float: left;
	width: 60px;
	position: relative;
	margin: 0.5em;
	outline: none;
}

div.moduleContainer a.iconPopup:link, div.moduleContainer a.iconPopup:visited  {
    color: #000;
    }
div.moduleContainer a.iconPopup:hover, div.moduleContainer a.iconPopup:focus {
    color: #000;
	background-color: transparent;
    }

div.moduleContainer a.iconPopup:link span, div.moduleContainer a.iconPopup:visited span {
    display: none;
    position: absolute;
    top: 0px;
    left: 20px;
    }
div.moduleContainer a.iconPopup:hover span, div.moduleContainer a.iconPopup:focus span {
    color: #000;
    font-size: 1.2em;
    line-height: 19px;
    font-weight: bold;
    text-align: left;
    background: #f5f1ed;
    padding: 2px 5px 2px 10px;
    border: none;
    margin: 0;
    width: 150px;
    height: 50px;
	display: visible;
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;
	z-index: 50;
    opacity: 0.95;
    }


div.moduleContainer a.iconPop2 {
	display: block;
	float: left;
	width: 150px;
	position: relative;
	margin: 0.5em;
	outline: none;
}

div.moduleContainer a.iconPop2:link, div.moduleContainer a.iconPop2:visited  {
    color: #000;
    }
div.moduleContainer a.iconPop2:hover, div.moduleContainer a.iconPop2:focus {
    color: #000;
	background-color: transparent;
    }

div.moduleContainer a.iconPop2:link span, div.moduleContainer a.iconPop2:visited span {
    display: none;
    position: absolute;
    top: 0px;
    left: 20px;
    }
div.moduleContainer a.iconPop2:hover span, div.moduleContainer a.iconPop2:focus span {
    color: #000;
    font-size: 1.2em;
    line-height: 19px;
    font-weight: bold;
    text-align: left;
    background: #f5f1ed;
    padding: 2px 5px 2px 10px;
    border: none;
    margin: 0;
    width: 150px;
    height: 50px;
	display: visible;
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;
	z-index: 50;
    opacity: 0.95;
    }


/*
div.moduleContainer a.iconPop2 {
	display: block;
	float: left;
	width: 179px;
	position: relative;
	margin: 0.5em;
	outline: none;
}

div.moduleContainer a.iconPop2:link, div.moduleContainer a.iconPop2:visited  {
    color: #000;
    }
div.moduleContainer a.iconPop2:hover, div.moduleContainer a.iconPop2:focus {
    color: #000;
	background-color: transparent;
    }

div.moduleContainer a.iconPop2:link span, div.moduleContainer a.iconPop2:visited span {
    display: none;
    position: absolute;
    top: 0px;
    left: 20px;
    }
div.moduleContainer a.iconPop2:hover span, div.moduleContainer a.iconPop2:focus span {
    color: #000;
    font-size: 1.2em;
    line-height: 19px;
    font-weight: bold;
    text-align: left;
    background: #f5f1ed;
    padding: 2px 5px 2px 10px;
    border: none;
    margin: 0;
    width: 150px;
    height: 50px;
	display: visible;
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;
	z-index: 50;
    opacity: 0.95;
    }
*/

/*
#lexnav {
	position: relative;
}

	#lexnav a:link {
    color: #000;
    }
#lexnav a:visited {
    color: #666;
    }
#lexnav a:focus, 
#lexnav a:hover,
#lexnav a:active  {
    color: #07467f;
	 background-color: transparent;
    }




#lexnav li a:link span, #lexnav li a:visited span {
    display: none;
	z-index: 50;
    }
#lexnav li a:hover span, #lexnav li a:focus span {
    color: #000;
    font-size: 1.09em;
    line-height: 19px;
    font-weight: normal;
    text-align: left;
    background: 
                #f5f1ed;
    padding: 2px 5px 2px 10px;
    border: none;
    margin: 0;
    width: 488px;
    height: 95px;
    display: block;
    position: absolute;
    top: 0px;
    left: 150px;
	z-index: 50;
    opacity: 0.95;
    }
*/


p.leftfloat {
	display: block;
	float: left;
	width: 10em;
}

p.rightfloat {
	display: block;
	float: right;
	width: 10em;	
}

p.centerfloat {
	width: 100%;
	display: block;
}


p.paging {
	text-align:center;
}
span.page a {
	width: 1.5em;
	/*background-image: url('../icons/ziffer_hg.png');
	background-repeat: no-repeat;
	background-position: 50%;*/
background-color: #BA1302;color: #FFF;
	position: relative;
	top: -2em;
	padding: 0.4em;
	font-weight: bold;
}

span.page a:hover, span.page a:focus {
	/*background-image: url('../icons/ziffer_hg_active.png');
	background-repeat: no-repeat;
	background-position: 50%;*/
background-color: #FFF;
color: #BA1302;
}

span.current a {
	/*background-image: url('../icons/ziffer_hg_active.png');
	background-repeat: no-repeat;
	background-position: 50%;*/
	font-weight: bold;
background-color: #FFF;
color: #BA1302;
}


span.videofragen {
	background-color: #BA1302;color: #FFF;
padding: 0.4em;
font-size: 0.8em;
}



/* FORMULAR KONTAKT */

div.formular label {
display: block;
}

div.formular input, textarea {
display: block;
width: 40em;
}

div.formular input.button {
display: block;
width: auto;
}

p.pErrorText {
	border: 1px solid #CC0000;
	padding: 0.5em;
}


/* ============================================
   BANNERLINKS (home) 
 ============================================ */

#navPaneContainer p.banner {
 font-size: 0.8em;
 font-weight: bold;
 color: #bc101d;
 padding-left: 1.1em;
 margin-top: 1em;
}

#navPaneContainer p.banner a:link,   
#navPaneContainer p.banner a:visited {
  color: #bc101d; 
  text-decoration: none;
}

#navPaneContainer p.banner a:hover,
#navPaneContainer p.banner a:focus,
#navPaneContainer p.banner a:active {
  color: #bc101d;
   text-decoration: underline;
}