#global       /* punto . es class y almohadilla # es id*/

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizzing: border-box;
-ms-box-sizzing: border-box; 
box-sizing: border-box; }

* {max-width: 1300px}

    body {
        margin:5px 0;
        padding:0;
        font: 0.8em Verdana;
        color: #808080;
        line-height: 1.4em; 
        background: repeat scroll 0 0 #F8F9DB;
        height: auto;
      }
     
      h1, h2, h3, h4, h5, h6
  {
        color:  #6d6a6a;
        padding: 0px 10px 0px 10px; 
        text-decoration: none; 
        background: inherit; 
        line-height: 1.5em;  /*original 1.0 */
      }


      .col1 { width: 8.33%; }
      .col2 { width: 16.66%; } 
      .col3 { width: 25%; } 
      .col4 { width: 33.33%; }
      .col5 { width: 41.66%; } 
      .col6 { width: 50%; } 
      .col7 { width: 58.33%; }
      .col8 { width: 66.66%; } 
      .col9 { width: 75%; } 
      .col10 { width: 83.33%; }
      .col11 { width: 91.66%; } 
      .col12 { width: 100%; }

      .fila {
        width: 100%; 
        display: flex; 
        flex-wrap: wrap; 
        padding-bottom: 20px;
        } 

      h1 {font-size: 1.8em; font-weight: bold; text-align: center}
      h2 {font-size: 1.4em; font-weight: bold}
      h3 {font-size: 1.2em; }
      h4 {font-size: 1.0em; text-align: center} /*equivale a 16 pt */
      h5 {font-size: 0.8em; } /*equivale a 16 pt */
      h6 {font-size: 0.6em; text-align: center}  
      p 
      {
        font-size: 1.0em; /*equivale a 16 pt */
        font-weight: normal; 
        padding: 10px; 
        margin: 10px 10px 10px 10px; 
        font-weight: bold; 
        text-align: justify; 
        background: inherit;
      }


        a:link 
        {
          color: #0051ad;  
          background: inherit; 
          text-decoration: none;
        }
        a:visited {
          color: #9c24c0
        }
        a:hover {
          color: #B22222; 
          background: inherit;  
          text-decoration: underline;
        }
        a:active {
          color: #4d4b4b;
          font-size: 1.0em; 
    }

   
.img { 
  float: center; 
  padding: 10px; 
  margin: 15px 8px 15px 0; 
  color: #FFCC33; 
  text-decoration-color: #2186fa;
  border: 0px solid #e0e0e0; 
}

.img-centro {
  margin: 10px auto 10px;
  display: block;
}

/*Hoja de estilo de la web nueva*/ 

.arbol {
  width: 1300px;
  display:block;
  margin: 100px auto;
}

.arbol .generacion {
  float:left;
  width: 25%;
  height: 220px;
  position:relative;
}

.arbol .encabezado {
  width: 100%;
  height:50px;
  display: block;
  position:relative;
  margin:5px 0 50px;
}

.arbol .encabezadohijos {
  width: 100%;
  height:50px;
  display: block;
  position:relative;
  margin:5px 0 250px;
}

.arbol .hijos {
  width: 90%;
  height:auto;
  font-size: 1.2em;
  display: block;
  position:relative;
  margin:15px ;
  background-color: #F3E161;
}

.arbol .pareja {
  width: 90%;
  height:60px;
  font-size: 1.2em;
  color: #000000;
  display: block;
  position: relative;
  margin:80px 10px;
  background-color:#FAFBC6 ;
}

.arbol .padres {
  width: 90%;
  height:60px;
  font-size: 1.2em;
  display: block;
  position:relative;
  margin:20px 0;
  background-color: #E0F299;
}
.arbol .abuelos {
  width: 90%;
  height:25px;
  font-size: 1.2em;
  display: block;
  position:relative;
  margin:4px 0;
  background-color: #C6EB70;
}

 .arbol .bandera {
   width: 100%;
   height:30px;
   display: inline;
   position:relative;
   margin:45px ;
 }

 .arbol .datos {
  font-size: 0.6em;
  color:  #6d6a6a;
  display: inline;
  position:relative;
  }

.arbol p {
  line-height: normal;
  padding: 0 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}



  /*
  para asignar recuadro a cada nombre
  border:1px solid silver;
  eliminar los demás bordes
  */