/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   BASIC ELEMENTS
   
   Colors
   Light blue (e.g. links)                     : #62c8d2
   dark red                                    : #cc0000
   mid-red                                     : #ff3300
   
   */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   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: #995555;
}
a:hover {
  color: #cc0000;
}
b, strong {
  font-weight: bold;
}
i, em {
  font-style: italic;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   MAIN ELEMENTS */

body {
  position: absolute;
  width: 100%; height: 100%;

  background: url(../images/background.gif) repeat-x 0 85px #ffffff;
  font-family: Geneva, 'Lucida Sans Unicode', sans-serif;
  color: #555555;

  font-size: 0.625em;

}
* html body {
  height: 100%;
}


#pagecontent {
  position: relative;
  margin: 9px 0 9px 27px;
  z-index: 50;
}
* html #pagecontent {
/* MSIE 6 */
}
*+html #pagecontent {
/* MSIE 6 */
}


#content {
  position: absolute;
  top: 0; left: 0;
  margin: 110px 0 0 0;
}
#content p {
  font-size: 1.1em;
  line-height: 1.5em;
}

#content .citem {
  position: absolute;
  display: block;
  width: 294px; height: auto;
  overflow: hidden;
  top: 0;
}

#citem0.citem { width: 225px; left: 0; }
#citem1 { left: 312px; }
#citem2 { left: 624px; }
#citem3 { left: 936px; }
#citem4 { left: 1248px; }
#citem5 { left: 1560px; }
#citem6 { left: 1872px; }
#citem7 { left: 2184px; }
#citem8 { left: 2496px; }
#citem9 { left: 2808px; }
#citem10{ left: 3120px; }

#content .citem img {
  margin: 0 0 9px 0;
/*  border: solid #e0e0e0 1px; */
}

#content .citem_myhtml {
  position: absolute;
  display: block;
  width: 927px; height: auto;
  top: 0;
  
  background: #f0f0f0;
}
#content .citem_myhtml a {
  position: absolute;
}

/*
#content .citem_myhtml .description {
  position: absolute;
  display: block;
  top: 0px; left: 0;
  width: 225px;
  font-size: 1.1em;
  line-height: 1.5em;
  overflow: hidden;
}

#content .citem_myhtml .description span {
  display: block;
  margin: 0 0 1em 0;
}

#content .citem_myhtml .description .off {
  color: #555555;
}
#content .citem_myhtml .description .on {
  color: #cc0000;
}
*/

#header {
  position: absolute;
  top: 0px; left: 0px;
  margin: 0;
}
#breadcrumb {
  display: none;
}

#logo {
  display: block;
  width: 225; height: 86px;
  float: left;
  margin: 0 9px 0 0;
}
#logo img {
  width: 225; height: 86px;
  border: 0;
}

#main_menu {
  position: absolute;
  top: 0; left: 312px;
  display: block;
}

#main_menu li {
  display: block;
  position: absolute;
  width: 147px; height: 86px;
  overflow: hidden;
}
#main_menu li a {
  position: absolute;
  bottom: 2px;
  font-size: 1.2em;
  line-height: 1em;
  letter-spacing: 0.1em;
  color: #555555;
  font-weight: bold;
  text-transform: uppercase;
}
#main_menu li a:hover,
#main_menu li.current a {
  color: #cc0000;
}

#submenu {
  position: absolute;
  top: 0; left: 0;
  margin: 136px 0 0 0;
/*
  position: absolute;
  top: 33px; left: 312px;
  display: block;
  width: 600px;
*/
}
#submenu li {
  display: block;
  width: 225px;
}
#submenu li a {
  font-size: 1.2em;
  line-height: 1.5em;
  color: #555555;
}
#submenu li a:hover,
#submenu li.current a {
  color: #cc0000;
}

#co_tooltiplayer {
  z-index: 70;
  position: absolute;
  display: block;
  width: 158px;
  border: #c0c0c0 solid 1px;
  background: #ffffff;
  padding: 4px;
  font-family: Arial;
  font-size: 1.1em;
  line-height: 1.2em;
}
#haase {
  position:absolute;
  display:block;
  width:505px; height:480px;
  background: url(../images/haase.gif) no-repeat;
}
#augen {
  position:absolute;
  top: 231px; left: 63px;
  width: 53px; height: 57px;
  overflow: hidden;
  background: url(images/haase-hase_augen.gif) no-repeat;
}

.border {
  border: solid 1px #e0e0e0;
}

#printhaase {
  display: none;
}