@font-face {
   font-family: "Calibri";
   src: local("Calibri"),url("fonts/calibri.ttf") format("truetype");
}

@font-face {
   font-family: "Calibri";
   src: local("Calibri Bold"),url("fonts/calibrib.ttf") format("truetype");
   font-weight: bold;
}

@font-face {
   font-family: "Calibri";
   src: local("Calibri Italic"),url("fonts/calibrii.ttf") format("truetype");
   font-style: italic;
}

@font-face {
   font-family: "Calibri";
   src: local("Calibri Bold Italic"),url("fonts/calibriz.ttf") format("truetype");
   font-weight: bold;
   font-style: italic;
}


html,body
{
    width:100%;
    height:100%;
}

body  {
    margin:0;
    padding:0;
    border:0;
}

input, textarea
{
    background-color:#111111;
    border: solid 1px gray;
    font-size:12px;
}

a:link, a:visited
{
    text-decoration: none;
}

a:hover, a:active
{
    text-decoration: none;
}

/*  Kubikfoto  */
.kubi
{
    position: absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:2;
    overflow: hidden;
}

.opacity06
{
    filter:alpha(opacity=60);
    opacity: 0.6;
    -modz-opacity:0.6;
    -khtml-opacity:0.6;
}

.snap
{
    z-index: 1;
}

.wrapper
{
    position: absolute;
    border: none;
    width:990px;
    height:425px;
    left:0px;
    top:115px;
    overflow: hidden;
}

#flashinfo
{
    position: absolute;
    left:390px;
    top:30px;
    width:280px;
    height:50px;
    display:none;
}

.flashinfotext
{
    display:inline;
    font-size:12px;
}

#flashinfobox
{
    position: absolute;
    width:350px;
    left:50px;
    top:155px;
    z-index:5;
    filter:alpha(opacity=80);
    opacity: 0.8;
    -modz-opacity:0.8;
    -khtml-opacity:0.8;
    background-color:#111111;
    color:white;
    display:none;
    padding: 10px;
    font-size:12px;
}

#flashinfoboxtext
{
    margin-top:7px;
}

#flashinfoboxlink
{
    margin-top:10px;
    text-align: right;
}

#flashinfoboxlink a:active, #flashinfoboxlink a:focus{
    outline:none;
    color:#000;
}


#SceneInfo
{
    /* SEO info */
    display:none;
    position:absolute;
    left:0px;
    top:0px;
    width:0px;
    height:0px;
}

/* Hauptframe, wird zentriert */
#mainFrame
{
    position:absolute;
    visibility: hidden;
    width:990px;
    height:712px;
    top:10px;
    margin:0px;
    padding:0px;
    border: none;
    overflow: hidden;
}

#tricki
{
}

#divTTip
{
    position:absolute;
    display: none;
    border: none;
    font-size:11px;
    z-index:10000;
    cursor:default;
}


#divInfoAreaCutter
{
    position:absolute;
    left:990px;
    top:115px;
    width:10px;
    height:425px;
    z-index:100;
}

#divDimmer
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:10000;
}

#divDimTop
{
    position:absolute;
    left:0px;
    top:0px;
    width:990px;
    height:115px;
}

#divDimBottom
{
    position:absolute;
    left:0px;
    top:540px;
    width:990px;
    height:160px;
}

#wazala_tab_c
{
    display: none;
}

.NavButton
{
    border:none;
    display:inline;
    cursor: pointer;
}

.navbutsmall
{
    font-size:11px;
}

.navbutmedium
{
    font-size:14px;
}

.navbutlarge
{
    font-size:16px;
}

.notinteractive
{
    display:inline;
    cursor: default !important;
}

#logoKubikfoto
{
    position: absolute;
    left:0px;
    top:69px;
    width:88px;
    height:20px;
}

#txtPresents
{
    position: absolute;
    left:89px;
    top:76px;
    width:332px;
    height:22px;
}

#imgWeltNatureerbe
{
    position: absolute;
    left:0px;
    top:89px;
    width:332px;
    height:22px;
}

#divTideFrame
{
    position: absolute;
    left:450px;
    top:548px;
    width:90px;
    height:34px;
}

#compass
{
    position: absolute;
    left:445px;
    top:548px;
    width:97px;
    height:14px;
    text-align:center;
}

#wasserstand
{
    position: absolute;
    left:450px;
    top:570px;
    width:90px;
    height:10px;
    border: solid 1px #999999;
    overflow:hidden;
}

#wasserstand_img
{
    position: absolute;
    left:0px;
    top:0px;
}

