@import "resets.css";

/* Main */

#wrapper {
  /*margin-left: 10px; margin-top: 10px;  Development */
  border: 1px #542E8A solid;
  background-color: #49287E;
  width: 298px;
  height: 248px;
  overflow: hidden;
  position: relative;
  font-family: 'Helvetica Neue', Helvetica, Arial;
}
#banner {
  width: 298px;
  height: 248px;
  overflow: hidden;
}
#myCanvas, #frame1, #shape1, #logo, #frame2, #card, #frame3, #cta, #scroll {
  opacity: 0;
}
/* Frames */

#myCanvas {
  position: absolute;
  left: -37px;
  top: 17px;
}
#frame1 {
  position: absolute;
  left: 119px;
  top: 65px;
  color: #fff;
  font-size: 24px;
  line-height: 29px;
}
#shape1 {
  position: absolute;
  width: 298px;
  height: 248px;
  background: -webkit-radial-gradient(#FFFFFF, #E3E3E3);
  background: radial-gradient(#FFFFFF, #E3E3E3);
}
#logo {
  position: absolute;
  left: 13px;
  top: 5px;
  cursor: pointer;
}
#frame2 {
  position: absolute;
  left: 12px;
  top: 57px;
  color: #49287E;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: 0.5px;
}
#card {
  position: absolute;
  left: 157px;
  top: 30px;
}
#frame3 {
  position: absolute;
  left: 3px;
  top: 142px;
  color: #555555;
  font-size: 9px;
  font-family: Arial;
}
#cta {
  width: 209px;
  height: 20px;
  background-color: #532E8A;
  border-radius: 4px;
  position: absolute;
  left: 14px;
  top: 113px;
  color: #fff;
  font-size: 11px;
  font-family: Arial;
  text-decoration: none;
  text-align: center;
  line-height: 20px;
}
#cta:hover {
  background-color: #63498A;
}

/* Click-Area */

#click-area {
  position: absolute;
  /*background-color: #6AEAEA; opacity: .5;*/ /* Development */
  width: 298px;
  height: 248px;
  z-index: 1;
}

/* Scroll */

#scroll {
  position: absolute;
  width: 298px; /* 298 */
  height: 95px; /* 109  = 110 - 1 (bottom border) */
  background-color: #fff;
  bottom: 0;
}
#scroll-title {
  height: 14px; /* 14 */
  cursor: pointer;
}
#scroll-title #fpi {
  position: absolute;
  top: 0;
  left: 7px;
  width: 104px;
  height: 14px;
}
#scroll-title #mg {
  position: absolute;
  top: 0;
  right: 7px;
  width: 66px;
  height: 14px;
}
#scroll-wrapper {
  /*overflow: auto;*/
  overflow-y: scroll;
  width: 292px; /* 296 = 298 - 2 (right margin) */
  height: 77px; /* 75 = 109 - 14 - 2 (top margin) - 2 (bottom margin) */
  margin: 2px 6px 2px 0;
}
#scroll-content {
  margin: 0 10px 0 8px;
  font-size: 10px;
  color: #5c5d60;
}
#scroll-content > *{
  /*pointer-events: none;*/
}
#scroll-content div p {
  margin-left: 3px;
  margin-top: 5px;
}
#scroll-content p {
  margin-top: 2px;
  margin-bottom: 5px;
}
#scroll-content #copyright {
  display: inline-block;
  margin-top: 10px;
  margin-left: 15px;
}
#scroll-content img {
  float: left;
  margin-top: 2px;
  margin-bottom: 5px;
  margin-left: 5px;
}
#scroll-content ul {
  margin-left: 16px;
}
#scroll-content a {
  color: #5A3890;
}
.frame::-webkit-scrollbar {
  width: 12px;
}
.frame::-webkit-scrollbar-thumb {
  background-color: rgba(62, 69, 69, 1);
}
.frame::-webkit-scrollbar-track {
}
.bold {
  font-weight: bold;
}
.border {
  border: 1px solid #404040;
}