@import "styles.css";

/****************************************/
/****************************************/
/** BROWSER-SPEZIFISCHE FORMATIERUNGEN **/
/****************************************/
/****************************************/

ol { padding-left:19px; }

ul { padding-left:14px; }

#content ul { padding-left:15px;
              list-style-image:url(../images/list-style-image-ff.gif); }

/*****************************************************/
/*****************************************************/
/** STYLESHEET-ANGABEN FÜR DIE SEKTIONEN DER SEITEN **/
/*****************************************************/
/*****************************************************/

/************************************************************/
/* TOP-BEREICH                                              */
/* ======================================================== */
/* TOP_LEFT, TOP_RIGHT:                                     */
/* -------------------------------------------------------- */
/* top_left enthält die Willkommens-Mitteilung, top_right   */
/* die Sprachauswahl.                                       */
/* - WIDTH wird bei top_left auf 52% gesetzt, so dass auf   */
/*   keinen Fall eine Lücke zwischen den beiden top-        */
/*   Bereichen sichtbar werden kann. Bei top_Right wird     */
/*   der Wert auf 49% gesetzt und ergibt zusammen mit 1%    */
/*   padding-right die Seitenhälfte 50%.                    */
/* - HEIGHT ist ein frei-gewählter Wert, auf den aber viele */
/*   andere Elemente bei ihrer Positionierung im top-       */
/*   Abstand Bezug nehmen.                                  */
/************************************************************/
#top_left { position:fixed;
            top:0px;
            left:0px;
            width:52%;
            height:9%;
            padding-left:1%;
            background:#024375;
            vertical-align:middle;
            z-index:6; }

#top_right { position:fixed;
             left:50%;
             top:0px;
             width:49%;
             height:9%;
             padding-right:1%;
             background-color:#024375;
             vertical-align:middle;
             text-align:right;
             z-index:6; }

/************************************************************/
/* LEFT:                                                    */
/* ======================================================== */
/* NAVIGATION_CONTAINER:                                    */
/* -------------------------------------------------------- */
/* navigation-container enthält die Navigations-Ebene.      */
/* - WIDTH ist 150px, frei gewählter Wert.                  */
/* - HEIGHT: ergibt zusammen mit top 100%.                  */
/* - LEFT ist 87px und ergibt sich aus dem Abstand zwischen */
/*   linkem Rand und vertical_bar_large plus 22px zur       */
/*   Einrückung der Navigation. 22px ist frei gewählt.      */
/* -------------------------------------------------------- */
/* NAVIGATION:                                              */
/* -------------------------------------------------------- */
/* navigation enthält die eigentliche Navigation.           */
/* - TOP von 142px zur Positionierung der Navigation direkt */
/*   unter horizontal_bar, ausgehend vom Beginn von         */
/*   navigation_container, also 9%. Wert ergibt sich aus    */
/*   den Segmenten von middle_logo: 109 + 33 = 142.         */
/* -------------------------------------------------------- */
/* VERTICAL_BAR_LARGE:                                      */
/* -------------------------------------------------------- */
/* vertical_bar_large ist der große vertikale Balken zur    */
/* Dekoration.                                              */
/* - TOP ist 9%, Beginn also direkt unter dem top-Bereich.  */
/* - HEIGHT ist 91%, erstreckt sich bis zum Seitenende.     */
/* - LEFT ist 65px und bezeichnet Abstand zum linken Rand.  */
/*   Wert ist frei gewählt.                                 */
/* - WIDTH ist 85px, ist frei gewählt.                      */
/* -------------------------------------------------------- */
/* VERTICAL_BAR_SMALL:                                      */
/* -------------------------------------------------------- */
/* vertical_bar_small ist der schmale Balken zur            */
/* Dekoration.                                              */
/* - TOP von 20% ist frei gewählt, bezeichnet Abstand       */
/*   zwischen top-Bereich und vertical_bar_small.           */
/* - WIDTH von 20px ist frei gewählt.                       */
/* - HEIGHT von 80% ergibt zusammen mit top 100%.           */
/* - LEFT von 130px ergibt sich aus dem Abstand zum linken  */
/*   Rand (65px) und der Differenz zwischen der Breite von  */
/*   vertical_bar_large und vertical_bar_small, also        */
/*   85px - 20 px = 65px.                                   */
/* --> vertical_bar_small endet rechts also genau dort, wo  */
/*     auch vertical_bar_large endet.                       */
/************************************************************/
#navigation_container { position:fixed;
                        top:9%;
                        left:87px;
                        width:150px;
                        height:91%;
                        background-color:transparent;
                        z-index:12; }

