.post { padding: 0; position: relative; display: inline-block; } .post .link { border: 1px solid #ddd; box-shadow: 0.25em 0.25em #eee; color: black; } .post-type-youtube:after, .post-type-flash:after { position: absolute; right: 1px; /* border */ top: 1px; /* border */ width: 150px; height: 150px; content: ' '; pointer-events: none; } .post-type-flash { border-color: red; } .post-type-youtube { border-color: red; } .post-type-flash:after { background: url('../img/thumb-overlay-swf.png'); } .post-type-youtube:after { background: url('../img/thumb-overlay-yt.png'); } .post .toggle-tag { position: absolute; z-index: 2; width: 100px; height: 30px; background: whitesmoke; opacity: .5; border: 1px solid black; margin: 60px 25px; line-height: 30px; } .post .toggle-tag:focus, .post .toggle-tag:hover { opacity: 1; } .post.taggable.tagged .toggle-tag { background-color: #0f0; color: black; } .post.taggable:not(.tagged) .toggle-tag { background-color: #f00; color: white; } .post .link { z-index: 1; } .post .link:focus, .post .link:hover { border: 1px solid hsl(0,70%,50%); box-shadow: 0.25em 0.25em pink; } .post .link:focus img.thumb, .post .link:hover img.thumb { opacity: .9; } .post a { display: inline-block; vertical-align: top; } .post img.thumb { display: inline-block; width: 150px; height: 150px; vertical-align: top; } .post .info-bar:before { border-top: 1px solid hsl(0,70%,50%); margin-bottom: -1px; content: ''; display: block; } .post .info-bar { display: none; background: rgba(255, 128, 128, 0.75); position: absolute; z-index: 3; left: 1px; /* border */ right: 1px; /* border */ bottom: 1px; /* border */ text-align: center; } .post .link:focus .info-bar, .post .link:hover .info-bar { display: block; } .post .icon-score { background-position: -85px -1px; } .post .icon-comments { background-position: -64px -1px; } .post .icon-favs { background-position: -43px -1px; } .post .link [class^='icon-'] { opacity: .75; background-color: transparent; width: 20px; height: 20px; line-height: 20px; vertical-align: top; } .post .link span { vertical-align: top; font-size: small; line-height: 20px; margin-right: 0.5em; display: inline-block; } .post .link span.inactive { display: none; }