
/*
=================================================================================
layout.css:
=================================================================================

this stylesheet defines the layout of page elements - and should be linked first

this stylesheet defines the following page elements:
- margins
- padding
- width/heights
- relative/absolute positions
- top/left/right/bottom positioning
- clears
- floats
- display types

*/

/* form layout styles */
form {margin: 0px; padding: 0px;}
form.formtool {margin: 0px 0px 0px 0px; padding: 0px;}
form.formtool fieldset {margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px;}
body.library form.formtool {width: auto;}
form.formtool fieldset legend {margin: 10px 0px 10px 0px; padding: 0px 5px 0px 5px;}
textarea.formtool {overflow: auto;}
form.formtool fieldset div.notes {margin: 0px 0px 10px 10px; padding: 5px 5px 5px 5px; width: 150px; height: auto; float: right;}
form.formtool fieldset div.notes h4 {margin: 0px; padding: 3px 0px 3px 0px;}
form.formtool fieldset div.notes p {margin: 0em 0em 1.2em 0em;}
form.formtool fieldset div.notes p.last {margin: 0em;}
form.formtool fieldset legend {padding: 0px 3px 0px 9px;}
/* formtool form left column layout styles */
form.formtool div.fieldSection {margin: 0px; padding: 0px; display: block; height: auto;}
/* formtool form left column layout styles */
form.formtool label {margin: 0px 0px 5px 0px; padding: 0px 10px 3px 5px; width: 25%; display: block; float: left; text-align: right;}
/* formtool form right column layout styles */
form.formtool div.fieldAlign {margin: 0px; padding: 0px; width: 70%; display: block; float: left;}




form.formtool label.labelCheckbox,
	form.formtool label.labelRadio {margin: 0px 0px 5px 142px; padding: 0px 0px 0px 0px; width: 200px; height: 1%; display: block; float: none;}

form.formtool fieldset label.labelCheckbox,
	form.formtool fieldset label.labelRadio {margin: 0px 0px 5px 0px; width: 170px;}

p.error {margin: auto 100px auto 100px; padding: 3px 3px 5px 27px;}
form.formtool .error {}
form.formtool .error p.error {margin: 0px 0px 0px 118px; width: 200px;}

form.formtool input,
	form.formtool textarea {margin: 0px 0px 0px 0px; padding: 1px 3px 1px 3px; width: 200px;}

	form.formtool select  {margin: 0 5px 4px 0; padding: 0; width: auto; float: left;}
	form.formtool select.actionDropdown  {margin: 1px 0; width:110px;}
	
	form.formtool textarea {height: 8.0em;}
	form.formtool .richtext textarea {height: auto;}
	

form.formtool input.inputFile {width: 211px;}

form.formtool select.selectOne,
	form.formtool select.selectMultiple {padding: 1px 3px 1px 3px; width: 211px;}

form.formtool input.inputCheckbox,
	form.formtool input.inputRadio,
	input.inputCheckbox,
	input.inputRadio {margin: 0px 0px 0px 140px; padding: 0px 0px 0px 0px; width: 14px; height: 14px; display: inline;}

form.formtool .submit {padding: 0px 0px 0px 140px; width: 214px;}
form.formtool .submit {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: auto; display: inline; float: left;}

form.formtool input.inputSubmit,
	form.formtool input.inputButton,
	input.inputSubmit,
	input.inputButton {margin: 0px 0px 0px 0px; padding: 0px 6px 0px 6px; width: auto;}

form.formtool input[type=checkbox] {width: auto; margin: 0px; padding: 0px;}

form.formtool .submit input.inputSubmit,
	form.formtool .submit input.inputButton {margin: 0px 0px 0px 5px; float: right;}

form.formtool small {margin: 0px 0px 5px 142px; padding: 1px 3px 1px 3px; height: 1%; display: block;}

form.formtool textarea.expanding {overflow: auto; overflow-x: auto; overflow-y: visible;}

form.formtool label.labelCheckbox,
	form.formtool label.labelRadio,
	form.formtool label.labelCheckbox,
	form.formtool label.labelRadio {padding: 4px 0px 0px 18px; width: 190px; height: 1%; display: block;}

form.formtool label.labelCheckbox input.inputCheckbox,
	form.formtool label.labelRadio input.inputRadio,
	form.formtool label.labelCheckbox input.inputCheckbox,
	form.formtool label.labelRadio input.inputRadio {margin: 0px 0px 0px 0px;}

form.formtool fieldset input.inputText,
	form.formtool fieldset input.inputPassword,
	form.formtool fieldset input.inputFile,
	form.formtool fieldset textarea.inputTextarea {margin: 0px 0px 0px 18px; width: 160px;}

