anchor.diff:  
   .water {
       width: 100%;
  -    height: 85%;
  +    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: '80%'
  +            height: '90%'
           }, 1000, 'swing', function(){goUp()})
         }
   
         function goUp(){
           $('.water').animate({
  -            height: '85%'
  +            height: '95%'
           }, 1000, 'swing', function(){goDown()})
         }
   
  
positive.code: <style>
  .glass {
      margin: 30px auto;
      height: 300px;
      width: 150px;
      position: relative;
      border-style: none solid solid solid;
      border-width: 10px;
  
negative.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 style=""><%= x.ingredient.name %></div></div>
            <% end %>
          </div>
        </div>
  