/* CSS Document */

/* In diesem Dokument werden die Standardeinstellungen für das Layout der Seite gespeichert */

/*	Last Update: 11.02.08
	(c) by Matthias Wick für www.ministranten.ebermannstadt.de
	E-Mail: m.wick@web.de
	www.matthias-wick.de
*/


/* Der Style für den Body 
--------------------------------------------------------------------------------------------------*/
body{
	background: #DCDCDC; 
	text-align: center; /* IE 5.x 6: Damit das Zentrieren funktioniert */
	min-width: 740px; /* Damit bei Browserverkleinerungen alles stimmt */
	font-size: 10pt;
	/* Gibt die Schriftart an, die verwendet werden soll*/
	font-family: "Trebuchet MS", Arial, Helvetica;;
	line-height: 1.6; /* Gibt die Zeilenhoehe an */
}


/* Entfernt zunaechst alle Ränder */
* {
	 margin-top: 0;
	 margin-bottom: 0;
	 padding-top: 0;
	 padding-bottom: 0;
}

/* Clear */
.clear{
	clear: both;
}

/* Die Styles für das Layout
--------------------------------------------------------------------------------------------------*/

/* Definiert die Box, in der die Seite angezeigt wird */
#wrapper {
    width: 960px; /* Die Breite */
    margin: 0 auto; /* Zentriert die Seite (außer IE) */
    text-align: left; /* IE 5.x 6: Damit das Zentrieren funktioniert */
    margin-top: 15px;
}

/* Definiert die Box des Titelbildes */
#logo {
    width: 100%; /* Die Breite ist immer die maximale Breite */
    height: 80px; /* Die Höhe des Logos */
    text-align: center;
}

/* Definiert den Bereich der Navigation */
#navigation {
    width: 160px; /* Die Breite */
    float: left; /* Positioniert auf der linken Seite */
}

/* Definiert den umgebendenBereich des Inhalts und der Zusatzinfos */
#content {
    float: right; /* Rechts positioniert */
    width: 790px; /* Die Breite */
}

/* Das Feld für den Inhalt */
#mainContent{
    float: left; /* links positioniert */
    width: 620px; /* Die Breite */
    padding-top: 20px; /* von Ober her zum Text 20px Abstand */
}

/* Definiert den Bereich für die Infospalte */
#info {
    width: 160px; /* Die Breite */
    float: right; /* Auf die rechte Seite damit */
}

/* Definiert den Bereich für die untere Leiste */
#footer {
    width: 100%;
}

/* Der Style für die Navigation
--------------------------------------------------------------------------------------------------*/
.naviBox, .infoBox{
    margin-top: 20px; /* 20 px Abstand nach oben */
}

.naviUeberschrift, .infoUeberschrift{
    color: #ffffff; /* Die Textfarbe */
    font-weight: bold; /* Der Text wird fett */
    padding-left:25px; /* Der Abstand nach links */
    height: 20px; /* Die Höhe */
    background-image: url("DekorationNavi.gif"); /* Das Hintergrundbild */
    background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    background-position: bottom left; /* Das Hintergrundbild unten links positionieren */

}

.naviInhalt, .infoInhalt{
    /* Die Ränder der Box */
    border-bottom: 1px solid #336699;
    border-left: 1px solid #336699;
    border-right: 1px solid #336699;
    background-color: #CCCCCC; /* Die Hintergrundfarbe der Box */    
}

.naviInhalt ul, .infoInhalt ul{
    list-style-type: none; /* Die Listenzeichen wegformatieren */
    padding-left: 10px; /* Den Abstand nach Links */
    padding-right: 10px; /* Den Abstand nach Rechts */
    color: #336699; /* Die Farbe der Schrift */
    line-height: 1.4; /* Gibt die Zeilenhoehe an */
    margin: 0; /* Da der allgemeine Abstand für ul sonst anderweitig definiert ist */
}

/* Formatiert die Bilder in der Infobox */
.BildDesTages{
    text-align: center;
    margin: 0px;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top: 5px;
}

.InfoBoxTextSchwarz {
	color:#000000;
}

/* Der Style für die Inhalts-Boxen
--------------------------------------------------------------------------------------------------*/
.inhaltBox{
    margin-top: 20px; /* 20 px Abstand nach oben */
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
	width: 600px;
}

.inhaltUeberschrift{
    color: #ffffff; /* Die Textfarbe */
    font-weight: bold; /* Der Text wird fett */
    padding-left:25px; /* Der Abstand nach links */
    height: 20px; /* Die Höhe */
    background-image: url("DekorationMitte.gif"); /* Das Hintergrundbild */
    background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    background-position: bottom left; /* Das Hintergrundbild unten links positionieren */
}

