* { box-sizing: border-box; }
body {
    width:600px;
    font:normal 12px/20px 'Courier' sans-serif;
    margin:20px auto;
}
.diagram {
    width:100%;
    height:100px;
    position:relative;
}
@media screen and (max-width: 600px) {
    body {
        width:100%;
    }
}
.wire {
    position:absolute;
    width:100%;
    height:18px;
    background:#888;
    top:40px;
    border-top:1px solid #555;
    border-bottom:2px solid #444;
}
.body {
    position:absolute;
    border-radius:10px;
    border:2px solid #B8A597;
    left:10%;
    top:0px;
    width: 80%;
    height:100px;
    background:#ECE3DB;
}
.band {
    position:absolute;
    top:1px;
    width:15%;
    height:98px;
    background:black;
    -webkit-transition:background-color 100ms ease-in;
}
.band-0 { left:15%; }
.band-1 { left:35%; }
.band-2 { left:55%; }
.band-3 {
    left:75%;
    width:10%;
}
.val {
    width:50%;
    margin-left:10%;
    padding:0;
    font:normal 40px/50px 'Courier' sans-serif;
    text-align:center;
    border:2px solid #aaa;
    background:#efefef;
}
.ohms {
    font:normal 40px/50px 'Courier' sans-serif;
    color:#999;
}
.colors {
    position:relative;
    height:200px;
}
.color {
    position:absolute;
    width:15%;
}
.color-0 {
    left:15%;
}
.color-1 {
    left:35%;
}
.color-2 {
    left:55%;
}
.option {
    height:20px;
}
.option span {
    padding:0 1px;
    display:block;
    background: rgba(255, 255, 255, 0.6);
}
*:focus {
    outline: none;
    border:2px solid #000;
}
.form {
    margin-bottom:20px;
}
.extra { display: none; }
.toggle-extra {
    text-decoration:none;
    display:block;
    font-size:30px;
    margin-top:20px;
    color:#888;
    text-align:center;
}