/*	Michael Topp, info@mito-solutions.com :
*	style.css, "lilli"-Thema
*	-- enthält optional border-Farben
*	   für Tests --
*********************************************/


/* schriftdeklarationen
==========================*/

@font-face 	{
	font-family: "MyTopic";
	src:	url("webfonts/gabriola-webfont.eot"); /* IE9 Compat Modes */
	src:	local("gabriola"), local("Gabriola"),
		url("webfonts/gabriola-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("webfonts/gabriola-webfont.woff") format("woff"), /* Modern Browsers */
		url("webfonts/gabriola-webfont.ttf") format("truetype");/* Safari, Android, iOS */
		}

@font-face 	{
	font-family: "MyDejaVu";
	src:	url("webfonts/dejavusans-webfont.eot"); /* IE9 Compat Modes */
	src:	local("DejaVu Sans"), local("DejaVu-Sans"),
		url("webfonts/dejavusans-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("webfonts/dejavusans-webfont.woff") format("woff"), /* Modern Browsers */
		url("webfonts/dejavusans-webfont.ttf") format("truetype");/* Safari, Android, iOS */
		font-size:      18px;
		font-weight: normal;
		}

@font-face 	{
	font-family: "MyDejaVu";
	src:	url("webfonts/dejavusans-bold-webfont.eot"); /* IE9 Compat Modes */
	src:	local("DejaVu Sans Bold"), local("DejaVu-Sans-Bold"),
		url("webfonts/dejavusans-bold-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("webfonts/dejavusans-bold-webfont.woff") format("woff"), /* Modern Browsers */
		url("webfonts/dejavusans-bold-webfont.ttf") format("truetype");/* Safari, Android, iOS */
		font-size:      18px;
		font-weight: bold;
	}


@font-face 	{
	font-family: "MyDejaVu";
	src:	url("webfonts/dejavusans-oblique-webfont.eot"); /* IE9 Compat Modes */
	src:	local("DejaVu Sans Oblique"), local("DejaVu-Sans-Oblique"),
		url("webfonts/dejavusans-oblique-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("webfonts/dejavusans-oblique-webfont.woff") format("woff"), /* Modern Browsers */
		url("webfonts/dejavusans-oblique-webfont.ttf") format("truetype");/* Safari, Android, iOS */
		font-size:      18px;
		font-style: oblique;
		}


@font-face {
  font-family: "MyDejaVuTT";
	src:	url("webfonts/dejavusansmono-webfont.eot"); /* IE9 Compat Modes */
	src:	local("DejaVu Sans Mono"),	local("DejaVu Sans Mono Book"),
		url("webfonts/dejavusansmono-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("webfonts/dejavusansmono-webfont.woff") format("woff"), /* Modern Browsers */
		url("webfonts/dejavusansmono-webfont.ttf") format("truetype");/* Safari, Android, iOS */
		}


em,
i		{
		font-family: "MyDejaVu";
		font-style: normal;
		font-weight: bold;
		color: #212a59;
		}

b,
strong		{
		font-family: "MyDejaVu";
		font-weight: bold;
		}


tt        {
	      font-family:  "MyDejaVuTT";
            } 



/*	grundlayout
=================*/


html,
body {
   margin:0;
   padding:0;
   height:99.7%;
}


body {
	background-image: url(bilder/lilli-helden.png); /* da width=100% + bei überlappung im hintergrund */
	background-repeat: repeat-x;
	background-position: center calc(100% - 66px); /* 1. bottom/top fkt nicht   2. vert. pos. über footer! */

	}

body#dat {
	background-image: none;	
}

.index {
	background-image: none;
}

#container {
	min-height:100%;
	position:relative;
	height:100%; /* ie5.5, ie6 */
	padding: 0 3px;
	overflow-x:hidden;	
	}

#header		{
	height: 100px;
/*	max-height: 60px;*/
	width:100%;
/*	margin: 0 auto;*/
	margin-top:4px;
	text-align: center;
	font-family: MyDejaVu;
	background-color: #4275e3;/*#4180c8;/* abgeleitet von "RoyalBlue", #4169E1   +++  blau alt, zu intensiv: #3a57f3; */
	border-radius:6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
/*	border: 3px solid #3a57f3;*/
	}

#header-block {		/* zentrierung; braucht feste breite */
 width:1150px;
 margin:0 auto;
}

#wrapper	{		/* nötig für zentrierung */
	width: 99%;
/*	height:  calc(100% - 110px);  /* höhe - (#header + #footer) */
	position: relative;
	margin:	0	auto;
/*	padding-top: 2em;*/

/*	border: 3px solid blue; */
}

	
#main 	{
	width: 80%;  /* keine höhe nötig*/
	max-width:900px;
	margin:	0	auto 60px	auto;	/*	zentrieren	*/
/*	border: 2px solid magenta; */
	}

#left	{
	width: 24%;
	height: 240px;
	margin-right:10px;
	margin-top:-16px;
	float: left;
	background: url(bilder/lilli-drache.png) no-repeat 16px 0;
