/*
Reglas para trabajar con CSS
1) Primero se definen los estilos para ETIQUETAS html. por ejemplo : header, footer, div, a, p, etc.
2) Despues se definen los estilos para IDENTIFICADORES (id), los id's son elementos unicos en el html,
en el css se declaran con el simbolo de # ejemplo: #nombre-id{ estilos } y en el html se llaman
mediante el atributo id ejemplo :
3) Al fnal se definen los estilos para las CLASES (class), las clases son elementos que se pueden
repetir 'n' veces en el html, en el css se declaran con el simbolo de . ejemplo : .nombre-clase{ estilos }
y en el html se llaman mediante el atributo class, ejemplo :
4) Todos los estilos se ordenan conforme van apareciendo en la disposicion del html, teniendo en cuenta
la prioridad anterior, es decir, primero ETIQUETAS, luego IDENTIFICADORES y al final las CLASES
5) Los atributos se declaran de la siguiente forma : { atributo:valor1; atributo:valor2; ...atributoN:valorN; }
6) Todos los atributos se ordenan alfabeticamente, por ejemplo si tengo width, color, display
entonces el orden seria primero color, luego display y al final width
7) Si tenemos estilos para el comodin *, o para las etiquetas html y/o body, estos estilos son los
primeros en definirse.
8) En el body debemos declarar un tamaņo de fuente global.
9) Si tenemos estilos para resetear elementos html, estos iran antes de cualquier estilo.
*/
/* reseteo universal */
* {
border: 0;
margin: 0;
padding: 0;
}
@font-face {
font-family: "Chalet";
src: url("../fonts/Chalet.eot");
src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),
url("../fonts/Chalet.woff") format("woff"),
url("../fonts/Chalet.ttf") format("truetype"),
url("../fonts/Chalet.svg#Chalet") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Pecita";
src: url("../fonts/Pecita.eot");
src: url("../fonts/Pecita.eot?#iefix") format("embedded-opentype"),
url("../fonts/Pecita.woff") format("woff"),
url("../fonts/Pecita.ttf") format("truetype"),
url("../fonts/Pecita.svg#Chalet") format("svg");
font-weight: normal;
font-style: normal;
}
/* 16px = 12pt = 100% = 1em */
body {
/*
background-color: #CCCCCC; /* fondo plomo
*/
width: 100%;
}
section#menubajo_contenedor {
/*
background-color: #fff; /* fondo plomo
border-radius: 5px;
box-shadow: 5px 5px 5px 5px rgba(53,72,110,.5);
display:block;
width: 98%;
min-height: 110px;
padding: 10px 10px 10px 10px;
margin: -25px -6px 5px -23px;
*/
margin: -25px 1px 5px -23px;
}
article#menu-bajo {
/*
background: -webkit-gradient(linear, left top, left bottom, from(#2B6145), to(#ffffff));
background: -moz-linear-gradient(top, #D7E9F3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
background-color: #2B6145; /* fondo verde
background-color: #34466D; /* fondo Azul
line-height: 16px;
margin: 1px 1px 1px 28px;
padding: 1px 1px 1px 10px;
text-align: left;
*/
background-color: #000030; /* fondo Azul */
border-radius: 0px;
box-shadow: 5px 5px 5px 5px rgba(53,72,110,.5);
font-color: #fff; /* color blanco */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 36px;
margin: 1px 1px 1px 28px;
width: 98%; /* ancho del header (titulo) */
line-height: 14px;
padding: 1px 1px 1px 1px;
text-decoration: none;
}
article#menu-bajo ul { /* le quitamos los puntos de la izquierda al Ul */
list-style: none;
}
article#menu-bajo li {
/*
padding: 8px 3px 8px 3px;
*/
display: inline-block;
padding: 8px 3px 8px 3px;
vertical-align: top; /* arriba (al tope) del bloque */
text-decoration: none;
}
article#menu-bajo a {
/*
font-family: "Pecita", Helvetica, Verdana;
text-rendering: optimizelegibility;
padding: 6px 16px 6px 16px;
*/
border: 1px solid #fff;
border-radius: 4px;
color: #FFF;
display: block;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
padding: 6px 13px 6px 13px;
}
article#menu-bajo a:hover {
border-radius: 8px 8px 24px 24px;
color: #3994AE; /* celeste azulado */
-ms-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/*
#video7_1024 {
display:block;
}
*/
#video7_1024 {
display: block;
}
/* manejo de Responsive Web Design (media cuery) */
/*
@media screen and (min-width: 921px) and (max-width: 1080px) {
}
@media screen and (min-width: 620px) and (max-width: 920px) {
}
@media screen and (min-width: 469px) and (max-width: 619px) {
}
@media screen and (min-width: 318px) and (max-width: 468px) {
}
@media screen and (min-width: 17px) and (max-width: 317px) {
}
*/
@media screen and (max-width: 1024px) { /* Negro */
#video7_1024 {
/*
*/
display: none;
}
article#menu-bajo a {
/*
*/
font-size: 13px;
padding: 6px 3px 6px 3px;
}
}
@media screen and (max-width: 768px) { /* Rojo */
/*
margin: 5px -4px 5px -3px;
padding: 6px 1px 6px 1px;
*/
article#menu-bajo a {
font-size: 12px;
margin: 5px -4px 5px -6px;
padding: 6px 0px 6px 0px;
}
}
@media screen and (max-width: 640px) { /* Celeste */
article#menu-bajo a {
/*
padding: 6px 1px 6px 1px;
margin: 5px -6px 5px -7px;
margin: 5px -6px 5px -5px;
margin: 5px -6px 5px -2px;
margin: 5px -6px 5px -3px;
*/
font-size: 10px;
margin: 5px -6px 5px -4px;
padding: 6px 0px 6px 0px;
}
}
@media screen and (max-width: 480px) { /* Plomo */
section#menubajo_contenedor {
/*
margin: 160px -7px 5px -24px;
*/
margin: 160px -7px 5px -24px;
}
article#menu-bajo a {
/*
padding: 6px 1px 6px 1px;
*/
font-size: 13px;
margin: 5px 0px 0px -2px;
padding: 6px 0px 6px 0px;
}
}
@media screen and (max-width: 320px) { /* Blanco */
section#menubajo_contenedor {
/*
margin: 500px -7px 5px -24px;
*/
margin: 20px -7px 5px -24px;
}
article#menu-bajo a {
/*
*/
font-size: 11px;
padding: 2px 1px 2px 2px;
}
}