gistfile1.txt

@media only screen and (max-width: 980px)
  #modal
    #window
      +scale(0.8)


@media only screen and (max-width: 680px)
  #modal
    #window
      +scale(0.6)

@media only screen and (max-height: 680px)
  #modal
    #window
      +scale(0.8)

@media only screen and (max-height: 500px)
  #modal
    #window
      +scale(0.6)
      overflow: scroll

#modal
  max-width: 500px

  input, select
    height: 30px

  #mask
    top: 0
    left: 0
    position: absolute
    z-index: 9000
    background-color: #000
    display: none

  #window
    position: fixed
    width: 670px
    height: 700px
    display: none
    z-index: 9999
    padding: 45px
    margin: 0 0 10px 0
    background: image-url('modal_square_670.png') no-repeat left top

    .contents
      text-align: center

      h2
        font-size: 20px
        width: 150px
        margin: 0 auto
        padding: 15px 0 0
        font-weight: normal

      .close_box
        width: 40px
        height: 40px
        margin: 0 auto

        .close
          margin: 0 auto
          display: block
          cursor: pointer
          position: relative
          width: emCalc(2px)
          height: emCalc(33px)
          background: $wine-color
          -webkit-transform: rotate(45deg)
          -moz-transform: rotate(45deg)
          -o-transform: rotate(45deg)
          -ms-transform: rotate(45deg)
          transform: rotate(45deg)
          font-size: 16px

          &:after
            content: ""
            position: absolute
            top: 0
            left: 0
            width: emCalc(2px)
            height: emCalc(33px)
            background: $wine-color
            -webkit-transform: rotate(-90deg)
            -moz-transform: rotate(-90deg)
            -o-transform: rotate(-90deg)
            -ms-transform: rotate(-90deg)
            transform: rotate(-90deg)

      .close_box:hover
        cursor: pointer

        .close
          background: $link-color

          &:after
            background: $link-color

      .square_small
        padding: 0 2px
        margin: 0
        position: relative
        display: inline-block
        font-size: 16px
        font-weight: bold
        border: 0
        color: $wine-color
        z-index: 1
        top: -1px

        &:before, &:after
          content: ""
          position: absolute
          top: 0px
          border-top: 3px solid transparent
          border-bottom: 3px solid transparent

        &:before
          right: 2px
          border-right: 3px solid black

        &:after
          left: 2px
          border-left: 3px solid black

      #new_order
        margin: 0 auto
        padding-top: 18px

        label
          font-size: 16px

        div
          margin: 5px auto

        .name
          width: 50%

        .two_inputs

          .left_input label
            text-align: right
            padding-right: 5px
            position: relative

            &:after
              content: "/"
              position: absolute
              top: 0
              right: -5px
              width: emCalc(5px)
              height: emCalc(5px)

          .right_input label
            text-align: left
            padding-left: 5px

          .left_input, .right_input
            display: inline-block
            max-height: 58px
            width: 25%
            vertical-align: top

        .adress
          width: 90%

        .comments
          width: 50%

        .name, two_inputs, .adress, .comments
          margin: inherit

        .small
          margin: 10px 0

          a
            width: 126px

      #order_price
        margin: inherit
        font-size: 20px
        padding-top: 10px
        width: 125px