/*	border: 2px solid cyan; */
	}

#right	{
	width: 70%;  /* 70% `*/
	max-width: 680px;
	float: left;
	position: relative;
	left:50px;
/*	border: 2px solid green; */
	}

#footer	{	/*	nur für copyright; hg-grafik bei body, da width=100% !	*/
	height: 120px;
  width:99.4%; /* bei 100% überbreite ** vs. header? */
/*	max-height: 60px; */
	text-align: center;
	font-family: MyDejaVu;
	background-color: #83ff15;	
	position:absolute; /* bei absolute nur linksbündig, bei relative ggf nicht ganz unten! */
	bottom:0;
	left: 0.3%;
	border-radius:6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
/*	border: 3px solid #83ff15; */
	}

#footer .cright{		/* für copyright */
	text-align: center;
/*	font-size:small;*/
/*	padding-top:160px;*/
	position: relative;
	width:200px;	/* nötig für auto-center */
	margin: 0 auto;
	top:	30%;
	}

/*	innere boxen
-------------------*/

.banner img{
	width:286px; /* 1:1 */
	float: left;
	margin-left:64px; 
	margin-top:7px;
	}

.imp	{
	width:60% !important;
	max-width:800px !important;
	text-align:center;
	font-size:14px; 
	position: relative; /* impressum zentrieren; kein drachen-logo */
	/*left: 50% !important;*/
	margin: 0 auto;
		}

.imp   h1 { 
	width: 150px !important; /* notwendig, sonst wai. nach rechts verschoben */
	margin: 0 auto;			 /* zentrierung */
/*	border: 2px solid cyan; */
	}


/*===== #navigation -- generelle konfig =====*
|
\ :: oberste ebene :: */

ul.navigation {
    list-style:none;
    width:auto;
	margin-top:0;
	padding-left:47px;
	padding-top:35px;
	overflow: auto;  /* ohne sonst mittig, keine höhe */
	font-weight: bold;	/* bold würde wg. banner IMO viel besser passen! -- ggf li a mit fester breite u. margin: 0 auto;*/
/*	border: 2px solid cyan; */
	}

/* :: link-gestaltung :: */
ul.navigation li {
	float: left;
/*    width: auto;*/  /* dann unterschiedliche li-längen + horz. verschiebungen bei untersch. font-weights,
						 daher breiten über id */
	margin:0 9px;
/*	border: 2px solid magenta; */
	}

ul.navigation li#idx {
	width:100px;
	margin-left: 0;
	}

ul.navigation li#wir {
	width:94px;
	}
	
ul.navigation li#knz {
	width:86px;
	}
	
ul.navigation li#knt {
	width:82px;
	}

ul.navigation li#anf {
	width:76px;
	}

ul.navigation li#lnk {
	width:56px;
	}

ul.navigation li#imp {
	width:105px;
	}
	
ul.navigation a:link,
ul.navigation a:visited	{
    display:block;
/*    width: auto; */
	margin: 0 auto;	/* gilt hiermit auch für .subnav */
	padding: 3px 0;	/* gilt hiermit auch für .subnav */
	color: white;
    text-decoration:none;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
/*	border: 2px solid yellow; */
	}

ul.navigation a:hover,
ul.navigation a:focus	{
    color:black;
	background-color: #83ff15;
	}


ul.navigation a.hier	{
	color:black;
	background: #ffe700;
	}


/*----- #navigation-untermenü -----*
|
\ :: (1) positionierung :: */
ul.navigation  ul { /* = .subnav(s) */
	position: absolute;		/* anstatt display: none; --> wird so noch von screenreadern gefunden */
	left: -999em;
	padding-top:5px;
	}

ul.navigation  li:hover ul,
li#knz a.hier + ul
{ /* = .subnav(s) bei :hover auf ebene0 */
	left: auto; /* dann genau links unter #knz beginnend */
	margin-left: -238px;  /* versatz nach links */
	}

/* li#knz a.hier:hover + ul */

/* --> alternativ zu margin-left:
ul.navigation  li:hover ul li{ /* versatz rel. zu  ul.subnav */
/*	position: relative;
	left: -3em;
	}
*/

/* :: (2) gestaltung :: */	

ul.subnav {
    padding: 0; /* nötig, sonst kein versatz nach links möglich */
    margin: 0;
    list-style:none;
    width: auto;
/*	border: 2px solid red; */
	}

ul.subnav li {
/*    width: auto; */
    height:30px;
	margin-right:-2px !important;
/*	float: left;  /* wenn ohne, dann vertikal */	
	}


ul.subnav li#kre {
	width:171px;
	margin-left: 9px;
	}

ul.subnav li#mus {
	width:140px;
	}

ul.subnav li#bew {
	width:184px;
	}
	
ul.subnav li#soz {
	width:188px;
	}
	
ul.subnav a	{
/*	padding: 3px 0; */
/*	margin: 0 auto; */
	}

li#knz a.hier + ul a	{
	background-color: #4275e3;
	color: white;
	}

