body {
  margin: 0;
  padding: 0;
  font-family: arial;
  font-size: 14px; }

a {
  color: #1c5ac4;
  text-decoration: none; }

.main-div {
  margin: 0 10% 10px;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  box-shadow: 0 0 7px #a09f9f; }
  .main-div .header {
    border-bottom: 1px solid gray;
    padding: 3px 10px;
    background-color: #efe9e3;
    display: flex;
    align-items: center; }
    .main-div .header .menubutton {
      display: none;
      width: 32px;
      height: 32px;
      background: url("http://findicons.com/files/icons/2771/batch/32/menu_2.png"); }
    .main-div .header .title {
      margin: 0 5px;
      font-weight: bold; }
    .main-div .header .icon {
      width: 32px;
      height: 32px; }
    .main-div .header .run-tools {
      flex-grow: 1; }
      .main-div .header .run-tools .fullscreen {
        width: 32px;
        height: 32px;
        margin: auto;
        background-image: url("/img/fullscreen.png");
        cursor: pointer; }
  .main-div .content {
    border-bottom: 1px solid gray;
    display: flex; }
    .main-div .content .menu {
      background-color: #efe9e3;
      width: 130px;
      flex-shrink: 0;
      padding: 1px; }
      .main-div .content .menu .menuitem {
        display: block;
        padding: 5px 10px;
        border: 1px solid transparent;
        color: black; }
        .main-div .content .menu .menuitem:hover {
          background-color: #dcd0c3;
          border-color: silver; }
      .main-div .content .menu .splitter {
        display: block;
        border-bottom: 1px solid white;
        border-top: 1px solid silver;
        margin: 1px 5px; }
    .main-div .content .data {
      border-left: 1px solid gray;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      background-color: whitesmoke;
      flex-grow: 1;
      min-height: 230px;
      width: 100%; }
      .main-div .content .data[fullscreen=true] {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 0; }
      .main-div .content .data .app {
        margin: 5px;
        width: 270px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        border: 1px solid #c3c3c3;
        background-color: white;
        box-shadow: 0 0 3px #b7b7b7;
        animation: opacity 0.3s linear; }
        .main-div .content .data .app:hover {
          background-color: whitesmoke; }
        .main-div .content .data .app .head {
          display: flex;
          border-bottom: 1px solid gray; }
          .main-div .content .data .app .head .icon {
            padding: 5px;
            width: 48px;
            height: 48px; }
          .main-div .content .data .app .head .titlestat .title {
            font-weight: bold;
            padding: 5px;
            flex-grow: 1;
            white-space: nowrap; }
          .main-div .content .data .app .head .titlestat .author {
            padding: 0 5px;
            font-size: 11px; }
          .main-div .content .data .app .head .titlestat .stat {
            display: flex;
            padding: 0 5px;
            height: 20px;
            font-size: 11px;
            color: gray; }
            .main-div .content .data .app .head .titlestat .stat .value {
              font-weight: bold; }
            .main-div .content .data .app .head .titlestat .stat div {
              padding-right: 3px; }
            .main-div .content .data .app .head .titlestat .stat div:after {
              content: ','; }
            .main-div .content .data .app .head .titlestat .stat div:last-child:after {
              content: ''; }
        .main-div .content .data .app .info {
          padding: 5px;
          height: 100px;
          font-size: 12px;
          overflow-y: auto; }
        .main-div .content .data .app .toolbar {
          height: 28px;
          display: flex;
          align-items: center;
          border-top: 1px dotted gray;
          padding: 0 3px; }
          .main-div .content .data .app .toolbar .splitter {
            flex-grow: 1; }
          .main-div .content .data .app .toolbar .indicator {
            margin-right: 4px; }
  .main-div .copyright {
    background-color: #efe9e3;
    border-bottom: 1px solid gray;
    font-size: 12px;
    color: gray; }
  .main-div .terms {
    padding: 20px; }
    .main-div .terms .title {
      font-weight: bold;
      text-align: center; }
    .main-div .terms div {
      padding: 5px 25px; }
    .main-div .terms .page {
      text-decoration: underline; }
    .main-div .terms .sign {
      font-size: 12px;
      font-style: italic; }

.modalframe {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7); }

.form {
  border: 1px solid gray;
  box-shadow: 0 0 15px #828282;
  position: fixed;
  background-color: white;
  max-width: 300px; }
  .form .caption {
    font-weight: bold;
    background-color: #cab6a2;
    padding: 3px; }
  .form .body {
    font-size: 12px;
    padding: 13px; }
    .form .body .appname {
      font-size: 16px;
      padding: 7px 0;
      font-weight: bold; }
    .form .body .tools {
      padding: 0px;
      display: flex;
      justify-content: flex-end; }
      .form .body .tools button {
        margin: 3px; }
  .form .line {
    display: flex; }
    .form .line .value {
      font-weight: bold; }

.myButton5 {
  box-shadow: inset 0px 1px 0px 0px #9acc85;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0296dc), color-stop(1, #0285c3));
  background: -moz-linear-gradient(top, #0296dc 5%, #0285c3 100%);
  background: -webkit-linear-gradient(top, #0296dc 5%, #0285c3 100%);
  background: -o-linear-gradient(top, #0296dc 5%, #0285c3 100%);
  background: -ms-linear-gradient(top, #0296dc 5%, #0285c3 100%);
  background: linear-gradient(to bottom, #0296dc 5%, #0285c3 100%);
  background-color: #0296dc;
  border: 1px solid #0274a9;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  text-decoration: none;
  margin-left: 5px;
  cursor: pointer; }
  .myButton5:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0285c3), color-stop(1, #0296dc));
    background: -moz-linear-gradient(top, #0285c3 5%, #0296dc 100%);
    background: -webkit-linear-gradient(top, #0285c3 5%, #0296dc 100%);
    background: -o-linear-gradient(top, #0285c3 5%, #0296dc 100%);
    background: -ms-linear-gradient(top, #0285c3 5%, #0296dc 100%);
    background: linear-gradient(to bottom, #0285c3 5%, #0296dc 100%);
    background-color: #0285c3; }
  .myButton5[second=true] {
    background: white;
    color: #0285c3;
    box-shadow: inherit; }

iframe {
  border: 0;
  align-self: center;
  flex-grow: 1;
  height: 600px; }

*[visible=false] {
  display: none; }

@keyframes opacity {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }