html, body {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: black;
    color: white;
    font-family: sans-serif;
    font-size: 8pt;
    min-height: 300px;
}

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

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

.horizontallyCenteredBlock 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#topBannerContainer
{
    display: none;          /* Will be toggled by JavaScript */
    overflow: hidden;
    position: relative;
    height: 68px;
    width: 100%;
    border-bottom: 1px solid #999;
}

#bottomBannerContainer
{
    display: none;          /* Will be toggled by JavaScript */
    overflow: hidden;
    position: absolute;
    bottom: 0;
    height: 68px;
    width: 100%;
    border-top: 1px solid #999;
}

#bottomLargeBanner
{
    float: left;
}

#bottomSmallBanner
{
    float: right;
}

#mainContainer 
{
    position: relative;
    height: 70%;            /* A good initial guess; it will be dynamically recalculated */
    width: 100%;
    z-index: 10;
}

#videoContainer
{
    position: absolute;
    overflow: hidden;
}

#videoContainer.normal
{
    width: 33%;
    height: 50%;
    top: 0px;
    left: 0px;
}

#videoContainer.swapped
{
    width: 66%;
    height: 100%;
    top: 0px;
    right: 0px;
    border-left: 1px solid #999;
}

#videoContainer.reversed
{
    width: 33%;
    height: 50%;
    top: 0px;
    right: 0px;
}

#videoContainer.reversedswapped
{
    width: 66%;
    height: 100%;
    top: 0px;
    left: 0px;
    border-right: 1px solid #999; 
}

#infoContainer
{
    position: absolute;
    /* border-top: 1px solid #999; */
    width: 33%;
    height: 49%;
    bottom: 0px;
    overflow: hidden;
}

#infoContainer.normal, #infoContainer.swapped
{
    left: 0px;
}

#infoContainer.reversed, #infoContainer.reversedswapped
{
    right: 0px;
}

.infoTabs 
{
    position: absolute;
    height:25px;
    width:100%;
    overflow: hidden;
    border-top:1px none #999; 
}

.infoTabsLine
{
    position: absolute;
    border-bottom:1px solid #999; 
    height:24px;
    width:100%;
    overflow: hidden;
    z-index: -1;
}

.infoTabs ul 
{
    margin:0px; 
    padding:0px; 
    list-style:none; 
}

.infoTabs li 
{
    display:inline; 
    line-height:25px;
}

.infoTabs li a 
{
    color: #999;
    background-color:#303030; 
    text-decoration:none; 
    padding:4px 5px 5px 5px;  
    border:1px solid #999; 
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.infoTabs li a.active 
{
    color: #999;
    background-color:black; 
    font-weight:bold;
    padding-bottom:7px;
    border-bottom:0px;
}

.infoTabContent 
{
    position: absolute;
    top: 25px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 10px;
    display: none;
    overflow: hidden;
}

.infoTabContent.active
{
    display: block;
}

#infoTabContentInfo_Table
{
    position: absolute;
    left: 5%;
    right: 5%;
    top: 5%;
}

#infoTabContentInfo_SoftwareBy
{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: black;
    padding: 10px 5% 5px 5%;
}

#infoTabContentInfo_SoftwareBy span
{
    float: right;
}

#infoTabContentChapters_Table
{
    position: absolute;
    left: 5%;
    right: 5%;
    top: 5%;
}

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

#slideContainer
{
    position: absolute;
}

#slideContainer.normal
{
    width: 66%;
    height: 100%;
    top: 0px;
    right: 0px;
    border-left: 1px solid #999;

}

#slideContainer.swapped
{
    width: 33%;
    height: 50%;
    top: 0px;
    left: 0px;
}

#slideContainer.reversed
{
    width: 66%;
    height: 100%;
    top: 0px;
    left: 0px;
    border-right: 1px solid #999; 
}

#slideContainer.reversedswapped
{
    width: 33%;
    height: 50%;
    top: 0px;
    right: 0px;
}

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

#resizeHandle
{
    position: absolute;
    background: transparent url("resize_handle.gif") no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    top: 20px;
    left: 20px;
    cursor: all-scroll;
}

#controlsContainer 
{
    position: relative;
    height: 40px;
    width: 100%;
    border-top: 1px solid #999;
    background-color: #303030;
    overflow: hidden;
    text-align:center;      /* Will be applied to those who do not have float left/right */
}

.control
{
    position: relative;
    display: inline-block;
    margin: 2px 5px;
    height: 36px;
    overflow: hidden;
}

.control.left
{
    float: left;
}

.control.right
{
    float: right;
}

.control.separator
{
    margin: 0px 5px;
    height: 40px;
    border-left: 1px solid #999;
    width: 1px;
}

.control.space
{
    margin: 0px 0px;
    width: 5px;
}

.control button
{
    margin: 6px 0 0 0;
    height: 24px;
    cursor: pointer;
}

.control.image 
{ 
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.control.image:active 
{ 
    opacity: 0.5; 
}

.control.text 
{ 
    margin-top: 11px;
    height: 29px;
    font-size: 10pt;
}

/* Individual images */
.leftarrow  { background-image: url("left.png"); width: 36px; background-size: contain; }
.fb         { background-image: url("fb.png"); width: 36px; background-size: contain; }
.play       { background-image: url("play.png"); width: 36px; background-size: contain; }
.pause      { background-image: url("pause.png"); width: 36px; background-size: contain; }
.ff         { background-image: url("ff.png"); width: 36px; background-size: contain; }
.rightarrow { background-image: url("right.png"); width: 36px; background-size: contain; }
.cz         { background-image: url("cz.gif"); width: 26px; }
.cz.active  { background-image: url("cz_act.gif"); width: 26px; }
.en         { background-image: url("en.gif"); width: 26px; }
.en.active  { background-image: url("en_act.gif"); width: 26px; }


#thumbsContainer 
{
    display: none;
    border-top: 1px solid #999;
    position: relative;
    width: 100%;
    height: 140px;
    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: white;
}

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

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