/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Demo-Stylesheet fuer HJR Gehaltsrechner/Abfindungsrechner


Diese CSS-Datei kann individuell angepasst werden.

- einfaches Beispiellayout. FF/HJR - Version 20061213  

Mit Kommentaren zur Orientierung,
padding und margin werden - soweit nicht von besonderer Bedeutung - nicht weiter erlaeutert
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* *******************************************************************************
   umschliessende div-Boxen:
   allg. fuer Rechner verwendete Schriftformate, Gesamtbreite, Rahmen etc.
******************************************************************************* */

/* hjrErgebnis und hjrFormular ermoeglichen eine Unterscheidung zw. Formular u. Ergebnisseite, sie umklammern den gesamten Rechner */
#hjrErgebnis, #hjrFormular
	{
	width:468px; /* hier legen wir die Gesamtbreite fest */	
	}

/* hjrSeite umfasst den gesamten Inhalt des Rechners (Formular u. Ergebnisseite) */
#hjrSeite
	{
	border:1px solid #000; /* Rahmen um den gesamten Rechner -> 1px=ja -> 0px=nein; wenn ja, Farbe anpassen */
	padding: 4px 0;
	margin: 0; 
	color: #000; /* die gewuenschte Schriftfarbe fuer den Rechner */
	background-color: #fff; /* Hintergrundfarbe */
	background-image:url();	/* oder Hintergrundgrafik */
	}

/* Schriften im Rechner */
#hjrSeite p, #hjrSeite div, #hjrFussnoten p, .hjrNotice p 
	{
	font-family: Verdana,Arial,Helvetica,sans-serif; /* die gewuenschte Schriftart fuer den Rechner */
	font-size: 12px; /* die gewuenschte Schriftgroesse fuer den Rechner */
	color: #000; /* die gewuenschte Schriftfarbe fuer den Rechner */
	background-color: #fff; /* Hintergrundfarbe */
	}



/* bitte nicht aendern */
#hjrContent
	{
	width: 100%	
	}



/* *******************************************************************************
   Elementausrichtung / Positionierung der Formular- und
   Ergebnisfelder mit float
******************************************************************************* */

/* hjrFeld umschliesst hjrFeldBoxRechts und hjrFeldBoxLinks (und die bold-Varianten) */
.hjrFeld
	{
	border: 0px solid #fff; /* Rahmen  -> 1px=ja -> 0px=nein; wenn ja, Farbe anpassen */
	background-color: transparent; /* Hintergrundfarbe */
	padding: 0;
	margin: 0;
	}
	
/* "linkes" Feld (Beschriftungstexte, z.B "Lohnsteuerklasse" im Formular oder "Nettobetrag"
auf der Ergebnisseite, mit float positioniert */
.hjrFeldBoxLinks, .hjrFeldBoxLinksBold
	{
	background-color: transparent; /* Hintergrundfarbe */
	float:left;	/* Positionierung der Formularfelderbeschriftung, none -> standard links positioniert */
	width: 62%; /* wenn float left oder right ist dann muss width einen Wert haben */
	color: #000; /* Textfarbe */	
	}

/* "rechtes" Feld (Formulareingabefelder / Ergebniswerte), mit float positioniert */
.hjrFeldBoxRechts, .hjrFeldBoxRechtsBold
	{
	background-color: transparent; /* Hintergrundfarbe */
	float:right; /* Positionierung der Formularfelder, none -> standard links positioniert */
	width: 38%; /* wenn float left oder right ist dann muss width einen Wert haben */
	color: #000; /* Textfarbe */									
	}

/* Hervorhebung inhaltlich/strukturell wichtiger Felder */
.hjrFeldBoxRechtsBold, .hjrFeldBoxLinksBold
	{
	font-weight:bold;
	}


/* Textausrichtung in FeldBoxRechts und FeldBoxLinks. Nachfolgende Anweisungen ermoeglichen
eine Differenzierung der Textausrichtung in FeldBoxRechts u. FeldBoxLinks separat
fuer Formular und Ergebnisseite.  */

#hjrFormular div.hjrFeldBoxRechts, #hjrFormular div.hjrFeldBoxRechtsBold
	{
	text-align: right; /* Textausrichtung in FeldBoxRechts - Eingabeformular */
	}

#hjrFormular div.hjrFeldBoxLinks, #hjrFormular div.hjrFeldBoxLinksBold
	{
	text-align: left; /* Textausrichtung in FeldBoxLinks - Eingabeformular */
	}

#hjrErgebnis div.hjrFeldBoxRechts, #hjrErgebnis div.hjrFeldBoxRechtsBold
	{
	text-align: right; /* Textausrichtung in FeldBoxRechts - Ergebnisseite */
	}

#hjrErgebnis div.hjrFeldBoxLinks, #hjrErgebnis div.hjrFeldBoxLinksBold
	{
	text-align: left; /* Textausrichtung in FeldBoxLinks  - Ergebnisseite */
	}


/* padding/margin der Text enthaltenden p-Boxen */
.hjrFeld p, .hjrFeldBoxBotton p 
	{
	margin: 0;
	padding: 4px 10px; /* wichtige Stelle: Abstand der Formular- und Ergebnisfelder zum Rechnerrahmen, vertikaler Abstand der Felder zueinander */
	}

/* nur fuer das Feld mit dem Submit Button */
.hjrFeldBoxBotton
	{
	background-color: transparent; /* Hintergrundfarbe */
	text-align: right; /* Textausrichtung */
	color: #000; /* Textfarbe */
	padding: 0;
	margin: 0;
	}

/* bitte nicht aendern */
/* links bzw. rechts ausgerichtete Ebenen clearen */

