// 960gs framework

@import "/stylesheets/viewer/reset.css";
@import "/stylesheets/viewer/text.css";
@import "/stylesheets/viewer/960_12_col.css";

// boilerplate legacy
@import "/stylesheets/viewer/date.css";

@import "/stylesheets/viewer/style.css";

// other definitions

@import "viewer-definitions.less";

// custom style

a {
  color:@primary;
  &:visited {
    color:@primary;
  }
}

header {
  #branding {
    height:2*@lh + 14;
    background: url("@{base-url}/@{brand_image}") 0 -30px no-repeat;
    a {
      .block;
      .off-left;
      height:2*@lh + 14;
    }
  }

  #subscribed_to {
    text-align: center;
    color: @primary;
    font-weight: bold;
    line-height: @lh+4;
    #username {
      width:100%;
      margin-top:4px;
      height: 3*@lh - @lh/2;
      line-height: 3*@lh - @lh/2;
      a {
        color: @primary;
      }
    }
  }

  #user {
    height: 2*@lh + 18;
    position: relative;
    #user_account {
      cursor: pointer;
      border:1px solid @lightest;
      border-bottom:0;
      padding:5px;
      padding-bottom: 0;
      position: relative;
      #account {
        height: 2*@lh;
        background: url("@{base-url}/user.png") top right no-repeat;
        padding-top:10px;
        padding-left:40px;
        font-weight: bold;
        color: @primary;
        &.close {
          background:url("@{base-url}/cancel.jpg") 8px 5px no-repeat;
        }
      }
    // end of user_account
          
    }
    .content {
      display: none;
      
      #go_orders_history {
        color:@primary;
      }
    }

    &.selected {
      #user_account {
        .radius_bottom;
        border:1px solid @light-grey;
        border-bottom:0;
        cursor: pointer;
        z-index:1000;
        background: @lightest;
      //end of user_account
      }

      .dropdown(300px);
    // end of selected
    }

  }

  #toolbar {
    .radius(5px);
    .shadow;
    background: url("@{base-url}/toolbar_bg.png") @primary repeat-x;
    z-index:10;
    nav {
      line-height: @lh;
      height: 34px;
      ul {
        margin:0;
        padding:0;
        li {
          margin-left:0;
          float: left;
          list-style: none;
          cursor: pointer;
          a {
            color: @lightest;
            .no-decoration;
            .uppercase;
            line-height: 34px;
            font-size: @bs;
            font-weight: bold;
            span {
              margin-right:5px;
              float:left;
              .block;
              width:16px;
              height: 34px;
            }
          }
          &:first-child {
            a {
              padding-left:10px;
              .block;
              span {
                background: url("@{base-url}/home.png") 0 7px no-repeat;
              }
              &:hover {
                color: @hover;
                span {
                  background: url("@{base-url}/home.png") -16px 7px no-repeat;
                }
              }
              &:active {
                color: @active;
                span {
                  background: url("@{base-url}/home.png") -32px 7px no-repeat;
                }
              }

            }
          }
          &:last-child {
            float:right;
            a {
              padding-right:10px;
              .block;
              span {
                float: right;
                margin-left:5px;
                width:15px;
                background: url("@{base-url}/edition.png") 0 7px no-repeat;
              }

              &:hover {
                color: @hover;
                span {
                  background: url("@{base-url}/edition.png") -15px 7px no-repeat;
                }
              }
              &:active {
                color: @active;
                span {
                  background: url("@{base-url}/edition.png") -30px 7px no-repeat;
                }
              }
            }
          }
        }
      }
    }
  }
  #subtoolbar {
    background: @light-grey;
    height: 2*@lh - @lh/2;
    line-height: 2*@lh - @lh/2;
    width:920px;

    #reorder {
      ul {
        .no-margin-padding;
        li {
          float: left;
          .no-margin-padding;
          list-style: none;
          margin-right:3px;
          a {
            .block;
            .off-left;
            width:16px;
            height: 2*@lh - @lh/2;
            &#grid {
              background: url("@{base-url}/grid.png") center center no-repeat;
            }
            &#list {
              background: url("@{base-url}/list.png") center center no-repeat;
            }
          }

        }
      }
    }
    #pager {
      text-align: center;
      .uppercase;
      font-weight: bold;
      ul {
        .no-margin-padding;
        list-style: none;
        li {
          .no-margin-padding;
          float:left;
          margin-right:8px;

          &:last-child {
            margin-right: 0;
          }
          a {
            .block;
            width:14px;
            height: 2*@lh - @lh/2;
            &#first {
              background: url("@{base-url}/first.png") center center no-repeat;
            }
            &#prev {
              background: url("@{base-url}/prev.png") center center no-repeat;
            }
            &#next {
              background: url("@{base-url}/next.png") center center no-repeat;
            }
            &#last {
              background: url("@{base-url}/last.png") center center no-repeat;
            }
          }

        }
      }
    }
    #selector {
      width:140px;
      float: right;
    }
  }
  #actual_page {
    text-align: center;
    .uppercase;
    height: 10px;
    font-size: @bs;
    font-weight: bold;
  }
}

