html {
  font        : 16px sans-serif;  /* tamaño y tipo de letra */
  color       : #333;             /* color de letra */
  text-shadow : 0 0 0.3px #666;   /* sombra de letra */
  min-height  : 100vh;            /* alto mínimo del dispositivo */
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: rgba(70,130,180,0.5) url(../img/bg8.png);
}

/* ##########  LAYOUT   */
#main {
  max-width: 800px;
  width: 96%;
  margin: 2em auto;
  padding: 1em;
  background: rgba(0,0,0,0.1);
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);
  border-radius: 5px;
}
#main:after {
  content: "";
  display: table;
  clear: both;
}


/* ##########  BÁSICAS CUSTOM   */

/* ====================  Texto*/
.izdo   { text-align: left;    }
.dcho   { text-align: right;    }
.centro { text-align: center;  }
.justi  { text-align: justify; }

/* ====================  Imagen*/
.izda   { display:inline; float:left; margin: 5px 15px 5px 0; }
.dcha   { display:inline; float:right; margin: 5px 0 5px 15px;}
.centra { display: block; margin: 0 auto;}

/* ====================  Colores*/
.bg-w { background: rgba(255,255,255,0.1); }
.bg-k { background: rgba(0,0,0,0.1);       }
.bg-r { background: rgba(255,200,0,0.1);   }
.bg-g { background: rgba(0,255,0,0.1);     }
.bg-b { background: rgba(0,0,255,0.1);     }

.tx-w { color: rgba(255,255,255,0.5); }
.tx-b { color: rgba(0,0,0,0.5);       }
.tx-r { color: rgba(255,0,0,0.5);     }
.tx-g { color: rgba(0,255,0,0.5);     }
.tx-b { color: rgba(0,0,255,0.5);     }

/* ====================  Específicas   */
/*.info   { background: lightsteelblue; }
.solu   { background: lightsteelblue; }
.enun   { background: lightsteelblue; }
.nota   { background: lightsteelblue; }
.idea   { background: lightsteelblue; }
.ejem   { background: lightsteelblue; }
.aviso  { background: lightsteelblue; }
.aayuda { background: lightsteelblue; }*/

.aviso {
    max-width   : 100%;
    font        : italic 1em serif;
    padding     : 0 4px;
    height      : 1.5em;
    color: rgba(196,0,0,1);
  }
.info {
    max-width   : 100%;
    height      : 1.5em;
    font        : 1.2em serif;
}
h1,h2,h3,h4,h5,h6 {margin: 0.25em;}
em {
  font: italic 1em serif;
}
/* ====================  Presentación   */
.trans       { opacity: 1; }
.trans:hover { opacity: 0.5; }

.ancho1 { width: 80%; margin: 0 auto;}

/* ##########  BÁSICAS DE ETIQUETA   */

header, footer { text-align: center; }

/* ====================  enlaces   */
a, a:link, a:visited { text-decoration: none; color: #009; }
a:hover, a.active { color: #ddd; }

/* ====================  Tablas   */
table {
  margin: 1em  auto;
  border-spacing: 2px;     /*  separa/junta celdas  */
  table-layout: fixed;   /*  fija ancho/alto de celdas */
}
td {
  background: rgba(255,255,255,0.1);
  text-align: center;
  border: 1px solid #333;
  width: 3em;
  height: 3em;
  font-size: 2.5em;
}

/*--- Fija espacio entre celdas (con 0 las pone unidas)*/
/*border-spacing: 0;*/

/*--- Fija el ancho/alto de celdas (con width y height) */
/*table-layout: fixed;*/

/*--- Fija borde separado o no (default -> separate)*/
/*border-collapse: collapse;*/

/* ====================  Formularios   */
form {
    margin: 0.5em 0;
    padding: 1em;
    /*font: 1.1em georgia;*/
}
input,button {
    margin: 10px 4px;
    text-align: center;
    max-width: 75%;
    padding: 0.2em 1em;
}


/* ##########  RESPONSIVE   */
/* ====================  Imagen responsive */
.img-resp { max-width : 98%; height: auto; }