#navigation { position:absolute;
              top:142px;
              left:0px;
              width:150px;
              background-color:#f3f7f9;
              z-index:12; }

#vertical_bar_large { position:fixed;
                      left:65px;
                      top:9%;
                      width:85px;
                      height:91%;
                      background-color:#d6e2ea;
                      z-index:10; }

#vertical_bar_small { position:fixed;
                      left:130px;
                      top:20%;
                      width:20px;
                      height:80%;
                      background-color:#024375;
                      z-index:12; }

/************************************************************/
/* MIDDLE:                                                  */
/* ======================================================== */
/* MIDDLE_CONTAINER:                                        */
/* -------------------------------------------------------- */
/* middle_container befindet sich zwischen der Navigation   */
/* und dem rechten Logo sowie oberhalb des Contents. Er     */
/* enthält die Bereiche middle_bar, middle_logo,            */
/* middle_headline und die zwei Hilfs-Bereiche              */
/* middle_helper_top und middle_helper_bottom.              */
/* - LEFT ist 237px und ergibt sich aus dem Abstand vom     */
/*   linken Rand von navigation_container (87px) sowie der  */
/*   Breite von navigation_container (150px). Damit beginnt */
/*   der middle_container-Bereich auf gleicher Höhe mit dem */
/*   Ende von navigation_container.                         */
/* - RIGHT ist 233px und ergibt sich aus der Summe der      */
/*   Breite (138px) und dem Abstand von right_logo zum      */
/*   rechten Rand (65px) sowie dem Wert, den                */
/*   right_logo_text über right_logo_container hinausragt.  */
/*   Damit endet der middle_container- 30px vor dem Beginn  */
/*   von right_logo.                                        */
/* - HEIGHT ist 142px und ergibt sich aus der Höhe von      */
/*   middle_logo minus dessen oberstem (21px) und unterstem */
/*   Segment (18px), also 181 - 21 - 18 = 142.              */
/* -------------------------------------------------------- */
/* MIDDLE_BAR:                                              */
/* -------------------------------------------------------- */
/* middle_bar ist der horizontale Balken zur Dekoration,    */
/* der die Überschrift enthält.                             */
/* - LEFT ist -172px und ergibt sich, indem der Abstand von */
/*   middle_container vom linken Rand um 65px verringert    */
/*   wird, also dem Abstand von vertical_bar_large zum      */
/*   linken Rand. Damit beginnt middle_bar auf gleicher     */
/*   Höhe wie vertical_bar_large.                           */
/* - TOP ist 109px und entspricht der Höhe des zweiten      */
/*   Segments von middle_logo.                              */
/* - HEIGHT ist 33px und entspricht der Höhe des dritten    */
/*   Segments von middle_logo.                              */
/* - RIGHT ist 0px, wodurch sich middle_bar bis zum rechten */
/*   Ende von middle_container streckt.                     */
/* -------------------------------------------------------- */
/* MIDDLE_LOGO:                                             */
/* -------------------------------------------------------- */
/* middle_logo enthält das kleine Logo, das über den        */
/* middle_container hinausragt.                             */
/* - LEFT ist 70px und für den Abstand zur Navigation frei  */
/*   gewählt.                                               */
/* - TOP ist -21px und entspricht der Höhe des ersten       */
/*   Segments von middle_logo. Dadurch ragt das Logo in den */
/*   top_left-Bereich hinein.                               */
/* - WIDTH ist 227px und entspricht der Breite des Logos.   */
/* - HEIGHT ist 181px und entspricht der Höhe des Logos.    */
/* ==> Die Logo-Grafik teilt sich in folgende Segmente:     */
/*   >  21px, die in den top_left-Bereich hineinragen.      */
/*   > 109px bis zum horizontal_bar.                        */
/*   >  33px entsprechend der Höhe von horizontal_bar.      */
/*   >  18px, die in den content-Bereich hineinragen.       */
/*   = 181px Gesamthöhe.                                    */
/* -------------------------------------------------------- */
/* MIDDLE_HEADLINE:                                         */
/* -------------------------------------------------------- */
/* middle_headline enthält die Überschrift.                 */
/* - LEFT ist 70px und entspricht dem Abstand zwischen      */
/*   middle_logo und navigation_container.                  */
/* - TOP ist 109px und entspricht der Höhe des zweiten      */
/*   Segments von middle_logo. Damit liegt der Beginn von   */
/*   middle_headline auf der Höhe von middle_bar.           */
/* - RIGHT ist 20px und bezeichnet den Abstand zur          */
/*   right_logo_text, ist frei gewählt. Dadurch soll        */
/*   verhindert werden, dass right_logo_text von der        */
/*   Überschrift überschrieben wird.                        */
/* - HEIGHT ist 33px und entspricht der Höhe von            */
/*   middle_bar.                                            */
/* -------------------------------------------------------- */
/* MIDDLE_HELPER_TOP:                                       */
/* -------------------------------------------------------- */
/* middle_helper_top ist notwendig, damit der Inhalt von    */
/* content beim Scrollen nicht über middle_headline         */
/* sichtbar wird. middle_helper_top befindet sich also      */
/* zwischen dem top-Bereich und middle_bar.                 */
/* - LEFT ist 38px und ergibt sich aus der Differenz        */
/*   zwischen dem Abstand von content_background vom linken */
/*   Rand und dem Abstand von middle_container vom linken   */
/*   Rand, also 275 - 237 = 38px.                           */
/* - TOP ist 0px, so dass middle_helper_top direkt nach dem */
/*   top-Bereich beginnt.                                   */
/* - HEIGHT ist 109px und entspricht der Höhe des dritten   */
/*   Segments von middle_logo. Dadurch reicht               */
/*   middle_helper_top exakt bis zu middle_bar.             */
/* - RIGHT ist -30px und entspricht dem Wert, den           */
/*   right_logo_text über right_container hinausragt.       */
/*   Dadurch reicht middle_helper_top genau bis zum         */
/*   Beginn von right_container.                            */
/* -------------------------------------------------------- */
/* MIDDLE_HELPER_BOTTOM:                                    */
/* -------------------------------------------------------- */
/* middle_helper_bottom ist notwendig, damit der Inhalt von */
/* content beim Scrollen einheitlich darunter verschwindet. */
/* middle_helper_bottom ragt dabei ebensoviel wie           */
/* middle_logo über middle_container hinaus, beginnt in der */
/* Horizontalen schon vor middle_logo.                      */
/* - LEFT ist 38px und ergibt sich aus der Differenz        */
/*   zwischen dem Abstand von content_background vom linken */
/*   Rand und dem Abstand von middle_container vom linken   */
/*   Rand, also 275 - 237 = 38px.                           */
/* - TOP ist 142px und entspricht der Summe der Höhe des    */
/*   zweiten und dritten Segements von middle_logo.         */
/* - HEIGHT ist 18px und entspricht der Höhe des vierten    */
/*   Segments von middle_logo. Dadurch befindet sich        */
/*   middle_helper_bottom direkt unter middle_bar.          */
/* - RIGHT ist -30px und entspricht dem Wert, den           */
/*   right_logo_text über right_container hinausragt.       */
/*   Dadurch reicht middle_helper_bottom genau bis zum      */
/*   Beginn von right_container.                            */
/************************************************************/
#middle_container { position:fixed;
                    left:237px;
                    right:233px;
                    top:9%;
                    height:142px;
                    overflow:visible;
                    background-color:white;
                    z-index:11; }

