/*****************************************************************
************************  Main_Styles.Css ************************
************** Copyright 2004-2009 by Sornflakes.com *************
********************* Author: Claus Kinzinger ********************
*****************************************************************/


/*--Setzt alle Abstände auf "Null"--*/ 
* { 
margin: 0; 
padding: 0; 
}  

/* general layout */

html, body    {

        background-image:url("../pics/bg/winter_bg_with_snow.jpg");/*url("../pics/bg/winter_bg.jpg");*/
        background-repeat:repeat-x;
        background-color: #8896a3;
        width:100%;
        height:100%;
        margin:0px;
        padding:0px;
}

html    {
        display:table;
}

body    {
        display:table-cell;
        vertical-align:middle;

        font-family:arial, verdana, sans-serif;
        font-variant:small-caps;
        color:#FFF;
}

img		{
		border:0px;
}

#bg_frame   {
        margin:auto;
        margin-top:50px;
        padding: 0px;
        width: 960px;
        height: 560px;
        background-image:url("../pics/bg/bg_frame_snow.png");
        background-repeat:no-repeat;
         /* background-color:#777; */
        overflow: visible;
        text-align:left;
        border: 0px inset grey;
        z-index:0;
}


#mainframe   {
        margin: auto;
        padding: 0px;
        width: 760px;
        height: 508px;
         /* background-color:#777; */
        overflow: visible;
        text-align:left;
        border: 0px inset grey;
        z-index:1
}

#header     {
        padding:0px;
        margin-top:0px;
        width:inherit;
        z-index:1;
}

#menu	    {
        background-image:url("../pics/bg/menu_bg.png");
        background-position:bottom;
        background-repeat:no-repeat;
        padding-top:8px;
        text-align:center;
        height:28px;
        width:100%;
        border-top:1px solid white;
        clear:right;
        color:#0083fc;					/*#ff9200;*/
        font-weight:bold;
        overflow:show;
        z-index:1;
        text-decoration:none;
        letter-spacing:normal;
        word-spacing:normal;
        float:left;
        line-height:19px;
        
        
       /* background-color:#CCC; */
}



#content    {
        background-image:url("../pics/bg/clouds2.jpg"); 
        background-position:top;
        position:relative;
        border:0px inset grey;
        width:auto;
        height:395px;
        margin:0px;
        padding:5px 10px 5px 10px;
        overflow:hidden;
        font-size:18px;
        font-variant:normal;
        clear:both;
        z-index:1;
}

#footer     {
        margin-top:1px;
        background-image:url("../pics/bg/footer_bg.png");
        background-position:top;
        background-repeat:no-repeat;
        height:13px;
        width:100%;
        border-top:1px solid white;
        font-size:10px;
        color:#000000;
        z-index:1;
}


/* general Elements, e.g. a, h1, h2, ... */

h1      {font-size:22px;color:#ffffff;margin:0px;}
h2      {font-size:14px;color:#ffffff;}
h3      {font-size:14px;color:#ffffff;}
p       {margin-top:0px; padding-top:15px;}


a:link, a:visited     {
        color:#007eff;
        font-weight:bold;
        text-decoration:none;
}

a:active, a:hover{
        color:#ccc;
        font-weight:bolder;
        text-decoration:underline;
}


/* individual styles IDs and classes */

#notice     {
        width:inherit;
        height:inherit;
        margin:75px auto;
        font-size:2em;
        font-weight:bold;
        text-align:center;
        color:#3399FF;
        background-color:#777;
}

#title      {
        padding-top:18px;
        font-size:24px;
        text-align:right;

}

#logo       {
        height:45px;
        width:394px;
        float:right;
        margin-top:0px;
        margin-bottom:2px;
        margin-right:0px;
        padding-left:10px;

}

.impressum  {
        font-size:10px;
        float:right;
}

a.impressum:hover	{
		color:#000;
}


.text	{
		font-size:12px;
		text-align:justify;
}

/* Drop-Down Menu definitions*/


#menu ul	{
		float:left;
		width:147px;
		list-style-type:none;
		margin:0;
		padding:0;			
}

#menu li	{
		position:relative;
		top:0;	
		background:none;
		border:0px solid red;
		line-height:20px;
		height:20px;
}

