zhdk/madek

.popover
  background-clip: padding-box
  background-color: #FFFFFF
  border: 1px solid rgba(0, 0, 0, 0.2)
  border-radius: 6px 6px 6px 6px
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
  display: none
  left: 0
  padding: 1px
  position: absolute
  text-align: left
  top: 0
  white-space: normal
  width: 236px
  z-index: 1010

.popover.top
  margin-top: -10px

.popover.right
  margin-left: 10px

.popover.bottom
  margin-top: 10px

.popover.left
  margin-left: -10px

.popover-title
  background-color: #F7F7F7
  border-bottom: 1px solid #EBEBEB
  border-radius: 5px 5px 0 0
  font-size: 14px
  font-weight: normal
  line-height: 18px
  margin: 0
  padding: 8px 14px

.popover-content
  padding: 9px 14px

.popover .arrow, .popover .arrow:after
  border-color: transparent
  border-style: solid
  display: block
  height: 0
  position: absolute
  width: 0

.popover .arrow
  border-width: 11px

.popover .arrow:after
  border-width: 10px
  content: ""

.popover.top .arrow
  border-bottom-width: 0
  border-top-color: rgba(0, 0, 0, 0.25)
  bottom: -11px
  left: 50%
  margin-left: -11px

.popover.top .arrow:after
  border-bottom-width: 0
  border-top-color: #FFFFFF
  bottom: 1px
  margin-left: -10px

.popover.right .arrow
  border-left-width: 0
  border-right-color: rgba(0, 0, 0, 0.25)
  left: -11px
  margin-top: -11px
  top: 50%

.popover.right .arrow:after
  border-left-width: 0
  border-right-color: #FFFFFF
  bottom: -10px
  left: 1px

.popover.bottom .arrow
  border-bottom-color: rgba(0, 0, 0, 0.25)
  border-top-width: 0
  left: 50%
  margin-left: -11px
  top: -11px

.popover.bottom .arrow:after
  border-bottom-color: #FFFFFF
  border-top-width: 0
  margin-left: -10px
  top: 1px

.popover.left .arrow
  border-left-color: rgba(0, 0, 0, 0.25)
  border-right-width: 0
  margin-top: -11px
  right: -11px
  top: 50%

.popover.left .arrow:after
  border-left-color: #FFFFFF
  border-right-width: 0
  bottom: -10px
  right: 1px