#main {
  min-height: 520px;
  background: url("@{base-url}/newspaper.jpg") center center no-repeat;
  text-align: center;
  #replace_me {
    position: relative;
    a.browse {
      width:21px;
      height: 34px;
      display: block;
      position: absolute;
      top:300px;

      background: url("@{base-url}/arrow-sprite.png");
    }

    a.prev {
      background-position: 0 0;
      left:0;
      &:hover {
        background-position: -42px;
      }
    }

    a.next {
      right:0px;
      background-position: -21px 0;
      &:hover {
        background-position: -63px;
      }
    }

    text-align: center;
  }
  #choose_edition {
    margin:10px 0;
    color: @primary;
    #payments {
      .radius(5px);
      height:72px;
      line-height:72px;
      border:1px solid @light-grey;
      background:url("@{base-url}/payments.jpg") top left repeat-x;
      div {
        background:url("@{base-url}/separator.png") top right repeat-y;
        text-align:left;
        height:72px;
        line-height:14px;
        
        h2 {
          margin-top:14px;
          font-size:@bs + 2;
          .uppercase;
        }
        
        p {
          font-size:@bs - 2px;
          width:285px;
        }
        &.time {
          padding-left:10px;
          width:288px;
        }
        &.sms {
          background:none;
        }
      }
    }
    
    a.btn {
      font-weight: bold;
    }
    h2, h3 {
      color: @primary;
      margin-bottom:5px;
    }
    h2 {
      font-size: @bs + 5;
    }
    
    h3 {
      font-size: @bs + 2;
      margin-bottom:@lh;
    }
    
    .inner {
      position:relative;
      strong {
        font-size: @bs + 2;
        padding-top:5px;
        display:block;
      }
      .choose {
        display: none;
        position:absolute;
        z-index:1;
        color: @lightest;
        &.selected {
          background-image: url("@{base-url}/blackpixel.png");
          display: block;
          line-height: 20px;
        }
      }
      &:hover {
        .choose {
          display: block;
          background: url("@{base-url}/blackpixel.png");
          cursor: pointer;
          a {
            color: @lightest;
            &.buy_edition { background: url("@{base-url}/credit.png") top center no-repeat; }
            &.read_edition { background: url("@{base-url}/read.png") top center no-repeat; }
            &.subscribe_edition { background: url("@{base-url}/cart.png") top center no-repeat; }
            padding-top:40px;
          }
        }
      }
      &.selected {
        border-color:green;
      }

    }
    #national {
      margin-bottom:20px;
      .inner {
        .choose {
          font-size: @bs + 5;
          width:388px;
          height: 507px;
          line-height: 507px;
          top:24px;
          left:36px;
          &.selected {
            line-height: 20px;
            div {
              margin-top:230px;
              margin-bottom:10px;
            }
            a {
              .radius;
              .no-decoration;
              background: @selected;
              color: @lightest;
              padding:2px 7px;
              &:hover {
                background: darken(@selected, 10%);
              }
              &:visited {
                color:@primary;
              }
            }
            
            a.no {
              background: none;
              color: @lightest;
              border:0;
              padding: 0;
              &:hover {
                color: @light-grey;
              }
            }
          }
        }
        text-align: center;
        padding-top:23px;
        img {
          background: url("@{base-url}/loading.gif") center center no-repeat;
          border:1px solid @light-grey;
          margin-bottom:5px;
        }
      }
    }
    
    .info {
      padding-left:35px;
      text-align:left;
      margin-top:40px;
      h2 {
        font-size:14px;
        margin-left:5px;
      }
      a { 
        margin-left:5px;
        color:@primary;
      }
    }
    
    
    #local {
      #loading {
        background: url("@{base-url}/loading.gif") center left no-repeat;
        padding-left:40px;
        margin-left:200px;
        height:400px;
        line-height: 400px;
        text-align: left;
      }
      text-align: center;
      .inner {
        .choose {
          font-size: @bs + 2;
          width:97px;
          height: 134px;
          line-height: 165px;
          top:23px;
          left:32px;
          &.selected {
            line-height: 20px;
            div {
              margin-top:40px;
              margin-bottom:10px;
            }
            a {
              .radius;
              .no-decoration;
              background: @selected;
              color: @lightest;
              padding:2px 7px;
              &:hover {
                background: darken(@selected, 10%);
              }
            }
            
            a.no {
              background: none;
              color: @lightest;
              border:0;
              padding: 0;
              &:hover {
                color: @light-grey;
              }
            }
          }
        }

        margin-bottom:10px;
        width:119px;
        height:158px;
        text-align: center;
        padding:22px 0 5px 21px;
        img {
          border:1px solid @light-grey;
          text-align: center;
          background: url("@{base-url}/loading.gif") center center no-repeat;
       }
       span {
          padding:5px 0;
       }
        &:after {
          content:'.';
          font-size: 1px;
          color: @lightest;
        }
        &:hover {
        
        }
      }
    }
  }
}