.inhaltInhalt{
    /* Die Ränder der Box */
    border-bottom: 1px solid #336699;
    border-left: 1px solid #336699;
    border-right: 1px solid #336699;  
    background-color: #CCCCCC; /* Die Hintergrundfarbe der Box */    
}

.inhaltBoxHalbContainer {

}

.inhaltBoxHalb {
	margin-top: 20px; /* 20 px Abstand nach oben */
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
	width: 290px;
	float: left;
}

.inhaltUeberschriftHalb {
	color: #ffffff; /* Die Textfarbe */
    font-weight: bold; /* Der Text wird fett */
    padding-left:25px; /* Der Abstand nach links */
    height: 20px; /* Die Höhe */
    background-image: url("DekorationMitteHalb.gif"); /* Das Hintergrundbild */
    background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    background-position: bottom left; /* Das Hintergrundbild unten links positionieren */
}

/* Diese Klasse ist notwendig, damit in der Box der Rand im IE richtig angezeigt wird */
/* Es ensteht dadurch ein zusätzlicher Absatz im IE */
.IERichtigerRand {
    height: 0px;
    visibility: hidden;
}

.TextZweispaltig{
    float: left;
    width: 45%;
}

.TextZweispaltigRechts{
    float: right;
    width: 45%;
}

.TextGanzeBreite{
    float: left;
    width: 598px;
}

/* Style für den Fußbereich */
/* -------------------------------------------------------------------------- */
#footerBox {
    width: 960px;
}

#footerUeberschrift {
    background-image: url("LeisteUnten.gif");
    background-repeat: no-repeat;
    background-position: bottom left;
    color: #ffffff;
    font-weight: bold;
    height: 20px;
    padding-top: 20px;
}

#footerUeberschrift p {
    float: left;
    width: 455px;
    margin: 0;
    padding-left: 25px;
}

#footerInhalt {
    /* Die Ränder der Box */
    border-bottom: 1px solid #336699;
    border-left: 1px solid #336699;
    border-right: 1px solid #336699;
        
    background-color: #CCCCCC; /* Die Hintergrundfarbe der Box */    
}

#footerBereichOnlineInfo {
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    width: 460px;
}

#footerBereichLogin {
    margin-top: 10px;
    margin-bottom: 0;
    float: left;
    width: 270px;
}

#footerBereichLogin label {
    display: inline;
    font-weight: normal;
    width: 100px;
    float: left;
}

#footerBereichLogin p {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px;
    width: 100%;
    line-height: 14px;
}

#footerBereichLogin p input {
    height: 14px;
    width: 100px;
    font-size: 9px;
}

#footerBereichLogin input[type="submit"]{
    font-size: 9px;
	height: 18px;
	line-height: 12px;
    margin-left: 100px;
}

#footerBereichLogoutNeureBenutzer {
    float: left;
    width: 150px;
    padding-top: 10px;
}

#footerHostedBy{
    text-align: center;
}

#footer .trennlinie {
    margin-bottom: 0;
    margin-top: 20px;
}

/* Die Trennlinie */
/* -------------------------------------------------------------------------- */
.trennlinie {
    float: left; /* Positioniert die Div-Box links */
    width: 100%; /* Erstreckt die div-Box auf die ganze Breite */
    /* Das Hintergrundbild der Box ist die Trennlinie */
    background-image: url("Trennlinie.gif"); 
    /* Damit, wenn die Trennlinie kleiner als die Breite der div-Box ist, die Trennlinie nur einmal angezeigt wird. */
    background-repeat: no-repeat;
    background-position: center; /* Positioniert die Trennlinie in der Mitte */
    height: 6px; /* Gibt der Box eine Höhe, da sonst nichts in der Box vorhanden ist */
    /* Die Abstände nach oben und unten */
    margin-top: 12px;
    margin-bottom: 12px;
}

/*     Link     */
/* ---------------------------------------------------------------------------*/
a:link 
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	color: #336699;
	text-decoration:none;
}
a:visited
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	color: #336699;
	text-decoration:none;
}

a:active
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	color: #096354;
	text-decoration:none;
}

a:hover
{
	text-decoration: underline;
	font-family: "Trebuchet MS", Arial, Helvetica;
	color: #006666;
}

/*    Überschriften    */
/* -------------------------------------------------------------------------- */
h1, .h1OhneAbsatz
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-size: 18pt;
	color: #096354;
	
}
h2, .h2OhneAbsatz
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-size: 13pt;
	color: #096354;
}

h3, .h3OhneAbsatz
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-size: 11pt;
	color: #006666;
	font-weight: bold;
}

h4, .h4OhneAbsatz
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: bold;
	color: #FFFFFF;
}

h5, .h5OhneAbsatz
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	color: #006666;
}

h6, .h6OhneAbsatz
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	color: #006666;
}

/* Die Abstände der Textelemente */
h1, h2,  h3, h4,
h5, h6, ul, ol
{
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
    padding-top: 10px;
}

