title: Dominoes Tracker using HTML/CSS and Javascript
body: <p>I am planning to create a very simple webpage which shows all Dominoes 0-12 and will then allow the user to hover and click each domino to either hide or change its transparency.  The idea is to show what remains based on what has been played.  I am doing this for my wife as a project to help me get a better understanding of html/css and my recently acquired knowledge of jquery and javascript.  </p>
  
  <p>At this point my question is simply about the best method to print these dominoes to the page using CSS.  I can create the 0, 1-0, and 1-1 pieces using the code below but I am getting a headache trying to figure out how I can position the dots diagonally for the 0-2. If anyone has the patience to help me with the best method here it would be very much appreciated :)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="dominoe"&gt; 
          &lt;span class="one"&gt;
              &lt;div class="circle"&gt; &lt;/div&gt;
          &lt;/span&gt;
          &lt;div class="line"&gt; &lt;/div&gt;
          &lt;span class="one"&gt;
              &lt;div class="circle"&gt; &lt;/div&gt; 
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
      * {  
      border: 0.50px dashed blue; /*guide rulers*/
  }
  
  .dominoe {
  /* Dominoe shape */
      position: relative;
      height:76px;
      width:40px;
      background-color:white;
      border: 1px solid black;
  
  /* Rounded Corners 
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding:2px;
      */
  }
  
  .circle {
      border-radius: 50%;
      width: 5px; /* width and height can be anything, as long as they're equal */
      height: 5px; 
      background-color:black;
      position: relative;
      margin:auto;
  
  }
  
  .line {
      position:relative;
      width:90%;
      height:2%;
      background-color:black;
      display:block;
      margin:auto;
  }
  
  .one {
      height:5px;
      width: 5px;
      display: block;
      margin:auto;
      margin-top:5%;
      margin-bottom:5%;
      padding:34%;
  }
  </code></pre>
  
  <p>Example of dominoes I am trying to create with CSS:
  <a href="http://i.stack.imgur.com/Rfwrf.jpg" rel="nofollow">http://i.stack.imgur.com/Rfwrf.jpg</a></p>