//
// Default panel styles
//
%pnl {
  @include border-radius(5px);
  border: 1px solid gray(220);
  overflow: hidden;

  // title creates the 'header'
  h3 {
    background-color: gray(245);
    border-bottom: 1px solid gray(220);
    color: gray(70);
    font-size: 14px !important;
    font-weight: bold;
    padding: 15px 20px;
    margin: 0 !important;
  }

  // define default panel contents
  .panel_contents {

    // default font-size
    font-size: 13px;

    // paragraph styles
    p {
      padding: 10px;
    }

    // list styles
    ul {
      li {
        border-top: 1px solid $gray_lighter;
        a {
          color: $black;
          display: block;
          padding: 10px 5px 10px 20px;
          text-decoration: none;

          &:hover {
            color: $blue;
          }
        }
      }
      // first item doesn't have a border
      > :first-child {
        border-top: none;
      }
    }

    // table styles
    table {
      thead {
        display: none;
      }
      tbody {
        // cell padding
        td {
          padding: 13px 20px 12px 20px !important;
        }
        // date format
        .timeago {
          @include mono-font;
          display: block;
          color: $gray_lighter;
          text-align: right;
        }
        // default link
        a {
          color: $black;

          &:hover {
            color: $blue !important;
          }
        }
      }
    }

    // LALALA specific styling
    //
    .lalala {
      font-size: 13px;
      line-height: 18px;

      &.sidebar {

        // intro message
        &.message {
          color: gray(180);
          padding: 0 20px 10px 0;

          strong {
            font-weight: bold;
          }
        }

        // person id-card
        &.person {
          text-align: center;

          // optional img
          .avatar {
            @include border-radius(100px);
          }

          // name
          h4 {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0 0 0;
          }

          // detailed information
          .details {
            color: gray(180);
            font-family: "Monaco";
            font-size: 12px;
            margin: 10px;
          }

        }

        // listing, lists various elements (uls, divs, table, ...)
        &.listing {
          margin: 10px 0 0 0;

          // plain div's
          &.div {

            .item {
              border-bottom: 1px solid gray(220);
              padding: 0 0 5px 0;
              margin: 0 0 10px 0;
            }

            // last item has no border or margin
            > :last-child {
              border-bottom: none;
              margin: 0;
            }

          }

          // ul
          &.ul {

            .item {
              border-bottom: 1px solid gray(220);
              border-top: none;
              padding: 0 0 5px 0 !important;
              margin: 0 0 10px 0;

              a {
                padding: 0;
              }
            }

            // last item has no border or margin
            > :last-child {
              border-bottom: none;
              border-top: none;
              padding: 0 0 5px 0 !important;
              margin: 0;
            }

          }

          // table
          &.table {

            table {
              thead {
                display: none;
              }
              tbody tr td {
                padding: 7px 5px 6px 5px !important;
              }
            }

          }

        }

        // element has a closing line
        &.with-closing-line {
          border-bottom: 1px solid gray(220);
        }

        .timeago {
          color: $gray_lighter;
        }

      }

      // default link style inside .panel_contents .lalala
      a {
        color: $blue;
        text-decoration: none;
      }

    }
    // end lalala

  }

}