#middle_bar { position:absolute;
              left:-172px;
              top:109px;
              right:0px;
              height:33px;
              background-color:#abc7da;
              z-index:11; }

#middle_logo { position:absolute;
               left:70px;
               top:-21px;
               width:227px;
               height:181px;
               background-color:transparent;
               overflow:visible;
               z-index:12; }

#middle_headline { position:absolute;
                   left:70px;
                   top:109px;
                   right:20px;
                   height:33px;
                   background-color:transparent;
                   z-index:13; }

#middle_helper_top { position:absolute;
                     left:38px;
                     top:0px;
                     right:-30px;
                     height:109px;
                     background-color:white; }

#middle_helper_bottom { position:absolute;
                        left:38px;
                        top:142px;
                        right:-30px;
                        height:18px;
                        background-color:#f6f9fb; }

/************************************************************/
/* CONTENT:                                                 */
/* ======================================================== */
/* CONTENT_CONTAINER:                                       */
/* -------------------------------------------------------- */
/* content_container befindet sich zwischen den Bereichen   */
/* top und bottom. Er enthält content_background und den    */
/* eigentlichen content.                                    */
/* ==> content_container muss bereits unter dem top-Bereich */
/*     beginnen, da die Höhe von top_left bzw. top_right in */
/*     Pixeln nicht bekannt ist und deshalb eine top-       */
/*     Abstandsangabe in Pixeln für content_container nicht */
/*     möglich ist.                                         */
/* - LEFT ist 65px und entspricht dem linken Abstand von    */
/*   navigation_container vom linken Rand.                  */
/* ==> Fraglich, ob content_container so weit nach links    */
/*     reichen muss?                                          <==
/* - RIGHT ist 203px und ergibt sich aus der Summe der      */
/*   Breite (138px) und dem Abstand von right_logo zum      */
/*   rechten Rand (65px). Damit endet content_container auf */
/*   gleicher Höhe nit dem Beginn von right_logo.           */
/* - BOTTOM ist 0px, so dass content_background bis zum     */
/*   Seitenende reichen kann.                               */
/* - TOP ist 9% und ergibt zusammen mit height 100%.        */
/* -------------------------------------------------------- */
/* CONTENT_BACKGROUND:                                      */
/* -------------------------------------------------------- */
/* content_background liefert den Hintergrund von content.  */
/* ==> content_background übernimmt bei der Positionierung  */
/*     nicht die Werte des Eltern-Elements                  */
/*     content_container!                                   */
/* ==> Liegt das daran, dass das Eltern-Element mit           <==
/*     position:absolute positioniert ist, position:fixed     <==
/*     also innerhalb einem absolut-positioinerten Bereich    <==
/*     ist? Wäre es umgekehrt, wäre kein Scrollen möglich!    <==
/* - LEFT ist 275px und setzt sich aus dem linken Abstand   */
/*   von middle_container vom linken Rand (237px) und einem */
/*   frei gewählten Wert für den Abstand zwischen           */
/*   navigation_container (middle_container beginnt, wo     */
/*   navigation_container endet) von 38px zusammen.         */
/* - TOP ist 142px und setzt sich aus dem zweiten und       */
/*   dritten Segment von middle_logo zusammen.              */
/* ==> content_background beginnt damit allerdings nicht      <==
/*     wie eigentlich gewünscht direkt unter middle_bar,      <==
/*     sondern darüber.                                       <==
/* - RIGHT ist 203px und ergibt sich aus der Summe der      */
/*   Breite (138px) und dem Abstand von right_logo zum      */
/*   rechten Rand (65px). Damit endet content_container auf */
/*   gleicher Höhe mit dem Beginn von right_logo.           */
/* -------------------------------------------------------- */
/* CONTENT:                                                 */
/* -------------------------------------------------------- */
/* content beinhaltet den eigentlichen Seiteninhalt. Es     */
/* bezieht sich in seiner Positionierung auf die Werte des  */
/* Eltern-Elements content_container.                       */
/* - LEFT ist 242px und setzt sich zusammen aus dem Abstand */
/*   von middle_container vom linken Rand (237px) und dem   */
/*   Abstand zwischen navigation_container und middle_logo  */
/*   (70px). Davon ist der Abstand von content_container    */
/*   vom linken Rand abzuziehen (65px). Insgesamt also:     */
/*   237 + 70 - 65 = 242px. Damit beginnt content auf       */
/*   gleicher Höhe wie middle_image.                        */
/* - RIGHT ist 30px für den Abstand zwischen content und    */
/*   right_logo. Entspricht dem Wert, den right_logo_text   */
/*   über right_container hinausragt.                       */
/* - TOP ist 180px und setzt sich zusammen aus dem zweiten, */
/*   dritten und vierten Segment von middle_logo sowie      */
/*   einem frei gewählten Wert (20px) für den Abstand       */
/*   zwischen middle_logo und content.                      */
/* - PADDING-BOTTOM ist 40px, so dass beim Scrollen der     */
/*   gesamte Inhalt von content sichtbar wird.              */
/************************************************************/
#content_container { position:absolute;
                     left:65px;
                     top:9%;
                     bottom:30px;
                     right:203px;
                     height:91%;
                     background:transparent;
                     z-index:5; }

