/* ------------------------------------------------------------ */
#global-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


#mapwrapper {
    /* margin: 0 0px 0 198px; */
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    font-size: 10px;
}


/* ------------------------------------------------------------ */
/* PhotoGallery */
/* ------------------------------------------------------------ */
#photogallery {
    display: none;
    position: absolute;
    top: 95px;
    left: 25px;
    width: 998px;
    height: 480px;
    z-index: 3;
}

#photogallery-header {
    height: 35px;
    background: transparent url(/img/ui/top_gallery.png) no-repeat left top;
}

#photogallery-content {
    height: 455px;
    z-index: 5;
    /* background-color: #000; */
    background: transparent url(/img/ui/body_gallery.png) repeat-y left bottom;
}

#photogallery-footer {
    background: transparent url(/img/ui/bottom_gallery.png) no-repeat left bottom;
    height: 54px;
}

#photogallery-flash {
    margin-top: 0px;
}

#photogallery-title {
    width: 100%;
    height: 100%;
}

#photogallery-header .closebutton {
    cursor: pointer;
    position: relative;
    top: -10px;
    left: 5px;
    float: right;
}


/* ------------------------------------------------------------ */
/* Navigation */
/* ------------------------------------------------------------ */
#navigation {
    position: absolute;
    top: 94px;
    left: 2px;
    z-index: 2;
    width: 204px;
}

#navigation-header {
    height: 35px;
    padding-left: 1px;
    background: transparent url(/img/ui/top.png) no-repeat left top;
}

#navigation-footer {
    background: transparent url(/img/ui/bottom.png) no-repeat center bottom;
    height: 40px;
}

#navigation-content {
    width: 210px;
    background: transparent url(/img/ui/body.png) repeat-y left bottom;
}

#accordion {
    position: relative;
    top: 0px;
    left: 11px;
    width: 176px;
    z-index: 2;
    padding: 0px 0px;
    background-color: black;
}

#spotlist {
    display: none;
    position: absolute;
    top: 94px;
    left: 205px;
    width: 380px;
    z-index: 4;
}

#spotlist-content {
    background: transparent url(/img/ui/body_spot.png) repeat-y left top;
}

#spotlist-content-inner {
    position: relative;
    overflow: auto;
    width: 352px;
    left: 14px;
}

#spotlist-header {
    background: transparent url(/img/ui/top_spot.png) no-repeat left top;
    height: 35px;
    width: 380px;
}

#spotlist-footer {
    background: transparent url(/img/ui/bottom_spot.png) no-repeat 0px bottom;
    padding: 53px 0px 0px 0px;
}

#spotlist .closebutton {
    cursor: pointer;
    position: relative;
    top: -10px;
    left: 9px;
    float: right;
}


/* ------------------------------------------------------------ */
/* Showcase */
/* ------------------------------------------------------------ */
#showcase {
    display: none;
    position: absolute;
    top: 94px;
    right: 0px;
    width: 454px;
    font-size: 10px;
    z-index: 2;
    overflow: visible;
}

#showcase-header {
    background: transparent url(/img/ui/top_show.png) no-repeat left top;
}

#showcase-content {
    background: transparent url(/img/ui/body_show.png) repeat-y left top;
    padding: 0px 10px;
}

#showcase-content-inner {
    overflow: auto;
    width: 420px;
}

#showcase-footer {
    background: transparent url(/img/ui/bottom_show.png) no-repeat left bottom;
    height: 49px;
}

#showcase-title {
    position: relative;
    width: 400px;
    line-height: 1.4;
    font-size: 12px;
    text-align: center;
    color: #fff;
    padding: 10px 0px;
}

#showcase .closebutton {
    cursor: pointer;
    position: relative;
    top: -10px;
    left: -3px;
    float: right;
}


/* ------------------------------------------------------------ */
/* Player */
/* ------------------------------------------------------------ */
#player {
    position: relative;
    width: 400px;
    height: 300px;
    color: #b9b9b9;
}


/* ------------------------------------------------------------ */
/* Views */
/* ------------------------------------------------------------ */
#views, #extras {
    width: 400px;
    height: 30px;
}

#views {
    background: transparent url(/img/backgrounds/views.png) repeat-x 0 0;
}

#extras {
    background: transparent url(/img/backgrounds/extras.png) repeat-x 0 0;
}