footer {

  #colophon {
    border-top:1px solid @light-grey;
    font-size: @bs - 2;
    color: @grey;
    text-align: center;
    padding-top:@lh;
    margin-bottom: @lh;
  }
}
#local_modal {
  padding:20px;
  min-height: 420px;
  width:500px;
  /* must be initially hidden */
    text-align: center;
    h3 {
      .no-margin-padding;
      color: @primary;
      font-size: 18px;
      font-weight: bold;
      border-bottom:1px solid @light-grey;
    }

    .date-picker-wrapper {
      background: url('@{base-url}/1.jpg') top left no-repeat;
      height: 80px;
      h4 {
        color: @primary;
        font-size: 14px;
        margin:@lh 0;
        .uppercase;
        font-weight: normal;
      }
    }
    .wrapper {
      width:auto;
      position: relative;
      #over-layer {
        position: absolute;
        background: url('@{base-url}/whitepixel.png');
        width:100%;
        height:290px;
        z-index:100000;
      }
      background: url('@{base-url}/2.jpg') top left no-repeat;
      h4 {
        .uppercase;
        color: @primary;
        font-size: 14px;
        font-weight: normal;
        margin-bottom:40px;
      }
      margin-top:20px;
      position: relative;
      text-align: center;
      height:180px;
      .scrollable {
        width:408px;
      }
      a.browse {
        width:21px;
        height: 34px;
        display: block;
        position: absolute;
        top:109px;

        background: url("@{base-url}/arrow-sprite.png");
      }

      a.prev {
        background-position: 0 0;
        left:0;
        &:hover {
          background-position: -42px;
        }
      }

      a.next {
        right:15px;
        background-position: -21px 0;
        &:hover {
          background-position: -63px;
        }
      }
      .footer {
        text-align: left;
        margin-top:@lh;
        padding-bottom:@lh;
        a.btn {
          .no-decoration;
          font-weight: bold;
          padding:5px;
          color: @lightest;
        }
        a {
          color: @primary;
        }
      }
    }

}

#page_navigation_thumbnails {
  padding:5px 0;
  background: @lighter-grey;
  position: relative;
  a.browse {
    width:21px;
    height: 34px;
    display: block;
    position: absolute;
    top:57px;
    z-index: 100;
    cursor: pointer;
    background: url("@{base-url}/arrow-sprite.png");
  }
  a.slide-hide {
    background: url("@{base-url}/cancel.jpg") @lighter-grey 65px 2px no-repeat;
    position: absolute;
    top: -30px;
    right: 0;
    display: block;
    width: 85px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    font-weight: bold;
    color: @dark;
  }
  a.prev {
    background-position: -42px 0;
    left:-5px;
    &:hover {
      background-position: 0 0 ;
    }
  }

  a.next {
    right:-10px;
    background-position: -63px 0;
    &:hover {
      background-position: -21px 0;
    }
  }

  .scrollable {
    position: relative;
    overflow: hidden;
    width:920px;
    height: 134px;
    margin-left: 10px;
    .items {
      width:20000em;
      position:absolute;

      .item {
        float: left;
        margin-right:10px;
        border:1px solid @light-grey;
        height: 130px;
        width:187px;

        .inner_thumb {
          position: relative;
          &:hover {
            .page_hover {
              display: block;
            }
          }
          img,
          .page_hover {
            position: absolute;
          }

          .page_hover {
            display: none;
            .no-decoration;
             background: url("@{base-url}/blackpixel.png");
            width:187px;
            height: 130px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            color: @lightest;
            line-height: 130px;
         }
        }

      }
    }
  }
}

