/* ------------------------------------------------------------------
 * Fichero:  psl.css
 * Objetivo: Hoja de estilos de Parejas de software libre
 * Autor:    Pedro Reina
 * Fecha:    L.27.7.2015
 * Licencia: CC0 1.0 Universal
 *           http://creativecommons.org/publicdomain/zero/1.0/
--------------------------------------------------------------------*/

/* --------------------------------
 * Tipos de letra
 * ------------------------------*/

@font-face
  {
  font-family: texto;
  src: url('fuente/encode-r.ttf');
  }

@font-face
  {
  font-family: texto;
  src: url('fuente/encode-b.ttf');
  font-weight: bold;
  }

@font-face
  {
  font-family: titulo;
  src: url('fuente/bree.otf');
  }

@font-face
  {
  font-family: boton;
  src: url('fuente/nunito.ttf');
  }

@font-face
  {
  font-family: digito;
  src: url('fuente/LiberationMono-Bold-SoloDigitos.ttf');
  }

/* --------------------------------
 * Body
 * ------------------------------*/

BODY
  {
  color: black;
  background-color: white;
  font-family: texto;
  font-size: 18px;
  }

/* --------------------------------
 * Párrafos
 * ------------------------------*/

p.centrado
  { text-align: center; }

/* --------------------------------
 * Vínculos
 * ------------------------------*/

A
  {
  font-family: texto;
  color: #0420ff;
  text-decoration: none;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  }

A:hover
  {
  color: #e01616;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb;
  }

A:active
  { text-decoration: underline; }

/* --------------------------------
 * Divisiones
 * ------------------------------*/

DIV.cuadro
  {
  position: relative;
  margin-bottom: 20px;
  padding: 10px;
  border-style: solid;
  border-color: #2a2;
  border-width: 2px;
  width: 798px;
  margin-left: auto;
  margin-right: auto;
  }

/* --------------------------------
 * Botones de orden
 * ------------------------------*/

.orden
  {
  border:1px solid #80ab5d;
  -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;

  padding: 5px 7px 5px 40px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000;
  font-family: boton;
  font-size: 24px;
  line-height: 24px;
  text-decoration: none;
  }

.orden:hover:enabled
  {
  -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
  box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
  text-shadow: 1px 1px 1px #ccc;
  }

.orden:active:enabled
  {
  -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
  -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
  box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
  border-color:#a9db80;
  text-shadow: 0 0 2px #80ab5d;
  }

.orden:disabled
  { border-color:#CCC; }

.orden.rueda
  { background: url(imagen/rueda.gif) no-repeat 5px 50%; }

.orden.nueva
  { background: url(imagen/nueva.png) no-repeat 5px 50%; }

.orden.parar
  { background: url(imagen/parar.png) no-repeat 5px 50%; }

.orden.info
  { background: url(imagen/info.png) no-repeat 5px 50%; }

.orden.historial
  { background: url(imagen/historial.png) no-repeat 5px 50%; }

.orden.borrar
  { background: url(imagen/borrar.png) no-repeat 5px 50%; }

.orden.creditos
  { background: url(imagen/creditos.png) no-repeat 5px 50%; }

.orden.licencia
  { background: url(imagen/licencia.png) no-repeat 5px 50%; }

.orden.descarga
  { background: url(imagen/descarga.png) no-repeat 5px 50%; }

.orden.tecnicas
  { background: url(imagen/tecnicas.png) no-repeat 5px 50%; }

/* --------------------------------
 * Imágenes
 * ------------------------------*/

/* Imágenes con vínculo pero sin borde */

img.sinborde
  {
  border: none;
  margin-left: 20px;
  margin-right: 20px;
  }

/* --------------------------------
 * Manejo de la zona de mensajes
 * ------------------------------*/

/* El DIV en el que se escriben los mensajes */

div.mensaje
  {
  position: relative;
  margin-right: 25px;
  margin-left: 25px;
  border: 2px solid green;
  padding: 10px;
  }

/* El botón para cerrar DIV con mensajes */

img.botoncerrar:hover
  { opacity: 0.75; }

div.botoncerrar
  {
  position: absolute;
  right: 5px;
  top: 5px;
  }

/* --------------------------------
 * Manejo del reloj
 * ------------------------------*/

/* El DIV en el que se pinta el reloj */

div.reloj
  {
  font-family: digito;
  font-size: 60px;
  color: #00C;
  position: absolute;
  left: 20px;
  top: 28px;
  }

/* --------------------------------
 * Tablas
 * ------------------------------*/

table
  {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  }

table tr:nth-child(2n+3)
  { background-color: RGB(240,255,240); }

table tr:nth-child(n+2):hover
  { background-color: RGB(220,255,220); }

table td
  {
  border: 1px solid green;
  padding: 5px;
  }

td.centro
  { text-align:center; }