@import "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;
}
#bg, #footer, #xeljanz, #text4, #scroll {
  position: absolute;
}
#calendar, #blur, #line, #text1, #text2, #text3, #text4a, #text4b, #text4c, #text5, #text6, #xeljanz1, #xeljanz2, #xeljanz3, #xeljanz4, #xeljanz5, #xeljanz6, #pfizer, #scroll2, #cta {
  position: absolute;
  opacity: 0;
}

/* Calendar */

#calendar {
  position: absolute;
  top: 3px;
  left: 103px;
  width: 88px;
  height: 92px;
  opacity: 0;
}
#calendar.blur {
  color: #fff;
  text-shadow: 0 0 4px rgba(255,255,255,1);
}
#blur {
  top: 23px;
  left: 103px;
  width: 88px;
  height: 92px;
  background: url('../img/slide-blur.png') center center no-repeat;
}
#line {
  top: 48px;
  left: 103px;
  width: 88px;
  height: 2px;
  background-color: rgba(0,0,0,.7);
}
.slide {
  position: absolute;
  font-weight: bold;
  width: 88px;
  height: 92px;
}
.slide span {
  background: #333333 url('../img/slide-bg.jpg');
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 88px;
  height: 46px;
  transform: perspective( 150px ) rotateX( 0deg );
  transform-origin: 50% 100%;
  transition: transform .15s ease-out 0s;
  overflow: hidden;
}
.slide span.front {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.slide span.back{
}
.slide.on span {
  transform: rotateX( -179.999deg );
}
.slide span h1, h3 {
  text-align: center;
}
.slide span h1 {
  font-size: 63px;
  line-height: 63px;
  margin-top: -3px;
}
.slide span h3 {
  font-size: 14px;
  line-height: 14px;
  margin-top: 4px;
}
.slide span.back h1 {
  transform: rotateZ( 180deg ) rotateY( 180deg );
  margin-top: 14px;
}

/* Frames */
#bg {
  width: 298px;
  height: 248px;
  background-color: #000;
}
#footer {
  bottom: -28px;
  left: 0;
  width: 298px;
  height: 28px;
  background: #e90649 url('../img/footer.png') center center no-repeat;
}
#text1 {
  top: 132px;
  left: 48px;
  width: 204px;
  height: 72px;
  background: url('../img/text1.png') center center no-repeat;
}
#text2 {
  top: 131px;
  left: 44px;
  width: 204px;
  height: 78px;
  background: url('../img/text2.png') center center no-repeat;
}
#text3 {
  top: 131px;
  left: 51px;
  width: 196px;
  height: 71px;
  background: url('../img/text3.png') center center no-repeat;
}
#text4 {
  top: 5px;
  left: 3px;
  width: 184px;
  height: 10px;
}
#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: 45px;
  left: 140px;
  width: 146px;
  height: 29px;
  background: url('../img/text5.png') center center no-repeat;
}
#text6 {
  top: 20px;
  left: 159px;
  width: 125px;
  height: 31px;
  background: url('../img/text6.png') center center no-repeat;
}
#xeljanz {
  top: 30px;
  left: 11px;
  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: 0;
  left: 83px;
  width: 26px;
  height: 29px;
  background: url('../img/xeljanz-02.png') center center no-repeat;
}
#xeljanz3 {
  top: 0;
  left: 83px;
  width: 27px;
  height: 29px;
  background: url('../img/xeljanz-03.png') center center no-repeat;
}
#xeljanz4 {
  top:29px;
  left: 11px;
  width: 86px;
  height: 12px;
  background: url('../img/xeljanz-04.png') center center no-repeat;
}
#xeljanz5 {
  top: 41px;
  left: 0;
  width: 136px;
  height: 7px;
  background: url('../img/xeljanz-05.png') center center no-repeat;
}
#xeljanz6 {
  top: 41px;
  left: 0;
  width: 136px;
  height: 7px;
  background: url('../img/xeljanz-06.png') center center no-repeat;
}
#pfizer {
  top: 101px;
  left: 11px;
  width: 38px;
  height: 22px;
  background: url('../img/pfizer.svg') center center no-repeat;
}
#cta {
  top: 57px;
  left: 155px;
  width: 138px;
  height: 31px;
  background: url('../img/cta.png') center center no-repeat;
}

/* 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;
}
.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: 94px;
  left: 60px;
  width: 162px;
  height: 36px;
}
#scroll-wrapper2 {
  position: absolute;
  overflow-y: scroll;
  width: 222px;
  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;
}