Add Offsets and Clean up Grid Sass code by utilizing Sass Functions.

I've added Offsets to the grid system so we don't have
to fill up our websites with empty divs that contain spans
for spacing.

Spans and Offsets are generated using SASS functions to
cut down on the amount of code in the SASS Files and make it
more readable for developers.

We lose the ability to use @ extend but that is not as important
as we minimize the css anyways.

**N.B.**
So far I have only modified the _responsive-1200.scss file as I only want to do the rest of the grid files if it is accepted. 

**Here is some html you can use to see how it works**:

````html
	<body >	   
        <div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
        </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-3" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-4" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-5" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-6" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-7" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-8" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>






		<div>
            <div class="span-1 offset-1" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-1 offset-2" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-1 offset-3" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-1 offset-4" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
            <div class="span-1 offset-5" style=" background : blue;">
                foo
            </div>            
            <div class="clear"></div>
            <div class="span-1 offset-6" style=" background : blue;">
                foo
            </div>            
            <div class="clear"></div>
            <div class="span-1 offset-7" style=" background : blue;">
                foo
            </div>            
            <div class="clear"></div>
        </div>

        <div>
            <div class="span-2 offset-2" style=" background : blue;">
                foo
            </div>
            <div class="span-2 offset-2" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>

            <div class="span-3 offset-2" style=" background : blue;">
                foo
            </div>            
            <div class="span-1 offset-1" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
        </div>


        <div class='grid-12'>        
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="span-1" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>

            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class="span-2" style=" background : blue;">
                foo
            </div>
            <div class='clear'></div>

            <div class="span-3" style=" background : blue;">
                foo
            </div>
            <div class="span-3" style=" background : blue;">
                foo
            </div>
            <div class="span-3" style=" background : blue;">
                foo
            </div>
            <div class="span-3" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
        


            <div class="span-3 offset-3" style=" background : blue;">
                foo
            </div>
            <div class="span-3 offset-3" style=" background : blue;">
                foo
            </div>
            <div class="clear"></div>
        </div>


        <div id='wb-body-sec'>
            <div id='wb-core'>
                <div class='grid-12'>        
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-1" style=" background : blue;">
                        foo
                    </div>
                    <div class="clear"></div>
                
                    <div class="span-2" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-2" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-2" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-2" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-2" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-2" style=" background : blue;">
                        foo
                    </div>
                    <div class='clear'></div>
                
                    <div class="span-3" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-3" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-3" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-3" style=" background : blue;">
                        foo
                    </div>
                    <div class="clear"></div>
                
                
                
                    <div class="span-3 offset-3" style=" background : blue;">
                        foo
                    </div>
                    <div class="span-3 offset-3" style=" background : blue;">
                        foo
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
	</body>
</html>
````