#prmpt-anchor {
    color: #888888;
    font-size: medium;
}

#prmpt-a-black-background {
    color: #cccccc;
}

#prmpt-anchor:hover, #prmpt-a-black-background:hover {
    color: #0cb4ce;
}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

.popup-anchor {
    text-decoration: underline;
    color: #555555;
}

.popup-anchor:hover {
    color: #0cb4ce;
}

.prmpt-media-column {
    color: black;
    font-size: large;
}

.prmpt-thumbnail {
    z-index: 300;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.prmpt-thumbnail-link {
    border: 5px solid red;
    display: block;
}

.prmpt-thumbnail:hover {
//    display: none;
}

.prmpt-video-heading {
    font-size: x-large;
    font-weight: bold;
    color:red;
}

.prmpt-clickable:hover {
    cursor:pointer;
}

.prmpt-video.prmpt-clickable {
    /* .prmpt-thumbnail and .prmpt-video-frame are position:absolute so the poster
       stacks on top of the iframe, but that only works relative to THIS wrapper.
       Without this, they anchor to the nearest positioned ancestor up the page
       instead, so the poster image renders in the wrong place (looks like it's
       missing). */
    position: relative;
}

.prmpt-video {
    width:100%;
    max-width:300px;
}

.prmpt-video-frame {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}