templates/500.html

<!DOCTYPE html> 
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>Technical troubles</title>
  
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  
  <style type="text/css" media="screen">
    /* @group reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
    }

    *:focus {
      outline: 0;
    }

    body {
      line-height: 1;
      color: #000;
      background: #fff;
    }

    ol, ul {
      list-style: none;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
      border-collapse: separate;
      border-spacing: 0;
      vertical-align: middle;
    }

    caption, th, td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
    }

    q, blockquote {
      quotes: "" "";
    }
    q:before, q:after, blockquote:before, blockquote:after {
      content: "";
    }

    a img {
      border: none;
    }

    section, article, aside, header, footer, nav, dialog, figure {
      display: block;
    }
    /* @end */
    
    body {
      text-align: center;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 150%;
      line-height: 1.5em;
    }

    html>body {
      font-size: 24px;
    }
    
    
    .error {
      width: 32em;
      margin: 3em auto;
      text-align: left;
      color: #333;
      border: 1px dotted #999;
      border-width: .02778em 0px;
      padding: .97222em 0;
    }
    
    h1 {
      font-size: 1.5em;
      line-height: 2em;
      text-transform: uppercase;
      letter-spacing: .01em;
      font-weight: bold;
    }
    
    h1 strong {
      font-size: .333em;
      line-height: 1em;
      padding-top: 2em;
      display: block;
      color: #999;
    }
    
    div[role="main"] {
      margin-bottom: 1.5em;
    }
    
  </style>
  
</head>

<body>
  
  <article class="error e500">
    <h1><strong>500</strong> Server error</h1>

    <div role="main">
      <p>
        Sorry, the site's had a problem. Our developers have been notified
        and are looking into it.  Sorry for the hassle.  Maybe you could try
        the <a href="/">home page</a>, or try back again later?
      </p>
    </div>
  </article>
  
 </body>
</html>