@import 'reset.css';

form {
  padding: 10px;
}

form h1 {
  font-size: 150%;
  margin-bottom: 0.25em;
}

/* FORM ELEMENT DEFAULTS */
input[type~='text'],input[type~='password'],input[type~='file'],textarea, select {
    border : 1px solid #AAA;
    background-color : #F8F8F8;
    font-size: 100%;
    padding: 4px;
    width: 200px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: 18px;
}

input[type~='checkbox'], input[type~='radio'] { margin-left: 20px; }
textarea { height: 100px; }

/* ELEMENT WIDTHS, STYLED TO FIT IN 66/44 GRID */
input.xxwide, textarea.xxwide, select.xxwide { width : 294px; }
input.xwide, textarea.xwide, select.xwide { width : 250px; }
input.wide, textarea.wide, select.wide { width : 200px; }
input.mid, textarea.mid, select.mid { width : 150px; }
input.narrow, select.narrow { width : 100px; }
input.xnarrow, select.xnarrow { width : 75px; }
input.xxnarrow, select.xxnarrow { width : 50px; }

/* SPECIAL STYLES */
input.date { background : url(images/calendar.png) no-repeat right; width : 8em; }
textarea.short { height : 70px; }
textarea.medium { height : 150px; }
textarea.high { height : 200px; }

/* LABELS */
label { display: block; font-weight: bold; }
label.inline { display: inline; }
label span { color: #f00; font-size: 70%; }

/* LAYOUT */
div.form_row { margin-bottom: 0.35em; overflow: hidden; }

/* ERRORS */
div.error {
  padding-left:20px;
  background-image:url(../clipslip/images/error.png);
  background-repeat: no-repeat;
  background-position: left center;
  color:#F00;
}
div.error label { color: #f00; }
div.error input, div.error textarea, div.error select { border-color: #f00; background: #FFE8E8; color: #f00; }
div.error p { font-size: 12px; color: #f00; margin: 0; padding: 0; }

/* BUTTONS */
input[type='submit'] {
  background-color: transparent;
  background-image: url(../clipslip/images/buttons.png);
  background-position: -1117px 0px;
  background-repeat: no-repeat;
  border: none;
  height: 52px;
  margin: 0;
  padding: 0;
  text-indent: -9999em;
  width: 92px;
	display: block;
}
input[type='submit'].en {background-image: url(../clipslip/images/buttons-en.png);}
input[type='submit'].es {background-image: url(../clipslip/images/buttons-es.png);}
input[type='submit'].fr {background-image: url(../clipslip/images/buttons-fr.png);}

button:hover, button:focus { background-position: -1117px -70px; }