@import "resets.css";

/* Main */
body{
  padding: 0;
  margin: 0;
}
#wrapper {
 /* margin-left: 10px; margin-top: 10px; /* Development */
  border: 1px #542E8A solid;
  background: -webkit-linear-gradient(left, rgba(73,40,126,1) 0%,rgba(98,67,151,1) 36%,rgba(117,96,169,1) 48%,rgba(117,96,169,1) 52%,rgba(98,67,151,1) 64%,rgba(73,40,126,1) 100%);
  background: linear-gradient(to left, rgba(73,40,126,1) 0%,rgba(98,67,151,1) 36%,rgba(117,96,169,1) 48%,rgba(117,96,169,1) 52%,rgba(98,67,151,1) 64%,rgba(73,40,126,1) 100%);
  width: 726px;
  height: 88px;
  overflow: hidden;
  position: relative;
  font-family: 'Helvetica Neue', Helvetica, Arial;
}
#banner {
  width: 726px;
  height: 88px;
  overflow: hidden;
}
#myCanvas, #frame1, #shape1, #logo, #frame2, #info, #frame3, #frame4, #mirror, #cta, #scroll {
  opacity: 0;
}
/* Frames */

#myCanvas {
  position: absolute;
  left: 101px;
  top: 0px;
}
#frame1 {
  position: absolute;
  left: 290px;
  top: 24px;
}
#shape1 {
  position: absolute;
  width: 726px;
  height: 88px;
  background: -webkit-radial-gradient(#FFFFFF, #E3E3E3);
  background: radial-gradient(#FFFFFF, #E3E3E3);
}
#logo {
  cursor: pointer; /*added*/
  position: absolute;
  left: 22px;
  top: 17px;
}
#logo img{
  width: 100%;
}
#frame2 {
  position: absolute;
  left: 176px;
  top: 26px;
}
#info {
  position: absolute;
  left: 15px;
  top: 63px;
}
#frame3 {
  position: absolute;
  left: 15px;
  top: 23px;
}
#frame4 {
  position: absolute;
  left: 9px;
  top: 62px;
}
#mirror {
  position: absolute;
  left: 276px;
  top: 0px;
}
#cta {
  position: absolute;
  width: 105px;
  height: 26px;
  background-color: #532E8A;
  border-radius: 4px;
  left: 9px;
  top: 26px;
  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: 726px;
  height: 88px;
  z-index: 1;
  cursor: pointer;
}

/* Scroll */

#scroll {
  position: absolute;
  width: 299px; /* 298 */
  height: 88px; /* 109  = 110 - 1 (bottom border) */
  background-color: #fff;
  border-left: 1px #542E8A solid;
  right: 0;
}
#scroll-title {
  height: 12px; /* 14 */
  cursor: pointer;
}
#scroll-title img {
  vertical-align: top;
}
#scroll-title #fpi {
  position: absolute;
  top: 0;
  left: 7px;
  width: 104px;
  height: 12px;
}
#scroll-title #mg {
  position: absolute;
  top: 0;
  right: 7px;
  width: 66px;
  height: 12px;
}
#scroll-wrapper {
  /*overflow: auto;*/
  overflow-y: scroll;
  width: 293px; /* 296 = 298 - 2 (right margin) */
  height: 72px; /* 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;
}