@charset "UTF-8";
/**
 * Dieses Stylesheet ist Grundlage des Aussehens der Seite in allen Browsern.
 * Für Internet Explorer bis Version 8 einschließlich werden einige Angaben
 * durch Werte aus einem anderen Stylesheet überschrieben (siehe IEFixes.css).
 */

/* Scrollbars in Nicht-IE immer anzeigen. Vermeidet, dass die Seite seitlich
   verspringt bei Wechsel von einer längeren zu einer sehr kurzen Seite ohne
   Scrollbars. */
html {
	overflow-y: scroll;
}


body {
	background: #FFFF99 url('back.gif') repeat-y fixed left center;
	margin-top: 12px;
	margin-bottom: 10px;
	font: 100.01% Arial, Helvetica, Verdana, sans-serif;
	text-align: center;
}


/* Kasten mit dem Inhalt der Seite */
#seite {
	position: relative;
	width: 747px;
	margin: auto;
	text-align: left;
}


/* Allgemeine Angaben für alle Links
   Wird für die einzelnen Bereiche der Seite (kopf, links, inhalt und fuss)
   u.U. jeweils noch angepasst. */
a:link {
	color: #0000CD; /*mediumblue*/
}
a:visited {
	color: gray;
}
a:hover {
	color: #0099CC; /* helles Blau */
	text-decoration: none;
}
a:active {
	color: #2D4698; /* dieselbe Farbe, die auch für Überschriften verwendet wird */
}


/* Farben von markiertem Text
   Beide Blöcke lassen sich nicht als ein Block mit Komma getrennt notieren
   Markierungsfarbe entspricht der Farbe der h2-Seiten-Überschrift */
::-moz-selection {
	background: #2D4698;
	color: #FFFFFF;
	text-shadow: none;
}
::selection {
	background: #2D4698;
	color: #FFFFFF;
	text-shadow: none;
}


/* Standard-Schriftgröße und -familie */
div, p {
	font-size: 10.0pt;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}
p {
	margin-top: 0px;
	margin-bottom: 5.95pt;
}
p.klein {
	line-height: 100%;
	font-size: 8pt;
}


div.zentriert {
	text-align: center;
}

/* Mindestens für den Menüpunkt "Klassenseiten" nötig. */
span.fett {
	font-weight: bold;
}






/* Formatierung des Seitenkopfes                                                          */
/* Enthält das Sailerbild, die h1-Überschrift, die Zeile darunter und die Hauptnavigation */
#kopf {
	height: auto;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 2px solid #E09550;
	font-size: 12.0pt;
	text-align: left;
}


/* Positionierung des Sailerbildes */
#kopf #logo a img {
	float: left;
	position: relative;
	top: 16px;          /*suboptimal*/
/*	top: 50%;         funktioniert so nicht so ganz
	margin-top: -57px;        */

	border: 2px solid gray;
}


/* Kasten mit h1-Überschrift, Zeile darunter und Hauptnavigation */
#kopf #oben {
	min-height: 150px;
	margin-left: 182px;
	margin-bottom: 8px;
}

/* Die Überschrift "Johann-Michael-Sailer-Schule Essen" oben auf jeder Seite */
#kopf #oben h1 {
	color: black;
	margin: 0px;
	line-height: 100%;
	text-align: left;
	font-size: 16.0pt;
	font-weight: bold;
}

/* Die Hauptnavigation oben auf jeder Seite */
#kopf #oben ul {
	margin: 0;
	padding: 0;
	font-size: 10.0pt;
}
#kopf #oben li {
	float: left;
	margin-top: 2px;
	list-style: none;
	line-height: 20px;
	text-align: center;
	width: 188px;
}

#kopf #oben ul a, #kopf #oben ul a:link, #kopf #oben ul a:visited {
	display: block;
	height: 20px;
	margin-left: 4px;
	padding-left: 4px;
	border-right: 1px solid #FFCC33;
	border-bottom: 1px solid #E09550;
	text-decoration: none;
}


