Okay, so this bug has cost me quite a bit of time and embarrassment. It seems that any style variable with a - in it's name can't be modified by javascript.
As seen here:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Test</title>
<meta charset="utf-8" />
<style>
body { text-align: center; background-color: #ffffff;}
#box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
</style>
<script type="text/javascript">
var box = 0;
</script>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
box = document.getElementById('box');
box.style.background-color = "#0000ff";
</script>
</body>
</html>
The box in said example will just remain red.
So how do I change a style variable with a - in it's name?