/*
 * Fließtext:                   #000000 Schwarz
 * Hovertext Navi:              #CC0000 Rot
 * Text Navi/Links/Mail/Rahmen: #000099 Blau
 * Grau:                        #808080 Grau
 * Hellgrau:                    #C0C0C0 Hellgrau/Silver
 * Korpus:                      #FAFAFD Weiß
 * Weiß:                        #FFFFFF Weiß
 */

/* --------- Defaults --------- */
body
{
    min-height: 740px;
    width: 1024px; /* ggf. #NoWrapWrapper anpassen  */
	background-color: #C0C0C0;
   	margin: auto;  /* Im Browser-Fenster zentrieren. Geht beim IE nur,
                    * wenn er nicht im "Quirks"-Mode ist! */
}

body, .Normal, .NormalDisabled
{
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}

h1, h2, h3, h4, h5, h6
{
	font-family: Arial;
	color: #000000;
}

a, a:link, a:visited
{
    color: #000099
}

a:hover
{
    color: #CC0000;
}

/* ----------------------------------------------------------------------- */

#SkinBox
{
    background-color: #E2E2E2;
}

/* --------- Header --------- */

#HeaderBox
{
    height: 108px; /* sonst macht IE 3 Pixel zwischen HeaderBox und TopNaviWrapper */
    background-color: #FFFFFF;
}

/* --------- Hauptnavigation --------- */

#TopNaviWrapper
{
    /* Den braucht man wegen des Hintergrunds, weil die Tabs in den Header   */
    /* ragen. Außerdem wird gleich noch der obere Rand des Korpus (runde     */
    /* Ecken, Schatten) in das Hintergrundbild übernommen. Damit kann man    */
    /* im ContentWrapper mit einem Tiled Background (repeat-y) arbeiten.     */
    /* Der Fuß des Korpus (runde Ecken, Schatten) wird als Hintergrund an    */
    /* den Kopf des Footers gesetzt. Dadurch wird der Korpus vertikal fluid. */
    float: left; /* Damit umschließt der Wrapper die inneren gefloateten
                    Elemente, sonst würden diese sich ihm entziehen und
                    damit wäre das Hintergrundbild nicht sichtbar. */
    width: 1015px; /* Maximale Breite auch wieder wegen des Hintergrundbildes.
                      Das Floaten würde sonst dafür sorgen, dass der Wrapper
                      nur so breit wie nötig wird. */
	background: url(/Portals/spgMaier/skins/spgMaier/images/topnavi_back_sidetab.png) no-repeat bottom left;
	                        /* Box "wächst" bei einer Vergrößerung nach oben.*/
	background-color: #FFFFFF; /* Falls die Box durch Text-Skalierung größer
                                 wird, kommt der Hintergrund zum Vorschein.
                                 Gleiche Farbe wie unterer Rand des Headers. */
	padding-left: 9px;   /* Abstand der Tabs vom linken Rand */
	padding-bottom: 7px; /* Tabs über den oberen Teil des Korpus lüpfen. */
}

ul#MainMenu
{
	font-weight: bold;
	padding: 0;
	margin: 0;
	float: left;
}

ul#MainMenu li
{
	float: left;
	list-style-type: none;
	background: url(/Portals/spgMaier/skins/spgMaier/images/tab_sprite_left.png) no-repeat top left;
	padding: 11px 0 2px 7px;
	margin-right: 2px; /* Lücke zwischen Tabs */
}

ul#MainMenu a
{
	text-decoration: none; /* Links ohne irgendwelchen Schnickschnack anzeigen. */
	outline-style: none;   /* Sonst zeichnet Firefox beim Click auf einen Link eine Box. Sau. */
	background: url(/Portals/spgMaier/skins/spgMaier/images/tab_sprite_right.png) no-repeat top right;
	padding: 11px 16px 2px 9px;
}

/*
 * Da die Navigation gefloated ist, überdeckt sie den oberen Rand des Contents -
 * und zwar um genau 1 Pixel. Dadurch "verschwindet" der 1-Pixel Rahmen.
 * Wenn ein Tab aktiv wird, dann wird er um ein Pixel mehr gelüpft (padding-bottom)
 * als die anderen. Dadurch wird die gesamte Navi-Box größer. Da das Padding des
 * aktiven Tabs ein Pixel mehr ist, hängen alle anderen ein Pixel höher (der
 * Container-Hintergrund ist transparent) und nur der untere Rand des aktiven
 * Tabs überdeckt mit seinem Hintergrundbild den oberen Rahmen des Contents.
 */
ul#MainMenu li:hover,
ul#MainMenu .CssMenuBreadCrumb
{
	background-position: 0% -75px;  /* zweites Bild im Sprite selektieren */
	padding-bottom: 3px;
}

ul#MainMenu a:hover,
ul#MainMenu .CssMenuBreadCrumb a
{
	background-position: 100% -75px; /* zweites Bild im Sprite selektieren */
	color: #CC0000; /* Textfarbe */
	padding-bottom: 3px;
}

/* Wenn _kein_ Tab aktiv ist, _alle_ lüpfen, damit der obere Content-Rahmen
 * sichtbar wird.
 */
ul#MainMenu.CssMenuNoBreadCrumbs 
{
    padding-bottom: 1px;
}

ul#MainMenu.CssMenuNoBreadCrumbs li:hover
{
	background-position: 0% -75px;  /* zweites Bild im Sprite selektieren */
	padding-bottom: 2px;
}