/* Darstellung beim Hovern */
#kopf #oben ul a:hover {
	/* Hintergrundfarbe */
	background-color: #FFEE76;
	color: #006699;
	margin-left: 4px;
	padding-left: 0px;
	/* Balken links */
	border-left: 4px solid #E09550; /* = braun. War vorher #FFA500 = orange */
	border-right: 1px solid #FFCC33;
	border-bottom: 1px solid #E09550;
}


#kopf #oben ul a:link {
	color: #2D4698;
}
#kopf #oben ul a:visited {
	color: gray;
}
#kopf #oben ul a:active {
	padding-left: 0px;
	color: red;
	/* Farbe des Streifens am Rand ist wie beim Hovern und beim aktivierten Link */
	border-left: 4px solid #E09550;
}


/* Den aktivierten Link im Seitenkopf hervorheben */
#kopf #oben ul .hauptnavi_aktiv a, #kopf #oben ul .hauptnavi_aktiv a:link,
#kopf #oben ul .hauptnavi_aktiv a:visited, #kopf #oben ul .hauptnavi_aktiv a:hover {
	/* Streifen an der linken Seite des aktiven Links */
	border-left: 4px solid #E09550;    /*braun*/
	padding-left: 0px; /* Ohne das steht der Link zu weit rechts. */
}

/* Hintergrundfarbe und Textfarbe des aktivierten Menüpunktes festlegen */
#kopf #oben ul .hauptnavi_aktiv a {
	/* Hintergrundfarbe: Orange wie beim Hovern */
	background-color: #FFEE76;
	/* Textfarbe: Rot */
	color: red;
}


/* Leerer Kasten ganz unten im Kopf; wichtig ist die Deklaration "clear" */
#kopf #trenner {
	clear: left;
	line-height: 1%;
}
#kopf #trenner span {
	clear: left;
}




/* Kasten links mit den Links */
#links {
	position: absolute;
	width: 160px;
	height: auto;
	min-height: 415px;
	background-color: #eeeeee;
	border: 1px solid #999999;
	-moz-border-radius: 10px; /* runde Ecken in Firefox; border-radius wird ab Version 4 unterstützt */
	border-radius: 10px; /* IE ab Version 9, Firefox ab Version 4 */
	padding: 6px;
	margin-top: 6px;
	/*margin-right: 12px; mit position: absolute wirkungslos; mit float: left wohl auch? */
	margin-bottom: 10px;
	text-align: left;
}

/* Überschrift im Kasten Links */
#links #titel {
	font-size: 12.0pt;
	font-family: Arial, sans-serif;
	margin: 0px;
	padding: 0px;
}
#links #titel a {
	color: black;
	text-decoration: none;
}
#links #titel a:hover {
	color: black;
	text-decoration: underline;
}


/* Keine Listensymbole anzeigen */
#links ul {
	list-style-type: none;
}

/* Links auf der ersten Ebene */
#links ul .links, #links ul .links_aktiv, #links ul .links_aktiv_sub {
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: -40px;
}

#links ul .links_aktiv, #links ul .links_aktiv_sub {
	border: 0px;
	padding-top: 3px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px; /* damit der Text ohne Link drumherum rechts nicht zu spät umbricht.
			       Der Text würde sonst "hüpfen", wenn er wechselt zwischen
			       verlinkt und nicht verlinkt. */

}

/* #links ul .links_aktiv erfasst das aktive Element auf Ebene 1,
   WENN es KEINE Unterelemente hat.
   Die Angabe padding-bottom: 4px; ist für den richtigen Abstand
   zum darunterfolgenden Elemente auf Ebene 1 nötig,
   weil padding-bottom: 4px; sonst durch den enthaltenen Link erzeugt wird
   (wenn die Seite aktiv ist, ist der aber nicht da).

   Hat die aktive Seite auf Ebene 1 dagegen Unterseiten, dann erzeugt
   die letzte Unterseite schon den Abstand zum folgenden Element auf Ebene 1.
   Der obere li-Tag von Ebene 1 darf daher KEINEN zusätzlichen Abstand
   nach unten mehr hinzufügen. */
