/*#####################################################################################
**#####################################################################################
**  (c) by Susanne Kürth (http://www.statttapete.de/) 
** 
** 
**  Author:                Susanne Kürth
**
**
**  Projektbeginn:         01.09.2009
**  Letzte Aenderung:      15.09.2009  
**  Datei:                 default.css
**  Funktion:              Standard-Stylesheet
**
**
**
*/



@media all
{

/*#####################################################################################
** Allgemeines
**
**####################################################################################*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


html, body { height: 100%; }

body {
  background: #18130d url(../images/bg_body_flowers.jpg) repeat-x center top;
  color: #ffffff;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.4em;
  text-align: left;
  /* text-align: center; horizontal centering for IE Win quirks */
} 

a:link, a:visited {
  color: #ffffff;
  text-decoration: underline;
}

a:hover, a:active, a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.iepng {
  behavior: url(js/iepngfix.htc);
}

.invisible {
  display: inline;
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  width: 0;
}

.clear {
  clear: both;
  height: 0;
  visibility: hidden;
}


/*#####################################################################################
** DIV-Container des Basislayouts
**
**####################################################################################*/

div#preloader { /* bei aktiviertem Java-Script */
  background: #445057 url(../images/prealoader.gif) no-repeat center center;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 999;
}

/* Wrapbereich */
#wrapper {
  margin: 0 auto;
  width: 1180px;
}

/* Inhalt */
#slider {
  margin: 0 auto;
  position: relative;
  width: 960px;
}

.scroll {
  /* background: #556168 url(../images/bg_panel_.jpg) no-repeat scroll left top; */
  background: transparent;
  clear: left;
  height: 1000px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: hidden; /* für korrekte Darstellung bei deaktiviertem Java-Script */
  position: relative;
  width: 960px;
}

.scrollContainer div.panel {
  float: left;  /* für korrekte Darstellung bei deaktiviertem Java-Script */
  height: 960px;
  padding: 20px;
  position: relative;  /* für korrekte Darstellung bei deaktiviertem Java-Script */
  width: 920px;
}

/* Navigation */
ul.navigation {
  list-style: none;
  margin: 0;
  padding: 0;
/* Beginn Änderungen: absolute Positionierung der Navigation (Tabs) */
  left: -100px;
  position: absolute;
  text-align: right;
  top: 100px;
  width: 80px;
/* Ende */
}

ul.navigation li {
  font-size: 16px;
  line-height: 1em;
  margin-bottom: 2px;
}

ul.navigation a {
  display: block;
  color: #fff;
  padding: 2px 4px;
  text-decoration: none;
}

ul.navigation a:hover {
  background-color: #fff;
  color: #676d71; 
}

ul.navigation a.selected {
  background-color: #00b1e6;
  color: #fff;
}

ul.navigation a:focus {
  outline: none;
}

.scrollButtons {
  cursor: pointer;
  position: absolute;
  top: 400px;
}

.scrollButtons.left {left: -100px;}
.scrollButtons.right {right: -100px;}

.hide {display: none;}


/*#####################################################################################
** Panels
**
**####################################################################################*/
.scrollContainer div#home {background: transparent url(../images/bg_panel_home.jpg) no-repeat scroll left top;}
.scrollContainer div#landscape {background: transparent url(../images/bg_panel_landscape.jpg) no-repeat scroll left top;}
.scrollContainer div#grafik {background: transparent url(../images/bg_panel_grafik_01.jpg) no-repeat scroll left top;}
.scrollContainer div#pictureIdea {background: transparent url(../images/bg_panel_picture-idea.jpg) no-repeat scroll left top;}
.scrollContainer div#contact {background: transparent url(../images/bg_panel_contact.jpg) no-repeat scroll left top;}

.scrollContainer h2 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 1em;
  text-indent: -9999px;
}

.scrollContainer h3 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 1em;
}

.scrollContainer p {
  font-size: 12px;
  line-height: 1.6em;
  margin-bottom: 1.2em;
}

.scrollContainer p a:link, .scrollContainer p a:visited {
  background: #253038;
  color: #ffffff;
  padding: 2px 4px;
  text-decoration: none;
}

.scrollContainer p a:hover, .scrollContainer p a:active, .scrollContainer p a:focus {
  background: #00b1e6;
  color: #ffffff;
  text-decoration: none;
}

.scrollContainer .imagebox {position: absolute;}

.scrollContainer .box {
  background: transparent url(../images/bg_box.png) repeat left top;
  padding: 20px;
  position: absolute;
}

