/*Responsive Media Queries
(c) 2016 Javier Mosqueda Released under GPLv2 General Public License*/

/* GENERALES */

@font-face {
  font-family:'opensans';
  src: url(fonts/opensans.otf);
}
@font-face {
  font-family:'bebas';
  src: url(fonts/BebasNeue-Regular.otf);
}
@font-face {
  font-family:'bebaslight';
  src: url(fonts/BebasNeue-Light.otf);
}
@font-face {
  font-family:'slimjim';
  src: url(fonts/SlimJim.ttf);
}

body {
  font-family:'opensans';
  margin:0px;
  padding:0px;
}

  p.serverinfo {
    margin:0px;
    font-size:7pt;
    font-family:monospace;
    color:#999;
  }
  img.logo#edu {
      cursor:pointer;
      width:100px;
  }
  table.titulo {
      width:100%;
      background-color:#cfd;
      font-size:40pt;
      border:0px solid blue;
  }
  table.titulo tr td {
      border:0px solid red;
      text-align:left;
      padding-left:10px;
      border:0px solid red;
      position:relative;
      transition:font-size 0.5s, width 0.5s;
      vertical-align:middle;
  }
  table.titulo tr td img.logo {
      position:relative;
      width:95%;
      transition:width 0.5s;
      display:inline-block;
      margin-top:5px;
  }
  
  table.titulo tr td {width:10%; padding:0px; text-align:center; color:#008; text-shadow:2px 2px 4px #444}
  table.titulo tr td+td{width:50%; padding-left:10px; text-align:left}
  table.titulo tr td+td+td{width:auto; text-align:right; padding-right:10px}

  table.titulo tr td div {
     font-size:12px;
     color:#444;
     font-style:italic;
     font-weight:normal;
     text-align:right;
  }
  table.titulo tr td div a {
    font-family:monospace;
    color:#008;
    text-decoration:none;
    display:inline-block;
    padding:2px;
  }
  table.titulo tr td div a:hover {
    color:#f00;
    background-color:#ccc;
  }
  /* Menu Bar tiene una lógica especial que se liga a Banner, Ver los selectores de Banner para entender las ligas*/
  div.menubar {
    position:relative;
    background-color:#666;
    font-size:12pt;
    padding:0px;
    height:340px;/* 35 para la barra de menu y 300 para el banner inmediatamente abajo y 5 de borde */
    color:white;
  }
  div.menubar a {
    font-size:12pt;
    color:white;
    vertical-align:baseline;
    background-color:#444;
    display:inline-block;
    height:20px;
    padding:4px;
    margin-top:4px;
    border-radius:10px;
    text-decoration:none;
  }
  div.menubar a:hover {
    color:red;
  }
  /* COMPLEMENTO de Menubar, Importan LAS POSICIONES de cada cual para usar el operador VECINO inmediato + */
  div.menubar  div { /* DIV hijo de menubar */
    position:absolute;
    top:35px;
    left:0px;
    width:100%;
    height:295px;
    background-position:left 0px;
    border:none;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition:  opacity 1s linear, background-position 3s linear;
    
  }
  
  div.menubar div ~ a + div { /* Luego del primer DIV bajo menubar, todos los vecinos DIV inmediatos a A */
    position:absolute;
    top:35px;
    left:0px;
    width:100%;
    height:295px;

    background-size:auto 300px;
    background-position:left top;
    background-image:url(imagenes/bosque-300.jpg);
    border:none;

    opacity:0;

    -webkit-transition: opacity 0.5s linear, background-position 1s linear;
    -moz-transition: opacity 0.5s linear, background-position 1s linear;
    transition:  opacity 0.5s linear, background-position 1s linear;
    z-index:10;
    padding-bottom:3px;
  }
  div.menubar div ~ a + div span {
    color:#068;
    font-size:22pt;
    box-shadow: 5px 5px 5px #444;
    text-shadow: 2px 2px 2px #666;
    display:inline-block;
    background-color:#ccc;
    padding:5px;
    margin-top:1%;
    margin-left:2%;
    margin-right:2%;
    border-radius:10px;
    opacity:0.8;
    transition:font-size 0.5s, width 0.5s;
  }
  div.menubar div ~ a + div div {
    color:#000;
    font-size:16pt;
    box-shadow: 5px 5px 5px #444;
    text-shadow: 2px 2px 2px #666;
    display:inline-block;
    background-color:#ccc;
    background-size:auto auto;
    padding:5px;
    margin-top:30px;
    margin-left:2%;
    width:auto;
    height:70%;
    border-radius:10px;
    opacity:0.9;
  }
  div.menubar div ~ a + div div span {
    font-size:12pt;
    font-weight:bold;
    border:1px solid #666;
    color:#080;
  }
  
  div.menubar div ~ a + div div div {
    position:relative;
    margin-left:1px;
    top:5px;
    border:1px solid #444;
    height:auto;
    display:inline-block;
    margin-top:10px;
    font-size:8pt;
    display:inline-block;
    width:auto;
    vertical-align:top;
  }
  div.menubar div ~ a + div div div.boton {
    top:3px;
  }
  div.menubar div ~ a + div div div.boton input {
    margin-top:3px;    
    font-weight:bold;
    font-size:16pt;
  }  
  div.menubar div ~ a + div div div.boton input:hover {
    color:#f00;
  }
  
  div.menubar div ~ a + div + div {
    position:absolute;
    top:250px;
    left:0px;
    padding:10px;
    width:80%;
    height:50px;
    margin-left:5%;
    background-color:white;
    border-radius:20px;


    color:#068;
    font-size:22pt;
    box-shadow: 5px 5px 5px #444;
    text-shadow: 2px 2px 2px #666;

    opacity:0;

    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition:  opacity 1s linear;
    z-index:11;
    
  }
  
  div.menubar div ~ a:hover + div ,div.menubar div ~ a.magnet + div{
    opacity:1;
  }
  
  /* La clase magnet, sirve para que al sacar el mouse de la zona de "hover", se retenga su estilo, desafortunadamente requiere JS */

  
  
  
  /* la idea de un contenedor es para que los hijos que estén dentro tengan un marco de referencia, en particular se inició con la finalidad de que los hijos queden alineados con la parte superior del texto TEXT-TOP para el atributo VERTICAL-ALIGN */
  div.contenedor {
    padding:0px;
    margin:0px;
  }
  
  div.principal {
    background-color:#eee;
    font-size:12pt;
    vertical-align:text-top;
    margin:0px;
    padding:5px;
    display:inline-block;
    text-align:justify;
    border-right:4px solid #fe6;
    border-bottom:none;
  }
  div.principal div {
    visibility:visible;
  }
  div.principal div span.img, div.principal div span.img2 {
      width:60%;
      border:1px solid #666;
      box-shadow:2px 2px 4px #444;
      padding:10px;
      margin:5px;
      font-size:10pt;
      font-style:italic;
      display:inline-block;
      text-align:center;
      position:relative;
      border-radius:15px;
      float:right;
      transition:width 1s;
  }
  
  div.principal div span.img2{
      width:50%;
  }
  
  
  div.principal div span.img img, div.principal div span.img2 img  {
      position:relative;
      display:block;
      width:100%;
      border:black;
      border-radius:10px;
      transition:width 2s;
      
  }
  div.principal div.oculto {
    border:1px solid red;
    visibility:hidden;
    height:0px;
    overflow:hidden;
  }
  table.captura tr td {
      font-family:'opensans';
      font-size:10pt;
      font-weight:bold;
      width:80px;
  }
  table.captura tr td+td {
      font-weight:auto;
  }
  table.captura tr td span.gracias {
      font-size:16pt;
      color:#f64;
      text-shadow:3px 3px 5px #444;
  }
  table.captura tr td input[type="text"] {
    border-radius:5px;
    padding:2px;
    background-color:#9fc;
  }
  table.captura tr td input[class="cifra"] {
    text-align:right;
    background-color:#f9c;
  }
  table.captura tr td input[type="button"] {
      background-color:#999;
      color:#000;
  }
  div.principal div p {
     margin-left:10px;
     margin-top:5px;
  }

    div.principal div p a {
      color:#800;
      background:none;
  }
  div.principal div p a:hover {
      color:#f00;
  }
  
  
  div.principal div ul {
     margin-left:20px;
     margin-top:5px;
     font-family:monospace;
     font-size:10pt;
     color:#008;
  }
  div.principal div ul li i {font-size:85%; color:#080}
  div.principal div ol {
      list-style-type:lower-alpha;
      color:#008;
      font-family:monospace;
      margin-left:20px;
  }

  div.principal div h1 {
     font-size:20pt;
     margin:0px;
     text-align:left;
  }
  
  div.secundaria {
    background-color:#fff;
    font-size:8pt;
    vertical-align:text-top;
    margin:0px;
    padding:5px;
    display:inline-block;
    text-align:justify;
  }
  div.secundaria h1 {
     font-size:14pt;
     margin:0px;
  }
  div.secundaria p {
    margin-left:10px;
    margin-top:5px;
  }
  div.secundaria p a{
    color:#00f;
  }
  
  div.fondo {
    background-color:#444;
    color:#fff;
    font-size:8pt;
    vertical-align:text-top;
    margin:0px;
    padding:5px;
    display:block;
    text-align:justify;
  }
  div.fondo div {
      border:1px solid #ccc;
      border-radius:10px;
      vertical-align:text-top;
      padding:5px;
      margin-right:5px;
      display:inline-block;
      margin-bottom:5px;
      width:47%;
      column-width:48%;
      column-count:2;
      column-rule:1px solid #666;
      
  }
  div.fondo div h1 {
    margin:0px;
  }
  
  div.fondo div p {
    display:block;
    width:auto;
    text-align:justify;
    margin-left:10px;
    margin-top:5px;
    vertical-align:text-top;
  }
  div.fondo div p b {
    color:#99f;
  }
  div.fondo div p a{
    color:#ffc;
    font-weight:bold;
  }
  div.fondo div p a:hover{
    color:#f66;
  }
 div.secundaria p a:hover {
   color:#f00;
 }  
  
  
  /* PRIMER TIPO de menús, las opciones o comandos cambian de dimensión */
  div.menu {
    display:inline-block;
    vertical-align:text-top;
    width: 90px;
    padding:0px;
    margin:0px;
    padding-left:5px;
    height: 25px;
    background:#800;
    border-radius:30px;
    color:#fff;
    overflow:hidden;
    -webkit-transition: width 1s, height 1s, padding-left 1s, -webkit-transform 1s;
    transition: width 1s, height 1s, padding-left 1s, transform 1s;
  }
  div.menu big {
    vertical-align:-2px;
    font-size:18pt;
    font-weight:bold;
  }
  div.menu:hover {
    padding-left:15px;
    width: 500px;
    height: 120px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

/* SEGUNDO TIPO DE MENU  este no tiene transición (aún) */  
  div.men {
    background-color:#06f;
    font-family:'opensans';
    font-size:14pt;
    display:inline-block;
    color:#fff;
    padding-left:5px;
    padding-right:5px;
    opacity:0.5;
    border-radius:5px;
    -webkit-transition: height 1s;
    transition: all 1s linear;
  }
  div.men big {
    font-weight:bold;
    font-size:18pt;
    vertical-align:-2px;
  }
   div.men b {
    display:none;
  }
 div.men:hover {
    opacity:1;
  }
 div.men:hover b {
    display:inline-block;
  }
  
  div.men > div {
    margin-left:20px;
    font-size:80%;
    display:none;
  }

  div.men div a {
    text-decoration:none;
    color:#ffc;
  }
  
  div.men:hover div {
    display:block;
  }
  div.men:hover div > div {
    display:none;
    margin-left:20px;
    font-size:80%;
  }
  div.men:hover div:hover > div {
    display:block;
  }
  div.men:hover div a:hover {
    color:red;
    font-weight:bold;
    background-color:#ddd;
  }
  
input[type="button"] {
    background-color:#008;
    border-radius:10px;
    box-shadow:3px 3px 5px #999;
    color:#fff;
    padding:3px;
    padding-left:7px;
    padding-right:7px;
    font-size:12px;
    font-weight:bold;
    
}
#ubicacion, select{
    background-color:#ffc;
    border-radius:10px;
    box-shadow:3px 3px 5px #999;
}
input[type="button"]:hover {
    background-color:#0ff;
    border-radius:10px;
    box-shadow:3px 3px 10px #666;
    color:#444;
    
}

  
  
/* MEDIA QUERIES o situaciones condicionales partiendo de la base GENERALES arriba*/  
  
@media screen /*telefonos*/
and (min-width:0px) 
and (max-width:480px) {
  table.titulo {
    font-size:20pt;
  }
  table.titulo tr td {width:15%}
  table.titulo tr td+td{width:40%}
  table.titulo tr td+td+td{width:auto}

  table.titulo tr td div {
      font-size:10pt;
  }

  div.menubar a {
    font-size:10pt;
  }
  
  div.menubar div ~ a + div span {
      font-size:16pt;
      width:60%;
  }
  
  div.menubar div ~ a + div div {
    width:90%;
  }
  div.menubar div ~ a + div div span {
    width:auto;
  }
  
  

  
  
  div.principal {
    width:95%;
    border-right:none;
    border-bottom:4px solid #fe6;
  }
  div.principal div span.img, div.principal div span.img2 {
      width:90%;
  }
  
  
  div.secundaria {
    width:95%;
  }
  div.fondo div {
    width:95%;
    column-width:95%;
    column-count:1;
  }
  
}
@media screen /*Telefonotes*/
and (min-width:480px) 
and (max-width:768px) {
  table.titulo {
    font-size:25pt;
  }
  table.titulo tr td {width:15%}
  table.titulo tr td+td{width:40%}
  table.titulo tr td+td+td{width:auto}

  table.titulo tr td div {
      font-size:12pt;
  }
  div.menubar div ~ a + div span {
      font-size:16pt;
  }
  div.menubar div ~ a + div div {
    width:80%;
  }  
  
    img.logo#edu {
  }

  
  div.principal {
    width:95%;
    border-right:none;
    border-bottom:4px solid #fe6;
  }
  div.secundaria {
    width:95%;
  }
  div.fondo div {
    width:46%;
    column-width:95%;
    column-count:1;
  }
  
}
@media screen /*Tablets*/
and (min-width:769px) 
and (max-width:1000px) {
  table.titulo {
    font-size:30pt;
  }
  table.titulo tr td div {
      font-size:14pt;
  }
  div.menubar div ~ a + div div {
    width:70%;
  }  
  
    img.logo#edu {
  }

  
  
  
    div.principal {
    width:80%;
}
  div.secundaria {
    width:15%;
  }
  div.fondo div {
    column-width:95%;
    column-count:1;
  }

}
@media screen /*Monitores*/
and (min-width:1001px) 
and (max-width:1200px) {
  table.titulo {
    font-size:35pt;
  }
  table.titulo tr td div {
      font-size:16pt;
  }
  div.menubar div ~ a + div div {
    width:60%;
  }  
  
  img.logo#edu {
  }
  
  
    div.principal {
    width:70%;
  }
  div.secundaria {
    width:25%;
  }
}
@media screen /*Monitores Grandes*/
and (min-width:1201px) {
  table.titulo {
    font-size:45pt;
  }
  table.titulo tr td div {
      font-size:16pt;
  }
  div.menubar div ~ a + div div {
    width:50%;
  }  
  img.logo#edu {
  }
  
  div.principal {
    width:80%;
  }
  div.secundaria {
    width:16%;
  }
}