/* MailDeck.css */

.piledeck-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 85px;
  bottom: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.piledeck-column-container {
    position:   relative;
    top:        0px;
    display:    inline-block;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: -50px;
}

.piledeck-column {
    display:    inline-block;
    width:      300px;
    height:     100%;
    background: #FFFFFF;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #b3b3b3;
    padding:    0;
    margin:     0 0 0 20px;
}

.piledeck-column-header {
    position:  relative;
    background: #F6F6F6;
    font-family: Mailpile-300,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:   18px;
    padding:    10px;
    text-align: center;
    border-bottom: 1px solid #b3b3b3;
    margin: 0;
}

.piledeck-column-header .title {
    font-family: Mailpile-700,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
    padding-top:    10px;
}

.piledeck-column-header .refresh {
    font-size:      8px;
    position:       absolute;
    right:          3px;
    top:            3px;
}

.piledeck-entry:first-child {
  border-top: 0px;
}

.piledeck-entry {
  border-top: 1px solid #b3b3b3;
  display:    block;
  min-height: 30px;
  max-height: 200px;
  padding:    10px;
}

.piledeck-entry:hover {
  background-color: #F6F6F6;
  transition: background 0.2s linear;
}

.piledeck-entry .avatar {
  display: inline-block;
  float: left;
  margin-right: 10px;  
}

.piledeck-entry .avatar .icon-user {
  font-size: 21px;
}

.piledeck-entry .avatar img {
  width: 24px;
  border-radius: 3px;
}

.piledeck-entry .subject {
    font-family: HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
    white-space: normal;
    font-size:  14px;
}

.piledeck-entry .subject a {
    font-weight: normal;
}

.piledeck-entry .from {
    font-size:   14px;
    font-weight: bold;
    padding-bottom: -1px;
}

.piledeck-entry .body {
    white-space: normal;
}

.piledeck-entry .actions {
    opacity:    0.2;
    float: right;
}

.piledeck-entry:hover .actions {
    opacity:    1.0;
    transition: opacity 0.2s linear;
}
