/*  --------------------------------------------------------------
    TODO:.condensed should operate on individual input.
    TODO:Provide an alternative select to enable consistent styling:http://v2.easy-designs.net/articles/replaceSelect/

    forms.css

    Blueprint forms plugin:
    --------------------------------------------------------------
    * Designed for use with blueprint
    * Intuitive, straightforward markup
    * Configurable to meet most form layout needs

    Usage:
    --------------------------------------------------------------
    * Apply class="form" to a wrapping div.
    * Use an order list (ol) with a list item (li) for each row.
    * When the row has multiple values (e.g., radio buttons, checkboxes) apply the class="controlset" to the list item and wrap the values with a div. 
    * Use <em>*</em> within the label after the text to indicate a required field.
    * Use p class="note" to display guidance information below the input.
    * A button row needs no special formatting. Use li for button row, or add div outside li. Use classes to center or align with values.

    Customization:
    --------------------------------------------------------------
    * Classes that can be applied to wrapping div or any container element within it

      - class="form-labels-right":       Left, right, or top align labels (they are inline by default).  Apply to wrapping div or any container.
      - class="form-labels-left":        ...
      - class="form-labels-top":         ...
      - class="form-labels-normal":      By default, blueprint labels are bolded. Use this class to for a normal weight. Apply to wrapping div or any container.
      - class="form-labels-span-x":      The width of the labels column is blueprint's span-4 by default. Apply this class (with x = 2,3,4,5 or 6) on the wrapping div to change the width.
      - class="form-values-span-x":      The width of the value column is not set by default. Apply this class (with x = 2 through 12) on the wrapping div to change the width.
      - class="form-style-condensed":    Customize the style of the by reducing the row height, adding dividing rules between rows, or both. 
      - class="form-style-rules":        ...
      - class="form-style-condensed-rules":..
      - class="form-values-condensed":   Reduces the top and bottom padding of labels and values to reduce the overall height of the row.

    * Apply these classes to the "row" (either an li or a div outside the ol) 
      - class="form-row-align-center":       Aligns position of content within the center of a row (useful for button row).
      - class="form-row-align-values":       Aligns position of content with the start of the value column (useful for button row).

    * Apply anywhere
      - class="form-fancy":              Enriches the UI appearance.

    * Apply to indivual input elements (or their containers)
      - class="width-auto":              When using form-values-span-x, use this class on text boxes, selects, or text areas when you do not want the width to be set by blueprint forms.
      - class="height-auto":             Prevent the default height from being set via padding on text boxes, select and text areas.

    Grid compatibility:
    --------------------------------------------------------------
    * Formula for determining columnar width of form:
        [container columns] = [label columns] + [value columns] + 1 (if fieldsets are used) + 1
    * Note:Input elements are difficult to control accurately, so the the extra one column provides a gap to accommodate size variances.
    * Note:Fieldsets do not indent, so no matter how many are nested you stil only add one column when using fieldset (you can apply blueprint grid classes to indent the fielsets).

    IE6 and input element class qualification:
    --------------------------------------------------------------
    * You only need to qualify input element with classes (.text, .checkbox, .radio) for IE6 (and earlier support). All other browsers will support attribute selectors.
   
-------------------------------------------------------------- */

/* Allows use of blueprint inline forms when the form element cannot be directly targeted (such as in asp.net, which only allows one form element) */
.inline-form { line-height:3; }
.inline-form p { margin-bottom:0; }

