/* Container for the <input> and the list of options beneath it */
.inputDiv
{
  display: block;
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* The input box used to filter the list of options */
.inputFilter
{
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 1.0em;
  padding: 14px 20px 12px 10px;
  border-bottom: 1px solid #ddd;
  height: 40px;
  border-radius: 10px;
  border: 2px solid #777777;
}

.inputFilter:focus {outline: none}

/* Container for the list of options. This is positioned absolute so the contained options act like a dropdown menu and overlay the elements that occur in the normal flow */
.inputOptionsDiv
{
  display: block;
  position: absolute;
  width: 100%;
}

/* An input option */
a.inputOption, a.inputOption:link, a.inputOption:visited, a.inputOption:active, a.inputOption:hover
{
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;

  border: 1px solid #777777;
  margin-top: -1px; /* Prevent double top/bottom borders */

  /* Font info also needed */
  font-weight: normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.8em;

  background-color: #ffffff;
}

a.inputOption:first-child, a.inputOption:link:first-child, a.inputOption:visited:first-child, a.inputOption:active:first-child, a.inputOption:hover:first-child
{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 5px;
}

a.inputOption:last-child, a.inputOption:link:last-child, a.inputOption:visited:last-child, a.inputOption:active:last-child, a.inputOption:hover:last-child
{
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

a.inputOption:focus, a.inputOption:link:focus, a.inputOption:visited:focus, a.inputOption:active:focus, a.inputOption:hover:focus
{
  outline: none;
}

.radioButton
{
  /* Font info needed */
  font-weight: normal;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.0em;
}