Fire JS Bin - RETRO

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE html>
<html>
  
  <head>
    <title>Retro : For Agile Retrospectives</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <nav>
      <h1><span>Retro:For Agile Retrospectives</span></h1>
      <h2 id="timestamp"></h2>
      <ul>
        <li><a href="#" id="reset">Reset</a></li>
        <li><a href="#export" id="export" rel="css/export.css">Export</a></li>
      </ul>
    </nav>
    <section id="worked">
      <header>
        <h2>What Worked</h2>
        <a href="#" title="Click to add a new sticky">+</a>
      </header>
      <ul></ul>
    </section>
    <section id="failed">
      <header>
        <h2>What Didn't</h2>
        <a href="#" title="Click to add a new sticky">+</a>
      </header>
      <ul></ul>
    </section>
    <section id="next">
      <header>
        <h2>Next Time</h2>
        <a href="#" title="Click to add a new sticky">+</a>
      </header>
      <ul></ul>
    </section>
    <form id="new" style="display:none;">
      <header><h2>New Sticky</h2></header>
      <fieldset>
        <textarea name="content" class="default">What worked...

or Cancel

html { color:#000; background:#fff; }
body, div, ul, li, h1, h2, form, fieldset, input, textarea { margin:0; padding:0; }
fieldset { border:0; }
li { list-style:none; }
h1, h2 { font-size:100%; font-weight:normal; }
input, textarea { font-family:inherit; font-size:inherit; font-weight:inherit; }
body { font:13px/1.231 "Helvetica Neue", Helvetica, Arial, clean, sans-serif; font-weight:400; }
html, body { height:100%; color:#333; }
a { color:#6a3e00; }
a:hover { color:#9eb933; }
nav { display:block; height:40px; background:#6a3e00 url("/attach/logo.png") top left no-repeat; }
nav h1 { display:block; float:left; }
nav h1 span { display:none; }
#timestamp { display:none; }
nav ul { float:right; margin:7px 0 0; }
nav ul li { display:block; float:left; margin:0 0.5em; }
nav ul li a { display:block; background-color:#f48c00; color:#fff; text-decoration:none; padding:0.2em 0.5em; font-size:116%; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px }
h2 { letter-spacing:-0.06em; }
section { }
section header { display:block; background-color:#FBF1B6; border-right:4px solid #fff; padding:0.1em 0.3em; overflow:hidden; white-space:nowrap; }
section header h2 { font-size:300%; font-weight:bold; color:#f48c00; float:left; }
section header a { font-family:monospace; font-weight:bold; display:block; padding:0 0.22em; margin:0.2em; line-height:1; text-align:center; float:right; font-size:270%; text-decoration:none; color:#fff; background-color:#9eb933; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; }
section header a:hover { color:#fff; background-color:#89A029; }
#worked, #failed, #next { width:33%; padding:0 0 1em; float:left; }
#next { width:34%; }
#next header { border:none; }
section ul { font-size:146.5%; }
section ul li { display:block; float:left; margin:0.4em 1em; padding:0.5em 1em; background-color:#9eb933; color:#fff; cursor:pointer; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2); border:2px solid #fff; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:2px 2px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:2px 2px 2px rgba(0, 0, 0, 0.2); box-shadow:2px 2px 2px rgba(0, 0, 0, 0.2); }
section ul li:hover { background-color:#92AA2D; }
section ul li .votes { padding:0 0 0 0.5em; }
#new { width:40em; height:23em; position:absolute; background-color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin:0 auto; top:200px; left:400px; border:5px solid #fff; -moz-box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3); box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3); }
#new h2 { background-color:#6a3e00; padding:0.4em; font-size:197%; color:#fff; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; }
#new fieldset { font-size:161.6%; margin:1em; text-align:center; }
#new fieldset label { font-size:161.6%; }
#new fieldset select { padding:0 0.2em; }
#new fieldset textarea { display:block; width:100%; height:7em; margin:0 0 1em; font-family:Georgia; }
#new fieldset textarea.default { color:#aaaaaa; }
#new fieldset input { background-color:#f48c00; border:1px solid #f48c00; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; color:white; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.7); padding:0.2em 1em; cursor:pointer; }
#intro { position:absolute; top:100px; left:200px; font-family:Georgia, 'Times New Roman', serif; width:28em; background-color:#eeeeee; padding:1em; font-size:131%; line-height:1.4; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -moz-box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3); box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3); }
#intro span { color:#9eb933; font-weight:bold; font-family:monospace; }
#intro #go { display:block; text-align:center; margin:0.5em 0 0; font-size: 161.6%; }

Pop out