/* eric meyer reset styles */
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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
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: "" "";
}
/* basic styles */
body{font:normal 62.5%/1.5 "Lucida Grande", "Segoe UI", Calibri, Arial, sans-serif}

h1{text-indent:-999em;background:url(../images/logo.jpg) 0 0 no-repeat; position:absolute;left:0px;top:50px;width:182px;height:42px;z-index:100}
#contact{position:absolute;left:0px;top:115px; display:block; background-image:url(../images/mail.png); width:180px; height:16px; color:#333;text-decoration:none;z-index:100}
  #contact:hover{background-position: -180px 0}
.aktuelles{
  text-shadow: #fff 0px 1px 1px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  bottom: 0;
  font:normal 120%/1.3 "arial", "Segoe UI", Calibri, Arial, sans-serif;
  color: #707070;
  width: 200px;
}

.aktuelles img.aktuel{
  position: absolute;
  left: -20px;
  top: -80px;
}

.aktuelles .closeopen{
  position: absolute;
  right: 0;
  top: 21px;
  width: 10px;
  height: 10px;
  background:url(../images/closeopen.png) no-repeat 0 0;
}

.aktuelles .msg{
  margin-top: 8px;
}
.aktuelles .open{
  background-position: 0 -10px;
}
.aktuelles .date{
  padding-bottom: 2px;
  border-bottom: solid 1px #e2e2e2;
  width:100%;
  
}
.aktuelles .highlight{
  color: #000;
  font-weight: bold;
  display: block;
}

.aktuelles .msg .highlight{
  margin-bottom: 8px;
}

.aktuelles .msg > p{
  margin-bottom: 8px;
}

.aktuelles .msg > a{
  color: #707070;
}

.aktuelles .news{
  margin-top: 20px;
}


/* gallery */

#gallery{position:absolute;top:51px;left:240px;width:970px;height:500px;overflow:hidden;}
  #gallery #images{position:absolute;top:0;left:0;width:10000em}
    #gallery li{float:left}
      #gallery img{display:block;margin-right:40px}

#navigation{position:absolute;bottom:0;left:-4px;right:0;text-align:left}
  #navigation li{width:16px;height:20px}
    #navigation ul a{display:block;width:16px;height:20px;background:url(../images/bullets.png) 0 50% no-repeat;}
      #navigation ul a.active,#navigation ul a:hover {background-position:100% 50%}
      #navigation.puzzle ul a.active,#navigation.puzzle ul a:hover {background-position:0 50%}
  .action, #navigation ul{margin-right:10px;line-height:20px;display:inline-block;vertical-align:top}
  .action{cursor:pointer; margin-left:3px; width:55px;height:14px;background:url(../images/playPause.png) 0 3px no-repeat; text-indent:-999em;display:none}
    #start.active, #stop.active{display:inline-block;}
    #stop.active{background-position:0 100%}

/* overlays */
#overlays{position:absolute;top:0;left:0;width:1000px;height:448px;z-index:9;overflow:hidden;cursor:none}
  #left, #middle, #right{position:absolute;top:0;width:33%;height:448px;z-index:999}
  #left{left:0}
  #middle{left:33%;width:34%;}
  #right{left:67%}
  #left.off{left:0;width:50%}
  #right.off{left:50%;width:50%}
  #icon{position:absolute;width:40px;height:40px;background:url(../images/arrows.png) 0 0 no-repeat;display:none;z-index:998}
  .middle{background-position:50% 0 !important}
  .right{background-position:100% 0 !important}
  #overlays.show .show{display:block}
  #overlays.show .off{display:none}
  #overlays.off .show{display:none}
  #overlays.off .off{display:block}

#main{position:absolute; height: 500px;}

.mainContainerCenter{ left: 4%; }

.mainContainerCenterV{ top: 6%; }

.mainContainerTop{ margin-top:50px; }

.mainContainerLeft{ margin-left:40px;}
.ie #overlays>div{background:#fff;opacity:.01;filter:alpha(opacity=1);-ms-filter:alpha(opacity=1);}
.ie #overlays #icon{background:url(../images/arrows.png) 0 0 no-repeat;opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100);}


#puzzle-action{display:inline-block;cursor:pointer;text-indent:-999em;background:url(../images/puzzle.png) 0 100% no-repeat;width:60px;height:13px;vertical-align:baseline;position:relative;bottom:-5px}
#puzzle-action.active{color:red;background-position:0 0;bottom:-3px}
#puzzle{display:none;position:absolute;top:51px;left:240px;height:448px;width:448px;background:url(../images/puzzle-background.png) center no-repeat}
  #puzzle .description{position:absolute;left:480px;color:#999;padding-top:185px;text-indent:-999em;
    background:url(../images/puzzle-text.png) -30px 100% no-repeat;width:214px;height:264px;}

  #puzzle .images{position:absolute;top:0;left:0;width:448px;height:448px;overflow:hidden}
  #puzzle img{width:224px;height:224px;position:absolute;left:-600px;top:0;z-index:101;padding:0;margin:0;cursor:move}
  #puzzle img.ui-draggable-dragging, #puzzle img.top{z-index:105 !important}
  #puzzle .droppables div{position:absolute;top:0;left:0;width:224px;height:224px;z-index:100}
    #puzzle .droppables .p12{left:224px}
    #puzzle .droppables .p21{top:224px}
    #puzzle .droppables .p22{top:224px;left:224px}