anchor.diff:  <style>
   .glass {
       margin: 30px auto;
  -    height: 300px;
  -    width: 150px;
  +    height: <%= [50 * @recipe.amounts.size, 300].max %>px;
  +    width: <%= ([50 * @recipe.amounts.size, 300].max) / 2 %>px;
       position: relative;
       border-style: none solid solid solid;
       border-width: 10px;
  
positive.code:       <div class="glass">
          <div class="water">
            <% @recipe.amounts.each do |x| %>
              <div style="background-color:#<%= "%06x" % (rand * 0xffffff) %>;height:<%= (1 / @recipe.amounts.size.to_f) * 100 %>%"></div>
            <% end %>
          </div>
        </div>
  
negative.code: 
  .water {
      width: 100%;
      height: 95%;
      
      position: absolute;
      bottom: 0;
      animation-iteration-count:infinite;
  }
  
  .water div div {
      /* WebKit (Safari/Chrome) Only */
    vertical-align: middle;
    text-align:center;
  
    /* If we weren't using text-shadow, we'd set a fallback color
       and use this to set color instead
      -webkit-text-fill-color: white; */
    
    color: white;
    
    text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px  1px 0 #000,
      1px  1px 0 #000;
  }
  </style>
  <script>
    $(function(){
        function goDown() {
          $('.water').animate({
              height: '90%'
          }, 1000, 'swing', function(){goUp()})
        }
  
        function goUp(){
          $('.water').animate({
              height: '95%'
          }, 1000, 'swing', function(){goDown()})
        }
  
  