/* ver.5.260000.260527 */ @viewport{zoom: 1.0; width: extend-to-zoom;} @-ms-viewport{width: device-width;} /* this is needed for IE10 snap mode */ html { -webkit-text-size-adjust: 100%; /*Prevent font scaling (iPhone) in landscape while allowing user zoom*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*https://css-tricks.com/box-sizing/*/ overflow: auto; } /* this uses a Combination of Percent and Em. The solution that works in all browsers, is to set a default font-size in percent for the element, and then adjust other elements font size with em */ body { font-family: Arial, sans-serif, Verdana, Helvetica; font-size: 100%; margin: 0; padding: 0; text-align: center; } #container { width: 100%; margin: 0 auto; text-align: left; } .content { min-height: fit-content; min-width: 300px; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0; } .progressbar { background-color: #CCC; border: none; border-radius: 0; height: 12px; margin: 0; width: 100%; } .progressbar:hover {background-color: #028090;} .progressbar table {border-collapse: collapse; border-spacing: 0; margin: 0;} .progressbar table td {text-align: center; padding:0;} header, main, footer { width: 100%; min-height: 32px; } header, footer { background-repeat: no-repeat; background-size: cover; background-position: center; } header { display: block; background-color: #002855; color: white; } .header-section { display: flex; /* make each section flexible */ align-items: center; } header .content { display: flex; align-items: center; position: relative; justify-content: flex-start; /*padding-inline: 1em; /*260408*/ margin: 0 auto; text-align: center; width: 100%; gap: 1em; } .taglines { display: flex; flex-direction: column; /*260045*/ /* position: absolute; left: 50%; transform: translateX(-50%); */ align-items: center; text-align: center; pointer-events: none; /* optional: prevents overlap issues */ width: max-content; max-width: 90%; /* let it expand naturally but not infinitely */ } .taglines > * { margin:.25rem; } .taglines h1 {font-size: 1.8rem;} .taglines h2 {font-size: 1.2rem;} header .content .inner1, header .content .inner3 { background-repeat: no-repeat; background-size: contain; background-position: center; padding-top: .5em; padding-bottom: .5em; /* padding-top: 8%; */ } /* adjust logos and menu to not stretch */ header .content .inner0, header .content .inner1, header .content .inner3 { flex: 0 0 auto; } main { display:block; padding-bottom: 50px; } main .progressbar { display:none; width: 100%; background-color: yellowgreen; margin: 0 auto; } main .content { max-width: min(95%, 1100px); border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); box-sizing: border-box; margin: 1em auto 0; min-height: 60%; padding: 1rem; width: auto; } footer {padding-bottom: 50px;} footer .content {font-size: .75em;} /* WHERE I LEFT OFF ==================================================== */ a:link { color: #0000EE; /*deep blue*/ text-decoration: none; } a:hover { color: #0040FF; /*blue*/ text-decoration: underline; } a:visited, a:active { color: #003366; /*dark blue*/ text-decoration: none; } /* drop the other specify box to next line (by input name) */ input[name='_QCountry_OOth'] { display: block; margin: 0.25rem 2rem; width: 15em; height: 1.2em; } /* radio button size */ input[type=radio], input[type=checkbox] { height: 1em; width: 1em; } /*prevent iOS from styling input fields and buttons */ input[type="button"],input[type="submit"]{ appearance: none; -webkit-appearance: none; border-radius: 5px; } /* disable numeric input spinner control */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="submit"]{width: auto !important;} /*expand to max width*/ /* adds space for codes */ input[id$="_X0"] {margin-top: 16px !important; margin-left: 1.25em !important;} label[for$="_X0"] > .mrMultipleText {vertical-align:middle !important; padding-left: 0.25em;} /* prevent iOS from styling input fields and buttons (other options) textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; }*/ table.center { margin-left:auto; margin-right:auto; } /* override other styles to make videos responsive */ video { width: 100% !important; height: auto !important; } @media (min-width: 1024px) { /* Applies only for desktops, used for videos that are natively portrait */ .vidportrait { width: auto !important; height: 90% !important; } } /* misc classes ------------------------------------------------ */ .center, .centered {text-align:center;} .fixed { display: block; position: sticky; top: 0; width: inherit; background-color: white; /* Adjust as needed */ z-index: 1000; /* Ensure it's above other content */ padding: 10px; /* Adjust padding as needed */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */ } .hint { display: none; color: dimgray; font-size: .75em; font-style: italic; text-align: center; } .instruct { background-color: transparent; font-style: italic; margin: 0px; padding: 0px; } .onerem {font-size: 1rem;} .tapmic.hint {display: none;} /* MRINTERVIEW ------------------------------------------------ */ /*.mrBannerText {} */ .mrDropdown {font-size: 1em !important;} .mrEdit { font-family:Verdana, Arial, Helvetica, sans-serif !important; font-size: 1em !important; background-color: white !important; } /* .mrErrorText {} .mrGotoDropdown {} .mrGridCategoryText {} .mrGridQuestionText {} .mrListBox {} */ .mrNext, .mrPrev, .mrFirst, .mrLast, .mrStop, .mrGoto { border-radius: 5px; border: 1px solid gray; background-color: white; color: #646464; cursor: pointer; margin: 0 .5em; min-width: 90px; max-width: 150px; } .mrNext:hover, .mrPrev:hover, .mrFirst:hover, .mrLast:hover, .mrStop:hover, .mrGoto:hover { color: black; outline: none; /* hide dotted outline in Firefox */ } /* drop the other specify box to next line (applies to all other specify boxes) .mrOtherEdit { display: block; margin: 0.25rem 2rem; width: 15em; height: 1.2em; }*/ /* .mrOtherText {} */ .mrProgressText { font-size: .65em; color: gray; } /* .mrQuestionText {} */ .mrQuestionTable {BORDER-COLLAPSE: collapse} .mrQuestionTable input[type=radio], input[type=checkbox] { margin: auto; padding: auto; margin-left: auto; margin-right: auto; } /* .mrSingle, .mrMultiple {} */ /* adds space between categories */ .mrSingleText, .mrMultipleText {padding-bottom: 0.25rem;} /* MEDIA QUERIES (smallest to largest displays) ---------------- */ #debug-info { display: none; margin: 1em auto; font-size: .5em; } #debug-info:after { content: "0";} /* Default style = 0 (assumes Desktop) */ @media only screen and (max-device-width: 737px) { @viewport{width: 100vw;} @-ms-viewport{width: 100vw;} .content {width: 100vw;} main .content { border-radius: 0; box-shadow: none; margin: 0 auto; } /* drop the other specify box to next line (for smaller devices only) */ .mrOtherEdit { display: block; margin: 0.25rem 2rem; max-width: 11em; height: 1.2em; } } /* small phone/watch */ /* @media only screen and (max-device-width: 319px) {#debug-info:after { content: "a";}} */ /* 320 phones */ /* @media only screen and (orientation: portrait) and (min-device-width: 320px) {#debug-info:after { content: "b";}} @media only screen and (orientation: landscape) and (min-device-width: 320px) {#debug-info:after { content: "bb";}} */ /* 360 */ /* @media only screen and (orientation: portrait) and (min-device-width: 360px) {#debug-info:after { content: "c";}} @media only screen and (orientation: landscape) and (min-device-width: 360px) {#debug-info:after { content: "cc";}} */ /* 375 */ /* @media only screen and (orientation: portrait) and (min-device-width: 375px) {#debug-info:after { content: "d";}} @media only screen and (orientation: landscape) and (min-device-width: 375px) {#debug-info:after { content: "dd";}} */ /* 414 */ /* @media only screen and (orientation: portrait) and (min-device-width: 414px) {#debug-info:after { content: "e";}} @media only screen and (orientation: landscape) and (min-device-width: 414px) {#debug-info:after { content: "ee";}} */ /* 480 */ /* @media only screen and (orientation: portrait) and (min-device-width: 480px) {#debug-info:after { content: "f";}} @media only screen and (orientation: landscape) and (min-device-width: 480px) {#debug-info:after { content: "ff";}} */ /* 568 */ /* @media only screen and (orientation: portrait) and (min-device-width: 568px) {#debug-info:after { content: "g";}} @media only screen and (orientation: landscape) and (min-device-width: 568px) {#debug-info:after { content: "gg";}} */ /* 640 */ /* @media only screen and (orientation: portrait) and (min-device-width: 640px) {#debug-info:after { content: "h";}} @media only screen and (orientation: landscape) and (min-device-width: 640px) {#debug-info:after { content: "hh";}} */ /* 720 */ /* @media only screen and (orientation: portrait) and (min-device-width: 720px) {#debug-info:after { content: "i";}} @media only screen and (orientation: landscape) and (min-device-width: 720px) {#debug-info:after { content: "ii";}} */ /* 737 phablets */ /* @media only screen and (orientation: portrait) and (min-device-width: 737px) {#debug-info:after { content: "j";}} @media only screen and (orientation: landscape) and (min-device-width: 737px) {#debug-info:after { content: "jj";}} */ /* 768 tablets */ /* @media only screen and (orientation: portrait) and (min-device-width: 768px) {#debug-info:after { content: "k";}} @media only screen and (orientation: landscape) and (min-device-width: 768px) {#debug-info:after { content: "kk";}} */ /* 800 */ /* @media only screen and (orientation: portrait) and (min-device-width: 800px) {#debug-info:after { content: "l";}} @media only screen and (orientation: landscape) and (min-device-width: 800px) {#debug-info:after { content: "ll";}} */ /* 980 large tablets/Desktops */ /* @media only screen and (min-device-width: 980px) { #debug-info:after { content: "x";} @viewport {zoom: 1.0; width: extend-to-zoom;} @-ms-viewport {width: device-width;} #container, #top-container-inner, #btm-container-inner {width: 975px;} } */