// http://monkeyandcrow.com/blog/css3_splitview/

// Panels
%panel
  height: 4em

// Resizing
%resize-x
  resize: horizontal
  overflow: auto

// Initial Dimensions
.p-25
  width: 25%
.p-50
  width: 50%
.p-75
  width: 75%

// Split View
.split-view
  margin: 0.2em 0
  width: 100%
  clear: both
  display: table
  table-layout: fixed
  border-top: 3px solid #EEEEEE

.split-view %panel
  display: table-cell


.detail-panel-content
  padding: 0px 5px 15px 10px
  font-size: 13px
  font-size: 0.8125rem
  overflow: hidden
  h2
    margin: 0
    padding: 0 0 4px 0
    font-size: 20px
    font-size: 1.25rem
    line-height: 26px
    font-weight: normal
    border: none
    text-transform: none
    color: #333

// Detail Panel Content

span.subtitle
  margin: 0px 0 0 0
  padding: 0 0 10px 0
  display: block
  font-size: 12px
  font-size: 0.75rem

div
  &.detail-panel-content h3
    margin: 0 0 10px 0
    padding: 0
    font-size: 14px
    font-size: 0.875rem
    font-weight: bold
    border: none
  &.select-type
    font-size: 20px
    font-size: 1.25rem
    line-height: 26px
    float: left
    color: $content_link_color
  &.detail-panel-description
    float: left
    margin: 10px 0 0 0
    line-height: 18px
  &.panel-toggler
    float: left
    width: 100%
    color: #777777
    fieldset
      border-top: 1px solid #ddd
      border-left: 0px
      border-right: 0px
      border-bottom: 0px
      cursor: pointer
      width: 100%
    legend
      padding: 0 20px
    span
      background: #ffffff
      padding: 0
      font-size: 12px
      font-size: 0.75rem
    i
      background: #ffffff
      padding: 0 10px 0 0px

  &#detail-panel-watchers
    float: left
    width: 100%
    ul
      margin: 15px 0
      padding: 0 0 15px 0
      list-style-type: none
      li
        clear: both
        margin-bottom: 10px

    .user-field-user-link
      float: left
    .detail-panel-watchers-delete-watcher-icon
      padding: 0 8px
      color: $button_font_color
    fieldset
      border: 0
    #detail-panel-watchers-add-watcher
      clear: left

  &.detail-panel-attributes
    float: left
    margin: 15px 0 0 0
    width: 100%

    ul
      margin: 10px 0 0 0
      padding: 0
      list-style-type: none
      li
        margin: 0 0 25px 0
        padding: 0
        display: inline-table
        min-width: 33%
        clear: left

    label
      font-weight: bold
      display: block
      margin: 0 0 7px 0
  &.detail-panel-attributes-toggler
    float: left
    margin: 10px 0 0 0
    width: 100%
    text-align: center
    border-bottom: 1px solid #ddd

span.role
  font-size: 11px
  font-size: 0.6875rem
  font-style: italic
  color: #777777
  line-height: 20px

div.detail-panel-latest-activity
  float: left
  margin: 10px 0 0 0
  line-height: 18px
  width: 100%
  h3
    margin: 0 0 10px 0
    padding: 0
    font-size: 14px
    font-size: 0.875rem
    font-weight: bold
  ul
    margin: 0
    padding: 0
    list-style-type: none
    li
      margin: 0 0 20px 0
      padding: 0

div.work-package-details-tab
  img
    &.avatar
      float: left
      margin: -2px 10px 0 0
    &.avatar-mini
      float: left
      margin: -3px 7px 0 0

span
  &.user
    display: block
    line-height: 16px
  &.date
    display: block
    font-size: 12px
  &.comment
    display: block
    margin: 10px 0 0 46px
    padding: 0 100px 0 0
    color: #777777
    font-style: italic

div
  &.comments-number
    padding: 0
    float: right
    text-align: right
    display: block
  &.comments-icons
    padding: 0
    text-align: right
    display: block
    i
      padding: 5px 0 0 5px
      display: inline-block

.comment ul
  list-style-type: disc !important
  margin: 0 0 0 12px !important
  li
    padding: 0 !important
    margin: 0 !important

div
  &.comments-form
    float: left
    width: 100%
    margin: 10px 0 100px 0
    textarea
      border: 1px solid #dddddd
      padding: 8px
      border-radius: 2px
      font-size: 13px
      font-size: 0.8125rem
      box-sizing: border-box
      width: 100%
    button
      float: right
      font-size: 13px
      font-size: 0.8125rem
      background: linear-gradient(to bottom, white 0%, #eeeeee 74%, #eeeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0)
      border: 1px solid #CCCCCC
      border-radius: 2px
      color: #222222
      margin: 10px 0 0 0px
      padding: 4px 10px 2px
      cursor: pointer
      height: 32px

i
  &.icon-left
    padding: 0 5px 0 0
    vertical-align: -2px
  &.icon-right
    vertical-align: -2px
    padding: 0 0px 0 4px
  &.star
    font-size: 17px
    padding: 0 2px 0 0px
    vertical-align: -3px
    color: #ccc
    margin: 0 0 0 -2px
    cursor: pointer
    &:hover, &.active
      color: #f8d033
    &.active:hover
      color: #ccc

#tabs
  position: relative
  width: 100%

.tabrow
  text-align: left
  list-style: none
  margin: 0 0 0 26px
  padding: 4px 0 15px 0
  line-height: 41px
  height: 45px
  overflow: hidden
  font-size: 14px
  position: relative
  width: 97.5%
  li
    background: #ffffff
    display: inline-block
    position: relative
    margin: 0
    padding: 0
    text-align: center
    width: 18.6%
    cursor: pointer
  a
    color: #333
    text-decoration: none
  li.selected
    color: #999
    border-bottom: 2px solid #3493b3
    a
      color: #3493b3

.work-package-details-activities-activity:not(:last-child)
  margin-bottom: 10px

.work-package-details-activities-activity-contents
  padding: 10px 0
  textarea
    width: 100%
    resize: none

@media only screen and (max-width: 1280px)
  .split-view .work-packages--details, .work-packages--split-view .work-packages--details
    display: none
  li[feature-flag=detailsView]
    display: none
@media only screen and (min-width: 1281px)
  .split-view .work-packages--details, .work-packages--split-view .work-packages--details
    width: 480px
@media only screen and (min-width: 1440px)
  .split-view .work-packages--details, .work-packages--split-view .work-packages--details
    width: 580px