.scrollable {

  /* required settings */
  position:relative;
  overflow:hidden;
  width: 304px;
  height:180px;
  margin-left:41px;
}

/*
  root element for scrollable items. Must be absolutely positioned
  and it should have a extremely large width to accommodate scrollable items.
  it's enough that you set width and height for the root element and
  not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}

/*
  a single item. must be floated in horizontal scrolling.
  typically, this element is the one that *you* will style
  the most.
*/
.items .item {
  float:left;
  margin-right:5px;
  span {
    color: @primary;
    line-height:2*@lh;
    font-weight: bold;
  }
  .inner {
    width:97px;
    height: 134px;
    position: relative;
    border:1px solid @light-grey;
    background: url("@{base-url}/loading.gif") center center no-repeat;
      display: block;
      width:97px;
      height: 134px;
      img {
        .absolute;
        top:0;
        left:0;
      }
      div {
        .hide;
        top:0;
        left: 0;
        &.selected {
          display: block;
          background: url("@{base-url}/whitepixel.png");
          width:97px;
          height: 134px;
          position: absolute;
          border:1px solid @selected;

          a {
            background: url("@{base-url}/selected.png") top center no-repeat;
            line-height: 14px;
            text-align: center;
            padding-top:40px;
            color: @selected !important;
            display: block;
            height:55px;
            margin:40px 0 0 0;
            font-weight: bold;
            .no-decoration;
          }
          &:hover {
            background: url("@{base-url}/whitepixel.png");

            a {
              background: url("@{base-url}/selected.png") top center no-repeat;
              line-height: 14px;
              text-align: center;
              padding-top:40px;
              color: @selected;
              display: block;
              height:55px;
              margin:40px 0 0 0;
              font-weight: bold;
              .no-decoration;
              &.buy_edition,
              &.read_edition {
                background: url("@{base-url}/selected.png") top center no-repeat;
              }

            }

          }
        }
      }

      &:hover {
        div {
          width:97px;
          height: 134px;
          .block;
          .absolute;
          color: @lightest;
          text-align: center;
          line-height: 134px;
          background: url("@{base-url}/blackpixel.png");
          border:1px solid @dark;
          a {
            line-height: 14px;
            text-align: center;
            padding-top:40px;
            color: @lightest;
            display: block;
            height:55px;
            margin:40px 0 0 0;
            font-weight: bold;
            .no-decoration;
            cursor: pointer;
            &.buy_edition {
              background: url("@{base-url}/credit.png") top center no-repeat;
            }
            &.read_edition {
              background: url("@{base-url}/read.png") top center no-repeat;
            }
            &.subscribe_edition {
              background: url("@{base-url}/cart.png") top center no-repeat;
            }
          }

        }
      }
  }
}


.simple_overlay {
    display:none;
    /* place overlay on top of other elements */
    z-index:10000;
  
    /* styling */
    background-color:@lightest;
    .radius;
    width:675px;
    min-height:200px;
  
    /* CSS3 styling for latest browsers */
    .shadow;
  
    /* close button positioned on upper right corner */
    .close {
      background-image:url('@{base-url}/cancel.jpg');
      position:absolute;
      right:5px;
      top:5px;
      cursor:pointer;
      height:24px;
      width:24px;
    }
  }

#loader {
  margin-top:200px;
  text-align: left;
  font-size: @bs + 4;
  #spinner {
    position:relative;
    margin-left:-450px;
  }
}

#sms_checkout {
  width:400px;
  height:260px;
  #sms_payment {
    text-align:left;
    margin:20px;
    width:350px;
    h3,h4 {
      font-size:14px;
      margin-bottom:5px;
    }

    h4 {
      font-style:italic;
      color:red;
      font-size:11px;
    }

    .row {
      height:30px;
      line-height:30px;

      label {
        width:140px;
        display:block;
        float:left;
      }

      input,
      select {
        float:left;
      }

      input {
        border:1px solid #ccc;
        padding:4px 6px;
      }

      #sms_payment_button {
        .btn;
      }
    }
  }
}