/* ======================= ESTILO GENERAL DEL DOCUMENTO ==================== */

body {
   font-size: 1em;
   font-family: tahoma , helvetica, times new roman, times, verdana, arial, trebuchet ms;
   margin-top: 30px;
   margin-left: 3%;
   margin-right: 3%;
   margin-bottom: 100px;
   text-align: justify;
   cursor: auto;
   scrollbar-arrow-color: red;
   scrollbar-face-color: #0c3b8a;
   scrollbar-track-color: #ocffff; 
}
@body {
   background-color: #c0ffff; ! FONDO AZUL CLARO;
}
@body {
   background-color: silver; ! FONDO GRIS CLARO;
}
body {
   background-color: #ffffec; ! FONDO AMARILLO-MARRÓN CLARO;
}
@body {
   background-color: #dcd8cc; ! FONDO GRIS-MARRÓN CLARO (SEPIA);
}
@body { 
   background-color: #ccffcc; ! FONDO VERDE CLARO;
}
@body {
   color: black; ! TEXTO COLOR NEGRO;
}
@body {
   color: #402010; ! TEXTO MARRÓN OSCURO, apropiado para fondo sepia ;
}
body {
   color: #800000; ! TEXTO ROJO OSCURO ;
}
h1 {
   font-size: 2.0em;
   color: red;
   text-decoration: underline;
   text-align: left;
}
h2 {
   font-size: 1.7em;
   color: purple;
   text-decoration: none;
   text-align: left;
}
h3 {
   font-size: 1.4em;
   color: blue;
   text-decoration: none;
}
b { ! TEXTO MORADO-GRUESO PARA RESALTAR PALABRAS;
   color: #660066;
}
@em { ! TEXTO MORADO PARA RESALTAR PALABRAS;
   color: #a00080;
}
em { ! TEXTO ROJO PARA RESALTAR PALABRAS;
   color: #ff0000;
}
pre { ! FUENTES MONOESPACIO;
   font-family:Lucida Console,Courier new,Courier;
   font-size:1em;
}
img { ! ESTABLECE IMÁGENES SIN BORDE;
   border: none;
}
blockquote { ! BLOQUE DE TEXTO ACOTADO (Para notas, citas, etc...);
   margin: 15px 0 20px 0;
   padding: 5px 20px;
   background: #F0F0F0;
   line-height: 1.5em;
   font-style: italic;
   font-size: 0.9em;
   color: #333333;
   letter-spacing:1px;
   border-left-width: 6px;
   border-left-style: solid;
   border-left-color: #cccccc;
   max-width: 75%;
}
@ blockquote { ! BLOQUE DE TEXTO ACOTADO (Para notas, citas, etc...);
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 20px;
   padding: 10px 10px 10px 10px;
   background: rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.2);
   line-height: 1.5em;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;
   font-size: 0.9em;
   color: #777;
   letter-spacing:1px;
}

/* ============== LINKS O ENLACES, primer estilo ============= */

a:link {
   color: blue;
   text-decoration: underline;
}
@a:link {
   color: blue;
   text-decoration: none;
}
@a:link {
   color: red;
   text-decoration: underline;
}
a:hover {
   color: #800000;
   text-decoration: underline;
}
a:visited {
   color: #006666;
   text-decoration: underline;
}

/* ============== LINKS O ENLACES, segundo estilo ============= */

@a:link {
 background-color: transparent;
 text-decoration: none;
 border-bottom: 2px solid #ff9800;
 transition: all 200ms;
}
@a:hover {
 background-color:#ff9800;
}
@a:visited {
 color: #006666;
 background-color: transparent;
 text-decoration: none;
 border-bottom: 2px solid #ff9800;
 transition: all 200ms;
}

/* ======== PARA LINKS A RECURSOS DENTRO DEL PROPIO DOCUMENTO ======== */

a:link.local {
   color: #8000c0;
}
a:hover.local {
   color: #800000;
   text-decoration: underline;
}

