_chat_area.sass

#channels
  margin-top: 12px
  overflow: hidden
  height: 105%

.ui-widget-header
  background: transparent !important
  border-radius: 0px
  border: none
  .ui-state-active
    background: $active-tab-bg
    border: none
    a
      color: $active-tab-color !important

.close_channel
  font-size: 12px

html body .ui-tabs .ui-tabs-nav li
  top: 2px !important
  margin-right: 0px !important
.create_channel
  cursor: hover


.ui-tabs .ui-tabs-nav
  .ui-state-default
    .tab_left, .tab_content, .tab_right
      display: block
      height: 30px
      background: transparent
    .tab_left, .tab_right
      width: 30px
    .tab_left
      background: url(image_path('tabs/tab-inactive-left.png')) no-repeat
      float: left
    .tab_content
      background: url(image_path('tabs/tab-inactive-middle.png')) repeat-x
      float: left
      padding-top: 7px
      color: #585d5f !important	
      position: relative	 
      .close_channel
        cursor: pointer
        padding-left: 5px	
    .tab_right
      background: url(image_path('tabs/tab-inactive-right.png')) no-repeat
      float: right
  .ui-state-active
    .tab_left
      background-image: url(image_path('tabs/tab-active-left.png'))
    .tab_content
      background-image: url(image_path('tabs/tab-active-middle.png'))
    .tab_right
      background-image: url(image_path('tabs/tab-active-right.png'))
  #create_channel
    display: block
    width: 70px
    height: 30px
    background: url(image_path('tabs/tab-new.png')) no-repeat top left
    &:hover
      background-position-x: -70px
.ui-tabs
  border-radius: 0px
  padding: 0px
  margin-top: 0px
  border: none
  .ui-tabs-nav
    z-index: 20
    display: block
    position: absolute
    bottom: 0px
    float: left
    padding: 0px !important
    margin-left: 80px
    li span
      font-size: 14px
    .ui-state-default
      border: none
      color: #7f8587	
      background: transparent !important
      a
        padding: 0px !important
        color: $active-tab-color
        &:hover
          span.tab_content
            text-decoration: underline
    .ui-state-active
      text-shadow: 0px 0px 2px #FFF


.ui-widget-content
  height: 100%

.ui-corner-all .ui-corner-bottom, .ui-corner-bottom, .ui-corner-left, .ui-corner-right, .ui-corner-bl, .ui-corner-br
  border-radius: none

.ui-state-default
  font-size: 14px

.ui-widget-content
  +full-height
  background: $panel-bg url(image_path('page_bg.png')) repeat
  font-size: 13px

.paginated-activities, #head-mask
  +box-shadow(5px 0px 5px -3px #cccccc, -5px 0px 5px -3px #cccccc, 5px 10px 5px -3px #cccccc, -5px 10px 5px -3px #cccccc)
  border-top-left-radius: 4px
  border-top-right-radius: 4px
  float: left
  width: 100%
  background: #FFF
  padding: 10px
  min-height: 110%
  padding-bottom: 0px
  .pagination
    text-align: center
    font-size: 14px
    span
      position: relative
      top: -6px
      left: 10px
  .channel-activities
    width: 100%

.ui-tabs-panel, #mask_container
  padding: 0px
  padding-right: 20px
  padding-left: 20px


#mask_container
  position: fixed
  top: 0px
  background: #E6EBEE url("/assets/page_bg.png") repeat
  z-index: 9000
  padding-top: 55px
  width: 80%

.corner_cover
  display: block
  width: 15px
  height: 15px
  background: #FFF

html body .ui-tabs .ui-tabs-panel, html body #app_body .main-area #mask_container
  padding-left: 20px !important
  padding-right: 20px !important


html body #app_body .main-area #head-mask
  min-height: 0 !important
  padding-bottom: 0px !important
  height: 35px
  +box-shadow(0px 5px 0px 0px #FFFFFF, 0px 5px 0px 0px #FFFFFF, 6px 3px 3px -3px #cccccc, -5px 3px 5px -2px #cccccc)

/* html body .ui-tabs .ui-tabs-panel
/*   padding: 0px !important

.chatbox
  border-bottom-left-radius: 4px
  border-bottom-right-radius: 4px
  +box-shadow(5px 0px 5px -3px #cccccc, -5px 0px 5px -3px #cccccc, 0px 5px 5px 0px #cccccc)
  float: left
  border-top: 1px solid #f5f8f9
  padding: 10px 0px 10px 10px
  width: 77.2%
  position: fixed
  bottom: 0px
  margin-bottom: 20px
  background: #e6edef
  z-index: 600
  textarea
    border-top-left-radius: 4px
    border-bottom-left-radius: 4px
    border: 1px solid #AEB9BD
    width: 92%
    padding: 0px
    margin: 0px
    height: 40px
    resize: none
  button
    +background-image(linear-gradient(#c8ecf6, #9fdff4))
    border-top-right-radius: 4px
    border-bottom-right-radius: 4px
    position: relative
    left: -5px
    border: 1px solid #AEB9BD
    color: #59808B
    width: 7%
    padding: 0px
    margin: 0px
    height: 40px
    font-size: 16px

#mask
  position: fixed
  z-index: 100
  bottom: 0
  display: block
  height: 30px
  margin-left: -16px
  width: 81%
  background: #E6EBEE url("/assets/page_bg.png") repeat

.channels-pane
  overflow-y: auto
  margin-right: -15px
  margin-top: -13px