/* BRANDING (mastheads and footer) */
.tl_stdmastheadorfooter {
overflow:hidden; /*In case theme specifies a height less than the height of the left image */
background-repeat:repeat;
background-position:center top;
}
.tl_stdmastheadorfooter_inner {
background-repeat:no-repeat;
background-position:right top;
height:100%;
}
.tl_stdmastheadorfooter_leftimage {float:left;}
.post_tlmasthead {clear:both;}
/* Branding values overridden by theme css */
.tlmasthead {height:37px;}
.tldialogmasthead {height:40px;}
.tlfooter {height:0;}
.tl_stdmastheadorfooter {background-color:white;}
.tlmasthead .tl_stdmastheadorfooter_statictext {padding-top:15px}
.tlfooter .tl_stdmastheadorfooter_statictext {padding-top:15px;}
.tldialogmasthead .tl_stdmastheadorfooter_statictext {padding-top:15px;}
.tl_stdmastheadorfooter_leftimage {padding:0 8px 0 5px;}
/* GENERAL */
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;}
.IE fieldset { border:1px solid #666;margin-top:2px; } /* IE override to mimic the FFox colour */
.builtindialog .tlform fieldset {border:none;} /* "built in" as opposed to "custom" dialog*/
.tlform p {margin:0px;}
.tlform {margin-top:0;margin-bottom:0;} /* prevent IE6 and 7 leaving a 1em vertical gap between masthead and tlform, and tlform and tlfooter */
/*Heading fonts etc.*/
.tlform h1, .tlform h2 {font-family:arial,helvetica,"sans serif";}
/* This change should only apply to non-responsive headers. The flat and white-space are un-done below for responsive styles*/
.secheadertitle {color:black; float: left; white-space: nowrap;}
/*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*/
/* Make browsers consistently leave a gap approx half as high as a legend above a fieldset which has an empty legend. */
/* (This was default behaviour in IE6 and 7 if you did not alter fieldset border properties from browser defaults.) */
fieldset.emptylegend {margin-top:10px;} /* IE */
.nonIE fieldset.emptylegend {margin-top:9px;} /* Firefox, Safari, Chrome etc. */
/* 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;}
.linkbaritem {display:inline;border-left:1px solid black;padding-left:0.5em;margin-left:0.5em;}
.linkbaritem:first-child {border-left-style:none;padding-left:0;margin-left:0;}
.assistanceid, .formsaveid {color:blue;} /* Same colour as links (but not underlined); may be overridden by theme CSS */
.tlmaincontent {clear:both;}
.tlmaincontent_secbuttons, .headerarea2_secbuttons {margin-left:180px;margin-right:10px;}
.tlmaincontent_nosecbuttons, .headerarea2_nosecbuttons {margin-left:10px;margin-right:10px;}
/* Min/max widths.
* (CSS min-width does not work in IE6, so we use a different method in Fragment InternalStyles for IE6 only)*/
.aj_formcontent, .headerarea {min-width:410px;} /* min width of main part of form */
.tltoolbar {min-width:400px;}
.dialogouter {min-width:460px;max-width:1000px;} /* min & max width of dialogs */
/* Min heights. These values are only used if JavaScript is disabled, because they are overridden in function MakeFormContentAtLeastAsHighAsSectionButtons */
.aj_formcontent {min-height:600px;}
.IE6 .aj_formcontent {height:600px;} /*IE6 does not understand min-height, but it treats height as min-height */
/* undo the above in dialogs */
.dialog .aj_formcontent {min-height:0;}
.IE6 .dialog .aj_formcontent {height:auto;}
/* Toolbars and buttons */
.tltoolbar {
border:1px solid #c7c7c7;
background-color:#ececec;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:white;
font-weight:bold;
font-size:93.3%;
cursor:pointer;
/* Prevents iOS 8 from overriding button styles */
-webkit-border-radius:0px;
-webkit-appearance: none;
margin-left:0px;
margin-right:0px
}
.button {
color:black;
}
/* 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*/
/* See also .secbuttoncontainer {position:absolute;left:-180px;} CSS which is set in Fragment XXX in controls11.htm when using fixed width form presentation option. */
/*Vertical gap between the section buttons*/
.sectionbuttoncontainer, .sectionbuttoncontainerhover { margin-bottom:2px; } /*Firefox etc*/
.IE6or7 .sectionbuttoncontainer, .IE6or7 .sectionbuttoncontainerhover {clear:both; margin-bottom:5px;float:left;} /* Needed for IE, gaps between buttons*/
/* Section buttons */
.currentsectionbutton, .enabledsectionbutton, .disabledsectionbutton {
/*Styles which apply to all section buttons in all browsers*/
height:27px; /* 24px for IE6or7 - see below */
width:142px;
background-image:url(TL_SectionsSprite.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;
padding-left:6px;padding-right:6px;
}
.currentsectionbutton { background-position:0 -97px; }
.enabledsectionbutton { background-position:0 3px; }
.disabledsectionbutton { background-position:0 3px; }
.sectionbuttoncontainerhover .enabledsectionbutton { background-position:0 -47px; }
/* 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).*/
.IE6or7 .currentsectionbutton { float:left; height:24px; background-position:0 -100px }
.IE6or7 .enabledsectionbutton { float:left; height:24px; background-position:0 0; }
.IE6or7 .disabledsectionbutton { float:left; height:24px; background-position:0 0; }
.IE6or7 .sectionbuttoncontainerhover .enabledsectionbutton { background-position:0 -50px; }
/* Vertical positioning of text on section buttons in IE versions */
.IE .currentsectionbutton, .IE .enabledsectionbutton, .IE .disabledsectionbutton { padding-top:4px; }
.IE6or7 .currentsectionbutton, .IE6or7 .enabledsectionbutton, .IE6or7 .disabledsectionbutton { padding-top:0px; }
/*Current section indicator (to right of button)*/
.currentsectionindicator, .enabledsectionindicator, .disabledsectionindicator {
width:18px;
height:24px;
float:right;
background-repeat:no-repeat;
}
.currentsectionindicator { background-image:url(TL_SectionsSprite.ofif); background-position:-800px -97px; }
.sectionbuttoncontainerhover .enabledsectionindicator { background-image:url(TL_SectionsSprite.ofif); background-position:-800px -47px; }
.IE6or7 .currentsectionindicator { background-image:url(TL_SectionsSprite.ofif); background-position:-800px -50px; }
.IE6or7 .sectionbuttoncontainerhover .enabledsectionindicator { background-image:url(TL_SectionsSprite.ofif); background-position:-800px -25px; }
/*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:none; }
.tliconstatuspartial { float:left; width:20px; height:24px; background-image:url(TL_IconsSprite.ofif); background-position:-600px 5px; }
.tliconstatuscomplete { float:left; width:20px; height:24px; background-image:url(TL_IconsSprite.ofif); background-position:-550px 5px; }
.IE6or7 .tliconstatuspartial { background-position:-600px 2px; }
.IE6or7 .tliconstatuscomplete { background-position:-550px 2px; }
/** new style to combat the display:inline being removed **/
.IE6 .tlsectionbuttons ul li { float:left; }
/** subsection groups **/
.contractedgroup .enabledsectionbutton {background-position:-200px 3px;}
.subsectiongroupcontainer .currentsectionindicator, .subsectiongroupcontainer .enabledsectionindicator, .subsectiongroupcontainer .disabledsectionindicator {
position:relative;
left:18px;
}
.subsectiongroupcontainer {
background-color:#ECECEC;
width:140px;
border:1px solid #C7C7C7;
margin-top:2px;
margin-right:20px;
margin-bottom:3px;
margin-left:20px;
float:left;
padding-top:2px;
padding-bottom:6px;
}
.IE6 .subsectiongroupcontainer {
margin-left:10px;
}
.IE6or7 .subsectiongroupcontainer {
margin-top:0;
margin-bottom:6px;
}
.subsectiongroupcontainer .sectiongrouptitle {
height:12px;
width:112px;
margin:0px 2px 6px 2px;
padding:5px 4px 7px 6px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
background-image:url(TL_SectionsSprite.ofif);
background-position:-200px -100px;
background-repeat:no-repeat;
background-color:transparent;
border:none;
text-align:center;
padding-right:18px;
}
.subsectiongroupcontainer .currentsectionbutton, .subsectiongroupcontainer .enabledsectionbutton, .subsectiongroupcontainer .disabledsectionbutton {
width:100px;
}
.subsectiongroupcontainer .currentsectionbutton { background-position:-600px -97px;font-weight:normal; }
.subsectiongroupcontainer .enabledsectionbutton { background-position:-600px 3px; font-weight:normal;}
.subsectiongroupcontainer .disabledsectionbutton { background-position:-600px 3px;font-weight:normal; }
.subsectiongroupcontainer .sectionbuttoncontainerhover .enabledsectionbutton { background-position:-600px -47px; }
/* 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).*/
.IE6or7 .subsectiongroupcontainer .currentsectionbutton { float:left; height:24px; background-position:-600px -100px; }
.IE6or7 .subsectiongroupcontainer .enabledsectionbutton { float:left; height:24px; background-position:-600px 0; }
.IE6or7 .subsectiongroupcontainer .disabledsectionbutton { float:left; height:24px; background-position:-600px 0; }
.IE6or7 .subsectiongroupcontainer .sectionbuttoncontainerhover .enabledsectionbutton { background-position:-600px -50px; }
.orphanedsection input[type=submit] {
background-image:none;
background-color:black;
color:white;
border:1px solid red;
margin-top:0px;
}
.nonIE .orphanedsection input[type=submit] {
margin-top:2px;
}
.secbuttoncontainer li {clear:both;} /* when hover mouse just above expanded nested section group, prevent section button below getting hover style */
.IE6 .secbuttoncontainer li {clear:none;} /* undo the above in IE6 as it causes problem */
/*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;}
.tlform .radiogroup, .tlform .radiogroup_err {margin:0;padding:0;border:none;display:inline;}
.tlform .radiogroup legend, .tlform .radiogroup_err legend {position: absolute;left: -9999px;}
/*Fields in error*/
.formtextarea_err, .formtextfield_err, .formpasswordfield_err, .narrowformtextfield_err,
.tlform .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*/
margin:1px 0;
-webkit-border-radius:0;
padding-left:0px;
padding-right:0px
}
/*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. */
.fieldwidthmodifierlist {padding-right:4px;} /*Firefox (it's actually the wrong value for Opera, but market share dictates)*/
.IE6or7 .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; min-height:13px; } /*Min height ensures div takes width (and height) in standards compliant browsers, when field captions are right aligned*/
.fieldcaptioncolumn { float:left; width:28%; min-height:1px; margin-top:1px; }
.fieldinputcolumn { float:left; width:44%; overflow:hidden; }
.fieldmergedcolumn { float:left; width:72%; overflow:hidden; min-height:1em; } /*=28% + 44%*. Min-height ensures empty captions have vertical height in standards compliant browsers*/
.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 #cccccc;} /* vertical line between columns inside a heading */
.colborderrightinvisible {border-right-color:transparent;} /* Overrides colour specified in .colborderright if Presentation.ShowColumnDividers<>1 */
/*Horizontal line displayed when a heading contains more column breaks than columns*/
.colrowbreak {clear:both; height:1px; background-color:#cccccc; overflow:hidden;/*IE6 fix*/}
.colrowbreakinvisible {background-color:transparent;} /* Overrides colour specified in .colrowbreak if Presentation.ShowColumnDividers<>1 */
/*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_IconsSprite.ofif); vertical-align:top; width:26px; height:24px; }
.tliconcalendar .hover { background-position:0 -50px; }
.columns .tliconcalendar img { width:18px; height:23px; background-position:-50px 0; }
.columns .tliconcalendar .hover { background-position:-50px -50px; }
.tliconhelp img, .tliconhelp input { background-image:url(TL_IconsSprite.ofif); width:16px; height:18px; background-position:-300px 0px; 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:-300px -50px; }
.columns .tliconhelp img, .columns .tliconhelp input { width:12px; height:18px; background-position:-350px 0px; }
/* Change image on mouseover and on focus (see above) */
.columns .tliconhelp .hover, .columns .tliconhelp a:focus img, .columns .tliconhelp a:active img { background-position:-350px -50px; }
.tliconerror img, .tliconerror input { background-image:url(TL_IconsSprite.ofif); width:13px; height:18px; background-position:-200px 0px; margin-top:2px;position:relative;left:-2px;}
.tliconerror .hover, a:focus .tliconerror img, a:active .tliconerror img { background-position:-200px -50px; }
.columns .tliconerror img, .columns .tliconerror input { width:12px; height:18px; background-position:-250px 0px; position:static; }
.columns .tliconerror .hover, .columns a:focus .tliconerror img, .columns a:active .tliconerror img { background-position:-250px -50px; }
.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_IconsSprite.ofif); background-position:-650px 0; }
.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");}
.tlicontablerowinsert { width:22px; height:21px; background-image:url(TL_IconsSprite.ofif); background-position:-400px 0; }
.tlicontablerowedit { width:20px; height:21px; background-image:url(TL_IconsSprite.ofif); background-position:-450px 0; }
.tlicontablerowdelete { width:17px; height:21px; background-image:url(TL_IconsSprite.ofif); background-position:-500px 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, .IE8 .tliconcalendar, .IE9 .tliconcalendar {margin-left:2px;}
.nonIE .columns .tliconcalendar {margin-left:1px;}
.IE8 .columns .tliconcalendar , .IE9 .columns .tliconcalendar { margin-left:-1px;}
.IE6or7 .columns .tliconcalendar {margin-left:-2px;}
.IE .tliconhelp {margin-left:2px;}
.IE6or7 .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;}
.IE6or7 .fieldwithlinkedbutton, .IE6or7 .captionwithlinkedbutton {display:inline-block;}
.IE6or7 .linkedbuttoncontainer input {float:right;margin-left:0.2em;margin-right:2px;}
.IE6or7 .fieldwithlinkedbutton {padding-right:0px;}
.IE6or7 .fieldwithlinkedbutton .formtextarea, .IE6or7 .fieldwithlinkedbutton .formtextfield, .IE6or7 .fieldwithlinkedbutton .formpasswordfield, .IE6or7 .fieldwithlinkedbutton .formtextarea_err, .IE6or7 .fieldwithlinkedbutton .formtextfield_err, .formpasswordfield_err {width:95%;}
.IE6or7 .linkedbuttoncontainer { width:auto; }
.fieldwithlinkedbutton, .captionwithlinkedbutton {display:table-cell;}
.linkedbuttoncontainer {display:table-cell;white-space:nowrap;width:10%;}
.nonIE .linkedbuttoncontainer {padding-right:4px;/*Padding appears necessary in Firefox & Chrome (but not Safari & Opera).*/}
/*List box field width*/
.listboxfield {max-width:95%;} /*Prevent drop arrow of list box being hidden if its content makes it too wide to fit in the space available, also 95% not 100% to prevent help icon wrapping in Chrome & Safari*/
.IE select.listboxfield {width:100%; max-width:100%;} /*max-width on select elements works in IE10+ but not earlier IE versions. width works in all*/
.IE .fieldwrapperlistboxother select.listboxfield {width:70%;} /*As above, but allow space for "other" checkbox alongside listbox - OF9_0226*/
.nonIE .fieldwidthmodifierlist, .IE8 .fieldwidthmodifierlist, .IE9 .fieldwidthmodifierlist {padding-right:2px;}
.narrowformtextfield, .narrowformtextfield_err {max-width:100%;}
/* Make the gaps between the fields in IE6/7 the same size as in Firefox*/
.IE6or7 .formtextarea, .IE6or7 .formtextfield, .IE6or7 .formpasswordfield, .IE6or7 .narrowformtextfield, .IE6or7 .hourfield, .IE6or7 .minutefield
.IE6or7 .formtextarea_err, .IE6or7 .formtextfield_err, .IE6or7 .formpasswordfield_err, .IE6or7 .narrowformtextfield_err {
margin-top:-1px;margin-bottom:-1px;
}
.IE6or7 .fieldcaptiondate, .IE6or7 .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;}
.checkboxfield_err {line-height:1.8em;padding-right:2px;padding-top:2px;}
.IE6or7 .checkboxfield_err {padding-top:0;}
.fieldwidthmodifierradio .tliconhelp {vertical-align:top;}
.nonIE .fieldwidthmodifierlist .tliconhelp {vertical-align:top;}
.IE8 .fieldwidthmodifierlist .tliconhelp {vertical-align:top;}
.IE9 .fieldwidthmodifierlist .tliconhelp {vertical-align:top;}
.tliconhelp {position:absolute;}
.tlgrouphelp .tliconhelp {position:static;}
.tlgrouphelp {position:relative;}
.fieldwithlinkedbutton .tliconhelp, .righticons noscript .tliconhelp, .nonIE .fieldwidthmodifierradio .tliconhelp {position:relative;} /*prevent help icon overlapping content below if it wraps*/
/** Heading help fix **/
.IE8 .tlgrouphelp .tliconhelp, .IE9 .tlgrouphelp .tliconhelp { margin-top:-2px; margin-left:-2px; }
/* Prevents help icon overlapping on iOS 8 */
.fieldwidthmodifierdate {margin-bottom:5px;}
.fieldwidthmodifierdate .tliconhelp {position:relative;}
/*TABLES*/
/* Styles not qualified by .formXXX apply to both ordinary tables and the lookup dialog. */
table.tltable {width:100%;}
table.tltable, table.tltable th, table.tltable td {
border:1px solid black;
border-color:inherit; /* to prevent table border lines inheriting the body colour (if non black) e.g. body {color:purple;} (except IE6/7 which are not affected). (IE9 inherits the colour inconsistently - the bottom border does not inherit but the others do!) */
border-collapse:collapse;
}
thead.formtablehead tr {vertical-align:top;}
.formsection thead.formtablehead tr {background-color:#dadada;}
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.
Odd and even are calculated based on 0-indexed rows so the first row is even. */
.tableroweven, .tablerowodd {padding:0.1em 0.2em 0.1em 0.2em;}
.tableroweven {background-color:white;}
.tablerowodd {background-color:#eeeeee;}
.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 18px 20px;}
.builtindialog .dialog {padding-bottom:16px;}
/* Logon dialog */
.LogonDialog .tlmaincontent {width:600px;margin-left:auto;margin-right:auto;} /*Do not increase width above 600 because not tested with theme which specifies a narrower width than this (and 600 is the minimum for themes)*/
.LogonDialog .formtitle {display:none;}
.LogonDialog .tltoolbar_top {display:none;}
.LogonDialog fieldset {border-style:none;}
/* move bottom toolbar up */
.LogonDialog .aj_formcontent {min-height:0 !important;} /* important to override inline style set by JavaScript */
.IE6 .LogonDialog .aj_formcontent {height:auto !important;}
.LogonDialog .cols1 .column {width:100%;}
.LogonDialog .fieldcaptioncolumn {width:22%;} /* default = 28% */
.LogonDialog .fieldinputcolumn {width:33%;} /* default = 44% */
.LogonDialog .fieldmergedcolumn {width:90%;}
/* See comment in Fragment LogonDialogLinkedLogonButtonAfterField. The widths of the password field and logon button
are both fixed so the layout works when text size changed via IE's View > Text Size option. */
.IE6or7 .LogonDialog .fieldwithlinkedbutton {width:131px;float:left;}
.IE6or7 .LogonDialog .linkedbuttoncontainer {width:61px;float:right;}
.IE6or7 .LogonDialog #BB_OK {width:57px;margin-left:0;}
.LogonDialog .dlgmsg {padding-top:1em;padding-bottom:1.5em;}
.LogonDialog .selfreglinks {margin-top:0.2em;padding-bottom:0.5em;}
.LogonDialog .selfreglink {margin-top:0.7em;}
.LogonDialog .tlconnectwithlinks {margin-top:0.3em;padding-bottom:0;}
.LogonDialog .tlconnectwithlink {float:left; width:190px; margin:7px 2px 4px 0;}
.LogonDialog .tlconnectwithlink img {display:block;float:left;}
.LogonDialog .tlconnectwithlinktext {
display:block;
float:left;
padding:18px 0 0 5px;
text-decoration:inherit;/*so Firefox doesn't lose the underline*/
cursor:pointer;/*for IE*/
}
/* Process Start Dialog - similar look to the logon dialog*/
.ProcessStartDialog .tlmaincontent {width:600px;margin-left:auto;margin-right:auto;}
.ProcessStartDialog .formtitle {display:none;}
.ProcessStartDialog .tltoolbar_top {display:none;}
.ProcessStartDialog fieldset {border-style:none;}
.ProcessStartDialog .aj_formcontent {min-height:0 !important;}
.IE6 .ProcessStartDialog .aj_formcontent {height:auto !important;}
/* mimic no cpation full width display for this dialog */
.ProcessStartDialog .cols1 .column {width:100%;}
.ProcessStartDialog .fieldcaptioncolumn {display:none;}
.ProcessStartDialog .fieldinputcolumn {width:90%;}
/* 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 .dialogouter {width:65%;}
.SignVerify .signaturecontent pre {font-size:small;}
/* 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*/
/*Facebook send dialog*/
.FacebookSend .sendtext {padding: 0.25em 0 0.25em 0;}
.FacebookSend .suggestedlink {padding: 0.25em 0 0.25em 0;}
.FacebookSend .subjecttext {padding: 0.25em 0 0.25em 1em;}
.FacebookSend .subjectfont {font-size: large; color: #FF0000;}
.FacebookSend .sendbutton {padding: 18px 0px 3px 0px;}
/* 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:1100;
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=55); /* Transparency in IE(7+). N.B. This Microsoft proprietary property will fail W3C CSS validation. */
opacity:0.55; /* 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) */
}
.IE6or7 .modaldialogoverlay, .IE6or7 .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:1050;}
.modalinlinetableoverlay {z-index:1020;}
/* Adding table row inline */
.tlTableInlineAddRowContent {
z-index:1040;
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%;}
/* Make disabled buttons obviously disabled in Firefox, Chrome, Safari (all types: section/action/toolbar buttons) including when a theme overrides the colour of input elements */
input[type=submit][disabled] { color:#6D6D6D; }
input.buttondisabled[type=submit][disabled] { color:#6D6D6D; }
.tltoolbar input.buttondisabled[type=submit][disabled] { color:#6D6D6D; }
input[type=button][disabled] { color:#6D6D6D; }
input.buttondisabled[type=button][disabled] { color:#6D6D6D; }
.tltoolbar input.buttondisabled[type=button][disabled] { color:#6D6D6D; }
/*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) */
.IE6or7 .checkboxfield label, .IE6or7 .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 */
.tliconhelp img { margin-bottom: -3px; } /* margins only affect elements that.. */
.nonIE .tliconhelp img { margin-bottom: -5px; } /* ..are not absolutely positioned */
.IE6 .tliconhelp img {margin-bottom:0; } /*(except IE6 gets it wrong)*/
/*Rich text editor*/
.mceEditorIframe {margin-bottom:0 !important;}
.disabledrichtextarea {padding:1px;background-color:white;min-height:1.2em;}
.IE6or7 .disabledrichtextarea {margin-top:0px;margin-bottom:0px;}
.disabledrichtextwidthmodifier {padding-right:4px;}
.IE6or7 .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:white;
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:black;
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;
}
p.virtualbufferupdate {top:0;}/* remove gap appearing underneath the footer in some circumstances */
/* 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*/
}
.accessibleskiplink { z-index:501; } /* Arbitrary value to give skip link a very good chance of being in front of custom masthead content */
/* 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;}
.accessibleskiplinkresponsive { display: none; } /* The responsive skip link is hidden by default */
/* 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