@import "resets.css";

/* Main */
#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 728px;
  height: 270px;
  font-family: Arial;
  opacity: 0;
}
#collapsed-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 728px;
  height: 90px;
  z-index: 1;
}
#expanded-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 728px;
  height: 270px;
  z-index: 0;
  opacity: 0;
}

/* Collapsed Panel */
#wrapper {
  border: 1px #000 solid;
  right: 0;
  width: 726px;
  height: 88px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
#bg1, #shape1, #lines, #text1a, #text1b, #text2, #text3, #see, #vid, #scroll, #circle, #stories-link {
  position: absolute;
}
#line2a, #line2b, #line2c, #line3a, #line3b, #line3c, #video, #logo, #stories-link-bg, #close-icon {
  position: absolute;
  opacity: 0;
}
/* Frames */

#bg1 {
  top: 17px;
  left: 68px;
  width: 1095px;
  height: 268px;
  transform: scale(1.125);
  -webkit-transform: scale(1.125);
  background: url('bg1.jpg') center top no-repeat, url('bg2.jpg') center 80px no-repeat;
}
#shape1 {
  width: 726px;
  height: 88px;
  background-color: #006c3e;
  opacity: .8;
}
#lines {
  top: 0;
  right: 0;
  width: 726px;
  height: 88px;
}
#lines #line2a {
  top: 0;
  left: 0;
  width: 697px;
  height: 88px;
  background: url('line2a.png') center center no-repeat;
}
#lines #line2b {
  top: 0;
  left: 0;
  width: 502px;
  height: 80px;
  background: url('line2b.png') center center no-repeat;
}
#lines #line2c {
  top: 0;
  left: 0;
  width: 686px;
  height: 88px;
  background: url('line2c.png') center center no-repeat;
}
#lines #line3a {
  top: 0;
  left: 0;
  width: 726px;
  height: 88px;
  background: url('line3a.png') center center no-repeat;
}
#lines #line3b {
  top: 0;
  left: 0;
  width: 726px;
  height: 88px;
  background: url('line3b.png') center center no-repeat;
}
#lines #line3c {
  bottom: 0;
  left: 122px;
  width: 608px;
  height: 88px;
  background: url('line3c.png') center center no-repeat;
}
#text1a {
  left: 196px;
  top: 14px;
  width: 176px;
  height: 45px;
  background: url('text1a.png') center center no-repeat;
}
#text1b {
  left: 215px;
  top: 30px;
  width: 213px;
  height: 50px;
  background: url('text1b.png') center center no-repeat;
}
#text2 {
  left: 95px;
  top: 10px;
  width: 396px;
  height: 79px;
  background: url('text2.png') center center no-repeat;
}
#text3 {
  left: 92px;
  top: 6px;
  width: 454px;
  height: 84px;
  background: url('text3.png') center center no-repeat;
}
#see {
  left: 334px;
  top: 23px;
  width: 55px;
  height: 32px;
  background: url('see.png') center center no-repeat;
}
#vid {
  left: 321px;
  top: 46px;
  width: 93px;
  height: 36px;
  background: url('vid.png') center center no-repeat;
}
#logo {
  left: 8px;
  top: 9px;
  width: 134px;
  height: 47px;
  background-image: url('logo.svg');
}
#circle {
  top: 25px;
  right: -36px;
  width: 34px;
  height: 35px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.2);
  background: #4aa819 url('arrow.png') 2px center no-repeat;
}
/* Click-Area */

#click-area {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #6AEAEA; opacity: 0;
  width: 726px;
  height: 88px;
}

/* Action-Area */

#action-area {
  position: absolute;
  top: 0;
  left: 726px;
  background-color: #F00; opacity: 0;
  width: 170px;
  height: 88px;
}

/* Scroll */

#scroll {
  position: absolute;
  width: 265px;
  height: 88px;
  background-color: #fff;
  border-left: 1px #016338 solid;
  right: -266px;
}
#scroll-title {
  height: 16px;
  background: #4ba919 url('scroll-title.png') center center no-repeat;
  cursor: pointer;
}
#scroll-wrapper {
  direction:rtl;
  overflow-y: scroll;
  width: 264px;
  height: 72px;
  margin-left: 1px;
}
#scroll-content {
  direction: ltr;
  margin: 4px;
  font-size: 11px;
  line-height: 14px;
  color: #666;
}
#scroll-content ul {
  margin-left: 16px;
  list-style: initial;
}
#scroll-content span#title {
  font-size: 10px;
  font-weight: bold;
  color: #000;
}
#scroll-content #space {
  margin-bottom: 10px;
}
#scroll .important{
  font-size:14px;
}
#scroll a {
  color: #298733;
}
#scroll .green {
  color: #298733;
}
#scroll .italic{
  font-style: italic;
}
#scroll .bold{
  font-weight: bold;
}
.frame::-webkit-scrollbar {
  width: 12px;
}
.frame::-webkit-scrollbar-track {
  background-color: #e1e1e1;
}
.frame::-webkit-scrollbar-thumb {
  background-color: #70ab37;
  background: url("scroll-thumb.jpg") center center no-repeat;
  height:42px;
}

/* Expanded Panel */

.mejs-container {
  left: 0;
  top: 0;
  position: absolute;
  opacity: 0;
}
#exp-wrapper {
}
#stories-link {
  left: 0;
  top: 242px;
  width: 460px;
  height: 26px;
  cursor: pointer;
  background-color: #004729;
}

/* Development */

.dev-test {
  position: absolute;
  left: -1px;
  right: -1px;
}