@paul_moxie to make your code valid you need a semicolon after 1px in your css:
.line {
stroke-width: 1px;
}
On the other hand I'm not quite sure if stroke-width will work at all for an hr-element. I’d try something along these lines:
.my-hr .lay-hr {
height: 1px;
}
Then add the class my-hr (call it whatever you fancy) to the hr-elements in the gridder. Unfortunately I can’t really explain why the lay-hr class needs to be there – But it needs to be – It’s something about that CSS-parent-child-thing I never really wrapped my head around.
Hope that helps!