/* Primary Colors */ /* Secondary Colors */ /* Derivative Colors */ /* Messages Theme */ /* Fancy File Input Theme */ /* Banners Theme */ /** * RESET */ html, body, p, div, h1, h2, h3, h4, h5, h6, img, pre, form, fieldset { margin: 0; padding: 0; } ul, ol, dl { margin: 0; } img, fieldset { border: 0; } @-moz-document url-prefix() { img { font-size: 0; } img:-moz-broken { font-size: inherit; } } /* https://github.com/necolas/normalize.css */ /* Customised to remove styles for unsupported browsers */ details, main, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: button; } /* Primary Colors */ /* Secondary Colors */ /* Derivative Colors */ /* 30px - using ems so the fields increase in line with user specified font-sizes */ /** * TYPOGRAPHY - 14px base font size, agnostic font stack */ body { color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.42857142857143; } /* International Font Stacks*/ [lang|=en] { font-family: Arial, sans-serif; } [lang|=ja] { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS Pゴシック", Verdana, Arial, sans-serif; } /* Default margins */ p, ul, ol, dl, h1, h2, h3, h4, h5, h6, blockquote, pre, form.aui, table.aui, .aui-tabs, .aui-panel, .aui-group { margin: 10px 0 0 0; } /* No top margin to interfere with box padding */ p:first-child, ul:first-child, ol:first-child, dl:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, blockquote:first-child, pre:first-child, form.aui:first-child, table.aui:first-child, .aui-tabs:first-child, .aui-panel:first-child, .aui-group:first-child { margin-top: 0; } /* Headings: desired line height in px / font size = unitless line height */ h1, .aui-page-header-hero .aui-page-header-main h1, .aui-page-header-hero .aui-page-header-main h2, .aui-page-header-marketing .aui-page-header-main h1, .aui-page-header-marketing .aui-page-header-main h2 { color: #333333; font-size: 32px; font-weight: normal; line-height: 1.25; text-transform: none; margin: 30px 0 0 0; } h2 { color: #333333; font-size: 24px; font-weight: normal; line-height: 1.25; text-transform: none; margin: 30px 0 0 0; } h3, .aui-page-header-hero .aui-page-header-main p, .aui-page-header-marketing .aui-page-header-main p { color: #333333; font-size: 20px; font-weight: normal; line-height: 1.5; text-transform: none; margin: 30px 0 0 0; } h4 { color: #333333; font-size: 16px; font-weight: bold; line-height: 1.25; text-transform: none; margin: 20px 0 0 0; } h5 { color: #333333; font-size: 14px; font-weight: bold; line-height: 1.42857143; text-transform: none; margin: 20px 0 0 0; } h6 { color: #707070; font-size: 12px; font-weight: bold; line-height: 1.66666667; text-transform: uppercase; margin: 20px 0 0 0; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } /* Nice styles for using subheadings */ h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 10px; } /* Increase the margins on all headings when used in the group/item pattern ... */ .aui-group > .aui-item > h1:first-child, .aui-group > .aui-item > h2:first-child, .aui-group > .aui-item > h3:first-child, .aui-group > .aui-item > h4:first-child, .aui-group > .aui-item > h5:first-child, .aui-group > .aui-item > h6:first-child { margin-top: 20px; } /* ... unless they're the first-child */ .aui-group:first-child > .aui-item > h1:first-child, .aui-group:first-child > .aui-item > h2:first-child, .aui-group:first-child > .aui-item > h3:first-child, .aui-group:first-child > .aui-item > h4:first-child, .aui-group:first-child > .aui-item > h5:first-child, .aui-group:first-child > .aui-item > h6:first-child { margin-top: 0; } /* Other typographical elements */ small { color: #707070; font-size: 12px; line-height: 1.33333333333333; } code, kbd { font-family: monospace; } var, address, dfn, cite { font-style: italic; } cite:before { content: "\2014 \2009"; } blockquote { border-left: 1px solid #cccccc; color: #707070; margin-left: 19px; padding: 10px 20px; } blockquote > cite { display: block; margin-top: 10px; } q { color: #707070; } q:before { content: open-quote; } q:after { content: close-quote; } abbr { border-bottom: 1px #707070 dotted; cursor: help; } /* AUI avatar component */ .aui-avatar { box-sizing: border-box; display: inline-block; vertical-align: text-bottom; } .aui-avatar-inner { display: table-cell; vertical-align: middle; } .aui-avatar img { border-radius: 3px; display: block; margin: 0 auto; height: 100%; width: 100%; } .aui-avatar-xsmall, .aui-avatar-xsmall .aui-avatar-inner { height: 16px; width: 16px; } .aui-avatar-small, .aui-avatar-small .aui-avatar-inner { height: 24px; width: 24px; } .aui-avatar-medium, .aui-avatar-medium .aui-avatar-inner { height: 32px; width: 32px; } .aui-avatar-large, .aui-avatar-large .aui-avatar-inner { height: 48px; width: 48px; } .aui-avatar-xlarge, .aui-avatar-xlarge .aui-avatar-inner { height: 64px; width: 64px; } .aui-avatar-xxlarge, .aui-avatar-xxlarge .aui-avatar-inner { height: 96px; width: 96px; } .aui-avatar-xxxlarge, .aui-avatar-xxxlarge .aui-avatar-inner { height: 128px; width: 128px; } /* Forces larger images to downscale in IE11. */ .aui-avatar-xsmall .aui-avatar-inner img { max-height: 16px; max-width: 16px; } .aui-avatar-small .aui-avatar-inner img { max-height: 24px; max-width: 24px; } .aui-avatar-medium .aui-avatar-inner img { max-height: 32px; max-width: 32px; } .aui-avatar-large .aui-avatar-inner img { max-height: 48px; max-width: 48px; } .aui-avatar-xlarge .aui-avatar-inner img { max-height: 64px; max-width: 64px; } .aui-avatar-xxlarge .aui-avatar-inner img { max-height: 96px; max-width: 96px; } .aui-avatar-xxxlarge .aui-avatar-inner img { max-height: 128px; max-width: 128px; } .aui-avatar-xxlarge img, .aui-avatar-xxxlarge img { border-radius: 5px; } /* Project avatars - circular and different sizes */ .aui-avatar-project { background-color: #ffffff; box-shadow: 0 0 0 1px #cccccc; position: relative; } .aui-avatar-project, .aui-avatar-project img { border-radius: 100%; } .aui-avatar-project img { height: auto; max-height: 100%; max-width: 100%; width: auto; } /* The below style aims to minimise any "halo" caused by the antialiasing of the image */ .aui-avatar-project:before { border-radius: 100%; border: 1px solid #cccccc; bottom: -1px; content: ""; left: -1px; position: absolute; right: -1px; top: -1px; } /*! AUI Badge */ .aui-badge { background: rgba(0, 0, 0, 0.2); /* RGBA */ border-radius: 2em; /* needs to be at least 1em + border-top + border-bottom + padding-top + padding-bottom to get perfectly rounded */ color: rgba(51, 51, 51, 0.8); display: inline-block; font-size: 11px; font-weight: bold; line-height: 0.99; /* avoiding rounding differences across webkit implementations */ margin: 0; min-height: 1em; min-width: 1em; /* want a capsule style even when single digit */ padding: 3px 5px 2px 5px; /* override in aui-badge-ie.css */ position: relative; text-align: center; text-decoration: none; text-shadow: none; text-transform: uppercase; } /* Light version for contexts we know about */ .aui-header a:active > .aui-badge, .aui-button-primary > .aui-badge, .aui-dropdown2.aui-style-default .active > .aui-badge { background: rgba(255, 255, 255, 0.25); /* RGBA */ color: #ffffff; } .aui-button[disabled] > .aui-badge { background: rgba(0, 0, 0, 0.2); /* RGBA */ color: inherit; } .aui-button-primary[disabled] > .aui-badge { background: rgba(255, 255, 255, 0.25); /* RGBA */ } .aui-button > .aui-badge, .aui-tabs .menu-item .aui-badge { top: -1px; /* slight tweak to position them in specific contexts */ } /* AUI BUTTONS * Note hover/disabled styles set directly as they are not precisely the same as * if we used straight opacity. */ /* Basic Button Style */ .aui-button, a.aui-button, .aui-button:visited { box-sizing: border-box; background: #f5f5f5; border: 1px solid #cccccc; border-radius: 3.01px; color: #333333; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-variant: normal; font-weight: normal; height: 2.14285714em; /* 30px - using ems so the fields increase in line with user specified font-sizes */ line-height: 1.42857143; /* 20px */ margin: 0; padding: 4px 10px; text-decoration: none; vertical-align: baseline; white-space: nowrap; } .aui-button.aui-button-light, a.aui-button.aui-button-light, .aui-button:visited.aui-button-light { background: #ffffff; } .aui-button ~ .aui-button { margin-left: 10px; } /* Ensure underlines not added by link styles */ a.aui-button:hover, a.aui-button:active, a.aui-button:focus { text-decoration: none; } /* Firefox doesn't add OS focus border if there is a button outline, so we add one ourselves */ form.aui .button:focus, form.aui .cancel:focus, .aui-button:focus { outline: 1px dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: 1px; } /* Control button height in Firefox. See http://www.experimentgarden.com/2010/11/firefox-buttontext-height-and-padding.html */ .aui-button::-moz-focus-inner { border: 0; padding: 0; } .aui-button:focus, .aui-button:hover, .aui-button-subtle.aui-button:focus, .aui-button-subtle.aui-button:hover { background: #e9e9e9; border-color: #999999; color: #000000; text-decoration: none; } .aui-button.aui-button-subtle:active, .aui-button.aui-button-subtle.active { border-color: #999999; } .aui-button:active, .aui-button.active, .aui-header .aui-button-split-more.active, .aui-button-subtle.aui-button:active, .aui-button-subtle.aui-button.active { box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.1); background-image: none; background: #f5f5f5; text-decoration: none; } .aui-buttons .aui-button.aui-button-split-main:not(:active) { border-right-color: transparent; } .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary):hover + .aui-button-split-more:before, .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary):active + .aui-button-split-more:before, .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary):focus + .aui-button-split-more:before { visibility: hidden; } .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary) + .aui-button-split-more:hover:before, .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary) + .aui-button-split-more:active:before, .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary) + .aui-button-split-more:focus:before { visibility: hidden; } .aui-buttons .aui-button.aui-button-split-main:not(.aui-button-primary):hover + .aui-button-split-more { border-left: 1px solid #999999; margin-left: -2px; } .aui-buttons .aui-button.aui-button-split-main + .aui-button-split-more { margin-left: -1px; } .aui-buttons .aui-button.aui-button-split-main + .aui-button-split-more:focus, .aui-buttons .aui-button.aui-button-split-main + .aui-button-split-more:hover { margin-left: -2px; } .aui-buttons .aui-button.aui-button-split-main + .aui-button-split-more.aui-dropdown2-trigger:before { content: ''; border-left: 1px solid #cccccc; bottom: 4px; display: block; left: -1px; position: absolute; top: 4px; } .aui-buttons .aui-button.aui-button-split-main + .aui-button-split-more.aui-dropdown2-trigger.aui-button-primary:before { border-color: rgba(0, 0, 0, 0.3); } /* Primary Buttons */ .aui-button.aui-button-primary, .aui-button.aui-button-primary:visited { background: #3572b0; border-color: transparent; color: #ffffff; font-weight: bold; -webkit-font-smoothing: antialiased; /* for chrome on mac */ } .aui-button.aui-button-primary:hover, .aui-button.aui-button-primary:focus { background: #2a67a5; border-color: transparent; color: #ffffff; } .aui-button.aui-button-primary:active { box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.1); background-image: none; background: #3572b0; text-decoration: none; } /* Link style buttons - used for destructive/cancel actions ONLY */ .aui-button.aui-button-link, .aui-button.aui-button-link:visited, .aui-button.aui-button-text, .aui-button.aui-button-text:visited { background: transparent; border-color: transparent; color: #3572b0; padding: 4px 0; text-decoration: none; box-shadow: none; } .aui-button.aui-button-link:focus, .aui-button.aui-button-link:hover, .aui-button.aui-button-link:active, .aui-buttons .aui-button.aui-button-link:focus, .aui-buttons .aui-button.aui-button-link:hover, .aui-buttons .aui-button.aui-button-link:active, .aui-buttons .aui-button.aui-button-link[aria-pressed="true"], .aui-button.aui-button-text:focus, .aui-button.aui-button-text:hover, .aui-button.aui-button-text:active, .aui-buttons .aui-button.aui-button-text:focus, .aui-buttons .aui-button.aui-button-text:hover, .aui-buttons .aui-button.aui-button-text:active, .aui-buttons .aui-button.aui-button-text[aria-pressed="true"] { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; } .aui-button.aui-button-text, .aui-button.aui-button-text:visited { border: none; font-size: inherit; height: inherit; line-height: normal; padding: 0; } /* Subtle/hybrid/entity action/mugger buttons */ .aui-button.aui-button-subtle { background: transparent; border-color: transparent; color: #707070; } .aui-buttons .aui-button.aui-button-subtle { border-radius: 3.01px; } .aui-button.aui-button-subtle .aui-icon { margin-right: 1px; } /* when a button label is present next to an aui-icon (eg sidebar config) */ .aui-button > .aui-icon + .aui-button-label { margin-left: 4px; } /* Compact Buttons */ .aui-button.aui-button-compact { font-size: 12px; height: 2.16666666666667em; /* 26px with 12px font-size */ padding: 2px 8px; line-height: 1.66666666666667; } /* End Compact Buttons */ /* aui-buttons groups buttons together into one button lozenge. */ .aui-buttons { display: inline-block; font-size: 0; } .aui-buttons:after { clear: both; content: ""; display: table; } .aui-buttons .aui-button { border-radius: 0; margin: 0; } .aui-buttons .aui-button:first-child { border-top-left-radius: 3.01px; border-bottom-left-radius: 3.01px; } .aui-buttons .aui-button:last-child { border-top-right-radius: 3.01px; border-bottom-right-radius: 3.01px; } .aui-buttons + .aui-buttons { margin-left: 10px; } /* Grouped buttons go into toolbar style */ .aui-buttons .aui-button:not(.aui-button-primary):focus, .aui-buttons .aui-button:not(.aui-button-primary):hover, .aui-buttons .aui-button:not(.aui-button-primary):active { border-color: #999999; } .aui-buttons .aui-button[disabled], .aui-buttons .aui-button[disabled]:hover, .aui-buttons .aui-button[disabled]:focus, .aui-buttons .aui-button[disabled]:active, .aui-buttons .aui-button[aria-disabled="true"], .aui-buttons .aui-button[aria-disabled="true"]:hover, .aui-buttons .aui-button[aria-disabled="true"]:focus, .aui-buttons .aui-button[aria-disabled="true"]:active { border-color: #dddddd; } /* Grouped Primary Buttons */ .aui-buttons .aui-button ~ .aui-button { border-left-width: 0; padding-left: 11px; } .aui-buttons .aui-button ~ .aui-button:hover, .aui-buttons .aui-button ~ .aui-button:focus, .aui-buttons .aui-button ~ .aui-button:active { border-width: 1px; margin-left: -1px; position: relative; } /* Selected buttons - NOT supported for free-standing primary buttons ARIA usage from http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html */ .aui-button[aria-pressed="true"], .aui-buttons .aui-button[aria-pressed="true"], .aui-buttons .aui-button[aria-pressed="true"].aui-button-primary, .aui-buttons .aui-button[aria-pressed="true"].aui-button-subtle { background: #cccccc; } .aui-button[aria-pressed="true"].aui-button-subtle, .aui-buttons .aui-button[aria-pressed="true"].aui-button-subtle { color: #333333; border-color: #cccccc; } .aui-buttons .aui-button[aria-pressed="true"]:active { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); background: #f5f5f5; } /* Disabled states (keep last to avoid excessive selector weight) ---------------------------------------------------------------------- */ .aui-button[disabled], .aui-button[disabled]:hover, .aui-button[disabled]:focus, .aui-button[disabled]:active, .aui-button[aria-disabled="true"], .aui-button[aria-disabled="true"]:hover, .aui-button[aria-disabled="true"]:focus, .aui-button[aria-disabled="true"]:active, .aui-button[aria-disabled="true"][aria-pressed] { background: #f5f5f5; border-color: #dddddd; box-shadow: none; color: #999999; cursor: default; } /* Subtle buttons have their own disabled state*/ .aui-button.aui-button-subtle[disabled], .aui-button.aui-button-subtle[aria-disabled="true"] { border: 0; background: none; } .aui-button.aui-button-primary[disabled], .aui-button.aui-button-primary[disabled]:hover, .aui-button.aui-button-primary[disabled]:focus, .aui-button.aui-button-primary[disabled]:active, .aui-button.aui-button-primary[aria-disabled="true"], .aui-button.aui-button-primary[aria-disabled="true"]:hover, .aui-button.aui-button-primary[aria-disabled="true"]:focus, .aui-button.aui-button-primary[aria-disabled="true"]:active { background: #9cbad9; border-color: transparent; box-shadow: none; color: #ffffff; } .aui-button.aui-button-link[disabled], .aui-button.aui-button-link[disabled]:hover, .aui-button.aui-button-link[disabled]:focus, .aui-button.aui-button-link[disabled]:active, .aui-button.aui-button-link[aria-disabled="true"], .aui-button.aui-button-link[aria-disabled="true"]:hover, .aui-button.aui-button-link[aria-disabled="true"]:focus, .aui-button.aui-button-link[aria-disabled="true"]:active, .aui-button.aui-button-text[disabled], .aui-button.aui-button-text[disabled]:hover, .aui-button.aui-button-text[disabled]:focus, .aui-button.aui-button-text[disabled]:active, .aui-button.aui-button-text[aria-disabled="true"], .aui-button.aui-button-text[aria-disabled="true"]:hover, .aui-button.aui-button-text[aria-disabled="true"]:focus, .aui-button.aui-button-text[aria-disabled="true"]:active { background: transparent; border-color: transparent; color: #999999; text-decoration: none; } /* Cross-component integration ---------------------------------------------------------------------- */ /* Icons Integration --------------------- */ .aui-button.aui-button-compact .aui-icon { margin-top: -1px; /* icon is 1px off, adjust it so it is centered */ } /* Icon Colours ---------- */ .aui-button.aui-button-primary .aui-icon { color: #ffffff; } .aui-button .aui-icon { color: #707070; } .aui-button[disabled] .aui-icon { color: #cccccc; } .aui-button[disabled].aui-button-primary .aui-icon { color: #ffffff; } /* App Header Buttons and Split Button ---------- */ .aui-header .aui-nav .aui-button, .aui-header .aui-nav .aui-button-primary { margin: 5px 0 0 10px; } .aui-header .aui-nav .aui-button.aui-button-split-main { margin-right: 0; } /* long selector set required to avoid a jump in non-hover focus */ .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button:hover, .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button:focus, .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button:active, .aui-header .aui-nav .aui-button.aui-button-split-more { margin-left: 0; } .aui-header .aui-nav .aui-button-primary, .aui-header .aui-nav .aui-button-primary:link, .aui-header .aui-nav .aui-button-primary:visited { background: #3572b0; box-shadow: none; border: 0; color: #ffffff; line-height: 1.57142857; } .aui-header .aui-nav .aui-button.aui-button-primary:focus, .aui-header .aui-nav .aui-button.aui-button-primary:hover { background: #2a67a5; color: #ffffff; } .aui-header .aui-nav .aui-button.aui-button-primary:active, .aui-header .aui-nav .aui-button.aui-button-primary.active { box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.1); background: #3572b0; background-image: none; } .aui-button[busy], .aui-button.aui-button-primary[busy] { color: rgba(0, 0, 0, 0) !important; } aui-header { display: block; } .aui-header { background: #205081; border-bottom: 1px solid #2e3d54; box-sizing: border-box; color: #ffffff; padding: 0 10px; } .aui-header:after, .aui-header .aui-header-logo a:after { content: ""; display: table; clear: both; } .aui-header .aui-header-logo, .aui-header .aui-nav { margin: 0; padding: 0; float: left; } .aui-header .aui-header-secondary .aui-nav { float: right; } .aui-header .aui-nav > li { float: left; padding: 0; } .aui-header a { color: #ffffff; display: block; line-height: 1; padding: 13px 10px; } .aui-header a:visited, .aui-header a:focus, .aui-header a:hover, .aui-header a:active { text-decoration: none; } .aui-header .aui-header-logo a { box-sizing: border-box; float: left; height: 40px; padding: 0 10px; } .aui-header .aui-header-logo.aui-header-logo-textonly a { font-size: 24px; padding: 5px 10px; } .aui-header .aui-header-logo-textonly .aui-header-logo-device { float: left; padding-top: 4px; text-indent: 0; } .aui-header .aui-header-logo-textonly .aui-header-logo-device + .aui-header-logo-text { padding: 5px 0 5px 10px; } /* for extra visible text, eg. instance names. */ .aui-header .aui-header-logo .aui-header-logo-text { display: block; float: left; font-size: 14px; line-height: 1.4286; margin: 0; padding: 10px 0 10px 10px; } .aui-header .aui-header-logo-device { background-repeat: no-repeat; background-position: 0 50%; background-size: 100%; display: block; float: left; height: 24px; padding: 8px 0; text-indent: -9999px; text-align: left; } /* Custom IMG elements can be set in most products */ .aui-header .aui-header-logo img { border: 0; float: left; max-height: 30px; padding: 5px 0; } /* Positioning icons in the header */ .aui-header .aui-icon { margin: -1px 0; vertical-align: top; } .aui-header a > .aui-avatar { vertical-align: top; } .aui-header a > .aui-avatar-tiny { margin: -1px 0; /* (16px Tiny Avatar height - 14px font size (line-height 1 in the header)) / 2 */ } .aui-header a > .aui-avatar-small { margin: -5px 0; /* (24px Small Avatar height - 14px font size (line-height 1 in the header)) / 2 */ } /** * Buttons in header */ .aui-header a.aui-button { line-height: 1.42857142857143; } .aui-header .aui-button.aui-button-primary { background: #3572b0; border: 0; margin: 5px 10px 0 10px; padding: 4px 10px; /* Make sure the correct padding applies (overrides the above padding: 13px 10px; for .aui-header a if ordering is missed up*/ } .aui-header .aui-button.aui-button-primary.active { padding-bottom: 4px; /* header doesn't need the button/dropdown integration padding change because it has no border */ } .aui-header .aui-button.aui-button-primary:focus, .aui-header .aui-button.aui-button-primary:hover { background: #2a67a5; } .aui-header .aui-button.aui-button-primary:active { background: #3572b0; } /** * Quick search for header */ .aui-header .aui-quicksearch { padding: 0 10px; } .aui-header .aui-quicksearch input { -moz-appearance: textfield; -webkit-appearance: textfield; background: #f5f5f5; border: none; border-radius: 5em; box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.3); box-sizing: border-box; color: #333333; font-family: inherit; font-size: inherit; height: 1.71428571428571em; /* 24px effective - need height in ems so that user-specified font-sizes apply */ line-height: 1.42857142857143; /* 20px effective */ margin: 8px 0; padding: 2px 10px; vertical-align: baseline; width: 170px; } .aui-header .aui-quicksearch input:focus { background-color: #ffffff; outline: none; } .aui-header .aui-quicksearch input::-webkit-input-placeholder { color: #707070; opacity: 1; } .aui-header .aui-quicksearch input::-moz-placeholder { color: #707070; } .aui-header .aui-quicksearch input.aui-placeholder-shown, .aui-header .aui-quicksearch input.placeholder-shown { color: #707070; } /*! AUI Lozenge */ .aui-lozenge { background: #cccccc; border: 1px solid #cccccc; border-radius: 3px; color: #333333; display: inline-block; font-size: 11px; font-weight: bold; line-height: 99%; /* cross-browser compromise to make the line-height match the font-size */ margin: 0; padding: 2px 5px; text-align: center; text-decoration: none; text-transform: uppercase; } .aui-lozenge.aui-lozenge-subtle { background-color: #ffffff; border-color: #cccccc; color: #333333; } .aui-lozenge-success { background-color: #14892c; border-color: #14892c; color: #ffffff; } .aui-lozenge-success.aui-lozenge-subtle { background-color: #ffffff; border-color: #60b070; color: #14892c; } .aui-lozenge-error { background-color: #d04437; border-color: #d04437; color: #ffffff; } .aui-lozenge-error.aui-lozenge-subtle { background-color: #ffffff; border-color: #e8a29b; color: #d04437; } .aui-lozenge-current { background-color: #f6c342; border-color: #f6c342; color: #594300; } .aui-lozenge-current.aui-lozenge-subtle { background-color: #ffffff; border-color: #ffe9a8; color: #594300; } .aui-lozenge-complete { background-color: #4a6785; border-color: #4a6785; color: #ffffff; } .aui-lozenge-complete.aui-lozenge-subtle { background-color: #ffffff; border-color: #a5b3c2; color: #4a6785; } .aui-lozenge-moved { background-color: #815b3a; border-color: #815b3a; color: #ffffff; } .aui-lozenge-moved.aui-lozenge-subtle { background-color: #ffffff; border-color: #c0ad9d; color: #815b3a; } /*! AUI Navigation */ /* Nav defaults - put very little here! -------------------- */ .aui-nav, .aui-nav > li { list-style: none; margin: 0; padding: 0; } /* Horizontal, breadcrumbs and pagination are all horizontal */ .aui-nav-breadcrumbs:after, .aui-nav-pagination:after, .aui-nav-horizontal:after, .aui-navgroup-horizontal .aui-nav:after, .aui-navgroup-horizontal .aui-navgroup-inner:after { clear: both; content: " "; display: table; } .aui-nav-breadcrumbs > li, .aui-nav-pagination > li, .aui-nav-horizontal > li, .aui-navgroup-horizontal .aui-nav > li { float: left; } /* Navigation headings -------------------- */ .aui-nav-heading { color: #707070; font-size: 12px; font-weight: bold; line-height: 1.66666666666667; /* 20px */ text-transform: uppercase; } /* Breadcrumb navigation -------------------- */ .aui-nav-breadcrumbs > li { padding: 0 10px 0 0; } .aui-nav-breadcrumbs > li + li:before { content: "/"; padding-right: 10px; } /* Horizontal Navigation -------------------- */ .aui-navgroup-horizontal .aui-nav > li a, .aui-nav-horizontal > li a { padding-right: 10px; } /* Pagination -------------------- */ .aui-nav-pagination { margin: 10px 0 0 0; } .aui-nav-pagination > li { padding: 0; } /* Need padding on the A elements for big click areas. Set equal left/right to help align the inline dialog on truncation. */ .aui-nav-pagination > li > a { padding: 10px 10px 0 10px; } /* Don't set top/bottom as that throws non-linked items out of whack. */ .aui-nav-pagination > li.aui-nav-selected, .aui-nav-pagination > li.aui-nav-truncation { padding-left: 10px; padding-right: 10px; } .aui-nav-pagination .aui-nav-truncation > a { padding-left: 0; padding-right: 0; } /* Remove whitespace from first and last child */ .aui-nav-pagination > li:first-child > a, .aui-nav-pagination > li.aui-nav-truncation:first-child, .aui-nav-pagination > li.aui-nav-selected:first-child { padding-left: 0; } .aui-nav-pagination > li:last-child > a, .aui-nav-pagination > li.aui-nav-truncation:last-child, .aui-nav-pagination > li.aui-nav-selected:last-child { padding-right: 0; } .aui-nav-pagination a[aria-disabled="true"], .aui-nav-pagination a[aria-disabled="true"]:link, .aui-nav-pagination a[aria-disabled="true"]:visited, .aui-nav-pagination a[aria-disabled="true"]:focus, .aui-nav-pagination a[aria-disabled="true"]:hover, .aui-nav-pagination a[aria-disabled="true"]:active { color: #999999; text-decoration: none; } /* "current" is deprecated in 5.1 */ .aui-nav-pagination > li.aui-nav-current, .aui-nav-pagination > li.aui-nav-selected { color: #333333; font-weight: bold; } /* Vertical Navigation -------------------- */ .aui-navgroup-vertical .aui-nav > li > a, .aui-nav-vertical > li > a { color: #3572b0; display: block; line-height: 1.14285714285714; /* 16px equiv */ padding: 7px 10px; word-wrap: break-word; } .aui-navgroup-vertical .aui-nav > li > a:focus, .aui-navgroup-vertical .aui-nav > li > a:hover, .aui-nav-vertical > li > a:focus, .aui-nav-vertical > li > a:hover { background: #e6e6e6; text-decoration: none; } .aui-navgroup-vertical .aui-nav .aui-nav-selected > a, .aui-nav-vertical .aui-nav .aui-nav-selected > a { color: #333333; font-weight: bold; } .aui-navgroup-vertical .aui-nav, .aui-navgroup-vertical .aui-nav-heading { border-top: 1px solid #cccccc; margin-top: 5px; padding-top: 5px; } .aui-navgroup-vertical .aui-nav-heading { padding: 10px 10px 4px 10px; } .aui-navgroup-vertical .aui-nav:first-child, .aui-navgroup-vertical .aui-navgroup-inner > .aui-nav-heading:first-child, .aui-navgroup-vertical .aui-navgroup-primary > .aui-nav-heading:first-child, .aui-navgroup-vertical .aui-nav-heading + .aui-nav { border-top: 0; margin-top: 0; padding-top: 0; } /* tree indication for nested aui-nav's */ .aui-navgroup-vertical .aui-nav .aui-nav { border-top: none; margin-top: 0; padding: 0 0 0 26px; } .aui-navgroup-vertical .aui-nav .aui-nav > li { position: relative; } .aui-navgroup-vertical .aui-nav .aui-nav > li:before, .aui-navgroup-vertical .aui-nav .aui-nav > li:after { background-color: #cccccc; content: ""; left: -1px; position: absolute; } .aui-navgroup-vertical .aui-nav .aui-nav > li:before { bottom: 0; top: 0; width: 1px; } .aui-navgroup-vertical .aui-nav .aui-nav > li:after { height: 1px; top: 14px; width: 5px; } .aui-navgroup-vertical .aui-nav .aui-nav > li:last-child:before, .aui-navgroup-vertical .aui-nav .aui-nav > li.aui-nav-more:before { bottom: 50%; } /* twixi for nested navigation ------------------------------ */ .aui-navgroup-vertical .aui-nav > li[aria-expanded] { position: relative; } .aui-navgroup-vertical .aui-nav > li[aria-expanded] .aui-nav-heading { padding-left: 0; } .aui-navgroup-vertical .aui-nav > li[aria-expanded] .aui-nav-subtree-toggle { color: #999999; left: 0; position: absolute; padding-left: 0; padding-right: 0; top: 0; width: 15px; } .aui-navgroup-vertical .aui-nav > li[aria-expanded] li { position: relative; } .aui-navgroup-vertical .aui-nav > li[aria-expanded][aria-expanded="false"] > * { display: none; } .aui-navgroup-vertical .aui-nav > li[aria-expanded][aria-expanded="false"] > .aui-nav-subtree-toggle, .aui-navgroup-vertical .aui-nav > li[aria-expanded][aria-expanded="false"] > .aui-nav-item { display: inherit; } /* RHS actions dropdown ------------------------ */ .aui-navgroup-vertical .aui-nav .aui-nav-item-actions { border-radius: 2px; display: block; height: 16px; margin: 0; overflow: hidden; padding: 0; position: absolute; right: 5px; text-indent: -999em; top: 7px; width: 16px; } .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:after { border: 4px solid transparent; border-top-color: #333333; content: ""; height: 0; left: 4px; position: absolute; top: 6px; width: 0; } .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:hover, .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:focus, .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:active, .aui-navgroup-vertical .aui-nav .aui-nav-item-actions.active { background-color: #cccccc; } .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:hover:after, .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:focus:after, .aui-navgroup-vertical .aui-nav .aui-nav-item-actions:active:after, .aui-navgroup-vertical .aui-nav .aui-nav-item-actions.active:after { border-top-color: #333333; } .aui-navgroup-vertical .aui-nav .aui-nav-item-actions ~ .aui-nav-item-label { margin-right: 15px; } /* Horizontal Navgroup -------------------- */ .aui-navgroup-horizontal { background: #f5f5f5; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; margin: 0; padding: 0 10px; } .aui-page-panel-content > .aui-navgroup-horizontal { margin-left: -20px; margin-right: -20px; } .aui-navgroup-horizontal + .aui-page-panel { border-top: 0; margin-top: 0; } .aui-page-panel-content > .aui-navgroup-horizontal:first-child { margin-top: -20px; } /* Nav in a Navbar */ .aui-navgroup-horizontal .aui-nav > li a { color: #3572b0; display: block; margin: 0; padding: 9px 10px; text-decoration: none; } .aui-navgroup-horizontal .aui-nav > li a.active, .aui-navgroup-horizontal .aui-nav > li a:focus, .aui-navgroup-horizontal .aui-nav > li a:hover { background: #e6e6e6; text-decoration: none; } .aui-navgroup-horizontal .aui-nav > .aui-nav-selected a { color: #333333; font-weight: bold; position: relative; } .aui-navgroup-horizontal .aui-nav > .aui-nav-selected a:before, .aui-navgroup-horizontal .aui-nav > .aui-nav-selected a:after { border: 8px solid transparent; border-style: outset outset solid outset; /* fixes FF bug */ border-bottom-color: #cccccc; bottom: 0; content: ""; height: 0; left: 50%; margin-left: -8px; overflow: hidden; position: absolute; width: 0; } .aui-navgroup-horizontal .aui-nav > .aui-nav-selected a:after { background: transparent; border-bottom-color: #ffffff; bottom: -1px; } /* Split horizontal navgroups */ .aui-navgroup-horizontal .aui-nav, .aui-navgroup-horizontal .aui-nav-heading, .aui-navgroup-horizontal .aui-navgroup-primary { float: left; } .aui-navgroup-horizontal .aui-navgroup-secondary { float: right; } /* Horizontal navgroup + Dropdown2 integration. Note: ADG prohibits dropdowns in vertical nav. */ .aui-navgroup-horizontal .aui-dropdown2-trigger .aui-icon-dropdown { display: none; } .aui-navgroup-horizontal .aui-dropdown2-trigger { padding-right: 23px !important; /* 8px (arrow width) + 10px (right padding) + 5px (margin between arrow and logo) */ position: relative; } .aui-navgroup-horizontal .aui-nav > li a.aui-dropdown2-trigger:after { border: 4px solid transparent; content: ""; height: 0; left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */ margin-left: -18px; margin-top: -3px; /* Align top of arrow with top of x height */ opacity: 0.8; position: absolute; top: 50%; width: 0; } .aui-navgroup-horizontal .aui-nav > li a.aui-dropdown2-trigger:after { border-top-color: #333333; } .aui-navgroup-horizontal .aui-nav > li a.aui-dropdown2-trigger:hover:after, .aui-navgroup-horizontal .aui-nav > li a.aui-dropdown2-trigger.active:after { opacity: 1; } /* Breadcrumbs in navbar */ .aui-navgroup-horizontal .aui-nav-breadcrumbs > li, .aui-navgroup-horizontal .aui-nav-breadcrumbs > li:before { padding: 0; } .aui-navgroup-horizontal .aui-nav-breadcrumbs > li a { display: inline-block; } /* Bulletproofing - headings shouldn't be here but will at least not look heinously broken. */ .aui-navgroup-horizontal .aui-nav-heading { padding: 10px 10px 0 10px; /* 0 bottom required to unfuck IE9 */ } .aui-nav-actions-list { font-size: 0; list-style: none; margin: 10px 0 0 0; padding: 0; } .aui-nav-actions-list:first-child { margin-top: 0; } .aui-nav-actions-list > li { display: inline-block; font-size: 14px; margin-bottom: 5px; margin-right: 10px; } /** * PAGE LAYOUT */ .aui-header, #footer { clear: both; float: left; width: 100%; } #content { box-sizing: border-box; clear: both; position: relative; } #content:before { content: ""; clear: both; display: table; } #footer .footer-body a { color: #707070; } #footer .footer-body > ul, #footer .footer-body > p { margin: 10px 0 0 0; } #footer .footer-body > ul:first-child, #footer .footer-body > p:first-child { margin: 0; } #footer .footer-body > ul { display: block; font-size: 0; list-style: none; padding: 0; } #footer .footer-body > ul > li { display: inline-block; font-size: 12px; line-height: 1.66666666666667; padding: 0; white-space: nowrap; } #footer .footer-body > ul > li + li { margin-left: 10px; } #footer .footer-body > ul > li:after { content: "\b7"; /* mid dot */ margin-left: 10px; speak: none; } #footer .footer-body > ul > li:last-child:after { display: none; } /** * GROUP/ITEM */ .aui-group { display: table; box-sizing: border-box; border-spacing: 0; table-layout: fixed; width: 100%; } .aui-group > .aui-item { box-sizing: border-box; display: table-cell; margin: 0; vertical-align: top; } .aui-group > .aui-item + .aui-item { padding-left: 20px; } /* defensive header allowance */ .aui-layout .aui-group > header { display: table-caption; } /* .aui-group-split: two items; alignment is left, then right (splits the layout). */ .aui-group.aui-group-split > .aui-item { text-align: right; } .aui-group.aui-group-split > .aui-item:first-child { text-align: left; } /* .aui-group-trio: three items; alignment is left, center, right */ .aui-group.aui-group-trio > .aui-item { text-align: left; } .aui-group.aui-group-trio > .aui-item + .aui-item { text-align: center; } .aui-group.aui-group-trio > .aui-item + .aui-item + .aui-item { text-align: right; } /** * DEFAULT THEME SPACING */ #content { margin: 0; padding: 0; } /** * PAGE DESIGN */ body { background: #f5f5f5; color: #333333; } a { color: #3572b0; text-decoration: none; } a:focus, a:hover, a:active { text-decoration: underline; } #footer .footer-body { color: #707070; font-size: 12px; line-height: 1.66666666666667; margin: 20px 0; padding: 0 10px 21px 10px; min-height: 44px; /* margin + height of image, means footer is just as high if no footer link present */ text-align: center; } /** * CONTENT PANEL */ #content > .aui-panel { background: #ffffff; margin: 20px 0 0 0; padding: 20px; border-color: #cccccc; border-style: solid; border-width: 1px 0; } #content > .aui-page-header { padding: 20px; } #content > .aui-page-header + .aui-panel { margin-top: 0; } #content > .aui-page-header:first-child { margin-top: 0; } .aui-panel + .aui-panel { margin-top: 20px; } /*! AUI Page Panel */ .aui-page-panel { background: #ffffff; border: 1px solid #cccccc; border-left-width: 0; border-right-width: 0; box-sizing: border-box; clear: both; display: block; margin: 20px 0 0 0; padding: 0; position: relative; width: 100%; } .aui-page-panel-inner { border-spacing: 0; display: table; table-layout: fixed; width: 100%; } .aui-page-panel-nav, .aui-page-panel-content, .aui-page-panel-item, .aui-page-panel-sidebar { box-sizing: border-box; display: table-cell; padding: 20px; vertical-align: top; } .aui-page-panel-nav { border-right: 1px solid #cccccc; width: 240px; } .aui-page-panel-sidebar { width: 35%; } .aui-page-panel-item { padding: 0; } .aui-page-panel-nav ~ .aui-page-panel-sidebar { width: 30%; } /* Page Panel Interops */ .aui-page-header + .aui-page-panel, .aui-navbar + .aui-page-panel { margin-top: 0; } .aui-navbar + .aui-page-panel { border-top: none; } .aui-page-panel-nav > .aui-nav-vertical { margin-left: -10px; margin-right: -10px; } /** * Page variations */ .aui-page-focused .aui-page-header, .aui-page-focused .aui-page-panel, .aui-page-focused #footer .footer-body, .aui-page-notification .aui-page-header, .aui-page-notification .aui-page-panel, .aui-page-notification #footer .footer-body, .aui-page-fixed .aui-header-inner, .aui-page-fixed .aui-page-header-inner, .aui-page-fixed .aui-navgroup-horizontal .aui-navgroup-inner, .aui-page-fixed .aui-page-panel-inner, .aui-page-fixed #footer .footer-body, .aui-page-hybrid .aui-page-header, .aui-page-hybrid .aui-navgroup-horizontal .aui-navgroup-inner, .aui-page-hybrid .aui-page-panel-inner, .aui-page-hybrid #footer .footer-body { margin-left: auto; margin-right: auto; width: 980px; } /* extra width so left edge of hoverable content aligns with left edge of content while inactive. On hover, the hover affordance does extend outside the alignment but this looks better than the other way around. */ .aui-page-fixed .aui-header-inner, .aui-page-fixed .aui-navgroup-horizontal .aui-navgroup-inner, .aui-page-hybrid .aui-navgroup-horizontal .aui-navgroup-inner { width: 1000px; } .aui-page-focused-small .aui-page-header, .aui-page-size-small .aui-page-header, .aui-page-focused-small .aui-page-panel, .aui-page-size-small .aui-page-panel, .aui-page-focused-small #footer .footer-body, .aui-page-size-small #footer .footer-body { width: 400px; } .aui-page-focused-medium .aui-page-header, .aui-page-size-medium .aui-page-header, .aui-page-focused-medium .aui-page-panel, .aui-page-size-medium .aui-page-panel, .aui-page-focused-medium #footer .footer-body, .aui-page-size-medium #footer .footer-body { width: 600px; } .aui-page-focused-large .aui-page-header, .aui-page-size-large .aui-page-header, .aui-page-focused-large .aui-page-panel, .aui-page-size-large .aui-page-panel, .aui-page-focused-large #footer .footer-body, .aui-page-size-large #footer .footer-body { width: 800px; } .aui-page-focused-xlarge .aui-page-header, .aui-page-size-xlarge .aui-page-header, .aui-page-focused-xlarge .aui-page-panel, .aui-page-size-xlarge .aui-page-panel, .aui-page-focused-xlarge #footer .footer-body, .aui-page-size-xlarge #footer .footer-body { width: 980px; } .aui-page-focused .aui-page-panel, .aui-page-notification .aui-page-panel { border-radius: 5px; border-width: 1px; } .aui-page-fixed .aui-page-panel-inner, .aui-page-fixed #content > .aui-page-header { padding-left: 0; padding-right: 0; } .aui-page-fixed .aui-page-panel-nav:first-child, .aui-page-fixed .aui-page-panel-content:first-child, .aui-page-fixed .aui-page-panel-item:first-child, .aui-page-fixed .aui-page-panel-sidebar:first-child, .aui-page-hybrid .aui-page-panel-nav:first-child, .aui-page-hybrid .aui-page-panel-content:first-child, .aui-page-hybrid .aui-page-panel-item:first-child, .aui-page-hybrid .aui-page-panel-sidebar:first-child { padding-left: 0; } .aui-page-fixed .aui-page-panel-nav:last-child, .aui-page-fixed .aui-page-panel-content:last-child, .aui-page-fixed .aui-page-panel-item:last-child, .aui-page-fixed .aui-page-panel-sidebar:last-child, .aui-page-hybrid .aui-page-panel-nav:last-child, .aui-page-hybrid .aui-page-panel-content:last-child, .aui-page-hybrid .aui-page-panel-item:last-child, .aui-page-hybrid .aui-page-panel-sidebar:last-child { padding-right: 0; } /* reset to 100% inside page panel */ .aui-page-panel .aui-page-header { width: auto; } .aui-page-panel .aui-page-header-inner { width: 100%; } /** * TABS AS FIRST CHILD IN CONTENT * Explicitly sets bg to white, changes horizontal hovers to work on grey. * Remember these extend the standard component styles. */ #content > .aui-tabs { margin: 20px; background: transparent; } #content > .aui-tabs > .tabs-pane { padding: 20px; } #content > .aui-tabs.horizontal-tabs > .tabs-pane { border: 1px solid #cccccc; border-radius: 3px; background: #ffffff; } #content > .aui-tabs.horizontal-tabs > .tabs-menu { display: table; /* stops a gap appearing */ } /** * AUI Forms inside of a focused page */ .aui-page-focused .aui-page-panel-content > h2:first-child, .aui-page-notification .aui-page-panel-content > h1:first-child { border-bottom: 1px solid #cccccc; margin-bottom: 20px; padding-bottom: 20px; } .aui-page-notification .aui-page-panel { margin-top: 50px; } .aui-page-notification .aui-page-panel-content { color: #707070; padding: 40px; text-align: center; } .aui-page-notification .aui-page-panel-content .aui-page-notification-description { font-size: 20px; } .aui-page-notification .aui-page-panel-content form.aui .text { margin-right: 10px; } .aui-page-notification-details { margin: 0 auto; max-width: 90%; width: 980px; } .aui-page-notification-details-header { color: #707070; margin: 20px auto 0; position: relative; text-align: center; } .aui-page-notification-details-header-expander::before { border-top: 1px solid #cccccc; content: ''; display: block; left: 0; position: absolute; right: 0; top: 50%; } .aui-page-notification-details-header-expander .aui-expander-trigger { background-color: #f5f5f5; display: inline-block; padding: 10px; position: relative; } .aui-page-focused .aui-page-panel-content > form.aui .buttons-container { border-top: 1px solid #cccccc; margin-top: 20px; padding-top: 20px; } @media screen and (max-width: 767px) { html.aui-responsive .aui-group > .aui-item { display: block; width: auto; } html.aui-responsive .aui-group > .aui-item + .aui-item { padding-left: 0; padding-top: 10px; } html.aui-responsive .aui-group.aui-group-split > .aui-item, html.aui-responsive .aui-group.aui-group-trio > .aui-item, html.aui-responsive .aui-group.aui-group-split > .aui-item + .aui-item, html.aui-responsive .aui-group.aui-group-trio > .aui-item + .aui-item, html.aui-responsive .aui-group.aui-group-split > .aui-item + .aui-item + .aui-item, html.aui-responsive .aui-group.aui-group-trio > .aui-item + .aui-item + .aui-item { text-align: left; } html.aui-responsive .aui-page-fixed #content > .aui-page-header, html.aui-responsive .aui-page-hybrid #content > .aui-page-header, html.aui-responsive .aui-page-fixed .aui-page-panel-inner, html.aui-responsive .aui-page-hybrid .aui-page-panel-inner, html.aui-responsive .aui-page-fixed .aui-header-inner, html.aui-responsive .aui-page-hybrid .aui-header-inner, html.aui-responsive .aui-page-fixed .aui-navgroup-horizontal .aui-navgroup-inner, html.aui-responsive .aui-page-hybrid .aui-navgroup-horizontal .aui-navgroup-inner, html.aui-responsive .aui-page-fixed #footer .footer-body, html.aui-responsive .aui-page-hybrid #footer .footer-body { box-sizing: border-box; width: 100%; } html.aui-responsive .aui-page-header-inner { display: block; width: 100%; } html.aui-responsive .aui-page-header-actions { display: block; width: auto; text-align: left; margin-top: 20px; padding-left: 0; padding-right: 20px; } } @media screen and (max-width: 800px) { html.aui-responsive .aui-page-hybrid .aui-page-header, html.aui-responsive .aui-page-hybrid .aui-page-panel-inner, html.aui-responsive .aui-page-hybrid .aui-page-fixed .aui-header-inner, html.aui-responsive .aui-page-hybrid .aui-navgroup-horizontal .aui-navgroup-inner { box-sizing: border-box; width: 100%; } } @media screen and (max-width: 1023px) { html.aui-responsive .aui-page-fixed #content > .aui-page-header, html.aui-responsive .aui-page-hybrid #content > .aui-page-header, html.aui-responsive .aui-page-fixed .aui-page-panel-inner, html.aui-responsive .aui-page-hybrid .aui-page-panel-inner { padding-left: 20px; padding-right: 20px; } html.aui-responsive .aui-page-panel-content, html.aui-responsive .aui-page-panel-sidebar { display: block; padding-left: 0; padding-right: 0; width: auto; } html.aui-responsive .aui-page-fixed .aui-header-inner, html.aui-responsive .aui-page-fixed .aui-page-header-inner, html.aui-responsive .aui-page-fixed .aui-page-panel-inner, html.aui-responsive .aui-page-fixed #footer .footer-body { box-sizing: border-box; width: 100%; } } html.aui-responsive #footer .footer-body > ul > li { white-space: normal; } @media screen and (max-width: 400px) { html.aui-responsive .aui-page-focused-small .aui-page-header, html.aui-responsive .aui-page-focused-small .aui-page-panel { box-sizing: border-box; width: 100%; } html.aui-responsive .aui-page-focused-small .aui-page-panel { margin-top: 0; } html.aui-responsive .aui-page-focused-small .aui-page-panel { border-radius: 0; border-left: 0; border-right: 0; } } @media screen and (max-width: 600px) { html.aui-responsive .aui-page-focused-medium .aui-page-header, html.aui-responsive .aui-page-focused-medium .aui-page-panel { box-sizing: border-box; width: 100%; } html.aui-responsive .aui-page-focused-medium .aui-page-panel { margin-top: 0; } html.aui-responsive .aui-page-focused-medium .aui-page-panel { border-radius: 0; border-left: 0; border-right: 0; } } @media screen and (max-width: 800px) { html.aui-responsive .aui-page-focused-large .aui-page-header, html.aui-responsive .aui-page-focused-large .aui-page-panel { box-sizing: border-box; width: 100%; } html.aui-responsive .aui-page-focused-large .aui-page-panel { margin-top: 0; } html.aui-responsive .aui-page-focused-large .aui-page-panel { border-radius: 0; border-left: 0; border-right: 0; } } @media screen and (max-width: 980px) { html.aui-responsive .aui-page-focused-xlarge .aui-page-header, html.aui-responsive .aui-page-focused-xlarge .aui-page-panel { box-sizing: border-box; width: 100%; } html.aui-responsive .aui-page-focused-xlarge .aui-page-panel { margin-top: 0; } html.aui-responsive .aui-page-focused-xlarge .aui-page-panel { border-radius: 0; border-left: 0; border-right: 0; } } /** * AUI Page Header */ .aui-page-header-inner { border-spacing: 0; box-sizing: border-box; display: table; table-layout: auto; width: 100%; } .aui-page-header-image, .aui-page-header-main, .aui-page-header-actions { box-sizing: border-box; display: table-cell; margin: 0; padding: 0; text-align: left; vertical-align: top; } /* collapse the cell to fit its content */ .aui-page-header-image { white-space: nowrap; width: 1px; } .aui-page-header-main { vertical-align: middle; } .aui-page-header-image + .aui-page-header-main { padding-left: 10px; } .aui-page-header-actions { padding-left: 20px; text-align: right; vertical-align: middle; } .aui-page-header-main > h1, .aui-page-header-main > h2, .aui-page-header-main > h3, .aui-page-header-main > h4, .aui-page-header-main > h5, .aui-page-header-main > h6 { margin: 0; } .aui-page-header-actions > .aui-buttons { /* spaces out button groups when they wrap to 2 lines */ margin: 5px 0; vertical-align: top; white-space: nowrap; } /* Avatar overrides */ .aui-page-header-image .aui-avatar { vertical-align: top; } /*! AUI Toolbar2 */ .aui-toolbar2 { box-sizing: border-box; margin: 0; padding: 0; } .aui-toolbar2 .aui-button { margin-top: 10px; } .aui-toolbar2:after, .aui-toolbar2-group:after { clear: both; content: ""; display: table; } .aui-toolbar2-group { margin: 0; padding: 0; } .aui-toolbar2-primary { float: left; } .aui-toolbar2-secondary { float: right; } .aui-toolbar2 .aui-buttons { float: left; padding: 0; white-space: nowrap; } .aui-toolbar2 .aui-button-link { padding: 4px 0; /* TODO: determine if this should be in buttons. 5px creates extra space at the bottom of the toolbar. */ } .aui-toolbar2-primary > .aui-buttons, .aui-toolbar2-secondary > .aui-buttons { margin: 0 10px 0 0; } .aui-toolbar2-secondary > .aui-buttons:last-child { margin-right: 0; } /*! Atlassian UI and the Atlassian Design Guidelines are created by Atlassian. See https://developer.atlassian.com/display/AUI/ and https://developer.atlassian.com/design/ for license details. */ .clear { clear: both; } .hidden, form.aui .hidden, form.aui .field-group.hidden, form.aui fieldset.hidden { display: none; } .assistive, form.aui legend.assistive { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* light shadow for use on dropdowns, inline dialogs */ .aui-box-shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13); } /* dialog no longer gets shadow - "blanket is the shadow" */ .aui-dialog.aui-box-shadow { box-shadow: none; } /* Styles for AJS.dropDown */ .aui-dd-parent { position: relative; } /*Default Styled Trigger*/ .aui-dd-parent span a.aui-dd-trigger, .aui-dd-parent a.aui-dd-trigger { background: transparent url('data:image/gif;base64,R0lGODlhQQAaAJEDAP///zc3N21tbf///yH5BAEAAAMALAAAAABBABoAAALznA+ny+0PI5hs2psMxmjb5VEKh0BJeA3o13lNNprqetJxVWo5/M6rj7qBNLDiiZhS+SoUHi6opLGApSTy+Ki5lLNclyfSkTjOYZmqS3PPVRtb3Mvi5FKuAzt8We29+jsap1f2c7XRsgV1F7HI2Ngo4Bgp6ShQyVCJmQlpoKl50Jm5AGqp4PkJATkaqopZOtqwWYo6wGpZG0sLe8q5i3tJWwvMKvsLvGu82cnbKmo7q7p8GxsaTcrZ6isqrJxrzHvdDX5q6pkta04dPv3tkBpsPq77kA1fDV2fi96eHq572/9L3z560K69MggKoal2kxo6HFAAADs=') no-repeat -13px 0; border: none; color: #000; display: block; height: 13px; padding: 0; text-indent: -9999px; width: 13px; } .aui-dd-parent a.aui-dd-trigger.active, .aui-dd-parent a.aui-dd-trigger:hover, .aui-dd-parent a.aui-dd-trigger:active, .aui-dd-parent a.aui-dd-trigger:focus { background-position: -26px 0; border: none; color: #000; } .aui-dd-parent span a.aui-dd-trigger { position: absolute; right: 5px; top: 8px; } /*UNSTYLED TRIGGER*/ .aui-dd-parent span a.aui-dd-trigger.unstyled, .aui-dd-parent a.aui-dd-trigger.unstyled { background: none; border: none; color: inherit; display: block; height: auto; text-indent: 0; width: auto; } .aui-dd-parent a.aui-dd-trigger-unstyled.active, .aui-dd-parent a.aui-dd-trigger-unstyled:hover, .aui-dd-parent a.aui-dd-trigger-unstyled:active, .aui-dd-parent a.aui-dd-trigger-unstyled:focus { background: none; border: none; color: inherit; } .aui-dd-parent span a.aui-dd-trigger-unstyled { position: absolute; right: auto; top: auto; } .aui-dropdown { list-style-type: none; } .aui-dd-parent .aui-dropdown, .aui-dropdown, .aui-dd-parent .aui-shadow-parent { background: #fff; border: 1px solid #ccc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); color: #000; margin-top: -1px; padding: 4px 0 4px 0; position: absolute; z-index: 2003; } .aui-dd-parent .aui-dropdown-left { left: 0px; } .aui-dd-parent .aui-dropdown-right { right: 0px; } .aui-dd-parent .aui-shadow { right: 5px; } .aui-dd-parent .aui-dropdown li.dropdown-item, .aui-dropdown li.dropdown-item { background: #fff; color: #000; display: block; float: none; margin: 0; position: static; } .aui-dd-parent .aui-dropdown a.item-link, .aui-dropdown a.item-link { background: #fff; color: #333; display: inline-block; float: none; height: auto; padding: 4px 14px 3px 12px; position: static; text-decoration: none; text-indent: 0; white-space: nowrap; width: auto; } .aui-dd-parent .aui-dropdown a.item-link:link, .aui-dd-parent .aui-dropdown a.item-link:visited, .aui-dropdown a.item-link:link, .aui-dropdown a.item-link:visited { background: #fff; color: #333; } .aui-dd-parent .aui-dropdown li.dropdown-item.active a.item-link, .aui-dd-parent .aui-dropdown a.item-link:hover, .aui-dd-parent .aui-dropdown a.item-link:active, .aui-dd-parent .aui-dropdown a.item-link:focus, .aui-dropdown a.item-link:hover, .aui-dropdown a.item-link:active, .aui-dropdown a.item-link:focus { background: #3572b0; color: #FFF; } .aui-dd-parent .aui-dropdown li.dropdown-item a.item-link span.icon { display: inline-block; } div.shim { position: absolute; } .aui-dialog-shadow-parent { position: fixed; overflow: hidden; left: 50%; top: 50%; } .aui-popup { background-color: #fff; left: 50%; position: fixed; top: 50%; z-index: 3000; } .aui-dialog { background: #f5f5f5; border: 1px solid #cccccc; border-radius: 5px; overflow: hidden; } .aui-dialog .dialog-blanket { position: absolute; top: 0; left: 0; opacity: 0.2; background: #000; } /* dialog header styles */ .aui-dialog .dialog-title { border-bottom: 1px solid #cccccc; box-sizing: border-box; height: 56px; /* NOTE: This value is hard-coded in dialog.js as HEADER_HEIGHT */ margin: 0; overflow: hidden; padding: 15px 20px; position: relative; text-overflow: ellipsis; white-space: nowrap; } .aui-dialog h2.dialog-title { color: #333333; font-weight: normal; font-size: 20px; line-height: 1.5; } /* dialog navigation styles */ .aui-dialog .dialog-page-menu { background: #fff; border-right: 1px solid #cccccc; box-sizing: border-box; float: left; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 10px 10px 20px 10px; width: 25%; } .aui-dialog .dialog-page-menu li.page-menu-item { margin: 0; padding: 0; } .aui-dialog .dialog-page-menu li.page-menu-item button.item-button { background: none; border: 0; color: #3572b0; cursor: pointer; font-family: inherit; font-size: inherit; /* = 14px */ line-height: 1.1428; /* 16px equiv */ padding: 7px 10px; margin: 0; text-align: left; text-decoration: none; width: 100%; } .aui-dialog .dialog-page-menu li.page-menu-item button.item-button:hover, .aui-dialog .dialog-page-menu li.page-menu-item button.item-button:focus { background-color: #e6e6e6; } .aui-dialog .dialog-page-menu li.page-menu-item.selected button.item-button { color: #333333; font-weight: bold; } .aui-dialog .dialog-page-menu li.page-menu-item button.item-button:active, .aui-dialog .dialog-page-menu li.page-menu-item.selected button.item-button:active { background-color: #3572b0; color: #fff; } /* dialog body content styles */ .aui-dialog .dialog-page-body { background: #fff; } .aui-dialog .dialog-panel-body { box-sizing: border-box; overflow: auto; padding: 20px; } .aui-dialog .dialog-panel-body > *:first-child { margin-top: 0; } /* dialog button panel styles */ .aui-dialog .dialog-button-panel { border-top: 1px solid #cccccc; box-sizing: border-box; clear: both; height: 51px; /* NOTE: This value is hard-coded in dialog.js as BUTTONS_HEIGHT */ overflow: hidden; padding: 10px; text-align: right; width: 100%; } .aui-dialog .dialog-button-panel button.button-panel-button { box-sizing: border-box; background: #ffffff; border: 1px solid #cccccc; border-radius: 3.01px; color: #333333; cursor: pointer; display: inline-block; font-size: 14px; font-family: Arial, sans-serif; font-variant: normal; line-height: 20px; padding: 4px 10px; text-decoration: none; text-shadow: 0 1px 0 white; vertical-align: baseline; } .aui-dialog .dialog-button-panel button.button-panel-button::-moz-focus-inner { border: 0; padding: 0; } .aui-dialog .dialog-button-panel button.button-panel-button:focus, .aui-dialog .dialog-button-panel button.button-panel-button:hover { background: #e9e9e9; border-color: #999999; color: #000; text-decoration: none; } .aui-dialog .dialog-button-panel button.button-panel-button:active { box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.1); background: #f5f5f5; text-shadow: none; text-decoration: none; } .aui-dialog .dialog-button-panel a.button-panel-link { background: transparent; border-color: transparent; color: #3572b0; display: inline-block; padding: 5px 0; text-decoration: none; text-shadow: none; } .aui-dialog .dialog-button-panel a.button-panel-link:focus, .aui-dialog .dialog-button-panel a.button-panel-link:hover, .aui-dialog .dialog-button-panel a.button-panel-link:active { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; } .aui-dialog .dialog-button-panel button.button-panel-button, .aui-dialog .dialog-button-panel a.button-panel-link { margin: 0 10px 0 0; } .aui-dialog .dialog-button-panel button.button-panel-button.left, .aui-dialog .dialog-button-panel a.button-panel-link.left { float: left; margin: 0 0 0 10px; } .aui-layer { position: fixed; } .aui-layer[aria-hidden="true"] { display: none; } .aui-blanket { opacity: 0; transition: opacity 0.2s, visibility 0.2s; transition-delay: 0.1s; visibility: hidden; background: #000; height: 100%; left: 0px; position: fixed; top: 0; width: 100%; z-index: 2500; } .aui-blanket[aria-hidden="false"] { opacity: 0.5; transition: opacity 0.2s; transition-delay: 0.1s; visibility: visible; } /* NOTE: This value is hard-coded in dialog.js as BUTTONS_HEIGHT */ .aui-dialog2 { box-sizing: border-box; position: relative; /* Assumes an explicit width is set for centering */ left: 0; right: 0; margin-left: auto; margin-right: auto; visibility: hidden; height: calc(100% - 320px); } .aui-dialog2.aui-layer { position: fixed; overflow: visible; top: 169px; } .aui-dialog2-small { width: 400px; min-height: 131px; } .aui-dialog2-medium { width: 600px; min-height: 231px; } .aui-dialog2-large { width: 800px; min-height: 431px; } .aui-dialog2-xlarge { width: 980px; min-height: 431px; } .aui-dialog2-small .aui-dialog2-content { min-height: 80px; } .aui-dialog2-medium .aui-dialog2-content { min-height: 180px; } .aui-dialog2-xlarge .aui-dialog2-content, .aui-dialog2-large .aui-dialog2-content { min-height: 380px; } @media all and (max-height: 700px) { /* 500 + 100 each side */ .aui-dialog2-large .aui-dialog2-content, .aui-dialog2-xlarge .aui-dialog2-content { min-height: 180px; } .aui-dialog2-large, .aui-dialog2-xlarge { min-height: 131px; height: calc(100% - 220px); } } @media all and (max-height: 500px) { /* 300 + 100 each side */ .aui-dialog2-medium .aui-dialog2-content, .aui-dialog2-large .aui-dialog2-content, .aui-dialog2-xlarge .aui-dialog2-content { min-height: 80px; } .aui-dialog2-medium { min-height: 131px; height: calc(100% - 220px); } } @media all and (max-width: 1000px) { /* 980 + 10 each side */ .aui-dialog2-xlarge { width: 100%; height: calc(100% - 120px); } .aui-dialog2-xlarge.aui-layer { top: 69px; } .aui-dialog2-xlarge .aui-dialog2-content { height: 100%; } } @media all and (max-width: 820px) { /* 800 + 10 each side */ .aui-dialog2-large { width: 100%; height: calc(100% - 120px); } .aui-dialog2-large.aui-layer { top: 69px; } .aui-dialog2-large .aui-dialog2-content { height: 100%; } } @media all and (max-width: 620px) { /* 600 + 10 each side */ .aui-dialog2-medium { width: 100%; height: calc(100% - 120px); } .aui-dialog2-medium.aui-layer { top: 69px; } .aui-dialog2-medium .aui-dialog2-content { height: 100%; } } @media all and (max-width: 420px) { /* 400 + 10 each side */ .aui-dialog2-small { width: 100%; height: calc(100% - 120px); } .aui-dialog2-small.aui-layer { top: 69px; } .aui-dialog2-small .aui-dialog2-content { height: 100%; } } .aui-dialog2-header, .aui-dialog2-footer { background: #f5f5f5; visibility: visible; } .aui-dialog2.aui-layer[aria-hidden="true"] .aui-dialog2-header, .aui-dialog2.aui-layer[aria-hidden="true"] .aui-dialog2-footer, .aui-dialog2.aui-layer[aria-hidden="true"] .aui-dialog2-content { opacity: 0; transition: opacity 0.2s, visibility 0.2s; transition-delay: 0s; visibility: hidden; } .aui-dialog2.aui-layer[aria-hidden="false"] .aui-dialog2-header, .aui-dialog2.aui-layer[aria-hidden="false"] .aui-dialog2-footer, .aui-dialog2.aui-layer[aria-hidden="false"] .aui-dialog2-content { opacity: 1; transition: opacity 0.2s; transition-delay: 0s; visibility: visible; } /* * This is not part of the all aui-dialog2-content instances so that connect * dialogs can be full-height inside an iframe */ .aui-dialog2 .aui-dialog2-content { max-height: 100%; } .aui-dialog2-content { background-color: #ffffff; box-sizing: border-box; overflow: auto; padding: 20px; visibility: visible; } .aui-dialog2-content:last-child { border-radius: 0 0 5px 5px; } .aui-dialog2 .aui-dialog2-header { margin-top: -69px; } .aui-dialog2-header { border-bottom: 1px solid #cccccc; border-radius: 5px 5px 0 0; box-sizing: border-box; color: #333333; font-weight: normal; height: 69px; padding: 0 20px; width: 100%; display: table; } .aui-dialog2-header-actions { width: 100%; } .aui-dialog2-header-main, .aui-dialog2-header-actions, .aui-dialog2-header-secondary, .aui-dialog2-header-close { display: table-cell; vertical-align: middle; } .aui-dialog2[data-aui-modal="true"] .aui-dialog2-header-close { display: none; } .aui-dialog2-footer-hint { color: #707070; line-height: 31px; /* aui-dialog2-footer line-height - aui-dialog2-footer padding-bottom */ } .aui-dialog2-footer-hint, .aui-dialog2-header-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; } .aui-dialog2-header-main { max-width: 400px; } .aui-dialog2-header-secondary, .aui-dialog2-header-close, .aui-dialog2-footer-actions { text-align: right; } .aui-dialog2-footer-actions { float: right; } .aui-dialog2-header-close { width: 20px; height: 20px; padding-left: 5px; text-align: right; vertical-align: middle; line-height: 100%; cursor: pointer; color: #707070; } .aui-dialog2-warning .aui-dialog2-header { background-color: #d04437; border-bottom-color: #d04437; color: #ffffff; } .aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-main, .aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-actions a, .aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-secondary a, .aui-dialog2-warning .aui-dialog2-header .aui-dialog2-header-close { color: inherit; } .aui-dialog2-header-close .aui-icon { vertical-align: middle; } .aui-dialog2-footer { border-top: 1px solid #cccccc; box-sizing: border-box; height: 51px; overflow: hidden; padding: 10px 20px; width: 100%; border-radius: 0 0 5px 5px; } .aui-dialog2-footer:empty { height: 5px; padding: 0; } /** * Dropdown 2 */ /* Functional styles - these are always applied ---------------------------------------------------------------------- */ .aui-dropdown2 { box-sizing: border-box; max-width: 300px; min-width: 160px; position: absolute; } .aui-dropdown2[aria-hidden="true"] { top: -999em; left: -999em; } .aui-dropdown2 [role="menuitem"], .aui-dropdown2 [role="menuitemcheckbox"], .aui-dropdown2 [role="menuitemradio"], .aui-dropdown2 [role="radio"], .aui-dropdown2 [role="checkbox"], .aui-dropdown2 a { -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; display: block; } .aui-dropdown2 .aui-list-truncate [role="menuitem"], .aui-dropdown2 .aui-list-truncate [role="menuitemcheckbox"], .aui-dropdown2 .aui-list-truncate [role="menuitemradio"], .aui-dropdown2 .aui-list-truncate [role="radio"], .aui-dropdown2 .aui-list-truncate [role="checkbox"], .aui-dropdown2 .aui-list-truncate a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Default style for Dropdown2, invoked with aui-style-default ---------------------------------------------------------------------- */ .aui-dropdown2.aui-style-default { background-color: #ffffff; border: 1px solid #cccccc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); } .aui-dropdown2.aui-style-default.aui-layer { -webkit-height: auto; height: auto; } .aui-dropdown2.aui-style-default ul { list-style: none; margin: 2px 0; padding-left: 0; } .aui-style-default .aui-dropdown2-section + .aui-dropdown2-section { border-top: 1px solid #cccccc; } .aui-dropdown2.aui-style-default > strong, .aui-dropdown2.aui-style-default .aui-dropdown2-section > strong, .aui-dropdown2-heading { color: #707070; display: block; font-size: 12px; font-weight: bold; padding: 7px 10px 5px; text-transform: uppercase; } .aui-dropdown2.aui-style-default strong + ul { margin-top: 0; } .aui-dropdown2.aui-style-default [role="menuitem"], .aui-dropdown2.aui-style-default [role="menuitemcheckbox"], .aui-dropdown2.aui-style-default [role="menuitemradio"], .aui-dropdown2.aui-style-default [role="radio"], .aui-dropdown2.aui-style-default [role="checkbox"], .aui-dropdown2.aui-style-default a { color: #333333; padding: 3px 10px; text-decoration: none; } .aui-dropdown2.aui-style-default [aria-disabled="true"], .aui-dropdown2.aui-style-default a.disabled { color: #999999; cursor: default; } .aui-dropdown2.aui-style-default a:focus, .aui-dropdown2.aui-style-default a:hover { text-decoration: none; } .aui-dropdown2.aui-style-default .aui-dropdown2-radio:not([aria-disabled="true"]), .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox:not([aria-disabled="true"]) { cursor: pointer; } .aui-dropdown2.aui-style-default .aui-icon-container, .aui-dropdown2.aui-style-default .aui-dropdown2-radio, .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox { padding-left: 31px; } .aui-dropdown2.aui-style-default .aui-icon-container, .aui-dropdown2.aui-style-default .aui-dropdown2-radio, .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox { /* position of the background or icon (both 16x16) is: * - 10px from the left to match the item padding * - 7px from the top which is calculated: * - 5px for the top padding of the item * - 2px is half the difference between the line-height (20) and the icon height (16) so it's vertically spaced */ background-position: 10px 5px; background-repeat: no-repeat; position: relative; } .aui-dropdown2.aui-style-default .aui-icon-container > img, .aui-dropdown2.aui-style-default .aui-icon-container > .aui-icon { border-width: 0; left: 10px; position: absolute; top: 5px; } .aui-dropdown2.aui-style-default .aui-icon-container > .aui-icon { display: block; overflow: hidden; text-indent: -99999px; } /* Checkbox items */ .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox.aui-dropdown2-checked { /* black tick */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAARklEQVR4AWMYysCKIR6/9CeGHwwyqILMDFpI0r8YAtF1LWT4zGCNKY0AAUDhzwzpCGlsSr4xfAVL4wSxQAWB+L0nNgBBCgAIERPkFiFDsgAAAABJRU5ErkJggg=='); } .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox.aui-dropdown2-checked:hover, .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox.aui-dropdown2-checked.aui-dropdown2-active { /* white tick */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAASUlEQVR4AWMYwuC/1f94/NKf/v/4L4MqyPxfC0n61/9AdF0L/3/+b40pjVAQABT+/D8dIY1Nybf/X2HS2JXEAhUE4vee2ACEKQBagDbBsEzisQAAAABJRU5ErkJggg=='); } .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox.aui-dropdown2-checked.aui-dropdown2-disabled, .aui-dropdown2.aui-style-default .aui-dropdown2-checkbox.aui-dropdown2-checked.aui-dropdown2-disabled.aui-dropdown2-active { /* grey tick */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAT0lEQVR4AWMYwuCU1Zl4vNKnP53+cUIGRXAV8wktJOlfJwPRdJ1eePrzaWsMaQQ4E3D6F1BJOkIam5Jvp7+iSqNbE3v6K1AaH7goNgBhCgCP+y953/+bowAAAABJRU5ErkJggg=='); } /* Radio items */ .aui-dropdown2.aui-style-default .aui-dropdown2-radio.aui-dropdown2-checked { /* checked */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAALElEQVR4AWMYaoBNrV3tORC2M7BhlQdK/4fCduwKnsMVPCeogKAVhB05tAAAMmMgObCgTXMAAAAASUVORK5CYII='); } .aui-dropdown2.aui-style-default .aui-dropdown2-radio.aui-dropdown2-checked:hover, .aui-dropdown2.aui-style-default .aui-dropdown2-radio.aui-dropdown2-checked.aui-dropdown2-active { /* checked hover/focus */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAALUlEQVR4AWMYYuA/2//2/8+BsP0/G1YFQAkYaMeu4DlcwXOCCghaQdiRQwsAAFixP1V4DeDZAAAAAElFTkSuQmCC'); } .aui-dropdown2.aui-style-default .aui-dropdown2-radio.aui-dropdown2-checked.aui-dropdown2-disabled, .aui-dropdown2.aui-style-default .aui-dropdown2-radio.aui-dropdown2-checked.aui-dropdown2-disabled.aui-dropdown2-active { /* checked disabled and checked disabled hover/focus */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAM0lEQVR4AWMYYmAV28H2A88PPD/YvooNq4KD7Qf/Q2E7VgVAvVAFB54TVEDQCsKOHFoAAO6tNjk82BlWAAAAAElFTkSuQmCC'); } .aui-dropdown2.aui-dropdown2-tailed { border: 1px solid #cccccc; margin-top: 10px; } .aui-dropdown2.aui-dropdown2-tailed:before, .aui-dropdown2.aui-dropdown2-tailed:after { border-color: transparent; border-style: outset outset solid outset; border-width: 8px; bottom: 100%; content: ""; display: block; height: 0; position: absolute; width: 0; } .aui-dropdown2.aui-dropdown2-tailed:before { border-bottom-color: #cccccc; margin-bottom: 1px; } .aui-dropdown2.aui-dropdown2-tailed:after { border-bottom-color: #ffffff; } /* basic in-page dropdown trigger style DEPRECATED as of 4.2 */ .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1 { padding: 5px 8px; text-decoration: none; } .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1:hover, .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1:focus, .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1.active, .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1.aui-dropdown2-active { background-color: #326ca6; border-radius: 4px; color: #ffffff; text-decoration: none; } .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1.active, .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1.aui-dropdown2active { border-radius: 4px 4px 0 0; } .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1[aria-disabled="true"], .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1[aria-disabled="true"]:hover, .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1[aria-disabled="true"]:focus, .aui-dropdown2-trigger.aui-style-dropdown2triggerlegacy1[aria-disabled="true"]:active { background: inherit; color: #99b6d3; /* equivalent of opacity: 0.5 */ cursor: default; } /* Toolbar/Toolbar2-via-buttons integration. Avoid double border: */ .aui-dropdown2.aui-style-default.aui-dropdown2-in-toolbar, .aui-dropdown2.aui-style-default.aui-dropdown2-in-buttons { margin-top: -1px; border-top-color: #cccccc; } /* Header integration. */ .aui-dropdown2.aui-style-default.aui-dropdown2-in-header { margin-top: 1px; } .aui-dropdown2.aui-style-default.aui-dropdown2-in-header.aui-dropdown2-in-buttons { margin-top: 0; } .aui-dropdown2.aui-style-default.aui-dropdown2-in-header.aui-dropdown2-tailed { margin-top: 4px; } /* Arrow for sub menus */ .aui-dropdown2-sub-trigger { position: relative; } .aui-dropdown2-sub-trigger:after { border: 5px solid transparent; border-left-color: #333333; content: ""; height: 0; margin-left: -16px; margin-top: -5px; left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */ position: absolute; top: 50%; width: 0; } .aui-dropdown2-sub-trigger.active:after, .aui-dropdown2-sub-trigger.aui-dropdown2-active:after { border-left-color: #ffffff; } .aui-dropdown2-sub-trigger.disabled:after, .aui-dropdown2-sub-trigger.aui-dropdown2-disabled:after { border-left-color: #999999; } .aui-dropdown2.aui-dropdown2-sub-menu, .aui-dropdown2.aui-dropdown2-in-header.aui-dropdown2-sub-menu { margin-top: -3px; } .aui-dropdown2.aui-style-default:hover .aui-dropdown2-checkbox, .aui-dropdown2.aui-style-default:hover .aui-dropdown2-radio, .aui-dropdown2.aui-style-default:hover a { background-color: #ffffff; color: #333333; } .aui-dropdown2.aui-style-default:hover .aui-dropdown2-checkbox.aui-dropdown2-disabled, .aui-dropdown2.aui-style-default:hover .aui-dropdown2-radio.aui-dropdown2-disabled, .aui-dropdown2.aui-style-default:hover a.aui-dropdown2-disabled { color: #999999; } .aui-dropdown2.aui-style-default:hover .aui-dropdown2-checkbox:not(.aui-dropdown2-disabled):hover, .aui-dropdown2.aui-style-default:hover .aui-dropdown2-radio:not(.aui-dropdown2-disabled):hover, .aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):hover { background-color: #3572b0; color: #ffffff; } .aui-dropdown2.aui-style-default .active, .aui-dropdown2.aui-style-default .aui-dropdown2-active { background-color: #3572b0; color: #ffffff; } .aui-dropdown2.aui-style-default .active.aui-dropdown2-disabled, .aui-dropdown2.aui-style-default .aui-dropdown2-active.aui-dropdown2-disabled { background-color: #f5f5f5; color: #999999; } .aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless) { padding-right: 23px !important; /* 8px (arrow width) + 10px (right padding) + 5px (margin between arrow and logo) */ position: relative; } /* Dropdown2 button integration ---------- */ .aui-button.aui-dropdown2-trigger.active:first-child, .aui-button.aui-dropdown2-trigger.active { /* square off bottom corners */ border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-width: 0; /* avoid double border when the dropdown is active - increase padding to cater for this reduction */ padding-bottom: 5px; /* increase the padding to cater for the lack of border so the button doesn't change size */ } .aui-button-link.aui-dropdown2-trigger.active:first-child, .aui-button-link.aui-dropdown2-trigger.active, .aui-button-text.aui-dropdown2-trigger.active:first-child, .aui-button-text.aui-dropdown2-trigger.active { border-bottom-width: 1px; box-shadow: none; padding-bottom: 5px; } .aui-buttons .aui-button.aui-button-subtle.aui-dropdown2-trigger.active, .aui-button.aui-button-subtle.aui-dropdown2-trigger.active { border-color: #cccccc; } .aui-button.aui-button-subtle.aui-dropdown2-trigger:hover { border-color: #999999; } /* Compact Dropdown2 Trigger */ .aui-button.aui-button-compact.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless) { padding-right: 21px !important; /* 8px (arrow width) + 8px (right padding) + 5 (margin between arrow and logo) */ } .aui-button.aui-button-compact.aui-dropdown2-trigger:after { margin-left: -16px; /* Override the margin-left from below for to compensate for the smaller padding-right */ } .aui-button.aui-button-compact.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { top: 11px; /* position the top of the arrow in the middle - 26px (height) / 2 (halfway) - 2 (arrow height) */ } /* adjust padding for smaller height */ .aui-button.aui-dropdown2-trigger.aui-button-compact.active:first-child:not(.aui-dropdown2-trigger-arrowless), .aui-button.aui-dropdown2-trigger.aui-button-compact.active:not(.aui-dropdown2-trigger-arrowless) { padding-bottom: 3px; /* increase the padding to cater for the lack of border so the button doesn't change size */ } /* End Compact Dropdown2 Trigger */ .aui-button.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { border: 4px solid transparent; content: ""; height: 0; left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */ margin-left: -18px; /* push the arrow back inside the button */ margin-top: -2px; opacity: 0.8; position: absolute; top: 50%; width: 0; } .aui-button.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after, .aui-buttons .aui-button.aui-button-primary.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { border-top-color: #333333; } .aui-button.aui-button-primary.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { border-top-color: #ffffff; } .aui-button.aui-button-primary.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless).aui-button-primary:after { border-top-color: #ffffff; } .aui-button.aui-dropdown2-trigger:hover:after, .aui-button.aui-dropdown2-trigger.active:after { opacity: 1; } .aui-button.aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { margin-top: 0; /* make sure no margins intefere with the positioning*/ top: 13px; /* position the top of the arrow in the middle - 30px (height) / 2 (halfway) - 2 (arrow height)*/ } /* suppress old icon pattern for dropdown widget so we don't get double arrows */ .aui-button.aui-dropdown2-trigger > .icon-dropdown, .aui-button.aui-dropdown2-trigger > .aui-icon-dropdown { display: none; } /* INPUT does not play with :after - dropdown2 does not support arrow styles for INPUT buttons */ /* We cannot position arrows on aui-button-text because we don't know what size they will be all the time */ input.aui-button.aui-dropdown2-trigger, .aui-button.aui-button-text.aui-dropdown2-trigger { padding-right: 10px !important; /* someone used important now we're all doomed */ } input.aui-button.aui-dropdown2-trigger:after, .aui-button.aui-button-text.aui-dropdown2-trigger:after { display: none; } /* Dropdown2-only / Split Button ---------- */ .aui-buttons .aui-button.aui-dropdown2-trigger.aui-button-split-more, .aui-buttons .aui-button.aui-dropdown2-trigger.aui-button-split-more.active { /* don't touch vertical padding or things jump around, jump around, jump up jump up and get down */ padding-left: 5px; padding-right: 10px; text-align: left; text-indent: -9999em; } .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more.active:hover:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more.active:hover:before, .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more.active:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more.active:before, .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more:focus:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more:focus:before, .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more:hover:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more:hover:before { border-left-color: #999999; /* dark border for hover. */ bottom: -1px; /* -1 to pull it out over the border */ top: -1px; /* -1 to pull it out over the border */ } .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more.active:hover.aui-button-primary:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more.active:hover.aui-button-primary:before, .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more.active.aui-button-primary:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more.active.aui-button-primary:before, .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more:focus.aui-button-primary:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more:focus.aui-button-primary:before, .aui-button.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more:hover.aui-button-primary:before, .aui-button.aui-dropdown2-trigger.aui-button-split-more:hover.aui-button-primary:before { border-left: 1px solid rgba(0, 0, 0, 0.3); } .aui-header .aui-button-primary.aui-button-split-main:hover + .aui-button.aui-dropdown2-trigger.aui-button-split-more:before, .aui-header .aui-button-primary.aui-dropdown2-trigger.aui-button-split-more.active:hover:before, .aui-header .aui-button-primary.aui-dropdown2-trigger.aui-button-split-more.active:before, .aui-header .aui-button-primary.aui-dropdown2-trigger.aui-button-split-more:hover:before, .aui-header .aui-button-primary.aui-dropdown2-trigger.aui-button-split-more:before { border-color: #1f4d7d; bottom: 0; top: 0; } /** * Dropdown2 triggers in header */ .aui-header .aui-dropdown2-trigger.active, .aui-header a:focus, .aui-header a:hover, .aui-header a:active { background-color: #3572b0; } /* Icons in Dropdown2 triggers and links in header */ .aui-header .aui-dropdown2-trigger.active .aui-icon, .aui-header a:focus .aui-icon, .aui-header a:hover .aui-icon, .aui-header a:active .aui-icon { opacity: 1; } /* In case showIcon is not set to false for header dropdown triggers */ .aui-header .aui-dropdown2-trigger .aui-icon-dropdown { display: none; } /* Styling the dropdown2 triggers differently in the header to avoid inline-block spacing issues with other icons */ .aui-header .aui-dropdown2-trigger:not(.aui-dropdown2-trigger-arrowless):after { border: 4px solid transparent; border-top-color: #ffffff; content: ""; height: 0; margin-left: -18px; margin-top: -2px; opacity: 0.8; left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */ position: absolute; text-indent: -99999px; top: 50%; width: 0; } .aui-header .aui-dropdown2-trigger:hover:after, .aui-header .aui-dropdown2-trigger.active:after { opacity: 1; } .aui-header .aui-button.aui-dropdown2-trigger:after { margin-top: 0; } /* Storing these styles in a CSS file until LESS is upgraded to handle "2-" in a data attribute */ .aui-dropdown2-tailed[data-dropdown2-alignment="left"]:before, .aui-dropdown2-tailed[data-dropdown2-alignment="left"]:after, .aui-dropdown2-tailed.aui-alignment-snap-left:before, .aui-dropdown2-tailed.aui-alignment-snap-left:after { left: 20px; } .aui-dropdown2-tailed[data-dropdown2-alignment="right"]:before, .aui-dropdown2-tailed[data-dropdown2-alignment="right"]:after, .aui-dropdown2-tailed.aui-alignment-snap-right:before, .aui-dropdown2-tailed.aui-alignment-snap-right:after { right: 20px; } form.aui { margin: 20px 0 0 0; position: relative; } form.aui:first-child { margin-top: 0; } /* Field styles */ form.aui .text, form.aui .password, form.aui .upfile, form.aui .textarea, form.aui .select, form.aui .multi-select, form.aui .aui-select2-container { background: #ffffff; color: #333333; font-family: inherit; font-size: 14px; } form.aui .text, form.aui .password, form.aui .textarea, form.aui .select, form.aui .multi-select, form.aui .aui-select2-container .select2-choices { border: 1px solid #cccccc; border-radius: 3.01px; box-sizing: border-box; font-size: inherit; margin: 0; max-width: 250px; vertical-align: baseline; width: 100%; } form.aui .text, form.aui .password, form.aui .select, form.aui .aui-select2-container .select2-choices { height: 2.14285714em; line-height: 1.4285714285714; padding: 4px 5px; } form.aui .select { padding: 6px 5px 5px 5px; /* Firefox doesn't allow line-height to be adjusted and selects break horribly when the font-family is changed. Using padding instead */ vertical-align: top; } form.aui .textarea, form.aui .select[size], form.aui .multi-select { height: auto; line-height: 1.4285714285714; margin: 0; padding: 4px 5px; } form.aui .textarea { overflow-y: auto; } /* Ensure AUI Select2's do not show as regular text fields */ form.aui .aui-select2-container { border: 0; height: auto; max-width: 250px; padding: 0; vertical-align: baseline; width: 100%; } form.aui .aui-select2-container .select2-choices { height: auto; max-width: none; } /* Do not give file inputs a height or width because they break horribly in certain browsers. */ form.aui .upfile { box-sizing: border-box; font-family: inherit; font-size: inherit; margin: 5px 0; padding: 0; } form.aui optgroup { background-color: #f5f5f5; color: #707070; font-style: normal; font-weight: normal; } form.aui option, form.aui optgroup option { background-color: #ffffff; color: #333333; } /* Disabled form element styles */ form.aui .text[disabled], form.aui .password[disabled], form.aui .textarea[disabled], form.aui .select[disabled], form.aui .multi-select[disabled], form.aui .select[disabled] option, form.aui .select[disabled] optgroup, form.aui .multi-select[disabled] option, form.aui .multi-select[disabled] optgroup { background-color: #f5f5f5; color: #999999; } form.aui .text[disabled], form.aui .password[disabled], form.aui .textarea[disabled], form.aui .select[disabled], form.aui .multi-select[disabled] { color: #999999; } form.aui .text[disabled], form.aui .password[disabled], form.aui .textarea[disabled], form.aui .select[disabled], form.aui .multi-select[disabled], form.aui .radio[disabled], form.aui .checkbox[disabled] { cursor: not-allowed; } form.aui .text::-webkit-input-placeholder, form.aui .password::-webkit-input-placeholder, form.aui .textarea::-webkit-input-placeholder { color: #999999; opacity: 1; } form.aui .text::-moz-placeholder, form.aui .password::-moz-placeholder, form.aui .textarea::-moz-placeholder { color: #999999; } form.aui .text.aui-placeholder-shown, form.aui .password.aui-placeholder-shown, form.aui .textarea.aui-placeholder-shown, form.aui .text.placeholder-shown, form.aui .password.placeholder-shown, form.aui .textarea.placeholder-shown { color: #999999; } /* Field widths * - don't add widths to file inputs - they break horribly */ form.aui .short-field { max-width: 75px; } form.aui .medium-field { max-width: 165px; } form.aui .medium-long-field { max-width: 350px; } form.aui .long-field { max-width: 500px; } form.aui .full-width-field { max-width: none; } /* Structural elements */ form.aui fieldset { border: 0; clear: both; display: block; margin: 0; padding: 0; position: relative; } form.aui legend, form.aui label { color: #707070; } form.aui .icon-required { left: 100%; position: absolute; top: 5px; } form.aui div.description { color: #707070; font-size: 12px; line-height: 1.66666666666667; margin: 5px 0 0 0; } form.aui div.description:first-child { margin-top: 0; } form.aui .field-value { display: inline-block; font-weight: bold; padding-top: 5px; } /* TODO: don't support this in AUI Forms 2 */ form.aui legend { display: none; } form.aui .field-group, form.aui .group, form.aui .date-select { box-sizing: border-box; clear: both; padding: 4px 0 4px 145px; position: relative; margin: 1px 0; width: 100%; } form.aui .group { padding-top: 0; } form.aui .field-group:before, form.aui .field-group:after, form.aui .group:before, form.aui .group:after, form.aui .date-select:before, form.aui .date-select:after { content: " "; display: table; } form.aui .field-group:after, form.aui .group:after, form.aui .date-select:after { clear: both; } form.aui legend, form.aui .field-group > label { float: left; margin-left: -145px; padding: 5px 0 0 0; position: relative; text-align: right; width: 130px; word-wrap: break-word; } form.aui .checkbox > label, form.aui .radio > label { color: #333333; } form.aui div.checkbox > .checkbox[disabled] + label, form.aui div.radio > .radio[disabled] + label { color: #999999; cursor: not-allowed; } form.aui .field-group .error, form.aui .group .error, form.aui .checkbox .error, form.aui .radio .error { clear: both; color: #d04437; display: block; margin: 5px 0 0 0; } form.aui .field-group .error:first-child, form.aui .checkbox .error:first-child, form.aui .radio .error:first-child { margin-top: 0; } form.aui .group legend, form.aui .date-select legend { display: block; } form.aui .group .field-group, form.aui .date-select .field-group { clear: none; padding-left: 0; padding-top: 0; } form.aui .date-select .field-group label { display: none; } form.aui div.checkbox, form.aui div.radio { margin: 5px 0 0 0; padding: 0 0 0 20px; position: relative; } form.aui legend + .field-group, form.aui legend + .checkbox, form.aui legend + .radio { margin-top: 0; padding-top: 5px; } form.aui div.checkbox:first-child, form.aui div.radio:first-child { margin-top: 0; } form.aui .matrix { padding-top: 5px; } form.aui div.radio input.radio, form.aui div.checkbox input.checkbox { box-sizing: border-box; font-size: 14px; height: 1.4285714285714em; left: 0; margin: 0; padding: 2px; position: absolute; vertical-align: baseline; } /* Buttons */ form.aui .buttons-container { box-sizing: border-box; clear: both; margin: 1px 0 0 0; padding: 4px 0 4px 145px; position: relative; width: 100%; } /* Long Labels * add long-label class to form eg: