/* styles für homepage-neu (grau)*/

/* #FFFFFF weiss */
/* #000000 schwarz */
/* #555555 schrift dunkles grau */
/* #FEFEFF hintergrund fast weiss... */
/* #F0F0F1 hintergrund menu hellgrau */
/* #878787 rahmen dunkelgrau */

/* struktur:
   alles (div id) umfasst alle inhalte

   alles->logo (p id) float left
   alles->logo->img
   alles->motto_aussen (div id)
   alles->motto_aussen->motto (p)

   alles->kopfmenu (div id)
   alles->kopfmenu->h1
   alles->kopfmenu->ul
   alles->hauptmenu (div id)
   alles->hauptmenu->h1
   alles->hauptmenu->ul
   alles->inhalt_aussen (div id)
          ->inhalt (div id)

   inhalt->h1
   inhalt->textblock (div class)
   inhalt->h6
   inhalt->inhalt_bild (div id)


   inhalt->inhalt_bild->bild_aussen_links (class id)
   inhalt->inhalt_bild->bild_aussen_rechs (class id)
                                         ->textblock (div class)


*/


:root {
--weiss:#FFFFFF;
--schwarz:#000000;
--grau:#555555;
--dunkelgrau:#878787;

--farbe-schrift:#555555;
--farbe-offen:#FF0000;
--farbe-rahmen:#878787;
--size-rahmen:1px;
--stil-rahmen:solid;

--farbe-schatten-dunkel:#878787;
--farbe-schatten-hell:#555555;
--size-schatten-dunkel:1px;
--size-schatten-hell:2px;
--stil-schatten:solid;

--hintergrund:#FEFEFF;
--hintergrund-kopf:#F0F0F1;
--hintergrund-menu:#F0F0F1;
--hintergrund-form:#FAFAFA;
--hintergrund-button:#EDEDED;
--hintergrund-link:#FEFEFF;
--hintergrund-link-over:#878787;

--schriftart:Verdana,Arial,Helvetica,sans-serif;

}


/*----- grundsaetzliche dinge -----*/
* {
margin:0;
padding:0;
list-style-type:none;
}
/*----- allgemeine sachen -----*/
.hidden {
display: none;
}
.clear {
clear:left;
}
/*----- formulare -----*/
form {
background-color:var(--hintergrund-form);
border:1px solid var(--farbe-rahmen);
}
input, textarea, select {
font:normal 0.91em var(--schriftart);
border-left:var(--size-schatten-hell) var(--stil-schatten) var(--farbe-schatten-hell);
border-top:var(--size-schatten-hell) var(--stil-schatten) var(--farbe-schatten-hell);
border-right:var(--size-schatten-dunkel) var(--stil-schatten) var(--farbe-schatten-dunkel);
border-bottom:var(--size-schatten-dunkel) var(--stil-schatten) var(--farbe-schatten-dunkel);
}
.submit {
font:bold 0.91em var(--schriftart);
border-left:var(--size-schatten-dunkel) var(--stil-schatten) var(--farbe-schatten-dunkel);
border-top:var(--size-schatten-dunkel) var(--stil-schatten) var(--farbe-schatten-dunkel);
border-right:var(--size-schatten-hell) var(--stil-schatten) var(--farbe-schatten-hell);
border-bottom:var(--size-schatten-hell) var(--stil-schatten) var(--farbe-schatten-hell);
color:var(--schwarz);
background-color:var(--hintergrund-button);
}

/*----- voreinstellungen -----*/
/*----- titel -----*/
h1 {
font-size: 1.4em;
text-align: center;
}
h2 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
}
/*----- links -----*/
a {
text-decoration: none;
}
a:link,a:visited,a:active {
color:var(--farbe-schrift);
background:var(--hintergrund-link);
}
a:hover {
color:var(--hintergrund-link); 
background:var(--hintergrund-link-over);
}

/*----- äusserer rahmen -----*/
body {
font:normal 100.01% var(--schriftart);
color:var(--farbe-schrift);
text-align: center;
background:var(--hintergrund);
background-image: url(../images/trans.gif);
background-repeat: repeat;
/* height: 99.99%; */

}

/*----- äusserer rahmen -----*/
#alles {
margin: auto;
width: 54.5em;
border-right: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
border-left: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
/* height: 100%; */
}
html>body>#alles {
width:52.6em;
width: 54.5em;
}
#alles_maxbild {
margin: auto;
text-align: center;
border-right: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
border-left: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
/* height: 100%; */
}
/*----- header/logo -----*/
#logo {
float: left;
font:bold 2em var(--schriftart);
text-align: center;
width: 5em;  /*--- identisch mit margin-left motto! ---*/
border-left: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
/* border-top: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen); */
border-right: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
margin:0 0 0 10px;
background:var(--hintergrund-kopf);
}
#logo img {
border: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
margin: 5px;
background:var(--weiss);
}
#motto-aussen {
display:inline;
margin-left: 10em; /*--- identisch mit breite logo! ---*/
margin-top: 20px; /*--- relativ zur höhe logo! ---*/
}
#motto {
font:bold 1.81em var(--schriftart);
font-style: italic;
text-align: center;
}

/*----- menu oben -----*/
#kopfmenu {
clear:both;
text-align: center;
background:var(--hintergrund-kopf);
font:normal 0.71em Arial,Helvetica,sans-serif;
border-bottom: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}
#kopfmenu h1 {
display:none;
}

#kopfmenu ul {
clear:both;
text-align:right;
background:green;
border-top: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}
#kopfmenu .rechts {
float:right;
display: inline;
padding:0px 2px 0px 3px;
border-left: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}

