body {
  background: #e3e3e3;
  color: #202020;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4 {
  color: #636363;
}

h1 a, h2 a, h3 a, h4 a {
  color: #636363;
}

hr {
  border-top: 1px solid #b4b4b4;
  height: 1px;
  width: 95%;
}

pre {
  background: #f4f4f4;
  font: "Courier New", Courier, monospace;
  border: 1pt solid black;
  padding: 6pt;
  margin-left: 2em;
  margin-right: 3em;
}

header {
  background: #636363 url(/images/calc/header_190x100.jpg) no-repeat 100% 0;
  color: white;
  padding: 0.5em 0.5em;
  height: 100px;
}

header a {
  color: white;
}

header p {
  color: white;
  font-size: 1.4em;
  font-weight: normal;
}

nav, nav a {
  background-color: #b4b4b4;
  color: #4b4b4b;
}

nav a:hover {
  color: #7e7e7e;
  background-color: #cecece;
}

footer {
  background-color: #636363;
  color: #e6e6e6;
  background-image: none;
}

footer a {
  border-bottom: 1px dashed #e6e6e6;
  color: #e6e6e6;
  font-weight: normal;
}

footer a:hover {
  border-bottom: 1px dashed white;
  color: white;
}

footer p, footer img {
  margin: 0;
}

.company-logo {
  padding: 5px;
}

.copyright {
  float: right;
  padding: 5px;
}

li img {
  margin-top: 0;
}

img.decorative {
  margin-left: 0.5em;
}

.calculator-display {
  border: 0.2em inset #808080;
  border-right-color: #999999;
  border-bottom-color: #999999;
  color: white;
  background-color: #383d83;
  padding: 1em;
  margin: 0.6em;
  font-size: 2em;
}

.big-button-grid {
  margin-left: 1em;
  margin-right: 0.3em;
  margin-top: 1em;
  margin-bottom: 2em;
}

.big-button-grid a:hover {
  color: #202020;
}

.big-button-grid a:active {
  color: #202020;
  display: inline;
}

.big-button {
  border: 0.3em outset #e0e0e0;
  border-radius: 0.5em;
  background-color: #c0c0c0;
  box-shadow: 0.1em 0.1em 0.5em 0 #7e7e7e;
  padding: 1em;
  margin: 0.5em;
  margin-bottom: 1em;
  width: 30%;
  height: 10.5em;
  text-align: center;
  display: inline-block;
}

.big-button img {
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}

.big-button:active {
  transform: translateX(0.15em) translateY(0.15em);
  box-shadow: 0.05em 0.05em 0.2em 0 #7e7e7e;
}

textarea {
  width: 100%;
  height: 15em;
}

figure.catalogue-image {
  float: right;
  font-size: 0.6em;
}

/* Social Bookmarks */
.bookmark-heading {
  color: #666666;
}

.bookmarks {
  background-color: #F0F0F0;
  font-size: small;
  padding: 2px 10px;
  list-style-type: none;
}

.bookmarks ul {
  display: inline-block;
}

.bookmarks li {
  list-style: none;
  display: inline-block;
  margin-left: 1em;
  float: left;
}

.bookmarks li a {
  text-decoration: none;
}

.bookmarks li span {
  background-image: url("/images/bookmarks.gif");
  width: 16px;
  height: 16px;
  display: inline-block;
}

.bookmarks li.Pinterest span {
  background-position: 0px 0px;
}

.bookmarks li.Diigo span {
  background-position: -16px 0px;
}

.bookmarks li.Facebook span {
  background-position: -32px 0px;
}

.bookmarks li.Reddit span {
  background-position: -48px 0px;
}

.bookmarks li.Twitter span {
  background-position: -64px 0px;
}

/* CSS for Calc manual pages, originally from template.css */
KBD {
  background-color: #CCCCCC;
  padding: 0em 0.4em;
  border-color: white;
  border-width: thin;
  border-style: outset;
  margin-top: 0.3em;
  margin-left: 0.5em;
  margin-right: 0.7em;
  font-family: Arial, Verdana, sans-serif;
  font-size: 0.85em;
  text-align: center;
  color: #202020;
}

VAR {
  color: #00FFFF;
  background-color: #000080;
  padding: 0em 0.4em;
  border-color: white;
  border-width: thin;
  border-style: inset;
  margin-top: 0.3em;
  margin-left: 0.5em;
  margin-right: 0.7em;
  font-family: Arial, Verdana, sans-serif;
  font-size: 0.85em;
  font-style: normal;
  font-weight: bold;
  text-align: center;
}

/* from availablelight */
button, input[type=button] {
  border-style: solid;
  margin: 0.2em 0.2em;
  padding: 0.2em 0.2em;
  background-clip: border-box;
  border-radius: 0;
  touch-action: manipulation;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.333;
  color: #000000;
  background-color: #dadada;
  border-color: #000000;
}

button:hover, button:active, input[type=button]:hover {
  background-color: #c1c1c1;
}

button:disabled, input[type=button]:disabled {
  color: #999999;
  background-color: #ffffff;
  border-color: #999999;
}

label {
  width: 100%;
  height: 100%;
}

input, select {
  border-style: solid;
  border-width: 2px;
  border-radius: 0;
  background-clip: border-box;
  box-sizing: border-box;
  padding: 0.2em 0.2em;
  margin: 0.2em 0.2em;
  outline: 0;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.333;
  color: #000000;
  background-color: #ffffff;
  border-color: #2b2b2b;
}

input:hover, input:active, select:hover, select:active {
  background-color: #eeeeee;
}

input:disabled, select:disabled {
  color: #999999;
  background-color: #ffffff;
  border-color: #999999;
}

select option:checked {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.4);
}

input[type=checkbox] {
  width: 2.5em;
  min-width: 2.5em;
  height: 2.5em;
  margin-right: 0;
}

.settings-value input[type=number]::clear {
  display: none;
}

.settings-value input[type=number]::-ms-clear {
  display: none;
}

/* CSS responsive breaks */
@media screen and (max-width: 840px) {
  .big-button {
    width: 45%;
  }
}
@media screen and (max-width: 480px) {
  .big-button {
    width: 90%;
    height: 2em;
    padding: 0.3em;
    margin: 0.5em;
  }

  .big-button img, .big-button br {
    display: none;
  }

  figure.catalogue-image {
    float: none;
  }
}