#links ul .links_aktiv_sub {
	padding-bottom: 0px;
}



/* Links auf der zweiten Ebene */
/* Genau wie Ebene 1, nur anders eingerückt */
#links ul .links_ebene2, #links ul .links_ebene2_aktiv {
	border: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: -20px;
}

/* Genau wie Ebene 1 */
#links ul .links_ebene2_aktiv {
	border: 0px;
	padding-top: 3px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px; /* damit der Text nicht zu spät umbricht. */
}


/* Wenn der Oberpunkt aktiv ist,
   ist der folgende, drin enthaltene Unterpunkt
   zu weit eingerückt */
#links ul .links_aktiv_sub ul {
	margin-left: -6px;
	margin-right: -6px;      /* Innenabstand rechts etwas vergrößern; so reicht der Kasten so weit
	                            nach rechts, wie wenn der Oberpunkt nicht aktiv wäre */
	padding-top: 4px;
}




#links ul a:link, #links ul a:visited, #links ul a:active {
	display: block;
	width: 92%;
	border: 0px;
	padding-top: 3px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px;
	font-size: 10.0pt;
	text-decoration: none;
}



#links ul a:visited {
	color: #0000CD; /*mediumblue*/
}



#links ul a:hover {
	display: block;
	width: 92%;
	background-color: #d3d3d3; /*lightgray*/
	color: #2D4698;
	border: 1px solid gray;
	padding-top: 2px;
	padding-bottom: 3px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 10px;
	font-size: 10.0pt;
	text-decoration: none;
}


/* Die Kästen um Links auf der zweiten Ebene gehen
   beim Drüberfahren mit der Maus ein bisschen zu weit nach rechts
   (= sind ein bisschen zu breit). */
#links .links_ebene2 a:hover {
	width: 91%;
}










/* Kasten mit dem Seiteninhalt */
#inhalt {
	margin-left: 180px;
	padding-left: 6px;
	min-height: 430px;
	height: auto;
	line-height: 135%;
	font: 10.0pt Arial, Helvetica, Verdana, sans-serif;
	text-align: justify;
}



/* Überschriften im Inhaltsbereich stylen (verwendet werden hier h2 bis h4) */
#inhalt h2, #inhalt h3, #inhalt h4 {
	color: #2D4698;
	line-height: 135%;
	font-family: Georgia, "Times New Roman", serif;
}
/* Seitenüberschrift */
#inhalt h2 {
	margin-top: 16px;
	font-size: 24.0pt;
	text-align: center;
}
/* Überschrift der einzelnen Inhaltselemente */
#inhalt h3 {
	margin-top: 10px;
	font-size: 12.0pt;
	text-align: left;
}
#inhalt h4 {
	margin-top: 10px;
}



/* Inhaltstext soll einen größeren Zeilenabstand haben.
/* div sicherheitshalber hinzugefügt (Einrückungen etc). */
#inhalt p, #inhalt div {
	line-height: 135%;
}



/* margin-left für Listen noch anpassen; beträgt als Standard etwa 40px.
   Um nicht das Menü Links zu zerstören #inhalt vorschalten!
   Achtung: Hier einen Wert z.B. mit margin-left zu setzen, gibt diese Margin auch 
   Bildblöcken auf der Seite, so dass sie falsch ("verrückt") dargestellt werden! */
#inhalt ul, #inhalt ol {
	line-height: 135%;
	text-align: justify;
}



/* Stehen in einer Tabellenzelle nur wenige Worte (etwa zwei) und ist die Zelle eher schmal,
   so entsteht ein unschöner Leerraum in der Mitte(!) der Zelle, wenn hier Blocksatz verwendet würde.
   Deshalb linksbündig. */
#inhalt td {
	font-size: 10.0pt;
	text-align: left;
}