#menu li li, #menu li li li {
		line-height:20px;
}

#menu ul ul	{
		position:absolute;
		z-index:2;
		background-color:#333;
		border:0px solid white;
		display:none;
		font-variant:normal;
		line-height:20px;	
		
}

#menu ul ul ul	{
		position:absolute;
		left:100%;
		top:0;
		margin-left:-0px;
		margin-top:-1px;
		z-index:2;
		background-color:#444;
		border:0px solid white;
		border-top:1px solid #ddd;
		display:none;
		font-variant:normal;
		visibility:hidden;
		
}


#menu h3	{
		font-size:16px;
		color:#007eff;
		text-align:center;
		background:none;
		border:0px outset #ddd;
		font-weight:bold;
}

#menu a, #menu a:visited	{
		font-size:13px;
		color:#007eff;
		text-align:center;
		background:none;
		border-left:1px solid #ddd;
		border-right:1px solid #999;
		border-bottom:1px solid #999;
		text-decoration:none;
		display:block;
}

#menu a:hover	{
		font-size:13px;
		background-color:#007eff;
		padding:0px;
		text-align:center;
		color:#BBB;
		border-left:0px solid #ddd;
		border-right:0px solid #999;
		border-bottom:0px solid #999;
}

#menu a.direkt:link, #menu a.direkt:visited	{
		font-size:16px;
		color:#007eff;
		text-align:center;
		border:0px outset #ddd;
		font-weight:bold;
		text-decoration:none;
}

#menu a.direkt:hover	{
		font-size:16px;
		color:#007eff;
		background-color:#BBB;
		text-align:center;
		border:1px outset #ccc;
		font-weight:bold;
		text-decoration:none;
		margin-top:-1px;		/* sonst rutscht der "button" bei hover 1px runter!*/
}


#menu ul li:hover ul	{
		display:block;
}

#menu ul li ul li:hover ul {
		visibility:visible;
}

#menu ul li ul li:hover {
		color:#007eff;
		background-color:#999;
		border:0.5px outset #ccc;
		margin-top:-1px;		/* sonst rutscht der "button" bei hover 1px runter!*/
		padding-bottom:0px;
		padding-left:-1px;
}

#menu ul li ul li ul li:hover {
		margin-top:0px;		
		line-height:inherit;
}

#menu ul li ul li ul li a:hover	{
		border-top:0px solid lime;
}

#menu ul li:hover a.direkt	{
		background-color:#bbb;
		border:1px outset #ddd;
		margin-top:-1px;
		cursor:pointer;
		
}

#menu ul li:hover h3	{
		background-color:#bbb;
		border:1px outset #ddd;
		margin-top:-1px;
		cursor:default;
		
}


/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/ 
* html #menu ul li{ 
		float: left; 
		width: 100%; 
} 
 
* html #menu ul li ul li{ 
		float: left; 
		width: 100%; 
} 

/*--nur für IE 7 erkennbar--*/ 
*+ html #menu ul li { 
		float: left; 
		width: 100%; 
} 

*+ html #menu ul li ul li { 
		float: left; 
		width: 100%; 
}
 
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/ 
*html body { 
		behavior: url(./csshover_for_IE6.htc); 
		font-size: 100%; 
} 
 
*html #menu ul li a { 
		height: 1%; 
} 

*html #menu ul li ul li a { 
		height: 1%; 
} 



/* Platzhalter */

.h_space_menu		{
		width:6px;
		text-align:center;
		float:inherit;
		margin-top:-2px;
		font-size:23px;
		font-weight:lighter;
}

/*************************************************************************************************************************
*********************************** INFOS ********************************************************************************
**************************************************************************************************************************


  ZENTRIERUNG (Vertikal und Horizontal)

    Um zentrieren zu können, muss dem Body einer Breite und Höhe von 100% zugewiesen werden.
    Die Zenrierung erfolgt über ein Tabellen-Konstrukt, das über die "display" Eigenschaft
    geschaffen wird.
    Dabei kann man "html" als <table> und "body" als <td>, also Tabellenzelle verstehen.
    Die Eigenschaft "vertical-align:middle" sorgt für die vertikale zentrierung.

    Der Container "MainFrame" wird nun mit den gewählten Abmessungen zentriert dargestellt.
    --> margin: auto;

*/