@import "resets.css";

/* Main */

body{
  padding: 0;
  margin: 0;
}
#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, #info, #frame3, #frame4, #mirror, #cta, #scroll {
  opacity: 0;
}
/* Frames */

#myCanvas {
  position: absolute;
  left: -50px;
  top: 17px;
}
#frame1 {
  position: absolute;
  left: 98px;
  top: 80px;
}
#shape1 {
  position: absolute;
  width: 298px;
  height: 248px;
  background: -webkit-radial-gradient(#FFFFFF, #E3E3E3);
  background: radial-gradient(#FFFFFF, #E3E3E3);
}
#logo {
  cursor: pointer; /*added*/
  position: absolute;
  left: 75px;
  top: 26px;
}
#logo img{
  width: 100%;
}
#frame2 {
  position: absolute;
  left: 41px;
  top: 109px;
}
#info {
  position: absolute;
  left: 1px;
  top: 126px;
}
#frame3 {
  position: absolute;
  left: 17px;
  top: 50px;
}
#frame4 {
  position: absolute;
  left: 13px;
  top: 49px;
}
#mirror {
  position: absolute;
  left: 138px;
  top: 18px;
}
#cta {
  position: absolute;
  width: 95px;
  height: 29px;
  background-color: #532E8A;
  border-radius: 4px;
  left: 15px;
  top: 104px;
  color: #fff;
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 26px;
}
#cta:hover {
  background-color: #63498A;
}

/* Click-Area */

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

/* 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;
  cursor: default;
}
#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 {
  background-color: #e6e6e6;
}
.bold {
  font-weight: bold;
}
.border {
  border: 1px solid #404040;
}