@media screen 
{
	/*   */
	div.ShowMe
	{
	    border: blue thin dashed;
	    padding: 10px;
	}
	
	/* normal default font */
	body
	{
		font-family:"Trebuchet MS", Verdana, Sans-Serif; 
		font-size:x-small;
		background-color:#ffffff;
	}
	
	div.body
	{
		width:600px;
		border:1px;
	}
	
	div.viewPort
	{
		width:600px;
		height:500px;
		border:1px;
		margin:10px;
	}
	
	div.navBar
	{
		width:600px;
		border:1;
		background-color:light-blue;
	}

	xforms\:repeat.tutorial
	{
		display:block;
		border:1px;
	}

	xforms\:output.slideBody
	{
		overflow:auto;
	}

	.debug
	{
	    border: red thin dashed;
	    padding: 10px;
	    display: block;
	}



A:link
{
    COLOR: #990000
}
A:visited
{
    COLOR: #990000
}
BODY
{
    MARGIN: 10px;  /* margin left and right */
    FONT: 10pt Verdana,Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: white  /* background color */
}
DIV.menu A:link
{
    COLOR: #003366
}
DIV.menu A:visited
{
    COLOR: #003366
}
DIV.form
{
    BORDER-RIGHT: white 16pt solid;
    PADDING-RIGHT: 0pt;
    BORDER-TOP: white 16pt solid;
    PADDING-LEFT: 0pt;
    FONT-SIZE: 8pt;
    PADDING-BOTTOM: 0pt;
    MARGIN: 0px;
    BORDER-LEFT: white 16pt solid;
    WIDTH: 600px;
    PADDING-TOP: 0pt;
    BORDER-BOTTOM: white 16pt solid;
    BACKGROUND-COLOR: white
}
A.title
{
    TEXT-DECORATION: none
}
.testComment
{
    COLOR: silver
}
.copyright
{
    FONT: 10pt Verdana,Arial, Helvetica, sans-serif
}
xforms\:label
{
    /* width: 400px; causes table-like behaviour as the labels get a fixed length 
	however, also causes the Submit button to become extremel broad */
    FONT-WEIGHT: bold;
}

/* font for submit button */
xforms\:submit
{
    FONT-SIZE: 20px;
    FONT-FAMILY: Arial
}
H1
{
    COLOR: #000000
}
H2
{
    COLOR: #000000
}
H3
{
    COLOR: #000000
}

/* color and font of labels for groups */
H4
{
    MARGIN-TOP: 14pt;
    FONT-WEIGHT: bold;
    FONT-SIZE: 14pt;
    /* COLOR: #cfd7df */
    COLOR: black
}
.instructions
{
    FONT: 8pt Arial;
    COLOR: #000000
}
.dataEntryFields
{
    DISPLAY: block
}
.buttonblock
{
    DISPLAY: block
}

/* TESTING FOR DISPLAYING TABLE LIKE 
xforms\:group xforms\:input {
display: table-row;
}
xforms\:group xforms\:input>xforms\:label {
display: table-cell;
padding: .5em;
} */



/* color for ? */
xforms\:output.warning
{
    COLOR: red
}
xforms\:switch
{
    DISPLAY: block
}
xforms\:switch.ToggleEdit
{
    WIDTH: 100%
}

xforms\:group
{
    /* display: table; display the group like a table */
    PADDING-RIGHT: 0.5em;
    DISPLAY: block;
    PADDING-LEFT: 0.5em;
    PADDING-BOTTOM: 0.5em;
    PADDING-TOP: 0.5em
}
xforms\:repeat
{
    PADDING-RIGHT: 0.5em;
    DISPLAY: block;
    PADDING-LEFT: 0.5em;
    PADDING-BOTTOM: 0.5em;
    PADDING-TOP: 0.5em
}
xforms\:input
{
    /* display: table-cell;   display input field as a table row */
    display: table-row;
    DISPLAY: block;
    /* float: right; can be used to have more than 1 input per line */
    FONT-WEIGHT: bold
}

/*  testing 
xforms\:input > xforms\:label { display: table-cell; }
xforms\:input::value { border: thin black solid; display: table-cell; }
*/

xforms\:select1
{
    DISPLAY: block;
    FONT-WEIGHT: bold
}
xforms\:repeat HR
{
    BORDER-RIGHT: black thin dotted;
    BORDER-TOP: black thin dotted;
    MARGIN-TOP: -3px;
    BORDER-LEFT: black thin dotted;
    WIDTH: 100%;
    BORDER-BOTTOM: black thin dotted
}
HR
{
    BORDER-RIGHT: black thin dotted;
    BORDER-TOP: black thin dotted;
    MARGIN-TOP: -3px;
    BORDER-LEFT: black thin dotted;
    WIDTH: 100%;
    BORDER-BOTTOM: black thin dotted
}
xforms\:repeat xforms\:output
{
    MARGIN-TOP: -2px
}
xforms\:output
{
    MARGIN-TOP: -2px
}
.attention
{
    COLOR: red
}

/* background color and padding for blocks containing the input fields
P.S. remember that we use class="example" in the XHTML */
.example
{
    display: block;
    background-color: #ffffcc; /* yellow */
    /*  padding: 10px;  */
    padding: 0px;
}
CODE
{
    DISPLAY: block;
    BACKGROUND-COLOR: #ffffcc; 
}
LI
{
    MARGIN: 0.25em
}

/* color of border for field with invalid value */
.invalid
{
	border:solid red 1px;
}

/* color and thikcness of border of selected group */
.repeat-index
{
	border:solid blue 2px;
}

}

/* added October 2004 from test.css */
/* Display a red asterisk after all required form controls */
*:required::after { content: "*"; color:red; }

/* Do not render non-relevant form controls */
*:disabled { visibility :hidden; }
.disabled { visibility :hidden; }


.valid xforms\:alert {
	display: none;
}

/* color of font of alert */
.invalid xforms\:alert {
	display: block;
	font-weight: normal;
	color: red;
}