/* -----------------------------------------------------------
Project: Plug-in-able CSS
Purpose: Standard form layout styles
Author: Katelynn O'Brien
Date: 02/13/07
-------------------------------------------------------------- */


/* INSTRUCTIONS FOR USE
-------------------------------------------------------------- 

1. main <fieldset>s have a light grey background

2. nested <fieldset>s have an even lighter grey background

3. <div>s with no class span the FULL width of the container
	- all <input>s and related labels/text should be 
	  wrapped in <div>s

4. <div>s with either a formleft or formright class span HALF 
   the width of the container
        - formleft creates a left column and always starts 
	  on its own line
        - formright should be used ONLY after a formleft to 
	  create a right column next to a left column
        - formleft and formright can be nested inside of 
	  eachother to create columns within columns

5. <p>s always start on their own line and span the FULL 
   width of the container
        - text, such as instructions, that are not related to 
	  a specific <input> should be wrapped in <p>s
        - all <input>s and related labels/text should be wrapped
          in <div>s instead of <p>s

6. all radio buttons and checkboxes must have class="radio" or 
   class="checkbox" defined within the <input> tag

7. all submit buttons must have class="submit" defined within 
   the <input> tag

-------------------------------------------------------------- */


form
        {
        margin: 0;
        padding: 0;
        }

fieldset
        {
        float: left;
        margin: 0 0 25px 0;
        padding: 2% 2% 4% 2%;
        width: 96%;
        background-color: #ececec;
        border: 1px solid #ccc;
        }

fieldset.tan
        {
        color: #545243;
        background-color: #faf8ec;
        border: 1px solid #bab8a9;
        }

legend
        {
        margin: 0;
        padding: 0;
        font-size: 110%;
        font-weight: bold;
        color: #333;
        }

fieldset fieldset
        {
        margin: 0 0 12px 0;
        background-color: #f5f5f5;
        }

fieldset fieldset legend
        {
        font-size: 100%;
        }

fieldset div
        {
        float: left;
        margin: 0 0 10px 0;
        padding: 0;
        width: 98%;
        }

fieldset div div
	{
	margin: 0;
	}

fieldset div.formleft
        {
        clear: left;
        width: 48%;
        }

fieldset div.formright
        {
        width: 47%;
	padding-left: 1%;
        }

fieldset div div.formright
	{
	padding-left: 3%;
	}

fieldset div.xsm
        {
        width: 10%;
        }

fieldset div.sm
	{
	width: 30%;
	}

fieldset div.md
	{
	width: 65%;
	}

fieldset div.lg
        {
        width: 85%;
        }

fieldset p
        {
        clear: left;
        margin: 10px 0 15px 0;
        padding: 0;
        }

.center
        {
        text-align: center;
        }


/* INPUTS
-------------------------------------------------------------- */

input, textarea
        {
        font-size: 100%;
        width: 96%;
        }

fieldset div.formleft div input, fieldset div.formright div input
        {
        width: 92%;
        }

fieldset div.formleft div.xsm input, fieldset div.formright div.xsm input
	{
	width: 73%;
	}

fieldset div.formleft div.md input, fieldset div.formright div.md input,
fieldset div.formleft div.lg input, fieldset div.formright div.lg input
	{
	width: 97%;
	}

input.radio, input.checkbox,
fieldset div.formleft input.radio, fieldset div.formright input.radio,
fieldset div.formleft input.checkbox, fieldset div.formright input.checkbox
        {
        width: auto;
        }

input.submit
        {
        width: auto;
        }

select
        {
        font-size: inherit;
	}