﻿/*---------------------------------------------------------------*/
/* CSS Based Two-Column Form                                   
/* Credits: Adapted From Dynamic Drive CSS Library               
/* URL: http://www.dynamicdrive.com/style/                       
/*
/* NOTES:
/*   This layout works OK, and generates less markup (by a bit) 
/*   than an equivalent table-based form.
/*
/*  Problems:
/*      1) Width is set in the CSS - should be set based on content
/*      2) Cannot include City/State/Zip in right column...
/*
/* Sample HTML:
           <div class="feedbackform">
             <div id="NameDetailsRow" class="fieldwrapper">
             	<asp:Label id="lblNameDetails" runat="server" CSSClass="headerLabel" 
              	           AssociatedControlID="fieldActive" Text="Name"></asp:Label>
  
                <asp:Label id="fieldNameDetails" runat="server" CssClass="headerfield" 
                           Text='<%# ProjectDefaults.GetContactName(eval("UserID")) %>' ></asp:Label>                
              </div><!-- Name Row -->
           </div><!-- Feedback form --> 

/*---------------------------------------------------------------*/
.feedbackform{
padding: 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: Auto; /*width of form rows*/
overflow: hidden;
padding: 0;
margin: 0;
}
div.fieldwrapper label.headerLabel{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 10em; /*width of label (left column)*/
/* margin-right: 15px; /*spacing with right column*/
text-align:right;
background-color:#DDFFCC;
border:solid 1px ForestGreen;
padding:5px;
}

div.fieldwrapper label.fieldlabel{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 10em; /*width of label (left column)*/
/* text-transform: uppercase; */
/* margin-right: 15px; /*spacing with right column*/
text-align:right;
background-color:#DDFFCC;
border:solid 1px ForestGreen;
padding:5px;
}

div.fieldwrapper span  /* right column (2nd asp label) is rendering as span... */
{
float:left;
border:solid 1px ForestGreen;
padding:5px;
width:30em;
}
div.fieldwrapper div.headerfield  /* right column (2nd asp label) is rendering as span... */
{
float:left;
background-color:#DDFFCC;
border:solid 1px ForestGreen;
font-size:x-large;
color:Yellow;
padding:5px;
width:30em;
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
/* margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: auto;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: auto;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: auto;
background: #e1dfe0;
}

