@charset "utf-8";

body {
background-color:#F1DCC8;
background-image:url(bilder/hintergrund.jpg);
background-repeat:no-repeat;
background-position:center top;
}

/* Die Seite ist insgesamt 1000 px hoch und 1000 px breit*/

#seite {
width: 1000px;
height: 1000px;
/* position relative, da sonst andere absolute Container (extra) NICHT daran orientieren würden */
position:relative; top:0px; left:0px;
margin: 0 auto;
background-color:#980100;
background-image:url(bilder/hintergrund-mitte.jpg);
background-repeat:no-repeat;
font: normal 13px verdana, sans-serif;
color:#9B004E;
}

/* extra für die skrollbare Preisliste der seitendiv nur mit scrollbar*/
#preisliste {
width: 1000px;
height: 1000px;
/* position relative, da sonst andere absolute Container (extra) NICHT daran orientieren würden */
position:relative; top:0px; left:0px;
margin: 0 auto;
background-color:#980100;
background-image:url(bilder/hintergrund-mitte.jpg);
background-repeat:no-repeat;
font: normal 13px verdana, sans-serif;
color:#9B004E;
overflow: auto;
}

/* Linkfarbe für die Seite (müssen hier stehen, damit sie für das Menu dann überschrieben werden*/
a:link { color:#9B114E; text-decoration:none; }
a:visited { color:#9B224E; text-decoration:none; }
a:hover { color:#CCCC99; text-decoration:none; }
a:active { color:#9B444E; text-decoration:none; }
a:focus { color:#9B444E; text-decoration:none; }
a.an { text-decoration:none; }

h1 {
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 5em; line-height: 0.5em;
  margin: 0.3em 0.3em 0.3em 0.3em;
  color: #9B004E;
  text-shadow: 
    rgba(0,0,0,0.5) -2px 0, 
	rgba(0,0,0,0.3) 0 -2px, 
	rgba(255,255,255,0.5) 4px 4px, 
	rgba(0,0,0,0.3) -2px -4px;
}

h2 {
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 2em; line-height: 1.5em;
  margin: 0.3em 0.3em 1em 0.3em;
  color: #9B004E;
  text-shadow: 
    rgba(0,0,0,0.5) -1px 0, 
	rgba(0,0,0,0.3) 0 -1px, 
	rgba(255,255,255,0.5) 2px 2px, 
	rgba(0,0,0,0.3) -1px -2px;
}

/* hier wird der absolute Container für den Traumbewahrerwegweiser definiert*/

#wegweiser {
position:absolute; top:620px; left:930px;
width:300px;
height:312px;
z-index:1;
}

/* und hier ist der Divcontainer für den Farbspritzer */
#farbspritzer {
text-align:right;
width: 380px;
height: 150px;
float:left;
}

/* da es einige Formatgrößen gibt, werden sie einzelnd definiert */
/* dazu bekommt jedes Format auch seine eigene Zeile, in der sich das thumb (als div) befindet */
/* die erste Zeile beinhaltet die kleinsten thumbs im Format Breite/Höhe: 132x100*/
#zeileeins {
width: 1000px;
height: 100px;
float:left;
}

/* die zweite dann die mittleren im Format 191x150, natürlich auch als dritte Zeile zu verwenden, wenn es */
/* soviele Bilder gibt, dass es zu einer weiteren Zeile kommt*/
#zeilezwei {
width: 1000px;
height: 150px;
float:left;
}

#zeiledrei {
width: 1000px;
height: 191px;
float:left;
}


/* und weil jedes thumb seinen eigenen hover bekommt, wird für jeden thumb eine eigene class definiert */
/* doch vorher braucht es einen allgemeineren divcontainer der als Klickfläche dient und sich in dem */
/* anderen divcontainer befindet. Angemerkt: der leere Klickflächendivcontainer benötigt wenigstens */
/* ein Leerzeichen wie   um sich so gesehen auszubreiten und da zu sein */

