/*
===========================================================
				IDOX Forms Example Stylesheet
===========================================================
1 GENERAL INFO

This stylesheet contains all possible style classes that 
can be used for elements in an IDOX Form. It has a lot of 
empty classes that are included in this stylesheet for 
illustration purposes only and can be removed for final 
deployment of forms. This stylesheet can be used as a 
starting point for new forms.

2 IMPORTANT POINTS TO CONSIDER WHEN EDITING THIS STYLESHEET

2.1 POSITIONING
All positioning in an IDOX form is absolute. Therefore it 
is not encouraged to use the position: style attribute
in any of the classes within this stylesheet. Form 
elements are positioned using IDOX Forms builder during
form development.

2.2 FIXED FONTS
Certain DIV elements in the genrated HTML of a form use a 
fixed font style attribute like this 
style="font-size: 1.0em; font-family: Arial;". This is
to avoid a situation in Internet Explorer where 
a DIV element can be shifted out of place when a 
font-size: style is applied to it in the stylesheet. 
Overriding the stylesheet in this way ensures all form 
components are kept in correct position and WYSIWYG.

The classes that have font-size and font-family overridden
are...
.container
.page
.panel
.question-group
.tabs
.repeating
.repeating-tabs

example...

.panel{
	font-size: 1.5em;
	font-family: Comic Sans MS;
}
Will have no effect. If you wanted to change the font size
of textfields in a panel you would do the following for 
example...

.panel .textfield{
	font-size: 0.8em;
	font-family: verdana;
}

*/

/*==================== HTML ELEMENTS ====================*/

div#eformcontent 
{
	color:#333;
	font-size:120%}


div#eformcontent h1, div#eformcontenth2, div#eformcontent h3, div#eformcontent h4, div#eformcontent h5, div#eformcontent h6{
	font-family: Helvetica, Arial, Verdana, sans-serif;
	color: #000;
}


div#eformcontent h1{
	font-family: Helvetica, Arial, Verdana,  sans-serif;
	font-size: 1.3em;
	color: #002b71;
	font-weight: bold;
}

div#eformcontent h2{
	font-size:1.15em;
	color: #1f6f46;
}
div#eformcontent h4{
	font-weight: bold;
}

div#eformcontent fieldset .editor {
	border-width: 1px;
	border-style: solid;
	background-color: inherit;
}

div#eformcontent legend .editor {
	border-width:	1px;
}

div#eformcontent select{ font-size: 1.0em; }

div#eformcontent input{ font-size: 1.0em; }

div#eformcontent textarea
{
font-family:arial,verdana;
font-size:1em;
}

/*Pad out radio button and checkbox control-label pairings*/
div.checkbox-group-valid label,
fieldset.checkbox-group-valid label,
div.radio-button-group label,
fieldset.radio-button-group label
{
padding-right:5px;
}

div#eformcontent .boldlabel {
font-style: bold; }

/*============= IDOX Forms Container Classes ===========*/

/*
Any styles in a class can be
overridden in other classes as described below in
the heirarchy diagram.

.container
	+-.page
	|	+-.{user defined class}
	+-.panel			
	|	+-.{user defined class}
	+-.question-group	
	|	+-.{user defined class}
*/

.container{}
.container-valid{}
.container-invalid{}
.container-required{}

.page{}
.page-valid{}
.page-invalid{}
.page-required{}

div#eformcontent .panel{
	background-color: #eff5f2;
	border-width: 1pt;
	border-color: #1f6f46;
	border-style: solid;			
}
.panel-valid{}
.panel-invalid{}
.panel-required{}

.question-group{}
.question-group-valid{}
.question-group-invalid{}
.question-group-required{}
/*.button 
{
color:#fff;
border:none;
background:#336699;
font-weight: bold;
margin:0 0 0 0;
}*/

.button {}

label
{}

/*FF/Moz label mouse over*/
div#eformcontent label:hover
{
background: #F6F8FC;
}

/*.listbox, .textfield, textarea, .droplist, select
{
background:#fff;
border:1px solid #000;
}
*/

div#eformcontent .textarea 
{
   /* font-family: Arial;*/
	font-size: 1em;
}

/*required field colour*/
div#eformcontent .editor-required, .listbox-required {
border:1px solid #567ebd;
background:#F6F8FC;
}

div#eformcontent .editor-invalid {
	border-color: #64DC2F;
	background:#F5FDF2;
}


/*NOTE: the .tabs class has no need for -invalid, -valid or -required variations*/
div#eformcontent .tabs{border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;/*font-family:Arial, Verdana;*/margin:0px 0 0 0;color: #000000;font-weight: normal;	border: 0px #000 solid;background: #f8f8f8;
}

div#eformcontent .control_button_tab_tab-valid_tab-inactive {color: #000000;}

