
/*
 * General form properties
 */
form {
	padding: 0px;
	margin: 0px;
}

textarea, input, select, option {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
}

select {
	clear: none;
}

select option {
	padding: 2px 7px;
}

select.field-select-multiple option {
	padding: 2px 15px;
}

/*
 * The Form container
 * This class is applied to the DIV container that contains the form's title,
 * description and complete field set.
 */
.form-container {
	
}

/*
 * Form header block
 * This class is applied to the block that contains the title and description
 * of the form.
 */
.form-header {
	background: url(../img/form-header-bg.gif) repeat-x bottom left;
	padding: 5px;
}

/*
 * The Form title
 * This class is applied to the title of the form (h2)
 */
.form-header .form-title {
}

/*
 * The Form description
 * Applied to the element that contains the form's description text (DIV)
 */
.form-header .form-description {
	
}

/*
 * The Form's field set container
 * Inside the global form container (form-container), another DIV is created to
 * contain the complete field set. This class is applied to that DIV container.
 */
.form-fields-container {
	padding: 5px 15px 25px 15px;
	
}

/*
 * Field container
 * Each field is contained in a field container (DIV). This class is applied to
 * such a field container.
 */
.field-container {
	padding: 7px 0px 5px 0px;
	clear: both;
}

/*
 * Field label
 * This class is applied to the label (title) of an (input) field. It will be
 * applied to a "label" tag
 */
.field-label {
	padding: 0px 0px 5px 0px;
	font-weight: bold;
	display: block;
}

/*
 * Field description
 * This class is applied to the description text of a field. Typically, such a
 * container is used to provide some guidelines on how the field should be used
 * correctly.
 */
.field-description {
	padding-top: 3px;
	color: #808080;
}

/*
 * Field Mandatory Indicator
 * An asterisk character is appended to the label, or title, of a mandatory field.
 * This class is applied to these asterisk containers (SPAN)
 */
.field-mandatory {
	padding-left: 5px;
	font-weight: bold;
	font-size: 15px;
	color: #cc0000;
}

/*
 * Error message
 * Whenever a validation error has been generated, it is displayed along with the
 * field in the form interface. This class is applied to the container of the error
 * message (DIV)
 */
.field-error-message {
	background: url(../img/error-message-bottom.gif) no-repeat bottom left;
	width: 475px;
}

.field-error-message .error-message-text {
	background: url(../img/error-message-top.gif) no-repeat top left;
	padding: 5px 5px 15px 5px;
}

/*
 * Text field
 * Applied to the INPUT tag. This class is applied to fields that handle the input
 * of (short; one-line) texts
 */
.field-text {
	border: 1px solid #a1c1cd;
	background: url(../img/field-bg.gif) repeat-x top left #ebf3f5;
	padding: 5px 3px;
}
input:disabled,
textarea:disabled,
select:disabled {
	background: #e2e2e2;
	cursor: not-allowed;
}

/*
 * Text field
 * Applied to the TEXTAREA tag. This class is applied to fields that handle the input
 * of (longer; multi-line) texts
 */
.field-textarea {
	border: 1px solid #a1c1cd;
	background: url(../img/field-bg.gif) repeat-x top left #ebf3f5;
	padding: 5px 3px;
	text-overflow: auto;
}

/*
 * Password field
 * Applied to the INPUT tag of fields that handle the input of visually protected passwords
 */
.field-password {
	border: 1px solid #a1c1cd;
	background: url(../img/field-bg.gif) repeat-x top left #ebf3f5;
	padding: 5px 3px;
}

/*
 * Date field
 * This style is applied to the 3 elements in the expiration date: DD MM YYYY
 */
.field-date-d {
	border: 1px solid #a1c1cd;
	background: url(../img/field-d-bg.gif) repeat-x top left #ebf3f5;
	padding: 5px 3px 5px 20px;
}
.field-date-m {
	border: 1px solid #a1c1cd;
	background: url(../img/field-m-bg.gif) repeat-x top left #ebf3f5;
	padding: 5px 3px 5px 20px;
	margin-left: 15px;
}
.field-date-y {
	border: 1px solid #a1c1cd;
	background: url(../img/field-y-bg.gif) repeat-x top left #ebf3f5;
	padding: 5px 3px 5px 32px;
	margin-left: 15px;
}
.field-date-h {
    border: 1px solid #a1c1cd;
    background: url(../img/field-h-bg.gif) repeat-x top left #ebf3f5;
    padding: 5px 3px 5px 20px;
}
.field-date-i {
    border: 1px solid #a1c1cd;
    background: url(../img/field-i-bg.gif) repeat-x top left #ebf3f5;
    padding: 5px 3px 5px 20px;
    margin-left: 15px;
}
.field-date-s {
    border: 1px solid #a1c1cd;
    background: url(../img/field-s-bg.gif) repeat-x top left #ebf3f5;
    padding: 5px 3px 5px 20px;
    margin-left: 15px;
}

/*
 * Drop-down menu
 */
.field-select {
    border: 1px solid #a1c1cd;
    background: url(../img/field-bg.gif) repeat-x top left #ebf3f5;
    padding: 5px 3px;
}

/*
 * Upload field
 * This class is applied to fields that handle file uploads ("choose a file..."), directly
 * to the INPUT tag
 */
.field-file {
	
}

/*
 * Calendar field
 * Applied directly to the INPUT tag of a field that handles the input of dates. Typically,
 * a field of this kind provides the user with an additional calendar interface, to pick a
 * date from.
 */
.field-calendar {
	
}

/*
 * Checkbox
 * Applied directly to the INPUT tag of a checkbox field.
 */
.field-checkbox {
	
}

/*
 * Checkbox label
 * Unlike other fields, another (dedicated) class is created for the field-type-specific
 * label. In other words, this class is applied to the LABEL tag that goes with the
 * checkbox
 */
.field-checkbox-label {
	
}

/*
 * Submit button
 * This class is applied to the submit button (Typically "Send" or "Save" button)
 */
.field-submit-button {
	background: url(../img/field-submit-bg.gif) no-repeat top left;
	border: 1px solid #cfd0d2;
	padding: 5px 7px;
	margin-top: 8px;
	color: #0399cd;
	font-weight: bold;
}

/*
 * Field sizes
 * These styles are applied to fields, to set their WIDTH!
 */
.wider {
	width: 550px;
}
.wide {
	width: 400px;
}
.narrow {
	width: 200px;
}
.narrower {
	width: 100px;
}

.higher {
	height: 400px;
}
.high {
	height: 250px;
}
.low {
	height: 100px;
}
.lower {
	height: 50px;
}

.dlgIFrame
{
	width:800px;
	height:600px;
}
