Cacher is the code snippet organizer for pro developers

@import url(https://fonts.googleapis.com/css?family=Tangerine:400,700);

/* Modified Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, footer, header, menu, nav, ruby, section, audio, video {
    border         : 0;
    font-size      : 100%;
    font           : inherit;
    vertical-align : baseline;
    margin         : 0;
    padding        : 0;
    }

article, aside, footer, header, menu, nav, section {
    display : block;
    }

body {
    line-height : 1;
    }

ol, ul {
    list-style : none;
    }

blockquote, q {
    quotes : none;
    }

blockquote:before, blockquote:after, q:before, q:after {
    content : none;
    }

table {
    border-collapse : collapse;
    border-spacing  : 0;
    }

body {
    background-color : #FFFFFF;
    display          : block;
    overflow         : hidden;
    }

#container {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    font-size : 0;
    }

#header {
    display          : inline-block;
    position         : fixed;
    z-index          : 2;
    width            : 100%;
    height           : 100px;
    border           : 8px solid #222222;
    font-size        : 20px;
    font-weight      : 200;
    font-variant     : small-caps;
    letter-spacing   : 1px;
    color            : #aaa;
    background-color : #222222;
    }

#leftside {
    position : absolute;
    display  : inline-block;
    border   : 1px solid #222222;
    margin   : 5px 0 0 20px;
    height   : 98px;
    width    : 217px;
    left     : 0;
    }

#middle {
    position    : relative;
    display     : inline-block;
    border      : 1px solid #222222;
    height      : 98px;
    width       : 360px;
    margin      : 0 0 0 35%;
    font-size   : 26px;
    line-height : 1.3;
    }

#middle p {
    text-align     : center;
    vertical-align : middle;
    border         : 1px solid #222222;
    margin         : 16px 0 0 0;
    }

#clear {
    clear   : both;
    display : block;
    border  : 1px solid #222222;
    }

#underpart {
    display          : block;
    position         : relative;
    top              : 116px;
    width            : auto;
    height           : 22px;
    border           : 1px solid #2E2E37;
    border-top       : 1px solid #7f1000;
    margin           : 0 auto;
    padding          : 11px 0 0 0;
    background-color : #2E2E37;
    }

#buttonWrapper {
    position         : absolute;
    display          : inline-block;
    width            : 130px;
    height           : 360px;
    top              : 200px;
    left             : 100px;
    border           : solid 1px black;
    color            : #0b7a7a;
    background-color : #becad3;
    font-size        : 18px;
    letter-spacing   : 1px;
    line-height      : 140%;
    }

#buttonWrapper form {
    padding : 12px 0 0 10px;
    }

#mode {
    color : black;
    }

#color {
    padding-top : 12px;
    color       : black;
    }

#clearButton {
    position         : absolute;
    display          : block;
    width            : 100px;
    height           : 40px;
    top              : 590px;
    left             : 112px;
    font-weight      : bold;
    font-size        : 16px;
    text-align       : center;
    line-height      : 40px; /* centers the text vertically within div when line-height = height */
    border           : 1px solid #CCCCCC;
    border-radius    : 6px;
    box-shadow       : 3px 3px 1px #888888;
    background-color : #becad3;
    color            : #0b7a7a;
    }

#clearButton:hover {
    position         : absolute;
    display          : block;
    width            : 100px;
    height           : 40px;
    top              : 590px;
    left             : 112px;
    font-weight      : bold;
    text-align       : center;
    line-height      : 40px;
    border           : 1px solid #bab4b8;
    border-radius    : 6px;
    box-shadow       : 3px 3px 1px #888888;
    background-color : #aeaec1;
    color            : #0b7a7a;
    }

#clearButton:active {
    position         : absolute;
    display          : block;
    width            : 100px;
    height           : 40px;
    top              : 590px;
    left             : 112px;
    font-weight      : bold;
    text-align       : center;
    line-height      : 40px;
    border           : 1px solid #832400;
    border-radius    : 6px;
    box-shadow       : 3px 3px 1px #888888;
    background-color : #bab4b8;
    color            : #0b7a7a;
    }

#squaresWrapper {
    position : absolute;
    display  : inline-block;
    width    : 500px;
    height   : auto;
    top      : 200px;
    left     : 300px;
    border   : solid 3px red;
    }

.newSquare {
    display : inline-block;
    width   : 10px;
    height  : 10px;
    border  : solid 1px black;
    }

