/* --------------------------------------------------------------
   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)
-------------------------------------------------------------- */
/*
  A special hack is included for IE8 since it does not apply padding
  correctly on fieldsets
 */
label { 
	font-weight: bold; 
	color: #000033;
}
fieldset { 
	padding:0 1.4em 1.4em 1.4em; 
	margin: 0 0 1.5em 0; 
	border: 1px solid #ccc; 
}
legend { 
	font-weight: bold; 
	font-size:1.2em; 
	margin-top:-0.2em; 
	margin-bottom:1em; 
}

fieldset, #IE8#HACK { 
	padding-top:1.4em; 
}
legend, #IE8#HACK { 
	margin-top:0; 
	margin-bottom:0; 
}

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */
input[type=text], 
input[type=password], 
input[type=url], 
input[type=email],
input.text, 
input.title,
textarea {
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #999999;
	background: url(../img/input_bg.png) 0 0 repeat-x;
    background-color:#fafafa; 
	color: #000033;
    height: 22px;
	opacity: 1;
}
input[type=text]:focus, 
input[type=password]:focus, 
input[type=url]:focus, 
input[type=email]:focus,
input.text:focus, 
input.title:focus,
textarea:focus {
	border-color:#666;
}

select { 
	background: url(../img/input_bg.png) 0 0 repeat-x;
    background-color:#fafafa; 
	border: 1px solid #999999;
	color: #000033;
}

input.text,
input.title { 
	width: 200px; 
	padding:5px; 
}
input.title { 
	font-size:1.5em; 
}
textarea { 
	width: 390px; 
	height: 250px; 
	padding:5px; 
}

input[type=button], 
input[type=submit],
input.button
{
	margin: 5px 0px 0px 0px;
	padding: 0px 5px 0px 5px;
	border: 0px solid #999999;
	background: url(../img/button_bg.png) 0 0 repeat-x;
    background-color:#fafafa; 
	color: #000033;
    height: 27px;
    width: 200px;
	opacity: 1;
	border:0px solid red;
}

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { 
	line-height:3; 
}
form.inline p { 
	margin-bottom:0; 
}


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */
.error,
.alert,
.notice,
.success,
.info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice        { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success       { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info          { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a          { color: #514721; }
.success a         { color: #264409; }
.info a            { color: #205791; }