@import "resets.css";

/* Main */

body {
}

#wrapper {
  border: 1px #000 solid;
  width: 298px;
  height: 598px;
  background-color: #ebe8e9;
  overflow: hidden;
  position: relative;
  font-family: Arial;
  font-size: 12px;
  color: #333;
}
#banner {
  width: 298px;
  height: 598px;
  overflow: hidden;
}
#bg, #text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #logo, #scroll {
  position: absolute;
  opacity: 0;
}

/* Frames */

#bg {
  width: 298px;
  height: 598px;
  bottom: 0px;
  left: -20px;
  background-image: url("../img/bg.jpg");
}
#text1 {
  background-image: url("../img/text1.png");
  width: 298px;
  height: 598px;
  top: 0px;
  left: 0px;
}
#text2 {
  background-image: url("../img/text2.png");
 width: 298px;
  height: 598px;
   top: 0px;
  left: 0px;
}
#text3 {
  background-image: url("../img/text3.png");
  width: 298px;
  height: 598px;
   top: 0px;
  left: 0px;
}
#text4 {
  background-image: url("../img/text4.png");
 width: 298px;
  height: 598px;
  top: 0px;
  left: 0px;
}
#text5 {
  background-image: url("../img/text5.png");
 width: 298px;
  height: 598px;
   top: 0px;
  left: 0px;
}
#text6 {
  background-image: url("../img/text6.png");
 width: 298px;
  height: 598px;
   top: 0px;
  left: 0px;
}
#logo {
  background-image: url("../img/logo.png");
  width: 298px;
  height: 598px;
  top: 35px;
  left: 9px;
}

/* Click-Area */

#click-area {
  position: absolute;
  /*background-color: #6AEAEA; opacity: .5*/; /* Development */
  width: 298px;
  height: 598px;
}

/* Scroll */

#scroll {
  opacity: 0;
  width: 298px;
  height: 225px; /* 110 */
  background-color: #fff;
  bottom: -225px;

}
#scroll-title {
  height: 30px; /* 30 */
  background-image: url("../img/isi-title.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #043357;
}
#scroll-wrapper {
  overflow: auto;
  width: 296px;
  height: 191px; /* 76 = 110 - 30 - 4 */
  margin-top: 2px;
  margin-bottom: 2px;
  overflow-y: scroll;
}
#scroll-content {
  position: relative;
  overflow: hidden;
  margin: 0 4px;
}
.frame::-webkit-scrollbar {
  width: 8px;
}
.frame::-webkit-scrollbar-thumb {
  background-color: rgba(62, 69, 69, 1);
}
.frame::-webkit-scrollbar-track {
  background-color: #a1a1a1;
}

/* Scroll Styles */

#scroll a {
  text-decoration: none;
  color: #007dc3;
}
#scroll h1 {
  color: #043357;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 2px;
}
#scroll p {
  margin-top: 8px;
}
#scroll ul {
  list-style: initial;
  padding-left: 15px;
  margin-bottom: 10px;
}
#scroll ul p {
  margin-top: 0;
  margin-left: -7px;
  line-height: 14px;
}
#scroll .ita {
  font-style: italic;
}
#scroll #copyright {
  margin-top: 8px;
  margin-bottom: 8px;
  position: relative;
  font-size: 9px;
  line-height: 12px;
}
#scroll #pfizer {
  position: absolute;
  background-image: url("../img/pfizer.png");
  width: 31px;
  height: 18px;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
