.library-item{
        position: relative;
        margin: 10px;
        width: 240px;
        height:300px;
        padding: 10px;
        background: white;
        border: silver solid 1px;
        -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 0 6px rgba(0,0,0,0.3);
        box-shadow: 0 0 6px rgba(0,0,0,0.3);
        border-radius: 5px;
        -webkit-border-radius: 5px;
         text-rendering: optimizeLegibility;
        text-shadow: none;
        cursor: pointer;
        text-overflow:clip;
        overflow:hidden;
        position: relative;
    }

.library-item:hover{
    border-color:darkkhaki;
    background-color:lightyellow;
}

    .library-title{
        font-weight:bold;
        font-size:1.2em;
        text-align:left;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
        max-height:20px;
        /*background:yellow;*/
        width:220px;
    
       }

    .library-description p{
       
        width:220px;
        height:80px;
        text-overflow:ellipsis;
        overflow:hidden;
        
        color:dimgrey;
  
  

    }

    .library-img{
        max-width: 220px;
        max-height:150px;
    }

    .library-text-container{
        position:absolute;
        top:160px;
        height:130px;
        width:240px;
        left:0;
        padding:10px;
        overflow:hidden;
        
    }

    .library-icon{
        width:64px;
        height:64px;
        position:absolute;
        right:10px;
        top:10px;
        display: block;
        background-size:64px;
        background-repeat: no-repeat;
    }
    .Document .library-icon{
         background-image: url(https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/document-128.png);
    }

    .Presentation .library-icon{
       background-image: url(https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/polaroids-128.png) ;
    }

    .Video .library-icon{
        background-image: url(https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/video-128.png);
    }

    .Other .library-icon{
        background-image: url(https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/computer-128.png);
    }
    /* button
------------------------- */

.button {
  display: inline-block;
  padding: 5px 15px;
  margin-bottom: 10px;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-weight: 500;
  /*text-shadow: 0 1px white;*/
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  /*text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);*/
  color: #222;
}

.button:active,
.button.is-checked,
.button.is-selected {
  background-color: #28F;
  color:white;
}

.button.is-checked,
.button.is-selected {
  color: white;
  /*text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);*/
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* hide radio inputs */
.button input[type="radio"] { display: none; }

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }