/*o.v.*/

#id_featured_image {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:230px; overflow:hidden;
    height:300px; overflow-y:scroll;
    /*animate collapsing the dropdown from open to closed state (v. fast)*/
}
#id_featured_image input {
    /*hide the nasty default radio buttons. like, completely!*/
    position:absolute;top:0;left:0;opacity:0;
}


#id_featured_image label {
    /*style the labels to look like dropdown options, kinda*/
    color: #000;
    display:block;
    margin: 2px 2px 2px 10px; 
    height:102px; 
    opacity:.6; 
    background-repeat: no-repeat;
}
#id_featured_image:hover label{
    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
}
#id_featured_image label:hover {
    opacity:.8;
}
#id_featured_image input:checked + label {
    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
    opacity:1 !important; 
    display:block;
    background: #333;
}

/*pfft, nothing as cool here, just the value trace*/
#trace {margin:0 0 20px;}
#id_featured_image li:first-child { display: none;}