@import "variables";

.cabinet_sidebar
{
  width        : 110px;
  margin-right : 10px;
  background   : #1990cb;
  padding-top  : 13px;
  float        : left;

  & .logo_block
  {
    text-align     : center;
    padding-bottom : 15px;

    & a
    {
      @include font(11, 18);
      color           : #fff;
      text-decoration : none;

      &:hover
      {
        text-decoration : underline;
      }
    }

    & .logo
    {
      width         : 78px;
      height        : 78px;
      background    : #ff8c00;
      border        : 1px solid #c5e3f2;
      border-radius : 100px;
      margin        : 0 auto;
    }

    @include rating('white');
  }

  & .balans_block
  {
    padding    : 20px 0 10px;
    background : linear-gradient(to bottom, #a0c2dd, #c1e2fd);
    @include font(20, 20);
    color      : #007dbc;
    text-align : center;

    & a
    {
      @include font(11, 12);
      color           : #007dbc;
      text-decoration : none;

      &:hover
      {
        text-decoration : underline;
      }

      &.more_money
      {
        display     : block;
        width       : 93px;
        height      : 25px;
        line-height : 25px;
        color       : #fff;
        margin      : 15px auto 4px;
        background  : #41b682;
        border      : 1px solid #1581bf;

        &:hover
        {
          text-decoration : none;
        }
      }
    }
  }

  & .buttons
  {
    border-top    : 1px solid #0586c6;
    border-bottom : 1px solid #2e9acf;

    & a
    {
      margin-top      : 1px;
      display         : block;
      text-align      : center;
      border-top      : 1px solid #2e9acf;
      border-bottom   : 1px solid #0586c6;
      border-left     : 5px solid transparent;
      padding-top     : 55px;
      height          : 25px;
      @include font(11, 12);
      color           : #fff;
      text-decoration : none;
      background      : url($image_dir + "cabinet_buttons.png") no-repeat;
      position        : relative;

      $i : 0;
      @each $col in b1, b2, b3, b4, b5, b6
      {
        &.#{$col}
        {
          background-position : center -80px * $i;
        }
        $i : $i + 1;
      }

      $i : 0;
      @each $col in p1, p2, p3, p4
      {
        &.#{$col}
        {
          background : url($image_dir + "profile_buttons.png") no-repeat center -80px * $i;
        }
        $i : $i + 1;
      }

      &.p1, &.p2, &.p3
      {
        padding-top : 45px;
        height      : 35px;
      }

      &.active,
      &:hover
      {
        border-left      : 5px solid #bddffa;
        background-color : #007dbc;
      }

      & span.red
      {
        display       : none;
        position      : absolute;
        top           : 5px;
        right         : 5px;
        width         : 20px;
        height        : 20px;
        border        : 1px solid #fff;
        border-radius : 50px;
        background    : #e27767;
        @include font(9, 20);
        color         : #fff;
        text-align    : center;
      }

      & span.nored
      {
        position    : absolute;
        top         : 9px;
        right       : 9px;
        @include font(9, 10);
        color       : #fff;
        text-shadow : 1px 1px 0 #000;
      }
    }
  }
}

.cabinet_content
{
  float : left;
  width : 650px;

  & .zagolovok
  {
    background    : #1990cb;
    height        : 33px;
    padding       : 12px 20px 0 10px;
    position      : relative;
    margin-bottom : 10px;
    @include font(12, 20);
    color         : #fff;

    & .filter
    {
      padding-right : 27px;
      height        : 20px;
      @include font(12, 20, bold);
      color         : #fff;
      float         : right;
      background    : url($image_dir + "zagolovok_buttons.png") no-repeat top right;
      cursor        : pointer;
    }

    & .divfilter
    {
      display       : none;
      position      : absolute;
      top           : 35px;
      right         : 10px;
      z-index       : 1000;
      padding       : 3px;
      background    : #fff;
      border        : 1px solid #6bc1f2;
      border-radius : 5px;
      min-width     : 125px;

      & a
      {
        display         : block;
        padding         : 0 9px;
        @include font(10, 17);
        color           : #2d2d2d;
        text-decoration : none;

        &.active,
        &:hover
        {
          text-decoration : none;
          background      : #ebf7fe;
        }
      }
    }

    & .back_to_back
    {
      & a
      {
        display         : inline-block;
        vertical-align  : top;
        height          : 20px;
        text-decoration : none;

        &.back
        {
          padding-left : 38px;
          @include font(12, 20);
          color        : #fff;
          background   : url($image_dir + "str.png") no-repeat left center;
        }

        &.button
        {
          width       : 20px;
          margin-left : 10px;
          background  : url($image_dir + "zagolovok_buttons.png") no-repeat;

          &.add
          {
            background-position : 0 -20px;
          }

          &.refresh
          {
            background-position : 0 -40px;
          }
        }
      }
    }
  }

  & .adv_no
  {
    background    : #f5f5f5;
    margin-bottom : 13px;
    padding       : 20px 0;

    & > div
    {
      height   : 100px;
      overflow : hidden;

      &:first-child
      {
        width      : 145px;
        float      : left;
        text-align : center;
      }

      & h2
      {
        @include font(18, 18);
        color  : #1990cb;
        margin : 0 0 7px;
      }

      & p
      {
        @include font(11, 18);
        color  : #494949;
        margin : 0 0 15px;
      }

      & table
      {
        width  : 100%;
        height : 33px;

        & td
        {
          &:first-child
          {
            width : 220px;

            & a.add
            {
              display         : block;
              width           : 139px;
              height          : 31px;
              background      : #41b682 url($image_dir + "add.png") no-repeat 0 0;
              border          : 1px solid #1990cb;
              padding-left    : 39px;
              @include font(13, 31);
              color           : #fff;
              text-decoration : none;
            }
          }

          & ul
          {
            @include ul_null();

            & li
            {
              & a
              {
                text-decoration : none;
                color           : #1990cb;
                @include font(12, 16);

                &:hover
                {
                  text-decoration : underline;
                }
              }
            }
          }
        }
      }
    }
  }

  & .show_by
  {
    margin     : 13px 0 9px;
    text-align : right;
    height     : 24px;

    & span
    {
      @include font(11, 24);
      color         : #424547;
      padding-right : 5px;

      &.dialog
      {
        @include font(12, 24);
        color : #4f4f4f;
        float : left;
      }
    }

    & a
    {
      display         : inline-block;
      vertical-align  : top;
      width           : 22px;
      height          : 22px;
      margin          : 0 2px;
      border          : 1px solid #bfe7ff;
      background      : #fff;
      @include font(14, 22);
      text-align      : center;
      color           : #4fa6d8;
      text-decoration : none;

      &:hover,
      &.active
      {
        background   : #4fa6d8;
        border-color : #4fa6d8;
        color        : #fff
      }
    }

    & .stroka
    {
      padding    : 4px;
      background : #bcdef8;
      float      : left;

      & div
      {
        width      : 442px;
        height     : 14px;
        background : #ff9f54;
        border     : 1px solid #72bcf1;
        text-align : center;
        color      : #fff;
        @include font(10, 14, bold);
      }
    }
  }

  & .dialog_list
  {
    & > div
    {
      border-bottom : 1px solid #c1e6ff;
      padding       : 15px 7px;
      position      : relative;

      &:first-child
      {
        border-top : 1px solid #c1e6ff;
      }

      &:hover
      {
        background : #eaf7ff;
      }

      & .message
      {
        position      : absolute;
        top           : 10px;
        right         : 10px;
        padding-right : 23px;
        background    : url($image_dir + "message.png") no-repeat top right;
        @include font(11, 13);
        color         : #49a7d7;
      }

      @include dialog();
    }
  }

  & .settings_block
  {
    margin-top  : 10px;
    padding-top : 10px;
    border-top  : 1px solid #c1e6ff;

    &:first-child
    {
      margin  : 0;
      padding : 0;
      border  : 0;
    }

    & > div
    {
      background : #f7f7f7;
      padding    : 10px 15px 10px 35px;
      overflow   : hidden;

      & .zagi
      {
        color         : #707070;
        @include font(12, 14);
        padding-left  : 18px;
        margin-bottom : 20px;
        background    : url($image_dir + "profile_settings_icons.png") no-repeat;

        $i : 0;
        @each $col in s1, s2, s3, s4, s5, s6, s7, s8
        {
          &.#{$col}
          {
            background-position : 0 -14px * $i;
          }
          $i : $i + 1;
        }
      }

      & a
      {
        color : #007dbc;
        @include font(11, 14);

        &.black
        {
          color : #000;
        }

        &.edit,
        &.save
        {
          padding-left    : 18px;
          background      : url($image_dir + "profile_settings_icons.png") no-repeat 0 -112px;
          text-decoration : none;
          float           : right;

          &:hover
          {
            text-decoration : underline;
          }

          &.edit
          {
            background-position : 0 -112px;
          }

          &.save
          {
            background-position : 0 -126px;
          }
        }
      }

      & table
      {
        & tr
        {

          & td
          {
            padding : 5px 0;
            color   : #000;
            @include font(12, 16);

            &:first-child
            {
              text-align    : right;
              color         : #707070;
              padding-right : 3px;

              & img
              {
                max-width    : 180px;
                max-height   : 125px;
                margin-right : 0;
              }
            }

            & b
            {
              color : #007dbc;
            }

            & span
            {
              color : #f00;
            }

            & input[type="checkbox"]
            {
              margin : 2px 8px 0 0;
              float  : left;
            }

            & img
            {
              max-width    : 180px;
              max-height   : 125px;
              margin-right : 3px;
            }
          }
        }

        &.checkbox
        {
          & tr
          {

            & td
            {
              padding : 0;
            }
          }
        }
      }

      &.pay
      {
        text-align : center;
        padding    : 0;

        & .payment
        {
          width          : 131px;
          height         : 214px;
          padding-top    : 20px;
          display        : inline-block;
          vertical-align : top;
          position       : relative;
          margin         : 0 15px;

          & .icon
          {
            width      : 100px;
            height     : 100px;
            overflow   : hidden;
            background : url($image_dir + "payment_icons.png") no-repeat;
            margin     : 0 auto;
          }

          $i : 0;
          @each $col in p1, p2, p3, p4
          {
            &.#{$col} .icon
            {
              background-position : center -100px * $i;
            }
            $i : $i + 1;
          }

          &.p4
          {
            text-decoration : none;
          }

          & .title
          {
            @include font(14, 16);
            color   : #686868;
            padding : 15px 0;
          }

          & .cost
          {
            @include font(20, 20);
            color : #007dbc;
          }

          &:hover .hover
          {
            display : block;
          }

          & .hover
          {
            display    : none;
            position   : absolute;
            top        : 0;
            left       : 0;
            width      : 125px;
            height     : 206px;
            background : rgba(21, 129, 191, 0.8);
            padding    : 4px 3px;

            & > div
            {
              padding      : 0 6px;
              height       : 206px;
              border-left  : 1px dashed #fff;
              border-right : 1px dashed #fff;
              text-align   : center;

              & > div
              {
                height        : 128px;
                overflow      : hidden;
                margin-bottom : 12px;
                @include font(11, 14);
                color         : #fff;
                text-align    : left;
              }

              & a
              {
                @include font(11, 14);
                color : #fff;

                &.select_adv
                {
                  display         : block;
                  padding-top     : 3px;
                  margin          : 10px auto 0;
                  width           : 91px;
                  height          : 32px;
                  background      : #41b682;
                  border          : 1px solid #1581bf;
                  text-transform  : uppercase;
                  text-decoration : none;
                  text-align      : center;
                }
              }
            }
          }
        }
      }

      &.info
      {
        padding : 20px 20px 35px;
        @include font(12, 14);
        color   : #525252;

        & .title
        {
          font-weight : bold;
        }

        & .text
        {
          padding : 20px 0;
        }

        & .last
        {
          padding : 10px 0 0;
        }
      }
    }

    &.pay_advs_out
    {
      border  : 0;
      margin  : 0;
      padding : 0;

      & .pay_advs
      {
        background : none;
        padding    : 0;

        & .title
        {
          margin       : 15px 0 10px;
          padding-left : 40px;
          height       : 30px;
          @include font(16, 30);
          color        : #3496cf;
          background   : #f7f7f7 url($image_dir + "payment_icons_min.png") no-repeat;

          $i : 0;
          @each $col in t1, t2, t3
          {
            &.#{$col}
            {
              background-position : 10px -30px * $i;
            }
            $i : $i + 1;
          }
        }

        & .fixed_adv
        {
          overflow   : hidden;
          text-align : center;

          & > div
          {
            display        : inline-block;
            vertical-align : top;
            width          : 157px;
            height         : 200px;
            margin         : 3px 2px;

            & a
            {
              text-decoration : none;

              &.go_fix
              {
                display     : block;
                width       : 155px;
                height      : 75px;
                border      : 1px solid #b5e0f8;
                padding-top : 80px;
                @include font(16, 20);
                background  : url($image_dir + "big_krest.png") no-repeat center 30px;
              }

              & .img
              {
                display  : block;
                border   : 1px solid #9c9c9c;
                overflow : hidden;
                height   : 155px;
                position : relative;

                & img
                {
                  max-width  : 155px;
                  max-height : 155px;
                }

                & span
                {
                  display    : block;
                  position   : absolute;
                  bottom     : 0;
                  left       : 0;
                  width      : 155px;
                  height     : 25px;
                  background : rgba(0, 0, 0, 0.5);
                  @include font(11, 25);
                  color      : #fff;
                }
              }

              & .titlel
              {
                display     : block;
                padding-top : 5px;
                @include font(12, 16);
                color       : #3d4143;
              }
            }
          }
        }
      }
    }
  }

  & .score_create_block
  {

    & .settings_block div
    {
      font-size : 14px;
      color     : #515151;
      padding   : 15px;

      & table.first
      {
        width      : 100%;
        margin-top : 15px;

        & td
        {
          text-align : left;

          &:first-child
          {
            width        : 30px;
            padding-left : 20px;
            text-align   : left;
          }
        }
      }

      & a
      {
        float       : right;
        line-height : 20px;
      }

      & span
      {
        font-size : 11px;

        &.blue
        {
          font-size : 18px;
          color     : #007DBC;
        }
      }

      & input[type="submit"]
      {
        background : #e27767;
        padding    : 10px;
        color      : #fff;
        font-size  : 18px;
        border     : 0;
        margin     : 30px 0 15px;
      }

      & .smotri
      {
        width : 450px;

        & td
        {
          color      : #000;
          text-align : center;

          & span
          {
            font-size : 24px;
            color     : #3e3e3e;
          }

          & input[type="text"]
          {
            width      : 70px;
            padding    : 3px 20px 3px 10px;
            border     : 1px solid #d7d7d7;
            font-size  : 24px;
            color      : #3e3e3e;
            background : url($image_dir + "rub_lenta.png") no-repeat 82px center;
          }
        }
      }
    }
  }

  & .stat_blocks
  {
    & > div
    {
      border-bottom  : 1px solid #c1e6ff;
      padding-bottom : 7px;
      margin         : 6px 2px 0;
      width          : 320px;
      display        : inline-block;
      vertical-align : top;

      &:nth-child(2),
      &:first-child
      {
        border-top  : 1px solid #c1e6ff;
        padding-top : 7px;
      }

      & > div
      {
        height     : 95px;
        padding    : 10px;
        background : #eaf7ff;

        & > div
        {
          overflow : hidden;

          &:first-child
          {
            width        : 52px;
            margin-right : 20px;
            text-align   : center;
            float        : left;

            & .logo
            {
              width         : 50px;
              height        : 50px;
              border        : 1px solid #767c80;
              border-radius : 100px;
              overflow      : hidden;

              & img
              {
                max-width  : 50px;
                max-height : 50px;
              }
            }

            & div.rating_img
            {
              width      : 52px;
              height     : 9px;
              margin     : 5px auto 0;
              background : url($image_dir + 'rating_grey_small.png') no-repeat;

              $i : 0;
              @each $col in r0, r1, r2, r3, r4, r5
              {
                &.#{$col}
                {
                  background-position : 0 -9px * $i;
                }
                $i : $i + 1;
              }
            }

            & div.rating
            {
              width      : 52px;
              height     : 0;
              border-top : 2px solid #ff9f54;
              margin     : 9px 0 0;

              & div
              {
                width      : 17px;
                padding    : 0 3px;
                @include font(8, 12);
                color      : #198fcc;
                margin     : -8px auto 0;
                background : #eaf7ff;

              }
            }

            & span.status
            {
              @include font(9, 10);
              color : #198fcc;
            }
          }

          & ul
          {
            @include ul_null();

            & li
            {
              padding-left : 20px;
              @include font(12, 20);
              color        : #686868;
              height       : 20px;
              background   : url($image_dir + "stat_option.png") no-repeat;
              overflow     : hidden;

              & a
              {
                @include font(12, 16);
                color           : #686868;
                text-decoration : none;

                &.block
                {
                  color : #e27767;
                }
              }

              $i : 0;
              @each $col in li1, li2, li3
              {
                &.#{$col}
                {
                  background-position : 0 -20px * $i;
                }
                $i : $i + 1;
              }

              @include rating('grey');

              & .rating_img
              {
                margin   : 5px 0 0 0 !important;
                overflow : hidden;
              }

              & span
              {
                float         : left;
                padding-right : 7px;
              }
            }
          }

          & > a.name
          {
            @include font(12, 20);
            color           : #686868;
            text-decoration : underline;
            white-space     : nowrap;
            text-overflow   : ellipsis;
            display         : block;
            overflow        : hidden;
            margin-bottom   : 6px;

            &:hover
            {
              text-decoration : none;
            }
          }
        }
      }
    }
  }

  & .history
  {
    & > table.top
    {
      width : 100%;

      & > tbody > tr > td
      {
        background     : #eaf7ff;
        vertical-align : top;

        &:first-child
        {
          width      : 485px;
          background : #f7f7f7;
        }

        & .left
        {
          padding : 20px 20px 35px;
          @include font(12, 16);
          color   : #686868;

          & .balans
          {
            @include font(16, 16, bold);
            color        : #007dbc;
            padding-left : 10px;
          }

          & .zagi
          {
            @include font(14, 16, bold);
            color         : #686868;
            margin-bottom : 20px;
          }

          & table.pla
          {
            margin-bottom : 40px;
          }

          & .more_money
          {
            display         : block;
            width           : 93px;
            height          : 25px;
            line-height     : 25px;
            color           : #fff;
            margin          : 0 0 0 20px;
            background      : #41b682;
            border          : 1px solid #1581bf;
            text-align      : center;
            text-decoration : none;

            &:hover
            {
              text-decoration : none;
            }
          }

          & table
          {
            &.line
            {
              width : 100%;

              & tr.day td
              {
                padding-top : 30px;
              }

              & td
              {
                padding    : 8px 0;
                text-align : center;
                border-top : 1px solid #ddd;

                &:first-child
                {
                  text-align : left;
                }

                &.itog
                {
                  font-weight : bold;
                  text-align  : right;
                }
              }
            }
          }
        }

        & .right
        {
          padding : 10px 13px 35px;

          & table
          {
            width         : 100%;
            margin-bottom : 15px;

            & tr
            {
              &:first-child
              {
                & td
                {
                  padding-bottom : 20px;

                  &.plus
                  {
                    @include font(11, 16, bold);
                    color : #4fa6d8;
                  }

                  &.minus
                  {
                    @include font(11, 16, bold);
                    color : #e27767;
                  }
                }
              }

              & td
              {
                &:first-child
                {
                  @include font(14, 16, bold);
                  color : #686868;

                  & a
                  {
                    @include font(11, 16);
                    color           : #686868;
                    text-decoration : underline;

                    &:hover
                    {
                      text-decoration : none;
                    }
                  }
                }

                &.plus
                {
                  @include font(11, 16);
                  color : #4fa6d8;
                }

                &.minus
                {
                  @include font(11, 16);
                  color : #e27767;
                }
              }
            }
          }

          & > a
          {
            @include font(11, 16);
            color : #4fa6d8;
          }
        }
      }
    }
  }
}

.seller_block
{
  background    : #f5f5f5;
  margin-bottom : 13px;

  & > div
  {
    height      : 137px;
    overflow    : hidden;
    padding-top : 13px;

    &:first-child
    {
      width        : 116px;
      margin-right : 13px;
      float        : left;
      text-align   : center;

      @include rating('grey');

      & .rating
      {
        margin-top : 5px;
      }
    }

    & h2
    {
      @include font(14, 18, bold);
      color  : #686868;
      margin : 0 0 15px;
    }

    & ul
    {
      @include ul_null();

      & li
      {
        & a
        {
          padding-left   : 22px;
          color          : #3d4143;
          @include font(12, 22);
          background     : url($image_dir + "seller_link.png") no-repeat 0 0;
          display        : inline-block;
          vertical-align : top;

          $i : 0;
          @each $col in l1, l2, l3, l4
          {
            &.#{$col}
            {
              background-position : 0 -22px * $i;
            }
            $i : $i + 1;
          }
        }
      }
    }
  }
}

.sam_dialog
{
  background : #f5f5f5;
  border     : 1px solid #f5f5f5;

  & .about
  {
    padding : 0 10px;
    @include font(12, 37);
    color   : #4f4f4f;

    & .close
    {
      display         : block;
      float           : right;
      padding-right   : 22px;
      background      : url($image_dir + "dialog_links.png") no-repeat right -30px;
      text-decoration : none;
      color           : #4f4f4f;
    }
  }

  & .dialog_window
  {
    background : #fff;
    overflow   : hidden;
    padding    : 20px 10px;

    & > div
    {
      width         : 455px;
      overflow      : hidden;
      margin-bottom : 10px;

      @include dialog();

      & .status
      {
        font-weight : bold !important;
      }
    }
  }

  & .textarea
  {
    padding    : 10px 4px 0;
    text-align : center;

    & textarea
    {
      padding    : 13px 10px;
      @include font(12, 16);
      color      : #4f4f4f;
      border     : 1px solid #c0cad5;
      background : #fff;
      height     : 50px;
      width      : 618px;
    }

    & input[type="submit"]
    {
      margin     : 7px 0 7px -32px;
      width      : 160px;
      height     : 30px;
      background : #41b682;
      border     : 1px solid #1581bf;
      @include font(12, 26);
      color      : #fff;
      padding    : 0;
      cursor     : pointer;
    }

    & .smile
    {
      display    : block;
      width      : 32px;
      height     : 32px;
      float      : left;
      background : url($image_dir + "smile.png") no-repeat 0 0;
    }
  }
}

.modal_out
{
  display    : none;
  position   : fixed;
  top        : 0;
  left       : 0;
  background : rgba(0, 0, 0, 0.5);
  width      : 100%;
  height     : 100%;
  z-index    : 100;

  & .modal
  {
    background : #fff;
    border     : 1px solid #008ad2;
    padding    : 25px 55px;
    position   : fixed;
    top        : 0;
    bottom     : 0;
    left       : 0;
    right      : 0;
    z-index    : 1000;
    width      : 400px;
    height     : 400px;
    margin     : auto;

    & .close
    {
      display    : block;
      position   : absolute;
      top        : 10px;
      right      : 10px;
      width      : 10px;
      height     : 10px;
      cursor     : pointer;
      background : url($image_dir + "close_blue.png") no-repeat 0 0;
    }
  }
}

.review_out
{
  overflow: hidden;
  @include rating('grey');

  & h2
  {
    padding-left : 25px;
    background   : url($image_dir + "icon_big_review.png") no-repeat 0 center;
    @include font(18, 20);
    color        : #016db5;
    margin       : 0;
  }

  & .description
  {
    margin : 25px 0;
    @include font(12, 14);
    color  : #292929;
  }

  & .bottom
  {
    width      : 100%;
    position   : absolute;
    bottom     : 0;
    left       : 0;
    background : #ebebeb;

    & .in
    {
      padding : 10px 0 10px 65px;

      & > div
      {
        display        : inline-block;
        vertical-align : top;

        &.left
        {
          border-right  : 1px solid #c2c2c2;
          padding-right : 20px;
          margin-right  : 20px;

          & table td
          {
            @include font(12, 14);
            color : #292929;

            & .rating_img
            {
              margin : 0 0 0 10px;
            }
          }
        }

        &.right
        {

          & a
          {
            display         : block;
            color           : #E27767;
            @include font(12, 16);
            padding-left    : 20px;
            background      : url($image_dir + 'stat_option.png') no-repeat 0 -2px;
            text-decoration : none;
            overflow        : hidden;
          }
        }
      }
    }
  }
}