Annotation Maker

annotations.sass

@import compass/css3, compass/utilities

#annotation-tooltip
  border:     2px solid #999999
  display:    none
  font-size:  11px
  left:       160px
  padding:    10px
  position:   absolute
  text-align: center
  top:        200px
  z-index:    2
  +background-image(linear-gradient(#F9F1F1, #F4ECEC, #D7D3D3))
  +border-radius(5px)
  +box-shadow(#3D3D3D 3px 2px 8px -1px)

  .down-arrow-border, .down-arrow
    border-style: solid
    border-width: 10px
    left:         3px
    height:       0
    position:     absolute
    width:        0

  .down-arrow-border
    border-color: #999999 transparent transparent transparent
    bottom:       -22px

  .down-arrow
    border-color: #D7D3D3 transparent transparent transparent
    bottom:       -19px
    
#annotation-maker
  display:        none
  position:       absolute

  button
    color:  #F9F1F1
    border: 1px solid #EA5757
    +border-radius(4px)
    +background-image(linear-gradient(#FFA6A6, #F80808, #D30B0B))
    +box-shadow(#8B7575 1px 1px 1px)

    &:hover
      +background-image(linear-gradient(#FFA6A6, #D01D1D, #A20D0D))

.annotation-label, .annotation-maker-label
  color:          white
  font-size:      11px
  height:         14px
  padding-top:    4px
  text-align:     center
  width:          16px
  +border-radius(10px)
  +background-image(linear-gradient(#FFA6A6, #F80808, #D30B0B))

.annotation-label
  cursor:   pointer
  position: absolute
  +box-shadow(#3D3D3D 1px 1px)

.annotation-maker-label
  position: relative
  z-index:  2
  +box-shadow(#3D3D3D 2px 3px 5px -1px)

.annotation-box
  border:   1px solid #B4B4B4
  height:   100px
  padding:  10px
  position: relative
  top:      -10px
  left:     5px
  width:    200px
  z-index:  1
  +background-image(linear-gradient(#F9F1F1, #F4ECEC, #D7D3D3))
  +box-shadow(#3C3C3C 2px 4px 7px -3px)
  +border-radius(5px)

  textarea
    background-color: #F8F7F7
    color:            #817777
    font:             13px helvetica
    border:           1px solid #C2B4B4
    height:           60px
    margin-bottom:    5px
    outline:          medium none
    padding:          5px
    resize:           none
    width:            188px
    +border-radius(5px)
    +box-shadow(#C1C1C1 2px 3px 3px inset)