anchor.diff:                        <div class="w3c_explanation"><%= error.explanation.strip %></div>
                       <% end %>
                     </div>
  -                </li>
  -              <% end %>
  -              </ul>
  -
  -              <ul class="page_warnings">
  -              <% page.warnings.sort_by {|w| w.line.to_i}.each do |warning| %>
  -                <li>
  -                  <span class="label warning">WARNING</span>
  -                  <strong><%= CGI::escapeHTML(warning.text.capitalize) %></strong>)
  -
  -                  <div class="details"  id="details_<%= warning.object_id %>">
  +
  +                <% end %>
  +              </div>
  +
  +              <div class="accordion">
  +                <% page.warnings.sort_by {|w| w.line.to_i}.each do |warning| %>
  +                  <h3>
  +                    <span class="label warning">WARNING</span>
  +                    <%= CGI::escapeHTML(warning.text.capitalize) %>
  +                  </h3>
  +
  +                  <div>
                       <% if warning.line %>
                         <span class="coordinates label">
                           LINE <%= warning.line %>
  
positive.code:                       <div class="w3c_explanation"><%= warning.explanation.strip %></div>
                      <% end %>
                    </div>
                  </li>
                <% end %>
                </ul>
              </div>
            <% end %>
          <% end %>
  
negative.code:       /* Explanations */
        .w3c_explanation { border: 1px solid #ddd; background-color: #ffe; padding: 10px; margin: -10px 5px 25px 5px; }
        .helpwanted { float: right; font-size: 2em; }
        .coordinates { float: right; margin: 10px; background-color: #fff; color: #333; border: 1px solid #aaa;}
  
      </style>
  
  