/* Interest Calculator
 * Copyright (C) 2004-2021  Georgi D. Sotirov
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 *
 * ---------------------------------------------------------------------------
 * Description: Interest Calculator Styles
 * Media: screen, print
 */

@media screen, print {
  a[href] {
    text-decoration: underline;
  }

  body {
    background-color: #fff;
    color: #000;
    font: normal normal normal medium Arial, Helvetica, sans-serif;
  }

  button {
    background-color: #999;
    border: 1px solid #000;
    color: #fff;
    font-weight: bold;
  }

  div.row {
    clear: both;
  }

  div.row span.label, div.row span.input {
    float: left;
    margin: 0.2em;
    padding: 0.1em;
  }

  div.row span.label {
    clear: left;
    text-align: right;
    width: 50%;
  }

  footer, nav {
    text-align: center;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Ariel, Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    text-align: center;
  }

  input {
    text-align: right;
  }

  input, select {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
  }

  img {
    border: 0 none;
  }

  table {
    border-style: none;
    empty-cells: show;
    margin-left: auto;
    margin-right: auto;
  }

  table.tbThinBorder {
    border-top: 1px solid #000;
    border-right-style: none;
    border-bottom-style: none;
    border-left: 1px solid #000;
  }

  table.tbThinBorder th, table.tbThinBorder td {
    border-top-style: none;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left-style: none;
    padding: 0.1em;
  }

  table#OutputTable td {
    text-align: right;
  }

  table#OutputTable th {
    background-color: #ccc;
    color: inherit;
  }

  section h2 {
    font-size: 1.2em;
    font-weight: normal;
  }

  /* Pseudo classes */
  .align-center {
    text-align: center;
  }

  .align-left {
    text-align: left;
  }

  .align-right {
    text-align: right;
  }

  .align-justify, .text {
    text-align: justify;
  }

  .bold-text {
    font-weight: bold;
  }

  .copyright {
    background-color: inherit;
    color: #ccc;
    font: normal normal normal small Arial, Helvetica, sans-serif;
    text-decoration: none;
  }

  .red-bold-text-on-light-gray {
    background-color: #ddd;
    color: #f00;
    font-weight: bold;
  }

  .text {
    text-indent: 2em;
  }
}

@media screen {
  button:hover, button:focus {
    border-style: outset;
  }

  input, select {
    background-color: #eee;
  }

  input:hover, input:focus, select:hover, select:focus {
    background-color: #fff;
    color: inherit;
  }

  span#type_warn {
    animation-direction: alternate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: pulse_warn;
    color: darkred;
    font-size: 100%;
    opacity: 1;
  }

  .no_screen {
    display: none;
  }
}

@media print {
  input, select {
    border: 0 none;
  }

  /* This does not seem to work in Firefox 85.0 - the text is rendered as it
   * last appeared on screen with the animation, instead of being drawn in
   * darkred without animation as requested. The same works fine in other
   * browsers e.g. Chrome 88, Edge 88 and Opera 73.
   * TODO: Check for or report bug.
   */
  span#type_warn {
    color: darkred;
  }

  .no_print {
    display: none;
  }
}

@keyframes pulse_warn {
  0% {
    color: darkred;
    opacity: 1;
  }

  10% {
    color: red;
    opacity: 0.9;
  }

  20% {
    color: red;
    opacity: 0.8;
  }

  30% {
    color: red;
    opacity: 0.7;
  }

  40% {
    color: red;
    opacity: 0.6;
  }

  50% {
    color: red;
    opacity: 0.5;
  }

  60% {
    color: red;
    opacity: 0.6;
  }

  70% {
    color: red;
    opacity: 0.7;
  }

  80% {
    color: red;
    opacity: 0.8;
  }

  90% {
    color: red;
    opacity: 0.9;
  }

  100% {
    color: darkred;
    opacity: 1;
  }
}