#inhalt table {
	margin-right: auto;    /* Tabelle auf Seite zentrieren */
	margin-left: auto;     /* s.o.                         */
	border-collapse: collapse;  /* Ohne würden aneinanderliegende Rahmen nebeneinander dargestellt,
	                               was häßlich (weil zu dick) aussieht */
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;   /*1px*/
	border-left-width: 0px;     /*1px*/
/*	border-style: dotted;
	border-color: black;*/
	/*text-align: left;*/
}


#inhalt td, #inhalt th {
	padding-left: 4px;
	padding-right: 4px;
	border-top-width: 0px;     /*1px*/
	border-right-width: 0px;   /*1px*/
	border-bottom-width: 0px;
	border-left-width: 0px;
/*	border-style: dotted;
	border-color: black;*/
	vertical-align: top;
}



/* Format normaler Textelemente (nicht "Text mit Bild").
   Eine möglichst große Breite (100%) hilft nicht, denn ein Bild, das im RTE eingefügt wurde
   und positioniert ist, wird gefloatet, so dass es außerhalb des normalen Textflusses steht.
   Das zerstört das Aussehen der Seite, wenn der Text kürzer als das Bild ist, denn folgende Elemente
   werden dann fälschlicherweise neben dem Bild dargestellt.
   Das ist auch mit dem Stylesheet aus TYPO3 4.4 noch ein Problem,
   siehe http://forge.typo3.org/issues/23154 */
#inhalt .inhaltselement {  /* Wrap um jedes Inhaltselement; Original csc-default; noch nicht so benannt,
                             sondern den Klassennamen ersatzlos entfernt */
	/*clear:both;*/
}



/* Bei "unten zentriert" oder "oben zentriert" ist der Text ohne das hier
   standardmäßig nicht mehr im Blocksatz, sondern linksbündig.
   (Die Angabe kommt aus dem Standard-Stylesheet von TYPO3:
   div.csc-textpic-center div.csc-textpic-text {text-align: left;} */
#inhalt .csc-textpic-text p, #inhalt .csc-textpic-text div {
	text-align: justify;
}



/* Seit TYPO3 4.2 werden die deutschen Bezeichnungen
   zur Ausrichtung von Text im RTE benutzt.
   Muss nach allen anderen text-align-Formatierungen für #inhalt stehen!
   Die alten Angaben (align-xxx) zur richtigen Anzeige alter Einträge behalten!
   Die Angaben mit p.xxx sind nötig, weil nur sie der Formatierung durch #inhalt .bilder p (s.o.) vorgehen.
   Sind die ohne p. dann überhaupt noch nötig? Nicht, wenn wirklich _jede_ Zeile in p-Tags gewrappt wird
   und wenn alle Browser das können (alte Versionen des IE verstehen das).
   Eleganterer Weg als diese ellenlange Liste? */

/* linksbündig */
#inhalt .align-left, #inhalt p.align-left, #inhalt .align-left p, #inhalt .linksbuendig, #inhalt p.linksbuendig, #inhalt .linksbuendig p {
	text-align: left;
}

/* zentriert */
						/* Der letzte Teil mit dem hinterhergezogenen p (#inhalt .zentriert p) ist nötig,
						   damit in Tabellen mit p-Tags in den Zellen die Formatierung übernommen wird. */
#inhalt .align-center, #inhalt p.align-center, #inhalt .align-center p, #inhalt .zentriert, #inhalt p.zentriert, #inhalt .zentriert p {
	text-align: center;
}

/* rechtsbündig */
#inhalt .align-right, #inhalt p.align-right, #inhalt .align-right p, #inhalt .rechtsbuendig, #inhalt p.rechtsbuendig, #inhalt .rechtsbuendig p {
	text-align: right;
}

/* Blocksatz */
#inhalt .align-justify, #inhalt p.align-justify, #inhalt .align-justify p, #inhalt .blocksatz, #inhalt p.blocksatz, #inhalt .blocksatz p {
	text-align: justify;
}


