File: example/style.css

/* Namespace statement is necessary! */
@namespace xf url(http://www.w3.org/2002/xforms);

html {height:100%;}
body {
	margin:.5em;
	padding:.5em;
	font-family: "Trebuchet MS", "Bitstream Vera Serif", sans-serif;
	background-color:#dde;
	border:1px dotted grey;
	-moz-border-radius:.5em;
}

h1 {
	margin:0 0 1em 0;
	color:grey;
	font-style:italic;
	font-weight:normal;
	font-size:1.5em;
	border-bottom:1px dotted grey;
}

/* Styling XForms */
xf|*:invalid > input, xf|*:invalid > textarea { background-color: pink; }

xf|message[level="ephemeral"] {
	white-space:nowrap;
}

xf|*:required > label:before {
	color:red;
	content:"* ";
}

xf|input, xf|textarea {
	width:100%;
	clear:both;
	display:block;
	margin-bottom:.2em;
}
xf|input {
	height:1.5em;
}

xf|input > xf|label {
	width:30%;
	float:left;
}
xf|input.text > input {
	width:60%;
	float:left;
	border:1px solid grey;
	-moz-border-radius:.5em 0 .5em 0;
	padding:.2em .5em;
}
xf|input.date > input.xf-value {
	float:left;
	border:1px solid grey;
	-moz-border-radius:.5em 0 .5em 0;
	padding:.2em .5em;
}
xf|input.date > input[type="button"] {
	float:left;
	border-style:none;
	-moz-border-radius:0 .5em 0 .5em;
}
xf|input.date:invalid > input[type="button"] {
	background:transparent;
}

xf|textarea > xf|label {
	clear:both;
}
xf|textarea > textarea {
	width:90%;
	height:10em;
	border:1px solid grey;
	-moz-border-radius:.8em 0 .8em 0;
	padding:.2em .8em;
}

xf|* > button {
	-moz-border-radius:0 .5em;
	border:1px solid darkgreen;
	background-color:lightgreen;
}

/* Error-list */
ul.errorList {
	width:90%;
	color:red;
	margin:0;
	padding:0;
}
ul.errorList li {
	margin:0 0 .5em 0;
	padding:.5em;
	list-style-type:none;
	display:block;
	border:1px dotted silver;
	-moz-border-radius:.8em 0 .8em 0;
}