/* www.bruetting-finanzkonzept.de css */

/* - Allgemeines (Text) - */

* {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
}
h1 {
  font-size:1.2em
}
h2 {
  font-size:1.1em
}
h3 {
  font-size:1.0em;
  text-decoration: underline
}
.mini {
  font-size: 0.8em;
  font-weight : normal;
}
.maxi {
  font-size: 1.2em
}
.bildus	{				/* Bildunterschriften */
  font-size: 0.9em;
  font-weight: normal;
  padding-top:4px;
  text-align:left;
} 
a {
  text-decoration: none;
  font-weight: bold;
}
a:link, a:visited, a:active {
  color:#000000
}
a:hover	{
  text-decoration: underline
}
p {
  text-align:justify
}

/* - Layout Seite - */
body {
  background: #c0c0c0; 			/* Hintergrundfarbe links und rechts*/
  margin: 0;
  padding-bottom: 1%; 			/* Abstand unten */
  min-width: 640px; 			/* Bei weniger als 640px Breite soll ein Scrollbalken erscheinen. */
  font-size: 100.01%; 			/* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
  font-family: verdana, arial, sans-serif ;
  scrollbar-face-color:#c0c0c0; 
  scrollbar-shadow-color: #000000; 
  scrollbar-highlight-color: #000000; 
  scrollbar-3dlight-color: #c0c0c0;
  scrollbar-darkshadow-color: #c0c0c0;
  scrollbar-track-color: #c0c0c0;
  scrollbar-arrow-color: #000000
}
#hprahmen {
  max-width: 70em; 			/* Begrenzung der Breite auf höhstens 70em. */
  margin: auto; 			/* Zentrierung */
  border: 2px solid #ffffff; 		/* schmaler Rand = Hintergrundfarbe*/
  border-top: 0; 			/* Rand oben = 0 */
  background: #ffffff; 			/* Hintergrundfarbe Seite */
}

#footer {
  clear: both; 				/* Damit #main mindestens so hoch ausgedehnt wird wie #randspalte, falls #randspalte länger sein sollte. */
  padding: 0 20px;
}

/* - Subnavigation, Rechte Spalte - */
#randspalte {
  width: 23%; 				/* Breite relativ */
  min-width: 10em; 			/* minimale Breite */
  float: right; 			/* Main text fließt vorbei */
  padding: 70px 1% 1em 1%;
  margin: 1em 1% 0 1%;
/*  border-left: 1px dotted #aaa; */	/* Trennlinie */
  border-left: 1px solid #ed1c24;
  font-size: 0.9em;  			/* Schriftgröße relativ kleiner */
}

/* - Hauptinhaltsteil - */
#main {
  padding: 0 31% 0 20px; 	
  line-height: 1.5em; 			/* Erhöhen der Zeilenhöhe. */
}

/* - Menü - */
#menu {
  background: #ed1c24; 			/* Balkenhintergrundfarbe = BFK-NET "rot" */
  padding: 5px 0%; 			/* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  border-top: 2px solid #ffffff; 	/* Trennungsstrich oben */
  border-bottom: 2px solid #ffffff; 	/* Trennungsstrich unten*/
  margin: 0;
  text-align: right;
  color: #ffffff; 			/* Farbe aktiver Menüpunkt */
}

#menu li {
  font-size: 1.0em;
  display: inline; 			/* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; 		/* Bullets vor den Menüpunkten abschalten */
  border-left: 1px solid #000000; 	/* Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: bold;
}

#menu li a {
  color: #000000; 			/* Farbe der Links schwarz */
  text-decoration: none;
}
#menu li a:hover {
  text-decoration: underline;
}

/* - Fussleiste - */
#fussleiste {
  background: ##ffffff; 
  padding: 5px 0%; 			/* Abstand Rand */
  border-top: 1px solid #000000; 	/* Trennungsstrich oben */
  /* border-bottom: 1px solid #000000;*/ 	/* Trennungsstrich unten */
  margin: 0;
  margin-top: 20px;
  font-size: 0.7em;
  text-align: center;
}

#fussleiste li {
  font-size: 1.1em;
  display: inline; 			/* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; 		/* Bullets vor den Menüpunkten abschalten */
  border-left: 1px solid #000000; 	/* Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: bold;
}


/* - Highlight oder Infoband - */

#highlight {
  background: #ffff00; 			/* Balkenhintergrundfarbe = gelb */
  padding: 5px 0%; 			/* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  border: 10px solid #ffff00; 		/* Trennungsstrich (Rahmen) */
  margin: 0;
  color: #000000; 			/* Farbe aktiver Menüpunkt */
}

#highlight li {
  font-size: 1.0em;
  display: inline; 			/* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; 		/* Bullets vor den Menüpunkten abschalten */
  padding: 0 10px 0 15px;
  font-weight: bold;
}

#highlight li a {
  color: #000000; 			/* Farbe der Links schwarz */
  text-decoration: none;
}
#highlight li a:hover {
  text-decoration: underline;
}


  

/* - Button red - */

#button {
  background: #ffffff; 			/* Tabellenhintergrundfarbe */
  padding: 25px 0%; 			/* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  color: #ffffff; 			/* Farbe aktiver Menüpunkt */
  font-size: 1.3em; 			/* Schrift */
  text-align: center;
  columns: 2 12em;

}

#button li {
  background: #ed1c24; 			/* Balkenhintergrundfarbe = BFK-NET "rot" */
  list-style-type: none; 		/* Bullets vor den Menüpunkten abschalten */
  border-top: 25px solid #ed1c24; 	/* Trennungsstrich oben */
  border-bottom: 25px solid #ed1c24; 	/* Trennungsstrich unten*/
  margin-left: 20px; 			/* Abstand links	 */
  margin-right: 20px; 			/* Abstand rechts	 */
  margin-bottom: 10px; 			/* Abstand unten	 */
  font-weight: bold;
}

#button li a {
  color: #ffffff; 			/* Farbe der Links weiß */
  text-decoration: none;
}
#button li a:hover {
  text-decoration: underline;
}




/* Für mobile Geräte */
@media screen and (max-device-width: 480px) {

#menu {
  text-align: center;
}

#menu li {
  font-size: 4em;			/* Größere Menüpunkte */
  display: block; 			/* Damit die Menüpunkte untereinander erscheinen. */
  border-left: none;		 	/* Trennungsstrich aus */
  font-weight: bold;
  line-height: 2em; 			/* Erhöhen der Zeilenhöhe. */
}

.skipphone  { 				/* Ausblenden für Phone */
 display: none;
}

#randspalte {
  float: none;	 			/* Main text folgt */
  padding: 0 20px 0 20 px;
  border-left: none;	 		/* Trennlinie aus*/
  font-size: 1em;  			/* Schriftgröße relativ kleiner */
}

#main {
  padding: 0 20px 0 20px;
  font-size: 1.5em;
}


} /* Ende mobile Geräte */
