/** =forms.css
************************************************************
@project  Easel
************************************************************/

/** =inputs
************************************************************
@note Wrap inputs with a div and class with the type (text, select, file, etc)
@note Textareas and password input should get a text class as well as a textarea/password class as need for styling
************************************************************/
input, select, textarea, button { margin: 0; }
input, select, textarea, button, label { vertical-align: top; }

.text,
.textarea,
.select,
.file,
fieldset {
  position: relative;
}
.text,
.textarea,
.select,
.file,
fieldset.multi-line {
  margin-bottom: 1em;
}
textarea,
.text input {
  background: #f3f3f3;
  border: 1px solid #bbb;
  border-top-width: 2px;
  border-bottom-color: #e2e1dd;
  color: #525252;
  padding: 2px;
  font-size: 14px;
  overflow-y: auto;
}
textarea,
.text input,
.error.text input:focus,
.error.text textarea:focus {
  border-color: #bbb;
  border-bottom-color: #e2e1dd;
}
select,
textarea,
.text input,
.file input {
  display: block;
}
textarea {
  min-height: 80px;
  line-height: 1.2em; /* for jquery.autogrow */
}
textarea:focus,
.text input:focus {
  background-color: #fdffed;
}
.fancy input {
  font-weight: bold;
  letter-spacing: -.015em;
  font-size: 16px;
}
fieldset.multi-line .text {
  margin-bottom: .25em;
}
.checkbox input,
.radio input,
.file input {
  width: auto !important; /* ensures widths do not get set with grid classes */
}
/* .text,
.textarea,
.select,
.file,
fieldset {
  clear: left;
} */
form span.required-mark {
	color: #8b7453;
}
form .field-note {
	float: right;
	font-size: 11px;
	font-style: italic;
	color: #8b7453;
	line-height: 1;
}
.text input,
textarea {
	width: 300px;
}
.text input {
	height: 17px; /* safari 4 needs height set */
}
.vform .select select {
	margin-top: 3px;
}

/** =labels
************************************************************/
.text label,
.select label,
.file label,
form .label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
	color: #2e251b;
}
.checkbox label,
.radio label {
  margin-left: .25em;
}

/** =legends
************************************************************/
.legend {
  color: #8b7453;
  font-weight: bold;
  font-size: 10px;
  border-bottom: 1px solid #e9e0cb;
  padding: 0 0 .75em;
  margin-bottom: 1.25em;
	text-transform: uppercase;
}

/** =fieldsets
************************************************************/
fieldset { margin: 0 0 1.5em; }

/** =actions
************************************************************
@note container for submit buttons, reset, cancel, etc.
************************************************************/
.actions {
  text-align: right;
  border-top: 2px solid #e9e0cb;
  padding-top: 1.5em;
}

/** =hform
************************************************************
@note Horizontal form (labels and fields side by side)
************************************************************/
.hform .text label,
.hform .select label,
.hform .file label,
.hform .text input,
.hform .select input,
.hform .file input,
.hform select,
.hform textarea {
  float: left
}
.hform label {
  text-align: right;
}
.hform .text label {
  padding: 6px 0 0;
}
.hform .fancy label {
  padding: 8px 0 0;
}
.hform .file label,
.hform .select label {
  line-height: 1.4; /* align label in Firefox */
}
.hform .actions {
  margin-top: .25em;
}
.label-space,
.vform.checkbox,
.vform .checkbox {
  margin-top: 1.35em;
}

/** =vform
************************************************************
@note   Vertical form (labels on top of fields)
************************************************************/

/* @note  for easy switching between vform and hform, othewise just use the 'access' class */
.vform label.replace {
  position: absolute;
  left: -999em;
}
.vform label {
  margin-bottom: .15em;
	float: left;
}
.vform .text input,
.vform select,
.vform .file input,
.vform textarea {
  clear: left
} 