div#eformcontent .tab{color: #000000;border:none;}
div#eformcontent .tab-valid{color: #000000;border:none;}
div#eformcontent .tab-invalid{}
div#eformcontent .tab-required{}

/*NOTE: the extra special class variations for tab, the tab clicked becomes .tab-active */
/*.tab-active{background-image:url('../images/arrow1.gif')}*/
div#eformcontent .tab-active{background-color:#6699cc; color: #fff;}
div#eformcontent .tab-inactive{background-color: #f8f8f8; color: #ccc;}

.dynamic-hidden{}

.control{}
.control-valid{}
.control-invalid{}
.control-required{}

div#eformcontent .editor{ border: 1px solid #7F9DB9; }
.editor-valid{}
div#eformcontent .editor-invalid{ border-color: #f00; }
div#eformcontent .editor-required{
border-style: solid;
border-color: #1F6F46;
background-color: #ffffff;
}
.editor-valid{}
.editor-invalid{}
.editor-required{}

div#eformcontent .help-panel{
	border-width: 1pt;
	border-color: #567eb9;
	border-style: dotted;
	background-color: #99ccff;
	font-weight: bold;
	/*font-family: Arial;*/
	font-size: 0.8em;
}
.help-panel-valid{}
.help-panel-invalid{}
.help-panel-required{}

/*NOTE: the .tabs class has no need for -invalid, -valid or -required variations*/
.tabs
{
background:#f0f0f0;
padding:5px;
}

.tab{color:orange;}
.tab-valid{color:green;}
.tab-invalid{color:red;}
.tab-required{color:red;}
/*NOTE: the extra special class variations for tab, the tab clicked becomes .tab-active */
.tab-active
{
background-color: #666;
color:white;
font-weight: bold;
border-style: medium none black;
}
.tab-inactive
{
background-color: #e7e7e7;
}

/*NOTE: the .label class has no need for -invalid, -valid or -required variations*/
.label
{
/*font-family: arial;*/
font-size: 1em;	
}
.label span {margin-top:10px}
div#eformcontent .labelsmallitalic{font-style: italic; font-size: 1em;}

div#eformcontent .textfield
{
/*font-family: arial;*/
font-size: 1em;
}

.image{}

.file-upload{}
.file-upload-valid{}
.file-upload-invalid{}
.file-upload-required{}

.file-delete{}
.file-delete-valid{}
.file-delete-invalid{}
.file-delete-required{}

