//= require_self
//= require concen/fileuploader
//= require concen/flot
//= require concen/jquery.ui.resizable
@charset "utf-8"

@import "compass"
@import "compass/reset"
@import "compass/typography/text/force-wrap"
@import "blueprint/print"
@import "concen/partials/variables"
@import "concen/partials/mixins"
@import "concen/partials/base"
@import "concen/partials/form"

@media print
  +blueprint-print

body.concen
  min-width: 960px
  padding: $standard-gap
  header, #content, footer
    width: 100%

// Header

header
  display: block
  border-bottom: 1px solid $color-2
  margin: 0 auto
  position: relative
  +clearfix
  h1
    height: 25px
    line-height: 25px
    padding-bottom: 15px
    font-size: 24px
    float: left
    a
      border-bottom: 0
      +clearfix
      text-decoration: none
    span
      float: left
    span.engine-name
      font-weight: bold
    span.application-name
      margin-left: $standard-gap/2
      font-weight: normal
    img
      display: block
  nav
    position: absolute
    right: 0
    top: 0
    ul
      +horizontal-list(10px)
      font-size: 13px
      overflow: visible
      li
        line-height: 25px
        a
          +hover-link
  form
    position: absolute
    top: 0
    right: 0
  input#keyword
    font-size: 12px
    line-height: 15px
    background: image-url("concen/magnifying-glass.png") no-repeat 6px 5px
    outline: none
    border: 1px solid lighten(#000, 70%)
    +border-radius(60px)
    -webkit-appearance: none
    min-width: 120px
    width: 120px
    height: 15px
    padding: 4px 12px 4px 24px
    color: $gray-60
  input#keyword:focus
    color: $gray-20

// Content Section

#content
  margin: $standard-gap auto 0 auto
  text-align: left
  h1
    margin-bottom: $standard-gap
    span
      margin-right: $standard-gap/2
  div.parent-header
    height: 24px
    width: 100%
    position: relative
    h2
      line-height: 24px
      display: inline
      margin-bottom: 0
    p.description
      font-size: 12px
      display: inline
      margin-left: 6px
      color: lighten(#000, 60%)
    p.counter
      font-style: italic
      font-size: 18px
      line-height: 24px
      float: right

ul.pages
  margin-left: 0
  font-size: 14px
  span.handle
    background: image-url("concen/icon-handle.png")
    width: 12px
    height: 12px
    +inline-block
  p, ul p
    margin-bottom: 10px
    vertical-align: middle
    span, a
      vertical-align: middle
      color: $color-2
    &.author
      span, a
        color: $color-1
  a, ul a
    margin-left: 4px
  ul
    margin-left: 20px

section#article
  width: 774px

.boxshadow ul.search-result
  padding-bottom: 0
  li.child
    margin-top: 0
    margin-bottom: 30px
  div.text
    margin-top: 0

// Footer

footer
  color: $color-1
  margin: $standard-gap auto 0 auto
  width: 760px
  display: block
  font-size: 12px
  border-top: 1px solid $color-2
  p
    text-align: center
    margin: 15px 0 0 0
    font-size: 12px

#file-list
  width: 260px
  float: right
  // background: lighten(#000, 94%)
  padding: 0 0 0 20px
  margin-bottom: 20px
  +text-shadow(white, 0px, 1px, 0px)
  position: relative
  h3
    line-height: 1
    font-size: 13px
    margin-bottom: 10px
    position: relative
    background: lighten(#000, 92%)
    padding: 6px 10px
    +text-shadow(white, 0px, 1px, 0px)
  ul
    list-style-position: inside
    margin-bottom: 20px
    li
      font-size: 12px
      line-height: 1
      height: 12px
      list-style-type: square
      padding: 8px 10px
      border-bottom: 1px solid lighten(#000, 92%)
      +clearfix
      a
        font-size: 12px
      .right
        float: right
        height: inherit
        +clearfix
        div, a
          width: 12px
          height: 12px
          margin-left: 10px
          display: block
          text-indent: -9999px
          float: left
        .check
          background: image-url("concen/glyph-small-check.png") no-repeat
        .activate
          background: image-url("concen/glyph-small-check-alt.png") no-repeat
        .activate:hover
          background: image-url("concen/glyph-small-check.png") no-repeat
        .handle
          background: image-url("concen/glyph-small-handle.png") no-repeat
        .delete
          background: image-url("concen/glyph-small-delete.png") no-repeat

.panels
  margin-bottom: 30px
  .panel
    float: left
    width: 31.25%
    margin-right: 3.125%
    // margin-bottom: 30px
    font-size: 12px
    .graph
      padding: $standard-gap/2
    h3
      line-height: 1
      border-bottom: 1px solid $color-2
      padding: $standard-gap/3
      background: $color-4
      +border-top-radius(4px)
      +text-shadow(white, 0px, 1px, 0px)
    p.big-number
      font-size: 72px
      text-align: center
      height: 168px
      line-height: 168px
    ul
      width: 100%
      min-height: $standard-gap/2
      li
        padding: $standard-gap/5 $standard-gap/3
        border-bottom: 1px solid $color-5
        position: relative
        list-style: none
        overflow: hidden
        &:last-child, &.last
          border-bottom: 0
        a, p
          font-size: 12px
          +ellipsis
          display: block
          width: 100%
        p.right
          position: absolute
          top: $standard-gap/5
          right: $standard-gap/3
          padding-left: 10px
          background: white
          width: auto

  .panel.wide
    width: auto
    margin-right: 0
    float: none
  .edge
    margin-right: 0px
  ul.historical-visits
    list-style-type: none
    border: none
    li
      float: right
      width: 40px
      padding: 0
      margin: 0
      height: 142px
      border: none
      div.count
        height: 120px
        position: relative
      div.total, div.unique
        position: absolute
        bottom: 0
        left: 0
        width: 100%
      div.total
        background: #43d166
        z-index: 10
      div.unique
        background: #9aeeb0
        z-index: 11
      p
        margin-top: 8px
        height: 14px
        font-size: 11px
        line-height: 14px
        text-align: center

// Qtip JS Plugin

.qtip-content
  font-size: 13px
  color: $gray-20
  background: white

.qtip-tip, .qtip-wrapper

.qtip-wrapper
  +box-shadow(rgba(0,0,0,0.75), 0, 1px, 3px)

// Ace Text Editor

#text-editor
  min-height: 400px
  position: relative

#file-manager
  float: right
  width: 25%
  div.border
    padding: 20px
    margin-left: $standard-gap
  h3
    margin-top: 20px
    span
      vertical-align: middle
    a
      margin-right: 4px
      vertical-align: middle
  ul
    list-style-type: none
    li
      font-size: 12px
      margin-top: 10px
      a
        +force-wrap
        color: $color-2
        margin-right: 4px
        &.filename
          color: $color-1

form.with-text-editor
  float: left
  width: 75%
  &.wide
    width: 100%
  .border
    padding: 10px
    +box-shadow(rgba($color-2, 0.3) 0 2px 2px inset)

.tickLabel
  font-size: 12px

table
  border-collapse: collapse
  font-size: 14px
  width: 100%
  th
    background: $color-4
    +border-top-radius(4px)
    font-size: 16px
    font-weight: bold
    .wf-active &
      font-weight: 600
  td, th
    border-bottom: 1px solid $color-5
    padding: $standard-gap/3
    vertical-align: top
    &.center
      text-align: center
    &.right
      text-align: right
  tr:last-child
    td
      border-bottom: 0