/* ------------------------------------------------------------ */
/* Card */
/* ------------------------------------------------------------ */
#card {
    color: #111;
    background-color: #8d8d8d;
    width: 400px;
}

#card-header {
    height: 20px;
    background: transparent url(/img/ui/top_card.png) no-repeat left top;
}

#card-content {
    z-index: 5;
    background: transparent url(/img/ui/body_card.png) repeat-y left bottom;
    /* overflow: auto; */
}

#card-footer {
    background: transparent url(/img/ui/bottom_card.png) no-repeat left bottom;
    height: 15px;
}


#card h2, #card h1 {
    padding: 0.1em 2em 0.3em 1.4em;
    font-size: 1.3em;
    text-shadow: #c7c7c7 1px 1px 0;
    text-align: justify;
}

#card p {
    padding: 0.3em 2em 0.3em 1.4em;
    font-size: 1.2em;
    text-align: left;
    line-height: 1.4em;
    text-shadow: #9e9e9e 1px 1px 0;
}

#card a {
    color: #1f5ab3;
}

#card a:hover {
    text-decoration: underline;
}

#card ul {
    margin: 0px;
    padding: 0.6em 2em 0em 2.2em;
    font-size: 1.2em;
    list-style-type: disc;
}

#card li {
    line-height: 1.4em;
    text-align: left;
}


/* ------------------------------------------------------------ */
/* Accordion */
/* ------------------------------------------------------------ */
a.category {
    display: block;
    outline: none;
    font-size: 11px;
    line-height: 24px;
    padding-left: 0.7em;
    background-color: black;
    background-image: url(../img/backgrounds/accordion-inactive.png);
    background-repeat: no-repeat;
    color: #CDCDCD;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    border: none;
}

a.category:hover {
    color: #F88600;
    background-image: url(../img/backgrounds/accordion-active.png);
}

a.subcategory {
    display: block;
    outline: none;
    font-size: 11px;
    line-height: 2.4em;
    padding: 5px 0px 0px 0px;
    height: 2.4em;
    color: #CDCDCD;
    background-color: #333333;
    cursor: pointer;
    text-decoration: none;
    z-index: 1;
    text-shadow: #000000 1px 1px 0px;
}

a.subcategory img, a.subcategoryactive img {
    vertical-align: text-bottom;
    margin-right: 0.5em;
    margin-left: 0.5em;
    z-index: 1;
}

a.subcategory:hover, a.subcategoryactive {
    color: white;
    background-color: #666666;
    z-index: 1;
}

/* This declaration is needed for IE, otherwise there are gaps between
   list items with display:block contents */
#accordion div ul li { width: 100%; }

/* ------------------------------------------------------------ */
/* Spotlist */
/* ------------------------------------------------------------ */
.spot {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #CCCCCC;
    cursor: pointer;
    text-decoration: none;
    padding: 0px 0px 10px 0px;
}

.spot .spothover {
    background-color: #cccccc;
}

.spot img {
    display: block;
    position: relative;
    left: 16px;
    top: 13px;
}

.spot div {
    width: 335px;
    height: 131px;
    background: #727272 url(../img/backgrounds/frame-inactive.png) no-repeat 0 0;
}

.spot p {
    line-height: 2;
    background-color: #727272;
    text-shadow: #000000 1px 1px 0;
    text-align: center;
    width: 335px;
    margin: -3px 0px 0px 0px;
}

.spothover div, .spotactive div {
    background: #222222 url(../img/backgrounds/frame-active.png) no-repeat 0 0;
}

.spothover p, .spotactive p {
    background-color: #cccccc;
    color: #222222;
    text-shadow: #dadada 0 1px 0;
}


.num {
    /* background: transparent url(../img/backgrounds/num_body.png) repeat-x 0 0; */
    border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #808080;
    background-color: #ccc;
    color: black;
    text-shadow: none;
    padding: 2px 4px;
    margin-left: 5px;
    font-size: 10px;
    font-family: Arial Helvetica sans-serif;
    font-weight: bold;
}

.num-left {
    background: transparent url(../img/backgrounds/num_left.png) no-repeat  0 0;
    padding: 3px 2px;
    text-indent: -99999px;
    font-size: 10px;
}

.num-right {
    background: transparent url(../img/backgrounds/num_right.png) no-repeat 0 0;
    padding: 3px 2px;
    text-indent: -99999px;
    font-size: 10px;
}