/*  Note: Turned off XForms styling for now */
@namespace xf url("http://www.w3.org/2002/xforms");


/** General: margins and font */
body { 
      margin-left: 1em;
      margin-top: 0em;
      margin-right: 0em;
      font-size: 9pt; font-family: Verdana, Arial, Helvetica, sans-serif; 
      color: black;
}


/* Required fields have a blue text */
*:required {
     color: blue;
     background-color: transparent;
} 


/* xf|input talks about the input field
 .xf-value means the inpu field itself, not the label 
*/

xf|input:required .xf-value { 
	  color: blue; 
	  background-color: cyan;
} 


/* Mozilla and Novell IE plugin styling */
xf|*:invalid {
  background-color: red;
}


xf|invalid {
  background-color: red;
}



/* This is the one that is actually working */
 *:invalid {
     color: red;
     background-color: transparent;
     // border: solid red 1px;  // does not seem to work
 }


h1 { font: bold 20pt helvetica,verdana; }
h2 { font: bold 18pt helvetica,verdana; }
h3 { font: bold 16pt helvetica,verdana; }

/** for use in <div class="form"> and <xf:group class="form"> */
div.form, xf|group.form {
      padding: 0.5em 1em 1em 1em;
      margin: 0.5em 1em 1em 1em;
      background-color: #cacbff;
      border: 2px outset #ffffff;
}


/* background for Group labels */
/* h4 { font: bold 14pt helvetica,verdana; background-color: #1078E1; } */
h4 { font: bold 14pt helvetica,verdana; }

xf|group {
    /* border:10px; */
    background-color: #cacbff; 
    PADDING-RIGHT: 0.5em;
    /* DISPLAY: block; */
    display: table-row;
    PADDING-LEFT: 0.5em;
    PADDING-BOTTOM: 0.2em;
    PADDING-TOP: 0.2em
}

 
xf|repeat {
    //border:3px;
    //border-color:black;
    //border-style:solid;
    background-color: #CCFFFF;
    PADDING-RIGHT: 0.5em;
    DISPLAY: block;
    PADDING-LEFT: 0.5em;
    PADDING-BOTTOM: 0.5em;
    PADDING-TOP: 0.5em
} 

/* xforms|input > xforms|label span { display:table-cell; width: 600px } */
/* xf|label { display:table-cell; width: 600px } */
/* xf|input { display:table-cell; width: 600px }  */

/* Following was taken from: http://xformsinstitute.com/essentials/browse/ch09.php - Styling XForms */

/* Display a red asterisk after all required form controls */
*:required::after { content: "*"; color: red; }


/* when a widget becomes disabled (e.g. by becoming relevant=false) remove it */
*:disabled {
	visibility: hidden; 
	display: none;
}


/* The following declarations cause form controls and their labels
to align neatly, as if a two-column table were used */
xf|group { display: table; }
xf|input { display: table-row;  }
xf|input > xf|label { display: table-cell; width:250px; }
xf|select1 { display:table-row; }
xf|select1 > xf|label { display: table-cell; width:250px; }
xf|textarea { display: table-row;  }
xf|textarea > xf|label { display: table-cell; width:250px; }
xf|input::value { border: thin black solid; display: table-cell; }

/* end of additions taken from http://xformsinstitute.com/essentials/browse/ch09.php */


.b14 { font: bold 14pt helvetica,verdana }
.b10 { font: bold 10pt helvetica,verdana; text-decoration: none }
.n10 { font: 10pt helvetica,verdana; text-decoration: none }
.n8  { font: 8pt helvetica,verdana }
.b8  { font: bold 8pt helvetica,verdana }
xf|*.i8 >xf|label { display: block; }
.help { background-color: orange; }

.sectclr { background-color:#cceecc }
.entryclr { background-color:#eeeeee }
aquabutton,.aquabutton { -moz-binding: url("AquaButton.xml#aqua") }
.chartlabel { font-family:verdana,arial,sans-serif;font-size:20px;fill:black;stroke:none }
#chart { width:220px;height:200px }
.tfbutton{ background-color:#cceecc; cursor:pointer }
xf|trigger button { background-color:#cceecc; cursor:pointer }

/* class=example from XHTML */
.example
{ 
     //background-color: #ffffcc; 
     background-color: #cacbff;
     /* padding: 10px; */
}