body {
  margin: 0;
  padding: 0;
}
#ad ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.content .viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#youtube {
    position: absolute;
    top: 50px;
}

#ad {
  background: url("images/300x250.jpg");
  display: none;
} 
.boxes{
  position: absolute;
  top: 70px;
  left: 13px;
}
.wrapper{
    width: 300px;
    height: 250px;
}
a { 
    display: block; 
    height: 100% 
}
.top{
    float: left;
}
.tile_hover {
    opacity: 0.9;
}

.black{
    width: 220px;
    height: 110px;
    background: url("images/posterimage.jpg");
}
.black_content{
    position: absolute;
    top: -70px;
    left: -13px;
    width: 300px;
    height: 250px;
    background: url("images/300x250.jpg");
    display: none;
    z-index: 2;
}

.brown{
    width: 55px;
    height: 55px;
    background: url("images/55x55colorgroup.png");
    clear: left;
}
.brown_bottom{
    width: 55px;
    height: 55px;
    background: url("images/55x55group.png");
    clear: left;
}
.brown_content{
    position: absolute;
    width: 300px;
    height: 250px;
    top: -70px;
    left: -13px;
    background: url("images/300x250group.png");
    display: none;
    z-index: 2;
}

.red{
    width: 55px;
    height: 55px;
    background: url("images/55x55colorbox.png");
    clear: left;
}
.red_bottom{
    width: 55px;
    height: 55px;
    background: url("images/55x55box.png");
    clear: left;
}
.red_content{
    position: absolute;
    width: 300px;
    height: 250px;
    top: -70px;
    left: -13px;
    background: url("images/300x250box.png");
    display: none;
    z-index: 2;
}

.purple{
    width: 55px;
    height: 55px;
    background: url("images/55x55colorsystem.png");
}
.purple_bottom{
    width: 55px;
    height: 55px;
    background: url("images/55x55system.png");
}
.purple_content{
    position: absolute;
    width: 300px;
    height: 250px;
    top: -70px;
    left: -13px;
    background: url("images/300x250system.png");
    display: none;
    z-index: 2;
}


.blue{
    width: 55px;
    height: 55px;
    background: url("images/55x55colorsensor.png");
}
.blue_bottom{
    width: 55px;
    height: 55px;
    background: url("images/55x55sensor.png");
}
.blue_content{
    position: absolute;
    width: 300px;
    height: 250px;
    top: -70px;
    left: -13px;
    background: url("images/300x250sensor.png");
    display: none;
    z-index: 2;
}

.yellow{
    width: 55px;
    height: 55px;
    background: url("images/55x55colorcontroller.png");
}
.yellow_bottom{
    width: 55px;
    height: 55px;
    background: url("images/55x55controller.png");
}
.yellow_content{
    position: absolute;
    width: 300px;
    height: 250px;
    top: -70px;
    left: -13px;
    background: url("images/300x250controller.png");
    display: none;
    z-index: 2;
}

.green{
    width: 55px;
    height: 55px;
    background: url("images/55x55learn.png");
}

.orange{
    width: 110px;
    height: 55px;
    background: url("images/CTAnormal.png");
}
.orange:hover{
    width: 110px;
    height: 55px;
    background: url("images/CTAHover.png");
}

.bottom {
    clear: both;
    float: left;
}
div{
    float: left;
}

#video {
        position:absolute;
        z-index:1;
        top: 0px;
        left: 0px;
        width:300px;
        height:250px;
}
#disablingDiv
{
    display: block; 
    z-index:1001;
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 300px; 
    height: 250px; 
    background-color: white; 
    opacity:.00; 
    filter: alpha(opacity=00); 
}