/* Wird seit TYPO3 4.2 für Einzug verwendet. */
#inhalt .eingerueckt, #inhalt p.eingerueckt {
	text-indent: 40px;
	line-height: 135%;
}




/* Inhaltstyp Dateiverweise stylen
   Ist eine Tabelle. Damit die nicht zentriert steht,
   muss sie zunächst linksbündig ausgerichtet werden
   und dann einen kleinen Abstand vom Rand bekommen. */
#inhalt .csc-uploads {
	text-align: left;
	margin-left: 60px;
}

/* Breite für die Zellen mit den Dateinamen. */
#inhalt .csc-uploads-fileName {
	width: 250px;
}




/* Seiten des Login-Formulars stylen */
#inhalt .login form fieldset legend {
	visibility: hidden;
}
#inhalt .login fieldset {
	border-width: 0px;
}
#inhalt .login {
	margin-left: 50px;
	margin-right: 50px;

}
#inhalt .login form {
	margin-left: 20px;
}
#inhalt .login form fieldset div label {
	display: block;
	line-height: 185%;
}
#inhalt .login #anmelden, #inhalt .login #passwort-senden {
	margin-top: 15px;
}


/* Für Fehlermeldungen bei Passwort-Änderung. */
#inhalt .achtung {
	color: red;
	font-weight: bold;
}


#inhalt #abmelden {
	margin-top: 16px;
	text-align: left;
}




/* Größerer Zeilenabstand auf der Suchseite
   margin-top ist gut, wenn die Suchbox unter den Ergebnissen steht. */
#inhalt .suche {
	line-height: 185%;
	margin-top: 30px;
}
#inhalt .suche tr .formular-text p {
	margin-top: 3px;
}
#inhalt .suche .suchformular-abschicken {
	margin-top: 10px;
}

/* Suchtext farblich hervorheben
   Muss hinter den Definitionen für Tabellen stehen,
   denn sonst wird es - für Text in Tabellen - davon überschrieben. */
#inhalt .suchwort {
	color: red;
	font-weight: bold;
}

/* Überschriften der Treffer durch passende Abstände den jeweiligen
   Textauszügen optisch zuordnen und insges. vernünftig aussehen lassen. */
#inhalt .csc-searchResultHeader {
	margin-top: 20px;
	margin-bottom: 2px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12pt;
	font-weight: normal;
}
/* Ohne diese Angabe ist der Zeilenabstand doch nur 100%... */
#inhalt .csc-searchResult {
	line-height: 135%;
}
/* Selbiges für Meldung, dass Treffer (-) */
#inhalt .csc-noSearchResultMsg {
	text-align: center;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: black;
}


/* Die Sitemap etwas einrücken */
#inhalt .sitemap {
	margin-left: 15px;
}
/* Jede Ebene etwas mehr einrücken */
#inhalt .sitemap li {
	margin-left: 10px;
}

/* Keinen Rahmen um das Mailformular anzeigen und den Inhalt etwas nach rechts schieben */
#inhalt .mailformular {
	border-width: 0px;
	margin-left: 50px;
}
/* Zeilenabstand für Text im Mailformular */
#inhalt .mailformular .mailformular-text, #inhalt .mailformular .mailformular-feld label {
	line-height: 185%;
}
/* Checkbox und Text auf einer Höhe */
#inhalt .mailformular .mailformular-check {
	vertical-align: sub;
}
/* Button "Formular senden" */
#inhalt .mailformular .mailformular-abschicken {
	margin-top: 15px;
	margin-left: 50px;
}


/* nach-oben-Links formatieren */
#inhalt .nach_oben {
	text-align: right;
}
#inhalt .nach_oben img {
	border: 0px solid black;
	width: 21px;
	height: 16px;
	background-image: url('nach_oben1.gif');
}
#inhalt .nach_oben a:hover img {
	background-image: url('nach_oben2.gif');
}



/* Frontend-Editing:
   Kasten oberhalb der Überschrift (im Frontend-Editing).
   Er enthält die "Knöpfe" zum Aufrufen des BE und zum Abmelden. */