#divFoundPercentFrame
{
    position: absolute;
    left:450px;
    top:600px;
    width:90px;
    height:54px;
    text-align: center;
    border:solid 1px #999;
}
#divFoundPercent
{
    position: absolute;
    left:0px;
    top:0px;
    width:90px;
    height:18px;
    font-size: 18px;
    font-weight:bold;
}
#txtFoundPercent
{
    position: absolute;
    left:0px;
    top:24px;
    width:90px;
    height:38px;
    font-size:10px;
}

#divBonus
{
    position:absolute;
    left:450px;
    top:655px;
    width:90px;
    cursor: pointer;
    border:solid 1px #999;
    text-align: center;
    font-weight: normal;
}

#divBonus #txtBonus
{
    color:#333;
    font-weight: normal;
}

#divBonus.inactive
{
    cursor:default;
    font-weight: normal;
}
#divBonus.inactive #txtBonus
{
    color:#999;
    font-weight: normal;
}

#divTxtSupportedBy
{
    position: absolute;
    left:0px;
    top:600px;
    width:400px;
}

#divSupportedBy
{
    position: absolute;
    left:1px;
    top:620px;
    width:360px;
    height:80px;
}

.supportlogo
{
    background-repeat: no-repeat;
    display: inline-block;
    /*margin-right:13px;*/
}

#imgPoweredBy
{
    position: absolute;
    left:845px;
/*    top:664px;*/
    top:614px;
    width:145px;
    height:35px;
}

#debuginfo
{
    position: absolute;
    left: 0px;
    top: 6px;
    width:300px;
    height:22px;
    color:#333333;
    padding-left:3px;
    font-size:12px;
}

/* Sprache einstellen */

#divLanguage
{
    position: absolute;
    left: 0px;
    top: 6px;
    cursor:default;
}

/* Sound und Vollbild */
#divOptions
{
    position: absolute;
    left: 740px;
    top: 6px;
    width:250px;
    text-align: right;
    cursor:default;
}

#txtSound
{
    margin-left:7px;
}

/*  Winter / Sommer */
#divSeason
{
    position: absolute;
    left: 375px;
    top: 92px;
    width:300px;
    text-align: center;
    cursor:default;
}

/* Weiterempfehlen, Newsletter */
#divTools
{
    position: absolute;
    left: 590px;
    top: 92px;
    width:400px;
    text-align: right;
    cursor:default;
}

#divTools .navbutsmall
{
    margin-left:11px;
}

#cmdImpressum.black_buttonactive, #cmdImpressum.white_buttonactive
{
    margin-left:9px;
}

/* Wattwiki / Erlebnisse */
#divInteraction
{
    position: absolute;
    left: 590px;
    top: 546px;
    width:400px;
    cursor:default;
    text-align: right;
}

#divInteraction .navbutmedium
{
    margin-left:20px;
}

#divInteraction .black_buttonactive, #divInteraction .white_buttonactive
{
    margin-left:18px;
}

#cmdWattwiki.black_buttonactive, #cmdWattwiki.white_buttonactive
{
    margin-left:16px;
}

/* Flying und Small 5  */
#divTheFive
{
    position: absolute;
    left:368px;
    top:593px;
    cursor: default;
    z-index:5;
}

#divTheFiveInfo
{
    margin-top:-19px;
    width:420px;
    height:77px;
    cursor: default;
    z-index:100;
    display: none;
    font-size:12px;
    background:none;
    overflow: hidden;
}

#divTheFiveOff
{
    height:19px;
    width:395px;
}

#divTheFiveInfoField
{
    width:399px;
    vertical-align: top;
    display:inline-block;
    top:0px;
    left:0px;
}

/* Scroller for the TheFive Info Area */

#divTheFiveInfoScrollPane
{
    height:45px;
    overflow:hidden;
}

#divTheFiveScroller
{
    left:0px;
    top:5px;
    width:16px;
    display:inline-block;
    background: none;
    border: none;
}

#divTheFiveScrollBar
{
    cursor:pointer;
}

#divTheFiveScroller .ui-slider-handle
{
  width: 15px;
  height: 10px;
  position: absolute;
  left:-1px;
  border: none 1px black;
  cursor:pointer;
}

#divTheFiveScroller .ui-widget-content
{
    border: none;
    background: none;
}

#divTheFiveScroller .ui-corner-all
{
    border: none;
    background: none;
}

#divTheFiveScroller a img
{
    border: none;
}
#divTheFiveScroller a:active, #divTheFiveScroller a:focus{
    outline:none;
    color:#000;
}