#content_background { position:fixed;
                      left:275px;
                      top:142px;
                      right:203px;
                      height:100%;
                      background-color:#f6f9fb; }

#content { position:absolute;
           left:242px;
           top:180px;
           right:30px;
           padding-bottom:40px;
           background-color:#f6f9fb;
           z-index:4; }

/************************************************************/
/* RIGHT:                                                   */
/* ======================================================== */
/* RIGHT_CONTAINER:                                         */
/* -------------------------------------------------------- */
/* right_container enthält right_logo und right_logo_text.  */
/* Der Bereich hat eine Höhe von 100%.                      */
/* - TOP ist 0px, Bereichs-Beginn am Seitenanfang.          */
/* - RIGHT ist 65px und bezeichnet den Abstand zwischen     */
/*   right_container und dem rechten Rand, ist frei         */
/*   gewählt.                                               */
/* - WIDTH ist 138px und entspricht der Breite von          */
/*   right_logo.                                            */
/* - BOTTOM ist 0px, so dass der Bereich bis zum Seitenende */
/*   reicht. Ist wichtig für die Hintergrundfarbe.          */
/* -------------------------------------------------------- */
/* RIGHT_LOGO:                                              */
/* -------------------------------------------------------- */
/* Enthält das Logo und fungiert gleichzeitig als Container */
/* für right_logo_text.                                     */
/* - WIDTH ist 138px und entspricht der Breite des Logos.   */
/* - TOP ist 9%, so dass das Logo direkt unter dem top-     */
/*   Bereich beginnt.                                       */
/* ==> Die Logo-Grafik teilt sich in folgende Segmente:     */
/*   > 109px bis zu middle_bar.                             */
/*   >  33px entsprechend der Höhe von middle_bar.          */
/*   > 295px nach dem middle_bar                            */
/*   = 437px Gesamthöhe.                                    */
/* -------------------------------------------------------- */
/* RIGHT_LOGO_TEXT:                                         */
/* -------------------------------------------------------- */
/* right_logo_text enthält die Bezeichnung der jeweiligen   */
/* Forum-Division im Logo und reicht über den right_logo-   */
/* Bereich hinaus.                                          */
/* - TOP ist 109px und entspricht dem ersten Segment von    */
/*   right_logo.                                            */
/* - LEFT ist -30px und reicht damit 30px über right_logo   */
/*   hinaus, frei gewählter Wert.                           */
/* -------------------------------------------------------- */
/* RIGHT_COPYRIGHT:                                         */
/* -------------------------------------------------------- */
/* right_copyright enthält die Copyright-Angaben.           */
/* - WIDTH ist 133px und entspricht der Breite von          */
/*   logo_right minus 5px padding-left.                     */
/* - HEIGHT ist 30px und entspricht der Höhe von            */
/*   content_address.                                       */
/************************************************************/
#right_container { position:fixed;
                   top:0px;
                   right:65px;
                   bottom:0px;
                   width:138px;
                   background:#d6e2ea;
                   z-index:5; }

#right_logo { position:absolute;
              top:9%;
              right:0px;
              width:138px; }

#right_logo_text { position:absolute;
                   right:0px;
                   top:109px;
                   left:-30px; }

#right_imprint { position:absolute;
                 bottom:0px;
                 right:0px;
                 width:133px;
                 height:20px;
                 padding-left:5px;
                 background-color:#b0cce1; }

@media print {

#top_left, #top_right { display:none; }

#navigation_container, #navigation, #vertical_bar_large, #vertical_bar_small { display:none; }

#middle_bar, #middle_logo, #middle_helper_top, #middle_helper_bottom { display:none; }

#middle_container { position:absolute;
                    top:0px;
                    left:0px;
                    right:0px;
                    height:40px;
                    background:transparent; }

#middle_headline { top:0px;
                   left:0px;
                   right:0px;
				   height:40px; }

#right_container, #right_logo, #right_logo_text, #right_imprint { display:none; }

#content_background { display:none; }

#content_container { top:70px;
                     left:0px;
                     right:0px; }

#content { top:0px;
           left:0px;
           right:0px;
           bottom:0px; }

}