#footer {
    position         : fixed;
    display          : block;
    border-bottom    : 4px solid #7f1000;
    font-family      : 'Tangerine', serif;
    font-size        : 26px;
    font-weight      : 700;
    background-color : #2E2E37;
    color            : #bbbbbb;
    text-align       : right;
    width            : 100%;
    height           : 40px;
    margin           : auto;
    bottom           : 0;
    left             : 0;
    }

#footer p {
    margin : 13px 18px 0 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(function() {

  /**
   * Created by Rick on 01/01/2015.
   * Happy New Years!
   */

  /* set default values */
  var $boxWidth = 500;
  var $numSquaresAcross = 16;
  var $sqColor = 'red';

  /* Define the function to create some number of squares */
  function makeSquares() {
    var $numberSquares = $numSquaresAcross * $numSquaresAcross; // find total number of squares.
    var $squareSize = ($boxWidth - $numSquaresAcross * 2) / $numSquaresAcross; // subtract 2 px per square for border of 1 px per side.
    for (var i = 0; i < $numberSquares; i++) {
      $('#squaresWrapper').append('<div class="newSquare"></div>');
    }
    $('.newSquare').height($squareSize);
    $('.newSquare').width($squareSize);
  };

  /* Define the function to generate a random color */
  function randomColor() {
    return ('#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6));
  }

  /* Define the function to color the individual squares */
  function colorSquares() {
    $('.newSquare').mouseleave(function() {
      if ($('#basic').is(':checked')) {
        $(this).css('background-color', $sqColor);
      } else {
        $(this).css('background-color', randomColor());
      }
    });
  };

  /* call the functions makeSquares() and colorSquares() first time on page load */
  makeSquares();
  colorSquares();

  /* Define the function for when user selects a Radio Button for the color */
  $(".color").click(function() {
    var value = $(this).val();
    $sqColor = value;
    $('#squaresWrapper').css('border-color', value);
  });

  /* Define a function for when user clicks Clear Button */
  $('#clearButton').click(function() {
    $numSquaresAcross = prompt("Please enter the number of squares per row: ", "Min. of 2 and Max. of 100");
    if ($numSquaresAcross > 1 && $numSquaresAcross < 101) {
      $('#squaresWrapper').empty();
      makeSquares();
      colorSquares();
    } else {
      alert("Value was not between 2 and 100, try again...")
    }
  });
});

<div id="container">
  <div id="header">
    <div id="leftside">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/odinlogo.png" alt="The Odin Project">
    </div>
    <div id="middle">
      <p> Web Development 101
        <br/> Project: Javascript/jQuery</p>
    </div>
    <div id="clear"></div>
  </div>
  <div id="underpart">
  </div>
  <div id="main">
    <div id="buttonWrapper">
      <form>
        <fieldset>
          <legend id="mode">Color Mode</legend>
          <input type="radio" name="mode" id="basic" checked/>
          <label for="basic">Basic</label>
          <br/>
          <input type="radio" name="mode" id="random" />
          <label for="random">Random</label>
          <br/>
        </fieldset>
        <fieldset>
          <legend id="color">Stylus Color</legend>
          <input type="radio" class=color name="color" id="black" value="#000000" />
          <label for="black">Black</label>
          <br/>
          <input type="radio" class=color name="color" id="white" value="#FFFFFF" />
          <label for="white">White</label>
          <br/>
          <input type="radio" class=color name="color" id="red" value="#FF0000" checked/>
          <label for="red">Red</label>
          <br/>
          <input type="radio" class=color name="color" id="green" value="#00FF00" />
          <label for="green">Green</label>
          <br/>
          <input type="radio" class=color name="color" id="blue" value="#0000FF" />
          <label for="blue">Blue</label>
          <br/>
          <input type="radio" class=color name="color" id="yellow" value="#FFFF00" />
          <label for="yellow">Yellow</label>
          <br/>
          <input type="radio" class=color name="color" id="orange" value="#FF6E00" />
          <label for="orange">Orange</label>
          <br/>
          <input type="radio" class=color name="color" id="purple" value="#820082" />
          <label for="purple">Purple</label>
          <br/>
          <input type="radio" class=color name="color" id="grey" value="#808080" />
          <label for="grey">Grey</label>
          <br/>
        </fieldset>
      </form>
    </div>
    <div id="clearButton">Clear</div>
    <div id="squaresWrapper"></div>
  </div>
  <div id="footer">
    <p>Student: Richard Stewart &nbsp; &nbsp; January 07 2015</p>
  </div>
</div>