#divFiveFrame
{
    display:inline-block;
}

#divFiveMargin
{
    width:22px;
    height:12px;
}

label
{
    margin-bottom:1px;
}

.label
{
    display:inline-block;
    margin-right: 5px;
}

.fiveFrame
{
    display:inline-block;
}

.fiveRect
{
    display:inline-block;
    width:8px;
    height:8px;
    z-index:101;
}

.sceneinfoimage
{
    float:left;
    margin-top:3px;
    width:82px;
}

.sceneimageframe
{
    float: left;
    margin-right:7px;
    height:99%;
}

.sceneinfotext
{
    font-size:11px;
    color:#999999;
    width:295px;
}

/* Spenden */

#divDonate
{
    position: absolute;
    left: 0px;
    top: 550px;
    width:400px;
    cursor:default;
}

#cmdDonate
{
/*    font-size:22px;*/
}

/*  Styles for the info pages  */

.ipMainTitle
{
    font-size:14px;
    font-weight:bold;
}

.FormButton
{
    cursor: pointer;
    text-align:left;
    font-size:16px;
    border-style: none !Important;
    margin:0 !Important;
    padding:0 !Important;
}


/* CCS for Tell A Friend  */
.divsocialnetworks
{
    margin:0;
}

.divsocialnetworks ul
{
    margin: 0;
    padding: 0;
}

.divsocialnetworks li
{
    float: left;
    list-style: none;
    margin: 0 0 0 7px;
    padding:0;
}

.divsocialnetworks li img
{
    padding: 1px;
    border: solid 1px #666;
    width:16px;
    height:16px;
    cursor:pointer;
}

.divsocialnetworks .FirstOne
{
    margin-left:0 !important;
}

#MailAFriend  textarea
{
    overflow: hidden;
}

.message
{
    border: none;
    color:black;
}
.error
{
    border: none;
    color:red;
}

.InfoArea
{
    position: relative;
    left:1026px;
    top:115px;
    margin: 0;
    padding: 0;
    width:0px;
    height: 425px;
    z-index:100;
    overflow-x:hidden;
}

.InfoAreaTransparenz
{
    /* doch keine opacity setzen !!!!
    filter:alpha(opacity=80);
    opacity: 0.8;
    -modz-opacity:0.8;
    -khtml-opacity:0.8;
    */
}

.InfoDiv
{
    width:630px;
    height:370px;
    font-size: 12px;
    margin-top:15px;
    margin-left:25px;
    margin-right:10px;
    margin-bottom:40px;
    overflow: hidden;
    display:none;
}

.InfoDivTitle
{
    position: relative;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
    left: 0px;
    top:9px;
    width:300px;
}

.InfoDivContent
{
    position: relative;
    font-size: 12px;
    width:440px;
}

.InfoCloseButton
{
    position:relative;
    left:0px;
    top:0px;
    width:200px;
    font-size: 11px;
    cursor: pointer;
    text-align:left;
}

.InfoDivScrollPane
{
    position:absolute;
    width:620px;
    height:325px;
    margin-top:7px;
    overflow:hidden;
}


.InfoDivScrollContent
{
    position:absolute;
    left:0px;
    top:0px;
    width:440px;
}

/* Scroller für die Info Areas */
.InfoDivScrollbar
{
    position:absolute;
    left:598px;
    top:0px;
    width:16px;
    height:100%;
    margin-left:2px;
    border:none;
    background: none;
    z-index:110;
}

.InfoDivScrollbarLine
{
    position:absolute;
    display:none;
    left:608px;
    top:2px;
    width:1px;
    height:320px;
    background-color:#aaaaaa;
}

.InfoDivScrollPane .ui-state-default
{
    background: none;
    border: none;
}

.InfoDivScrollPane .ui-slider-vertical
{
    width:17px;
    background: none;
    border: none;
}

.InfoDivScrollPane .ui-slider-handle
{
    width: 15px;
    height: 10px;
    position: absolute;
    left:-1px;
    border: none;
    cursor:pointer;
    background:none;
}

.InfoDivScrollPane .ui-widget-content
{
    border: none;
    background: none;
}

.InfoDivScrollPane .ui-corner-all
{
    border: none;
    background: none;
}

.InfoDivScrollPane .ui-state-hover
{
    border-color:black;
    background: none;
}

.InfoDivScrollPane a img
{
    border: none;
    background: none;
}