/* Panel: Home */
#home .image01 {left:93px; top:124px;}
#home .image02 {left:367px; top:153px;}
#home .image03 {left:498px; top:84px;}
#home .image04 {left:695px; top:132px;}
#home .image05 {left:452px; top:282px;}
#home .image06 {left:644px; top:284px;}
#home .image07 {left:637px; top:490px;}

#home .box {
  bottom: 222px;
  left: 70px;
  width: 300px
}

#home a.attentionSocket {
  bottom: 218px;
  height: 75px;
  position: absolute;
  right: 50px;
  text-indent: -9999px;
  width: 75px;
}

#home a.attentionSocket span {
  background: transparent url(../images/surprise_attention.png) no-repeat 0 0;
  bottom: 50px;
  height: 90px;
  position: absolute;
  right: -20px;
  text-indent: -9999px;
  visibility: hidden;
  width: 170px;
}

#home a.attentionSocket:hover span {
  visibility: visible;
}

/* Panel: Landscape */
#landscape .image01 {left:35px; top:163px;}
#landscape .image02 {left:234px; top:94px;}
#landscape .image03 {left:687px; top:206px;}
#landscape .image04 {left:220px; top:424px;}
#landscape .image05 {left:452px; top:424px;}
#landscape .image06 {left:686px; top:424px;}

#landscape div.fadeInLeaves {
  bottom: 165px;
  height: 155px;
  left: 112px;
  position: absolute;
  text-indent: -9999px;
  width: 220px;
}
#landscape div.fadeInLeaves span {
  background: transparent url(../images/surprise_leaves.png) no-repeat 0 0px;
  bottom: -17px;
  height: 49px;
  left: -19px;
  position: absolute;
  text-indent: -9999px;
  width: 120px;
}

/* Panel: Grafik */
#grafik .image01 {left:298px; top:75px;}
#grafik .image02 {left:505px; top:75px;}
#grafik .image03 {left:91px; top:285px;}
#grafik .image04 {left:298px; top:285px;}
#grafik .image05 {left:505px; top:285px;}
#grafik .image06 {left:712px; top:285px;}
#grafik .image07 {left:712px; top:496px;}

#grafik div.animateTeddy {
  background: transparent url(../images/surprise_teddy.png) no-repeat 0 0px;
  bottom: 300px;
  height: 85px;
  left: 130px;
  position: absolute;
  text-indent: -9999px;
  width: 135px;
}

#grafik div.animateTeddy span.animateTeddyLeft {
  cursor: pointer;
  height: 75px;
  left: 10px;
  position: absolute;
  text-indent: -9999px;
  top: 0;
  width: 40px;
}

#grafik div.animateTeddy span.animateTeddyRight {
  cursor: pointer;
  height: 75px;
  position: absolute;
  right: 40px;
  text-indent: -9999px;
  top: 0;
  width: 45px;
}

/* Panel: Picture Idea */
#pictureIdea .image01 {left:187px; top:85px;}
#pictureIdea .image02 {left:409px; top:85px;}
#pictureIdea .image03 {left:631px; top:85px;}
#pictureIdea .image04 {left:409px; top:294px;}
#pictureIdea .image05 {left:631px; top:294px;}
#pictureIdea .image06 {left:187px; top:503px;}
#pictureIdea .image07 {left:409px; top:503px;}
#pictureIdea .image08 {left:631px; top:503px;}

#pictureIdea a.pictureMaintenance {
  height: 166px;
  left: 177px;
  position: absolute;
  text-indent: -9999px;
  top: 284px;
  width: 166px;
}
#pictureIdea a.pictureMaintenance span {
  background: transparent url(../images/surprise_maintenance.png) no-repeat 0 0px;
  bottom: 0px;
  height: 100px;
  left: 0px;
  position: absolute;
  text-indent: -9999px;
  width: 100px;
}

/* Panel: Contact */
#contact .image01 {left:95px; top:94px;}

#contact .box {
  bottom: 222px;
  left: 550px;
  width: 300px
}

#contact div.fadeInApple {
  bottom: 185px;
  height: 55px;
  left: 129px;
  position: absolute;
  /* text-indent: -9999px; */
  text-decoration: none;
  width: 55px;
}
#contact div.fadeInApple span {
  /* background: #253038; */
  bottom: 0px;
  font-size: 12px;
  left: 55px;
  padding: 2px 4px;
  position: absolute;
  text-align: center;
  /* text-indent: -9999px; */
  width: 255px;
}

#contact .contactMail {
  bottom: 368px;
  height: 55px;
  left: 105px;
  position: absolute;
  text-indent: -9999px;
  width: 294px;
}
#contact .contactMail a {
  display: block;
  height: 55px;
  width: 294px;
}


}