/*
 * Allgemeine Einstellungen für HTML-Elemente
 */

* { 
    margin: 0;
    padding: 0;
}

body { 
    width: 1000px;
    font-family: 'Droid Sans',Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
    text-align: left;
    line-height: 3ex;
    letter-spacing: 0em;
}

h1 {
    margin-top: 1.5ex;
    margin-bottom: 0ex;
    font-size: 400%;
    font-weight: normal;
    line-height: 2.5ex;
}

h2 {
    margin-top: 3ex;
    margin-bottom: 1ex;
    margin-left: 1em;
    font-size: 225%;
    font-weight: normal;
    line-height: 2.5ex;
}

h1 + h2 {
    margin-top: 2ex;
}

h3 {
    margin-top: 3ex;
    margin-bottom: 1ex;
    font-weight: normal;
}

img {
    border: none;
}

a {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    vertical-align: top;
}



*.clear {
    clear: both;
}



/*
 * Farben
 */

body {
    background-color: #D5D1D1;
    color: #435156;
}

h1 {
    color: white;
}

a {
    color: #435156;
    text-decoration: none;
}

#navigation a,
#footer {
    color: #DFE7EA;
}

#navigation a:hover {
    color: white;
}

#mainMenu,
#footer {
    background-color: #08304D;
}

/* Menü 2. Ebene */
#mainMenu li ul,
#blogMenu {
    background-color: #A8A1A1;
}

#column1 {
    background-color: #DFE7EA;
}

/* Text am unteren Rand des Banners */
#logoContainer p {
    color: #08304D;
}

#footer h3 {
    background-color: #8C3434;
}

#footer a {
    color: #DFE7EA;
}

#column2 {
    background-color: white;
}

/* Weiterlesen */
#column2 div.blogPost a,
#column1 p.readmore a,
#content div.item-page ul.pagenav a {
    color: #A8A1A1;
}



/*
 * Allgemeine Einstellungen für Menüs; Joomla generiert für Menüs der
 * 1. Ebene ein ul-Element mit Klasse "menu".
 */

ul.menu {
    /* Menü zentrieren; Voraussetzung ist, dass Menüpunkte der 1. Ebene als
       inline-Elemente behandelt werden (s.u.) */
    text-align: center;
}

ul.menu ul {
    /* Menü ab 2. Ebene linksbündig */
    text-align: left;
}

ul.menu li {
    list-style-type: none;
}

ul.menu li a {
    white-space: nowrap;
    font-weight: bold;
}

/* Menüpunkte der 1. Ebene */
ul.menu > li {
    display: inline-block;
}

/* Menüs der 2. Ebene */
ul.menu > li > ul {
    /* standardmäßig unsichtbar, siehe unten (li:hover) */
    display: none;
    /* Absolut positionieren, damit der Platzbedarf des Menüs nicht das
       Rendering des übergeordneten Elements (hier: Menüpunkte der 1. Ebene)
       und nachfolgender Elemente (hier: zweites Menü) beeinflusst. */
    position: absolute;
    /* Das Menü soll vor dem Logo liegen. */
    z-index: 2;
}

/* Menüs der 2. Ebene beim Überfahren der Menüpunkte der 1. Ebene */
ul.menu > li:hover > ul {
    /* Menü sichtbar machen */
    display: block;
}



/*
 * Spezielle Einstellungen für Menüs
 */

#mainMenu {
    width: 80%;
    float: left;
}

/* Menüpunkte der 1. Ebene */
#mainMenu ul.menu > li {
    margin-right: 4em;
    margin-left: 4em;
    padding-top: 1ex;
    padding-bottom: 1ex;
}

/* Menüs der 2. Ebene */
#mainMenu ul.menu ul {
    margin-top: 1ex;
    margin-left: -1em;
    padding-left: 1em;
    padding-right: 1em;
}

#blogMenu {
    width: 20%;
    float: right;
}

/* Menüpunkte der 1. Ebene */
#blogMenu ul.menu > li {
    margin-left: auto;
    margin-right: auto;
    padding-top: 1ex;
    padding-bottom: 1ex;
}



/*
 * Layout der Seite unterhalb des Menüs:
 * Tabelle mit zwei Spalten #column1 und #column2
 */

#main {
    display: table;
}

#main > div {
    display: table-row;
}

#main > div > div {
    display: table-cell;
}

#column1 {
    width: 80%;
}

#column2 {
    width: 20%;
}



/*
 * Einstellungen für erste Spalte und deren Kindelemente
 */

#logoContainer {
    border-bottom: solid #08304D 1.25ex;
    position: relative;
}

#logoContainer img#background {
    width: 100%;
    display: block;
}

#logoContainer img#logo {
    display: block;
    position: absolute;
    top: 7.5ex;
    left: 0.75em;
    /* Das Logo soll über dem Bild liegen. */
    z-index: 1;
}

/* Logo auf der Startseite */
body.start #logoContainer img#logo {
    top: 4.5ex;
    left: 15em;
}

#logoContainer p {
    width: 100%;
    position: absolute;
    top: 210px;
    left: 0;
    font-family: 'Droid Serif',Verdana,Arial,Helvetica,sans-serif;
    font-size: 85%;
    letter-spacing: 0.05em;
    font-weight: bold;
    text-align: center;
}

/* Container mit Ausgabe der Komponente von Joomla */
#content {
    padding: 3ex 3em 3ex 3em;
    border-top: solid white 1.25ex;
    border-bottom: solid white 1.25ex;
}

#content img {
    width: 100%;
    display: block;
    margin-top: 3ex;
    margin-bottom: 3ex;
}

/*
 * Layout der zweisprachigen Inhalte:
 * Tabelle mit zwei Spalten div.de und div.en
 */

div.bilingual {
    display: table;
}

div.bilingual > div {
    display: table-row;
}

div.bilingual > div > div {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

div.bilingual > div > div.de {
    padding-right: 2em;
}

div.bilingual > div > div.en {
    padding-top: 10ex;
    padding-left: 2em;
}



/*
 * Layout der Fußzeile:
 * Tabelle mit zwei Spalten für Führungstext "Impressum" und die Angaben
 * zum Impressum.
 */

#footer {
    display: table;
    width: 100%;
    border-bottom: solid white 1.25ex;
    line-height: normal;
}

#footer > div.moduletable {
    display: table-row;
}

#footer > div.moduletable > * {
    display: table-cell;
    padding: 2ex 0.5em 2ex 0.5em;
    font-size: 85%;
    vertical-align: top;
}

#footer td {
    padding-right: 3em;
}



/*
 * Einstellungen für zweite Spalte und deren Kindelemente
 */

#column2 {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
    vertical-align: top;
}

#column2 div.blogPost {
    margin-top: 3ex;
    margin-bottom: 3ex;
}

#column2 h2 {
    margin-top: 0;
    margin-left: 0;
    font-family: 'Droid Serif',Verdana,Arial,Helvetica,sans-serif;
    font-size: 150%;
}

#column2 p.separator {
    padding-top: 1ex;
    padding-bottom: 1ex;
    font-size: larger;
}



/*
 * Einstellungen für Blog-Einträge im Content-Bereich
 */

#content div.item-page ul.pagenav {
    margin-top: 1ex;
}

#content div.item-page ul.pagenav li {
    list-style-type: none;
}