/* Set a minimum width and height for the page when it is embedded.
 * The width was chosen because it allows for the page number, the 'save for later'
 * button and the 'test mode' flag to fit onto one line without wrapping, and was
 * therefore the smallest size that didn't cause major breakage.
 * However, this is clearly not enough for all surveys, particularly if there is an
 * Annalisa involved.  It is up to the embedding page to adjust this minimum width
 * if necessary.
 * The height was chosen as a value that ensures the 'save for later' dialog fits
 * onto the screen, without scroll-bars appearing.
 */
	#MAFOutput {
		min-width: 350px;
		min-height: 300px;
	}

	h3 {
		background-color: #F6F6FF;
		border: 1px solid #E6E6EF;
		border-left: none;
		border-right: none;
		padding: 0.2em 1em;
		margin: 0.5em 0;

	/* Expand over the left/right margins, so it takes up full screen width */
		position: relative;
		left: -1.4em;
		margin-right: -2.7em;
	}

	#DeveloperOutput h3 {
		left: -0.95em;
		top: -1em;
		margin-right: -1.9em !important;
		border: 1px dashed #CCCCCC;
	}

	hr {
		border: none;
		border-bottom: 1px solid #CCCCCC;
		height: 1px;
		margin: 0.5em 0;

	/* Expand over the left/right margins, so it takes up full screen width */
		position: relative;
		left: -0.9em;
		margin-right: -1.8em;
	}

	table {
		border-collapse: collapse;
		margin: 0.2em auto 1em auto;
	}

	table, td, th {
		border: 1px solid #9999FF;
	}

	td, th {
		padding: 0.2em 0.4em;
	}

	th {
		background-color: #C0C0FF;
	}

	th.tblSecondaryHeading {
		background-color: #E0E0FF;
		text-align: left;
	}

	table.tblCompact td,
	table.tblCompact th {
		padding: 0;
	}

	table.tblBorderless,
	table.tblBorderless td,
	table.tblBorderless th {
		border: none;
	}

	table.tblBorderless th {
		background-color: transparent;
	}

	.RowJustSaved td {
		background-color: #FFFF66;
	}

	.DataUpdated {
		display: block;
		padding: 0.2em 0.4em;
		margin: 0.2em 0;

		border: 1px solid #9999CC;
		border-width: 1px 3px;
		color: #666699;
		background-color: #FFFFD0;

		font-weight: bold;

		text-align: center;
	}

	#MissingJSWarning,
	#CookiesDisabledWarning {
		font-size: 0.75em;
		padding: 0.4em;
		border: 1px solid #CC0000;
		border-width: 1px 3px;
		background-color: #FFFFE0;
	}

	#MissingJSWarning h2,
	#CookiesDisabledWarning h2,
	#MissingJSWarning p,
	#CookiesDisabledWarning p {
		margin: 0;
	}

	.MissingFlashPlayer,
	#page-survey_respond #MissingJSWarning,
	#page-survey_respond #CookiesDisabledWarning,
	#MAFOutput #MissingJSWarning,
	#MAFOutput #CookiesDisabledWarning {
		background-image: url(https://elicia.org.uk/hosting/index.php?Request=image&Path=images%2Fal_logo_large_trans.png);
		background-repeat: no-repeat;
		background-position: -60px -45px;
		background-color: #F5F7F7;

		text-align: center;

		padding: 0.2em 0.4em 1em 150px;
	}

	#page-survey_respond #MissingJSWarning,
	#page-survey_respond #CookiesDisabledWarning,
	#MAFOutput #MissingJSWarning,
	#MAFOutput #CookiesDisabledWarning {
		color: #000000;
		font-size: 0.7em;
		border: 1px solid #9999FF;
		height: 100px;
		width: 400px;
		padding-left: 180px;
		padding-top: 2em;
		margin: 1em auto;
	}

	#page-survey_respond #CookiesDisabledWarning p,
	#MAFOutput #CookiesDisabledWarning p {
		padding: 0 2em;
	}

/*************** NOTIFICATIONS PANEL ***************/

	#NotificationsPanel {
		margin-top: 0.5em;
	}

	#NotificationsPanel p,
	p.Information,
	div.Information,
	p.DataUpdated,
	div.DataUpdated,
	p.Error,
	div.Error,
	p.Warning,
	div.Warning {
		margin: 0;
		margin-bottom: 0.5em;

		padding: 0.2em 0.4em;

		color: #333399;
		border: 1px solid #9999CC;
		border-left-width: 3px;
		background-color: #F0F0FF;
	}

	#NotificationsPanel p.DataUpdated,
	p.DataUpdated,
	div.DataUpdated {
		color: #339933;
		border-color: #99CC99;
		background-color: #F0FFF0;
	}

	#NotificationsPanel p.Error,
	p.Error,
	div.Error {
		color: #CC0000;
		border-color: #CC0000;
		background-color: #FFF0F0;
	}

	#NotificationsPanel p.Warning,
	p.Warning,
	div.Warning {
		color: #FF9966;
		border-color: #FF9966;
		background-color: #FFF9F0;
	}