.textfield{}
.textfield-valid{}
.textfield-invalid{background:#FFFFFF;}
.textfield-required{}

.textarea{}
.textarea-valid{}
.textarea-invalid{background:#FFFFFF;}
.textarea-required{background:#FFFFFF;}

div#eformcontent .checkbox{ font-size: 0.9em; border:0;}
.checkbox-valid{}
.checkbox-invalid{}
.checkbox-required{}

.checkbox-group{}
.checkbox-group-valid{}
.checkbox-group-invalid{}
.checkbox-group-required{}

/*NOTE: the .radio-button class has no need for -invalid, -valid or -required variations
  because a radio button can only ever appear as part of a group*/
div#eformcontent .radio-button{
	font-size: 0.9em;
	padding-bottom: 4px;
}
div#eformcontent .radio-button-group{
	padding-bottom: 5px;
}
div#eformcontent .radio-button-group-valid{	padding-bottom: 5px;}
div#eformcontent .radio-button-group-invalid{	padding-bottom: 5px;}
div#eformcontent .radio-button-group-required{	padding-bottom: 5px;}

.droplist{}
.droplist-valid{}
.droplist-invalid{background:#FFFFFF;}
.droplist-required{background:#FFFFFF;}

.listbox{}
.listbox-valid{}
.listbox-invalid{background:#FFFFFF;}
.listbox-required{background:#FFFFFF;}

.date{} /*styles the date component and also the date picker*/
.date-valid{}
.date-invalid{background:#FFFFFF;}
.date-required{background:#FFFFFF;}


/*NOTE: the .button class has no need for -invalid, -valid or -required variations*/
div#eformcontent .button{ font-size: 0.8em; }

.repeating{}
.repeating-valid{}
.repeating-invalid{}
.repeating-required{}

/*NOTE: the .repeating-button class has no need for -invalid, -valid or -required variations*/
.repeating-button{}/*used on vcr navigator*/

.repeating-tabs{}
.repeating-tabs-valid{}
.repeating-tabs-invalid{}
.repeating-tabs-required{}

/*NOTE: the .repeating-tab class has no need for -invalid, -valid or -required variations*/
.repeating-tab {
	/*font-size: 1.0em;*/
	font-size: 0.8em;
	background-color: #e4ebf7;
	font-weight: bold;
	border-width: 1px;
	border-color: #1f6f46;
	border-style: solid;
	/*border-top-color: #567eb9;
	border-left-color: #567eb9;
	border-right-color: #567eb9;
	border-bottom-color: #567eb9;*/
	border-bottom-width: 1px;
}
.repeating-tab-active {
	background-color: #f3f8f5;
	color: #F00;
}
.repeating-tab-inactive {
	background-color: #ddd;
	/*border-bottom-color: #f3f8f5;*/
	border-top-style: dotted;
	border-left-style: dotted;
	border-right-style: dotted;

}
.repeating-tab-inactive:hover {
	background-color: #ddd;
	/*border-bottom-color: #c2c9d5;*/
	text-decoration:underline;
	color:#fff;
	cursor:hand;
	cursor:pointer;
}

.errors{}

 div#eformcontent .action-error {
	color: #F00;
	/*font-family: Times;*/
	border-width: 2pt;
	text-align: center; 
}


/*==================== User Classes =====================*/

div#eformcontent .repeatingPanel{ border-top-style: none; }


body {/*margin:0px; padding:0px;*/font-family:helvetica,verdana,arial,'sans-serif';background:#fff;color:#000;}
label {font-weight:normal;}
div.tabs input.tab-active {height:30px;font-size:80%;background:#eee;border:#fff;color:#1f6f46;border:1px #1f6f46 solid;font-weight:bold;}
input.tab-inactive {font-size:80%;background:#fff;border:#fff;color:grey;border:1px #ccc dotted;}
.italic {font-style:italic} /* used for statements that people must read and agree to */
.bold {font-weight:bold;} /* used to make label text bold */
h1 {margin-top:-5px;  font-size: 1.5em;	color: #258DBF;} /* moving h1 element up in Firefox and Opera */
* html body h1 {margin-top:0px;} /* star html hack to move h1  back down in IE */
.label {font-size:1em;}
.small {font-size:xx-small}
.medium { font-size:x-small}
.required-icon {margin-left:10px}
.error-icon {margin-left:10px}
.radio {font-size:90%;}
div.red {border:1px #f00 solid; background:#fff; color:#f00}
.readonly {background:#ddd;color:#999;}
.Invisible {border:#fff;background:#fff}
.link {color:blue;text-decoration:underline;background:#fff;border:1px solid #fff;font-size:100%;cursor:pointer;cursor:hand;}
table {font-size:95%}
input.control.button.link {color:blue;text-decoration:underline;background:#fff;border:1px solid #fff;font-size:110%;cursor:pointer;cursor:hand;}
.repeatingPanel{ border-top-style: none; }

 div#eformcontent .invisible{ border: none;
background-color: #ffffff;
}

div#eformcontent .exampletext{
	font-size: x-small;
}
div#eformcontent .checkboxrequired{ 
font-size: 0.9em; border: 1px;
}
div#eformcontent .borderedquestiongroup
{ font-size: 0.9em; border: 1px;
}

div#eformcontent .smalltext{
	font-size: small;
}

div#eformcontent .reduceddropdown{
	font-size: 90%;
}
div#eformcontent .radiolift{
	margin-bottom: 20px;
}
div#eformcontent .formsecuritylinks
{
	text-align: center;
	background-color: #f8f8f8;
	border: 1px solid #dddddd;
	/*font-family: Arial, Verdana;*/
	padding: 4px 4px 2px 4px;
	margin: 0px 0 15px 0;
	line-height: normal;
	font-size: 85%;
	width: 500px;
	float: left;
}
div#eformcontent .formsecuritylinks ul
{margin:0;padding:0;height:20px;}
div#eformcontent .formsecuritylinks a
{
	float: left;
	width: 30%;
	text-align: center;
	padding: 0 0 2px 1%;
	margin: 0px 0px 0px 10px;
	list-style: none;
	background: none;
	border: none;
}
div#eformcontent .formsecuritylinks a, a:visited 
{text-decoration: underline;color:#0066cc;}
div#eformcontent .formsecuritylinks a:hover, a:focus 
{text-decoration: underline; color:#666633;}
div#eformcontent .formsecuritylinks img
{border:0;margin:0 0 -3px 0;padding:0 0 0 0;}

div#eformcontent .startbutton{
	height: 30px;
	width: 200px;
}
div#eformcontent .previouspage{
	height: 25px;
	width: 143px; 
}
div#eformcontent .nextpage{
	height: 25px;
	width: 128px; 
}
div#eformcontent .resetandsave{
	height: 25px;
	width: 113px; 
}

div#eformcontent .centeredtext 
{
	text-align:center;	
}
div{line-height:1.3em}
div#eformcontent input:focus, div#eformcontent select:focus, div#eformcontent textarea:focus {background-color:yellow}
div#eformcontent input[type=checkbox]:focus {background-color:yellow}
div#eformcontent a:focus {color:red}
a.usability:focus, a.usability:hover {color:red;text-decoration:underline}
a.usability {text-decoration:underline}
input:focus {background-color:yellow}