html 
{
    /* Without this workaround MSIE and Google Chrome didn't allow to scroll to the top of the page
       when the height of browser window was smaller than the height of the contents.
       In this case the calculated margin was negative and given browsers cut of the negative part. 

       This workaround sets the reference box starting at zero offset and with minimal height equal to 
       the contents height and also at least equal to the height of the browser window. */
    height: 100%;
    /* min-height: 522px;   // This will be added by a JavaScript  */
    position: relative;
}

body 
{
    background: url("bgblue.jpg");
    font-family: sans-serif;
    font-size: 8pt;
    color: white; 
}

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

a:hover, a:active
{
    color: white;
    text-decoration: underline;
}

.wrapper 
{
    width: 961px;
    height: 522px;
    background: black;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.topbanner
{
    display: none;          /* Will be toggled by JavaScript */
    overflow: hidden;
    position: relative;
    height: 68px;
}

.bottombanner
{
    display: none;          /* Will be toggled by JavaScript */
    overflow: hidden;
    position: relative;
    height: 68px;
}

.bottomLargeBanner.normal,
.bottomLargeBanner.swapped
{
    float: right;
}

.bottomLargeBanner.reversed,
.bottomLargeBanner.reversedswapped
{
    float: left;
}

.bottomSmallBanner.normal,
.bottomSmallBanner.swapped
{
    float: left;
}

.bottomSmallBanner.reversed,
.bottomSmallBanner.reversedswapped
{
    float: right;
}

.main 
{
    width: 961px;
    height: 522px;
    position: relative;
}

.top 
{
    height: 20px;
}

.menu 
{
    float: left;
    margin: 2px 20px;
}

.menuright
{
    float: right;
    margin: 2px 2px;
}

.menu a:link, .menu a:visited
{
    font-style: italic;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

.menu a:hover, .menu a:active
{
    font-style: italic;
    font-weight: bold;
    color: orange;
    text-decoration: none;
}

.bottom {
    height: 20px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    margin: auto;
}

.softwareBy 
{
    float: right;
    margin: 2px 20px;
}

.video
{
    position: absolute;
    background: black;
    z-index: 10;
}

.video.normal
{
    width: 320px;
    height: 240px;
    top: 20px;
    left: 0px;
    border:1px solid #999; 
    border-left: 0px;
}

.video.swapped
{
    width: 640px;
    height: 480px;
    top: 20px;
    left: 321px;
    border:1px solid #999; 
    border-left: 0px;
    border-right: 0px;
}

.video.reversed
{
    width: 320px;
    height: 240px;
    top: 20px;
    left: 640px;
    border:1px solid #999; 
    border-right: 0px;
}

.video.reversedswapped
{
    width: 640px;
    height: 480px;
    top: 20px;
    left: 0px;
    border:1px solid #999; 
    border-left: 0px;
    border-right: 0px;
}

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

.info
{
    position: absolute;
    background: black;
    z-index: 10;
}

.info.normal, .info.swapped
{
    width: 320px;
    height: 239px;
    top: 262px;
    left: 0px;
    border:1px solid #999; 
    border-left: 0px;
    border-top: 0px;
}

.info.reversed, .info.reversedswapped
{
    width: 320px;
    height: 239px;
    top: 262px;
    left: 640px;
    border:1px solid #999; 
    border-right: 0px;
    border-top: 0px;
}

.infoTable
{
    margin: 20px 20px;
    width: 280px;
}

.slide
{
    position: absolute;
    background: black;
    z-index: 10;
}

.slide.normal
{
    width: 640px;
    height: 480px;
    top: 20px;
    left: 321px;
    border:1px solid #999; 
    border-left: 0px;
    border-right: 0px;
}

.slide.swapped
{
    width: 320px;
    height: 240px;
    top: 20px;
    left: 0px;
    border:1px solid #999; 
    border-left: 0px;
}

.slide.reversed
{
    width: 640px;
    height: 480px;
    top: 20px;
    left: 0px;
    border:1px solid #999; 
    border-left: 0px;
    border-right: 0px;
}

.slide.reversedswapped
{
    width: 320px;
    height: 240px;
    top: 20px;
    left: 640px;
    border:1px solid #999; 
    border-right: 0px;
}

#slideImg
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

.thumbs
{
    /* Thumbnails have z-index 0 and therefore they are initially hidden behind the other elements */
    display: block;
    width: 961px;
    height: 140px;
    position: absolute;
    bottom: 20px;
    margin: auto;
    overflow: auto;
}

.thumb
{
    position: absolute;
    width: 144px;
    height: 108px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

.thumb a:link, .thumb a:visited
{
    color: black;
}

.thumb a:hover, .thumb a:active
{
    color: orange;
}

.thumb.selected a:link, .thumb.selected a:visited
{
    color: white;
}

.thumbImg
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}