/* ==================== ESTILOS PUNTUALES ==============================
*
*   (usar como parámetros class en etiquetas html)
*/

.summary { ! BLOQUE DE TEXTO TIPO SUMARIO O RESUMEN (con letra normal y delimitado por dos líneas verticales);
  font-size:0.9em;
  font-weight:normal;
  font-style: italic; 
  line-height:1.5em;
  margin:50px 0 50px 0;
  border-left:2px solid #1187B8;
  border-right:2px solid #1187B8;
  padding:0 20px;
  display:block;
}
.listado { ! EMPLEAR PARA LISTADOS;
   font-size: 1em;
   color: #aa0000;
   font-family:times new roman, times, helvetica, trebuchet ms;
   margin-left:40px;
   text-align: left;
}
.negrita { ! LETRA NEGRITA (GRUESA);
   font: bold 1em arial;
}
.cita {  ! EMPLEAR PARA CITAS TEXTUALES;
   font-size: 1em;
   color: black;
   clear: both;
   font-style: italic;
}
.autor { !PARA FINAL DEL DOCUMENTO : NOMBRE AUTOR Y OTROS;
   font-size: 0.85em;
   color: red;
   font-weight: normal;
   clear: both;
}
.autor a {  !PARA ENLACES (LINKS) EN FINAL DEL DOCUMENTO, referidos al autor;
   color: #0000ff;
   font-style: italic;
   text-decoration: underline;
}
.letra_espaciada {  ! INTRODUCE UN ESPACIADO ENTRE CARACTERES;
   font-size: 1em;
   color: black;
   clear: both;
   letter-spacing: 4px;
}
.pequeña {  ! HACE LA LETRA EMPLEADA UN POCO MÁS PEQUEÑA;
   font-size: 0.75em;
}
.marginleft {  ! AÑADE UN MARGEN A LA IZQUIERDA;
   margin-left:40px;
}
.marginleft2 {  ! AÑADE UN MARGEN DE MAYOR TAMAÑO A LA IZQUIERDA;
   margin-left:80px;
}
.marginsides {  ! AÑADE UN MARGEN A LA IZQUIERDA Y A LA DERECHA;
   margin-left:40px;
   margin-right:80px;
}
.bordeimagen {  !AÑADE BORDE A LAS IMAGENES;
   padding: 2px;
   border: 3px solid #a9a9a9;	
}
.imgcoment {  !PARA LOS COMENTARIOS A PIE DE IMAGEN;
   font-size: 0.75em;
   @color: #000000;
}
.titulo {  !PARA EL TÍTULO DE ENCABEZADO DEL DOCUMENTO;  
   font-size: 2.2em;
   font-weight: bold;
   padding: 30px 60px;
   text-align: center;  
}
@.titulo {  !Usar para imprimir el documento html a formato pdf;
   color: #ff0000;
   background-color: #ffff00;
}
.titulo {
   color: #ffff00;
   background-color: #800000;
}
.hr1  {  ! PARA ETIQUETAS HR;
   color: violet;
   width: 80%;
}
.hr2  {  ! PARA ETIQUETAS HR;
   color: violet;
   width: 80%;
   border: 3px dashed;
}
.hr3  {  ! PARA ETIQUETAS HR;
   color: #66aa66;
   width: 90%;
   border: 2px solid;
}
.MsoNormal { ! FUENTE TÍPICA DE MICROSOFT OFFICE para generación de páginas html desde Microsoft Word;
   margin:0cm;
   margin-bottom:.0001pt;
   font-size:1em;
   font-family:"Times New Roman";
}
span.comment { ! RESALTA UNA PALABRA O FRASE CON COMENTARIO ASOCIADO que se muestra al pasar el puntero sobre ella. Para etiquetas SPAN con el comentario escrito en el parámetro title;
   cursor: help;
   border-bottom: #ff0000 1px dashed;
   color: #ff0000;
}
@span.comment {
   background-color: #a0ffff;
}

