/*
   reset styles changed by foundation.min.css
   CM1 won't let me place this stylesheet after foundation.min.css, so I added "form" before all of 
   the selectors in order to make these styles override the ones in foundation.min.css.
*/

form select {
	width: auto;
}


form label {
	cursor: default;
	display: inline-block;
	/*margin-bottom: 0em;*/
}

form input[type="text"], form input[type="password"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="month"], form input[type="week"], form input[type="email"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="time"], form input[type="url"], form textarea {
	display: inline-block;
	margin: 0em;
	width: auto;
}

form input[type="file"], form input[type="checkbox"], form input[type="radio"], select {
	margin: 0em;
}


form table {
	border-width: 0px;
}


/*
   styles specific to the forms
*/

form table {
	border-collapse: collapse;
}

form table td {
	padding: 5px;
}

td:first-child {
	text-align: right;
}

td[colspan] {
	text-align: left;
}

tr.section-end td {
	padding-bottom: 10px;
}

tr.section-start td {
	padding-top: 10px;
	border-top: 1px dotted #aaa;
}

td.field {
	padding-top: 0px;
	padding-bottom: 10px;
}

label::after {
	content: "\a0\a0";  /* \a0 is  . two of them are the same width as an asterisk. this keeps everything lined up */
	margin-left: 5px;
}

label.required::after {
	content: "*";
}

form input[type="checkbox"], form input[type="radio"] {
	padding: 0px;  /* IE8 has padding on these */
	margin: 3px 6px;
	vertical-align: middle;
}


#comments {
	width: 100%;
	height: 7em;
}

#first-name, #last-name {
	width: 9em;  /* 120px */
}

#email {
	width: 15em;  /* 200px */
}

#company, #job-title {
	width: 18.75em;  /* 250px */
}

#address1, #address2 {
	width: 15em;  /* 200px */
}

#city {
	width: 11.25em;  /* 150px */
}

#state {
	width: 2.25em;  /* 30px */
}

#zip-code {
	width: 5.63em;  /* 75px */
}


#serial-number {
	width: 11.25em;  /* 150px */
}

#contact-name {
	width: 18.75em;  /* 250px */
}

#phone {
	width: 11.25em;  /* 150px */
}