li#knz a.hier + ul a.hier,
li#knz a.hier + ul a.hier:hover,
li#knz a.hier + ul a.hier:focus	{
	background-color: #4275e3;
	color: #ffe700;
	}
	
li#knz a.hier + ul a:hover,
li#knz a.hier + ul a:focus	{
    color:black;
	background-color: #ffe700;
	}
/* background-color: #ffe700; color:black; */

.subnav.hier a:hover,
.subnav.hier a:focus	{
background-color: #ffe700; color:black;
	}


/*	#main
'''''''''''''*/

h1	{							/* einzeilige header */
	font-family: MyTopic;
	font-size: 2em;
	line-height: 2.4em;
/*	color:#212a59; */
	margin-top: -36px;		/* otische ausrichtung an #banner-unterkante und #navigation-oberkante ...
											... s. dazu auch styles auf einigen seiten  */
	margin-bottom:-0.6em;
	}


h2	{
	font-family: MyTopic;
	color:#212a59;
	font-size: 1.5em;
	line-height: 2em;
	}

#right img {
	width: 250px;	/* 4:3, ggf individuelle ausnahmen id breite */
	height:200px;
	margin:2em 0 0 0;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	}

#right img  + img {
	margin-left:3em;
	}
iframe	{
	border: 1px #212a59 solid;
	border-radius: 4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	}


textarea	{
	font-family: myDejaVuTT;
	font-size: 	small;
	font-weight: bold;
	color:	#212a59;
	border: 1px #212a59 solid;
	margin-right:12px;
	border-radius: 4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	}

input		{
	font-family: myDejaVu;
	font-size: 	1em;
	color:	#212a59;
	font-weight: bold;
	border: 1px #212a59 solid;
	border-radius: 4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	}

/*
textarea:hover, input:hover{
   	background-color: #3a57f3;
	color: white;
}
*/
input.button	{
/*	font-family: myDejaVu;
	font-size: 	1em; */
	font-weight: normal;
	padding: 2px !important;
	margin-bottom: 4px;
	width: 160px;
	height: 28px;
	text-decoration:none;
	}

input.button:hover	{
	color: #fff;
	background-color: #212a59;	
		}

input.button:active	{
   color:#000;
   background: #ffe700;
   }


p,
#main li 	{
		font-family: MyDejaVu;
		font-size: 	1em;
		line-height: 1.4em;
		margin: 0;
/*		border: 3px solid magenta;*/
	}


p	{
		padding: .6em 0;
	}

p + ul	{
	margin-top: -2px;
 	}

/*
p + h2	{
	margin-top: 1.5em;
	}
*/
p small span  {
	float: right;
	}

	

/* ~~~~~~~~~~~~ listen ~~~~~~~~~~~~ */

#main ul	{
		margin-left: 0;
		padding-left: 1em;
		text-indent: -1em;		
		list-style: inside circle;

		}

#main li	{
		color: #212a59;
		padding: .3em 0;
		}

#main li span	{
		color: black;
	}
	
/* ~~~~~~~~~~~~ links ~~~~~~~~~~~~ */

#main a.extern,
#main a.extern2,
#main .intern a:link {
	text-decoration: none;
	padding: 0px 2px;
	}

#main a.extern:link,
#main a.extern2:link,
#main a.extern:visited,
#main a.extern2:visited {
	color: #786da2; /* #454a71; #111535; #101548; #212a59;  -- vgl. #footer-gfx-"hose" ; ggf. darkblue */
	}

#main a.intern	{
	font-weight: normal;
	}

#main a.extern,
#main a.extern2	{
	font-weight: bold;	/* sonst schlecht zu lesen */
	}
	

a.extern:after,
a.extern2:after {
	position: relative;
	content: url(bilder/ext-icon.gif);
	}
	
a.extern:after {
	padding-left: 7px;
	top: 2px;
	}

#main a.extern2:after {
	padding-left: 3px;
	top: 3px;
	}

.intern a {
	position:relative;
	left:-3px;
	padding: 3px 6px !important;
	color: white !important;
	background-color: #4275e3;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	}

.intern  a:hover,
.intern  a:focus {
	color: black !important;
	background-color: #ffe700;
	}

.intern  li a:active {
	color: black !important;
	background-color: #ffe700;
	}

/* ~~~~~~~~~ links-ende ~~~~~~~~~ */

	
.cright a {
	color: black;
	text-decoration: none;
	}

#mito {
	position: relative;
	bottom: 0px;
	color:		crimson;
	font-variant:	small-caps;
	font-style:	normal;
	font-weight:	bold;
	padding:	0 4px 2px 4px;
	border-top:	2px groove yellow;
	border-bottom:	2px groove green;
	border-left:	2px groove blue;
	border-right:	2px groove orangered;
	-webkit-border-radius:	3px;
	-moz-border-radius:	3px;
	border-radius:	3px;
	background-color: rgba(255,239,247,0.3);
	text-shadow: none;
}

/* --------------------------------- EOF -------------------------------------- */