/* ------------------------------------------------------------------ * Fichero: encuesta.css * Objetivo: Hoja de estilos de Encuesta * Fecha: D.11.12.2016 * Autor: Pedro Reina <[email protected]> * Licencia: CC0 1.0 Universal * http://creativecommons.org/publicdomain/zero/1.0/ --------------------------------------------------------------------*/ /* -------------------------------- * Tipos de letra * ------------------------------*/ @font-face { font-family: texto; src: url('fuente/encode-r.ttf'); } @font-face { font-family: texto; src: url('fuente/encode-b.ttf'); font-weight: bold; } /* -------------------------------- * Body * ------------------------------*/ BODY { color: black; background-color: white; font-family: texto; font-size: 18px; margin: 10px; } /* -------------------------------- * Párrafos * ------------------------------*/ P.centrado { text-align: center; } /* -------------------------------- * DIV * ------------------------------*/ DIV.cuadro { margin-bottom: 10px; padding: 2px; border-style: solid; border-color: #ccc; border-width: 2px; } DIV.titulo { padding: 10px; background-color: #cacaff; text-align: center; font-size: 24px; } DIV.contenido { padding: 10px; } /* -------------------------------- * Campos de entrada de datos * ------------------------------*/ .dato { border: 1px solid #000; font-family: texto; font-size: 18px; background-color: white; } .dato:hover { border: 1px solid #A00; -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); } .dato:focus { border: 1px solid #C00; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); background-color: #FDFDFD; } /* -------------------------------- * Botones de orden * ------------------------------*/ .orden { border: 1px solid #000; font-family: texto; font-size: 18px; font-weight: bold; background-color: white; color: black; padding: 0 5px; } .orden:hover { border: 1px solid #A00; color: #A00; } /* -------------------------------- * Campos de datos y leyendas * ------------------------------*/ fieldset { border:1px solid #66F; margin-top: 10px; margin-bottom: 10px; } legend { padding-left: 10px; padding-right: 10px; color: #66F; font-weight: bold; border: 1px solid #66F; } /* -------------------------------- * Botones de selección * ------------------------------*/ .centrarad { text-align: center; } .rad { border: 1px solid black; width: 50px; margin: 4px; padding: 4px; display: inline-flex; display: -webkit-inline-flex; align-items: center; -webkit-align-items: center; flex-direction: column-reverse; -webkit-flex-direction: column-reverse; } .rad:hover { border: 1px solid #A00; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); } input[type=radio], label { display: block; width: 50px; text-align: center; } :checked + label { font-weight: bold; background-color: #EEE; color: #11F; text-shadow: 1px 1px #FFF; }