/* noatun.css - Hauptdatei
 *
 * (c) 2009 - Thomas Lingmann tl@noatun.net
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */


/* Die Angabe '100.01%' bezieht sich auf bestimmte Browser, die eine 
 * 'glatte Angabe' nicht auswerten koennen.
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
body {
    font-size:        100,1%;
    font-family:      serif; 
    background-color: #c4bf9c;
    margin-left:      16px; 
    margin-rigth:     12px; 
}


/* Aufbau der Kopfzeile
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#header {
    background-color: #6e0b0b;
    height          : 120px;
    border-bottom   : 2px solid #171712;
}

#header .photos {
    background-color: transparent;
    float           : right;
    margin-right    : 2em;
    margin-top      : 0.4em;
    margin-left     : 2em;
}

#header .logo {
    float           : left;
    margin-right    : 2em;
    margin-top      : 0.4em;
    margin-left     : 2em;
}

img.header {
    height          : 100px;
}


/* Navigationsmenue fuer die Eingangsseite 'index.pl'
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#menue {
    position:         absolute;
    top:              126px;
    left:             1em;
    width:            16em;
}

#menue ul {
    list-style:       none;
    margin:           0;
    padding:          0;
    padding-top:      18px;
}

#menue li {
    padding-bottom:   0.4em;
}

#menue a:link, #menue a:visited {
    display:          block;
    padding:          3px 10px 2px 10px;
    color:            #fdfdf8;
    font-weight:      bold;
    background-color: #99946a;
    text-decoration:  none;
    border-top:       2px solid #ada989;
    border-left:      2px solid #ada989;
    border-right:     2px solid #3a382e;
    border-bottom:    2px solid #3a382e;
}

#menue a:hover {
    color:            #99946a;
    font-weight:      bold;
    background-color: #fdfdf8;
}


/* Inhalt der Eingangsseite 'index.pl'
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.inhalt {
    background-color: #f3f1dc;
    margin-top      : 16px;
    margin-left     : 18em;
    margin-right    : 2em;
    border          : 2px solid #ada989;
}

.inhalt h1 {
    padding-top     : 1.2em;
    padding-left    : 1.2em;
    padding-bottom  : 0.8em;
    font-size       : 1.4em;
}

.inhalt p {
    padding-left    : 1.2em;
}

#zitat { 
    color           : #62604e;
}


/* Fusszeile bestehend aus der Menuezeile und dem Adressfeld, wird fuer
 * die meisten Seiten verwandt.
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
address {
    text-align : center;
    font-size  : 0.8em;
    padding    : 0.6em;
    line-height: 1.8em;
}

address span { 
    font-style : normal;
}


/* horizontales Navigationsmenue 
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#navigation {
    background-color: #3a361f;
    padding         : 12px;
    font-size       : 0.9em;
    text-align      : right;
}

#navigation ul {
    list-style      : none;
    margin          : 0;
    padding         : 0;
    padding-top     : 4px;
}

#navigation li {
    display         : inline;
}

#navigation a:link, #navigation a:visited {
    background-color: #eae9e0;
    color           : #333227;
    padding         : 3px 10px 2px 10px;
    font-weight     : bold;
    text-decoration : none;
    border          : 1px solid #656036;
}

#navigation a:hover {
    background-color: #6e0b0b;
    color           : #f1e7e7;
    font-weight     : bold;
}


/* Schriftfarbe von Ueberschriften
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
h2 {
    color           : #6e0b0b;
}


/* Aufzaehlung ohne Zeichen am Anfang
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
ul {
    list-style-type: none;
    padding-left:    16px;
    margin-left:     0;
    line-height:     140%;
}

/* .... manchmal sind diese jedoch erforderlich
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.aufzaehlung {  
    list-style-type : square;
    margin-left     : 1.2em;
    line-height     : 1.8em;
}


/* Rahmen um ein Feld ziehen
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
fieldset {
    border-width: 1px;
    border-style: dashed;
    border-color: #6e0b0b;
    margin-top  : 16px;
    padding     : 10px;
    width       : 64%;
}

legend {
    color      : #6e0b0b;
    font-weight: bold;
}


/* Text 'unformatiert' ausgeben
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
pre {  
    background-color: #f9f7ed;
    color           : #3a361f;
    padding         : 1.2em;
    border-color    : #3a361f;
    border-width    : 1px;
    border-style    : solid;
    width           : 96%;
}


/* Text um ein Bild fliessen lassen, wobei das Bild links ausgerichtet wird */
/* ------------------------------------------------------------------------ */
.leftimg {
    float:         left;
    width:         320px;
    height:        240px;
    margin-right:  20px;
    margin-bottom: 6px;
    border:        none;
}

/* Text um ein Bild fliessen lassen, wobei das Bild rechts ausgerichtet wird */
/* ------------------------------------------------------------------------- */
.rightimg { 
    float:         right;
    width:         320px;
    height:        240px;
    margin-left:   20px;
    margin-bottom: 6px; 
    border:        none;
} 
 
/* Text um ein Bild fliessen lassen, wobei das Bild rechts ausgerichtet wird */
/* und das Bild im Original im 'Hochformat' ist                              */
/* ------------------------------------------------------------------------- */
.rightvertimg {
    float:         right;
    width:         240px;
    height:        320px;
    margin-left:   20px;
    margin-bottom: 6px;
    border:        none;
}

/* Text um ein Bild fliessen lassen, wobei das Bild links ausgerichtet wird */
/* und keine Skalierung des Bildes erfolgt.                                 */
/* ------------------------------------------------------------------------ */
.left-no-scale-img {
    float:         left;
    margin-left:   20px;
    margin-right:  20px;
    margin-bottom: 6px;
    border:        none;
}

/* Text um ein Bild fliessen lassen, wobei das Bild rechts ausgerichtet wird */
/* und keine Skalierung des Bildes erfolgt.                                  */
/* ------------------------------------------------------------------------- */
.right-no-scale-img {
    float:         right;
    margin-left:   20px;
    margin-bottom: 6px;
    border:        none;
}


/* Elemente unterhalb eines schwebenden Elements zwingend anzeigen
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.clear {
    clear: both;
}


/* Aufbau der Kopfzeile der einzelnen Artikel
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
#artikel_header {  
    background-color: #6e0b0b;
    border-bottom   : 2px solid #171712;
    padding-top     : 1.6em;
    padding-bottom  : 1.2em;
    text-align      : center;
}


/* Link-Uebersicht am Anfang der Artikel, Reiseberichte
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
li a:link, li a:visited {  
    color          : #6e0b0b;
    font-weight    : 600;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline;
}