p {
    margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
}

.naviInhalt ul, .naviInhalt ol,
.infoInhalt ul, .infoINhalt ol
{
    padding-top: 0;
}

/* ul, li definieren */
ul, ol{
	padding-left: 30px;
}

.mitAbstandOben {
    padding-top: 10px;
}

.InfoBoxNaechsterTitel {
    color: #000;
    font-weight: bold;
}

/* Kalender */
.kJugend
{
	color: #0000FF;
}

.kMinis
{
	color: #009900;
}

.kAllg
{
	color: #FF0000;
}

.Fehler
{
    color: #FF0000;
}

/* Formulare */
/* ------------------------------------------------------------------------- */
/* Gibt die Angaben für ein Fieldset an, also einen Bereich im Formular */
fieldset{
	/* Die Absände des Feldes */
	margin: 1em 20px 0 20px;
	/* die Abstände nach innen */
	padding: 1em;
	/* Der Rahmen und sein aufbau */
	border: 1px #336699 solid;
	/* Die Hintergrundfarbe */
	background: #CCCCCC;
}

fieldset .loginFormular{
    width: 150px;
}

/* Die Beschriftung eines Fildsets, also, das was drüber steht. */
legend{
	/* Leicht fette Schrift */
	font-weight: bold;
	/* Farbe der Beschriftung */
	color: black;
}

/* Label ist die Beschriftung eines Eingabefeldes */
label{
	/* Damit die Beschriftung über dem Eingabefeld steht */
	display: block;
	/* leicht fette Schrift */
	font-weight:bold;
}

input:focus, textarea:focus{
	/* Die neue Hintergrundfarbe des Feldes */
	background: #ffc;
}

/* Für alle Eingabefelder wird ein rand bestimmt */
input[type="text"], input[type="password"], textarea{
	/* Die Ränder oben, links, unten und rechts mit der Farbe und dem Stil */
	border-top: 1px #336699 solid;
	border-left: 1px #336699 solid;
	border-bottom: 1px #336699 solid;
	border-right: 1px #336699 solid;
}


/* Damit alle Positionierungen richtig laufen, muuss das p-Element auf relative gesetzt werden */
/* im p befinden sich alle zu positionierenden Elemente */
form p{
	position: relative;
}

.Fehler{
    color: #FF0000;
}

/* Feedback gibt an, ob Fehler gemacht wurden, wenn das Formular falsch ausgefüllt wurde. */
/* Style für die kleinen Meldungen rechts neben den Eingabefeldern */
.feedback {
	/* Die Position muss absolut angegeben werden, damit die Positioniereung richtig läuft */
	position: absolute;
	/* Der Rand nach links, damit die Beschriftung des Feldes nicht überschrieben wird */
	margin-left: 50px;
	/* Rand nach oben, damit die Meldung leicht zentriert ist */
	margin-top:20px;
	/* verschiebt die Meldung nach rechts von links aus gesehen */
	left: 120px;
	/* Damit beim IE nicht über das Feld hinausgeschrieben wird */
	width: 350px;
	/* Die Schriftfarbe */
	color: #760000;
	/* Abstand innerhalb der Box, damit Platz für das Bild geschaffen wird */
	padding-left: 20px;
	/* Das Bild mit dem Ausrufezeichen */
	background: url("error.gif") no-repeat left center;
}

.feedbackNachricht {
	/* Die Position muss absolut angegeben werden, damit die Positioniereung richtig läuft */
	position: absolute;
	/* Der Rand nach links, damit die Beschriftung des Feldes nicht überschrieben wird */
	margin-left: 50px;
	/* Rand nach oben, damit die Meldung leicht zentriert ist */
	margin-top:0px;
	/* verschiebt die Meldung nach rechts von links aus gesehen */
	left: 120px;
	/* Damit beim IE nicht über das Feld hinausgeschrieben wird */
	width: 350px;
	/* Die Schriftfarbe */
	color: #760000;
	/* Abstand innerhalb der Box, damit Platz für das Bild geschaffen wird */
	padding-left: 20px;
	/* Das Bild mit dem Ausrufezeichen */
	background: url("error.gif") no-repeat left center;
}


.ForumNeuAnzeigeDatum {
    font-weight: bold;
    color: #000;
}

/* Seitenauswahl von Forum, Gästebuch, etc. */
.seitenauswahl {
    text-align: center;
}


/* Kalenderbestandteile, die auch auf jeder Seite erscheinen */
.kalenderTabelleKlein {
    line-height: 1.1;
}

.kalenderTabelleKlein th {
    text-align: center;
    font-weight: normal;
    background-color: #A4A4A4;
    color: #000000;
    border-bottom:1px solid #E6E6E6;
    line-height: 1.5;
}  

.kalenderTabelleKlein td {
    text-align: center;
}