@import url("resets.css");

/* Main */

#wrapper {
  border: 1px #000 solid;
  width: 298px;
  height: 248px;
  overflow: hidden;
  position: relative;
  font-family: Arial;
}
#banner {
  width: 298px;
  height: 248px;
  overflow: hidden;
  font-size: 10px;
  line-height: 12px;
  color: #fff;
  background-color: #fff;
}
#footer, #xeljanz, #text4, #scroll {
  position: absolute;
}
#individual, #bg, #mask, #text1, #text2, #text3, #text4a, #text4b, #text4c, #text5, #text6, #xeljanz1, #xeljanz2, #xeljanz3, #xeljanz4, #xeljanz5, #xeljanz6, #pfizer, #scroll2, #cta {
  position: absolute;
  opacity: 0;
}
/* Frames */
#bg {
  width: 298px;
  height: 248px;
  background: url('../img/bg.jpg') center center no-repeat;
  top:0px;
  left: 0px;
}
#mask {
  width: 298px;
  height: 248px;
  background-color: #FFF;
}
#footer {
  bottom: -22px;
  left: 0;
  width: 298px;
  height: 22px;
  background: #e90649 url('../img/footer.png') center 7px no-repeat;
}
#text1 {
  top: 123px;
  left: 20px;
  width: 260px;
  height: 91px;
  background: url('../img/text1.png') center center no-repeat;
}
#text2 {
  top: 122px;
  left: 35px;
  width: 237px;
  height: 100px;
  background: url('../img/text2.png') center center no-repeat;
}
#text3 {
  top: 87px;
  left: 29px;
  width: 237px;
  height: 123px;
  background: url('../img/text3.png') center center no-repeat;
}
#text4 {
  top: 4px;
  left: 6px;
  width: 184px;
  height: 10px;
}
#individual{
  top: 210px;
  left: 64px;
  width: 167px;
  height: 15px;
  background: url('../img/individual.png') center center no-repeat;
}
#text4a {
  top: 0px;
  left: 0px;
  width: 39px;
  height: 10px;
  background: url('../img/text4a.png') center center no-repeat;
}
#text4b {
  top: 0px;
  left: 39px;
  width: 14px;
  height: 10px;
  background: url('../img/text4b.png') center center no-repeat;
}
#text4c {
  top: 0px;
  left: 39px;
  width: 131px;
  height: 10px;
  background: url('../img/text4c.png') center center no-repeat;
}
#text5 {
  top: 23px;
  left: 118px;
  width: 157px;
  height: 35px;
  background: url('../img/text5.png') center center no-repeat;
}
#text6 {
  top: 23px;
  left: 131px;
  width: 164px;
  height: 36px;
  background: url('../img/text6.png') center center no-repeat;
}
#xeljanz {
  top: 21px;
  left: 3px;
  width: 136px;
  height: 48px;
  /*background: url('../img/xeljanz.png') center center no-repeat;*/
}
#xeljanz1 {
  top: 0;
  left: 0;
  width: 83px;
  height: 29px;
  background: url('../img/xeljanz-01.png') center center no-repeat;
}
#xeljanz2 {
  top: -1px;
  left: 78px;
  width: 26px;
  height: 29px;
  background: url('../img/xeljanz-02.png') center center no-repeat;
}
#xeljanz3 {
  top: 0;
  left: 75px;
  width: 27px;
  height: 29px;
  background: url('../img/xeljanz-03.png') center center no-repeat;
}
#xeljanz4 {
  top:25px;
  left: 12px;
  width: 86px;
  height: 12px;
  background: url('../img/xeljanz-04.png') center center no-repeat;
}
#xeljanz5 {
  top: 36px;
  left: -5px;
  width: 136px;
  height: 7px;
  background: url('../img/xeljanz-05.png') center center no-repeat;
}
#xeljanz6 {
  top: 37px;
  left: -4px;
  width: 136px;
  height: 7px;
  background: url('../img/xeljanz-06.png') center center no-repeat;
}
#pfizer {
  top: 102px;
  left: 7px;
  width: 38px;
  height: 22px;
  background: url('../img/pfizer.svg') center center no-repeat;
}
#cta {
  background-color: rgb(227, 55, 105);
  width: 156px;
  height: 26px;
  top: 59px;
  left: 134px;
  border-radius: 3px;
  border: 1px solid rgba(125, 125, 125, 0.7);
  box-shadow: 1px 1px 4px rgba(125, 125, 125, 0.7);
}
#gonow{
  background-image: url("../img/gonow.png");
  position: absolute;
  width: 85px;
  height: 12px;
  left: 10px;
  top: 7px;

}
#arrow{
  background-image: url("../img/arrow.png");
  position: absolute;
  width: 6px;
  height: 9px;
  left: 139px;
  top: 8px;
}

/* Scroll */

#scroll {
  position: absolute;
  bottom: -114px;
  width: 298px;
  height: 114px;
  background-color: #fff;
}
#scroll-title {
  height: 14px;
  background: #4e5454 url('../img/scroll-title.png') center center no-repeat;
}
#scroll-bottom {
  position: relative;
  height: 12px;
  background: #4e5454 url('../img/scroll-bottom.png') center center no-repeat;
}
#scroll-bottom .presInfo {
  position: absolute;
  top: 0;
  left: 0;
  width: 105px;
  height: 12px;
}
#scroll-bottom .medGuide {
  position: absolute;
  top: 0;
  left: 223px;
  width: 75px;
  height: 12px;
}
#scroll-wrapper {
  overflow-y: scroll;
  width: 294px;
  height: 88px;
  margin: 0 2px;
}
#scroll-content {
  color: #374241;
  margin: 4px;
}
#scroll-content p {
  margin-bottom: 4px;
}
#scroll-content strong {
  font-weight: bold;
}
#scroll-content span {
  color: #e92449;
}
#scroll-content ul {
  list-style-type: initial;
  margin-left: 20px;
  margin-bottom: 4px;
}
#scroll-content ul li p {
  margin-left: 10px;
  margin-top: 4px;
}
#scroll-content a {
  color: #e92449;
}
#scroll-content .footnote {
  font-size: 8px;
}
#scroll-content #isi-pfizer {
  height: 43px;
  width: 73px;
  margin-bottom: 2px;
  margin-bottom: 6px;
  background: url('../img/isi-pfizer.png') center center no-repeat;
}
#scroll-content #switch2 {
  display: none;
}
.frame::-webkit-scrollbar {
  width: 9px;
  background: url('../img/scroll-bg.png') center center no-repeat;
}
.frame::-webkit-scrollbar-thumb {
  background: url('../img/scroll-thumb.png') center center no-repeat;
  height: 20px;
}
.frame::-webkit-scrollbar-track {
}

/* Scroll2 */

#scroll2 {
  z-index: -1;
  top: 96px;
  left: 54px;
  width: 238px;
  height: 36px;
}
#scroll-wrapper2 {
  position: absolute;
  overflow-y: scroll;
  width: 238px;
  height: 36px;
}
#scroll-content2 {
  color: #e92449;
  margin-right: 4px;
}
#scroll-content2 ul {
  list-style-type: initial;
  margin-left: 14px;
}

/* Click-Area */
#click-area {
  position: absolute;
  width: 298px;
  height: 248px;
}

/* Dev */
.dev {
  position: absolute;
  top: -1px;
  left: -1px;
}