//
// Cards
// --------------------------------------------------


.card {
   margin: 10px 0 20px 0;
   padding-top: 20px;
   border: 1px solid @navlistBorder;
   border-bottom-width: 2px;
   border-top-width: 0;
   background-color: @white;
   .border-radius(@borderRadiusSmall);
   .box-shadow(none);
   .box-sizing(border-box);

   .card-heading {
      padding: 0 20px;
         margin: 0;

      &.simple {
         border-bottom: 1px solid @whiteSmoke;
         color: #777;
         font-size: 20px;
         font-weight: 300;
      }

      &.image {

         img {
            display: inline-block;
            vertical-align: top;
            .border-radius(50%);
            border: 0;
            margin-right: 15px;
            width: 46px;
            height: 46px;
         }
         .card-heading-header {
            display: inline-block;
            vertical-align: top;

            h3 {
               font-size: 14px;
               color: @navbarLinkColorHover;
               line-height: 16px;
               margin: 0;
            }
            span {
               font-size: 12px;
               color: @grayLight;
            }
         }
      }
   }


   .card-body {
      margin-top: 20px;
      padding: 0 20px;
   }


   .card-media {
      padding: 0 20px;
      margin: 0 -14px;

      img {
         max-height: 100%;
         max-width: 100%;
      }
   }

   .card-actions {
      // border-bottom: 1px solid @whiteSmoke;
      min-height: 30px;
      margin: 20px 0 0 0;
      padding: 0 20px 20px 20px;
   }

   .card-comments {
      padding: 20px;
      margin: 0;
      background-color: @cardFooterBackground;

      .comments-collapse-toggle {
         margin: 0 20px 12px 20px;
         padding: 0;

         a,
         span {
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            padding-right: 5px;
         }
      }
   }


}


.card-comments .media-heading {
   font-size: 13px;
   font-weight: bold;
}



.card {
   &.people {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 170px;
      height: 300px;
      padding-top: 0;
      margin-left: 20px;
      overflow: hidden;

      &:first-child {
         margin-left: 0;
      }

      .card-top {
         position: absolute;
         display: inline-block;
         top: 0;
         left: 0;
         background-color: @white;
         width: 170px;
         height: 150px;

         &.green {
            background-color: #53a93f;
         }
         &.blue {
            background-color: @navbarBorder;
         }
      }

      .card-info {
         .box-sizing(border-box);
         position: absolute;
         display: inline-block;
         top: 150px;
         width: 100%;
         height: 101px;
         overflow: hidden;
         background: @white;

         .title {
            display: block;
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            margin: 8px 14px 0 14px;
            overflow: hidden;
            color: #404040;
         }
         .desc {
            display: block;
            line-height: 16px;
            margin: 8px 14px 0 14px;
            overflow: hidden;
            font-size: 12px;
            color: @graySemiLight;
            text-overflow: ellipsis;            
         }
      }

      .card-bottom {
         .box-sizing(border-box);
         position: absolute;
         bottom: 0;
         left: 0;
         display: inline-block;
         width: 100%;
         padding: 10px 20px;
         line-height: 29px;
         text-align: center;
      }
   }
}


.card {
   &.hovercard {
      overflow: hidden;
      position: relative;
      width: 240px;
      padding-top: 0;
      text-align: center;
      background-color: #fff;

      img {
         height: 135px;
         width: 240px;
      }
      .avatar {
         margin-bottom: -40px;
         position: relative;
         top: -40px;

         img {
            width: 80px;
            height: 80px;
            max-width: 80px;
            max-height: 80px;
            .border-radius(50%);
         }
      }
      .info {
         padding: 4px 8px 10px;
         .title {
            color: #262626;
            font-size: 24px;
            line-height: 1;
            vertical-align: middle;
            margin-bottom: 4px;
         }
         .desc {
            color: #737373;
            font-size: 12px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
         }
      }
      .bottom {
         margin-bottom: 17px;
         padding: 0 20px;
//         .btn {
//            width: 85px;
//         }
      }

   }
}