body {
	font-family: sans-serif;
	font-size: 80%;
	color: black;
}

/* =============================================================================
 *
 * Form fields.
 *
 * =============================================================================
 */
input[type="text"], input[type="tel"], input[type="email"], input[type="checkbox"], input[type="radio"], textarea, select {
	font-family: sans-serif;
	color: black;
	font-size: 100%;  /* Use the same font-size as the labels */
}
input[type="text"], input[type="tel"], input[type="email"], input[type="checkbox"], textarea, select {
	/* Force a simple border so that it matches the red error border */
	border: 1px solid #ABADB3;
}

input[type="submit"] {
	font-family: sans-serif;
	color: black;
	font-size: 100%;  /* Use the same font-size as the labels */
	margin: 0;
	padding: 2px 6px;
}

input {
	padding: 1px;
}

select {
	margin-left: 0;
}

/*
 * Resizeable text area.
 */
.resizable-textarea textarea {
	display: block;
	margin-bottom: 0;
	width: 100%;
	height: 20%;
	resize: none;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.floatingBlock {
	float: left;
}

table.receipt {
	border-collapse: collapse;
}

table.receipt .recepitComment {
}

/*
 * The table cell that holds the field label.
 */
td.label {
	white-space: nowrap;
	width: 1%;

	/* Some spacing to keep the label and the field columns separated */
	padding-right: 2em;
	padding-left: 0;
}

td.topAlign {
	vertical-align: top;
}

/*
 * Colour for the "(required)" text.
 */
.required {
	color: orange;
}

/*
 * Hint text that appears below the field labels.
 */
.hint {
	/* Spacing to separate the label and the hint */
	margin-top: 2px;

	/* Make the hint a little smaller than the label to de-emphasize it */
	font-size: small;
}

/*
 * The bracket around phone numbers with an area code input box.
 *
 * 	( [__] ) [________]
 * 	^ ^    ^ ^
 * 	| |    | `-- td.phoneNumber
 * 	| |    `---- td.bracketRight
 * 	| `--------- td.areaCode
 * 	`----------- td.bracketLeft
 */
td.bracketLeft  {font-size: 140%; color: #888; width: 1px}
td.bracketRight {font-size: 140%; color: #888; padding-right: 0.5em; width: 1px}
td.areaCode     {width: 1px}
td.phoneNumber  {width: 1px}
td.centered     {text-align: center}

/* Input border */
/*		input[type=text] {
	border: 1px solid gray;
	padding: 2px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}*/

/*
 * WebTrak information box.
 */
.webtrakInformation {
	background-color: #F5F5F5;
	width: 100%;
	padding: 10px 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.webtrakInformation > table {
	width: 100%;
}

.webtrakInformationCell {
        white-space: nowrap;
	padding-right: 1.5em;
}

.webtrakInformationRemoveCell {
	width: 100%;
	text-align: right;
}

/*
 * Space out horizontally arranged radio buttons.
 */
input[type="radio"] + label {
	padding-right: 1.5em;
}

/*
 * A little bit of space between the checkbox and the label.
 */
input[type="checkbox"] + label {
	padding-left: 0.5em;
}

/*
 * Input widths.
 */
input.fullwidth  { width: 350px; }
input.halfwidth  { width: 220px; }
input.smallwidth { width:  60px; }
input.tinywidth  { width:  40px; }

/* =============================================================================
 *
 * Validation errors.
 *
 * =============================================================================
 */

/*
 * Main message at top of page to tell user there are errors.
 */
div.mainInvalidMessage {
	font-weight: bold;
	color: red;
}

div.valid {
	/* Space between the text field and this alert */
	margin-left: 0.5em;

	/* Space for the image (16px for the image + 4px spacing */
	padding-left: 20px;
	background-image: url(/static/images/tick.png);
	background-repeat: no-repeat;

	/* Text style */
	font-weight: bold;
	color: red;

	min-height: 16px;
	display: inline-block;
	*display: inline  /* This is to make inline-block work in IE 7 */
}

div.invalidMessage {

	/* Space between the text field and this alert */
	margin-left: 0.5em;

	/* Space for the image (16px for the image + 4px spacing */
	padding-left: 20px;
	background-image: url(/static/images/exclamation.png);
	background-repeat: no-repeat;

	/* Text style */
	font-weight: bold;
	color: red;

	min-height: 16px;
	display: inline-block;
	*display: inline  /* This is to make inline-block work in IE 7 */
}

div > div.invalidMessage {
	margin-left: 0;
}

/*
 * Border style for invalid input fields.
 */
.invalid input, .invalid textarea, .invalid select {
	border: 1px solid red;
}

/* =============================================================================
 *
 * You shouldn't need to change these when theming.
 *
 * =============================================================================
 */

/*
 * This is the date/time separator.
 */
span.dateTimeSeparator {
	display: inline-block;
	*display: inline  /* This is to make inline-block work in IE 7 */

	text-align: center;
}

/*
 * Hidden style.
 */
.hidden {
	display: none;
	visibility: hidden;
}

table.contactsTable {
	border-collapse:collapse;
}

/*
 * Resizable text area grab handle.
 */
div.grippie {
	background: #EEEEEE url(/static/images/grippie.png) no-repeat scroll center 2px;
	border-color: #DDDDDD;
	border-style: solid;
	border-width: 0pt 1px 1px;
	cursor: s-resize;
	height: 9px;
	overflow: hidden;
	clear: both;
}

/*
 * Main table.
 */
ul.table {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Each table row.
 */
ul.table li {
	clear: both;
	padding-top: 4px;
}
ul.table li:first-child {
	padding-top: 0;
}

ul.table div.label {
	float: left;
	width: 300px;

	/* Padding so that labels don't look like they are top aligned */
	padding-top: 3px;
}

ul.table div.field {
	margin-left: 300px
}

/*
 * On desktop screens arrange the label and fields side-by-side.
 */
@media all and (max-width: 600px) {
	ul.table div.label {
		float: none;
		width: auto;
		padding-top: 0;
	}

	ul.table div.field {
		margin-left: 0;
	}

	ul.table li {
		clear: both;
		padding-top: 8px;
	}
}