form.flexform {
	overflow: hidden;
}

form.flexform fieldset {
    border:none;
}

form.flexform dt.label {
   clear:both;
   width:33%;
   max-width:12em;
   float:left;
   text-align:right;
   line-height: 2.5em;
}

form.flexform dd.field {
    float:left;
    width:66%;
/*   min-width:21em;*/
    margin:0 0 0.5em 0.25em;
    overflow: visible;
}

form.flexform dd.field > div.widget {
	width: auto;
	margin: 5px;
}

form.flexform dd.field > div.widget > * {
	max-width:100%;
	border-radius: 5px;
	margin:-5px;
	padding:3px;
/*	width:100% */
}

/* since our dd.label has a max width of 12em and we want to switch when
	we scale below that point, and we know that the label comprises 1/3 of
	the total width (excluding margins, borders and padding overall), we can
	set the media switching point at 12em*3, or 36em.

	Of course, margins etc. do matter so this would need adjustment.

*/
@media (max-width: 36em) {
	form.flexform dt.label {
		text-align: left;
		width: 100%;
	}
}