#image-dropdown1 {
    /*style the "box" in its minimzed state*/
    border: 1px solid black;
    width: 70px;
    height: 70px;
    overflow: hidden;
}

#image-dropdown1:hover {
    height: auto;
    overflow-y: visible;
}

#image-dropdown1 input {
    /*hide the nasty default radio buttons!*/
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#image-dropdown1 label[for=line1-1] {
    /*style the labels to look like dropdown options*/
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/empty.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-2] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/light.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-3] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/medium.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-4] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/hard.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-5] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/draw.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-6] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/punch.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-7] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/bend.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-8] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/upset.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1 label[for=line1-9] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/shrink.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown1: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*/
    display: block;
}

#image-dropdown1 input:checked+label {
    /*tricky! labels immediately following a checked radio button
  (with our markup they are semantically related) should be fully opaque
  and visible even in the collapsed menu*/
    opacity: 1 !important;
    display: block;
}

#image-dropdown2 {
    /*style the "box" in its minimzed state*/
    border: 1px solid black;
    width: 70px;
    height: 70px;
    overflow: hidden;
}

#image-dropdown2:hover {
    height: auto;
    overflow-y: visible;
}

#image-dropdown2 input {
    /*hide the nasty default radio buttons!*/
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#image-dropdown2 label[for=line2-1] {
    /*style the labels to look like dropdown options*/
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/empty.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-2] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/light.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-3] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/medium.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-4] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/hard.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-5] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/draw.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-6] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/punch.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-7] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/bend.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-8] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/upset.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2 label[for=line2-9] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/shrink.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown2: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*/
    display: block;
}

#image-dropdown2 input:checked+label {
    /*tricky! labels immediately following a checked radio button
  (with our markup they are semantically related) should be fully opaque
  and visible even in the collapsed menu*/
    opacity: 1 !important;
    display: block;
}

#image-dropdown3 {
    /*style the "box" in its minimzed state*/
    border: 1px solid black;
    width: 70px;
    height: 70px;
    overflow: hidden;
}

#image-dropdown3:hover {
    height: auto;
    overflow-y: visible;
}

#image-dropdown3 input {
    /*hide the nasty default radio buttons!*/
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#image-dropdown3 label[for=line3-1] {
    /*style the labels to look like dropdown options*/
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/empty.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-2] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/light.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-3] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/medium.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-4] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/hard.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-5] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/draw.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-6] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/punch.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-7] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/bend.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-8] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/upset.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3 label[for=line3-9] {
    display: none;
    margin: 2px;
    height: 66px;
    opacity: 0.2;
    background: url("./icons/shrink.png") 50% 50%;
    background-repeat: no-repeat;
    background-size: 66px 66px
}

#image-dropdown3: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*/
    display: block;
}

#image-dropdown3 input:checked+label {
    /*tricky! labels immediately following a checked radio button
  (with our markup they are semantically related) should be fully opaque
  and visible even in the collapsed menu*/
    opacity: 1 !important;
    display: block;
}