        @namespace xf url("http://www.w3.org/2002/xforms");
        @namespace url("http://www.w3.org/1999/xhtml");

        body {
            font-size: 75%;
            font-family: sans-serif;
        }

        div {
            padding: 5px 0px 5px 0px;
            vertical-align: top;
        }

        xf|input, 
        xf|secret, 
        xf|textarea, 
        xf|output, 
        xf|trigger, 
        xf|submit,
        xf|select,
        xf|select1 {
            display: table-cell;
            vertical-align: bottom;
            line-height: 1em;
            padding: 0px 5px 0px 5px;
        }

        xf|input > xf|label, 
        xf|secret > xf|label, 
        xf|textarea > xf|label, 
        xf|output > xf|label, 
        xf|trigger > xf|label, 
        xf|submit > xf|label,
        xf|select > xf|label,
        xf|select1 > xf|label {
            display: table-caption;
            white-space: nowrap; /* avoids word wrapping of labels */
            text-align: left;
            font-weight: bold;
            width: 100%;
        }

        xf|group {
            display: table-cell;
            line-height: 1em;
            vertical-align: top;
            margin: 5px; /* doesn't work; I guess, because of display: table-cell; */
            padding: 5px;
            border-collapse: collapse;
            border: 1px dashed grey;
        }

        xf|group > xf|label {
            display: table-caption;
            font-weight: bold;
            text-align: center;
            background-color: #cccccc;
            margin-bottom: 7px;
            padding: 3px 0px 3px 0px;
            width: 100%;
        }
         
        *:required {
            background-color: yellow;
        }
         
        *:invalid  {
            background-color: pink;
        }
