body {
    font-family: Monospace;
    margin: 0px;
    overflow: hidden;
}
#bannerBg{
    position: absolute;
    top: 0;
    right: 0;
    height: 600px;
    width: 300px;
    background-image:url(cube-300-frame.png);
    cursor : pointer;
    z-index: -3;
}
#arrowContainer{
    position: absolute;
    width: 550px;
    height: 550px;
    z-index: 11;
    left: 45px;
    top:25px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#findOutMore{
    position: absolute;
    width: 440px;
    height: 127px;
    bottom: 0px;
    left: 0px;
}

#exploreNow{
    position: absolute;
    width: 180px;
    height: 40px;
    bottom: 40px;
    right: 240px;
    background-image: url(exploreNow.png);
}

#arrow{
    position: absolute;
    height: 49px;
    width: 30px;
    background-image: url(arrow.png);
    z-index: 11;
    opacity: 0.6;
}
#arrow:hover{
    background-image: url(arrow_h.png);
    cursor: pointer;
}

#container{
    width: 976px;
    height: 600px;
    position: absolute;
}

#videoHolder{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    z-index: 1002;
    opacity: 0;
}

#videoPlayer{
    position: absolute;
    top: 25px;
    left: 0px;
    width: 976px;
    height: 549px;
}

#rotateMessage{
    position: absolute;
    width: 308px;
    height: 35px;
    left: 170px;
    bottom: 280px;
    background-image: url(rotateMessage.png);
    opacity: 0;
    z-index: 12;
    pointer-events: none;
}
#threeCanvas{
    position: absolute;
    width: 976px;
    height: 600px;
    left: 340px;
    z-index: 10;
}
#overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 976px;
    height: 600px;
    text-align: center;
    font-size: 20px;
    z-index:1001;
}
#closeButton{
    position: absolute;
    height: 26px;
    width:26px;
    right:5px;
    top:5px;
    background-image: url(closebtn.png);
    cursor: pointer;
}

#expand{
    position: absolute;
    width: 180px;
    height: 40px;
    right:60px;
    bottom:25px;
    background-image: url(expand.png);
    z-index: 30;
}

#counter{
    position: absolute;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.7);
    width:150px;
    height: 150px;
    right:75px;
    top: 300px;
    z-index: 1000;
    color: #fff;
    font-size: 60px;
    text-align: center;
    line-height: 150px;
}

#expand:hover{
    background-image: url(expand_h.png);
}

#contractButton{
    position: absolute;
    height: 26px;
    width:26px;
    right:305px;
    top:5px;
    background-image: url(closebtn.png);
    z-index: 30;
}

#rollover1, #rollover2, #rollover3, #rollover4, #rollover5 {
    position:absolute;
    bottom: 177px;
    width:148px;
    height:148px;
    z-index: 9999;
}

#rollover1 { left: 36px; }
#rollover2 { left: 226px; }
#rollover3 { left: 416px; }
#rollover4 { left: 604px; }
#rollover5 { left: 794px; }

#rolloverBox1, #rolloverBox2, #rolloverBox3, #rolloverBox4, #rolloverBox5 {
    position:absolute;
    top: 46px;
    left:98px;
    width: 780px;
    height: 220px;
    z-index:9999;
    opacity:0;
}

#rolloverBox1 { background: url('overlay1.png'); }
#rolloverBox2 { background: url('overlay2.png'); }
#rolloverBox3 { background: url('overlay3.png'); }
#rolloverBox4 { background: url('overlay4.png'); }
#rolloverBox5 { background: url('overlay5.png'); }