ColorBox not loading - all JS is pulling through correctly

[webbyidea]

I've tried to set up a colorbox (when you click on the 'sign me up' button) but it doesn't seem to launch. Can't find any javascript errors or console errors, just doesn't seem to fire.I've linked the stylesheet, JS file and included the header script, they all open up fine and are being correctly called into the page.\[code\]<link rel="stylesheet" href="http://stackoverflow.com/questions/12805977/css/colorbox.css" /><script src="http://stackoverflow.com/questions/12805977/js/jquery.colorbox.js"></script> <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".inline").colorbox({inline:true, width:"50%"}); $(".callbacks").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>\[/code\]I've created the inline content div (hidden) and linked the button correctly.\[code\]<span class="btn"><a href="http://stackoverflow.com/questions/12805977/#inline_content">Sign Me Up!</a></span>\[/code\]And here is the inline content:\[code\]<div style='display:none'> <div id='inline_content' style='padding:10px; background:#fff;'> <p><strong>This content comes from a hidden element on this page.</strong></p> <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p> </div></div>\[/code\]Live site demo