
@-moz-keyframes backfadein {
    from { background-color:silver; }
    to { background-color:black; }
}

@-webkit-keyframes backfadein {
    from { background-color:silver; }
    to { background-color:black; }
}

@-ms-keyframes backfadein {
    from { background-color:silver; }
    to { background-color:black; }
}

@-o-keyframes backfadein {
    from { background-color:silver; }
    to { background-color:black; }
}

@keyframes backfadein {
    from { background-color:silver; }
    to { background-color:black; }
}

@-moz-keyframes frontfadein {
    from { color: #777; }
    to { color: #333;}
}

@-webkit-keyframes frontfadein {
    from { color: #777; }
    to { color: #333;}
}

@-ms-keyframes frontfadein {
    from { color: #777; }
    to { color: #333;}
}

@-o-keyframes frontfadein {
    from { color: #777; }
    to { color: #333;}
}

@keyframes frontfadein {
    from { color: #777; }
    to { color: #333;}
}

h2 {margin-top:40px; margin-bottom: 15px;}
div.person {
    border: solid 1px #eee;
    width: 270px;
    font-size: 15px;
    float:left;
    padding: 10px 10px 10px 10px;
    margin-right: 15px;
    margin-bottom: 15px;
    position:relative;
    background-image: url('../images/noise.png');
}

div.person .bottom {
    display:block;
    background-color: silver;
    margin-top: 5px;
    margin: 3px -10px -10px -10px;
    padding: 2px;
    opacity: 0.4;
}

div.person:hover .bottom {
    background-color: black;
    -webkit-animation: backfadein .2s;
    -moz-animation: backfadein .2s;
    -ms-animation: backfadein .2s;
    -o-animation: backfadein .2s;
    animation: backfadein .2s;
}

div.person .home {
    padding: 10px;
    margin: -10px;
    text-decoration: none;
    color: black;
    display:block;
}

div.person.current, div.person.boss{

}

div.person .home {
}

div.person div.role {
    color: darkgrey;
}

div.person div.image {
    position:absolute;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    border: none;
}

div.person div.image img {
    height: 75px;
    -moz-transition: height .2s;
    -webkit-transition: height .2s;
    -ms-transition: height .2s;
    -o-transition: height .2s;
    image-rendering: optimizeQuality;
}

div.person:hover div.image img {
    height: 85px;
}

div.person:hover {
    /* border-right: solid 2px #566; */
}

div.person div.actions {
display: inline !important;
position: absolute;
bottom: 2px;
z-index: 9;
}

div.person:hover div.actions {
-webkit-animation: frontfadein .2s;
-moz-animation: frontfadein .2s;
-ms-animation: frontfadein .2s;
-o-animation: frontfadein .2s;
animation: frontfadein .2s;

}


div.person div.actions > a {
color: black;
text-decoration: none;
}

div.actions > a:hover {
color: white !important;
text-shadow: 0px 0px 1px white;
}