/*
* File: formdesigneruser.css
* Version: 8 (see Version History below)
* Author: Russell Robinson, http://www.tectite.com/
* Created: 18 September 2010
*
* Copyright (c) 2010 Root Software and Open Concepts (Vic) Pty Ltd
* (ABN 12 130 429 248), Melbourne, Australia.
* This script is free for all use as described in the "Copying and Use" and
* "Warranty and Disclaimer" sections below.
*
* Description
* ~~~~~~~~~~~
*
* This style sheet provides basic styling for forms
* generated by the Tectite Form Designer, available
* at http://www.tectite.com/
* Visit us for support and updates.
* Copying and Use (Software License)
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* This stylesheet is provided free of charge and may be freely distributed
* and used provided that you:
* 1. keep this header, including copyright and comments,
* in place and unmodified; and,
* 2. do not charge a fee for distributing it, without an agreement
* in writing with Root Software allowing you to do so; and,
* 3. if you modify this file before distributing it, you clearly
* identify:
* a) who you are
* b) how to contact you
* c) what changes you have made
* d) why you have made those changes.
*
* By using any of our products, including this stylesheet, you are
* agreeing to our standard Terms and Conditions, available here:
* http://www.tectite.com/TermsAndConditions.pdf
*
* This is free software and the Software License shown above
* is to be read in conjunction with our standard Terms and Conditions.
*
* Warranty and Disclaimer
* ~~~~~~~~~~~~~~~~~~~~~~~
* This stylesheet is provided free-of-charge and with ABSOLUTELY NO WARRANTY.
* It has not been verified for use in critical applications, including,
* but not limited to, medicine, defense, aircraft, space exploration,
* or any other potentially dangerous activity.
*
* By using this file you agree to indemnify Root Software and
* Open Concepts (Vic) Pty Ltd, their agents, employees, directors and
* associated companies and businesses from any liability whatsoever.
*
* We still care
* ~~~~~~~~~~~~~
* If you find a bug or fault in this file, please report it to us.
* We will respond to your report and make endeavours to rectify any
* faults you've detected as soon as possible.
*
* To contact us please register on our forums at:
* http://www.tectite.com/vbforums/
* or view our contact information:
* http://www.tectite.com/contacts.php
*
* Version History
* ~~~~~~~~~~~~~~~
*
* Version 8, 4 May 2012
* Removed font styling to allow easier use in existing HTML pages.
*
* Version 7, 11 January 2012
* Allows label for a checkbox to be on the right hand side.
*
* Version 6, 14 November 2011
* Adds style for "password" input fields.
*
* Version 5, 13 September 2011
* Specifies default font-size.
* Adds heading styles.
* Adds paragraph styles.
*
* Version 4, 28 October 2010
* Added support for fieldset grouping of fields (vertical).
* Added support for horizontal grouping of fields, with a
* main label and then individual labels.
* Added support for tabular questionaires.
* Added support for specifying small fields.
* Changed most dimensions to be relative (percentage) or
* em's.
*
* Version 4, 14 October 2010
* Added support for "select" fields.
*
* Version 3, 8 October 2010
* Added version number at top of file.
* Renamed "RequiredField" class to "TectiteRequiredField".
* Added styling for fieldset.
* Added TectiteFieldError class for use with formval.js
*
* Version 2, 4 October 2010
* Set width auto for "textarea" so that the "cols"
* attribute in the HTML has an effect.
*
* Version 1, 18 September 2010
* Initial working version.
*/
/*
* Select a sans-serif font for all fields.
* {
font-family: Ensign, Chalkboard, Digital, Techno, Liberal, Gadget, Verdana, Helvetica, sans-serif;
font-size:12px;
}
*/
form h1,form h2,form h3,form h4,form h5,form h6 {
display:block;
clear:both;
}
form p {
display:block;
clear:both;
}
/*
* If you use fieldset, it has no border, by default.
*/
fieldset {
border:none;
}
/*
* Wrapper for a group of fields.
*/
fieldset.TectiteFormDesignerGroup {
border:1px solid gray;
width:70%;
margin:10px 19% 10px 10%;
padding:5px;
clear:both;
}
/*
* Wrapper for a field.
*/
div.TectiteFormDesignerField {
display:block;
margin:2px;
padding:5px;
float:left;
width:95%;
/*border:1px gray dotted;*/
}
/*
* Groups some fields together horizontally.
*/
div.TectiteFormDesignerHorzGroup {
display:block;
margin:2px;
padding:5px;
float:left;
width:95%;
}
/*
* Adjustment for button fields
*/
div.TectiteFormDesignerField.TectiteButtonField {
width:10em;
}
/*
* Left Hand Side label for a field.
*/
div.TectiteFormDesignerField label {
display:table;
float:left;
text-align:left;
width:30%;
/*border:1px solid blue;*/
}
/*
* You can group fields horizontally, e.g.
* Date of birth Month: < > Day: < > Year: < >
* This is the left most label (the main label).
*/
div.TectiteFormDesignerHorzGroup label {
display:table;
float:left;
text-align:left;
width:30%;
/*width:29%;border:1px solid blue;*/
}
/*
* Usage is:
*
* The TectiteFormDesignerHorzFieldGroup div groups all the fields
* together on the right hand side.
*/
div.TectiteFormDesignerHorzGroup div.TectiteFormDesignerHorzFieldGroup {
display:table;
float:left;
width:68%;
margin-left:1%;
margin-right:0;
/*width:67%;border:1px solid yellow;*/
}
/*
* Adjusted field div for when it's in a horizontal group.
*/
div.TectiteFormDesignerHorzFieldGroup div.TectiteFormDesignerField {
display:block;
float:left;
white-space:nowrap;
width:auto;
margin:0 0.5em 0 0;
/*border:1px solid red;*/
}
/*
* This is for the usual per-field label, but adjusted
* for being in a horizontal group.
*/
div.TectiteFormDesignerHorzFieldGroup label {
display:inline;
float:none;
text-align:left;
width:auto;
margin-left:0;
margin-right:0.5em;
/*border:1px solid blue;*/
}
/*
* Highlight the label for a required field.
*/
div.TectiteFormDesignerHorzGroup label.TectiteRequiredField,
div.TectiteFormDesignerField label.TectiteRequiredField {
font-weight:bold;
}
/*
* Add an asterisk after the label for a required field.
* Note that this does not work in some browsers, including IE 7 and below.
*/
div.TectiteFormDesignerHorzGroup label.TectiteRequiredField:after,
div.TectiteFormDesignerField label.TectiteRequiredField:after {
content: " *";
}
/*
* Formatting for the input area of a text field.
*/
div.TectiteFormDesignerField input[type="text"],
div.TectiteFormDesignerField input[type="password"] {
margin-left:1%;
margin-right:0;
width:15em;
}
/*
* Class for a small input field.
*/
div.TectiteFormDesignerField input[type="text"].TectiteFormDesignerSmallField,
div.TectiteFormDesignerField input[type="password"].TectiteFormDesignerSmallField {
width:4em;
}
/*
* Implements a table questionnaire.
*/
table.TectiteFormDesignerQuestionnaire {
border:1px solid black;
border-collapse:collapse;
}
table.TectiteFormDesignerQuestionnaire th {
background-color:#C0C0C0;
border:none;
}
table.TectiteFormDesignerQuestionnaire th.TectiteFormDesignerQuestionnaireHeading {
border:1px solid black;
}
table.TectiteFormDesignerQuestionnaire td {
background-color:white;
border:1px solid black;
vertical-align:top;
padding:0.1em;
}
table.TectiteFormDesignerQuestionnaire td.TectiteFormDesignerQuestionnaireNumber {
width:3em;
text-align:center;
}
table.TectiteFormDesignerQuestionnaire td.TectiteFormDesignerQuestionnaireRadio {
vertical-align:middle;
text-align:center;
}
/*
* Formatting for the input area of a textarea field.
*/
div.TectiteFormDesignerField textarea {
margin-left:1%;
margin-right:0;
width:auto;
}
/*
* Formatting for select fields.
*/
div.TectiteFormDesignerField select {
margin-left:1%;
margin-right:0;
width:auto;
}
/*
* Formatting for checkboxes.
*/
div.TectiteFormDesignerField input[type="checkbox"] {
margin-left:1%;
margin-right:0;
width:5em;
}
/*
* Formatting for the Right Hand Side labels of checkboxes.
*/
div.TectiteFormDesignerField input[type="checkbox"] + label {
display:inline;
float:none;
}
/*
* Formatting for radio buttons.
*/
div.TectiteFormDesignerField input[type="radio"] {
margin-left:1%;
margin-right:5px;
width:5em;
}
/*
* Formatting for the Right Hand Side labels of radio button options.
*/
div.TectiteFormDesignerField input[type="radio"] + label {
display:inline;
float:none;
width:7em;
}
/*
* Shift a field to the right (useful for checkboxes with right-hand labels)
*/
div.TectiteFormDesignerField.ShiftRight {
margin-left:30%;
width:65%;
}
/*
* Groups all radio button options together.
*/
div.TectiteFormFieldRadioOptions {
display:block;
float:left;
width:40%;
}
/*
* Each radio button option is formatted inside a paragraph.
*/
div.TectiteFormFieldRadioOptions p {
margin-bottom:0.5em;
}
/*
* Highlight for field errors.
* Tectite's formval.js JavaScript validation product
* sets this class for field with errors.
*/
div.TectiteFieldError {
border:1px solid red;
background-color:#FFFACD;
}
/*
* Formatting for the actual field error message.
*/
p.TectiteFieldError {
clear:both;
font-style:italic;
font-weight:bold;
text-align:center;
}
/*
* Changes here should be duplicated in formdesigner.css
*/
h1.TectiteFormDesignerHeading {
color:black;
font-size:200%;
font-weight:bold;
}
/*
* Changes here should be duplicated in formdesigner.css
*/
h2.TectiteFormDesignerHeading {
color:black;
font-size:150%;
font-weight:bold;
}
/*
* Changes here should be duplicated in formdesigner.css
*/
h3.TectiteFormDesignerHeading {
color:black;
font-size:125%;
font-weight:bold;
text-decoration:underline;
}
/*
* Changes here should be duplicated in formdesigner.css
*/
h4.TectiteFormDesignerHeading {
color:black;
font-size:110%;
font-weight:bold;
}
/*
* Changes here should be duplicated in formdesigner.css
*/
h5.TectiteFormDesignerHeading {
color:black;
font-size:110%;
font-weight:bold;
font-style:italic;
}
/*
* Changes here should be duplicated in formdesigner.css
*/
h6.TectiteFormDesignerHeading {
color:black;
font-weight:bold;
text-decoration:underline;
}
/*
* Highlight for field error messages.
* Tectite's formval.js JavaScript validation product
* uses this.
*/
span.TectiteFieldError {
border:1px solid red;
background-color:#FFFACD;
padding:2px;
margin-left:5px;
font-style:italic;
font-weight:bold;
}
/*
* Enable this class to put your error messages
* below the fields.
* You can do this for specific field types, like
* this:
* textarea + span.TectiteFieldError { .. }
* select + span.TectiteFieldError { .. }
* input[type="text"] + span.TectiteFieldError { ... }
*/
/*
span.TectiteFieldError {
margin:5px 0;
display:block;
clear:both;
}
*/
/*
* Formatting for the "Power by FormMail" graphic.
*/
.PoweredByFormMail {
display:block;
float:right;
}