/* ======================= COLORES DE TEXTO Y DE FONDO ======================
*
*   (Para etiquetas P, DIV, SPAN, tablas, etc...)
*
*/

.span1 { !TEXTO ROJO SOBRE FONDO AMARILLO CLARO;
   background-color: #ffff88;
   color: #ff0000;
}
.span2 { !TEXTO AMARILLO SOBRE FONDO GRIS-NEGRO;
   background-color: #303030;
   color: #ffff00;
}
.span3 { ! TEXTO AZUL SOBRE FONDO GRIS;
   background-color:#dddddd;
   color:#0000ff;
}
.span4 { ! TEXTO BLANCO SOBRE FONDO NEGRO, TIPO MS-DOS;
   background-color:#000000;
   color:#ffffff;
}
.span5 { ! TEXTO VERDE SOBRE FONDO NEGRO, TIPO MS-DOS;
   background-color:#000000;
   color:#00ff00;
}
.rojo { !TEXTO ROJO NORMAL;
   color: #ff0000;
}
.rojoosc { !TEXTO ROJO OSCURO;
   color: #800000;
}
.naranja  { !TEXTO NARANJA;
   color: #ff8000;
}
.verde { !TEXTO VERDE NORMAL;
   color: #00ff00;
}
.verdeosc { !TEXTO VERDE OSCURO;
   color: #006000;
}
.azul { !TEXTO AZUL NORMAL;
   color: #0000ff;
}
.azul2 { !TEXTO AZUL AGUA;
   color: #008888;
}
.azulosc { !TEXTO AZUL OSCURO;
   color: #0000c0;
}
.gris { !TEXTO GRIS MEDIO;
   color: #808080;
}
.marron { !TEXTO MARRÓN ROJIZO;
   color: #ac410f;
}
.magenta { !TEXTO ROSA-MAGENTA;
   color: #ff00ff;
}
.blanco { !TEXTO BLANCO;
   color: #ffffff;
}
.bgamarillo { ! TEXTO SOBRE FONDO AMARILLO;
   background-color: #ffff00;
}
.bgrojo { !TEXTO SOBRE FONDO ROJO NORMAL;
   background-color: #ff0000;
}
.bgverde { !TEXTO SOBRE FONDO VERDE NORMAL;
   background-color: #00ff00;
}
.bggris { !TEXTO SOBRE FONDO GRIS MEDIO;
   background-color: #808080;
}
.bgperla { !TEXTO SOBRE FONDO GRIS CLARO;
   background-color: #E0E0E0;
}
.bgcian { !TEXTO SOBRE FONDO AZUL CLARO - CYAN;
   background-color: #c0ffff;
}
.bgmagenta { !TEXTO SOBRE FONDO ROSA-MAGENTA;
   background-color: #ff00ff;
}
.bgblanco { !TEXTO SOBRE FONDO BLANCO;
   background-color: #ffffff;
}

/* ============================== TABLA PRETTY ===============================
*
*   Tabla de celdas normales, con bordes finos
*   Celdas gris perla , textos justificados
*   Usar en TABLE el parámetro class="prettytable"
*
*/

table.prettytable {
   background: #f9f9f9;
   margin: 1em 1em 1em 0px;
   border-right: #aaa 3px solid;
   border-left: #aaa 3px solid;
   border-top: #aaa 3px solid;
   border-bottom: #aaa 3px solid;
   border-collapse: collapse;
   font-size: 1em;
}
table.prettytable caption {
   font-weight: bold;
}
table.prettytable th {
   border-right: #aaa 2px solid;
   border-left: #aaa 2px solid;
   border-top: #aaa 2px solid;
   border-bottom: #aaa 2px solid;
   padding-right: 1em;
   padding-left: 1em;
   padding-bottom: 0.2em;
   padding-top: 0.2em;
   background: #d0d0d0;
   text-align: justify;
   font-size: 0.85em;
}
table.prettytable td {
   border-right: #aaa 2px solid;
   border-left: #aaa 2px solid;
   border-top: #aaa 2px solid;
   border-bottom: #aaa 2px solid;
   padding-right: 1em;
   padding-left: 1em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   text-align: justify;
}

