
  * {
    font-family: sans-serif;
  }

  form {
    margin: 0;
    padding: 0;
  }

  div.buttons, form.regular-form {
    border: 2px black solid;
    width: 165px;
    height: 175px;
    margin: 2px;
    padding: 5px;
    float: left;
    background: #c9d0ce;
   }

   div.searchbox > ul {
    margin: 0;
    padding: 0;
    list-style: none;
   }

   div.searchbox {
    width: 162px;
    height: auto;
    position: absolute;
    background: white;
    border: solid 1px;

   }

   li:hover {
    background: black;
    color: white;
   }

  label {
     font-size: 0.8em;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  h2 {
    font-size: 1.0em;
    margin: 0;
    padding: 0;
  }

   input[type="text"],
   input[type="number"],
   input[type="password"],
   select {
    background: white;
    width: 100%;
   }

   input[type=submit] {
     font-size: 1.0em;
     margin-top: 15px;
     width: 100%;
   }

    @media all and (max-width: 500px) {

      div.buttons, form.regular-form {
        border: 5px black solid;
        width: 87%;
        height: auto;
        margin: auto;
        float: none;
        background: #c9d0ce;
       }

       input {
        padding: 10px;
       }

        /* the following is necessary on iphone to stop
        the browser from zooming in on a text element when
        it gains focus */
       input[type="color"],
       input[type="date"],
       input[type="datetime"],
       input[type="datetime-local"],
       input[type="email"],
       input[type="month"],
       input[type="number"],
       input[type="password"],
       input[type="search"],
       input[type="tel"],
       input[type="text"],
       input[type="time"],
       input[type="url"],
       input[type="week"],
       select:focus,
       textarea {
         font-size: 16px;
       }

    }