/* BRANDING */
/* Logo and header area at top of form */
.logoimage {
width:167px;height:49px; /*Adjust to be the size of your logo image if necessary*/
background-image:url(tl9_toplevel_secure_logo.opng); /*Set this to be the file name of your logo image. Use extension .ofif for .gif, .opng for .png, or .ojpg for .jpg*/
margin-left:5px;margin-top:8px;
}
.headerarea {
height:60px;
background-image:url(tl9_toplevel_headerbg_blue.ojpg);background-color:white;background-repeat:no-repeat;background-position:50px 40%;
border-bottom:4px solid white;
}
/* Logo and header area in dialogs */
.dialogbody .logoimage {
width:111px;height:32px;
background-image:url(tl9_toplevel_secure_logo_dlg.opng);
margin-left:11px;margin-top:15px;
}
.dlgheaderarea {
height:60px;
background-image:url(tl9_toplevel_headerbg_blue.ojpg);background-color:white;background-repeat:no-repeat;background-position:-50px 40%;
border-bottom:4px solid white;
}
/* GENERAL */
.headerarea, .headerarea_secbuttons {margin:0;}
.logoimagecell {float:left;}
body {background-color:white;color:black;margin:0px;padding:0px;}
.dialogbody {
background-color:#999999; /* See also .dialogaboveform */
}
/*Iron out inconsistencies with default margins and heading sizes etc in different browsers*/
.tlform h1 {margin:0px;font-size:x-large;}
.tlform h2 {margin:0px;font-size:medium;}
.tlform h3 {margin:0px;}
img {border:none;padding:0px;margin:0px;}
.tlform fieldset {margin:0px;padding:2px;}
.builtindialog fieldset {border:none;} /* "built in" as opposed to "custom" dialog*/
.tlform p {margin:0px;}
/*Heading fonts etc.*/
.tlform h1, .tlform h2 {font-family:arial,helvetica,"sans serif";}
.secheadertitle {color:white;}
/*h3 or legend is used for headings depending on value of Presentation.UseLegend[InDialog]*/
.tlform legend, .tlform h3 {font-family:arial,helvetica,"sans serif";font-weight:700;color:black;/*#0046d5;*/font-size:medium;}
.tlform h3 {padding-top:3px;margin-left:7px;}
.dialogbody .tlform h3 {padding-top:3px;margin-left:18px;} /*Legacy*/
.tlform legend.empty {padding:0;} /*Prevent Firefox showing a small gap in the fieldset border if legend is empty*/
.nonIE fieldset.emptylegend {margin-top:8px;} /*Make Firefox, Safari, Chrome etc. leave a space approx half as high as a legend above a fieldset which has an empty legend (like IE does)*/
/* Overrides for dialogs so h1 appears smaller than in main form section */
.dialogbody h1 {font-size:medium;}
.builtindialog .tlform h1 {padding-top:3px;margin-left:18px;} /* "built in" as opposed to "custom" dialog*/
/*If you want the title to start below the form section header controls, uncomment next line*/
/*.formtitle {clear:right;} */
.formtitle {margin:0px 0.1em 0.3em 0;}
.formtitle h1 {padding-top:12px;}
/*Form section header controls (Accessible/Normal version link, form help link, etc) */
.headercontrols, .dlgheadercontrols {float:right;margin-left:8px;margin-bottom:2px;}
.aj_ajaxlink, .assistanceid, .formsaveid {display:inline;} /*Display on single line*/
.assistanceid, .formsaveid, .formhelp, .tliconassistance {margin-left:1em;} /*Gap between controls*/
.tlmaincontent_secbuttons, .headerarea2_secbuttons {margin-left:180px;margin-right:1.5%;}
.tlmaincontent_nosecbuttons, .headerarea2_nosecbuttons {margin-left:2%;margin-right:2%;}
/* Minimum widths
* (CSS min-width does not work in IE6, so we use a different method in Fragment InternalStyles in Controls9.htm for IE6 only)*/
.aj_formcontent, .headerarea, .tltoolbar {min-width:420px;} /* min width of main part of form */
.dialogouter {min-width:460px;} /* min width of dialogs */
/* Toolbars and buttons */
.tltoolbar {
background-color:#cc2a1f;padding:3px;margin-top:13px;margin-bottom:5px;
min-height:1.75em; /* Ensure top and bottom toolbars are similar height when only one contains buttons */
}
.toolbarbuttons {float:right;clear:right;}
.button, .buttondisabled {
background-color:rgb(237,237,237);
color:black;
font-weight:bold;
font-size:93.3%;
cursor:pointer;
}
.buttondisabled {color:rgb(172,168,153);}
/* Misc */
p.mandatoryfieldmessage {color:#666666;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:92%;margin-bottom:3px;}
.nobr {white-space:nowrap;}
.headercaption {padding-bottom:1px;}
.fieldrow {clear:both;padding:2px 3px 2px 3px;/*Space around fields*/}
.tlheadercontent {padding:6px 3px;/*Space inside headings*/}
.tlfooter {clear:both;}
.tlsectionhelplink {float:right;}
/* SECTION BUTTONS */
.secbuttoncontainer {position:absolute;left:14px;width:160px;}
.secbuttoncontainer_withstatusicons {left:0px;width:180px;} /*If section completion status icons shown (Presentation.IncludeSectionStatusIcons) then need more space*/
/*Vertical gap between the section buttons*/
.normalsectionbuttoncontainer { margin-bottom:2px; } /*Firefox etc*/
.iesectionbuttoncontainer { margin-bottom:5px; } /*IE*/
.sectionbuttoncontainer, .sectionbuttoncontainerhover {clear:both;} /* Needed for IE, gaps between buttons*/
/* Section buttons */
.normalcurrentsectionbutton, .normalenabledsectionbutton, .normaldisabledsectionbutton,
.iecurrentsectionbutton, .ieenabledsectionbutton, .iedisabledsectionbutton {
/*Styles which apply to all section buttons in all browsers*/
height:27px; /* 24px for IE - see below */
width:142px;
background-image:url("TL_icons.ofif");
background-repeat:no-repeat;
background-color:transparent;
border:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
cursor:pointer;
text-align:center;
}
.normalcurrentsectionbutton { background-position:-947px 3px; }
.normalenabledsectionbutton { background-position:-465px 3px; }
.normaldisabledsectionbutton { background-position:-465px 3px; }
.sectionbuttoncontainerhover .normalenabledsectionbutton { background-position:-625px 3px; }
/* Section buttons in IE. (IE positions text on the button about 3 pixels higher than Firefox, Opera and other browsers. Also IE<7 needs float:left).*/
.iecurrentsectionbutton { float:left; height:24px; background-position:-947px 0 }
.ieenabledsectionbutton { float:left; height:24px; background-position:-465px 0; }
.iedisabledsectionbutton { float:left; height:24px; background-position:-465px 0; }
.sectionbuttoncontainerhover .ieenabledsectionbutton { background-position:-625px 0; }
/*Current section indicator (to right of button)*/
.normalcurrentsectionindicator, .normalenabledsectionindicator, .normaldisabledsectionindicator,
.iecurrentsectionindicator, .ieenabledsectionindicator, .iedisabledsectionindicator {
width:18px;
height:24px;
float:right;
background-repeat:no-repeat;
}
.normalcurrentsectionindicator { background-image:url("TL_icons.ofif"); background-position:-1089px 3px; }
.sectionbuttoncontainerhover .normalenabledsectionindicator { background-image:url("TL_icons.ofif"); background-position:-767px 3px; }
.iecurrentsectionindicator { background-image:url("TL_icons.ofif"); background-position:-1089px 0; }
.sectionbuttoncontainerhover .ieenabledsectionindicator { background-image:url("TL_icons.ofif"); background-position:-767px 0; }
/*Section completion status icons (optionally shown to left of buttons, depending on value of Presentation.IncludeSectionStatusIcons)*/
.tliconstatusinitial { float:left; width:20px; height:24px; background-image:url(spacer.ofif); }
.tliconstatuspartial { float:left; width:20px; height:24px; background-image:url(TL_icons.ofif); background-position:-1127px 5px; }
.tliconstatuscomplete { float:left; width:20px; height:24px; background-image:url(TL_icons.ofif); background-position:-1107px 5px; }
.IE .tliconstatuspartial { background-position:-1127px 2px; }
.IE .tliconstatuscomplete { background-position:-1107px 2px; }
/*FIELDS*/
.formtextarea, .formtextfield, .formpasswordfield, .formtextarea_err, .formtextfield_err, .formpasswordfield_err {
/* 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 container they are in, so they will change
width as the browser window resizes, unless the width of that container (e.g. .fieldinputcolumn) is fixed).*/
width:100%;
}
.fieldwidthmodifier {
/*Stops the width: 100% declaration above making fields too wide in W3C standards mode.
(An has border 2px and padding 1px on each side by default. This was considered part of
the element's width in quirks mode.)*/
padding-right:6px;
}
.fieldwidthmodifier_err {
/*Fields in error have border 3px instead of the default 2px, so we need to effectively subtract 2px from the field width (1px each side).*/
padding-right:2px;
}
label, .calendaricon {cursor:pointer;}
.fieldhelp, .formhelp, .sectionhelp, .grouphelp {cursor:help;}
label.suppressedcaption {display:none;}
.radiogroup, .radiogroup_err {margin:0;padding:0;border:none;display:inline;}
.radiogroup legend, .radiogroup_err legend {display:none;}
/*Fields in error*/
.formtextarea_err, .formtextfield_err, .formpasswordfield_err, .narrowformtextfield_err,
.radiogroup_err, .checkboxfield_err, .hourfield_err, .minutefield_err, .yearfield_err {
border:solid 3px #e00000;
}
.listboxfield_err, .dayfield_err, .monthfield_err {background-color:#e00000;color:white;}
.fielderrortext {color:#e00000;font-weight:bold;}
.info, .info2, .custommsg {
/* Area above fields, contains custom error and/or section error text */
background-color:rgb(192,192,192); /*light grey*/
color:rgb(0,0,0); /*black*/
font-weight:bold;
font-size:medium;
margin:0;
padding:0px 2px 1px 3px;
}
.info2 {
background-color:rgb(128,128,128); /*darker grey*/
}
.custommsg {
background-color:rgb(234,234,234); /*light grey*/
color:rgb(51,51,51); /*dark grey*/
}
.info a:hover, .custommsg a:hover {color:#b20000;}
.dialog .custommsg {margin-bottom:1em;}
/*Field border:
Give fields a 1px simple border instead the default, which in most browsers is 2px inset.
Notes: 1. IE does not honour this on list boxes (HTML select elements) in Windows XP Classic theme / Win 2k.
2. We don't set it on checkboxes and radio buttons because it doesn't give the desired effect. */
.formtextarea, .formtextfield, .formpasswordfield, .narrowformtextfield, .hourfield, .minutefield, .yearfield, .tlform select {
border:solid 1px #7b9ebd; /*blue like Windows XP. #a5acb2 = pale grey*/
}
/*Other tweaks to account for the smaller than default field border:*/
.fieldwidthmodifier_err {padding-right:4px;}/*Fields in error have border 3px instead of 1px (as specified above), so we need to subtract 4px from the field width (2px each side).*/
/* Fix width of list boxes, to account for fields having 1px borders instead of the default 2px. */
.nonIE .fieldwidthmodifierlist {padding-right:4px;} /*Firefox (it's actually the wrong value for Opera, but market share dictates)*/
.IE .fieldwidthmodifierlist {padding-right:1px;}
/* Layout of fields:
/*-----------------------------------
/*| icons | caption | field | right |
/*-----------------------------------
/* or, for caption over field, caption suppressed or full captions
/*-----------------------------------
/*| icons | merged | right |
/*-----------------------------------
/* Icons is space for the mandatory icon, and is a fixed (pixel) width. The others are percentages. */
.fieldiconscolumn { float:left; width:13px; clear:left; }
.fieldcaptioncolumn { float:left; width:28%; }
.fieldinputcolumn { float:left; width:44%; overflow:hidden; }
.fieldmergedcolumn { float:left; width:72%; overflow:hidden; } /*=28% + 44%*/
.fieldrightcolumn { float:left; } /* Width of right is automatically 100% - captions - input ( = 100% - merged) */
.righticons {position:absolute;} /* So that help icon will overlap with next column rather than wrap if there isn't enough room */
/*Widths for the above when inside a multi-column heading*/
/*Varies depending on how many columns there are.*/
/*The default values below should allow space for a help icon right of each field with up to 3 columns (unless browser window is very narrow).*/
.columns .fieldcaptioncolumn {width:32%;} .columns .fieldinputcolumn {width:47%;} .columns .fieldmergedcolumn {width:79%;} /* 7 or more columns*/
.cols2 .fieldcaptioncolumn {width:32%;} .cols2 .fieldinputcolumn {width:55%;} .cols2 .fieldmergedcolumn {width:87%;}/*= caption + input*/
.cols3 .fieldcaptioncolumn {width:32%;} .cols3 .fieldinputcolumn {width:54%;} .cols3 .fieldmergedcolumn {width:86%;}
.cols4 .fieldcaptioncolumn {width:35%;} .cols4 .fieldinputcolumn {width:53%;} .cols4 .fieldmergedcolumn {width:88%;}
.cols5 .fieldcaptioncolumn {width:34%;} .cols5 .fieldinputcolumn {width:51%;} .cols5 .fieldmergedcolumn {width:85%;}
.cols6 .fieldcaptioncolumn {width:33%;} .cols6 .fieldinputcolumn {width:49%;} .cols6 .fieldmergedcolumn {width:82%;}
/*Properties of columns*/
.column{float:left;}
.colborderright{border-right:solid 1px gray;} /* vertical line between columns inside a heading*/
/*Horizontal line displayed when a heading contains more column breaks than columns*/
.colrowbreak {clear:both; height:1px; background-color:gray; overflow:hidden;/*IE6 fix*/}
/*Make div.columncontent expand to contain its (floated) content, so we can see its border(s) (e.g. if it also has class="colborderright")*/
/*Also used for other divs, so we can set (e.g.) padding-bottom on them.*/
.clearfix {height:100%;} /*In IE*/
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility: hidden; } /*In Firefox. Description at http://www.positioniseverything.net/easyclearing.html */
/* IE workaround: Prevent (e.g.) two 50% divs floated wrapping onto 2 lines due to widths being rounded up. */
.IE .cols2, .IE .cols3 {padding-right:1px;overflow:hidden;}
.IE .cols4, .IE .cols5, .IE .cols6, .IE .cols7 {padding-right:2px;overflow:hidden;}
.IE .cols8, .IE .cols9 {padding-right:4px;overflow:hidden;}
.IE .cols10, .IE cols11 {padding-right:5px;overflow:hidden;}
/*ICONS*/
.tliconcalendar img { cursor:pointer; background-image:url("TL_icons.ofif"); vertical-align:top; width:26px; height:24px; }
.tliconcalendar .hover { background-position:-28px 0; }
.columns .tliconcalendar img { width:18px; height:23px; background-position:-231px 0; }
.columns .tliconcalendar .hover { background-position:-249px 0; }
.tliconhelp img, .tliconhelp input { background-image:url("TL_icons.ofif"); width:16px; height:18px; background-position:-339px -2px; margin-top:2px;}
/* Change image on mouseover (all browsers, using .hover class and javascript), and also on getting focus via tab key (except IE6) */
.tliconhelp .hover, .tliconhelp a:focus img, .tliconhelp a:active img { background-position:-357px -2px; }
.columns .tliconhelp img, .columns .tliconhelp input { width:12px; height:18px; background-position:-429px -2px; }
/* Change image on mouseover and on focus (see above) */
.columns .tliconhelp .hover, .columns .tliconhelp a:focus img, .columns .tliconhelp a:active img { background-position:-441px -2px; }
.tliconerror img, .tliconerror input { background-image:url("TL_icons.ofif"); width:13px; height:18px; background-position:-285px -2px; margin-top:2px;position:relative;left:-2px;}
.tliconerror .hover, a:focus .tliconerror img, a:active .tliconerror img { background-position:-303px -2px; }
.columns .tliconerror img, .columns .tliconerror input { width:12px; height:18px; background-position:-393px -2px; position:static; }
.columns .tliconerror .hover, .columns a:focus .tliconerror img, .columns a:active .tliconerror img { background-position:-405px -2px; }
.tltable .tliconerror img, .tltable .tliconerror input {left:1px;} /* Error icon when it appears inside a table row (rare) */
#Message .tliconerror img {left:0px;top:2px;} /* Error icon when it appears inside the section error message at the top of the page */
.tliconmandatory { background-image:url("TL_icons.ofif"); background-position:-1149px -2px; }
.tlform .tliconmandatory, .tlform .tliconnomandatory { width:7px; height:9px; margin:1px 5px 3px 1px; }
.mandatoryfieldmessage .tliconmandatory { margin:0 3px 2px 3px; }
.mandatoryhiddentip {position:absolute;} /*legacy*/
.tliconselect {width:6px;height:11px;background-image:url("tl9_select.ofif");}
.tliconassistance { width:21px; height:20px; background-image:url("TL_icons.ofif"); background-position:-1159px 0; vertical-align:middle; }
.tlicontablerowinsert { width:22px; height:21px; background-image:url("TL_icons.ofif"); background-position:-1190px 0; }
.tlicontablerowedit { width:20px; height:21px; background-image:url("TL_icons.ofif"); background-position:-1215px 0; }
.tlicontablerowdelete { width:17px; height:21px; background-image:url("TL_icons.ofif"); background-position:-1240px 0; }
/* Allow calendar icon to take space that would be occupied by help icon instead of wrapping (for date fields that don't have help).*/
.tlcalendaroverlapright {position:absolute;}
/* Tweaks to positions of icons */
.nonIE .tliconcalendar {margin-left:2px;}
.nonIE .columns .tliconcalendar {margin-left:1px;}
.IE .columns .tliconcalendar {margin-left:-2px;}
.IE .tliconhelp {margin-left:2px;}
.IE .columns .tliconhelp {margin-left:0px;}
.nonIE .columns .tliconhelp {margin-left:-1px;}
/* Help icon when immediately to right of narrow field (all browsers) */
.fieldinputcolumn .tliconhelp, .fieldmergedcolumn .tliconhelp {margin-left:4px;}
.columns .fieldinputcolumn .tliconhelp, .columns .fieldmergedcolumn .tliconhelp {margin-left:2px;}
/* Buttons linked to field (or caption) */
.linkedbuttoncontainer {vertical-align:top;}
.captionwithlinkedbutton {padding-right:6px;}
.IE .fieldwithlinkedbutton, .IE .captionwithlinkedbutton {display:inline-block;}
.IE .linkedbuttoncontainer {margin-right:2px;}
.IE .linkedbuttoncontainer input {float:right;margin-left:0.2em;}
.IE6 .fieldwithlinkedbutton {padding-right:0px;}
.IE6 .fieldwithlinkedbutton .formtextarea, .IE6 .fieldwithlinkedbutton .formtextfield, .IE6 .fieldwithlinkedbutton .formpasswordfield, .IE6 .fieldwithlinkedbutton .formtextarea_err, .IE6 .fieldwithlinkedbutton .formtextfield_err, .formpasswordfield_err {width:95%;}
.nonIE .fieldwithlinkedbutton, .nonIE .captionwithlinkedbutton {display:table-cell;}
.nonIE .linkedbuttoncontainer {display:table-cell;white-space:nowrap;width:10%;padding-right:4px;/*Padding appears necessary in Firefox & Chrome (but not Safari & Opera)*/}
/*List box field width*/
.listboxfield {max-width:100%;} /*Prevent drop arrow of list box being hidden if its content makes it too wide to fit in the space available*/
.IE select.listboxfield {width:100%;} /*max-width does not work on select elements even in IE7*/
.IE .fieldwrapperlistboxother select.listboxfield {width:70%;} /*As above, but allow space for "other" checkbox alongside listbox - OF9_0226*/
.nonIE .fieldwidthmodifierlist {padding-right:2px;}
.narrowformtextfield, .narrowformtextfield_err {max-width:100%;}
/* Make the gaps between the fields in IE the same size as in Firefox*/
.IE .formtextarea, .IE .formtextfield, .IE .formpasswordfield, .IE .narrowformtextfield, .IE .hourfield, .IE .minutefield
.IE .formtextarea_err, .IE .formtextfield_err, .IE .formpasswordfield_err, .IE .narrowformtextfield_err {
margin-top:-1px;margin-bottom:-1px;
}
.IE .fieldcaptiondate, .IE .fieldcaptiontime {position:relative;top:2px;}
/*One or other of these is used depending on Presentation.FieldCaptionAlign */
.fieldcaptioncolumn_alignleft {padding-right:3px;}
.fieldcaptioncolumn_alignright {text-align:right;padding-right:6px;}
.aj_formmessage {clear:both;margin-bottom:4px;}
/* Changes to allow help icons immediately to right of narrow fields */
.checkboxfield, .checkboxfield_err {display:inline;}
.fieldwidthmodifierradio .tliconhelp {vertical-align:top;}
.nonIE .fieldwidthmodifierlist .tliconhelp {vertical-align:top;}
.tliconhelp {position:absolute;}
.tlgrouphelp .tliconhelp {position:static;}
.tlgrouphelp {position:relative;}
/*TABLES*/
/* Styles not qualified by .formXXX apply to both ordinary tables and the lookup dialog. */
table.tltable {width:100%;}
thead.formtablehead tr {vertical-align:top;}
.formsection thead.formtablehead tr {background-color:#fcfed2;}
table.tltable th {text-align:left;}
.formsectionbody table.tltable th {padding:0.1em 0.2em 0.1em 0.2em;}
tbody.formtablebody td {vertical-align:top;}
/* The rows in a table or lookup can have alternating colours.
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. */
.tableroweven, .tablerowodd {background-color:white;padding:0.1em 0.2em 0.1em 0.2em;}
.formtableaddbuttonarea {margin-top:0.4em;margin-bottom:0.3em;margin-left:2px;}
.formtableaddbuttonhint {margin-left:0.3em;}
.tableouter {margin-bottom:5px;}
.tablerowbuttonscontainer_disabled {display:none;}
table.tltable td.tablerowbuttons {padding:0;}
.nonIE .partcontent .w4 {padding-left:1px;padding-right:1px;} /*Needed in Firefox to prevent left & right table borders overlapping left & right borders of their container (if using rounded corners)*/
/* Cells in table columns which have been locked by signing. These cells cannot be edited. */
.signedtablecell {color:#666666; /*dark grey*/}
/*LINKS*/
a:link, a:visited {color:blue;}
.formtablehead a:link, .formtablehead a:visited {color:blue;text-decoration:none;}
.formtablebody a:link, .formtablebody a:visited {color:blue;text-decoration:none;}
a:hover {color:#e00000;}
.formtablehead a:hover, .formtablebody a:hover {text-decoration:underline;color:#e00000;}
.disabledlink {color:#666666; /*dark grey*/} /* Used for disabled Next/Previous link text in lookups. (May be used for other disabled links in future versions) */
/*DIALOGS*/
.dialogouter {margin:0.5em auto 1em auto;background-color:white;width:50%;/*where not overridden*/}
.dialog {padding:15px 20px 22px 20px;}
/* Logon dialog */
.LogonDialog .aj_secbuttons {visibility:hidden;} /*Leave gap at left same size as section buttons (because most often you will be logging on to a form that has section buttons.*/
.LogonDialog .dlgmsg {padding-top:1em;padding-bottom:1.5em;}
.LogonDialog .dlgbuttons {margin-top:2em;margin-bottom:1em;text-align:left;}
.LogonDialog .dlgbuttons .button {width:15em;}
.LogonDialog .cols1 .column {width:100%;}
.LogonDialog .dlgbuttons .fieldmergedcolumn {width:auto;}
.LogonDialog #BB_OK-row {margin-bottom:1.5em;}
/* Custom dialog and other dialogs that expand CustomDialog */
.dialogtitle {margin-top:0.7em;margin-bottom:1.2em;}
.dialog .dlgheadercontrols {margin-bottom:0.5em;}
.dialog .mandatoryfieldmessage {margin-bottom:0.5em;}
.CustomDialog .dialogouter {width:75%;}
.CustomDialog .toolbarbuttons {margin-top:0.5em;}
/* Dialogs with custom markup (i.e. not based on CustomDialog or FormSection) */
.dlgcontent {padding:13px 13px 10px 13px;}
.dialog .cols1 .column {width:100%;}
.dlgbuttons {margin-top:2em;text-align:right;}
/* Rules affecting specific types of dialog*/
.FormClose .dialogouter {width:40em;}
.GenericFieldDialog .dialogouter {width:70%;}
.GenericFieldDialog .dlgmsg {margin-bottom:1.5em;}
.GenericFieldDialog .dlgmsg2 {margin-top:1.5em;}
.GenericFieldDialog .fieldmergedcolumn {width:auto;}
.SupplyEmail .dialogouter {width:40em;}
.SupplyEmail .dlgmsg {margin-bottom:1em;}
.SupplyEmail .dlgmsg2 {margin-top:1em;}
.SupplyEmail .fieldcaptioncolumn {width:auto;padding-right:5px;}
.YesNoDialog .dialogouter {width:45%;}
.DownloadFile .dlgmsg p {margin-bottom:1em;}
.RecoveryData .dialogouter {width:60%;}
.PDFOptions h2 {font-size:100%;margin-top:0;margin-bottom:1em;}
.PDFOptions h2.importantmsg {margin-top:1em;}
.PDFOptions li {margin-bottom:0.5em;}
.PDFOptions .dlgbuttons {text-align:center;}
.PDFOptions p.getreadermsg {margin-bottom:1em;}
.UploadFile input#Filedata {width:100%;}
.UploadFile p.uploadsizelimit {margin-top:1em;}
.FormAttachments .dialogouter {width:60%;max-width:60em;}
.FormAttachments select {width:100%;}
.FormAttachments .attachdlgbuttons .button {width:8em;margin-bottom:0.5em;margin-right:0.3em;margin-top:1em;}
.FormAttachments .attachdlgcontent {margin-top:-2em;}
.FormAttachments .attachdlgcontent p {margin-top:1em;margin-bottom:0.3em;font-weight:bold;}
.Lookup .dialogouter {width:75%;}
.Lookup .dialog h3 {margin-left:15px;}
.Lookup .lookupcustombuttons {float:right;}
.Lookup .lookuptableheadercaption {margin:0.5em 0.5em 0.2em 0;font-weight:bold;} /* Caption text which optionally appears above the lookup table (Set by UISetCaption API) */
.Lookup .lookuprecordcontrols {clear:both;}
.Lookup .lookuprecordcontrols_top {margin-top:1.4em;}
.Lookup .lookupnextprev {float:right;}
.Lookup .lookupnextprev a, .Lookup .lookupnextprev .disabledlink {margin-left:0.5em;}
.Lookup .dlgcontent {padding-top:0.7em;}/*less than other dialogs*/
/* lookup table */
.Lookup .aj_table {margin-top:1em;margin-bottom:1em;}
.Lookup .tltable {border:0px none;border-collapse:collapse;}
.Lookup table.tltable th, .Lookup table.tltable td {border:solid 2px #eaecef; /*grey*/}
.Lookup table.tltable th {background-color:#3a4b8f;background-image:url(tl9_tableheadbg.opng);background-repeat:repeat-x;color:white;}
.Lookup .lookupselectcell {vertical-align:middle;padding-left:1.5em;}
.Lookup table.tltable tbody td.tablerowodd {background-color:#f6f6f6;}
.Lookup table.tltable tbody tr.hover td {background-color:yellow;}
.Lookup table.tltable tbody tr.hover {cursor:pointer;}
/* lookup table column headings */
.Lookup thead a:link, .Lookup thead a:visited {color:white;text-decoration:none;}
.Lookup thead a:hover {text-decoration:underline;}
.Lookup thead th {padding:0;min-height:21px;}
.Lookup thead th.thsel {width:1%;padding:0.3em 0.3em 0.2em 0.2em;}
.Lookup thead .iconscontainer_outer {position:relative;}
.Lookup thead .iconscontainer {position:absolute;width:47px;right:0;}
.Lookup thead .filtericon {float:right;}
.tlfiltericon {width:23px;height:21px;background-image:url(tl9_filter.ofif);}
.pressed .tlfiltericon {background-image:url(tl9_filter_pressed.ofif);}
.tlfiltercancelicon {width:23px;height:21px;background-image:url(tl9_filter_cancel.ofif);}
.pressed .tlfiltercancelicon {background-image:url(tl9_filter_cancel_pressed.ofif);}
.Lookup thead .sorticon {float:right;}
.Lookup thead .colhdg {display:block;padding:0.3em 0.2em 0em 0.2em;min-height:21px;margin-right:38px;}
.Lookup thead .colhdg a:hover {color:white;}
.tliconsorted_asc, .tliconsorted_desc {width:7px;height:4px;margin:5px 5px 0px 2px;background-repeat:no-repeat;}
.tliconsorted_asc {background-image:url(tl9_sorted_asc.ofif);}
.tliconsorted_desc {background-image:url(tl9_sorted_desc.ofif);}
.Filter .predicateouter {margin-left:1.5em;margin-top:0.5em;}
.Filter .predicatelabel, .Filter .predicate, .Filter .predicatefield {float:left;}
.Filter .predicatelabel {margin:1em 2.5em 0 0em;}
.Filter .predicatefield {margin:0.9em 0 0 1em;}
.AssistanceDialog .dlgmsg, .AssistanceDialog .dlgmsg2 {margin-top:1em;margin-bottom:1em;}
.AssistanceADDialog .dlgmsg, .AssistanceADDialog .dlgmsg2, .AssistanceADDialog .dlgmsg3 {margin-top:1em;margin-bottom:1em;}
.AssistanceADDialog .dlglimitationshdg {margin-top:1.5em;margin-bottom:1em;}
.AssistanceADDialog .dlglimitationslist li {margin-bottom:0.5em;}
.SignVerify .button {width:5em;}
.SignVerify p.dlgmsg {margin-top:1em;margin-bottom:1em;}
.SignVerify .signaturecontent {background-color:white;border:1px solid #999;padding:0 1em 1em 1em;}
.SignVerify .signaturecontent pre {font-size:100%;}
/* Spell Check dialog */
.SpellCheck .dialogouter {width:70%;max-width:70em;}
.SpellCheck div.row {clear:both;padding-top:5px;}
.SpellCheck div.row span.label {float:left;width:9em;}
.SpellCheck .smfield {width:15em;}
.SpellCheck #spelltext {padding:10px;border:1px solid black;overflow:auto;margin-top:10px;background-color:white;color:black;clear:both;}
.SpellCheck #CompletedMessage {display:none;font-weight:bold;}
.SpellCheck #OptionButtons .button {width:7em;}
.SpellCheck .hiddencontrols {display:none;position:absolute;top:0;left:0;width:1px;height:1px;}
.SpellCheck #cWord {color:#e00000;font-weight:bold;} /*Current word in error*/
/* Process message dialog (Used by OfficeProcess Desktop when viewing message from previous participant)*/
.processmessage {padding:10px;border:3px outset #dddddd;background-color:#ffff99;height:100px;}
/* Accessibility Help dialog */
ul.accesskeys strong {color:#00a200;}
.NormalToAccessibleDialog ul.accesskeys, .AccessibleToNormalDialog ul.accesskeys {list-style:none none outside;margin-left:0;padding-left:0;}
/* ALL DIALOGS ABOVE MAIN FORM (Used in IE7+, Firefox and Chrome when AJAX and this feature are enabled) */
.dialogaboveform {
/* When showing a dialog above the main form, this class is applied in addition to .dialogbody */
background-color:transparent; /* override declaration in .dialogbody */
min-height:100%;
width:100%;
z-index:100;
position:absolute;
top:0;
left:0;
}
.dialogaboveform .dialogouter {
border:3px solid black;
}
/* Hide the contents of the fragments DialogHeaderCustomisable1 and DialogFooterCustomisable1 if dialog is
being shown above form, otherwise if they contain custom content it will overlap with the main form. */
.dialogaboveform .dlgheaderarea1, .dialogaboveform .dlgfooter1 {display:none;}
.modaldialogoverlay, .modalinlinetableoverlay {
/* A semi-transparent div that sits underneath the dialog but above the disabled main form,
when a dialog is displayed modally above the main form. */
filter:alpha(opacity=40); /* Transparency in IE(7+). N.B. This Microsoft proprietary property will fail W3C CSS validation. */
opacity:0.4; /* Transparency in Firefox etc. N.B. This property will fail validation against W3C CSS level 2.1, but it is valid in CSS 3. */
background-color:#000;
top:0;
left:0;
position:fixed; /* In IE, overridden below */
min-height:100%;
min-width:100%;
/* Also height and width are set by JavaScript, for IE (see below) and browsers that don't support position:fixed, e.g. Safari on iPad) */
}
.IE .modaldialogoverlay, .IE .modalinlinetableoverlay {
/* In IE7, using position:fixed can make scrolling a little jerky, so use position: absolute instead. */
/* JavaScript also sets the width and height so the overlay covers the entire document. */
position:absolute;
}
.modaldialogoverlay {z-index:50;}
.modalinlinetableoverlay {z-index:20;}
/* Adding table row inline */
.tlTableInlineAddRowContent {
z-index:40;
position:relative;
background-color:white;
border:3px solid black;
padding:1px 6px 7px 6px;
margin:5px 0 5px 0;
}
.tlTableInlineAddRowContent .tlinlinetoolbar {margin-top:5px;}
.tlTableInlineAddRowContent .info, .tlTableInlineAddRowContent .info2, .tlTableInlineAddRowContent .custommsg {margin-top:4px;}
/*Main font*/
body, input, textarea, select {
font-family:Arial,Helvetica,sans-serif;
}
body {font-size:75%;}
input, textarea, select {font-size:100%;}
/*Tweaks to layout, desirable if main font size is smaller than about 13px, otherwise not needed:*/
.checkboxfield label, .radiogroup label {position:relative;top:-1px;} /*Position checkbox and radio button labels slightly above where they'd normally be (approximate vertical align middle) */
.IE6 .checkboxfield label, .IE6 .radiogroup label {position:static;} /*Undo the above in IE6 as it can break in IE6 in some circumstances, leaving the labels totally in the wrong place*/
.tliconhelp img, .tliconhelp input, .tliconerror img, .tliconerror input {margin-top:0px;} /*Icon vertical positioning: Override default top margin 2px because field height is smaller than standard */
/*Rich text editor*/
.mceEditorIframe {margin-bottom:0 !important;}
.disabledrichtextarea {padding:1px;background-color:white;min-height:1.2em;}
.IE .disabledrichtextarea {margin-top:0px;margin-bottom:0px;}
.disabledrichtextwidthmodifier {padding-right:4px;}
.IE .fieldwidthmodifierrichtext {padding-right:2px;}
.nonIE .fieldwidthmodifierrichtext {padding-right:4px;}
.mceEditor td {
border-color:#d4d0c8;
border-width:1px !important;
}
/* Prevent rich text controls becoming too narrow*/
.fieldwrapperrichtext .fieldinputcolumn, .fieldwrapperrichtext .fieldmergedcolumn {
min-width:361px;
overflow:visible;/*For IE6 and in case width below is wrong; the effect of omitting min-width and just having overflow:visible is help icon can overlap rich text area*/
}
/* 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). */
body.popupmessagearea {
background-color:rgb(255,255,245);/*very pale yellow*/
margin:1.3em 1em 1.3em 1em;
}
/* Heading text in the pop-up window */
.tlform .popupheader, .popupcontent {font-size:medium;}
.tlform .popupheader {
border-bottom:1px solid #666;
color:#e00000;
padding-bottom:0.9em;
}
p.popupcontent {margin-top:1em;margin-bottom:3em;}
/* ACCESSIBILITY */
/* Hide items specifically for screen-readers/accessibility */
.accessibleformstartlinks {position:absolute;top:-1px;} /*legacy*/
.accessiblefieldinfo {position:absolute;}
/* Prevent skip links affecting the page layout (shifting other content down when tabbed to) */
.accessibleskiplink, .accessibleskiplinktarget {position:absolute;}
/* .accessible_hidden hides items but leaves them audible to screen readers */
/* p.virtualbufferupdate is a JAWS fix */
/* Others make skip link invisible (until tabbed to) */
.accessible_hidden, .accessibleskiplink a, accessibleskiplink a:hover, .accessibleskiplink a:visited, p.virtualbufferupdate {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
/* Make skip link visible when tabbed to, for sighted users who navigate using the keyboard */
.accessibleskiplink a:active, .accessibleskiplink a:focus {
position:static;
width:auto;
height:auto;
background-color:white; /*Ensure readable if logo behind*/
}
/* Some items are marked up as lists for semantic reasons, but we do not want them displayed as lists */
.tlnoul {list-style:none none inside;}
.tlnoul, .tlnoli {margin:0;padding:0;display:inline;float:none;height:auto;}
/* 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