/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   BASIC ELEMENTS
   
   Colors
   Light blue (e.g. links)                     : #7ee337
   Hover-Blue (selected links)                 : #9eff57
   dark grey (e.g. Text)                       : #333333
   
   */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   GLOBAL RESET : 
   Forces every browser to display HTML elements with the same margins, paddings etc.
   see: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { position: relative; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; margin: 0; padding: 0; outline: 0; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "»" "«"; }
html { font-size:100.01%; }
body { font-size:1em; }

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   CLEARFIX HACK:
   fixes mistakes in displaying floating containers
   see: http://positioniseverything.net/easyclearing.html
*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   INVISIBLE-CLASS
   will hide elements from the screen but will be recognized in screen reader applications
*/
.invisible { position: absolute; left: -1000em; width: 20em; }

a {
  text-decoration: none;
  color: #7ee377;
}
a:hover {
  color: #9eff97;
}
b, strong {
  font-weight: bold;
}
i, em {
  font-style: italic;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   MAIN ELEMENTS */

html {
  height           : 100%;
}
body {
  position: absolute;
  width: 100%; height: 68em;

  background: #ffffff;
  font-family: Georgia, 'Times New Roman', serif;
  color: #333333;

  font-size: 0.625em;
}
* html body {
  height: 100%;
}

#pagecontent {
  position: relative;
  margin: 0 auto 0 auto;
  width: 97.2em; height: 100%;
  z-index: 50;
}
* html #content {
/* MSIE 6 */
}
*+html #content {
/* MSIE 6 */
}



#navigation,
#container01 {
  position: absolute;
  width: 45em; height: 19.8em;
  padding: 0 0 0 3.6em;
  bottom: -5em; left: 0;
  min-height: 18em;
  z-index:50;
  background: #ffffff;
  border-top: 3.6em solid #ffffff;
  border-right: 0.9em solid #ffffff;
}
* html #navigation {

}
* html #container01 {

}
#container01 {
  left: 52.6em;
  width: 43.7em;
  padding: 0 0 0 0.9em;
  z-index: 60;
}
#navigation {
  width: 93.6em;
  border-top: 3.6em solid #ffffff;
}
* html #navigation { bottom: -9em; }
* html #container01 { bottom: -9em; left: 52.7em; }
*+html #container01 { left: 52.7em; }

p {
  font-size: 1.2em;
  line-height: 1.375em;
  font-style: italic;
}
p.date {
  font-size: 1.2em;
  line-height: 1.375em;
  color: #7ee377;
}
p.subline {
  font-size: 1.5em;
  line-height: 1.1em;
  text-decoration: underline;
}

#navigation .box {
  width: 22.4em; height: 100%;
  border-right: 1px solid #7ee377;
  float: left;
}
#navigation .boxright {
  padding: 0 0 0 0.9em;
  width: 25.5em;
}
*+html #navigation .boxright {
  margin: 0 -0.9em 0 0;
}
* html #navigation .boxright {
  margin: 0 -0.9em 0 0;
}

.boxleft h2 {
  font-style: italic;
}
h1, p.headline {
  font-size: 2.1em;
  line-height: 1.18em;
  text-decoration: underline;
  font-style: normal;
  font-weight: normal;
}
h2 {
  font-size: 1.2em;
  line-height: 1.375em;
  margin: 0 0 1.5em 0;
  font-style: normal;
  font-weight: normal;
}
#navigation ul {
  font-size: 1.2em;
  line-height: 1.375em;
}
#navigation a {
  color: #333333;
}
#navigation a:hover,
#navigation .current a,
#navigation a.current {
  color: #7ee337;
}

#imprint {
  font-size: 1.2em;
  line-height: 1.375em;
  top: 1.375em;
}

.prevlink,
.nextlink {
  font-size: 1.4em;
  font-variant: none;
  line-height: 0.4em;
/*
  padding: 0px 6px 0 6px;
  width: 12px; height: 10px;
  background-repeat: no-repeat;
  background-position: 0 2px;
*/
}
/*
a.prevlink:hover,
a.nextlink:hover {
  background-position: -12px 0;
}

.prevlink {
  background-image: url(../images/prevlink.gif);
}
.nextlink {
  background-image: url(../images/nextlink.gif);
}
*/
#container02 {
  width: 97.2em;
  padding: 3.6em 0 0 0;
  height: 100%;
  overflow: hidden;
}
#thumbnails {
  padding: 0 3.6em 0 3.6em;
}
#thumbnails a {
  display: block;
  float: left;
  margin: 0 0 0.4em 0.4em;
  padding: 0;
}
#thumbnails img {
  margin: 0;
}

#slideshowContainer {
  width: 100%;
  height: 100%;
  z-index:20;
}
#slideshowContainer img {
  margin: 0 0 0 3.6em;
}
#slideshowContainer img:hover {
  cursor: pointer;
}
.loading {
/*
  background-image: url(../images/loading.gif);
  background-repeat: no-repeat;
  background-position: center 10em;
*/
}

#tooltiplayer {
  position: absolute;

  border-left: #7ee377 1px solid;
  background: #ffffff;
  padding: 0.9em;
  z-index: 80;
  
  filter:alpha(opacity=90);
  -moz-opacity:.90;
  opacity:.90;
}


#text #container01 {
  position: absolute;
  width: 44.1em; height: 100%;
  padding: 0 0.9em 0 3.6em;
  margin: 3.6em 0 0 0;
  top: 0;
  min-height: auto;
  z-index: 1;
  background: transparent;
  border-top: 0;
  border-right: 1px solid #7ee337;
  left: 0;
}
#text #container02 {
  position: absolute;
  width: 45em; height: 100%;
  padding: 0 0 0 0.9em;
  margin: 3.6em 0 0 0;
  top: 0; left: 48.6em;
  min-height: auto;
  z-index: 1;
  background: transparent;
}

#text #container03 {
  border-top: solid #7ee337 1px;
  margin: 1.8em 0 0 0;
  padding: 1.8em 0 0 0;
}

#text p {
  font-style: normal;
}
#text p.date {
  font-style: italic;
}

#homepage #container01 {
  position: absolute;
  width: 97.2em; height: 100%;
  padding: 0 0 0 3.6em;
  margin: 3.6em 0 0 0;
  top: 0; left: 0;
  min-height: auto;
  z-index: 1;
  background: transparent;
  border-top: 0;
  text-align: left;
}