/* Undo some blueprint form defaults that we don't want when working with formatted forms */
.form input.text, 
.form input.title { width:auto; }
.form input.title { font-size:1.5em; }
.form textarea { height:auto; width:auto; }
.form li input[type="text"], 
.form li input[type="password"], 
.form li textarea, 
.form li select { margin:0; }
.form fieldset { padding:8px 17px 17px; } /* Blueprint uses 1.4em top/bottom padding, which doesn't maintain rhythm */
/* Form typography */
.form label, .form span.label { font-weight:bold; }
.form select, 
.form input[type="text"], 
.form input[type="password"],
.form input.text,
.form textarea { font-family:Arial, Helvetica, sans-serif; font-size:1em; }
.form input.title,
.form label.title, 
.form span.title, 
.form li.title { font-size:1.5em; }
.form li p.note { color:#555; font-size:90%; }
.form li span.value { display:inline-block; }
.form label em,
.form span.label em {font-size:120%; font-style:normal; color:#c00;}
.form textarea { line-height:1.5em; }
.form input[type="radio"], 
.form input.radio { margin:3px 3px 0 5px; }
.form input[type="checkbox"], 
.form input.checkbox { margin:3px 3px 3px 4px; }
.form .notice p, .form .error p, .form .success p { line-height:1.5em }
.form hr.space { background:none; }

/* Element sizes */
.form select { padding:4px 2px 4px 0; } /* (FF verified)  */
.form input[type="text"], 
.form input[type="password"],
.form input.text,
.form textarea { padding:5px 3px; }
.form input.title,
.form li p { margin:0; }
.form .form-row-align-center { text-align:center; }

/* Test */
/*.form li { background-color:#D2FFD6; }*/

/* Form layout */
/* NOTE:An alternate approach is to set label and span.label to display:inline-block and remove the float:left.
   This enables the line-height to be reduced without introducing alignment problems. However, a side effect is 
   that the label will be bottom aligned when the input span more then one line (such as a text area).
*/
.form ol { list-style:none; margin:0; }
.form li { line-height:28px; padding-top:0; padding-bottom:4px; margin-bottom:4px; display:block; }
.form li.title { line-height:46px; }
.form li:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
.form li p { line-height:12px; margin-bottom:6px; }
.form li .wrap { line-height:18px; }
.form-labels-left label, 
.form-labels-left span.label, 
.form-labels-right label,
.form-labels-right span.label,
.form-labels-top label,
.form-labels-left span.label { display:block; position:relative; }
.form-labels-left label, 
.form-labels-left span.label, 
.form-labels-right label,
.form-labels-right span.label {float:left; padding-right:10px; margin-right:10px;}
.form-labels-right label,
.form-labels-right span.label {text-align:right; }
.form-labels-left label em, 
.form-labels-right label em, 
.form-labels-left span.label em,
.form-labels-right span.label em { position:absolute; right:0;  }

/* Control sets for anything other than text boxes, combo boxes, and text areas */
.form li.controlset div { line-height:18px; padding-top:3px; display:inline; }
.form .form-labels-top li.controlset div, .form-labels-top li.controlset div,
.form .form-labels-left li.controlset div, .form-labels-left li.controlset div,
.form .form-labels-right li.controlset div, .form-labels-right li.controlset div { display:block; }
.form li.controlset div label { font-weight:normal; }
.form li.controlset div label,
.form li.controlset div span.label { padding-right:5px; margin-right:0; }
.form li.controlset div label,
.form li.controlset div span.label,
.form li.controlset div input[type="radio"],
.form li.controlset div input.radio,
.form li.controlset div input[type="checkbox"],
.form li.controlset div input.checkbox { display:inline; float:none; }
.form input[type="checkbox"], .form input[type="radio"], .form input.checkbox, .form input.radio {position:relative; top:0.1em;}

/* Resets to turn off size control */
.form .width-auto { width:auto !important; }
.form .height-auto {padding-top:0 !important; padding-bottom:0 !important; top:0 !important; }

/* Style choices */
.form .form-style-condensed li, .form-style-condensed li { padding-bottom:0; margin-bottom:2px; }
.form .form-style-ultracondensed li, .form-style-ultracondensed li {line-height:18px;margin-bottom:2px;padding-bottom:0}
.form .form-style-rules li, .form-style-rules li { border-bottom:solid 1px #eee; padding-bottom:3px;}
.form .form-style-condensed-rules li, .form-style-condensed-rules li { border-bottom:solid 1px #eee; padding-bottom:0; margin-bottom:1px;}
.form .form-style-ultracondensed-rules li, .form-style-ultracondensed-rules li {border-bottom:solid 1px #eee;line-height:18px;margin-bottom:1px;padding-bottom:0}

/* Label alignment */
.form-labels-left label, .form-labels-left span.label { text-align:left !important; }
.form-labels-top label, .form-labels-top span.label { float:none !important; width:auto !important; text-align:left !important; }
.form-labels-top label em, .form-labels-top span.label em { position:static !important; padding-left:0.1em; }
.form-labels-top p.note { margin-left:0 !important; }
.form-labels-top li.controlset div,
.form-labels-top .form-row-align-values { padding-left:0 !important; }

/* Other customizations */
.form-labels-normal label, .form .form-labels-normal label, 
.form-labels-normal span.label, .form .form-labels-normal { font-weight:normal; }
.form-values-condensed select, .form .form-values-condensed select,
.form-values-condensed input[type="text"], .form .form-values-condensed input[type="text"],
.form-values-condensed input[type="password"], .form .form-values-condensed input[type="password"],
.form-values-condensed label, .form .form-values-condensed label,
.form-values-condensed span.label, .form .form-values-condensed span.label,
.form-values-condensed span.value, .form .form-values-condensed span.value,
.form .form-values-condensed li.controlset div,
.form-values-condensed li.controlset div { padding-top:1px; padding-bottom:1px; }
.form label span, .form span.label span { color:#666; font-size:90%; font-weight:normal; display:inline-block; position:absolute; top:12px; right:10px;}

/* Error state */
.form li.error, .form p.error { margin-bottom:1em; border:none; padding:3px 0; background:none; } /* Undo blueprint defaults */
.form p.error { font-weight:bold; }
.form li.error input[type="text"],
.form li.error input[type="password"],
.form li.error input.text,
.form li.error select,
.form li.error textarea { background-color:#FBE3E4; }
.form li.error label, .form li.error span.label, .form li.error p.error { color:#8A1F11; }
.form li.controlset div label, .form li.controlset div label { color:#222; }

/* Label columns width are the blueprint span width - 20px (to allow for the right margin and padding between the label and input). */
.form-labels-span-6 label, 
.form-labels-span-6 label.title, 
.form-labels-span-6 span.label { width:220px; }
.form-labels-span-6 li p.note { margin-left:240px; }
.form-labels-span-6 .form-row-align-values,
.form-labels-span-6 li.controlset div { padding-left:240px; }

.form-labels-span-5 label, 
.form-labels-span-5 label.title, 
.form-labels-span-5 span.label { width:180px; }
.form-labels-span-5 li p.note { margin-left:200px; }
.form-labels-span-5 .form-row-align-values,
.form-labels-span-5 li.controlset div { padding-left:200px; }

.form-labels-span-4 label, 
.form-labels-span-4 label.title, 
.form-labels-span-4 span.label { width:140px }
.form-labels-span-4 li p.note { margin-left:160px }
.form-labels-span-4 .form-row-align-values,
.form-labels-span-4 li.controlset div { padding-left:160px; }

.form-labels-span-3 label, 
.form-labels-span-3 label.title, 
.form-labels-span-3 span.label { width:100px; }
.form-labels-span-3 li p.note { margin-left:120px; }
.form-labels-span-3 .form-row-align-values,
.form-labels-span-3 li.controlset div { padding-left:120px; }

.form-labels-span-2 label, 
.form-labels-span-2 label.title, 
.form-labels-span-2 span.label { width:60px; }
.form-labels-span-2 li p.note { margin-left:80px; }
.form-labels-span-2 .form-row-align-values,
.form-labels-span-2 li.controlset div { padding-left:80px; }

/* Configure value column widths */
.form-values-span-12 span.value,
.form-values-span-12 input[type='text'], 
.form-values-span-12 input[type='password'], 
.form-values-span-12 input.text, 
.form-values-span-12 input.title, 
.form .form-values-span-12 input.title, 
.form-values-span-12 textarea,
.form .form-values-span-12 textarea {width:472px; }
.form-values-span-12 select {width:480px; }

.form-values-span-11 span.value,
.form-values-span-11 input[type='text'], 
.form-values-span-11 input[type='password'], 
.form-values-span-11 input.text, 
.form-values-span-11 input.title, 
.form .form-values-span-11 input.title, 
.form-values-span-11 textarea,
.form .form-values-span-11 textarea {width:432px; }
.form-values-span-11 select {width:440px; }

.form-values-span-10 span.value,
.form-values-span-10 input[type='text'], 
.form-values-span-10 input[type='password'], 
.form-values-span-10 input.text, 
.form-values-span-10 input.title, 
.form .form-values-span-10 input.title, 
.form-values-span-10 textarea,
.form .form-values-span-10 textarea {width:392px; }
.form-values-span-10 select {width:400px; }

.form-values-span-9 span.value,
.form-values-span-9 input[type='text'],
.form-values-span-9 input[type='password'], 
.form-values-span-9 input.text, 
.form-values-span-9 input.title, 
.form .form-values-span-9 input.title, 
.form-values-span-9 textarea, 
.form .form-values-span-9 textarea {width:352px; }
.form-values-span-9 select {width:360px; }

.form-values-span-8 span.value,
.form-values-span-8 input[type='text'], 
.form-values-span-8 input[type='password'], 
.form-values-span-8 input.text, 
.form-values-span-8 input.title, 
.form .form-values-span-8 input.title, 
.form-values-span-8 textarea, 
.form .form-values-span-8 textarea {width:312px; }
.form-values-span-8 select {width:320px; }

.form-values-span-7 span.value,
.form-values-span-7 input[type='text'], 
.form-values-span-7 input[type='password'], 
.form-values-span-7 input.text, 
.form-values-span-7 input.title, 
.form .form-values-span-7 input.title, 
.form-values-span-7 textarea, 
.form .form-values-span-7 textarea {width:272px; }
.form-values-span-7 select {width:280px; }

.form-values-span-6 span.value,
.form-values-span-6 input[type='text'], 
.form-values-span-6 input[type='password'], 
.form-values-span-6 input.text, 
.form-values-span-6 input.title, 
.form .form-values-span-6 input.title, 
.form-values-span-6 textarea, 
.form .form-values-span-6 textarea {width:232px; }
.form-values-span-6 select {width:240px; }

.form-values-span-5 span.value,
.form-values-span-5 input[type='text'], 
.form-values-span-5 input[type='password'], 
.form-values-span-5 input.text, 
.form-values-span-5 input.title, 
.form .form-values-span-5 input.title, 
.form-values-span-5 textarea, 
.form .form-values-span-5 textarea {width:192px; }
.form-values-span-5 select {width:200px; }

.form-values-span-4 span.value,
.form-values-span-4 input[type='text'], 
.form-values-span-4 input[type='password'], 
.form-values-span-4 input.text, 
.form-values-span-4 input.title, 
.form .form-values-span-4 input.title, 
.form-values-span-4 textarea, 
.form .form-values-span-4 textarea {width:152px; }
.form-values-span-4 select {width:160px; }

.form-values-span-3 span.value,
.form-values-span-3 input[type='text'], 
.form-values-span-3 input[type='password'], 
.form-values-span-3 input.text, 
.form-values-span-3 input.title, 
.form .form-values-span-3 input.title, 
.form-values-span-3 textarea, 
.form .form-values-span-3 textarea {width:112px; }
.form-values-span-3 select {width:120px; }

.form-values-span-2 span.value,
.form-values-span-2 input[type='text'], 
.form-values-span-2 input[type='password'], 
.form-values-span-2 input.text, 
.form-values-span-2 input.title, 
.form .form-values-span-2 input.title, 
.form-values-span-2 textarea, 
.form .form-values-span-2 textarea {width:72px; }
.form-values-span-2 select {width:80px; }

/* Fieldsets */
.form fieldset legend { font-size:1.5em;  }
.form fieldset fieldset legend { font-size:1.2em;line-height:1.25; padding-right:0.2em;}
.form fieldset fieldset { background-color: transparent !important;border-color:#ddd; border-style:double none none; border-width:3px; margin-bottom:0; }
.form fieldset fieldset, .form fieldset fieldset ol { padding-left:0; }

/* Fancy form elements */
fieldset.form-fancy, .form-fancy fieldset { background:#fff url(images/fieldset-bottom-bg.gif) repeat-x scroll center bottom; border-width:1px; -moz-border-radius:4px 6px 6px 6px; border-radius:6px;box-shadow:0 3px 3px rgba(0,0,0,0.1); -moz-box-shadow:0 3px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.1); }
fieldset.form-fancy fieldset, .form-fancy fieldset fieldset { background:#fff;  -moz-border-radius:0; border-radius:0; box-shadow:0; -moz-box-shadow:none;-webkit-box-shadow:none; }
fieldset.form-fancy legend, .form-fancy fieldset legend { font-size:1.5em; padding-left:0.2em; padding-right:0.2em; text-shadow:1px 1px 1px #ddd; }
fieldset.form-fancy fieldset legend, .form-fancy fieldset fieldset legend { padding-left:0; }

input[type="text"].form-fancy, .form-fancy input[type="text"], 
input[type="password"].form-fancy, .form-fancy input[type="password"], 
.form-fancy input.text,
textarea.form-fancy, .form-fancy textarea, 
select.form-fancy, .form-fancy select { background:#fff url(images/input-bg.gif) repeat-x top; border:1px solid #bbb; -moz-border-radius:3px;border-radius:3px}

input[type="text"].form-fancy:focus, .form-fancy input[type="text"]:focus, 
input[type="password"].form-fancy:focus, .form-fancy input[type="password"]:focus, 
.form-fancy input.text:focus,
textarea.form-fancy:focus, .form-fancy textarea:focus, 
select.form-fancy:focus, .form-fancy select:focus {border-color:#0095ff; -moz-box-shadow:0px 0px 3px #0095ff; -webkit-box-shadow:0px 0px 3px #0095ff;}

/*Button Styles*/

/*Defaults*/
.button{background:#ddd;background:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(200,200,200)),color-stop(0.55, rgb(240,240,240)),color-stop(0.56, rgb(250,250,250)));background:-moz-linear-gradient(center bottom,rgb(200,200,200) 0%,rgb(240,240,240) 55%,rgb(250,250,250) 56%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#cccccc');border:solid 1px #555;color:#555;cursor:pointer;display:inline-block;font:bold 12px/1 Arial, Helvetica, sans-serif !important;outline:none;overflow:visible;padding:.5em 1.5em .55em;text-align:center;text-decoration:none;text-shadow:0 1px 0px rgba(255,255,255,.7);vertical-align:baseline;border-radius:.5em;-moz-border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 0 2px #fff inset, 0 1px 2px rgba(0,0,0,.2), 0px 1px 1px #fff inset;box-shadow:0 0 2px #fff inset, 0 1px 2px rgba(0,0,0,.2), 0px 1px 1px #fff inset;width:auto;zoom:1; /* zoom and *display = ie7 hack for display:inline-block */*display:inline}
.button:hover{background:#eee;background:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(210,210,210)),color-stop(0.55, rgb(250,250,250)),color-stop(0.56, rgb(255,255,255)));background:-moz-linear-gradient(center bottom,rgb(210,210,210) 0%,rgb(250,250,250) 55%,rgb(255,255,255) 56%);color:#333;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');}
.button:active{position:relative;top:1px}

/* Positive Actions */
.positive, .ctabtn {color:#ffffcc;border:solid 1px #538312;background:#009900;background:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,102,0)),color-stop(0.5, rgb(0,194,0)),color-stop(0.51, rgb(0,209,0)),color-stop(0.99, rgb(0,199,0)),color-stop(1, rgba(255,255,255,0.7)));background:-moz-linear-gradient(center bottom,rgb(0,102,0) 0%,rgb(0,194,0) 50%,rgb(0,209,0) 51%,rgb(0,199,0) 99%, rgba(255,255,255,.7) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cc00', endColorstr='#006600');text-shadow:0 1px 1px rgba(0,0,0,.7)}
.positive:hover, .ctabtn:hover{background:#00cc00;background:-webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(0,117,0)),color-stop(0.5, rgb(0,204,0)),color-stop(0.51, rgb(0,214,0)),color-stop(.99, rgb(0,224,0)),color-stop(1, rgba(255,255,255,0.7)));background:-moz-linear-gradient(center bottom,rgb(0,117,0) 0%,rgb(0,204,0) 50%,rgb(0,214,0) 51%,rgb(0,224,0) 99%, rgba(255,255,255,0.7) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33ff33', endColorstr='#006600');color:#fff;text-shadow:1px 1px 2px rgba(255,255,255,.3), -1px -1px 2px rgba(255,255,255,.3)}
.positive:active{position:relative;top:1px}

/* Small Buttons */
.smallbtn{font-size:10px !important;padding:.2em 0.5em .275em !important}

/* CTA */
.ctabtn{font-family:'Droid Sans', Arial, Sans-Serif!important;font-size:120% !important;padding:1em 1.5em;text-transform:uppercase}