<body>
<style>
    body {
        font-family: arial, sans-serif;
        font-size: 18px;
    }
    pre {
        background: #eee;
        padding: 10px;
        width: 800px;
        white-space: pre-wrap;
        word-break: break-all;
    }
</style>

<!-- Add this if you're supporting IE 7, 8 -->
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="cssjson.js"></script>
<script type="text/javascript">

    // Dummy CSS
    var css = '\
    @media (max-width: 800px) {\n\
    	#main #comments {\n\
    		margin: 0px;\n\
    		width: auto;\n\
    		background: red;\n\
            background: img("example.png");\n\
    	}\n\
    	#main #buttons {\n\
    		padding: 5px 10px;\n\
    		color: blue;\n\
    	}\n\
    }\n\
\n\
    #main #content {\n\
    	margin: 0 7.6%;\n\
    	width: auto;\n\
    }\n\
    #nav-below {\n\
    	border-bottom: 1px solid #ddd;\n\
    	margin-bottom: 1.625em;\n\
    	background-image: url(http://www.example.com/images/im.jpg);\n\
    }\n\
    ';

    exampleCSSJSON(css);

    function exampleCSSJSON(cssString) {
		var json = CSSJSON.toJSON(cssString);
    	if (typeof console != 'undefined') {
    	    console.log('JSON:\n');
    	    console.dir(json);
    	    console.log('\n\n');
	    }
        document.write('<strong>JSON</strong><br/><pre>'+JSON.stringify(json, undefined, 2)+'</pre>');

    	var css = CSSJSON.toCSS(json);
    	if (typeof console != 'undefined') {
    	    console.log('CSS:\n');
    	    console.log(css + '\n\n');
	    }
    }

	// Sample to .toHEAD
	var rgbInterval = 2000;
	var rgbCss = '\
		body {\n\
			-webkit-transition: background-color ?ms linear;\n\
			-moz-transition: background-color ?ms linear;\n\
			-o-transition: background-color ?ms linear;\n\
			-ms-transition: background-color ?ms linear;\n\
			transition: background-color ?ms linear;\n\
			-webkit-animation-direction: alternate;\n\
			animation-direction: alternate;\n\
			-webkit-animation-iteration-count: 2;\n\
			animation-iteration-count: 2;\n\
			margin: 20px;\n\
		}\
	';
	CSSJSON.toHEAD(rgbCss.replace('?', Math.abs(0.6 * rgbInterval)));

	function runRGB(btn) {
		if (window._rgbTimer) {
			btn.innerHTML = '&#9654; RGB';
			clearInterval(window._rgbTimer);
			delete window._rgbTimer;
			return;
		} else {
			window._rgbC = (window._rgbC) ? window._rgbC : [0, '#ff1935', '#00bd3a', '#0063cd', '#fff'];
		}
		var getRGB = function() {
			window._rgbC[0] = (window._rgbC[0] >= window._rgbC.length - 1) ? 1 : window._rgbC[0] += 1;
			return window._rgbC[window._rgbC[0]];
		}
		var doCSSChange = function() {
			CSSJSON.toHEAD('body { background-color: ' + (cc = getRGB()) + '; }', 'RGB');
			btn.innerHTML = '&#10073;&#10073; RGB (' + cc + ')';
		}
		if (!window._rgbTimer) {
			doCSSChange();
			window._rgbTimer = setInterval(doCSSChange, rgbInterval);
		}
	}

</script>
<button onclick="runRGB(this);">&#9654; RGB</button>
</body>