.InfoDivScrollPane a:hover, .InfoDivScrollPane a:active, .InfoDivScrollPane a:focus
{
    outline:none;
    color:#000;
    border-color:black;
}

.kf_mainFrame
{
    position: absolute;
    left:0px;
    top: 0px;
    background-color: transparent;
    border: none;
    z-index:100;
    display:block;
    overflow:hidden;
    padding:2px;
}

#nav_islandmap
{
    position:absolute;
    left:928px;
    top: 117px;
    width: 62px;
    height:25px;
    z-index: 99;
    display:none;
    cursor: pointer;
}

#nap_island_image
{
    position:absolute;
    left:0px;
    bottom: 0px;
}

#IslandMapFrame, #IslandMapPins
{
    position:absolute;
    left:0px;
    top:0px;
    width:660px;
    height:425px;
    overflow: hidden;
    display:block;
}

#IslandMapOverview_Hover, #IslandMapOverview_Selection, #IslandMapOverview_MapAreas
{
    position:absolute;
    left:0px;
    top:0px;
    width:283px;
    height:101px;
    overflow: hidden;
    display:block;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: none;
}

#IslandMapOverview
{
    position:absolute;
    right:0px;
    bottom:0px;
    width:283px;
    height:101px;
    overflow: hidden;
    display:block;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(../images/islandmap/map_overview.png);
}

#IslandMap
{
    position:absolute;
    left:0px;
    top:0px;
    width:660px;
    height:425px;
    overflow: hidden;
    display:block;
    background-position: left top;
    background-repeat: no-repeat;
}

.IslandMapTTip
{
    overflow: hidden;
/*    padding: 9px;*/
    font-size: 11px;
    color: #222222;
/*    background-color: #ffffff;*/
    border: solid 1px #dddddd;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: 2px 2px 2px #777;
    -moz-box-shadow: 2px 2px 2px #777;
    -webkit-shadow: 2px 2px 2px #777;
    -o-box-shadow: 2px 2px 2px #777;
}


#sceneinfofield
{
    position:absolute;
    left:2px;
    top: 523px;
    width: 990px;
    height:18px;
    z-index: 99;
    display:none;
    overflow: hidden;
}

#sceneinfofieldinnerframe
{
    position:absolute;
    left:0px;
    top: 50px;
    width: 100%;
    height:100%;
}

#sceneinfofield div.fieldbackground
{
    position:absolute;
    left:0px;
    top: 0px;
    width: 100%;
    height:100%;
    background-color: white;
    filter:alpha(opacity=50);
    opacity: 0.5;
    -modz-opacity:0.5;
    -khtml-opacity:0.5;
}
#sceneinfofieldtext
{
    position:absolute;
    left:0px;
    top: 1px;
    width: 100%;
    height:100%;
    color: #000;
    padding-left:3px;
    font-size: 12px;
}


/***********  Black site of life  *************/

.black_background
{
    background-color:black;
}

.black_invisible
{
    color:black;
    background-color:black;
    font-size:1px;
}

.black_foreground
{
    color:#cccccc;
    font-family: 'Calibri', 'Arial';
}

.black_foreground_high
{
    color:white;
}

.black_foreground_active
{
    color: #eeeeee;
}

.black_navbutton, .black_tooltip, .black_notinteractive
{
    color: #666666;
}

.black_buttonactive
{
    color:#bbbbbb !important;
    font-weight:bold;
}
.black_buttonhover
{
    color:#ffffff !important;
}