#divklein {
width: 132px;
height: 100px;
float:left;
}

#divmittel {
width: 191px;
height: 150px;
float:left;
}

#divsenkrecht {
width: 150px;
height: 191px;
float:left;
}

#divsenkrechtklein {
width: 100px;
height: 132px;
float:left;
}

.bluetree {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_blue-tree.jpg);
}
.bluetree a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_blue-tree.jpg);
}

.dunklerwald {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_dunkler-wald.jpg);
}
.dunklerwald a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_dunkler-wald.jpg);
}

.fantasie {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_fantasie.jpg);
}
.fantasie a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_fantasie.jpg);
}

.kirschbluete {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_kirschbluete.jpg);
}
.kirschbluete a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_kirschbluete.jpg);
}

.mohnblume {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_mohnblume.jpg);
}
.mohnblume a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_mohnblume.jpg);
}

.mondnacht {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_mondnacht.jpg);
}
.mondnacht a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_mondnacht.jpg);
}

.urlaub {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/th_urlaub.jpg);
}
.urlaub a:hover {
width:132px;
height:100px;
float:left;
background-image:url(thumbs/thd_urlaub.jpg);
}


.alone {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_alone.jpg);
}
.alone a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_alone.jpg);
}

.blaueallee {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_blaue-allee.jpg);
}
.blaueallee a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_blaue-allee.jpg);
}

.blumenkorb {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_blumenkorb.jpg);
}
.blumenkorb a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_blumenkorb.jpg);
}

.faehrmann {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_faehrmann.jpg);
}
.faehrmann a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_faehrmann.jpg);
}

.fernweh {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_fernweh.jpg);
}
.fernweh a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_fernweh.jpg);
}

.herz {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_herz.jpg);
}
.herz a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_herz.jpg);
}

.mygarden {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_my-garden.jpg);
}
.mygarden a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_my-garden.jpg);
}

.whiterose {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/th_white-rose.jpg);
}
.whiterose a:hover {
width:191px;
height:150px;
float:left;
background-image:url(thumbs/thd_white-rose.jpg);
}

.bonappetite {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_bon-appetite.jpg);
}
.bonappetite a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_bon-appetite.jpg);
}

.frauaufzeitung {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_frau-auf-zeitung.jpg);
}
.frauaufzeitung a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_frau-auf-zeitung.jpg);
}

.liebespaar {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_liebespaar.jpg);
}
.liebespaar a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_liebespaar.jpg);
}

.lilasummer {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_lila-summer.jpg);
}
.lilasummer a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_lila-summer.jpg);
}

.lolly {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_lolly.jpg);
}
.lolly a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_lolly.jpg);
}

.nachtleben {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_nachtleben.jpg);
}
.nachtleben a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_nachtleben.jpg);
}

.redlady {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_red-lady.jpg);
}
.redlady a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_red-lady.jpg);
}

.sehnsucht {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_sehnsucht.jpg);
}
.sehnsucht a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_sehnsucht.jpg);
}

.traeumerei {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_traeumerei.jpg);
}
.traeumerei a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_traeumerei.jpg);
}

.tulpenwunder {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/th_tulpenwunder.jpg);
}
.tulpenwunder a:hover {
width:150px;
height:191px;
float:left;
background-image:url(thumbs/thd_tulpenwunder.jpg);
}


.knutschmund {
width:100px;
height:132px;
float:left;
background-image:url(thumbs/th_knutschmund.jpg);
}
.knutschmund a:hover {
width:100px;
height:132px;
float:left;
background-image:url(thumbs/thd_knutschmund.jpg);
}

.magnolie {
width:100px;
height:132px;
float:left;
background-image:url(thumbs/th_magnolie.jpg);
}
.magnolie a:hover {
width:100px;
height:132px;
float:left;
background-image:url(thumbs/thd_magnolie.jpg);
}