/* =============================== TABLA NAVBOX ===============================
*
*   Tabla de celdas anchas, títulos sobre fondo lila
*   Celdas lila claro , textos centrados
*   Usar en TABLE el parámetro class="navbox"
*
*/

table.navbox {
    clear: both;
    text-align: center;
    font-size: 0.85em;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
    border-bottom: #aaa 1px solid;
    padding-right: 1px;
    padding-left: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin: 20px;
}
table.navbox th {
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    background: #aaaaff;
}
table.navbox td {
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    background: #ccccff;
}

/* ================================ TABLA RY ================================
*
*   Tabla de celdas normales, con bordes finos
*   Bordes rojos para la tabla, y negro para las celdas
*   Celdas TD amarillo claro, textos alineados a la derecha
*   Resalte de celda TD opcional, en fondo amarillo más oscuro y texto en color azul
*   Celdas TH fondo azul claro y texto azul oscuro
*   Usar en TABLE el parámetro class="ry"
*   Usar en TD el parámetro class="hl" para celdas a resaltar
*
*/

table.ry {
   border: red 2px solid;
   border-collapse: collapse;
   padding-right: 3px;
   padding-left: 3px;
   padding-top: 2px;
   padding-bottom: 1px;
   margin: 1.5em;
   background: #fffeaf;
   font-size: 1em;
   text-align: right;
}
table.ry caption {
   font-weight: bold;
}
table.ry th {
   border: 0px;
   padding: 5px;
   color: blue;
   background: aqua;
}
table.ry td {
   border: black 1px solid;
   padding-right: 10px;
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 3px;
}
table.ry td.hl {
   color: blue;
   background: yellow;
}

/* ============================== TABLA TABLE1 ===============================
*
*  Tabla de celdas normales, con bordes blancos, tanto para la tabla en sí como para las celdas.
*  Celdas TD azul claro, textos alineados a la izquierda.
*  Resalte de celda TD opcional, en fondo verde claro y texto en color rojo.
*  Celdas TH fondo negro y texto blanco.
*  Usar en TABLE el parámetro class="table1".
*  Usar en TD el parámetro class="hl1" para celdas a resaltar.
*
*/

table.table1 {
   margin: 1em 1em 1em 3px;
   border-right: #ffffff 3px solid;
   border-left: #ffffff 3px solid;
   border-top: #ffffff 3px solid;
   border-bottom: #ffffff 3px solid;
   border-collapse: collapse;
   padding-right: 3px;
   padding-left: 3px;
   padding-top: 3px;
   padding-bottom: 3px;
   font-family: tahoma,helvetica,verdana,arial;
}
table.table1 caption {
   font-weight: bold;
   color: #666666;
   text-align: center;
   font-size: 1em;
}
table.table1 th {
   border-right: #ffffff 2px solid;
   border-left: #ffffff 2px solid;
   border-top: #ffffff 2px solid;
   border-bottom: #ffffff 2px solid;
   padding-right: 1em;
   padding-left: 1em;
   padding-bottom: 0.2em;
   padding-top: 0.2em;
   background: #000033;
   color: #ffffff;
   text-align: center;
   font-size: 0.85em;
}
table.table1 td {
   border-right: #ffffff 2px solid;
   border-left: #ffffff 2px solid;
   border-top: #ffffff 2px solid;
   border-bottom: #ffffff 2px solid;
   padding-right: 1em;
   padding-left: 1em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   text-align: left;
   background: #aaffff;
   font-size: 0.85em;
}
table.table1 td.hl1 {
   color: red;
   background: #88ff88;
}

/* ====================== OTOS ESTILOS PERSONALES =====================
*
*  (Añadir a partir de aquí cualquier otra definición de estilo no contemplada
*  en las líneas anteriores y que necesitemos para algún documento HTML que
*  estemos creando o editando)
*
*/