@import url('DatePicker.ofss'); /* HEADINGS, FIELDS AND MAIN PART OF FORM */ body { /* The background colour of the element shows through and is visible to the user in the following places by default: Behind subsection headings (which use the HTML LEGEND tag), in the empty column between section buttons and the main part of the form, in the area at the bottom of the page below the main form and behind all dialogs. */ BACKGROUND-COLOR: rgb(255,255,255); /*white*/ COLOR: rgb(0,0,0); /*black*/ } body.formsectionbody { MARGIN: 0; PADDING: 0; } H1 { MARGIN: 0in; FONT-SIZE: Large; VERTICAL-ALIGN: text-top; } IMG { BORDER: 0; MARGIN: 0; PADDING: 0; } .headerarea { /* Band across top of the page containing form title, logo, text-only link (and possibly help link and key-based save ref no.) */ BACKGROUND-COLOR: rgb(255,255,255); /*white*/ COLOR: rgb(0,0,0); /*black*/ FONT-FAMILY: Arial, Helvetica, sans-serif; } .secheader { /* 1. The area containing section name and navigation buttons (above fields and custom error or section error text) 2. The corresponding area containing navigation buttons at the bottom of the form. */ BACKGROUND-COLOR: rgb(204,42,31); /*dark red*/ COLOR: rgb(255,255,255); /*white*/ FONT-WEIGHT: Bold; FONT-FAMILY: Arial, Helvetica, sans-serif; } .secheadertitle { /* Section heading title text */ MARGIN: 0; FONT-SIZE: 1em; FONT-WEIGHT: Bold; } .info { /* Area above fields, contains custom error and/or section error text */ BACKGROUND-COLOR: rgb(255,255,0); /*yellow*/ COLOR: rgb(0,0,128); /*blue*/ FONT-SIZE: 1em; FONT-WEIGHT: bold; MARGIN: 0; } td.custommsg, p.custommsg { /* contains custom message */ BACKGROUND-COLOR: rgb(234,234,234); /*light grey*/ COLOR: rgb(51,51,51); /*dark grey*/ FONT-WEIGHT: bold; MARGIN: 0; } td.custommsg { FONT-SIZE: 0.75em; } p.custommsg { FONT-SIZE: 1em; } legend { /* Heading text above a field area (form subsection) */ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-WEIGHT: Bold; } .fieldarea{ /* Area of fields displayed in a form subsection (i.e. under a heading). Contains field columns. */ /* Do not set font-size or color attributes here. Set them in .fields/.dlgfields */ BACKGROUND-COLOR: rgb(255,255,255); /*white*/ BORDER: 2px solid rgb(255,255,255); /*white*/ BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial, Helvetica, sans-serif; } .dlgfieldarea { BACKGROUND-COLOR: rgb(201,229,245); /*light blue*/ BORDER: 2px solid rgb(201,229,245); /*light blue*/ BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial, Helvetica, sans-serif; } .fieldcolumn, .dlgfieldcolumn { /* Column in a form subsection */ /* Do not set font-size or color attributes here. Set them in .fields/.dlgfields */ BORDER: solid gray 1px; } .fields, .dlgfields { /* Captions, field captions, radio button labels */ COLOR: rgb(0,0,0); /*black*/ FONT-SIZE: 0.75em; } .radiogroup { margin: 0; padding: 0; border: none; } .radiogroup legend { display: none; } textarea, input, select { /* Form fields - the areas where the user can enter data */ COLOR: rgb(0,0,0); /*black*/ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 1em; /* Ensures that the size of text in fields will (1) be the same size as the caption text (specified in .fields/.dlgfields) and (2) change if the text size is changed using IE's View->Text Size feature. */ } .formtextarea, .formtextfield, .formpasswordfield { /* Text, memo, number and password fields - rule applies to the area where the user can enter data */ /* Width: 100% causes the fields to fill the entire width of the table column they are in, so they will change width as the browser window resizes. If you prefer to fix their widths you could use e.g. width: 25em; */ WIDTH: 100%; } .min_fieldwidth { /* min-width is not supported by IE yet, hence this is used as a work-around to limit the minimum width */ /* of fields on the form */ width: 5em; height: 0; } .min_righticonsareawidth { /* This is to stop the help and spellcheck icons on the right from wrapping in multi-column fields in opera */ width: 28px; height: 0; } label, .calendaricon { CURSOR: pointer; } .fielderror { FLOAT: right; } .fieldhelp, .formhelp { CURSOR: help; } label.suppressedcaption { display: none; } /* WIDTH SPACINGS FOR FIELD ROW -Width percentages for: 'fieldiconscolumn', 'fieldcaptioncolumn', 'fieldinputcolumn' and 'fieldrightcolumn' must add up to 100%. -Width percentage of 'fieldmergedcolumn' must be the width of 'fieldcaptioncolumn' and 'fieldinputcolumn'. -Classes with 'x' suffix denotes the group is multi-column */ .fieldiconscolumn { width: 1%; } .fieldcaptioncolumn { width: 29%; } .fieldinputcolumn { width: 45%; } .fieldrightcolumn { width: 25%; } .fieldmergedcolumn { width: 74%; } .fieldiconscolumnx { width: 1%; } .fieldcaptioncolumnx { width: 44%; } .fieldinputcolumnx { width: 54%; } .fieldrightcolumnx { width: 1%; } .fieldmergedcolumnx { width: 98%; } /* CAPTION OVER SPECIFICS */ /* The following settings are used to make the caption to be in the same table cell as the form control, for screen reader purposes. */ div.captionover { position: relative; } span.captionovererror { position: absolute; top: 0; left: -15px; /* this aligns the error icon to be at the same place on the left as default and suppressed case) */ } span.captionoverhelpspchk, span.sm_captionoverhelpspchk { position: absolute; top: 0; } span.sm_captionoverhelpspchk { right: -31px; /* this aligns multicolumned help/spellcheck icons to be at the same place on the right as default and suppressed case) */ } span.captionoverhelpspchk { right: -46px; /* this aligns help/spellcheck icons to be at the same place on the right as default and suppressed case) */ } A:link { color: blue; } /* unvisited links */ A:visited { color: blue; } /* visited links */ /* BUTTONS */ /* .button is for action buttons etc in the main form. .dlgbutton is for action buttons etc in dialogs. .toolbarbutton is for navigation buttons in the main form e.g. Next, Back, Save, Exit .dlgtoolbarbutton is for navigation buttons in dialogs e.g. OK, Cancel, Yes, No .toolbarbuttondisabled is for Next and Back navigation buttons in the main form when it is disabled or next/prior section is disabled*/ .button, .toolbarbutton, .dlgbutton, .dlgtoolbarbutton, .toolbarbuttondisabled { BACKGROUND-COLOR: rgb(237,237,237); /*grey*/ COLOR: rgb(0,0,0); /*black*/ FONT-WEIGHT: Bold; FONT-SIZE: 0.7em; CURSOR: pointer; } .toolbarbuttondisabled { COLOR: rgb(172,168,153); /*grey*/ } /* SECTION BUTTONS AND SECTION BUTTON AREA */ .secbuttonstrip { /* Band at left that includes the section buttons */ BACKGROUND-COLOR: #ffffff; /*white*/ } /* The following styles are for section buttons. They are: */ /* section = enabled non-current */ /* disabled = disabled */ /* high = current */ /* This comment is required for transparent background support across all browsers*/ /* it should be added in exactly this format and should have hex RGB values as for*/ /* the 'input' versions of the colours shown below */ /* VFSECTIONBACKGROUND:ffffff VFHIGHBACKGROUND:ffffff VFDISABLEDBACKGROUND:ffffff */ .section { /*Used as a background behind enabled section buttons*/ BACKGROUND-COLOR: #ffffff; /*white*/ COLOR: #000; } input.section { /*Used as the background for enabled section buttons*/ BACKGROUND-COLOR: #ffffff; /*white*/ COLOR: rgb(0,0,0); } .high { /*Used as a background behind the current section button*/ BACKGROUND-COLOR: #ffffff; /*white*/ COLOR: rgb(0,0,0); } input.high { /*Used as the background of the current section button*/ BACKGROUND-COLOR: #ffffff; /*white*/ COLOR: rgb(0,0,0); } .disabled { /*Used as a background behind disabled section buttons*/ BACKGROUND-COLOR: #ffffff; /*white*/ COLOR: rgb(0,0,0); } input.disabled { /*Used as the background for disabled section buttons*/ BACKGROUND-COLOR: #ffffff; /*white*/ COLOR: rgb(0,0,0); } /* TABLES */ .formtableheader { /* Table column headings (in the main form) */ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 0.75em; BACKGROUND-COLOR: rgb(252,254,210); /*pale yellow*/ COLOR: rgb(0,0,0); /*black*/ TEXT-ALIGN: Left; } .formtablebody { /* Table body i.e. area containing data (in the main form) */ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 0.75em; BACKGROUND-COLOR: rgb(255,255,255); /*white*/ COLOR: rgb(0,0,0); /*black*/ } .tablerowodd { /* Odd numbered table rows in tables in the main form. See also lookuprowodd. */ } .tableroweven { /* Even numbered table rows in tables in the main form. See also lookuproweven. */ /* Odd and even are calculated based on 0-indexed rows so the first row is even. */ } .formtableaddbuttonarea { /* Area which includes the table 'Add Row...' button and text which appears next to it (see formtableaddbuttonhint) */ } .formtableaddbuttonhint { /* Text which appears next to the 'Add Row...' button in a table, set by TableSetAddButtonHint API */ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 0.75em; } .signedtablecell { /* Cells in table columns which have been locked by signing. These cells cannot be edited. */ COLOR: #666666; /*dark grey*/ } /* DIALOGS */ .titlebar { /* Title bar for ALL dialogs including custom dialog, lookup dialog, table-row-edit dialog and message box dialog */ BACKGROUND-COLOR: rgb(0,0,128); /*dark blue*/ BORDER: 1px solid rgb(128,128,128); /*50% grey*/ COLOR: rgb(255,255,255); /*white*/ FONT-WEIGHT: Bold; FONT-SIZE: 1em; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: Left; } .dialog { /* Rule applied to the HTML element which contains the entire dialog */ BORDER: 1px solid rgb(0,0,128); /*dark blue*/ BACKGROUND-COLOR: rgb(255,255,245); /* very pale yellow */ } .dialoginner { /* Dialog inner content area. May be narrower than the dialog itself */ FONT-FAMILY: Arial, Helvetica, sans-serif; } /* LOOKUP DIALOG SPECIFIC */ .lookuptableheader { /* Lookup dialog table header area (the table's column headings) */ BACKGROUND-COLOR: rgb(221,221,221); /*pale grey*/ TEXT-ALIGN: Left; } .lookuptablebody { /* Lookup dialog table body area (the rows containing table data) */ FONT-SIZE: 0.75em; } .lookuptableheadercaption { /* Caption text which optionally appears above the lookup table (Set by UISetCaption API) */ MARGIN: 0.5em 0 0.5em 0; FONT-WEIGHT: bold; FONT-SIZE: 0.8em; } /* The rows in a table or lookup can have alternating colours. Lookup rows have the class names lookuproweven and lookuprowodd. Table rows have the class names tableroweven and tablerowodd. In the default style sheet lookup rows have different colours but table rows do not. Odd and even are calculated based on 0-indexed rows so the first row is even. */ .lookuproweven { BACKGROUND-COLOR: rgb(201,229,245); /*light blue*/ } .lookuprowodd { BACKGROUND-COLOR: rgb(234,234,234); /*very pale grey*/ } .disabledlink { /* Used for disabled Next/Previous link text in lookups. (May be used for other disabled links in future versions) */ color: #666666; /*dark grey*/ } /* table headers (thbut = outer, thbut2... = inner) */ .thbut { background-color: #dddddd; border-bottom: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; font-weight: bold; } /* inner table header, normal*/ .thbut2 { vertical-align: middle; border-style: outset; /* looks like an unpressed button */ border-width: 1px; padding: 1px; font-weight: bold; } /* inner table header, for onmouseover (thbut2inset) and onmousedown (thbut2inset2) */ .thbut2inset, .thbut2inset2 { vertical-align: middle; border-style: inset; /* looks like a pressed button */ border-width: 1px; padding: 2px 0px 0px 2px; /* contents shifted down and right 1 pixel compared to thbut2 */ font-weight: bold; } /* link text within table headers */ /* normal link text (thbut2) and onmouseover (thbut2inset) */ .thbut2 a:link, .thbut2 a:visited, .thbut2 a:hover, .thbut2inset a:link, .thbut2inset a:visited, .thbut2inset a:hover { text-decoration: none; color: black; } /* heading link text with javascript disabled, tab link text onmouseover/mousedown and all other general links */ a:hover, .thbut2 a:hover, .tabunselectedmouseover a:link, .tabunselectedmouseover a:visited, .tabunselectedmousedown a:link, .tabunselectedmousedown a:visited { text-decoration: underline; color: red; } /* link text for onmousedown */ .thbut2inset2 a:link, .thbut2inset2 a:visited, .thbut2inset2 a:hover { text-decoration: none; color: red; } /* SPELL CHECK DIALOG SPECIFIC */ .spelltext { FONT-SIZE: 0.75em; } div.row { clear: both; padding-top: 5px; } div.row span.label { float: left; width: 7em } div.row span.formw, div.row span.lgformw { float: right; width: 30em; text-align: left } div.row span.formw .smfield { width: 50% } div.row span.formw .lgfield { width: 100% } /* POP-UP WINDOWS */ /* These rules apply to pop-up windows which are used to show 1. Field error messages (when "!" icon is clicked) and 2. Context-sensitive help text (when "?" icon is clicked). */ .popupmessagearea { /* Affects entire pop-up window; is applied to tag. */ BACKGROUND-COLOR: rgb(255,255,245); /*very pale yellow*/ FONT-FAMILY: Arial, Helvetica, sans-serif; } .popupheader { /* Heading text in the pop-up window */ COLOR: red; } /* MISCELLANEOUS */ /* resetfontsizetodefault is used so that if you specify the font-size of buttons using a relative measure (e.g. 0.7em) then the text on all buttons will appear the same size regardless of where they are in the page. */ /* On IE4/5/6 the buggy font-scaling behaviour means that small has the desired effect here. */ .resetfontsizetodefault { font-size: small; } /* Non-IE browsers e.g. Netscape7 and Mozilla FireFox scale the fonts correctly. This second rule takes precedence over the first but is ignored by IE4/5/6 because it does not understand it. */ html>body .resetfontsizetodefault { font-size: medium; } /* Known issue: Opera6/7 has the same (incorrect) font-scaling behaviour as IE but does understand the second rule above. This means the text on some buttons will be the wrong size on Opera. The workaround is to use absolute font-sizes throughout, e.g. 11px instead of 0.7em. However this will stop IE4/5/6's View->Text Size feature changing the size of the text. */ /* Buttons linked to fields - an advanced feature */ .linkedbuttoncontainer { font-size:1em /* to work around table inherit quirk */ } .linkedbuttonleftcell { width:95%; padding-right:4px } .linkedbuttonrightcell { text-align:right } /* HTML PRINTING */ /* .printbody => Applied to the HTML tag of document */ /* .printreturnblock => Blocks containing return message and button (at top and bottom of page by default) */ /* .printdate => Today's date (i.e. date printed) */ /* .printref => Save ID (only shown if using key-based save model) */ /* .printbody h1 => Form title */ /* .printbody h2 => Section titles */ /* .printbody legend => Sub-section captions (i.e. headings) and table captions */ /* .printformsubsection => Form sub-section. Applied to each HTML

tag which contains a heading and fields */ /* .printformtablesection => Applied to each HTML

tag which contains a table */ /* .printformtable => Applied to each HTML

tag which represents an OfficeForms table */ /* .printfielddata => Field data (which is typically typed in by the user) */ /* .printcaption => Captions (fields' captions and caption objects) */ /* .printlabel => Checkbox labels */ .printbody h1, .printbody h2 { /* Bug note: Adding another margin line here e.g. margin-top: 0.25em; causes Netscape 6.2 to print blank pages! */ margin-bottom: 1px; page-break-after: avoid; /* page-break-... not supported by most browsers */ } .printformsubsection { margin: 1% 2% 1% 2%; padding-top: 0.1em; padding-bottom: 0.1em; page-break-inside: avoid; /* page-break-... not supported by most browsers */ } .printformtablesection { margin: 1% 2% 1% 2%; padding-top: 0.2em; padding-bottom: 0.2em; page-break-inside: avoid; /* page-break-... not supported by most browsers */ } .printbody legend { font-family: Arial, Helvetica, sans-serif; } .printformtable { border-collapse: collapse; } .printformtable th, .printformtable td { border: 1px solid black; } .printfielddata { font-weight: bold; } .printreturnblock {} .printdate, .printref {} .printcaption, .printlabel {}