@charset "utf-8"; /* Formateamos el tamaño de letra y la fuente para todo el documento */ * { font-family: "Martel Sans", verdana; font-weight: 300; } /* Utilizamos FLEXBOX para definir como contenedor flexible, determinamos la dirección de los elementos contenidos en y la alineación de éstos (más detalles en cada línea)*/ body { display: flex; /* Definimos como contenedor flexible */ display: -moz-flex; /* Definimos como contenedor flexible; hack para Firefox */ display: -ms-flex; /* Definimos como contenedor flexible; hack para IE */ display: -webkit-flex; /* Definimos como contenedor flexible; hack para Chrome y Safari */ flex-direction: column; /* Definimos la dirección de los elementos de la caja flexible */ -moz-flex-direction: column; /* Definimos la dirección de los elementos de la caja flexible; hack para Firefox */ -ms-flex-direction: column; /* Definimos la dirección de los elementos de la caja flexible; hack para IE */ -webkit-flex-direction: column; /* Definimos la dirección de los elementos de la caja flexible; hack para Chrome y Safari */ align-items: center; /* Definimos la alineación de los elementos dentro de la caja flexible */ -moz-align-items: center; /* Definimos la alineación de los elementos dentro de la caja flexible; hack para Firefox*/ -ms-align-items: center; /* Definimos la alineación de los elementos dentro de la caja flexible; hack para IE*/ -webkit-align-items: center; /* Definimos la alineación de los elementos dentro de la caja flexible; hack para Chrome y Safari*/ width: 100%; } /* FORMATOS DE BOTÓN */ /* Formatos para botón en estado normal */ #boton1, #boton2 { text-shadow: 0px 1px 0px #ffffff; background-color:#ffffff; border: 2px solid #dcdcdc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: inset 0px 1px 0px 0px #ffffff; -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; color: #666666; cursor:pointer; font-weight: 500; height: 41px; padding-top: .5em; padding-right: 2em; padding-bottom: .5em; padding-left: 2em; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; width: 220px; } /* Ocultamos boton2 por defecto (luego lo mostraremos con js *ver html*) */ #boton2 { display: none; } /* Formatos para botón cuando ratón pasa por encima */ #boton1:hover, #boton2:hover { background-color: #f6f6f6; border-color: #97c4fe; } /* Formatos para botón cuando se clica en el botón */ #boton1:active, #boton2:active { position: relative; top: 1px; } /* FIN FORMATOS BOTÓN */ /* FORMATOS FOOTER */ /* Igual que en el utilizamos FLEXBOX para definir