// Tour layout

@import "main.less";

#ea-view-tour {
  .sand;
  min-width: 960px;

  > header > .wrap, > .pane > .wrap, > footer > .wrap {
    position:relative;
    width: 960px;
    margin: 0 auto;
  }

  h1 { font-size:32px }
  h2 {
    font-size: 26px;
    font-variant: small-caps;
  }

  .pane {
    position:relative;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
               0 -1px 0 rgba(0,0,0,.1);
  }

  > header {
    position:relative;
    .pnl-lemon;
    .pnl-lime;
    height:48px;
    .ea-logo {
      position:absolute;
      z-index:50;
      width:auto;
      height:64px;
      margin:0;
      float:left;
      background-size:64px 64px;
      a {
        position:static;
        color:#fff;
        display:block;
        text-align:center;
        font-size:32px;
        padding:12px 0 0;
      }
    }
    nav {
      position:absolute;
      z-index:20;
      top:0;
      left:196px;
      right:0;
      height:48px;
      padding-top:8px;
      ul { list-style: none outside }
      li {
        display: inline-block;
      }
      a {
        display:block;
        padding:6px 12px;
        text-decoration:none;
        border-radius:16px;
        &:hover { color: #fff }
      }
      li.current a, li.active a {
        color:#fff;
        background:rgba(0,0,0,.1);
        box-shadow: 0 1px 0 rgba(255,255,255,.2),
                    0 0 4px rgba(0,0,0,.4) inset;
      }
    }
  }

  > footer {
    .pnl-sand;
    margin:0;
    padding:0;
    border-top:1px solid #777;
    text-align:center;
    font-size: 14px;
    > .wrap {
      background: url("/img/acorn-bd2.png") center center no-repeat;
      padding: 48px 0;
    }
    address { font-style: normal }
    a, a:hover { color:#fff }
    .powered-by a, .powered-by a:hover {
      font-style:italic;
      color:#fff;
    }
  }

  .index-pane {
    .pnl-smoke;
    > .wrap {
      height:512px;
      background: url("/img/bd4.png") 64px 4px no-repeat;
    }
    .left {
      position:absolute;
      left:0;
      top:-32px;
      width:416px;
      overflow:hidden;
      margin:0;
    }
    .right {
      position:absolute;
      top:16px;
      right:0;
      width:512px;
    }
    .content-output {
      font:16px/1.25 @serif-fonts;
      h1 {
        font:48px @sans-fonts;
        padding:24px 0;
        background: url("/img/acorn-96.png") 48px 0 no-repeat;
        font-weight:normal;
        margin:0;
      }
      p { margin: 0 }
      .subtitle {
        font-size:26px;
        height:156px;
        text-align:right;
      }
    }
  }

  .login-pane {
    h1 {
      font:26px @serif-fonts;
      font-weight: normal;
      margin:16px 0;
    }
    margin: 0 16px;
    td {
      border:0;
      padding:0;
    }
    .ea-input-grid td {
      vertical-align:bottom;
      padding:8px 0;
      input, span, label {
        vertical-align:baseline;
      }
    }
    input[type="checkbox"] {
      font-size:16px;
      margin:0;
    }
    input[type="text"], input[type="password"] {
      border:0;
      border-radius:4px;
      margin:0 8px 0 0;
      padding:6px 8px;
      background: rgba(0,0,0, 0.1);
      font-size:16px;
      color:#fff;
      box-shadow:0 1px 3px rgba(0,0,0,.4) inset;
      text-shadow:0 1px 1px rgba(0,0,0,.5);
      &::-webkit-input-placeholder { color: #fff }
    }
    input[type="submit"] {
      font-size:16px;
      padding:7px 16px 5px;
      margin:0;
      box-shadow:none;
      border:1px solid #777;
      &:hover, &:active {
        border:1px solid #666;
      }
      &:active {
        padding:8px 16px 4px;
        box-shadow:0 4px 8px rgba(0,0,0,.15) inset;
      }
    }
  }

  .signup-pane {
    margin-top:16px;
  }

  .features-pane {
    .pnl-ghost;
    .features {
      position:relative;
      z-index:3;
      overflow:hidden;
      padding:8px 0;
      .feature {
        position:relative;
        display:inline-block;
        vertical-align:top;
        text-decoration:none;
        margin:8px 4px;
        &::after {
          content:'';
          z-index:2;
          position:absolute;
          display:block;
          top:75%;
          bottom:0;
          left:16px;
          right:16px;
          box-shadow:0 0 16px rgba(0,0,0,.6);
          border-radius:~"160px/8px";
        }
        > .wrap {
          display:block;
          position:relative;
          z-index:3;
          width:444px;
          padding:12px;
          text-decoration:none;
          background:#fefefa;
          background-repeat:no-repeat;
          background-position:center center;
          color:#555;
          text-shadow:none;
          height:280px;
          box-shadow: 0 0 24px rgba(0,0,0,.12) inset,
                      0 1px 4px rgba(0,0,0,.4);
          &:hover {
            background-color:#fff;
            box-shadow: 0 0 8px rgba(0,0,0,.1) inset,
                        0 1px 4px rgba(0,0,0,.4);
            color:#333;
          }
          blockquote {
            border:0;
            padding:0;
            text-align:right;
            font-style:italic;
          }
          h2 {
            font-size: 20px;
            font-variant: small-caps;
            text-align: center;
            font-weight:normal;
          }
          h2 strong {
            color:@lime;
            font-weight:normal;
          }
        }
      }
    }
    #f-simplicity a {
      background-image: url("../img/g_wheel.png");
    }
    #f-semantics a {
      background-image: url("../img/g_magnifier.png");
    }
    #f-resources a {
      background-image: url("../img/g_notebook.png");
    }
    #f-services a {
      background-image: url("../img/g_infinity.png");
    }
  }

  .pricing-pane {
    .pnl-smoke;
    overflow:hidden;
    .features {
      position:relative;
      z-index:3;
      overflow:hidden;
      padding:8px;
      margin:0 -8px;
    }
    .plate {
      float:left;
      width:444px;
      > .wrap {
        height:204px;
      }
      // some corner magic
      &:nth-child(4n + 1), &:nth-child(4n + 1) > .wrap {
        border-top-left-radius:0;
      }
      &:nth-child(4n + 2), &:nth-child(4n + 2) > .wrap {
        border-bottom-right-radius:0;
      }
      &:nth-child(4n + 3), &:nth-child(4n + 3) > .wrap {
        border-bottom-left-radius:0;
      }
      &:nth-child(4n), &:nth-child(4n) > .wrap {
        border-top-right-radius:0;
      }
    }
  }

  .plate {
    display:block;
    .ea-frame-overlay;
    padding:12px;
    margin:4px;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
    > .wrap {
      display:block;
      overflow:hidden;
      padding: 8px;
      text-decoration:none;
      color:#555;
      border-radius:8px;
      background:#fafaf7;
      box-shadow: 0 0 24px rgba(0,0,0,.12) inset,
                  0 0 3px rgba(0,0,0,.4);
    }
    a.wrap:hover {
      background:#fff;
      box-shadow: 0 0 8px rgba(0,0,0,.1) inset,
                  0 0 3px rgba(0,0,0,.4);
      color:#333;
    }
    h2 {
      font-size:26px;
      font-weight:normal;
      font-variant:small-caps;
      line-height:1.5em;
      border-bottom:1px solid #aaa;
      margin-top:8px;
      text-align:center;
    }
    .descr {
      color:#5e5e5e;
      font-size:14px;
      line-height:1.4em;
    }
  }

  .formula {
    font-size:32px;
    line-height:2em;
    text-align:center;
    p { margin:0 }
    * { vertical-align: middle }
    .fee { white-space: nowrap }
  }

  .generic-pane {
    &::after {
      content:'';
      display:block;
      clear:both;
    }
    .pnl-ghost;
    .feature, .feature .wrap {
      box-shadow:0 0 4px rgba(0,0,0,.4);
    }
    .feature {
      position:relative;
      z-index:2;
      > .wrap {
        background:#fff;
        position:relative;
        overflow:hidden;
        z-index:3;
        padding:16px;
        min-height:240px;
        box-shadow: 0 8px 64px rgba(0,0,0,.15) inset,
                    0 0 4px rgba(0,0,0,.4);
      }
      &::after {
        content:'';
        display:block;
        position:absolute;
        z-index:2;
        top:75%;
        bottom:0;
        left:16px;
        right:16px;
        box-shadow:0 0 12px rgba(0,0,0,.4);
        border-radius:~"160px/24px";
      }
      h1 {
        overflow:hidden;
        font-size:28px;
        border-bottom:1px solid #aaa;
        padding-bottom:12px;
        box-shadow:0 1px 0 rgba(255,255,255,.5);
      }
      .fig {
        margin:0;
        float:left;
      }
      &:nth-child(2n) .fig {
        float:right;
      }
      &:nth-child(1) { z-index:20 }
      &:nth-child(2) { z-index:19 }
      &:nth-child(3) { z-index:18 }
      &:nth-child(4) { z-index:17 }
      &:nth-child(5) { z-index:16 }
      &:nth-child(6) { z-index:15 }
      &:nth-child(7) { z-index:14 }
      &:nth-child(8) { z-index:13 }
      &:nth-child(9) { z-index:12 }
      &:nth-child(10) { z-index:11 }
    }
  }

  .consumers-pane .feature {
    float:left;
    width:480px;
    > .wrap {
      height:368px;
    }
  }

  .services-pricing-pane {
    .pnl-smoke;
    > .wrap {
      box-shadow:1px 0 1px rgba(0,0,0,.2);
      &::after {
        content:'';
        display:block;
        position:absolute;
        z-index:1;
        top:24px;
        bottom:0;
        left:-48px;
        right:0;
        background:url("../img/bd4.png") top left no-repeat;
      }
    }
    table {
      position:relative;
      z-index:2;
      margin:0;
      width:100%;
      border-collapse:collapse;
      td, tr, th {
        border: 0;
        background: transparent;
        margin:0;
      }
      th {
        font-size:28px;
        line-height:2em;
        font-variant:small-caps;
      }
      th.plan, td.plan {
        width:18%;
        box-shadow:0 0 3px rgba(0,0,0,.5);
        text-align:center;
      }
      th.title { font-size:32px }
      td.plan { .pnl-ghost }
      th.silver, td.silver { .pnl-silver }
      th.gold, td.gold { .pnl-lemon }
      th.platinum, td.platinum { .pnl-snow }
      th.open, td.open, td.nop {
        position:relative;
        .pnl-smoke;
        color:#fff;
        z-index:1;
        &::after {
          z-index:2;
          content:'';
          display:block;
          position:absolute;
          top:0;
          bottom:0;
          left:0;
          right:0;
        }
        > * {
          position:relative;
          z-index:3;
        }
      }
      td.def {
        text-align:right;
        font-size:24px;
        padding:0 8px 0 0;
      }
      .descr {
        text-shadow:none;
        font-size:12px;
        line-height:1.2em;
      }
      .fee { font-size: 28px }
    }
  }

  .vision-pane {
    .wrap {
      overflow:hidden;
      background:#fff;
      box-shadow:0 0 24px rgba(0,0,0,.15) inset,
                 0 1px 4px rgba(0,0,0,.4);
      .content-output {
        position:relative;
        z-index:3;
        padding:16px 32px;
        text-shadow:none;
      }
      &::after {
        content:'';
        position:absolute;
        z-index:2;
        display:block;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:.1;
        background:url("../img/bd5.png") center center no-repeat;
      }
    }
  }

  .partnership-pane {
    .smoke-gr;
    padding:16px 0;
    .feature {
      clear:both;
      p {
        font-size: 20px;
        line-height: 2em;
        margin:0;
      }
      ul, li { margin: 0 }
      .input-wrap {
        display:inline-block;
        vertical-align:middle;
        line-height:20px;
        padding-top:8px;
        label {
          display:block;
          font: 10px @sans-fonts;
          color: #999;
          text-align: center;
        }
      }
      input[type="text"], select {
        background:transparent;
        font: 20px @serif-fonts;
        font-style: italic;
        border:1px solid #aaa;
        outline:0;
      }
      input[type="text"] {
        border:0;
        border-bottom: 1px dashed #aaa;
      }
    }
    .heading {
      .ea-frame-clipped;
      font-size:19px;
      color:#fff;
      text-shadow:0 1px 1px rgba(0,0,0,.5);
      a { color:#fff}
      margin-bottom:16px;
    }
  }

}