form {
	/**
	* Formulário.
	*/
	position:relative;
	width:33em;
	margin:2em auto;
}
form > div.btn {
	/**
	* Contentor dos botões.
	*/
	margin-bottom:0;
	padding:1em 0 0 8em
}
label {
	/**
	* Campo.
	*/
	position:relative;
	display:block;
	margin:.1em 0;
	padding:.2em .5em .2em 7.5em;
	white-space:nowrap;	/* O Chrome por vezes lembra-se de passar o controlo para baixo do rótulo */
	z-index:1;
}
label > em {
	/**
	* Rótulo do campo.
	*/
	display:inline-block;
	width:7em;
	margin:0 0 0 -7em;
	font-style:normal;
	line-height:115%;
	vertical-align:middle;
}
label > em > span {
	/**
	* Indicação de campo obrigatório.
	*/
	position:absolute;
	padding:0 0 0 .2em;
	color:#f00;
	font-size:120%
}
label > input,
label > textarea,
label > select {
	/**
	* Formatação do controlo.
	*/
	display:inline-block;
	width:22em;
	vertical-align:middle;
}

/**
* <<SUPORTE PARA CAMPOS COM DICAS>>
* Ao colocar o campo e a dica no mesmo contentor (<SPAN>) consegue-se centrá-los
* verticalmente, o que no caso (raro) do rótulo ser mais alto, garante uma
* apresentação agradável.
*/
label > span {
	display:inline-block;
	vertical-align:middle;
	width:22em;	/* Sem isto, não centra verticalmente */
}
label > span > input {	width:22em	}
label > span > small {
	/**
	* A dica.
	*/
	display:block;
	margin:.2em 0 0 .5em;
	color:#666;
}


/**
* <<GRUPOS DE CAMPOS>>
*/
form > h2,
form > fieldset > legend {
	/**
	* Legenda que deve preceder cada grupo.
	*/
	margin:0 0 .3em -1em
}
form > label+h2,
form > label+fieldset > legend {
	/**
	* Os grupos (<DIV>s e <FIELDSET>s) definem margem no fundo; por isso, só
	* vale a pena definir margem no topo quando o <H2> não sucede a um grupo
	* formal.
	*/
	margin-top:.7em
}
form > div,
form > fieldset {
	/**
	* Grupos de campos.
	*/
	margin:0 0 .7em 0;
	padding:0;
	clear:both;
}


/**
* <<CHECKBOXES e RADIO BUTTONS>>
*/
form .chk {
	padding-left:7.8em;
	clear:both;
}
form > fieldset.chk > legend {	margin-left:-8em	}
form fieldset.chk > label {	padding-left:0	}
form label.chk > input,
form fieldset.chk > label > input {
	float:left;
	width:auto;
	margin:3px 5px 0 3px;
	padding:0;
	border:none;
}


/**
* <<FORMATAÇÃO DE MENSAGENS DE ERRO>>
*/
ins.err {
	/**
	* Mensagem de erro.
	*/
	display:block;
	margin:0 0 .4em 0;
	color:#722;
	text-align:center;
	text-decoration:none;
	clear:both;
}
label > ins.err {	margin-left:-7.5em	}
label+label.err > ins.err {
	/**
	* Definir margem de topo nos campos com erro que não são os primeiros do
	* grupo, de forma a realçá-los visualmente.
	*/
	margin-top:.6em
}
label.err input,
label.err textarea,
label.err select {
	margin:0;
	background:#fff8f8;
	border:2px solid #bf0e0e
}
label.err input:invalid,
label.err textarea:invalid,
label.err select:invalid {
	/**
	* Não pode ser fundido com o grupo anterior, porque os browsers que não
	* suportem a pseudo-classe ":invalid", iriam ignorar todo o grupo.
	*/
	margin:0;
	background:#fff8f8;
	border:2px solid #bf0e0e
}
html.JS ins.err {
	display:none;
	position:absolute;
}


/**
* <<ERROS DE GRUPO>>
*/
form .gerr > ins.err {	margin-top:1em	}
form h2+div > ins.err,
form fieldset.gerr > ins:not(:first-child).err {
	/**
	* Anular a margem de topo da mensagem de erro para grupos com legenda.
	*/
	margin-top:0
}
form .gerr {
	margin-right:-5px;
	padding-right:5px;
	border-right:3px solid #bf0e0e;
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
}
form .gerr input,
form .gerr textarea,
form .gerr select {
	background:#fff8f8;
}



/**
* <<FOCO>>
* (elemento colocado pelo Javascript por baixo da <LABEL> activa, para assinalar
* o campo actual.
*/
#foco-form {
	display:block;
	position:absolute;
	background:#fefae2;
	border:1px solid #ccc;
	opacity:.6;
	border-radius:6px
}


/**
* Desactivar formatação de campos onde a validação nativa falhou.
*/
:invalid,
:-moz-submit-invalid,
:-moz-ui-invalid
	{	box-shadow:none	}


/**
* Desactivar "spin buttons" automáticos no Webkit.
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
	{	-webkit-appearance:none	}
input.seqnum::-webkit-inner-spin-button {	-webkit-appearance:inner-spin-button	}
input.seqnum::-webkit-outer-spin-button {	-webkit-appearance:outer-spin-button	}


/**
* <<MENSAGEM DE ERRO APRESENTADA PELO JAVASCRIPT>>
*/
p.verr {
	/**
	* Contentor.
	*/
	position:absolute;
	overflow:hidden;
	max-width:20em;
	margin:0;
	padding:0 0 0 15px;
	font-size:100%;
	line-height:110%;
	color:#722;
	font-size:90%;
	text-decoration:none;
	z-index:10
}
p.verr > *:first-child {
	/**
	* Elemento com o texto.
	*/
	display:block;
	padding:.5em 1em;
	color:#fff;
	background:#480a11;
	border:1px solid #ae7c87;
	border-radius:5px;
	vertical-align:middle;
}
p.verr > span+span {
	/**
	* Seta à esquerda.
	*/
	position:absolute;
	top:50%;
	left:3px;
	width:13px;
	height:20px;
	margin:-10px 0 0 0;
	background:url(/imgs/vmsg-seta-esq.png) 0 center no-repeat;
}

/**
* Seta para cima.
*/
p.verr.cim {	padding:0 0 12px 0	}
p.verr.cim > span+span {
	top:auto;
	bottom:0;
	left:0;
	width:20px;
	height:13px;
	margin:0 0 0 -10px;
	background:url(/imgs/vmsg-seta-bx.png) 0 center no-repeat;
}

/**
* Seta para baixo.
*/
p.verr.bai {	padding:12px 0 0 0	}
p.verr.bai > span+span {
	top:0;
	left:0;
	width:20px;
	height:13px;
	margin:0 0 0 -10px;
	background:url(/imgs/vmsg-seta-cima.png) 0 center no-repeat;
}