/********* Handy stylings for boxes, etc. *********/

	.Important {
		color: #990000;
		border: 1px solid #990000;
		background-color: #FFFF99;
		padding: 0.5em;
		margin: 0;
		margin-top: 1em;
		border-width: 1px 3px;
	}

	.BoxedContent {
		border: 1px solid #9999FF;
		border-width: 1px 3px;
		background-color: #F0F0FF;
		padding: 0.5em;
		margin: 1em 0;
	}

	.BoxedContent h3 {
		top: -0.4em;
		left: -0.41em;
		margin: 0;
		margin-right: -0.82em;
		border-top: none;
		border-color: #B0B0FF;
		padding-left: 0.5em;
		color: #333350;

	}

	.Notes {
		border: 1px solid #999999;
		padding: 0.5em;
		font-size: 0.9em;
		color: #333333;
		margin: 0;
		margin-top: 0.5em;
	}

	.Notes h3 {
		margin-top: 0;
	}

/*** Note styling ***/

	.Note {
		border: 1px solid #CCCCFF;
		background-color: #F0F0FF;
		float: left;
		font-size: 0.75em;

		padding: 0.075em 0.2em;
		margin: 0 0.5em 0.5em 0;
	}

	.NoteHeader {
		font-weight: bold;
	}

	.NoteContents {
		margin-top: 0.2em;
		padding: 0.2em;
		background-color: #F9F9FF;
		display: none;
	}

	.NoteVisible {
		float: none;
		margin-right: 0;
	}

	.NoteVisible .NoteContents {
		display: block;
	}

/* Loader - displayed while JS is initialising */
	#Loader {
		font-size: 1.5em;
		font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
		padding: 1em;
		color: #669966;
		background-color: #F0FFF0;
		border: 2px solid #669966;
		margin: 0.5em 2em;
		text-align: center;
	}

/* Mark own items */
	.OwnObject .ObjectName {
		font-weight: bold;
	}

	.SharingInfo {
		font-weight: normal;
		font-size: 0.75em;
		display: block;
		color: #999999;
	}

/* Disabled items in object lists */
	.DisabledListItem {
		color: #CCCCCC;
		font-style: italic;
		display: block;
		text-align: center;
	}

/* inactive/non-current/old rows in tables */
	.Inactive {
		color: #666666;
		background-color: #E0E0E0;
	}

/******* FORM LAYOUT STUFF FROM CaSS *******/
/* I have copied these CSS definitions from CaSS, where they apply to all input
 * forms on the system.  In Elicia they shouldn't apply to all forms, so I have
 * modified the rules so they only apply to forms that have the StandardInputForm
 * class.  This means that we can enable it on a form-by-form basis as individual
 * forms are tested.  This is necessary because the forms in Elicia were not written
 * with this in mind, and so may not have the appropriate HTML structure.  This way
 * we can test each form before it is enabled, and minimise the risk of breakages.
 * There are also a number of forms in Elicia that use these elements but which use
 * their own dedicated forming, e.g. the survey_edit and survey_respond pages.  These
 * will never be updated to use these CaSS stylings, and this is another reason why
 * we need to restrict it to forms with a given class only.
 */

	.StandardInputForm {
		margin: 1em 2em;
	}

	.StandardInputForm p {
		padding: 2px 0;
		margin: 0;
		clear: left;
	}

	.StandardInputForm div {
		margin: 0 0 0 0;
		/*clear: left;*/
	}

	.StandardInputForm label,
	.StandardInputForm legend {
		font-weight: bold;
		vertical-align: baseline;
		width: 12em;
		float: left;
		padding-right: 1em;
	}

/* Use the ButtonGroup class to indent buttons to match the other inputs. */
	.StandardInputForm .ButtonGroup {
	/* Clear any floats. */
		clear: left;

	/* Indentation is 12em label width + 1em right-padding */
		margin-left: 13em;

	/* A small top-margin to separate out a bit. */
		margin-top: 0.5em;
	}

	.StandardInputForm .ButtonGroup input {
	/* Add a bit of space between buttons. */
		margin-right: 1em;
	}

	/* Legends are fucked in IE so I've stopped using them.  Using label instead.
	.StandardInputForm legend {
	position: relative;
	}
	*/

	.StandardInputForm label {
		min-height: 1em;
		margin: 0;
		/*  padding: 0;*/
		min-width: 5em;
		clear: left;
	}

	.StandardInputForm input,
	.StandardInputForm select,
	.StandardInputForm textarea,
	.StandardInputForm label {
		min-height: 1.3em;
	}

	.StandardInputForm select {
		font-size: 0.7em;
	}

	.StandardInputForm fieldset {
		border: 0;
		padding: 0;
		margin: 0;

	/*	border: 1px solid #000000; /* for testing */
	}

	.StandardInputForm fieldset label {
		font-weight: normal;
		display: inline;
		float: none;
		text-align: left;
		width: auto;
	/*  border: 1px solid #00CCFF; /* for testing */
	}

