/*
 * File:    formdesigneruser.css
 * Version: 9 (see Version History below)
 * Author:  Russell Robinson, http://www.tectite.com/
 * Created: 18 September 2010
 *
 * Copyright (c) 2010-2012 tectite.com 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 free software; you can redistribute it and/or
 *  modify it under the terms of the GNU General Public License
 *  as published by the Free Software Foundation; either version 2
 *  of the License, or (at your option) any later version.

 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.

 *  You should have received a copy of the GNU General Public License
 *  along with this program; if not, write to the Free Software
 *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 *  
 *  You can also read the full license details here:
 *      http://www.gnu.org/licenses/gpl-2.0.html
 *
 * 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 tectite.com 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 9, 16 July 2012
 *  Forms must now be wrapped in <div class="TectiteForm"> so that this stylesheet
 *  does not interfere with other forms and fieldsets.
 *
 * 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.
*/

div.TectiteForm form h1,div.TectiteForm form h2,
div.TectiteForm form h3,div.TectiteForm form h4,
div.TectiteForm form h5,div.TectiteForm form h6 {
    display:block;
    clear:both;
}

div.TectiteForm form p {
    display:block;
    clear:both;
}

/*
 * If you use fieldset, it has no border, by default.
*/
div.TectiteForm 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:
 *  <div class="TectiteFormDesignerHorzGroup">
 *      <label ..>Main label</label>
 *      <div class="TectiteFormDesignerHorzFieldGroup">
 *          fields go here
 *      </div>
 *  </div>
 * 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;
}