@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/NotoSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: bold;
  src: url("/fonts/NotoSans-Bold.ttf") format("truetype");
}

html {
  font-size: 15px;
  background: #FFEEDD;
}
html, input[type="text"], input[type="submit"] {
  font-family: "Noto Sans", "Segoe UI", "Liberation Sans",
               "Arial", "Helvetica", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

div.box-list {
  text-align: center;
  margin: 0 4px;
}

div.box {
  border: 1px solid #333333;
  background: #FFFFFF;
  margin: 0 auto 16px;
}
div.box h2 {
  background: #333333;
  color: #FFFFFF;
  font-size: 16px;
  margin: 0 0 10px;
  text-align: center;
  padding: 1px 2em 3px;
}

div.search-list {
  display: table;
  margin: 0 auto 10px;
  padding: 0 4px;
  text-align: left;
}
div.search-list table {
  border-bottom: 0 /* 1px solid #CCCCCC */;
  border-top: 0 /* 1px solid #CCCCCC */;
  border-collapse: collapse;
  margin: 0 0 2px;
}
div.search-list tr {
  vertical-align: middle;
}
div.search-list td {
  padding: 0;
}
div.search-list td:nth-child(1) {
  padding-right: 4px;
}
div.search-list td:nth-child(2) {
  padding-right: 8px;
}
div.search-list td:nth-child(4) {
  padding-left: 4px;
  width: 100px;
}

form img {
  display: block;
  padding: 2px;
  vertical-align: middle;
}
form, input[type="text"], input[type="submit"] {
  font-size: 14px;
}
input[type="text"] {
  background: #EEEEEE;
  border: 1px solid #333333;
  padding: 1px 2px;
  width: 100%;
}
input[type="submit"] {
  background: #333333;
  border: 2px solid #999999;
  color: #FFFFFF;
  font-weight: bold;
  margin: 0 0 0 4px;
  padding: 1px 8px 2px;
  width: 105px;
}

ul.button-list {
  padding: 0 8px;
  margin: 0 0 10px;
  text-align: center;
}
ul.button-list.header {
  padding: 10px 1em 10px;
}
ul.button-list li {
  display: inline-block;
  color: #FFFFFF;
  background: #333333;
  padding: 1px 6px;
  margin: 4px 5px;
}
ul.button-list a {
  color: inherit;
  text-decoration: none;
}
ul.button-list b {
  font-size: 16px;
}

/******************************************************************************/
/*                                                                            */
/*                                   Colors                                   */
/*                                                                            */
/******************************************************************************/

div.box:nth-child(10n+1), div.box.red.red,
div.box.search form:nth-child(10n+1) input {
  background: #FFDDDD;
  border-color: #AA0000;
}
div.box:nth-child(10n+1) h2, div.box:nth-child(10n+1) li,
div.box.red.red h2, .red.red li,
ul.button-list.header.red.red,
div.box.search form:nth-child(10n+1) input[type="submit"] {
  background: #AA0000;
}

div.box:nth-child(10n+2), div.box.amber.amber,
div.box.search form:nth-child(10n+2) input {
  background: #FFDDBB;
  border-color: #CC5500;
}
div.box:nth-child(10n+2) h2, div.box:nth-child(10n+2) li,
div.box.amber.amber h2, .amber.amber li,
ul.button-list.header.amber.amber,
div.box.search form:nth-child(10n+2) input[type="submit"] {
  background: #CC5500;
}

div.box:nth-child(10n+3), div.box.khaki.khaki,
div.box.search form:nth-child(10n+3) input {
  background: #EEDDAA;
  border-color: #886660;
}
div.box:nth-child(10n+3) h2, div.box:nth-child(10n+3) li,
div.box.amber.amber h2, .amber.amber li,
ul.button-list.header.amber.amber,
div.box.search form:nth-child(10n+3) input[type="submit"] {
  background: #886600;
}

div.box:nth-child(10n+4), div.box.chartreuse.chartreuse,
div.box.search form:nth-child(10n+4) input {
  background: #DDEEBB;
  border-color: #557700;
}
div.box:nth-child(10n+4) h2, div.box:nth-child(10n+4) li,
div.box.chartreuse.chartreuse h2, .chartreuse.chartreuse li,
ul.button-list.header.chartreuse.chartreuse,
div.box.search form:nth-child(10n+4) input[type="submit"] {
  background: #557700;
}

div.box:nth-child(10n+5), div.box.green.green,
div.box.search form:nth-child(10n+5) input {
  background: #CCEECC;
  border-color: #006600;
}
div.box:nth-child(10n+5) h2, div.box:nth-child(10n+5) li,
div.box.green.green h2, .green.green li,
ul.button-list.header.green.green,
div.box.search form:nth-child(10n+5) input[type="submit"] {
  background: #006600;
}

div.box:nth-child(10n+6), div.box.jade.jade,
div.box.search form:nth-child(10n+6) input {
  background: #CCEEDD;
  border-color: #008888;
}
div.box:nth-child(10n+6) h2, div.box:nth-child(10n+6) li,
div.box.jade.jade h2, .jade.jade li,
ul.button-list.header.jade.jade,
div.box.search form:nth-child(10n+6) input[type="submit"] {
  background: #008888;
}

div.box:nth-child(10n+7), div.box.teal.teal,
div.box.search form:nth-child(10n+7) input {
  background: #CCDDFF;
  border-color: #006699;
}
div.box:nth-child(10n+7) h2, div.box:nth-child(10n+7) li,
div.box.teal.teal h2, .teal.teal li,
ul.button-list.header.teal.teal,
div.box.search form:nth-child(10n+7) input[type="submit"] {
  background: #006699;
}

div.box:nth-child(10n+8), div.box.blue.blue,
div.box.search form:nth-child(10n+8) input {
  background: #DDDDFF;
  border-color: #2222AA;
}
div.box:nth-child(10n+8) h2, div.box:nth-child(10n+8) li,
div.box.blue.blue h2, .blue.blue li,
ul.button-list.header.blue.blue,
div.box.search form:nth-child(10n+8) input[type="submit"] {
  background: #2222AA;
}

div.box:nth-child(10n+9), div.box.indigo.indigo,
div.box.search form:nth-child(10n+9) input {
  background: #EEDDFF;
  border-color: #5500AA;
}
div.box:nth-child(10n+9) h2, div.box:nth-child(10n+9) li,
div.box.indigo.indigo h2, .indigo.indigo li,
ul.button-list.header.indigo.indigo,
div.box.search form:nth-child(10n+9) input[type="submit"] {
  background: #5500AA;
}

div.box:nth-child(10n), div.box.violet.violet,
div.box.search form:nth-child(10n) input {
  background: #FFEEFF;
  border-color: #880088;
}
div.box:nth-child(10n) h2, div.box:nth-child(10n) li,
div.box.violet.violet h2, .violet.violet li,
ul.button-list.header.violet.violet,
div.box.search form:nth-child(10n) input[type="submit"] {
  background: #880088;
}

ul.button-list.header li {
  border: 2px solid #FFFFFF;
  margin: 2px 3px;
}
ul.button-list.header li:hover {
  border-color: #FFDD00;
  margin: 2px 3px;
}


div.box.search {
  background: #FFFFFF;
  border-color: #333333;
}
div.box.search h2 {
  background: #333333;
}

/******************************************************************************/
/*                                                                            */
/*                               Responsiveness                               */
/*                                                                            */
/******************************************************************************/

  ul.button-list {
    font-size: 15px;
  }

@media screen and (max-width: 399px) {
  .not-narrow {
    display: none;
  }
  div.box.search form td:nth-child(4) {
    width: 40px;
  }
}

@media screen and (min-width: 800px) {
  div.box-list {
    border: 0 /* 1px solid red */;
    margin: 0 auto;
    width: 774px;
  }
  div.box {
    width: 376px;
    display: inline-block;
    vertical-align: top;
  }
  div.box:nth-child(odd) { margin: 0 0 16px 4px; }
  div.box:nth-child(even) { margin: 0 4px 16px 0; }
  div.box:nth-child(1) { width: 762px; margin: 0 0 16px; }
}

@media screen and (min-width: 1024px) {
  div.box-list {
    margin: 0 auto;
    width: 996px;
  }
  div.box {
    width: 320px;
  }
  div.box:nth-child(3n) { margin: 0 4px 16px 0; }
  div.box:nth-child(3n+1) { margin: 0 4px 16px 4px; }
  div.box:nth-child(3n+2) { margin: 0 0 16px 4px; }
  div.box:nth-child(1) { width: 485px; margin: 0 4px 16px 0; }
  div.box:nth-child(2) { width: 485px; margin: 0 0 16px 4px; }
}

@media screen and (min-width: 1600px) {
  div.box-list {
    margin: 0 auto;
    width: 1568px;
  }
  div.box {
    width: 379px;
  }
  div.box:nth-child(4n) { margin: 0 4px 16px 0; }
  div.box:nth-child(4n+1) { margin: 0 4px 16px 4px; }
  div.box:nth-child(4n+2) { margin: 0 4px 16px 4px; }
  div.box:nth-child(4n+3) { margin: 0 0 16px 4px; }
  div.box:nth-child(1) { width: 510px; margin: 0 4px 16px 0; }
  div.box:nth-child(2) { width: 508px; margin: 0 4px 16px 4px; }
  div.box:nth-child(3) { width: 508px; margin: 0 0 16px 4px; }
}

@media screen and (min-width: 1920px) {
  div.box-list {
    margin: 0 auto;
    width: 1888px;
  }
  div.box {
    width: 459px;
    font-size: 16px;
  }
  div.box h2 { font-size: 18px; }
  ul.button-list { font-size: 16px; }
  ul.button-list b { font-size: 18px; }
  div.box:nth-child(1) { width: 616px; margin: 0 4px 16px 0; }
  div.box:nth-child(2) { width: 615px; margin: 0 4px 16px 4px; }
  div.box:nth-child(3) { width: 615px; margin: 0 0 16px 4px; }
}

/******************************************************************************/
/*                                                                            */
/*                               Hover effects                                */
/*                                                                            */
/******************************************************************************/

div.box.search.search input[type="submit"]:hover, ul.button-list li:hover {
  background: #FFDD00;
  border: 2px solid #CC0000;
}
ul.button-list li:hover {
  color: #000000;
}
div.box.search.search input[type="submit"]:hover, ul.button-list li a:hover {
  color: #CC0000;
}
form img:hover {
  background: #CC0000;
  border: 2px solid #CC0000;
  padding: 0;
}
ul.button-list li:hover {
  margin: 2px 3px;
}

/******************************************************************************/
/*                                                                            */
/*                             Fix Safari on IOS                              */
/*                                                                            */
/******************************************************************************/

div.box.search input[type="submit"], div.box.search input[type="text"] {
  border-radius: 0;
  -webkit-appearance: none;
}

/* vim: set ai bs=2 com= et ft=css ru sc smd sw=2 ts=8 tw=80 notx nowrap: *//**/