/* CSS Document for the "Haze" CoffeeCup Software HTML Editor Template
   Copyright 2008 CoffeeCup Software - coffeecup.com */

/*##############################################################
  Eric Meyer's Latest version of Reset.css (includes Baseline)
##############################################################*/ 

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {border: 0}
table {border-collapse: collapse; border-spacing: 0}
ul {list-style: none}
q:before, q:after,
blockquote:before, blockquote:after {content: ""}

/*#######################
  Element Styles 
#######################*/

body {font-size:14px; font-family: Arial, Verdana, Helvetica, sans-serif; color:#282828; background:#030303 url(../images/body_bg_blue.jpg) right top no-repeat}
h1 {padding:25px 0 25px 25px; font-size:2em; color:#fff;}
h2, h3, h4, h5, p, ul, ol, dl {margin:15px 0}
h2, h3, h4, h5 {font-weight:bold}
h2 {font-size:26px}
h3 {font-size:1.25em}
h4 {font-size:1.15em}
h5 {font-size:1em; font-style:italic; color:gray}
a {color:#1ab2c0; outline:none}
	a:hover {text-decoration:none}
dt {margin:15px 0; font-weight:bold}
dd {margin:5px 0 5px 15px}
ol {margin-left:25px}

/*#######################
  Layout Styles 
#######################*/

#wrapper {width:961px; margin:0 auto}

#navigation {margin:0; width:961px; height:47px; background:url(../images/header.png) left top no-repeat}
	#navigation li {float:left; display:inline; margin:15px 35px; font-size:1.15em;}
		#navigation li a {color:#fff; text-decoration:none}
			#navigation li a:hover {text-decoration:underline}

#content {clear:both; float:left; padding:45px; background-color:#fff}	
	#content p {line-height:1.25em}
	#content ul {margin-left:25px; list-style-type:disc}
		#content li {margin:10px 0}	
	#intro img {float:left; display:inline; margin-right:15px}
	#left_column {clear:both; float:left; display:inline; margin-right:15px; width:565px}
	#right_column {float:right; width:270px}
    #right_connect {float:right; width:270px; padding-left:15px; background-color:#dbe9f6}
		#left_column p, #right_column p, #right_connect p {font-size:14px}
	#content .two_columns {float:left; display:inline; width:420px; margin-right:15px}
    
	
/* Form Styles */
input, textarea {padding:3px; font-size:.95em; font-family:Helvetica, Arial, Verdana, sans-serif; font-style:italic; color:gray}
input {width:250px}
textarea {width:350px; height:150px}
#submit {width:100px; font-weight:bold; color:#000; font-style:normal}
	
#footer {clear:both; padding:50px 0 30px 0; font-size:.9em; font-style:italic; color:gray}
 * Select a sans-serif font for all fields.
 */
* {
    font-family: Ensign, Chalkboard, Digital, Techno, Liberal, Gadget, Verdana, Helvetica, sans-serif;
}

/*
 * 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:
 *  <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"] {
    margin-left:1%;
    margin-right:0;
    width:15em;
}

/*
 * Class for a small input field.
 */
div.TectiteFormDesignerField input[type="text"].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 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;
}

/*
 * 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;
}

/*
 * 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;
}