#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;}#trace {margin:0 0 20px;}#id_featured_image li:first-child {display:none;}