.hg-black, .hd-black, .bg-black, .bd-black {
    height: 10px; 
    width: 20px;
}

.hg-black {
    background: url(imgs/hg-black.png) no-repeat left top;
}

.hd-black {
    background: url(imgs/hd-black.png) no-repeat right top; 
    float: right;
}

.bg-black {
    background: url(imgs/bg-black.png) no-repeat left bottom;
    position:absolute;
    bottom: 0;
}

.bd-black {
    background: url(imgs/bd-black.png) no-repeat right bottom;
    position:absolute;
    bottom: 0;
    right: 0;
}

.hg-yellow, .hd-yellow, .bg-yellow, .bd-yellow {
    height: 20px; 
    width: 20px;
}

.hg-yellow {
    width: 90%;
    background: url(imgs/hg-yellow.png) no-repeat left top;
}

.hd-yellow {
    background: url(imgs/hd-yellow.png) no-repeat right top; 
    float:right;
}

.bg-yellow {
    background: url(imgs/bg-yellow.png) no-repeat left bottom;
    position:absolute;
    bottom: 0;
}

.bd-yellow {
    background: url(imgs/bd-yellow.png) no-repeat right bottom;
    position:absolute;
    bottom: 0;
    right: 0;
}

.hg-red, .hd-red, .bg-red, .bd-red {
    height: 20px; 
    width: 20px;
}

.hg-red {
    width: 90%;
    background: url(imgs/hg-red.png) no-repeat left top;
}

.hd-red {
    background: url(imgs/hd-red.png) no-repeat right top; 
    float:right;
}

.bg-red {
    background: url(imgs/bg-red.png) no-repeat left bottom;
    position:absolute;
    bottom: 0;
}

.bd-red {
    background: url(imgs/bd-red.png) no-repeat right bottom;
    position:absolute;
    bottom: 0;
    right: 0;
}

.hg-brown, .hd-brown, .bg-brown, .bd-brown {
    height: 20px; 
    width: 20px;
}

.hg-brown {
    width: 90%;
    background: url(imgs/hg-brown.png) no-repeat left top;
}

.hd-brown {
    background: url(imgs/hd-brown.png) no-repeat right top; 
    float:right;
}

.bg-brown {
    position:absolute;
    bottom: 0;
    background: url(imgs/bg-brown.png) no-repeat left bottom;
}

.bd-brown {
    position:absolute;
    bottom: 0;
    right: 0;
    background: url(imgs/bd-brown.png) no-repeat right bottom;
}

.hg-green, .hd-green, .bg-green, .bd-green {
    height: 20px; 
    width: 20px;
}

.hg-green {
    width: 90%;
    background: url(imgs/hg-green.png) no-repeat left top;
}

.hd-green {
    background: url(imgs/hd-green.png) no-repeat right top; 
    float:right;
}

.bg-green {
    position:absolute;
    bottom: 0;
    background: url(imgs/bg-green.png) no-repeat left bottom;
}

.bd-green {
    position:absolute;
    bottom: 0;
    right: 0;
    background: url(imgs/bd-green.png) no-repeat right bottom;
}

.hg-dark, .hd-dark, .bg-dark, .bd-dark {
    height: 20px; 
    width: 20px;
}

.hg-dark {
    width: 90%;
    background: url(imgs/hg-dark.png) no-repeat left top;
}

.hd-dark {
    background: url(imgs/hd-dark.png) no-repeat right top; 
    float:right;
}

.bg-dark {
    position:absolute;
    bottom: 0;
    background: url(imgs/bg-dark.png) no-repeat left bottom;
}

.bd-dark {
    position:absolute;
    bottom: 0;
    right: 0;
    background: url(imgs/bd-dark.png) no-repeat right bottom;
}