#kopfmenu .links {
float:left;
display: inline;
padding:0px 3px 0px 2px;
border-right: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}


html>body>#alles>#kopfmenu>ul>li {
}
#kopfmenu li a {
overflow: visible;
text-align: right;
}
#kopfmenu a:link,#kopfmenu a:visited,#kopfmenu a:active {
color:var(--farbe-schrift);
background:var(--hintergrund-kopf);
}
#kopfmenu a:hover {
color:var(--hintergrund-link); 
background:var(--hintergrund-link-over);
}

/*----- menu links -----*/
#hauptmenu {
float: left;
width: 12.5em;  /*--- identisch mit margin-left inhalt! ---*/
font:normal 0.8em var(--schriftart);
min-height: 30em;
margin:0 0 10px 10px;
background:var(--hintergrund-menu);
border-left: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
border-bottom: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
border-right: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}
#hauptmenu h1 {
display:none;
}
#hauptmenu ul {
text-align: left;
}

#hauptmenu li {
margin: 2px 3px 2px 3px;
display: block;
border: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}
#hauptmenu li a {
overflow: visible;
display: block;
padding: 2px;
}

#hauptmenu li a i {
color:var(--farbe-offen);
}


.submenu a {
/* font:normal 1.21em var(--schriftart); */
overflow: visible;
display: block;
}


/*----- info rechts -----*/
#infoblock {
float: right;
width: 11.0em; 
font:normal 0.8em var(--schriftart);
margin:5px -2px -5px 0;
background:var(--hintergrund);
border: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}
html>body>#alles>#inhalt_aussen>#inhalt>#infoblock {
margin:-2px -2px 10px 0;
width: 11.1em; 
}

#infoblock h1 {
font:bold 0.9em var(--schriftart);
font-style: italic;
text-align: center;
}
#infoblock ul {
text-align: left;
}

#infoblock li {
margin: 2px 3px 2px 3px;
display: block;
}

#infoblock .termin {
font-weight:bold;
border-top: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
border-bottom: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
margin-top:5px;
}
#infoblock .zeit {
font:normal 0.7em var(--schriftart);
}


/*----- inhalt -----*/
#inhalt_aussen {
/*--- diese klammer ist notwendig wegen des mischbetriebs von variablen und festen abstandswerten: 
  menu soll sich verbreitern, sonst aber nix ---*/
margin-left: 10em;  /*--- identisch mit width hauptmenu! ---*/
}
#inhalt {
vertical-align: top;
margin:10px 10px 10px 32px;
}

html>body>#alles>#inhalt_aussen>#inhalt {
margin: 10px 10px 10px 20px;
}

/*----- inhalt bilder -----*/
#inhalt h1 {
margin-bottom: 5px;
}
#inhalt h6 {
font:bold 1.11em var(--schriftart);
text-align:center;
margin:5px 0 5px 0;
padding:5px 0 5px 0;
border-top: 1px dashed var(--farbe-rahmen);
border-bottom: 1px dashed var(--farbe-rahmen);
}
#inhalt_bild .textblock {
}
.bild_aussen_links,.bild_aussen_rechts {
float:left;
width: 312px;
font-size:0.81em;
border: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
margin:5px;
}
.bild_aussen_space_links,.bild_aussen_space_rechts {
float:left;
width: 312px;
font-size:0.81em;
margin:6px;
}
#inhalt_bild img {
margin: 5px;
}

.bild_aussen_links p,.bild_aussen_rechts p {
font-weight:bold;
}
.bild_aussen_links .text,.bild_aussen_rechts .text {
font-weight:bold;
}
.bild_aussen_links .name,.bild_aussen_rechts .name {
font-size:0.71em;
}



.clear {
clear:both;
height: 0;
}
.nofloat { 
clear: both;
visibility: hidden;
height: 0;
}

/*----- inhalt ergebnisse -----*/
.spiel {
float:left;
width:34em;
font:normal 0.81em var(--schriftart);
text-align:left;
border-top:1px dashed var(--farbe-rahmen);
}
.regel {
font-weight:bold;
}
.ergebnis-satz {
float:left;
width:28.75em;
font:normal 0.81em var(--schriftart);
text-align:left;
margin-left:1.25em;
}

html>body>#alles>#inhalt_aussen>#inhalt .ergebnis-satz {
margin-left:2.5em;
}

.ergebnis-spiel {
float:left;
width:4em;
font:normal 0.81em var(--schriftart);
}
.ergebnis-gesamt {
margin-bottom:0.5em;
}
.ergebnis-gesamt .spiel {
width:31.25em;
font-weight:bold;
border:0;
}
.ergebnis-gesamt .ergebnis-spiel {
font-weight:bold;
}
.spielende {
clear:both;
}
.sieg {
font-weight:bold;
}





/* Fusszeile mit Copyright */

#fusszeile {
	margin:0;
	width: 54.5em;
	padding: 0;
	border-top: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
/*
	background-image: url(img/block.gif);
	background-position: left top;
	background-repeat: no-repeat;
	border-left: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
*/
	border-bottom: var(--size-rahmen) var(--stil-rahmen) var(--farbe-rahmen);
}
html>body>#alles>#fusszeile {
width: 52.6em;
	width: 54.5em;
}

#fusszeile p {
	margin: 0;
	padding: 0.1em;
	padding-left: 1em;
	font-size: 0.6em;
text-align:left;
}

/*nach rechts rutschender Bereich mit "nach oben Link" */
.right {
	padding: 0;
	width: 4.5em;
	padding-right: 1em;
	float: right;
	text-align: right;
}
/*
.right a:link, .right a:visited  {
	color: #fff;
}
*/