html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000 none;
  text-align: center;
}

a {
  outline: none;
  text-decoration: none;
}

.clear {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}

#main {
  width: 896px;
  height: 672px;
  background: transparent url(img/bg.jpg) no-repeat 0 0;
  margin: 0px auto;
  text-align: left;
}

#red {
  position: absolute;
  z-index: 10;
  width: 192px;
  padding-top: 64px;
  margin:0;
  float: left;
}

#red a {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0px 64px 24px 40px;
}

#red a:hover {
  background: transparent url(img/redhover.gif) no-repeat 0 0;
}

#redContent {
  position: absolute;
  z-index:1;
  width: 173px;
}

#redContent div {
  display: none;
}

#green {
  position: absolute;
  z-index:11;
  width:78px;
  margin-left: 192px;
  padding-top: 64px;
}

#greenContent {
  position: absolute;
  z-index:5;
  width: 702px;
  height: 392px;
  margin-left: 192px;
  margin-top: 64px;
}

#content1       {position:absolute; z-index:6; display: none;}
#content2       {position:absolute; z-index:7; display: none;}
#content3       {position:absolute; z-index:8; display: none;}
#content4       {position:absolute; z-index:9; display: none;}

#red1Content    {position:absolute; z-index:2; margin-top:154px;}
#red2Content    {position:absolute; z-index:3; margin-top:258px;}
#red3Content    {position:absolute; z-index:4; margin-top:362px;}

#green a        {width:280px; height:78px; float:left; margin-bottom:26px;}