@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;
  background-color: #fff;
}
#bg, #shadow-down, #shadow, #footer, #xeljanz,  #scroll, #scroll2, #book, #card1, #pill, #xelforce {
  position: absolute;
}
#shape, #bg1, #cheklist, #cta3, #text1, #text2, #text3, #text4, #text5, #text6, #available, #pfizer {
  position: absolute;
  opacity: 0;
}


/* Frames */
#bg {
  top: 43px;
  left: 0px;
  width: 298px;
  height: 93px;
  background-color: #4e5453;
}
#shadow{
  background: url('../img/shadow.png') center center no-repeat;
  width: 298px;
  height: 8px;
  top: 43px;
  left:0px;
}
#shadow-down{
  background: url('../img/shadow.png') center center no-repeat;
  width: 298px;
  height: 8px;
  top: 126px;
  left:0px;
  transform: rotate(180deg);
}
#shape {
  width: 5px;
  height: 60px;
  background: #ffffff;
  left: 10px;
  top: 53px;

}
#footer {
  bottom: -22px;
  left: 0;
  width: 298px;
  height: 22px;
  background: #e90649 url('../img/footer.png') center 7px no-repeat;
}
#text1 {
  top: 51px;
  left: 23px;
  width: 106px;
  height: 67px;
  background: url('../img/text1.png') center center no-repeat;
}
#text2 {
  top: 38px;
  left: 22px;
  width: 183px;
  height: 85px;
  background: url('../img/text2.png') center center no-repeat;
}
#text3 {
  top: 52px;
  left: 22px;
  width: 154px;
  height: 63px;
  background: url('../img/text3.png') center center no-repeat;
}
#text4 {
  top: 52px;
  left: 22px;
  width: 118px;
  height: 62px;
  background: url('../img/text4.png') center center no-repeat;
}
#text5 {
  top: 49px;
  left: 22px;
  width: 166px;
  height: 45px;
  background: url('../img/text5.png') center center no-repeat;
}
#text6 {
  top: 51px;
  left: 22px;
  width: 175px;
  height: 42px;
  background: url('../img/text6.png') center center no-repeat;
}
#book{
  top: 51px;
  left: 301px;
  width: 165px;
  height: 100px;
  background: url('../img/book.png') center center no-repeat;

}
#xelforce{
  top:82px;
  left:367px;
  width: 172px;
  height: 50px;
  background: url('../img/xelsource.png') center center no-repeat;
}
#card1{
  top: 56px;
  left: 298px;
  width: 121px;
  height: 80px;
  background: url('../img/card1.png') center center no-repeat;
}
#pill{
  top: 80px;
  left: 291px;
  width: 87px;
  height: 57px;
  background: url('../img/pill.png') center center no-repeat;
}
#available {
  top:  104px;
  left: 50px;
  width: 99px;
  height: 26px;
  background: url('../img/available.png') center center no-repeat;
}

#xeljanz {
  top: 4px;
  left: -1px;
  width: 110px;
  height: 39px;
  background: url('../img/xeljanz.png') center center no-repeat;
}
#pfizer {
  top: 103px;
  left: 4px;
  width: 43px;
  height: 26px;
  background: url('../img/pfizer.png') center center no-repeat;
}

#cta3 {
  background-color: #FFFFFF;
  width: 135px;
  height: 25px;
  top: 100px;
  left: 157px;
  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: 84px;
  height: 10px;
  left: 10px;
  top: 8px;

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

#scroll {
  position: absolute;
  bottom: 0px;
  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;
}
.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: 10;
  top: 17px;
  left: 112px;
  width: 186px;
  height: 24px;
}
#scroll-wrapper2 {
  position: absolute;
  overflow-y: scroll;
  width: 186px;
  height: 24px;
}
#scroll-content2 {
  color: #f1617a;
  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;
}