/** =flash messages
************************************************************/
.box {
  padding: 10px;
  border: 1px solid #ccc;
  background: #F0F0F0;
  color: #555;
  min-height: 40px;
}
.box.single-line {
  padding: 15px 10px;
  min-height: 0;
  background-position: 10px 50% !important;
}
.box.error,
.box.failure  { background-color: #FBE3E4; border-color: #FBC2C4; }
.box.notice   { background-color: #FFF6BF; border-color: #FFD324; }
.box.success  { background-color: #E6EFC2; border-color: #C6D880; }

.box.error,
.box.failure,
.box.notice,
.box.success {
  background-repeat: no-repeat;
  background-position: 10px 13px;
  padding-left: 50px;
}
.box.failure,
.box.error    { background-image: url(images/icons/caution-sign-red.png) }
.box.notice   { background-image: url(images/icons/caution-sign.png) }
.box.success  { background-image: url(images/icons/success-badge.png) }

.box a,
.box a:hover {
  background: none;
  border: 0;
  color: #555;
}
.box.error, .box.error a,
.box.failure, .box.failure a  { color: #D12F19; }
.box.notice, .box.notice a    { color: #695E52; }
.box.success, .box.success a  { color: #3D6C10; }
.box a { text-decoration: underline; }

/** =defaulttext jquery plugin
************************************************************
@see git.fusionary.com/fusionary/ee/default_install.git
************************************************************/
.default-text {
  font-style: italic;
  padding: 10px 6px 0;
}

/** =ajax form submission
************************************************************/
form {
  position: relative;
}
form .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
}
.actions {
  position: relative;
  clear: both;
}
form .loading {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  background: #fff;
  padding-top: 1.5em;
  font-style: italic;
  font-weight: bold;
  color: #b3b3b3;
  font-size: 14px;
}
form .loading img {
  vertical-align: middle;
  margin-left: 5px;
}
.error-summary {
  margin-top: 1.5em;
}
.error-summary p {
  font-size: 14px;
  font-weight: bold;
}

/** =validation
************************************************************/
.error input, .error textarea {
  border-color: #c69b9b;
  border-bottom-color: #efcaca;
  background-color: #FBE3E4;
}
.error label,
.error label span.required-mark { color: #D12F19; }
.error-message {
  font-size: 11px;
  color: #D12F19;
  font-weight: normal;
}
.error-summary .error-message {
  margin-left: 5px;
}
.error-summary li {
  background: none;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
}

.hform .error-message,
.vform .error-message{
  position: absolute;
	background: #fff;
	line-height: 1em;
}
.hform .error-message {
  background: url(images/icons/caution-sign-sm.png) no-repeat;
  width: 17px;
  height: 16px;
  top: 6px;
  right: -22px;
}
.vform .error-message,
.radios .error-message,
.checkboxes .error-message {
  top: 0;
  right: 0;
	min-width: 100px;
	text-align: right;
}
.error-summary-message {
	margin-left: 10px;
	font-size: 11px;
}
.content-main div.error-summary ul{margin-top: 0;}

/** =sliding doors buttons (with hover)
************************************************************
@see    http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors
@see    http://git.fusionary.com/?p=fusionary/build_tools.git
************************************************************/
.btn {
  border:0;
  cursor:pointer;
  font-weight:bold;
  padding:0 10px 0 0;
  text-align:center;
  font-size: 10px;
	text-transform: uppercase;
  background: none;
  position: relative;
}
.btn span {
  position:relative;
  display:block;
  white-space:nowrap;
  padding:0 0 0 10px;
  height:26px;
  line-height:24px;
  color:#fefefe;
}

/* removes 1px border in FF */
button::-moz-focus-inner { border: none; padding: 0;}

/* using a sprite instead of four separate images... */
.btn,
.btn span {
  background-image: url(images/buttons/sprite-gray.png);
  background-repeat: no-repeat;
}
.btn {background-position:  100% 0;}
.btn span { background-position: 0 -100px; }
.btn:hover { background-position: 100% -200px; }
.btn:hover span { background-position: 0 -300px; }
.btn:active { background-position: 100% -400px; }
.btn:active span { background-position: 0 -500px; }

.btn:active {
  top:1px;
}
a.btn {
  background-color: transparent !important;
}