/* estilo_form_elegante_simples.css
*******[ css externo ]********************************************************************
--- corpo do código html ---
*******[ formulário exemplo ]********************************************************************
O HTML
O código HTML do formulário é dado abaixo. Nós usamos o rótulo para cada campo de entrada, e envolvê-la em uma div.
*/
@charset "utf-8";
@font-face {
font-family: NOMovement;
src: url('fonts/No-move.ttf')
}
/*
Adicionando estilo ao formulário Layout do formulário: Podemos adicionar algum estilo para
formar o layout, por exemplo, podemos definir a largura da forma, cor de fundo, estilos de
borda, ea caixa de sombra etc Por exemplo:
*/
.form_elegante {
width: 750px;
padding: 10px;
background: #e3f3ff; /*#f0f0f0;*/
overflow:auto;
/* Border style */
border: 1px solid #87b2ed; /*#cccccc;*/
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #87b2ed; /*#cccccc;*/
-webkit-box-shadow: 2px 2px 2px #87b2ed; /*#cccccc;*/
box-shadow: 2px 2px 2px #87b2ed; /*#cccccc;*/
}
.titulo_pag_form {
margin-top: 0px;
display: block;
color: #3c4f59;
/*background-color: #c8cdcf; */
font-family: NOMovement, Arial, Helvetica, sans-serif;
font-size: 38px;
font-weight: bold;
text-decoration: none;
text-align: left;
/*position: relative;
width: 600px;*/
}
.subtitulo_pag_form {
margin-top: 0px;
display: block;
color: #7c8387;
background-color: #e1e4e6;
font-family: NOMovement, Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
text-decoration: none;
text-align: left;
position: relative;
/*width: 600px;*/
}
.simples_titulo {
margin-top: 0px;
display: block;
color: #6cc0f0;
background-color: #e1e4e6;
font-family: NOMovement, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-align: left;
position: relative;
/*width: 600px;*/
}
/*
MARCADORES:
O HTML tag é usado para associar um rótulo a um elemento de entrada. Cada um dos tag está
associada a exatamente um elemento. O atributo for para o tag deve ser igual ao id do
elemento de entrada relacionados. Podemos estilo do rótulo da seguinte forma:
*/
.form_label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
margin-right:10px;
font-weight: bold;
padding-top: 10px;
margin-right:10px;
text-align: right;
width: 160px;
line-height: 10px;
font-size: 15px;
}
/*
CAMPOS DE ENTRADA:
Na sequência é a classe de entrada para os campos de entrada. Em nosso formulário, temos
especificada largura de 300px para campos de entrada.
*/
.form_input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 350px;
color: #474545; /*#797979;*/
}
.form_radio{
font-family: Arial, Verdana;
font-size: 15px;
padding: 2px;
padding-top: 5px;
border: 1px solid #b9bdc1;
width: 50px;
color: #797979;
}
/*
EXIBINDO DICAS CAMPO SOBRE PASSE:
Como no demo você pode ver que quando o mouse passa sobre uma área de campo, a dica é
exibida. Isso é feito de uma forma simples. Nós podemos adicionar o texto dica de uma
classe, ao lado de cada campo de entrada. Inicialmente, a classe está escondido, como:
.hint{ display:none; } Em foco, podemos mostrar a classe dica
Devido à margin e absolute position , a classe dica é mostrado ao lado do campo de entrada.
*/
.form_field:hover #title {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 15px 5px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
/*
BOTÃO SUBMETER
Nós adicionamos o estilo de gradiente de fundo, o raio de fronteira e sombra, etc para
tornar o nosso botão enviar. A seguir está o código do botão:
*/
.form_button{
float: right;
margin-left:15px;
margin:10px 55px 10px 0;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
cursor:pointer;
color: #fff;
text-align: center;
text-shadow: 0 -1px 1px #64799e;
/* Background gradient */
background: #a5b8da;
background: -moz-linear-gradient
(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient
(linear, 0% 0%, 0% 100%,
from(#a5b8da), to(#7089b3));
/* Border style */
border: 1px solid #5c6f91;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Box shadow */
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
}
/* Alerta Erro
----------------------------------------------- */
/* Geral */
.form_alerta {
padding: 10px;
border: 1px solid gray;
border-radius: 3px;
margin: 5px;
font-size: 20px;
width: 740px;
}
.form_msg_error {
border-color: #e8273b;
color: #FFF;
background-color: #ed5565;
}
.form_msg_sucesso {
border-color: #87c940;
color: #000FFF;
background-color: #a0d468;
}
.form_msg_atencao {
border-color: #f4a911;
color: #000;
background-color: #f6bb42;
}
.form_msg_info {
border-color: #2f80e7;
color: #00FFF;
background-color: #5d9cec;
}