/* ================================= INFO ================================= */ /* ------------------------------------------------------------------------ */ /* This is a website theme called Cerulean19. It may be applied to several web applications that share design elements and widgets. This file is application-agnostic, and applications may have their own files with specialized rules. Applications using this theme should give their element the class "VR". The rules in this file apply only to DOM elements contained within an element of class "VR", and this applies some basic styles to the element having class "VR". This contains media queries for responsive design and print styles. Responsive breakpoints: mobile <= 400px tablet < 760px laptop < 980px desktop >= 980px There might be other breakpoints used for incidental rules. This file defines a general color palette which is very customizable, because different sites might want to use their own color palettes. They should define their own rules in different files. To make it easier to find and override these colors, all of the color definitions in this file are grouped in one place, except for some of the basic grayscale styles, like for shadows. */ /* ================================ COLORS ================================ */ /* ------------------------------------------------------------------------ */ /* Color palette: lighter blue (baby) #78B4D7 / rgb(120, 180, 215) light blue (seafoam) #4BA0D2 / rgb(75, 160, 210) stronger blue (cobalt) #007DC3 / rgb(0, 125, 195) borders navy blue #052387 / rgb(5, 35, 135) headings, tabs darker seafoam blue #0168A3 / rgb(1, 104, 163) headings, links, modal dialogs medium flat blue #337AB7 / rgb(51, 122, 183) buttons darker flat blue #265A88 / rgb(38, 90, 136) buttons green #329123 / rgb(50, 145, 35) status bubbles flat orange (autumn) #AF7800 / rgb(175, 120, 0) status bubbles dark red (crimson) #B40023 / rgb(180, 0, 35) status bubbles, emphasis dark gray #646464 / rgb(100, 100, 100) field labels light gray #D0D0D0 / rgb(208, 208, 208) buttons very light gray #E1E1E1 / rgb(225, 225, 225) borders */ /* General styles */ .VR { background-color: white; } .VR a { color: #0168A3; } .VR a:hover, .VR a:focus { color: #052387; } .VR a:visited:not(.Button) { color: #A040C0; } .VR hr { border-top-color: #CCCCCC; } /* Layout */ .VR .PageSection { color: #646464; } .VR .PageSection .SectionSummary { color: #0168A3; } /* Headings */ .VR h1 { border-bottom-color: #0168A3; background-color: transparent; color: #333333; } .VR .PageSection h1 { background-color: #0168A3; color: #FFFFFF; } .VR h2 { border-bottom-color: #CCCCCC; color: #0168A3; } .VR h3 { border-bottom-color: #CCCCCC; color: #646464; } /* Content groups */ .VR .ContentGroup.Address .Label { color: #0168a3; } .VR .ContentGroup.Box { border-color: #CCCCCC; } /* Info groups */ .VR .InfoFieldGroup.Block .InfoField.KVP > .Value strong, .VR .InfoField.KVP.Block > .Value strong { color: #B40023; } /* Forms */ .VR form .Field { color: #646464; } .VR form .Field.KVP.highlighted .Label { color: #0168A3; } .VR form .Field.KVP .Value input[type=text], .VR form .Field.KVP .Value input[type=password], .VR form .Field.KVP .Value input[type=date], .VR form .Field.KVP .Value textarea, .VR form .Field.KVP .Value select { border: 1px solid #E1E1E1; box-shadow: 0 0 2px #E1E1E1; } .VR form .Field.KVP.error .Label { color: #B40023; } .VR form .Field.KVP.error .Value input[type=text], .VR form .Field.KVP.error .Value input[type=password], .VR form .Field.KVP.error .Value input[type=date], .VR form .Field.KVP.error .Value textarea, .VR form .Field.KVP.error .Value select { border-color: #B40023; background-color: rgba(125, 0, 0, 0.125); } .VR form .Field.KVP .ErrorMessage { color: #B40023; } .VR form .FieldGroup > .Field.KVP .ErrorMessage { background-color: rgba(150, 0, 0, 0.1); border-color: rgba(125, 0, 0, 0.05); } .VR form .FieldGroup > .Field.KVP .ErrorMessage:before { background-color: #B40023; border-color: #EAEAEA; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05), -1px -1px 2px rgba(0, 0, 0, 0.03); color: #EAEAEA; } /* Attention */ .VR form .FieldGroup.Attention { border-color: #8eb9d1; box-shadow: 0 0 2px rgba(214, 239, 253, 0.75); } .VR form .FieldGroup.Attention .AttentionMessage { background: #052387; background-image: linear-gradient(0deg, #052387 0%, #1432AA 100%); color: white; } .VR form .FieldGroup.Attention .AttentionMessage:first-child { border-color: rgba(0, 0, 0, 0.5); } .VR form .FieldGroup.Attention .AttentionMessage:before { background-color: #0991dc; border-color: #EAEAEA; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05), -1px -1px 2px rgba(0, 0, 0, 0.03); color: #EAEAEA; } /* Buttons */ .VR button, .VR .Button { background: #D0D0D0; background-image: linear-gradient(0deg, #E0E0E0 32%, #FFFFFF 100%); border: 1px solid #D0D0D0; box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.25); color: #000000; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } .VR button:hover, .VR button:focus, .VR .Button:hover, .VR .Button:focus { background-image: linear-gradient(0deg, #D0D0D0 45%, #E6E6E6 55%); color: inherit; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } .VR button[type=submit]:not(:disabled):not(.disabled), .VR button.Submit:not(:disabled):not(.disabled), .VR button.Primary:not(:disabled):not(.disabled), .VR .Button.Submit:not(.disabled), .VR .Button.Primary:not(.disabled) { background: #337AB7; background-image: linear-gradient(0deg, #265A88 32%, #337AB7 100%); border-color: #3A75C4; box-shadow: inset -1px 2px 4px rgba(255, 255, 255, 0.45); color: #FFFFFF; text-shadow: 0 0 2px rgba(0, 0, 0, 0.15); } .VR button[type=submit]:not(:disabled):not(.disabled):hover, .VR button.Submit:not(:disabled):not(.disabled):hover, .VR button.Primary:not(:disabled):not(.disabled):hover, .VR button[type=submit]:not(:disabled):not(.disabled):focus, .VR button.Submit:not(:disabled):not(.disabled):focus, .VR button.Primary:not(:disabled):not(.disabled):focus, .VR .Button.Submit:not(.disabled):hover, .VR .Button.Primary:not(.disabled):hover, .VR .Button.Submit:not(.disabled):focus, .VR .Button.Primary:not(.disabled):focus { background-image: linear-gradient(0deg, #2650A0 40%, #265A88 60%); } .VR button[type=submit]:disabled, .VR button[type=submit].disabled, .VR button.Submit:disabled, .VR button.Submit.disabled, .VR button.Primary:disabled, .VR button.Primary.disabled, .VR .Button.Submit.disabled, .VR .Button.Primary.disabled { background: #7CA1C1; background-image: linear-gradient(0deg, #5D768C 32%, #7CA1C1 100%); border-color: #3A75C4; box-shadow: inset -1px 2px 4px rgba(255, 255, 255, 0.45); color: #FFFFFF; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } @media print { .VR button:not(:disabled):not(.disabled), .VR .Button:not(:disabled):not(.disabled) { border: 0.5mm solid black !important; background: white !important; color: black !important; text-shadow: none !important; } .VR button:disabled, .VR button.disabled, .VR .Button:disabled, .VR .Button.disabled { border: 0.5mm dotted #777777 !important; background: white !important; color: #555555 !important; text-shadow: none !important; } } /* Data tables */ .VR .DataTable { border-color: white; } .VR .DataTable thead th, .VR .DataTable thead td { background-color: #337AB7; color: white; } .VR .DataTable thead tr:last-child th, .VR .DataTable thead tr:last-child td { border-bottom-color: rgba(0, 0, 0, 0.2); } .VR .DataTable thead th:not(:first-child), .VR .DataTable thead td:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.15); } .VR .DataTable tbody th:not(:first-child), .VR .DataTable tbody td:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.4); } .VR .DataTable tbody tr.Important { background-color: #D3E7F2; } .VR .DataTable tbody tr:not(.Important):nth-child(even) { background-color: #EDF4F7; } .VR .DataTable tbody tr.Important th, .VR .DataTable tbody tr.Important td { color: rgba(0, 0, 0, 0.85); } .VR .DataTable tbody:last-child tr:last-child th, .VR .DataTable tbody:last-child tr:last-child td { border-bottom-color: rgba(0, 0, 0, 0.2); } .VR .DataTable tfoot th, .VR .DataTable tfoot td { background-color: #546B87; color: white; } .VR .DataTable tfoot tr:first-child th, .VR .DataTable tfoot :first-child td { border-top-color: rgba(0, 0, 0, 0.2); } .VR .DataTable tfoot th:not(:first-child), .VR .DataTable tfoot td:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.15); } /* Data listings */ .VR .DataListing .Heading { background-color: #E1E1E1; color: #222222; } .VR .DataListing .Heading:hover { background-color: #D2D2EA; } .VR .DataListing .DataGroup .DataGroup .Heading { background-color: #EAEAEA; } .VR .DataListing .DataGroup .DataGroup .Heading:hover { background-color: #D9D9F4; } .VR .DataListing .DataGroup .DataGroup .DataGroup .Heading { background-color: #F5F5F5; } .VR .DataListing .DataGroup .DataGroup .DataGroup .Heading:hover { background-color: #E6E6FF; } .VR .DataListing ul { color: #888888; } .VR .DataListing .DataGroup .DataGroup ul { color: #AAAAAA; } .VR .DataListing .DataGroup .DataGroup .DataGroup ul { color: #CCCCCC; } .VR .DataListing .DataPoints .Label { color: #333333; } .VR .DataListing .DataPoints .Value { color: #555555; } /* Status indicators */ .VR .StatusIndicator .Bubble.Green { background-color: #329123; } .VR .StatusIndicator .Bubble.Orange { background-color: #AF7800; } .VR .StatusIndicator .Bubble.Red { background-color: #B40023; } /* Progressions */ .VR .Progression .ProgressGraphic .InsetContainer { background-color: #747474; } .VR #cerulean19ArrowDefaultGradient stop.leftEdge { stop-color: #BFBFBF; } .VR #cerulean19ArrowDefaultGradient stop.rightEdge { stop-color: #747474; } .VR .Progression .ProgressGraphic .Stage.Passed .InsetContainer { background-color: #1586C5; } .VR #cerulean19ArrowPassedGradient stop.leftEdge { stop-color: #68BDEC; } .VR #cerulean19ArrowPassedGradient stop.rightEdge { stop-color: #1586C5; } .VR .Progression .ProgressGraphic .Stage.Passed.active .InsetContainer { background-color: #1586C5; } .VR #cerulean19ArrowPartiallyActiveGradient stop.leftEdge { stop-color: #1586C5; } .VR #cerulean19ArrowPartiallyActiveGradient stop.rightEdge { stop-color: #1586C5; } .VR .Progression .ProgressGraphic .Stage.Current .InsetContainer { background-color: #02527F; } .VR #cerulean19ArrowCurrentGradient stop.leftEdge { stop-color: #0B78B5; } .VR #cerulean19ArrowCurrentGradient stop.rightEdge { stop-color: #02527F; } .VR .Progression .ProgressGraphic .Stage.Problem .InsetContainer { background-color: #B40023; } .VR #cerulean19ArrowProblemGradient stop.leftEdge { stop-color: #E51B43; } .VR #cerulean19ArrowProblemGradient stop.rightEdge { stop-color: #B40023; } .VR .Progression > .ProcessName { color: #0168A3; } .VR .Progression .ProgressGraphic .Stage .InsetLabel { color: white; } .VR .Progression .ProgressGraphic .Stage .Title .Text { background: white; } .VR .Progression .ProgressGraphic .Stage.Passed .Title { color: #646464; } .VR .Progression .ProgressGraphic .Stage.Passed:hover .Title, .VR .Progression .ProgressGraphic .Stage.Passed.active .Title { color: #0168A3; } .VR .Progression .ProgressGraphic .Stage.Current .Title { color: #0168A3; } .VR .Progression .ProgressGraphic .Stage.Current ~ .Stage .Title { color: #646464; } .VR .Progression .ProgressGraphic .Stage.Current.Problem .Title { color: #B40023; } @media print { .VR .Progression .ProgressGraphic .ProgressArrow .Outer { fill: #EEEEEE !important; } .VR .Progression .ProgressGraphic .Stage.Passed .ProgressArrow .Outer { fill: #E0E0E0 !important; } .VR .Progression .ProgressGraphic .Stage.Current .ProgressArrow .Outer { fill: white !important; } .VR .Progression .ProgressGraphic .Stage.Current .ProgressArrow .Inner { fill: #D0D0D0 !important; } .VR .Progression .ProgressGraphic .Stage.Current.Problem .ProgressArrow .Outer { fill: white !important; } .VR .Progression .ProgressGraphic .Stage.Current.Problem .ProgressArrow .Inner { fill: #CCCCCC !important; } .VR .Progression .ProgressGraphic .InsetLabel { color: black; } } /* Modal dialog */ .VR #ModalDialog .Box { border-color: #0168A3; background: #FFFFFF; } .VR #ModalDialog .Icon .StandardGraphic { border-color: #052387; background-color: #FAFAFA; color: #EA0000; } .VR #ModalDialog .Message { color: #0168A3; } .VR #ModalDialog .Message a { color: #646464; } /* Tooltips */ .VR .Tooltip .Icon { background-color: #FFFFFF; color: #0168A3; } .VR .Tooltip .Text { background: #FFFFFF; border-color: #007DC3; box-shadow: 0 0 2px rgba(214, 239, 253, 0.75); color: #646464; } /* Collapsible */ .VR .Collapsible .CollapsibleIndicator { background-color: #0174B4; color: #FFFFFF; } /* Simple notice messages */ .VR .SimpleNoticeMessageBox { border-color: #DDDDDD; } .VR .SimpleNoticeMessageBox h1 { background-color: #0174B4; color: #FFFFFF; } .VR .SimpleNoticeMessageBox p { color: #333333; } /* NoScript message */ .VR .NoScriptMessage { border-color: #7D0000; background-color: #FFEAEA; } /* ======================== RESPONSIVE BREAKPOINTS ======================== */ /* ------------------------------------------------------------------------ */ .VR #ResponsiveIndicators > * { display: none; } @media screen and (max-width: 400px) { .VR #ResponsiveIndicators > .Mobile { display: block; } } @media screen and (min-width: 401px) and (max-width: 759px) { .VR #ResponsiveIndicators > .Tablet { display: block; } } @media screen and (min-width: 760px) and (max-width: 979px) { .VR #ResponsiveIndicators > .Laptop { display: block; } } @media screen and (min-width: 980px) { .VR #ResponsiveIndicators > .Desktop { display: block; } } /* ============================ GENERAL STYLES ============================ */ /* ------------------------------------------------------------------------ */ html.VR { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; } .VR:not(.Embeddable) body { margin: 0; padding: 1.0rem; box-sizing: border-box; } .VR.Embeddable body { margin: 0; padding: 0; box-sizing: border-box; } .VR a { } .VR hr { border-top-width: 1px; border-top-style: solid; border-bottom: none; } @media screen and (max-width: 480px) { .VR body { margin-top: 0; margin-left: 0; margin-right: 0; } } .VR img { image-orientation: from-image; } .VR img.rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .VR img.rotate180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .VR img.rotate270 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .VR .goog-te-spinner-pos { display: none; } /* Embeddable applications */ /* ======================= */ .VR.Embeddable .PageContent { } @media screen { /* Form pages and sparse-content pages */ .VR.Embeddable body.Page-Form .PageContent, .VR.Embeddable body.Page-Sparse .PageContent { margin-left: 2.5%; margin-right: 2.5%; padding-top: 2.0rem; padding-bottom: 1.5rem; } /* Form content */ .VR.Embeddable body:not(.Page-Form) .FormContent { margin-left: 2.5%; margin-right: 2.5%; } /* Non-form, non-sparse pages */ .VR.Embeddable body:not(.Page-Form):not(.Page-Sparse) .PageContent { padding-top: 1.25rem; padding-bottom: 1.75rem; } } @media screen and (min-width: 980px) { /* Form pages and sparse-content pages */ .VR.Embeddable body.Page-Form .PageContent, .VR.Embeddable body.Page-Sparse .PageContent { margin-left: auto; margin-right: auto; width: 650px; } /* Form content */ .VR.Embeddable body:not(.Page-Form) .FormContent { margin-left: auto; margin-right: auto; width: 650px; } /* Non-form, non-sparse pages */ .VR.Embeddable body:not(.Page-Form):not(.Page-Sparse) .PageContent { margin-left: 8%; margin-right: 8%; } } @media screen and (min-width: 760px) and (max-width: 979px) { /* Form pages and form content */ .VR.Embeddable body.Page-Form .PageContent, .VR.Embeddable body:not(.Page-Form) .FormContent { margin-left: 10%; width: 75%; max-width: 650px; } /* Sparse-content pages */ .VR.Embeddable body.Page-Sparse .PageContent { margin-left: 10%; width: 80%; } /* Non-form, non-sparse pages */ .VR.Embeddable body:not(.Page-Form):not(.Page-Sparse) .PageContent { } } @media screen and (min-width: 401px) and (max-width: 979px) { /* Form pages and sparse-content pages */ .VR.Embeddable body.Page-Form .PageContent, .VR.Embeddable body.Page-Sparse .PageContent { } /* Form content */ .VR.Embeddable body:not(.Page-Form) .FormContent { } /* Non-form, non-sparse pages */ .VR.Embeddable body:not(.Page-Form):not(.Page-Sparse) .PageContent { margin-left: 4%; margin-right: 4%; } } @media screen and (min-width: 401px) and (max-width: 759px) { /* Form pages and form content */ .VR.Embeddable body.Page-Form .PageContent, .VR.Embeddable body:not(.Page-Form) .FormContent { margin-left: 7.5%; width: 85%; max-width: 550px; } /* Sparse-content pages */ .VR.Embeddable body.Page-Sparse .PageContent { margin-left: 7.5%; width: 85%; max-width: 550px; } /* Non-form, non-sparse pages */ .VR.Embeddable body:not(.Page-Form):not(.Page-Sparse) .PageContent { } } /* ================================ LAYOUT ================================= */ /* ------------------------------------------------------------------------ */ /* PAGE SECTIONS */ /* ============= */ .VR .PageSection { margin-top: 1.0rem; } .VR .PageSection.TopLevel { margin-left: 1.5rem; margin-right: 1.5rem; } .VR .PageSection.TopLevel ~ .PageSection.TopLevel { margin-top: 2.0rem; } .VR .PageSectionGroup { display: block; margin-top: 1.0rem; } @media screen and (min-width: 760px) { .VR .PageSectionGroup { display: flex; } .VR .PageSectionGroup > .PageSection.Subsection { flex-basis: 50%; margin: 0; } .VR .PageSectionGroup > .PageSection.Subsection:nth-child(odd) { margin-right: 0.75rem; } .VR .PageSectionGroup > .PageSection.Subsection:nth-child(even) { margin-left: 0.75rem; } .VR .PageSectionGroup > .PageSection.Subsection > .PageSection.Subsection:first-child { margin-top: 0; } } .VR .PageSection.TopLevel:not(.PageSectionGroup) > .PageSection.Subsection { margin-top: 1.5rem; } .VR .PageSection .SectionSummary { margin: 1.75rem 0.75rem 0 0.75rem; max-width: 80ex; font-size: 1.25em; font-weight: normal; } /* HEADINGS */ /* ======== */ .VR h1 { margin: 0.75rem 0 1.0rem 0; padding: 0 0 0.25em 0; border-bottom-width: 2px; border-bottom-style: solid; font-size: 1.85em; font-weight: normal; line-height: 1.25; } .VR .PageSection h1 { margin: 0 -0.75rem 1.75rem -0.75rem; padding: 1.0rem 1.5rem; border-bottom: none; line-height: 1; } @media print { .VR h1 { border-bottom: 0.75mm solid black; } } .VR .PageHeader h1 { margin: 0 0 1.75rem 0; } .VR .PageSection h1 { margin-left: -1.5rem; margin-right: -1.5rem; } .VR h2 { margin: 0; padding: 0 0 0.25em 0; border-bottom-width: 2px; border-bottom-style: solid; font-size: 1.5em; font-weight: normal; } .VR h1 + h2 { margin-top: 2.0rem; } .VR h3 { margin: 1.5em 0 0 0; padding: 0 0 0.25em 0; border-bottom-width: 2px; border-bottom-style: solid; font-size: 1.25em; font-weight: normal; } /* CONTENT GROUPS */ /* ============== */ .VR .ContentGroup { margin-top: 1em; } .VR .ContentGroup:first-child { margin-top: 0; } .VR .ContentGroup.Address { } .VR .ContentGroup.Address .Label { font-weight: bold; } .VR .ContentGroup.Address .Label:after { margin-left: -0.4ex; content: ':'; } .VR .ContentGroup.Address .NameAndAddress { line-height: 1.5; } .VR .ContentGroup.Address .NameAndAddress:not(:first-child) { margin: 0.5em 0; } .VR .ContentGroup.Address .Name { font-weight: bold; } .VR .ContentGroup.Address .Address { font-weight: bold; } .VR .ContentGroup.Address .Photos { margin-top: 1em; overflow: hidden; } .VR .ContentGroup.Address .Photos img { max-width: 300px; vertical-align: top; } .VR .ContentGroup.Links > * { display: block; margin-top: 0.5em; } .VR .ContentGroup.Box { padding: 1em; border-width: 2px; border-style: solid; page-break-inside: avoid; } /* INFO GROUPS */ /* =========== */ .VR .ContentGroup.InfoFields:not(:first-child) { margin: 1em 12.5% 0.5em 0; } .VR .InfoFields .InfoFieldGroup ~ .InfoFieldGroup { margin-top: 0.75em; } .VR .InfoFieldGroup > .InfoField, .VR .InfoFieldGroup > .InfoFields { margin-bottom: 0.4em; } .VR .InfoFieldGroup > .InfoField.KVP { line-height: 1.4; } /* A key-value pair (KVP) that is on its own row, not with block components */ .VR .InfoFieldGroup:not(.Block) > .InfoField.KVP:not(.Block) { text-indent: -1em; margin-left: 1em; } /* A KVP that is alone, is its own group */ .VR .InfoField.KVP:only-child { } .VR .InfoFieldGroup.WithStatusIndicator .InfoField.KVP:only-child { } /* A KVP with block components */ .VR .InfoFieldGroup.Block .InfoField.KVP, .VR .InfoField.KVP.Block { } /* A KVP that is within a row of 2+ such pairs */ .VR .InfoFields > .InfoField { display: inline-block; } /* KVP within a row, all except first one */ .VR .InfoFields > .InfoField + .InfoField { margin-left: 1.75ex; } .VR .InfoField > .StatusIndicator { } .VR .InfoField > .StatusIndicator .Bubble { margin-top: 0.25em; } .VR .InfoField.KVP > .Label { margin-right: 0.4ex; font-weight: bold; white-space: nowrap; } .VR .InfoField.KVP:not(.NoColon) > .Label:after { content: ':'; } /* Label within a KVP with block components */ .VR .InfoFieldGroup.Block .InfoField.KVP > .Label, .VR .InfoField.KVP.Block > .Label { } /* Label within a row without a status indicator, within a group that has status indicators */ .VR .InfoFieldGroup.WithStatusIndicator .InfoField > .Label:first-child { padding-left: 1.32em; } .VR .InfoField.KVP > .Value { display: inline; } /* Value within a block KVP */ .VR .InfoFieldGroup.Block .InfoField.KVP > .Value, .VR .InfoField.KVP.Block > .Value { display: block; } /* Value within a block KVP, within a group that has status indicators */ .VR .InfoFieldGroup.WithStatusIndicator.Block .InfoField.KVP > .Value, .VR .InfoFieldGroup.WithStatusIndicator .InfoField.KVP.Block > .Value { padding-left: 1.32em; } .VR .InfoFieldGroup.WithStatusIndicator.Block .InfoField.KVP > .Value p:first-child, .VR .InfoFieldGroup.WithStatusIndicator .InfoField.KVP.Block > .Value p:first-child { margin-top: 0.5em; } /* Strong text within a block KVP */ .VR .InfoFieldGroup.Block .InfoField.KVP > .Value strong, .VR .InfoField.KVP.Block > .Value strong { font-weight: bold; font-style: italic; } @media screen and (max-width: 759px) { .VR .ContentGroup.Address .Photos { text-align: center; } .VR .ContentGroup.Address .Photos img { max-width: 65vw; max-height: 60vh; } } /* ================================ FORMS ================================= */ /* ------------------------------------------------------------------------ */ /* FIELDS */ /* ====== */ .VR form .Field { font-size: 0.875em; } .VR form .Field.KVP .Label { font-weight: bold; } .VR form .Field.KVP .Label:after { content: ':'; } .VR form .Field.KVP.highlighted .Label { } .VR form .Field.KVP.error .Label { } .VR form .Field.KVP .Value input[type=text], .VR form .Field.KVP .Value input[type=password], .VR form .Field.KVP .Value input[type=date], .VR form .Field.KVP .Value textarea, .VR form .Field.KVP .Value select { padding: 0.4em 0.6em; border-radius: 0.35em; } .VR form .Field.KVP.error .Value input[type=text], .VR form .Field.KVP.error .Value input[type=password], .VR form .Field.KVP.error .Value input[type=date], .VR form .Field.KVP.error .Value textarea, .VR form .Field.KVP.error .Value select { } .VR form .Field.KVP .Description { line-height: 1.3; } .VR form .Field.KVP .ErrorMessage { display: none; } .VR form .Field.KVP.error .ErrorMessage { display: block; } /* FIELD GROUPS */ /* ============ */ .VR form .FieldGroup.Conditional:not(.active) { display: none; } .VR form .FieldGroup > .Field { display: block; margin-bottom: 0.75rem; } .VR form .FieldGroup > .Field.KVP { display: flex; align-items: center; flex-wrap: wrap; } .VR form .FieldGroup > .Field.KVP .Label { flex-basis: 20ex; } .VR form .FieldGroup > .Field.KVP .Value { flex-grow: 1; } .VR form .FieldGroup > .Field.KVP .Value input[type=text], .VR form .FieldGroup > .Field.KVP .Value input[type=password], .VR form .FieldGroup > .Field.KVP .Value textarea, .VR form .FieldGroup > .Field.KVP .Value select { width: 100%; box-sizing: border-box; } .VR form .FieldGroup > .Field.KVP .Value input[type=date] { font-family: Verdana, Geneva, Tahoma, sans-serif; box-sizing: border-box; } .VR form .FieldGroup > .Field.KVP .Description { flex-basis: 100%; margin-top: 0.5em; padding-left: 1.0ex; } .VR form .FieldGroup > .Field.KVP .ErrorMessage { flex-basis: 100%; margin: 0.65em 0.5em 0.25em 0.5em; padding: 0.5em 0.65em 0.6em 1.65em; border-radius: 1.0em; border-width: 2px; border-style: solid; text-indent: -1em; line-height: 1.5; } .VR form .FieldGroup > .Field.KVP .ErrorMessage:before { display: inline-block; margin-right: 0.75ex; padding-top: 0.15em; width: 1.5em; height: 1.5em; border-radius: 10em; border-width: 2px; border-style: solid; font-family: monospace; font-size: 1.125em; font-weight: bold; text-align: center; text-indent: 0; line-height: 1; vertical-align: middle; box-sizing: border-box; content: '\2605'; } @media screen and (max-width: 400px) { .VR form .FieldGroup > .Field.KVP { display: block; margin-bottom: 1.0rem; } .VR form .FieldGroup > .Field.KVP .Label { display: block; } .VR form .FieldGroup > .Field.KVP .Value { display: block; margin-top: 0.5rem; } .VR form .FieldGroup > .Field.KVP .Description { display: block; padding-left: 1.0ex; } } /* ATTENTION */ /* ========= */ .VR form .FieldGroup.Attention { margin-top: 2.0rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; } .VR form .FieldGroup.Attention .AttentionMessage { padding: 0.75em 1.125em 0.75em 1.0em; font-weight: bold; cursor: default; } .VR form .FieldGroup.Attention .AttentionMessage:first-child { margin: -1px -1px 0.75em -1px; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; border-width: 1px; border-style: solid; border-bottom-width: 0; } .VR form .FieldGroup.Attention .AttentionMessage:before { display: inline-block; margin-right: 1.125ex; padding-top: 0.2em; width: 1.5em; height: 1.5em; border-radius: 10em; border-width: 2px; border-style: solid; font-family: monospace; font-size: 1.0em; font-weight: bold; text-align: center; line-height: 1; vertical-align: baseline; box-sizing: border-box; content: '\2605'; } .VR form .FieldGroup.Attention > .Field { padding-left: 0.75em; padding-right: 0.75em; } .VR form .FieldGroup.Attention .Field.KVP .Value input[type=text], .VR form .FieldGroup.Attention .Field.KVP .Value input[type=password], .VR form .FieldGroup.Attention .Field.KVP .Value input[type=date], .VR form .FieldGroup.Attention .Field.KVP .Value textarea, .VR form .FieldGroup.Attention .Field.KVP .Value select { box-shadow: none; } /* BUTTONS */ /* ======= */ .VR button, .VR .Button { display: inline-block; padding: 0.6em 1.75em; border-radius: 0.5em; font-size: 0.875em; font-weight: normal; text-decoration: none; cursor: pointer; transition-duration: 250ms; transition-property: background-image; } .VR button:hover, .VR button:focus, .VR .Button:hover, .VR .Button:focus { transition-duration: 500ms; } .VR button[type=submit]:not(:disabled):not(.disabled), .VR button.Submit:not(:disabled):not(.disabled), .VR button.Primary:not(:disabled):not(.disabled), .VR .Button.Submit:not(.disabled), .VR .Button.Primary:not(.disabled) { } .VR button[type=submit]:not(:disabled):not(.disabled):hover, .VR button.Submit:not(:disabled):not(.disabled):hover, .VR button.Primary:not(:disabled):not(.disabled):hover, .VR button[type=submit]:not(:disabled):not(.disabled):focus, .VR button.Submit:not(:disabled):not(.disabled):focus, .VR button.Primary:not(:disabled):not(.disabled):focus, .VR .Button.Submit:not(.disabled):hover, .VR .Button.Primary:not(.disabled):hover, .VR .Button.Submit:not(.disabled):focus, .VR .Button.Primary:not(.disabled):focus { } .VR button[type=submit]:disabled, .VR button[type=submit].disabled, .VR button.Submit:disabled, .VR button.Submit.disabled, .VR button.Primary:disabled, .VR button.Primary.disabled, .VR .Button.Submit.disabled, .VR .Button.Primary.disabled { border-style: dashed; cursor: default; } /* BUTTON GROUPS */ /* ============= */ .VR form .ButtonArea { margin-top: 2.0rem; } .VR form .ButtonArea .ButtonGroup { margin-top: 1.0rem; } /* =============================== WIDGETS ================================ */ /* ------------------------------------------------------------------------ */ /* DATA TABLES */ /* =========== */ .VR .DataTable { border-width: 1px; border-style: solid; border-spacing: 0; } .VR .DataTable thead th, .VR .DataTable thead td { padding: 0.25rem 0.5rem; height: 2.5em; font-size: 0.85em; font-weight: bold; font-variant: small-caps; box-sizing: border-box; } .VR .DataTable thead tr:last-child th, .VR .DataTable thead tr:last-child td { border-bottom-width: 1px; border-bottom-style: solid; } .VR .DataTable thead th:first-child, .VR .DataTable thead td:first-child { text-align: left; } .VR .DataTable thead th:not(:first-child), .VR .DataTable thead td:not(:first-child) { border-left-width: 2px; border-left-style: solid; text-align: right; } .VR .DataTable tbody th { font-size: inherit; font-weight: normal; text-align: left; } .VR .DataTable tbody th, .VR .DataTable tbody td { padding: 0.5rem 0.5rem; } .VR .DataTable tbody tr:not(.Important) th, .VR .DataTable tbody tr:not(.Important) td { font-size: 0.8em; } .VR .DataTable tbody th:not(:first-child), .VR .DataTable tbody td:not(:first-child) { border-left-width: 2px; border-left-style: solid; text-align: right; } .VR .DataTable tbody tr.Important { } .VR .DataTable tbody tr:not(.Important):nth-child(even) { } .VR .DataTable tbody tr.Important th, .VR .DataTable tbody tr.Important td { padding-top: 0.65rem; padding-bottom: 0.65rem; font-size: 0.9em; font-weight: bold; } .VR .DataTable tbody:last-child tr:last-child th, .VR .DataTable tbody:last-child tr:last-child td { border-bottom-width: 1px; border-bottom-style: solid; } .VR .DataTable tfoot th, .VR .DataTable tfoot td { padding: 0.25rem 0.5rem; height: 2.5em; font-size: 0.85em; font-weight: bold; font-variant: small-caps; box-sizing: border-box; } .VR .DataTable tfoot tr:first-child th, .VR .DataTable tfoot :first-child td { border-top-width: 1px; border-top-style: solid; } .VR .DataTable tfoot th:first-child, .VR .DataTable tfoot td:first-child { text-align: left; } .VR .DataTable tfoot th:not(:first-child), .VR .DataTable tfoot td:not(:first-child) { border-left-width: 2px; border-left-style: solid; text-align: right; } /* DATA LISTINGS */ /* ============= */ .VR .DataListing { } .VR .DataListing .DataGroup { margin-top: 0.35em; } .VR .DataListing > .DataGroup:first-child { margin-top: 0; } .VR .DataListing .DataGroup .DataGroup { margin-left: 0.5em; } .VR .DataListing .DataGroup .DataGroup .DataGroup { margin-left: 1.0em; } .VR .DataListing .Heading { margin: 0.125em 0; padding: 0.5em 0.65em; border-bottom: none; font-size: 1.5em; font-weight: normal; transition-property: background-color; transition-duration: 350ms; } .VR .DataListing .DataGroup .DataGroup .Heading { font-size: 1.25em; } .VR .DataListing .DataGroup .DataGroup .DataGroup .Heading { font-size: 1.125em; } .VR .DataListing .Heading .Title { margin-left: 0.125ex; } .VR .DataListing .Heading .Title.Category .Label { margin-right: 0.75ex; font-variant: small-caps; } .VR .DataListing .Heading .Title.Category .Label:after { content: ':'; } .VR .DataListing .Heading .Title.Monolithic { font-variant: small-caps; } .VR .DataListing .DataPoints { margin: 0.5em 0 1.0em 2.25em; padding: 0; } .VR .DataListing ul { list-style-type: square; } .VR .DataListing .DataGroup .DataGroup .DataPoints { margin-left: 2.0em; } .VR .DataListing .DataGroup .DataGroup .DataGroup .DataPoints { margin-left: 1.9em; } .VR .DataListing li { margin-top: 0.5em; } .VR .DataListing .DataPoints .Label { margin-right: 0.5ex; } .VR .DataListing .DataPoints .Label:after { content: ':'; } .VR .DataListing .DataPoints .Value { } /* STATUS INDICATORS */ /* ================= */ .VR .StatusIndicator .Bubble { display: inline-block; width: 1.125em; height: 1.125em; border-radius: 10em; background: #AAAAAA; box-shadow: inset 1px 2px 4px rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2); font-size: 0.8em; color: transparent; text-align: center; text-indent: 0; line-height: 1; vertical-align: top; box-sizing: padding-box; } .VR .StatusIndicator .Bubble.Green { } .VR .StatusIndicator .Bubble.Orange { } .VR .StatusIndicator .Bubble.Red { } .VR .StatusIndicator .Bubble .Symbol { display: none; } @media print { .VR .StatusIndicator .Bubble { border: 0.5mm solid black; color: black; } .VR .StatusIndicator .Bubble .Symbol { display: inline; } } /* PROGRESSIONS */ /* ============ */ .VR .Progression { } .VR .Progression > .ProcessName { } .VR .Progression .ProgressGraphic { display: flex; width: calc(100% - 0.9em); } .VR .Progression .ProgressGraphic.Has-1 { width: calc(25% - 0.9em); } .VR .Progression .ProgressGraphic.Has-2 { width: calc(50% - 0.9em); } .VR .Progression .ProgressGraphic.Has-3 { width: calc(75% - 0.9em); } /* Stage containers */ .VR .Progression .ProgressGraphic .Stage { position: relative; height: 4.25em; cursor: default; } .VR .Progression .ProgressGraphic.Has-2 .Stage { flex-basis: 25%; } .VR .Progression .ProgressGraphic.Has-3 .Stage { flex-basis: 25%; } .VR .Progression .ProgressGraphic.Has-4 .Stage { flex-basis: 25%; } .VR .Progression .ProgressGraphic.Has-5 .Stage { flex-basis: 20%; } .VR .Progression .ProgressGraphic .Stage.Current { z-index: 100; } .VR .Progression .ProgressGraphic .Stage.Passed, .VR .Progression .ProgressGraphic .Stage.Current { cursor: pointer; } /* Progress arrows */ .VR .Progression .ProgressGraphic .ProgressArrowContainer { position: absolute; top: 0; left: 0; width: 115%; height: 100%; z-index: 10; } .VR .Progression .ProgressGraphic .ProgressArrow { } .VR .Progression .ProgressGraphic .ProgressArrow.FlatEdge { display: none; } .VR .Progression .ProgressGraphic .ProgressArrow.Indented { display: block; } .VR .Progression .ProgressGraphic .ProgressArrow .InnerEffect { opacity: 0; } .VR .Progression .ProgressGraphic .Stage:first-child .ProgressArrow.FlatEdge { display: block; } .VR .Progression .ProgressGraphic .Stage:first-child .ProgressArrow.Indented { display: none; } .VR .Progression .ProgressGraphic .ProgressArrow .Outer { filter: url(#cerulean19ArrowBlackGlow); } .VR .Progression .ProgressGraphic .ProgressArrow .Outer { fill: url(#cerulean19ArrowDefaultGradient); } .VR .Progression .ProgressGraphic .ProgressArrow .Inner { fill: none; } .VR .Progression .ProgressGraphic .Stage.Passed .ProgressArrow .Outer { fill: url(#cerulean19ArrowPassedGradient); } .VR .Progression .ProgressGraphic .Stage.Passed .ProgressArrow .Inner { fill: none; } .VR .Progression .ProgressGraphic .Stage.Current .ProgressArrow { position: relative; top: -5%; width: 100%; height: 110%; } .VR .Progression .ProgressGraphic .Stage.Current .ProgressArrow .Outer { stroke: black; stroke-width: 0.5mm; stroke-opacity: 0.25; } .VR .Progression .ProgressGraphic .Stage.Passed:hover .ProgressArrow .Outer, .VR .Progression .ProgressGraphic .Stage.Passed.active .ProgressArrow .Outer { fill: url(#cerulean19ArrowPartiallyActiveGradient); } .VR .Progression .ProgressGraphic .Stage.Passed:hover .ProgressArrow .Inner, .VR .Progression .ProgressGraphic .Stage.Passed.active .ProgressArrow .Inner { } .VR .Progression .ProgressGraphic .Stage.Current .ProgressArrow .Outer { fill: white; filter: url(#cerulean19ArrowBlackGlow); } .VR .Progression .ProgressGraphic .Stage.Current .ProgressArrow .Inner { fill: url(#cerulean19ArrowCurrentGradient); } .VR .Progression .ProgressGraphic .Stage.Current.Problem .ProgressArrow .Outer { fill: white; filter: url(#cerulean19ArrowBlackGlow); } .VR .Progression .ProgressGraphic .Stage.Current.Problem .ProgressArrow .Inner { fill: url(#cerulean19ArrowProblemGradient); } @media print { .VR .Progression .ProgressGraphic .ProgressArrow .Outer { stroke: black; stroke-width: 1.0mm !important; stroke-opacity: 0.75 !important; } } /* Stage labels & titles */ .VR .Progression .ProgressGraphic .InsetContainer { margin: 10% 10% 0 30%; height: 70%; } .VR .Progression .ProgressGraphic .InsetAlignment { position: absolute; top: 0; right: 12.5%; display: flex; flex-direction: column; justify-content: center; height: 100%; z-index: 100; } .VR .Progression .ProgressGraphic .InsetLabel { font-weight: bold; font-size: 2.5em; text-align: right; text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.08); } .VR .Progression .ProgressGraphic .Stage .Title { position: absolute; top: 115%; left: 0; width: 100%; font-weight: bold; text-align: center; text-transform: uppercase; } /* Progress detail items */ .VR .Progression .ProgressDetailItems { margin-top: 4.125em; } .VR .Progression .ProgressDetailItem { display: none; position: relative; } .VR .Progression .ProgressDetailItem.active { display: block; } .VR .Progression .ProgressDetailItem > .Heading .StatusIndicator { position: relative; top: 0.125em; } .VR .Progression .ProgressDetailItem > .Heading .Text { font-weight: bold; } .VR .Progression .ProgressDetailItem > .Body { margin-top: 0.75em; margin-bottom: 1.5em; } /* DIALOG */ /* ====== */ .VR #ModalDialog { display: none; } .VR #ModalDialog.active { display: block; } .VR #ModalDialog .TargetArea { } .VR #ModalDialog.anchored .TargetArea { position: absolute; z-index: 1000; } .VR #ModalDialog.centered .TargetArea { display: flex; flex-direction: column; align-items: center; /*justify-content: center;*/ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; } .VR #ModalDialog .Box { display: flex; position: relative; padding: 1.25rem; border-width: 2px; border-style: solid; border-radius: 1.0rem; box-shadow: 0 0 2px rgba(214, 239, 253, 0.75); z-index: 1000; } .VR #ModalDialog.centered .Box { top: 10vh; width: 45%; min-width: 40ex; max-width: 65ex; min-height: 125px; box-sizing: content-box; } .VR #ModalDialog.anchored .Box { width: 100%; min-height: 100%; box-sizing: border-box; } .VR #ModalDialog .IconArea { flex-basis: 4.0rem; padding: 1.25rem 0.75rem 0 0.75rem; min-width: 4.0rem; /* IE 11 */ text-align: center; } .VR #ModalDialog .Icon { position: relative; right: 0.55rem; cursor: default; } .VR #ModalDialog .Icon .StandardGraphic { display: inline-block; width: 1.125em; height: 1.125em; border-width: 3px; border-style: solid; border-radius: 10em; box-shadow: inset 0 0 0.32em rgba(0, 0, 0, 0.25); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 3.0rem; font-weight: bold; text-align: center; line-height: 1; box-sizing: border-box; } .VR #ModalDialog .Icon .CustomImage img { max-width: 8.0rem; } .VR #ModalDialog .MessageArea { flex-grow: 1; padding-top: 0.75em; } .VR #ModalDialog .Message { } .VR #ModalDialog .Message a { font-weight: bold; } .VR #ModalDialog.active .Veil { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.55); z-index: 999; } @media screen and (max-width: 759px) { .VR #ModalDialog .Box { padding: 0.25rem; } .VR #ModalDialog .IconArea { flex-basis: 3.0rem; } .VR #ModalDialog .Icon { right: 0; } .VR #ModalDialog .Icon .CustomImage img { max-width: 5.0rem; } } .VR #ModalMessages { display: none; } /* TOOLTIPS */ /* ======== */ .VR .Tooltip { position: relative; bottom: 0.25rem; } @media print { .VR .Tooltip { display: none; } } .VR .Tooltip .Icon { display: inline-block; position: relative; width: 1.25em; height: 1.25em; border-radius: 10em; font-family: serif; font-size: 0.5em; font-style: italic; font-weight: bold; text-align: center; line-height: 1.25; vertical-align: middle; cursor: default; opacity: 0.75; z-index: 1; transition-property: opacity; transition-delay: 250ms; transition-duration: 250ms; } .VR .Tooltip.active .Icon, .VR.noJS .Tooltip:hover .Icon { opacity: 1; } .VR .Tooltip .Text { visibility: hidden; position: absolute; top: 0.25em; left: 0.5em; padding: 0.5em 0.75em; width: 1ex; height: 1ex; border-width: 2px; border-style: solid; border-radius: 0.5em; font-size: 1.0rem; font-weight: normal; line-height: 1.25; cursor: default; opacity: 0; z-index: 10; transition-property: opacity; transition-duration: 300ms; } .VR .Tooltip.active .Text, .VR.noJS .Tooltip:hover .Text { visibility: visible; width: 32ex; height: auto; opacity: 1; transition-property: opacity; transition-duration: 600ms; } .VR .Tooltip.toLeft .Text { left: auto; right: 0.5em; } .VR .Tooltip .Hitbox { display: block; position: absolute; top: -0.125em; left: -0.25em; width: 1.25em; height: 1.5em; z-index: 5; } /* COLLAPSIBLE */ /* =========== */ .VR .Collapsible { } .VR:not(.noJS) .Collapsible .CollapsibleToggleArea { cursor: pointer; user-select: none; -moz-user-select: none; } .VR .Collapsible .CollapsibleIndicator { display: inline-block; position: relative; bottom: 0.125em; width: 1.125em; height: 1.125em; font-size: 0.75em; text-align: center; line-height: 1; vertical-align: middle; } .VR .Collapsible:not(.collapsed) .CollapsibleIndicator.Expand { display: none; } .VR .Collapsible:not(.collapsed) .Collapsible.collapsed .CollapsibleIndicator.Expand { display: inline-block; } .VR .Collapsible.collapsed .CollapsibleIndicator.Collapse { display: none; } @media print { .VR .Collapsible:not(.collapsed) .CollapsibleIndicator { display: none; } .VR .Collapsible.collapsed .CollapsibleIndicator { border: 0.5mm solid black; } } .VR .Collapsible.collapsed .CollapsibleToggleArea ~ * { display: none; } /* If no JavaScript */ .VR.noJS .Collapsible .CollapsibleIndicator { display: none; } .VR.noJS .Collapsible.collapsed .CollapsibleToggleArea ~ * { display: block; } /* SIMPLE NOTICE MESSAGES */ /* ====================== */ .VR .SimpleNoticeMessageBox { margin: 15vh auto 0 auto; padding: 0.5rem 1.5rem; width: 55vw; min-width: 400px; max-width: 800px; border-width: 3px; border-style: double; } .VR .SimpleNoticeMessageBox h1 { margin: 0.5rem -0.75rem 1rem -0.75rem; padding: 1.0rem 1.5rem; border-bottom: none; line-height: 1; } .VR .SimpleNoticeMessageBox p { margin: 0.75em 0; } /* NOSCRIPT MESSAGES */ /* ================= */ .VR .NoScriptMessage { margin: 2.0em 0.25em; padding: 0.75em 1.0em; border-radius: 1em; border-width: 2px; border-style: dotted; } .VR .NoScriptMessage .Text { } .VR .NoScriptMessage .Text p { margin: 0.5em 0; }