ul#MainMenu.CssMenuNoBreadCrumbs a:hover
{
	background-position: 100% -75px; /* zweites Bild im Sprite selektieren */
	color: #CC0000; /* Textfarbe */
	padding-bottom: 2px;
}

ul#MainMenu li ul
{
	display: none;
}

/* --------- Unternavigation --------- */

#UNavi
{
    clear: both;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	margin-top: 20px;
}

#UNavi li
{
	list-style-type: none;
}

#UNavi a
{
	display: block;
	text-decoration: none;
	white-space: nowrap;
	padding: 0px 10px;
	border-bottom: solid 1px #C0C0C0;
	margin-bottom: 2px;
}

#UNavi a:hover,
#UNavi .CssMenuBreadCrumb > a
{
	font-weight: bold;
	color: #CC0000;
}

#UNavi li ul
{
    margin-left: 1em;
    padding-left: 0px;
}

/* --------- Login --------- */

#dnn_dnnLOGIN_cmdLogin
{
	float: right;
	color: #808080
}

/* --------- Breadcrumbs --------- */

#BreadCrumbsDiv, #BreadCrumbsDiv .breadCrumbLink
{
	color: #A9AAA2;
}

/* --------- Content --------- */

#ContentWrapper
{
    clear: both;
     /* H: 547px; (P5 + korpus_top8 + 500 + korpus_bottom16 + P5 + ?13) */
    min-height: 500px;
    line-height: 1.6;
    background: url(/Portals/spgMaier/skins/spgMaier/images/korpus_body.png) repeat-y top left;
}

#NoWrapWrapper
{
    /* Dieser Wrapper soll verhindern, dass die rechte Content-Spalte   */
    /* im Edit-Modus nach unten rutscht (wg. float). Das passiert, weil */
    /* das CMS im Edit-Modus die eine oder andere Spalte um ein paar    */
    /* Pixel verbreitert. Sau.                                          */
    width: 1200px; /* Lieber nicht zu breit, weil ich nicht weiß, wie   */
                   /* sich das intern auf den Speicherverbrauch aus-    */
                   /* wirkt.                                            */
}
/* Statt zu floaten, könnte man wohl auch mit position: absolute     */
/* arbeiten. Ob man dann das ContentClear noch bräuchte? Keine Zeit. */
/*
#dnn_LeftPane
*/
#LeftWrapper
{
	float: left;
	overflow: hidden;
    /* B: 194px (M6, 5 + 184 + 5 + M5) */
	width: 179px;
	background-color: transparent; /*green;*/
	text-indent: 0px;
	padding: 25px 5px 0px 5px;
	margin-left: 6px;
	margin-right: 5px;
}

#dnn_ContentPane
{
	float: left;
	overflow: hidden;
    /* B: 587px (20 + 577 + 5, M6) */
	width: 562px;
	background-color: transparent; /*lightyellow;*/
	padding: 0px 20px 0px 5px;
	margin-right: 6px;
}

#dnn_RightPane
{
	float: left;
	overflow: hidden;
    /* B: 231px (5 + 221 + 5) */
	width: 221px;
	background-color: transparent; /*lightgreen;*/
	padding: 0px 5px 0px 5px;
}

#ContentClear
{
	/* Da die gefloateten Spalten nichts mehr zur Größe von ContentWrapper    */
	/* beitragen, wird dieser nicht größer als min-height. Darum kommt ganz   */
	/* ans Ende ein div mit clear: both. Durch das clear: both rutscht es     */
	/* unter die längste Spalte (im konkreten Fall hätte auch ein clear: left */
	/* genügt). ContentWrapper muss dieses Element umschließen, weil es ihm   */
	/* gehört, und ist daher gezwungen, seine Größe anzupassen (->clearfix).  */
	/* Das ist nur ein "Problem" mit Firefox. Beim IE umschließt der Wrapper  */
	/* entgegen dem CSS-Standard auch das größte gefloatete Element.          */
	clear: both;
}
/* --------- Footer --------- */

#Footer
{
	clear: both;
	height: 45px;
	line-height: 1.5;
	text-align: center;
	background: url(/Portals/spgMaier/skins/spgMaier/images/korpus_bottom.png) no-repeat top left;
	color: #666666;
	padding-top: 16px; /* korpus_bottom */
	padding-right: 236px;
}

#Footer a, .footerLink
{
	color: #666666;
	text-decoration: underline;
}

/* --------- Extra-Würste für IE6 erstmal per "Star HTML Hack" --------- */

/*
 * "Erstmal", weil ich noch nicht weiß, wie man dem CMS CCs beibiegen kann.
 */

* html ul#MainMenu a:hover
{
    background-position: top right; /* Kein Hover für IE6, weil der das
                                       nur für <a href=...></a> kann. */
}

* html #dnn_LeftPane
{
	display: inline; /* IE6 Doubled Float Margin Bug */
}

* html #dnn_ContentPane
{
    height: 500px; /* IE6 kennt kein min-height, behandelt height aber
                      genauso wie min-height. */
}

* html #Footer
{
	background-color: #E2E2E2; /* IE6 will hier nicht von SkinBox erben */
}

/* --------- Boxen (Container) --------- */

/* --------- Simple Gallery --------- */

.sgBreadCrumbs
{
  margin-top: 1.5em;
}

.sgRSS,
.pnlCommandBar
{
  display: none;
}

table.album-frame
{
  margin-top: -14px;
  margin-bottom: -14px;
}

.view
{
  margin-bottom: 0.6em;
}