form.formtool label.compact {margin: 0px 0px 0px 0px; padding: 4px 10px 0px 0px; width: auto; display: inline;}
form.formtool .wide label {display: block; float: none;}
form.formtool label.wide {width: 348px;}

form.formtool .wide input.inputText,
	form.formtool .wide input.inputPassword,
	form.formtool .wide input.inputFile,
	form.formtool .wide select,
	form.formtool .wide textarea {width: 344px; margin: 0px;}

form.formtool .notes p, form.formtool small {}
form.formtool .wide small {margin: 0px 0px 5px 0px;}

form.formtool .formSection .fieldAlign {float: left; margin: 0px; padding: 0px;}
form.formtool .passwordlabel {display: none;}

form.formtool .formSection .password .fieldAlign {float: none; margin: 0px 0px 0px 140px; padding: 0px;}
form.formtool .fieldSection .clearer {clear: both;}

form.formtool .formCheckbox {width: auto; border: none;}
form.formtool .category .fieldwrap input {border: none;}

form.formtool #wizard-content select {width: auto; margin: 0px; padding: 0px;}


input.validation-failed, textarea.validation-failed {border: 1px solid #FF3300; color: #FF3300;}
.validation-advice {margin: 5px 0px 5px 0px; padding: 5px 5px 5px 5px; background-color: #FF3300; color: #FFFFFF; font-weight: bold;}
.custom-advice {margin: 5px 0px 5px 0px; padding: 5px 5px 5px 5px; background-color: #C8AA00; color: #FFFFFF; font-weight: bold;}

/* formtool form components */
	/* formtool input : formButton layout styles */	
	form.formtool input.formButton {margin: 0 0 4px 0; padding: 0px; width: auto !important; height: 18px; vertical-align: top;}
	/* formtool input : formCheckbox layout styles */	
	form.formtool input.formCheckbox {margin: 0px; padding: 0px; width: 12px; height: 12px;}
	/* formtool select layout styles */
	/* form.formtool select {margin: 0px; padding: 0px; float: left; display: block;} */

/* formtool html button layout styles */
	/* formtool default html button group layout styles */
	form.formtool div.buttonGroup {margin: 0px; padding: 0px; display: block; float: right;}
	/* formtool default html button layout styles */
	form.formtool div.buttonStandard {margin: 0px; padding: 0px; height: 16px; width: 100px; display: block; float: left; vertical-align: top;}
		form.formtool div.buttonStandard a {margin: 0px; padding: 1px 4px 0px 4px; width: auto; height: 15px; display: block; text-align: center;}
	/* formtool default html view method button layout styles */
	form.formtool div.buttonViewMethod {margin: 0px; padding: 0px; width: 16px; height: 16px; display: block; float: left; vertical-align: top;}
		form.formtool div.buttonViewMethod a {margin: 0px; padding: 0px; width: 16px; height: 16px; display: block;}
			form.formtool div.buttonViewMethod a img {margin: 0px; padding: 1px 0px 0px 1px; width: 14px; height: 14px; display: block;}


	/* formtool array component layout styles */
	form.formtool div.array div.fieldAlign input.formButton {margin: 0px 5px 5px 0px; width: 70px; float: left; display: block;}
	form.formtool div.array div.fieldAlign input.formCheckbox {width: 10px; height: 10px;}

	form.formtool div.array div.fieldAlign {margin: 0px 0px 30px 0px; padding: 0px;}

	form.formtool div.array div.fieldAlign ul {margin: 0px 0px 5px 0px; padding: 0px;}
	form.formtool div.array div.fieldAlign table {margin: 0px; padding: 0px; float: none !important; width: auto !important;}
	form.formtool div.array div.fieldAlign table, form.formtool div.array div.fieldAlign tr, form.formtool div.array div.fieldAlign td {background-color: transparent !important;}

	/* array component : detail view layout styles */
	ul.arrayDetailView {width: auto; height: auto; display: block;}
		ul.arrayDetailView li {margin: 0px; padding: 0px; height: auto; zoom: 1;} 
			ul.arrayDetailView li div.buttonGripper {margin: 0px; padding: 1px 0px 0px 0px; width: 7px; height: 17px; display: block; float: left;}
				ul.arrayDetailView li div.buttonGripper p {margin: 0px; padding: 0px; width: 7px; height: 17px; display: block;}
		 	ul.arrayDetailView li input.formCheckbox {margin: 4px 2px 0px 0px; padding: 0px; display: block; float: right; overflow: hidden;}
			ul.arrayDetailView li div.arrayDetail {margin: 0px; padding: 0px 0px 0px 10px; display: block;}
				ul.arrayDetailView li div.arrayDetail p {margin: 0px 0px 0px 4px; padding: 3px 0px 0px 0px; width: auto; height: auto; display: block;}
			ul.arrayDetailView li div.arrayThumbnail {margin: 0px; padding: 0px; display: none;}

	/* array component : thumbnail view layout styles */
	ul.arrayThumbnailView {width: auto; height: 300px; display: block; overflow: auto;}
		ul.arrayThumbnailView li {margin: 5px 0px 0px 5px; padding: 0px; width: 52px; height: 62px; display: block; float: left; overflow: hidden;}
			ul.arrayThumbnailView li div.buttonGripper {margin: 0px; padding: 0px; width: 40px; height: 9px; display: block; float: left;}
				ul.arrayThumbnailView li div.buttonGripper p {margin: 0px; padding: 0px; width: 40px; height: 9px; display: block;}
			ul.arrayThumbnailView li input.formCheckbox {margin: 0px; padding: 0px; display: block; float: right; overflow: hidden;}
			ul.arrayThumbnailView li div.arrayDetail {margin: 0px; padding: 0px; display: none;}
			ul.arrayThumbnailView li div.arrayThumbnail {margin: 0px; padding: 0px;}

  /* formtool tinymce textarea layout styles */
  form.formtool div.richtext label {text-align: left;}
	/* formtool richtext component layout styles */
	form.formtool div.richtext div.fieldAlign {clear: left; float: none; width: auto;}
			


/*
=================================================================================
webskin.css:
=================================================================================
this stylesheet defines the skins of page elements - and should be linked second
this stylesheet defines the following page elements:
- background colours / graphics / positions
- border colours / styles / thickness
- sprite graphics / positions
*/

/*
form skin styles
*/
form.formtool fieldset {border-color: #A4C8E5; border-width: 1px 0px 0px 0px; border-style: solid none none none;}
form.formtool fieldset.noLegend {border: none !important;}
form.formtool fieldset fieldset {border: 1px solid #A4C8E5;}

form fieldset div.notes {border: 1px solid #5292C6; background-color: #A4C8E5; color: inherit;}


p.error {background-color: #ff0000; background-image: url(/images/icon_error.gif); background-repeat: no-repeat; background-position: 3px 3px; border: 1px solid #000000; color: inherit; }
form div.error {background-color: #ffffe1; background-image: url(/images/required_bg.gif); background-repeat: no-repeat; background-position: top left; border: 1px solid #ff0000; color: inherit;}
form div.error p.error {background-image: url(/images/icon_error.gif); background-position: top left; background-color: transparent; border-style: none;}
form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {background-color: transparent; border-width: 0px;}
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #cccccc; color: inherit;}
form input, form select, form textarea {background-color: #FFFFFF;}

form.formtool #wizard-content table, form.formtool #wizard-content table tr, form.formtool #wizard-content table tr td, form.formtool #wizard-content table th {border: none;}

/* formtool form components */
	/* formtool input : formButton webskin styles */	
	form.formtool input.formButton {background: #FFFFFF url("images/form_button_bg.gif") no-repeat 0px -2px; border-top: 1px solid #AEAFC7; border-right: 1px solid #5A5B85; border-bottom: 1px solid #5A5B85; border-left: 1px solid #AEAFC7; cursor: pointer; color: inherit;}
	form.formtool input.formButton:hover {background: url("images/form_button_bg.gif") no-repeat 0px -58px;}
	/* formtool select webskin styles */
	form.formtool select {background-color: #FFFFFF; border-top: 1px solid #5A5B85; border-right: 1px solid #AEAFC7; border-bottom: 1px solid #AEAFC7; border-left: 1px solid #5A5B85; color: inherit;}
	form.formtool select option {background-color: #FFFFFF; color: inherit;}

/* formtool html button webskin styles */
	/* formtool default html button webskin styles */
	form.formtool div.buttonStandard {background: url("images/form_button_bg.gif") no-repeat -2px -2px; border-top: 1px solid #AEAFC7; border-right: 1px solid #5A5B85; border-bottom: 1px solid #5A5B85; border-left: 1px solid #AEAFC7; cursor: pointer;}
		form.formtool div.buttonStandard a:hover {background: url("images/form_button_bg.gif") no-repeat -2px -58px;}
	/* formtool default html view method button webskin styles */
	form.formtool div.buttonViewMethod {background: #FFFFFF url("images/form_button_bg.gif") no-repeat -2px -2px; border-top: 1px solid #AEAFC7; border-right: 1px solid #5A5B85; border-bottom: 1px solid #5A5B85; border-left: 1px solid #AEAFC7; cursor: pointer; color: inherit;}
		form.formtool div.buttonViewMethod a:hover {background: url("images/form_button_bg.gif") no-repeat -2px -58px;}
		form.formtool div.buttonViewMethod a.selected {background: url("images/form_button_bg.gif") no-repeat -2px -58px;}

/* formtool array component webskin styles */
	form.formtool div.array div.fieldAlign ul {border: 1px solid #AEAFC7;list-style-type: none;}
	form.formtool div.array div.fieldAlign table , form.formtool div.array div.fieldAlign tr, form.formtool div.array div.fieldAlign th, form.formtool div.array div.fieldAlign td {border:none;border-collapse:collapse;}

	/* array component : detail view webskin styles */
	ul.arrayDetailView li {border-bottom: 1px solid #eaeaf0; background-image: none;}
	ul.arrayDetailView li:hover {background-color: #eaeaf0; cursor: pointer; color: inherit;}
		ul.arrayDetailView li div.buttonGripper p {background: url("images/form_button_gripper.gif") no-repeat 0px 0px;}
		/*ul.arrayDetailView li div.arrayDetail p {background: transparent url("images/content_type_icon_default4.gif") no-repeat 0px 3px;}*/

	/* array component : thumbnail view webskin styles */
	ul.arrayThumbnailView li { background-image: none; background-color: #7476a6; border-top: 1px solid #8e8fb6; border-right: 1px solid #61638b; border-bottom: 1px solid #61638b; border-left: 1px solid #8e8fb6; cursor: pointer; color: inherit;}
		ul.arrayThumbnailView li div.buttonGripper p {background: url("images/form_button_gripper.gif") no-repeat 100% -29px; border-left: 1px solid #696a8c;}
		ul.arrayThumbnailView li div.arrayThumbnail img {border: 1px solid #FFFFFF;}
		ul.arrayThumbnailView li:hover div.arrayThumbnail img {border: 1px solid #e17000;}

/* formtool category component webskin styles */
	form.formtool div.category table {border: none; border-collapse: collapse;}
	form.formtool div.category table tr,
		form.formtool div.category table th,
		form.formtool div.category table td {border: none;}


/*
=================================================================================
formatting.css:
=================================================================================

this stylesheet defines the typographic formatting of page elements - and should be linked third

this stylesheet defines the following page elements:
- colours
- font properties in shorthand
- typographic properties such as transform/align/kerning/leading
- typographic element margins/padding
- list formatting properties
- form formatting properties
*/

/* form formatting styles */

/* start legacy formtool css  */
form.formtool {}
form.formtool fieldset {}
form.formtool fieldset legend {font-weight: normal; color: #416394;}

form.formtool label u {font-style: normal; text-decoration: underline;}
input, select, textarea {font-family: Tahoma, Arial, sans-serif; color: #000000;}
form fieldset div.notes {color: #666666; }
form fieldset div.notes h4 {color: #666666; }
form fieldset div.notes p {color: #666666;}
form div fieldset legend {}
form div.required fieldset legend {font-weight: bold;}
form.formtool label {text-align: right;}
form.formtool div.optional label, form.formtool label.optional {font-weight: normal;}
form.formtool div.required label, form.formtool label.required {font-weight: bold;}
form.formtool label.labelCheckbox, form.formtool label.labelRadio {text-align: left;}
p.error {color: #ffffff;}
form div.error {color: #666666;}
form div.error p.error {font-weight: bold; color: #ff0000;}
form div.submit div {text-align: left;}
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {color: #000000;}
form div small {}

form fieldset legend {line-height: 150%;}
form.formtool label.labelCheckbox, form.formtool label.labelRadio, form.formtool label.labelCheckbox, form.formtool label.labelRadio {text-indent: -18px; line-height: 120%;}
form.formtool label.compact {text-indent: 0px;}
form div.notes p, form div small {line-height: 125%;}



/* end legacy formtool css  */

/* start new formtool formatting styles */
	/* formtool form layout styles */
	form.formtool label {color: #324e7c; letter-spacing: 0.0em; background-color: inherit;}

/* formtool form components */
	/* formtool input : formButton layout styles */	
	form.formtool input.formButton {color: #30326F; background-color: inherit;}
	/* formtool select layout styles */
	form.formtool select {color: #324e7c; line-height: normal; background-color: inherit;}

/* formtool html button formatting styles */
	/* formtool default html button formatting styles */
	form.formtool div.buttonStandard a {}
	form.formtool div.buttonStandard a {color: #30326F; background-color: inherit; text-decoration: none;}

	/* array component : detail view formatting styles */
	ul.arrayDetailView li {line-height: normal;}
		ul.arrayDetailView li div.buttonGripper p {font-size: 0%; line-height: normal;}
		ul.arrayDetailView li div.arrayDetail p {color: #30326F; background-color: inherit;}

	/* array component : thumbnail view formatting styles */
	ul.arrayThumbnailView li div.buttonGripper p {font-size: 0%; line-height: normal;}

/* start new formtool formatting styles */