/* REMOVED FOR NOW, BECAUSE IT AFFECTS BUTTONS ALSO.
	.StandardInputForm input,
	.StandardInputForm select,
	.StandardInputForm textarea {
		background-color: #EAE0F8;
		border: 1px solid #999999;
		margin: 3px;
		padding: 0;
		vertical-align: middle;
	}
*/
	.StandardInputForm input,
	.StandardInputForm textarea {
		padding: 0 2px;
	}

	.DataEntryError {
		border: 1px solid #FF0000 !important;
	}

	fieldset.DataEntryError {
	/* What is this all about? One of Alex's fixes? */
		border: 1px solid #FF0000 !important;
		border: none;
	}

	.DataErrorDescription {
		color: #CC0000;
	/*	font-weight: bold;*/
	}

	.DataEntryNote {
		color: #999999;
		font-size: 0.9em;
	}

/* SEEMS TO AFFECT BORDER - DISABLED FOR NOW
	.StandardInputForm .RequiredData {
		background-color: #FFFFE0;
		color: #000000;
	}
*/
	.StandardInputForm .DataBlock {
		padding: 5px 10px;
		margin: 5px 0 5px -10px;
		border: 1px dashed #7DB07D;
	}

	.StandardInputForm .FieldsetElement {
		white-space: nowrap;
		display: inline;
	}

/******* END: FORM LAYOUT STUFF FROM CaSS *******/

/******* PAGE-SPECIFIC: CREDITS *******/

/* Give a bit more white-space to the main credits. */
	#page-help_credits #MainCredits {
		margin-top: 2em;
		margin-bottom: 2em !important;
	}


/******************* TIDY UP JQUERY UI ELEMENTS ***********************/
/* The base JQuery UI skin is, for some unfathomable reason, horrible.
 * Here we make a few tweaks to make it a bit more usable.
 * TODO: Buttons are styled differently to the standard browser buttons.
 *		 We should adopt a default button style that we can apply to standard
 *		 buttons AND jQuery UI buttons, so there is a consistent look and feel.
 *		 Or else
 */

/* Bring the overall font-size down.  For some reason, it is increased to 1.1em in
 * the default stylesheet!
 */

	.ui-widget {
		font-size: 0.909em;
	}

/* Additionally, shrink the input widgets a bit further, as they come out a bit
 * large at the moment.
 */
	.ui-widget input,
	.ui-widget select,
	.ui-widget textarea,
	.ui-widget button,
	.ui-datepicker .ui-datepicker-title select {
		font-size: 0.9em;
	}

/* Style the title bar to remove the padding around it, and make it more like
 * a standard title bar (instead of a bordered heading).
 */

	.ui-dialog {
		padding: 0;
	}

	.ui-dialog-titlebar {
		border-width: 0 0 1px 0;
		-moz-border-radius: 0;
		-khtml-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
	}

/* Remove unwanted space from the button pane at the bottom of the dialog box,
 * and give it a slightly different backgroundd color, to better separate it from
 * the box's content.
 */
	.ui-dialog .ui-dialog-buttonpane {
		margin: 0;
		padding: 0 1em;
		background-color: #F0F0FF;
	}

/* Add drop-shadow to the dialog box, to make it 'hover' above the page. */
	.ui-dialog {
		-moz-box-shadow: 1px 1px 0 #BFC2A3, 1px 1px 2px #B0B68E;
		-khtml-box-shadow: 1px 1px 0 #BFC2A3, 1px 1px 2px #B0B68E;
		-webkit-box-shadow: 1px 1px 0 #BFC2A3, 1px 1px 2px #B0B68E;
		box-shadow: 1px 1px 0 #BFC2A3, 1px 1px 2px #B0B68E;
	}

/* Datepicker: Tweak size and positioning of the prev/next buttons so they are
 * aligned neatly within the header section, now that the size of the select boxes
 * has been shrunk slightly (above).
 */

	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		height: 1.5em;
		top: 3px;
	}

	.ui-datepicker .ui-datepicker-prev-hover,
	.ui-datepicker .ui-datepicker-next-hover {
		top: 2px;
	}

	.ui-datepicker .ui-datepicker-prev {
		left: 3px;
	}

	.ui-datepicker .ui-datepicker-prev-hover {
		left: 2px;
	}

	.ui-datepicker .ui-datepicker-next {
		right: 3px;
	}

	.ui-datepicker .ui-datepicker-next-hover {
		right: 2px;
	}

/* Datepicker: Give a bit of space between the month/year fields. */

	.ui-datepicker select.ui-datepicker-month {
		margin-right: 2px;
	}

/******************* END JQUERY UI ELEMENTS ***********************/

/*** IMPROVE LAYOUT OF TINYMCE WHEN IN POPUP DIALOG BOX ***/

	.ui-dialog #TinyWrapper {
		padding: 0;
	}

	.ui-dialog #TinyContainer_tbl {
		border: none;
	}

	.ui-dialog #TinyWrapper table.mceLayout tr.mceFirst td {
		border-top: none;
	}

	.ui-dialog #TinyWrapper table.mceLayout tr.mceLast td {
		border-bottom: none;
	}

/* Don't want the icon for out text-based button. */

	#TinyContainer_responseplaceholder .mceIcon {
		display: none;
	}

	#TinyContainer_responseplaceholder .mceButtonLabel {
		padding-left: 6px;
	}