/* ------------------ GENERAL UTILITY STYLES ------------------ */
.hide { display: none; margin: 0; padding: 0; }	/* Hides an element */
div.rhs { float: right; text-align: right; }
div.lhs { float: left; text-align: left; margin-left: 5px; }

/* ------------------ FORMS ------------------ */
div.inputpair { clear: both; margin: 10px 0 0 0; vertical-align: middle; }
div.inputpair label { width: 150px; float: left; text-align: left; display: block; margin-left: 10px }	/* Slightly increase letter spacing in an effort to improve readability */
div.inputpair label.brief { padding: 0 0 0 0; width: 90px; }	/* Useful for indented labels, e.g. when selecting dates "to" & "from" etc. */
div.inputpair label.fullwidth { padding: 0 0 0 0; width: 600px; }	/* Useful for long labels stretching above a field */
div.inputpair label.indent { padding: 0 0 0 30px; width: 220px; }	/* Useful for indented labels, e.g. when selecting dates "to" & "from" etc. */
div.inputpair label.indent-large { padding: 0 0 0 75px; width: 175px; }	/* Useful for indented labels, e.g. when selecting dates "to" & "from" etc. */
div.inputpair label.required { background: url("images/req.gif") top left no-repeat; padding: 0 0 0 10px; width: 240px; }
span.required { background: url("images/req.gif") top left no-repeat; padding: 0 0 0 8px; margin: 0 0 0 0px; background-position: 3px 5px; }

span.help { background: url("images/help.gif") top left no-repeat; padding: 0 0 0 8px; margin: 0 0 0 3px; cursor: pointer; }

div.inputpair label.radio { width: auto; text-align: left; display: inline; margin: 0 20px 0 5px; }

div.inputpair input {float: left;margin: 0 0 0 5px;padding: 1px 2px;}
div.inputpair textarea {float: left;margin: 0 0 0 5px;padding: 1px 2px;}
div.inputpair select {float: left;margin: 0 0 0 5px;padding: 0 2px;}
div.inputpair span.ReadBox {float: left;margin: 0 0 0 5px;padding: 2px 4px 2px 4px;}
div.inputpair fieldset {float: left;margin: 0 0 0 5px;padding: 0;}
div.inputpair div.ReadBox {overflow: auto;margin: 0 0 0 5px;padding: 1px 4px 2px 4px;}
div.inputpair fieldset select { border: 0; margin: 0; padding: 0; }

/* div.inputpair input.alert, div.inputpair select.alert, div.inputpair textarea.alert { border: 3px solid #f16422; } */	/* add "alert" class to form fields that require attention, e.g. in tandem with form validation messages */
div.inputpair input.date { width: 100px; }	/* different field wistdh applied depending on what is being input */
div.inputpair input.tiny, div.inputpair span.tiny { width: 70px; }
div.inputpair input.short, div.inputpair span.short { width: 156px; }
div.inputpair input.medium, div.inputpair span.medium { width: 256px; }
div.inputpair select.medium, div.inputpair span.medium { width: 262px; }
div.inputpair input.long { width: 356px; }
div.inputpair input.file { width: 500px; }
div.inputpair input[type='checkbox'] { padding:0; border: 0; background: none; width: 15px; }
div.inputpair textarea { padding: 5px; }
/* div.inputpair input:focus, input.sffocus, div.inputpair textarea:focus, textarea.sffocus { background: #e4e1cc; } */
div.inputpair input.checkbox, div.inputpair input.radio { padding: 0; border: 0; background: none; width: 15px; }
div.inputpair img {	margin: 0 0 -5px 5px; padding: 0; float: left; }

/* Buttons with hand-drawn borders */
div.buttonpanel { clear: both; padding: 20px 20px 20px 255px; }
div.buttonpanel input[type="submit"], a.button, div.inputpair input[type="submit"] {
	text-transform: uppercase;
	height: 27px;
	padding: 0;
	margin: 0 20px 0 0;
	border: 0;
	background: #fff url(images/sprite.gif) 0 100px no-repeat;
	}
div.inputpair input[type="submit"].inline {
	height: 18px;
	background-image: url(images/sprite-inline.gif);
	margin: 0 0 0 10px;
}
input.rhs, a.rhs {float:right; margin-right: 5px;}
.spacer { margin-top: 5px; }

.textbutton { display: inline-block; width: 60px; margin: 3px 5px 0 4px }

div.whitepanel { background-color: White; padding: 5px; width: 600px }
div.widewhitepanel { background-color: White; padding: 5px; width: 800px }
div.list { width: 580px; padding: 10px }
div.whitepanel h2, div.widewhitepanel h2 { margin: 2px 0px 5px 5px }
div.greypanel { background-color: #ECECEC; padding: 7px 4px 15px 4px; margin: 35px 5px 10px 5px; width: 580px; }

/* ------------------ CLEARFIX ------------------ */
/* NB: Use class="clearfix" on container <div>s that contain floated elements - this will ensure that the container <div> is full-height. */
.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; }
.clearfix { display:inline-block; }
.clearfix { display:block; }

.error { width:560px; margin:2px 0px 5px 5px; }
.helptext { float: right; display: block; width: 400px; padding: 5px 13px 0px 0px; font-weight:100;}