.clearDiv
	{
	clear:both;
	line-height: 0px;
	}


/* *******************************************************************************
   Felder, die individuell formatiert werden koennen -
   Formular: Berechnungsjahr, Waehrung, Datumsformat / Ergebnisseite: Kopf 
******************************************************************************* */

/* Kopfbereich Ergebnisseite */
#hjrErgebnisKopf, #hjrErgebnisKopf p, #hjrErgebnisKopf div
	{
	background-color: transparent; /* Hintergrundfarbe */
	color: #000; /* Textfarbe */
	font-size: 12px; /* Schriftgroesse */
	font-style: italic;
	}

#hjrErgebnisKopf
	{
	padding-bottom: 4px; /* wie setzen den Kopf etwas vom Rest ab... */ 
	}


/* Formular: Feld "Berechnungsjahr" */
#hjrBerechnungsjahr div.hjrFeldBoxRechts
	{
	font-weight:bold;
	}
	
/* Formular: Feld "Waehrung" */
#hjrWaehrung
	{
	/* display: none; */
	}

#hjrWaehrung div.hjrFeldBoxRechts
	{
	font-weight:bold;
	}

/* Formular: Feld "Format fuer Datumseingabe" - nur Abfindungsrechner */
#hjrDateFormat div.hjrFeldBoxRechts
	{
	font-weight:bold;
	}



/* *******************************************************************************
   Formularelemente -
   input/select/button
******************************************************************************* */

/* ... was alle input/select gemeinsam haben */
#hjrSeite input, #hjrSeite select
	{    
    font-size: 10px;     
    /* border: 0px solid #666; */ /* Rahmen -> 1px=ja -> 0px=nein */
	}

/* Standard-Eingabefeld */
.hjrInput
	{
	text-align:right; /* Textausrichtung */
	width: 100px; /* Breite */
	}

/* "kurzes" Eingabefeld (Prozentangabe)  */
.hjrInputProz
	{
	text-align:right; /* Textausrichtung */
	width: 35px; /* Breite */
	}

/* Eingabefeld Datum Tag/Monat - nur Abfindungsrechner  */
.hjrInputTagMonat
	{
	text-align:right; /* Textausrichtung */
	width: 20px; /* Breite */
	}
	
/* Eingabefeld Datum Jahr - nur Abfindungsrechner  */
.hjrInputJahr
	{
	text-align:right; /* Textausrichtung */
	width: 40px; /* Breite */
	}	

/* Zusatzformatierung "readonly"-Feld Austrittsdatum, Jahr - nur Abfindungsrechner  */
#hjrInputReadonly {
    color: #000;
    background-color: #f4f4f4;    
}

/* Standard-Select */
.hjrSelectNormal
	{
	text-align:left; /* Textausrichtung */
	width: 131px; /* Breite */
	}

/* Select "lang" (Bundeslandauswahl) */
.hjrSelectLang
	{
	text-align:left; /* Textausrichtung */
	width: 131px; /* Breite */
	}

/* speziell fuer alle Radios */
.hjrCheckbox
	{
					
	}


/* "Abschicken"-Button, Variante 1 - "HTML-Button" (formatieren nach Belieben...): */

.hjrButtonBild
	{
	display: none;	
	}

.hjrButtonHtml
	{

	}


/* "Abschicken"-Button, Variante 2 - "Bild-Button"
(= komplette optische Ersetzung des HTML-Buttons durch in dieser Datei referenziertes
Hintergrundbild / Wichtig: width wie Breite des Hintergrundbildes, kein border, 
Hintergrundfarbe transparent): 
*/
/*
.hjrButtonBild
	{
	width: 71px;
	border: none;
	background-color: transparent;
	background-image: url(img/hjrButton.gif);
	background-repeat:no-repeat;
	background-position: center;
	}

.hjrButtonHtml
	{
	display: none;	
	}
*/

/* *******************************************************************************
   horizontale Trenner
   zwischen den einzelnen Abschnitten
******************************************************************************* */

/* Variante 1 - standard HTML-HR (formatieren nach Belieben...): */

.hjrhr
	{
	color:#808080;
	background-color:#808080;
	height:1px;
	border:1px #808080;
	}

.hjrhrTrenner
	{
	height: 10px;
	margin: 0 10px;	
	}


/* Variante 2 - in dieser Datei referenziertes Hintergrundbild als
Trenner verwenden: */
/*
.hjrhr
	{
	display: none;
	}
	
.hjrhrTrenner
	{
	margin: 0 10px;   
	height: 15px;   
	background-image: url(img/g_dotline_458.gif);
	background-repeat: no-repeat;     
	background-position: center; 
	}
*/	

/* *******************************************************************************
   einige display-Schalter zum Anzeigen/Ausblenden der Textlabels "EUR" bzw.  
   "Ergebnis" in Formuar und Ergebnisseite
******************************************************************************* */
	
.hjrZeigeEuro
	{
	display:none;
	}
	
.hjrZeigeEuroHead
	{	
	/* display:none; */	
	}

.hjrZeigeErgebnisHead
	{	
	display:none;	
	}
	
	
/* *******************************************************************************
   Meckerseite   
******************************************************************************* */

.hjrMeckerBody
	{
	padding: 10px;
	}
	
/* Fussnoten (#hjrFussnoten) bzw. Programmeldungen */
#hjrFussnoten, .hjrNotice
{
padding:4px 10px;
margin: 0;
}

/* Umfasst einzelne Fussnote */
.hjrFussnote
{
}

/* Verweis zum Text der Fussnote */
.hjrFussnoteAnker
{
}