/* --------------------------------------------------------------

   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)

-------------------------------------------------------------- */

label       { font-weight: bold; }
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }


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

input[type=text], input[type=password],
input[type=date], input[type=number],
input.text, input.title,
textarea, select {
  background-color: #f0f0f0;
  border:1px solid #aaaaaa;
  padding: 2px 4px;
  color: #545454;
  margin: 2px;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border-color:#666;
  color: #000;
}

input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

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

input[type=checkbox], input[type=radio],
input.checkbox, input.radio {
  position:relative; top:.25em;
}

form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/*
* @section button
*/


.button, button, a.button, input[type=submit] {
  font-family: arial, verdana, tahoma, sans-serif;

  background: #f0f0f0;
  border: 1px solid #cacaca;
  
  color: #2f2f2f;
  
  font-size: 1em;
  font-weight: normal;
  text-decoration: none;
  line-height: 18px;
  
  padding: 2px 4px;
  margin: 2px;
  position: relative;
  
  text-align: center;
  vertical-align: baseline;
  
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline;
}

.button:hover, button:hover, a.button:hover, input[type=submit]:hover {
  background-color: #62bbe9;
  border: 1px solid #949494;
  color: #ffffff;
  cursor: pointer;
}

.button.pushed,
button.pushed,
a.button.pushed,
.button:active,
button:active,
a.button:active,
input[type=submit]:active {
  background: #005d8d;
  border: 1px solid #949494;
  color: #ffffff;
}

.button.disabled, button.disabled, a.button.disabled,input[type=submit].disabled {
  background: #c9c9c9;
  border: 1px solid #c9c9c9;
  color: #7b7b7b;
}

.button .icon, button .icon, a.button .icon, input[type=submit] .icon {
	display: block;
	float: left;
	margin: 1px 4px 1px 0;
}

.button.positive, button.positive, input[type=submit] .positiove {
	background: #66cc33 url(./images/button.png) scroll repeat-x 0 0;
	color: #ffffff;
	border-color: transparent;
	}

.button.positive:hover, button.positive:hover {
	background: #339933;
	color: #ffffff;
	border-color: transparent;
	}
	
.button.negative, button.negative {
	background: #e62727;
	color: #ffffff;
	}

.button.negative:hover, button.negative:hover {
	background: #fbe3e4;
	color: #d12f19;
	}

.button.icon-only {
	padding-left: 4px;
	padding-right: 4px;
	}
	
	.button.icon-only .icon {
		margin-right: 0;
		margin-left: 0;
		}

.button.title, 
button.title, 
a.button.title, 
input[type=submit].title {
  text-transform: uppercase;
  padding: 5px 11px;
}
		
/*
* @section icon
*/	
	
.icon {
	width: 16px;
	height: 16px;
}