h1 {font-family:Cambria, 'Times New Roman', serif; font-weight:normal; font-size:24px; color:#c7a621; margin-bottom:6px}
h2 {font-family:Cambria, 'Times New Roman', serif; font-weight:normal; font-size:20px; color:#98732e; margin-top:6px; margin-bottom:22px}
h3 {font-family:Cambria, 'Times New Roman', serif; font-weight:normal; font-size:18px; color:#74521c}
h4 {font-family:Cambria, 'Times New Roman', serif; font-weight:normal; font-size:16px; color:#684610}

body {background-color:#e0decc; background-image:url('images/wolkengrund.jpg')}
body, table, td, div {font-family:Cambria, 'Times New Roman', Times, serif; font-weight:normal; font-size:16px; color:#000000}

/* -- Neu bei Seiten mit HTML5 mit div statt table und *float:left IE7 -- */
div.flsieben   {*float:left}
div.seiten_wrapper {width:1012px; margin-right:auto; margin-left:auto;}
div.wrapper  {display:table; width:1012px; clear:both; margin-top:45px; table-layout:fixed; margin-left:auto; margin-right:auto; border:0px; border-collapse:separate; border-spacing:0px}
div.spalten  {display:table-row}
div.cell1 {display:table-cell; width:186px; vertical-align:top; padding:0px; border-right:1px dashed #f7f5f0}
div.cell2 {display:table-cell; width:32px; vertical-align:top}
div.cell3 {display:table-cell; min-width:574px; max-width:574px; vertical-align:top; padding-top:0px}
div.cell4 {display:table-cell; width:32px; vertical-align:top}
div.cell5 {display:table-cell; width:186px; min-width:186px; vertical-align:top; padding:0px; border-left:1px dashed #f7f5f0}

/* -- Header -- */
div.headerimg {width:1012px; margin:auto}
div.headermen {width:510px; height:20px; border-top:1px solid #f7f5f0; border-bottom:1px solid #f7f5f0; background-color:#e7e6d1; margin-top:0px; margin-right:0px; margin-left:auto}
div.headmenli {width:102px; text-align:center; float:left}
div.sidebarre {width:100%}
/* -- In der Sidebar -- */
div.inbar, div.instartbar {width:100%; float:none; padding:0px; margin:0px}
/* -- Impressum -- */
div.einspaltig {display:table-cell; vertical-align:top; padding-left:25px; padding-right:25px}

/* -- Sidebar Link zum Impressum -- */
.displinlinie {display:none}
/* -- Sidebar linke Seite -- */
div.insidebar_oben {min-height:168px; padding-bottom:22px}
/* -- Sidebar links vor Abote -- */
div.insidebar_vora {height:48px; border-left:1px dashed #f7f5f0; border-right:1px dashed #f7f5f0; padding-top: 20px; padding-bottom: 2px}
/* -- Sidebar links Abote -- */
div.insidebar_bote {
  display:block; width:142px; min-height:630px; padding-top:15px; padding-right:10px; padding-bottom:15px; padding-left:10px; 
  margin-right:auto; margin-left:auto; background-color:#e7e6d1; border:1px solid #f7f5f0; border-radius:4px;
}
/* -- Sidebar in Startseite -- */
div.sidebarl_index {
  display:block; width:142px; min-height:600px; padding-top:18px; padding-right:10px; padding-bottom:12px; padding-left:10px; 
  margin-right:auto; margin-left:auto; background-color:#e7e6d1; border:1px solid #f7f5f0; border-radius:4px;
}
div.incontent_quader{
  min-width:310px; min-height:270px; float:right; margin-bottom:16px; margin-left:16px; 
  padding-top:10px; padding-right:5px; padding-bottom:5px; padding-left:5px; border:1px solid #f7f5f0;
}
/* -- Im Text für Buch -- */
div.buch_im_text{background-color:#e7e6d1; border:1px solid #f7f5f0; border-radius:2px;}

/* -- Abote im Content -- bote1 neue Farbe (heller) -- bote2 alte Farbe (dunkler) -- */
div.incontent_bote1  {
  min-height:60px; background-color:#e7e6d1; padding-top: 10px; padding-bottom: 10px; border:1px solid #f7f5f0; border-radius:4px; 
}
div.incontent_bote2  {
  min-height:60px; background-color:#cfcca9; padding-top: 10px; padding-bottom: 10px; border:1px solid #f7f5f0; border-radius:4px; 
}
/* -- Im Content ueber Fussnoten -- bote3 -- */
div.incontent_bote3  {
  min-height:60px; background-color:#e7e6d1; padding-top: 10px; padding-bottom: 10px; margin-bottom:22px; border:1px solid #f7f5f0; border-radius:6px; 
}
/* -- Im Content fuer Zitate -- */
div.incontent_bote4, blockquote.incontent_bote4   {
  min-height:20px; background-color:#e7e6d1; padding:12px; border:1px solid #f7f5f0; background-image:linear-gradient(#dfdcbf, #e7e6d1); border-radius:4px; 
}
/* -- Im Content weiter oben -- wird eingeblendet, wenn der seitliche insidebar_bote ausgeblendet wird -- */
div.incontent_bote5 {
  display:block; min-height:60px; background-color:#e7e6d1; padding-top: 10px; padding-bottom: 10px; border:1px solid #f7f5f0; border-radius:4px;
}
/* -- Im Content ganz oben -- wird eingeblendet, wenn der seitliche insidebar_bote ausgeblendet wird -- */
div.topblock {
  display:block; min-height:60px; background-color:#e7e6d1; padding-top: 10px; padding-bottom: 10px; border:1px solid #f7f5f0; border-radius:6px; 
}

/* -- Startseite neue Seiten unter Content -- */
div.startseite_bote_mit_verlauf  {
  min-height:100px; padding-top:10px; padding-right:12px; padding-bottom:10px; padding-left:12px;
  background-color:#e7e6d1;  background-image:linear-gradient(#cab788, #e7e6d1); 
  border:1px solid #f7f5f0; border-radius:6px;
}
div.startseite_imverlauf {background-color:#e2dec6; border:1px solid #f7f5f0; border-radius:5px}

/* -- Fuer Fussnoten in Reisen -- */
div.fussnoten  {
  min-height:100px; padding-top:10px; padding-right:14px; padding-bottom:10px; padding-left:14px;
  background-color:#e7e6d1;  background-image:linear-gradient(#dfdcbf, #e7e6d1); 
  border:1px solid #f7f5f0; border-radius:6px;
}
div.fussnoten_imverlauf {background-color:#cfcca9; border:1px solid #f7f5f0; border-radius:5px}

/* -- Zweispaltig wie Table -- */
div.zweiwrap {display:table; width:100%; border:0px; border-collapse:separate; border-spacing:0px}
div.zweirow   {display:table-row}
div.zweicell53 {display:table-cell; width:52%; vertical-align:top; padding:0px; border:0px}
div.zweicell46 {display:table-cell; width:46%; vertical-align:top; padding:0px; border:0px}
div.zweicell49 {display:table-cell; width:49%; vertical-align:top; padding:0px; border:0px}
div.zweisplt49 {width:49%; float:left}

/* -- Ausrichtung -- */
.ganzoben{margin-top:2px}
.top6 {margin-top:6px}
.bot6 {margin-bottom:6px}
.top14  {margin-top:14px}     /* Liste ul top14 in Musik */
.top22 {margin-top:22px}
.top28, .startsb28  {margin-top:28px}
.top45 {margin-top:45px}
.bot22  {margin-bottom:22px}
.bot38  {margin-bottom:38px}
.text_left    {text-align:left}
.text_justify {text-align:justify}
.text_center  {text-align:center}
.text_rechts  {text-align:right}
.linienh24{line-height:24px}

/* -- Images -- */
.galarie120 {width:135px; height:120px; padding-bottom:4px; text-align:center; float:left}
.bilderbox   {border-radius:3px; box-shadow:0px 1px 4px rgba(0, 0, 0, 0.2)}
.buecherbox  {box-shadow:2px 4px 4px rgba(0, 0, 0, 0.2), -2px -2px 2px rgba(84, 120, 148, 0.2)}
.floatlinks  {float:left; margin:7px 20px 5px 0px}
.floatrechts {float:right; margin:7px 0px 5px 20px}
.floatthumbs {float:left; margin:5px 15px 5px 0px; border:0px; border-radius:3px; box-shadow:0px 1px 4px rgba(0, 0, 0, 0.2)}
img.images, iframe.video {border:none}
/* -- Images auf Grundlinie ausrichten -- */
img.imageline {vertical-align:bottom}

/* -- Nach Images und anderen -- */
.ohneborder, .galerie {border:none}
.floatclear {clear:both}

/* -- Linien -- */
hr.linie80  {color:#f7f5f0; background-color:#f7f5f0; width:80%; border:0px; height:1px}
hr.linie100  {color:#f7f5f0; background-color:#f7f5f0; width:100%; border:0px; height:1px}
hr.fuerfooter {color:#ffffff; background-color:#ffffff; border-top:1px solid #b4b4b4; border-right:0px; border-bottom:1px solid #ffffff; border-left:0px; height:0px}

/* -- Listen | themenliste in Schoenheit u. Zeitgefuehl | einstiegsl2 in Anlage-Arbeit | einstiegsli in Zeitgefuehl | themen_listen in Rubrik Leben -- */
.sidebar_liste {color:#c0c0c0; margin-left:-6px; *margin-left:24px}
.startse_liste {color:#a47c26}
.themen_listen {color:#898989}
li.reiselist, li.imcontliste  {margin-bottom:6px}
li.themenliste {color:#484848}
li.einstiegsli {color:#898989}
li.einstiegsl2 {color:#686868}

/* -- Blockelemente -- */
.displblock1   {display:block}
.displblock2  {display:block}
.displblock3  {display:block}
.displblock4, hr.beispalten, hr.ohnespalten {display:none}

/* -- Pagination -- */
.pagination1 {display:none}
.pagination2 {display:inline}

/* -- Sonstige -- */

div.einaus {display:block}

/* -- Impressum -- */
div.impressum_left   {width:46%; padding-right:1%; float:left}
div.impressum_right {width:48%; padding-left:1%;  float:right; border-left:1px dashed #f7f5f0}
/* -- Sitemap -- */
div.einspaltig1 {display:table-cell; vertical-align:top; padding-right:2px; padding-left:2px; margin-bottom:38px}
div.sitemap1{width:30%; padding-right:2%; float:left}
div.sitemap2{width:31%; padding-left:2%; padding-right:2%; float:left; border-left:1px dashed #f7f5f0}
div.sitemap3{width:30%; padding-left:2%; float:left; border-left:1px dashed #f7f5f0}

/* --Weitere Schriften und Farben -- */
.linien {color:#f7f5f0}
.grau     {color:#808080}
.grau48 {color:#484848}
.grau68 {color:#686868}
.schwarz  {color:#000000}
.schwarz11{font-size:14px; color:#000000}
.grauklf  {font-size:13px; color:#606060}
.bluekl   {font-size:14px; color:#000076}
.brgold   {font-weight:bold; font-size:16px; color:#af8a1b}
.blaudick {font-weight:bold; font-size:16px; color:#004080}
.schwarzkl{font-family:Verdana; font-weight:normal; font-size:11px; color:#000000}
.graukl, .grlistfont   {font-size:13px; color:#808080}
.fuss14 {font-size:14px}
.hochtf {font-size:11px}

/* --Buch-Buttons -- */
a.detailsd:link, a.detailsd:visited {
  padding-top:4px; padding-right:16px; padding-bottom:4px; padding-left:16px; border:1px solid #d1d1d1;
  background-color:#fdfef8; background-image:linear-gradient(#f8f6eb, #e9e0c4); border-radius:3px; box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);
  text-decoration:none; font-size:14px; color:#966c12;
}
a.detailsd:hover,a.detailsd:active {
  padding-top:4px; padding-right:16px; padding-bottom:4px; padding-left:16px; border:1px solid #d1d1d1;
  background-color:#f8f6eb; background-image:linear-gradient(#f8f6eb, #f4d69c); border-radius:3px; box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);
  text-decoration:none; font-size:14px; color:#8d6010;
}

/* -- Begleitbuch in rechter Sidebar -- */
iframe.begleitbuch  {margin:0px; border:1px solid #fff; border-radius:3px; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.3)}
/* -- Im Content in lebenszeit/einstieg.htm -- */
div.buchblock1 {margin:24px 0px 0px 0px; border:1px solid #fff; border-radius:4px; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.3)} 
iframe.begleitbuch1 {width:100%; height:118px}
/* -- Im Content oben in lebenszeit/lebenskreis 1 bis 14 bis 786px Breite -- */
div.buchblock2 {display:none}
iframe.begleitbuch2 {width:100%; height:178px}
/* -- fuer Widget unten -- */
div.widget_1a    {border:1px solid #fff; border-radius:4px; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.3)}
iframe.widget_1b {width:100%; height:408px}

/** -- Hinweise zur Einbindung -- 
Seiten: Sidebar für lebenszeit.html => iframe.begleitbuch (keine Änderung erforderlich)
Seite: einstig.htm                  => iframe.begleitbuch1
Seite: lebenskreis.htm 1 bis 14     => iframe.begleitbuch2

   div.buchblock1   |    div.buchblock2   |    div.widget_1a - ohne! width:100% und height: px, aber mit border, radius und box
iframe.begleitbuch1 | iframe.begleitbuch2 | iframe.widget_1b - mit! width:100% und height: in px, aber mit border, radius und box
*/

/* --Link Standard -- */
a:link,  a:visited {text-decoration:none; color:#000076}
a:hover, a:active  {text-decoration:none; color:#000000}

/* --Links bold in Wolkengold -- */
a.braungold:link,  a.braungold:visited {text-decoration:none; font-weight:bold; font-size:16px; color:#af8a1b}
a.braungold:hover, a.braungold:active  {text-decoration:none; font-weight:bold; font-size:16px; color:#004080}

/* --Normal im Text -- */
a.braunnone:link,  a.braunnone:visited {text-decoration:none; color:#8c682a}
a.braunnone:hover, a.braunnone:active  {text-decoration:none; color:#004080}
a.braunnorm:link,  a.braunnorm:visited {text-decoration:none; font-weight:normal; font-size:16px; color:#8c682a}
a.braunnorm:hover, a.braunnorm:active  {text-decoration:none; font-weight:normal; font-size:16px; color:#004080}

a.home:link,  a.home:visited {text-decoration:none; font-weight:normal; font-size:19px; color:#af8a1b}
a.home:hover, a.home:active  {text-decoration:none; font-weight:normal; font-size:19px; color:#004080}

/* --Buecher in Sidebar -- */
a.graukllb:link,  a.graukllb:visited{text-decoration:none; font-weight:normal; font-size:14px; color:#686868}
a.graukllb:hover, a.graukllb:active {text-decoration:none; font-weight:normal; font-size:14px; color:#98732e}

/* -- Links grau und klein wie Schrift graukl in Sidebar-Liste -- */
a.grliste:link,  a.grliste:visited, a.graukll:link,  a.graukll:visited {text-decoration:none; font-weight:normal; font-size:13px; color:#808080}
a.grliste:hover, a.grliste:active,  a.graukll:hover, a.graukll:active  {text-decoration:none; font-weight:normal; font-size:13px; color:#000000}
 
/* --Links grau und klein wie Schrift grauklf -- */
a.graukllf:link,  a.graukllf:visited, a.startl:link,  a.startl:visited{text-decoration:none; font-weight:normal; font-size:13px; color:#606060}
a.graukllf:hover, a.graukllf:active,  a.startl:hover, a.startl:active {text-decoration:none; font-weight:normal; font-size:13px; color:#000000}

/* Links blau und klein wie Schrift graukl z.B. in Anmerkungen bei Erwartungen und anderen */
a.blaukll:link,  a.blaukll:visited {text-decoration:none; font-family:Verdana; font-weight:normal; font-size:11px; color:#000076}
a.blaukll:hover, a.blaukll:active  {text-decoration:none; font-family:Verdana; font-weight:normal; font-size:11px; color:#000000}

/* Links innerhalb von Bildnotizen */
a.bildl:link,  a.bildl:visited {text-decoration:none; font-weight:normal; font-size:13px; color:#706a0e}
a.bildl:hover, a.bildl:active  {text-decoration:none; font-weight:normal; font-size:13px; color:#000000}


/* Wenn das Display 1160px oder breiter ist.  div.headerimg {width:1012px; clear:both; margin:auto} img.imageline {max-width:1012px; height:auto} */
@media only all and (min-width:1161px) {
  div.cell3 {font-size:17px; line-height:24px; color:#282828}
  h1 {font-size:25px; margin-bottom:8px}
  h2 {margin-bottom:24px}
}
@media only all and (max-width:1160px) {
  div.seiten_wrapper {width:960px}  
  div.wrapper  {width:960px}  
  div.cell1 {width:180px}
  div.cell2 {width:28px}
  div.cell3 {min-width:540px; max-width:542px}
  div.cell4 {width:28px}
  div.cell5 {width:180px; min-width:180px}
 
  div.headerimg {width:960px}
  img.imageline {max-width:960px; height:auto}	
}

/* Display fuer Wechsel bei Media Queries - max höchstens bis zu diser Breite */
@media only all and (max-width:994px) {
  /* Seiten-Wrapper ohne Border 754 (181 + 28 +542 + 1 = 751px) */
  div.seiten_wrapper {width:756px}
  div.wrapper {display:block; width:100%}
  div.spalten {display:block;}
  div.cell1 {display:block; float:left}
  div.cell2 {display:block; float:left}
  div.cell3 {display:block; float:left; min-width:540px; max-width:542px}
  div.cell4 {display:none}
  div.cell5 {display:block; clear:both; float:right; width:542px; border-left:none}
    /* -- Impressum -- */
  div.einspaltig{display:block}
   /* -- Sitemap -- */
  div.einspaltig1 {display:block, padding-left:2%}
  
  div.headerimg {width:100%; clear:both; margin:auto}
  img.imageline  {max-width:100%; height:auto}
  /* -- Menue oben -- */
  div.headermen {width:400px}
  div.headmenli {width:80px}
  /* -- In der Sidebar -- */
  div.inbar {width:49%; float:left; padding:0px; margin:0px;}
  li.barlist, li.reiselist {margin-bottom:10px}
  /* -- In Startseite und Impressum -- */
  li.startlist {margin-bottom:6px}
  
  /* -- Blockelemente -- */
  .displblock2 {display:none}
  /* -- Links grau und klein wie Schrift graukl in Sidebar-Liste -- */
  a.grliste:link,  a.grliste:visited, a.startl:link,  a.startl:visited {font-weight:normal; font-size:14px; color:#686868}
  a.grliste:hover, a.grliste:active,  a.startl:hover, a.startl:active  {font-weight:normal; font-size:14px; color:#000000}  
  /* -- Impressum -- */
  div.sitemap1{width:48%; padding-right:2%; float:left}
  div.sitemap2{width:46%; padding-left:2%; padding-right:0px; float:left; border-left:1px dashed #f7f5f0}
  div.sitemap3{width:99%; padding-left:0px; float:none; clear:both; border-left:none}
  hr.beispalten {display:block}
}
/* 994 - 28 - 180 = 786px  - max höchstens bis zu diser Breite*/
@media only all and (max-width:786px) {
  /* Ohne Border 544 (542) */
  div.seiten_wrapper {width:100%}
  div.wrapper {display:block; width:100%; margin-top:25px}
  div.spalten {display:block;}
  div.cell1 {display:block; float:none; width:100%; border-right:none}
  div.cell2 {display:none}
  div.cell3 {display:block; float:none; min-width:100%; max-width:100%}
  div.cell4 {display:none}
  div.cell5 {display:block; clear:both; float:none; width:100%; border-left:none}
  /* --Impressum -- */
  div.impressum_left   {width:100%; padding:0px; float:none}
  div.impressum_right {width:100%; padding:0px; float:none; border-left:none}
  /* -- Fuer H1 -- */
  .ganzoben {margin-top:12px}

  /* -- Image im Head -- */
  div.headerimg {width:100%; clear:both; margin:auto}
  img.imageline  {max-width:100%; height:auto}
  /* -- Menue im Head -- */
  div.headermen {width:100%; margin-top:10px}
  div.headmenli {width:20%}  
  /* -- Sidebar linke Seite in Startseite -- */
  div.instartbar {width:33%; min-width:180px; min-height:200px; float:left; padding:0px; margin:0px}
  /* -- Sidebar linke Seite Abote nun oben -- */
  div.insidebar_oben{min-height:38px; padding-bottom:2px}   /* alt min-height:48px; padding-bottom:12px */
  /* -- Sidebar linke Seite - Abote nun oben -- */
  div.sidebarl_index {width:99%; min-height:80px; padding-top:18px; padding-right:0px; padding-bottom:0px; padding-left:0px; border-radius:6px} 
  div.insidebar_bote{display:none}
  /* -- In Sidebar Startseite -- */
  .grlistfont   {font-size:14px; color:#808080}
  /* -- Ausrichtung Text -- */
  .text_justify {text-align:left} 
  /* -- Blockelemente -- */
  .span18 {margin-left:18px}
  .displinlinie {display:inline}
  .displblock1   {display:none}
  .displblock3   {display:none}
  /* -- Blockelemente in Startseite -- */
  .displblock4  {display:block; margin-top:8px; margin-bottom:8px}
  /* -- In Startseite und Impressum -- */
  li.startlist {margin-bottom:14px}
  /* -- In Schoenheit -- */
  li.themenliste, li.einstiegsli, li.einstiegsl2{margin-bottom:10px}
  /* -- Pagination -- */
  .pagination1 {display:inline}
  .pagination2 {display:none}
  /* -- Wie in Galabau und Terra */
  img.images   {max-width:100%; height:auto}
  iframe.video {max-width:100%; max-height:100%}
  /* -- (siehe auch begleitbuch2) -- */
  div.buchblock2 {display:block; border:1px solid #fff; border-radius:4px; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.3); margin-right:auto; margin-left:auto}
}
/* -- Im Content weiter oben und ganz oben - wird eingeblendet, wenn der seitliche insidebar_bote ausgeblendet wird - min mindestens ab diser Breite -- */
/* -- (siehe auch begleitbuch und Buchblock) -- */
@media only all and (min-width:787px) {
  div.incontent_bote5, div.topblock {display:none}
}
/* 180 x 2 + Aussenabstaende in Statseite */
@media (max-width:680px) {
  div.instartbar {width:49%} 
  /* -- Impressum -- */
  div.sitemap1{width:99%; padding-right:0px; float:none}
  div.sitemap2{width:99%; padding-left:0px; padding-right:0px; float:none; border-left:none}
  hr.ohnespalten {display:block}
  div.cell3 {font-size:17px; line-height:24px; color:#282828}
}
@media only all and (max-width:580px) {
  /* -- Zweispaltig wie Table -- */
  div.zweiwrap {display:block}
  div.zweirow   {display:block}
  div.zweicell53, div.zweicell46, div.zweicell49 {display:block; width:99%}
  div.zweisplt49 {width:99%; float:none}
}
/* Spalten unten 220 x 2 + 34 = 472 */
@media only all and (max-width:480px) {
  /* -- In der Sidebar -- */
  div.inbar {width:100%; float:none; padding:0px; margin:0px}
  li.barlist, li.reiselist, li.themenliste, li.einstiegsli, li.einstiegsl2{margin-bottom:14px}
  .displblock2  {display:block}
  .sidebar_liste {margin-left:10%}
 
  /* -- Links grau und klein wie Schrift graukl in Sidebar-Liste -- */
  a.grliste:link,  a.grliste:visited {font-weight:normal; font-size:16px; color:#686868}
  a.grliste:hover, a.grliste:active  {font-weight:normal; font-size:16px; color:#000000}  
}
/* 180 x 2 + Aussenabstaende in Statseite */
@media only all and (max-width:400px) {
  div.instartbar {width:99%} 
  div.headmenli {width:25%}
  div.einaus {display:none}
}
/* -- Begleitbuecher 1 = 362 + 34 -- */
@media only all and (max-width:396px) {
  iframe.begleitbuch1 {height:138px}
  iframe.begleitbuch2 {height:162px}
}
/* -- fuer Widget unten -- */
@media only all and (max-width:468px) {
  iframe.widget_1b {height:762px} 
}