.black_infoarea
{
    background-image: url(../images/black/infobackground.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-color:#111111;
    border: solid 1px #222222;
    color:white;
}

.black_foreground a:link, .black_foreground a:visited
{
    color: #cccccc;
}

.black_foreground a:hover, .black_foreground a:active
{
    color: #eeeeee;
}

.black_infoarea .inputfield
{
    color:white;
    font-family: 'Calibri', 'Arial';
}

.black_infoarea .FormButton
{
    color:#666666;
}

.black_logoKubikfoto
{
    background-image: url(../images/black/kubikfoto_logo.png);
}

.black_imgWeltNatureerbe
{
    background-image: url(../images/black/de/weltnatureerbe.png);
}




.black_imgLogoUnesco
{
    background-image: url(../images/black/logo_unesco.png);
    width:92px;
    height:80px;
}

.black_imgLogoNationalpark
{
    background-image: url(../images/black/logo_nationalpark.png);
    width:41px;
    height:40px;
    margin-bottom:33px;
    margin-left:5px;
}

.black_imgLogoSecreariat
{
    background-image: url(../images/black/logo_secretariat.png);
    width:69px;
    height:74px;
    margin-bottom:0px;
    margin-left:0px;
}

.black_imgLogoUnesco_Colored
{
    background-image: url(../images/black/logo_unesco_colored.png);
    width:92px;
    height:80px;
}

.black_imgLogoNationalpark_Colored
{
    background-image: url(../images/black/logo_nationalpark_colored.png);
    width:41px;
    height:40px;
    margin-bottom:33px;
    margin-left:5px;
}

.black_imgLogoSecreariat_Colored
{
    background-image: url(../images/black/logo_secretariat_colored.png);
    width:69px;
    height:74px;
    margin-bottom:0px;
    margin-left:0px;
}

.black_imgPoweredBy
{
    background-image: url(../images/black/poweredby_logo.png);
}

.black_wasserstand
{
    /*
    background-image: url(../images/black/wasserstand.png);
    */
}

.black_compass
{
    background-image: url(../images/black/compass.png);
}

.black_fiveRect
{
    border: solid 1px #666666;
}

.black_infohighlighted
{
    color:#bbbbbb;
}

.black_buttonhighlighted
{
    color:#dddddd;
}



/******************* White punks on dope ****************/
.white_background
{
    background-color:white;
}

.white_invisible
{
    color:white;
    background-color:white;
    font-size:1px;
}

.white_foreground
{
    color:#444444;
    font-family: 'Calibri', 'Arial';
}

.white_foreground_high
{
    color:black;
}

.white_foreground_active
{
    color: #222222;
}

.white_navbutton, .white_tooltip, .white_notinteractive
{
    color: #666666;
}

.white_buttonactive
{
    color:#333333 !important;
    font-weight:bold;
}
.white_buttonhover
{
    color:#000000 !important;
}

.white_infoarea
{
    background-image: url(../images/white/infobackground.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-color:#eeeeee;
    border: solid 1px #dddddd;
    color:black;
}
.white_foreground a:link, .white_infoarea a:visited
{
    color: #333333;
}

.white_foreground a:hover, .white_infoarea a:active
{
    color: #000000;
}

.white_infoarea .inputfield
{
    color:#333333;
    background-color: #eeeeee;
    font-family: 'Calibri', 'Arial';
}

.white_infoarea .FormButton
{
    color:#666666;
}

.white_logoKubikfoto
{
    background-image: url(../images/white/kubikfoto_logo.png);
}

.white_imgWeltNatureerbe
{
    background-image: url(../images/white/de/weltnatureerbe.png);
}

.white_imgLogoUnesco
{
    background-image: url(../images/white/logo_unesco.png);
    width:92px;
    height:80px;
}

.white_imgLogoWattenmeer
{
    background-image: url(../images/white/logo_wattenmeer.png);
    width:96px;
    height:38px;
    margin-left:8px;
    margin-bottom:31px;
}

.white_imgLogoNationalpark
{
    background-image: url(../images/white/logo_nationalpark.png);
    width:41px;
    height:40px;
    margin-bottom:33px;
    margin-left:5px;
}

.white_imgLogoSecreariat
{
    background-image: url(../images/white/logo_secretariat.png);
    width:69px;
    height:74px;
    margin-bottom:0px;
    margin-left:0px;
}

.white_imgLogoUnesco_Colored
{
    background-image: url(../images/white/logo_unesco_colored.png);
    width:92px;
    height:80px;
}

.white_imgLogoWattenmeer_Colored
{
    background-image: url(../images/white/logo_wattenmeer_colored.png);
    width:96px;
    height:38px;
    margin-left:8px;
    margin-bottom:30px;    
}

.white_imgLogoNationalpark_Colored
{
    background-image: url(../images/white/logo_nationalpark_colored.png);
    width:41px;
    height:40px;
    margin-bottom:33px;
    margin-left:5px;
}

.white_imgLogoSecreariat_Colored
{
    background-image: url(../images/white/logo_secretariat_colored.png);
    width:69px;
    height:74px;
    margin-bottom:0px;
    margin-left:0px;
}

.white_imgPoweredBy
{
    background-image: url(../images/white/poweredby_logo.png);
}

.white_wasserstand
{
    /*
    background-image: url(../images/white/wasserstand.png);
    */
    
}

.white_compass
{/*
    background-image: url(../images/white/compass.png);
    */
}

.white_fiveRect
{
    border: solid 1px #666666;
}

.white_infohighlighted
{
    color:#333333;
}

.white_buttonhighlighted
{
    color:#444444;
}