#inhalt #be-user-links {
	line-height: 100%;

	/* Außenabstände */
	margin-left: 0px;
	margin-right: 0px;

	/* Abstand zur braunen Linie oben */
	margin-top: 11px;
	/* Abstand zur Überschrift verringern */
	margin-bottom: -5px;

	border: 1px solid black;
	background-color: #E09550;

	/* Innenabstände */
	padding: 0;

	font-family: Verdana, sans-serif;
	font-size: 8pt;

	/* Den Inhalt des Kastens (die beiden Knöpfe) zentrieren */
	text-align: center;
}

/* "Knöpfe" = Links in den Span-Elementen (die sich wiederum im oben gestylten Kasten befinden) */
#inhalt .be-user-links-text a {
	/* Größe des anklickbaren Bereichs vergrößern.
	   Es muss jeweils der Innenabstand des Links vergrößert werden,
	   damit auch die ganze "Schaltfläche" klickbar bleibt.  */
	padding-top: 4px;
	padding-bottom: 4px;

	padding-left: 14px;
	padding-right: 14px;

	/* Muss für das TYPO3-Logo angepasst sein */
	line-height: 35px;

	border: 1px solid gray;
	background-color: white;

	/* Ändert im FF nur(!) die seitlichen Abstände der Knöpfe zueinander */
	margin: 10px;

	color: black;
	text-decoration: none;

}
#inhalt #be-user-links a img {
	line-height: 100%;
	border: none;

	/* Das TYPO3-Logo soll von der Höhe her genau im weißen Kasten stehen. */
	vertical-align: -55%;
}

#inhalt .be-user-links-text {
	line-height: 25px;

	/* Außenabstände der Buttons voneinander */
	margin-left: 25px;
	margin-right: 25px;

	/* Beschriftung soll mittig sein */
	text-align: center;
}

/* Angaben für die Frontend-Edit-Panels.
   Werden benutzt für die Panels zum Editieren der Seite und
   für die Panels zum Editieren der einzelnen Inhaltselemente.
   Auch für das Panel zum Einfügen eines neuen Inhaltselements,
   aber nur mit Änderungen (siehe unten).
   Nicht aber für den Kasten oberhalb der Überschrift. */
#inhalt .edit-panel-page, #inhalt .edit-panel-new-ce, #inhalt .edit-panel {
	border: 1px solid orange;

	background-color: #FFCC33;

	/* Innenabstand etwas erhöhen */
	padding-top: 15px;
	padding-bottom: 15px;

	/* Außenabstände */
	margin-left: 140px;
	margin-right: 140px;
	-moz-border-radius: 18px; /* runde Ecken in Firefox; border-radius wird ab Version 4 unterstützt */
	border-radius: 18px; /* IE ab Version 9, Firefox ab Version 4 */

	/* Abstand mit dem Inhaltselement oberhalb.
	   Wichtig, damit der Link "nach oben" nicht darin hängt. */
	margin-top: 5px;
	/* Abstand nach dem Panel */
	margin-bottom: 5px;

	/* Den Inhalt des Kastens (also das Panel an sich) zentrieren. */
	text-align: center;

}

/* Seiten-Edit-Panel */
#inhalt .edit-panel-page {
	margin-bottom: 25px;
}

/* Angaben für das Edit-Panel zum Einfügen eines neuen Datensatzes */
#inhalt .edit-panel-new-ce {
	/* Näher an die Überschrift */
	margin-top: -10px;
	/* Weiter vom ersten Seiteninhalt entfernen */
	margin-bottom: 25px;
}

#inhalt .edit-panel-new-ce-text {
	font-size: 10pt;
}





/* Layout des Seitenfußes festlegen */
#fuss {
	width: 100%;
	color: #666666;
	margin-top: 6px;
	margin-bottom: 11px;
	padding-top: 7px;
	border-top: 2px solid gray;
	font: 10.0pt Arial, Helvetica, Verdana, sans-serif;
	text-align: right;
}