/*ver.4.250404*/ /* more elegant solution than the metatag, not yet fully supported */ @viewport{ zoom: 1.0; width: extend-to-zoom; } /* this is needed for IE10 snap mode */ @-ms-viewport{width: device-width;} 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:Verdana, Arial, Helvetica, sans-serif; margin: 0; padding:10px 0 0 0; text-align: center; font-size: 100%; } #container { width:975px; margin: 0 auto; text-align: left; } /* this is used to display respondent info for cati-to-web and clinics */ #header0 { display: none; /*DO NOT CHANGE - only shown for cati or clinics*/ height: 1em; text-align:left; font-size:0.75em; padding: 2px 16px; } #header1 { display: none; background-repeat:no-repeat; background-size: contain; background-position: center; width: auto; height: 0; text-align:left; margin: 10px 0 0 0; } #header2 { display: none; background-repeat:no-repeat; background-size: contain; background-position: center; width: auto; height: 0; text-align:left; } #mrsurvey_top { width: auto; height: 0; } #mainContent { width: auto; min-height: 120px; min-height: 60%; padding:0; margin:0; } #mrsurvey { padding: 10px 10px 0 10px; margin-bottom:20px; } #mrsDisplayText{display: none;} /*hide DisplayText multi_modal_2022.mrs*/ #landscape {display: none;} #responses {display: block;} #top_logo { display: none; background-repeat:no-repeat; background-size: auto; } #NavBox { text-align: center; margin: 10px auto; padding: 10px 0; } #ProgressBar { display: none; width:150px; height:10px; margin: 2px auto; font-size:.5em; padding-top:0px; border: 1px solid gray; border-radius:5px; } #bottom_logo { display: none; width: auto; height: 0; } #mrsurvey_bottom { display: block; background-repeat:no-repeat; background-size: contain; background-position: center; width: auto; height: 0; } #footer { display: block; width: auto; height: auto; text-align: center; font-family: 'Droid Sans', Arial, Verdana, sans-serif; background-color: transparent; border: 1px solid gray; border-style: none; padding-top: .5em; font-size: .75em; } #footer p { margin: 0; padding: 0 40px 7px 40px; font-size: .625em; /*x-small*/ } #footer a:link { color: #0000EE; /*deep blue*/ text-decoration: none; } #footer a:hover { color: #0040FF; /*blue*/ text-decoration: underline; } #footer a:visited { color: #551A8B; /*purple*/ text-decoration: none; } #resprivacy { font-family: Arial, Helvetica, sans-serif; font-size: .75em; text-align: center; color: #7f8287; /*gray*/ } #resprivacy a:link { color: #0040FF; /*blue*/ text-decoration: none; } #resprivacy a:hover { color: #0040FF; /*blue*/ text-decoration: underline; } /* this is used for css debugging - hidden by default */ #debug-info { display: none; /*display: table;*/ margin: 2em auto; font-size: .5em; } #debug-info:after { content: "0";} /* Default style = 0 (assumes Desktop) */ a:link { color: #003366; /*dark blue*/ text-decoration: none; } a:visited { color: #003366; /*dark blue*/ text-decoration: none; } a:hover { color: #003366; /*dark blue*/ text-decoration: underline; } a:active { color: #003366; /*dark blue*/ text-decoration: none; } /* 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; margin-left: 1.25em;} 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; } .centered {text-align:center;} .chevron::before { border-color: gray; border-style: solid; border-width: 0.25em 0.25em 0 0; content: ''; display: inline-block; height: 0.45em; left: 0.15em; position: relative; top: 0.15em; transform: rotate(-45deg); vertical-align: top; width: 0.45em; } .chevron.right:before { left: 0; transform: rotate(45deg); } .chevron.down:before { top: 0; transform: rotate(135deg); } .chevron.left:before { left: 0.25em; transform: rotate(-135deg); } .clear { clear:both; height:1px; overflow:hidden; } /* fix content to top */ .fixed { display: block; position: sticky; top: 0; width: inherit; background-color: #fff; /* 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; } /* hide tap mic icon hint for all devices, this gets shown from program */ .tapmic.hint {display: none;} .instruct { background-color: transparent; font-style: italic; margin: 0px; padding: 0px; } /* 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; margin: 0 .5em; max-width: 150px; } /*Optional - style next button a different color*/ .mrNext {background-color: white;} .mrNext:hover, .mrPrev:hover, .mrFirst:hover, .mrLast:hover, .mrStop:hover, .mrGoto:hover { color: black; /* text color */ 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; }*/ /* drop the other specify box to next line (for smaller devices only) */ @media only screen and (max-device-width: 737px) { .mrOtherEdit { display: block; margin: 0.25rem 2rem; width: 11em; 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;} .onerem {font-size: 1rem;} /* .prop is what makes the height stay at a minimum height for the content area */ .prop { height:560px; float:right; width:1px; background: none; } /* .propHeader is what makes the height stay at a minimum height for the header */ .propHeader { height:15px; float:right; width:1px; } /* MEDIA QUERIES (smallest to largest displays) */ /* [a] SMALL DEVICES UNDER 320px */ @media only screen and (max-device-width: 319px) { #debug-info:after { content: "a";} #container {width:300px;} #header1 {display: none;} #header2 {display: none;} .mrNext, .mrPrev, .mrFirst, .mrLast, .mrStop, .mrGoto {margin: 0 1em;} .prop {height:200px;} } /* [A0] Smartphones (320) */ @media only screen and (orientation: portrait) and (min-device-width: 320px) { #debug-info:after { content: "A0";} @viewport{width: 320px;} @-ms-viewport{width: 320px;} /* https://msdn.microsoft.com/en-us/library/hh869615%28v=vs.85%29.aspx */ #container {width:300px;} .prop {height:400px;} } /* [A1] Smartphones (320) */ @media only screen and (orientation: landscape) and (min-device-width: 320px) and (min-device-height: 480px) { #debug-info:after { content: "A1";} @viewport{width: 480px;} @-ms-viewport{width: 480px;} #container {width:460px;} .prop {height:220px;} } /* [A2] Smartphones (320) */ @media only screen and (orientation: landscape) and (min-device-width: 320px) and (min-device-height: 568px) { #debug-info:after { content: "A2";} @viewport{width: 568px;} @-ms-viewport{width: 568px;} #container {width:548px;} } /* [A3] Smartphones (320) */ @media only screen and (orientation: landscape) and (min-device-width: 320px) and (min-device-height: 640px) { #debug-info:after { content: "A3";} @viewport{width: 640px;} @-ms-viewport{width: 640px;} #container {width:620px;} } /* [A4] Smartphones (320) */ @media only screen and (orientation: portrait) and (min-device-width: 320px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "A4";} @viewport{width: 320px;} @-ms-viewport{width: 320px;} #container {width:300px;} .prop {height:280px;} } /* [A5] Smartphones (320x480) includes iPhone 2G, 3G, 4, 4s and iPod Touch generations 1-4 */ @media only screen and (orientation: portrait) and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "A5";} } /* [A6] Smartphones (320x480) includes iPhone 2G, 3G, 4, 4s and iPod Touch generations 1-4 */ @media only screen and (orientation: landscape) and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "A6";} @viewport{width: 480px;} #container {width:460px;} } /* [A7] Smartphones (320x568) includes iPhone 5, 5s */ @media only screen and (orientation: portrait) and (device-width: 320px) and (device-height: 568px) { #debug-info:after { content: "A7";} } /* [A8] Smartphones (320x568) includes iPhone 5, 5s */ @media only screen and (orientation: landscape) and (device-width: 320px) and (device-height: 568px) { #debug-info:after { content: "A8";} @viewport{width: 568px;} #container {width:548px;} .prop {height:300px;} } /* [A9] Smartphones (320) */ @media only screen and (min-device-width: 320px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "A9";} } /* [B0] Smartphones (360) */ @media only screen and (orientation: portrait) and (min-device-width: 360px) { #debug-info:after { content: "B0";} @viewport{width: 360px;} @-ms-viewport{width: 360px;} #container {width:340px;} .prop {height:400px;} } /* [B1] Smartphones (360) */ @media only screen and (orientation: portrait) and (min-device-width: 360px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "B1";} } /* [B2] Smartphones (360) */ @media only screen and (orientation: portrait) and (min-device-width: 360px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "B2";} } /* [C0] Smartphones (375) */ @media only screen and (orientation: portrait) and (min-device-width: 375px) { #debug-info:after { content: "C0";} @viewport{width: 375px;} @-ms-viewport{width: 375px;} #container {width:355px;} .prop {height:430px;} } /* [C1] Smartphones (375x667) includes iPhone 6 */ @media only screen and (orientation: portrait) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "C1";} @viewport{width: 375px;} } /* [C2] Smartphones (375x667) includes iPhone 6 */ @media only screen and (orientation : landscape) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "C2";} @viewport{width: 667px;} #container {width:647px;} .prop {height:280px;} } /* [D0] Smartphones (414) */ @media only screen and (orientation: portrait) and (min-device-width: 414px) { #debug-info:after { content: "D0";} @viewport{width: 414px;} @-ms-viewport{width: 414px;} #container {width:400px;} .prop {height:400px;} } /* [D1] Smartphones (414x736) includes iPhone 6+ */ @media only screen and (orientation: portrait) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "D1";} #container {width:400px;} .prop {height:550px;} } /* [D2] Smartphones (414x736) includes iPhone 6+ */ @media only screen and (orientation: landscape) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "D3i6+L";} @viewport{width: 736px;} #container {width:716px;} .prop {height:300px;} } /* [X0] Smartphones (375) iPhone X*/ @media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) { #debug-info:after { content: "x0";} @viewport{width: 375px;} @-ms-viewport{width: 375px;} #container {width:355px;} .prop {height:430px;} } /* [X1] Smartphones (375x812) includes iPhone X */ @media only screen and (orientation: portrait) and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "x1";} @viewport{width: 375px;} } /* [X2] Smartphones (375x812) includes iPhone X */ @media only screen and (orientation : landscape) and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "x2";} @viewport{width: 812px;} #container {width:792px;} .prop {height:280px;} } /* [E0] Smartphones (480) */ @media only screen and (orientation: landscape) and (min-device-width: 480px) { #debug-info:after { content: "E0";} @viewport{width: 480px;} @-ms-viewport{width: 480px;} #container {width:460px;} .prop {height:260px;} } /* [F0] Smartphones (568) */ @media only screen and (orientation: landscape) and (min-device-width: 568px) { #debug-info:after { content: "F0";} @viewport{width: 568px;} @-ms-viewport{width: 568px;} #container {width:548px;} .prop {height:300px;} } /* [G0] Smartphones (640) */ @media only screen and (orientation: landscape) and (min-device-width: 640px) { #debug-info:after { content: "G0";} @viewport{width: 640px;} @-ms-viewport{width: 640px;} #container {width:620px;} .prop {height:300px;} } /* [G1] Smartphones (640) */ @media only screen and (orientation: landscape) and (min-device-width: 640px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "G1";} } /* [H0] Smartphones (720) */ @media only screen and (orientation: landscape) and (min-device-width: 720px) { #debug-info:after { content: "H0";} @viewport{width: 720px;} @-ms-viewport{width: 720px;} #container {width:720px;} .prop {height:300px;} } /* [H1] Smartphones (720) Samsung S3 (360x640) */ @media only screen and (orientation: portrait) and (min-device-width: 720px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "H1";} @viewport{width: 360px;} @-ms-viewport{width: 360px;} #container {width:340px;} .prop {height:400px;} } /* [H2] Smartphones (720) Samsung S3 (360x640) */ @media only screen and (orientation: landscape) and (min-device-width: 720px) and (-webkit-device-pixel-ratio: 2) { #debug-info:after { content: "H2";} @viewport{width: 640px;} @-ms-viewport{width: 640px;} #container {width:620px;} .prop {height:280px;} } /* [I0] Phablets (737) large phone/small tablet (portrait or landscape)*/ @media only screen and (min-device-width: 737px) { #debug-info:after { content: "I0";} @viewport{width: 737px;} @-ms-viewport{width: 737px;} #container {width:727px;} .prop {height:560px;} } /* [J0] Tablets (768) */ @media only screen and (min-device-width: 768px) { #debug-info:after { content: "J0";} @viewport{width: 768px;} @-ms-viewport{width: 768px;} #container {width:748px;} } /* [J1] Tablets (768x1024) includes iPads 1-5 and iPad mini */ @media only screen and (orientation: portrait) and (device-width: 768px) and (device-height: 1024px) { #debug-info:after { content: "J1";} @viewport{width: 768px;} #container { width:748px; min-height: 960px; } .prop {height:760px;} } /* [J2] Tablets (768x1024) includes iPad Retina (iPads 3 and 4) */ @media only screen and (orientation: portrait) and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) { #debug-info:after { content: "J2";} @viewport{width: 768px;} #container {width:748px;} .prop {height:760px;} } /* [J3] Tablets (768x1024) includes iPads 1-5 and iPad mini */ @media only screen and (orientation: landscape) and (device-width: 768px) and (device-height: 1024px) { #debug-info:after { content: "J3";} @viewport{width: 1024px;} #container { width:960px; min-height: 748px; } .prop {height:520px;} } /* [J4] Tablets (768x1024) includes iPad Retina (iPads 3 and 4) */ @media only screen and (orientation: landscape) and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) { #debug-info:after { content: "J4";} @viewport{width: 1024px;} #container { width:960px; background-size: contain; } .prop {height:520px;} } /* [K0] Tablets (800) */ @media only screen and (min-device-width: 800px) { #debug-info:after { content: "K0";} @-ms-viewport{width: 800px;} #container {width:780px;} .prop {height:560px; } } /* [K1] Tablets (800) Samsung Galaxy */ @media only screen and (orientation: portrait) and (device-width: 800px) and (device-height: 1280px) { #debug-info:after { content: "K1";} @viewport{width: 800px;} @-ms-viewport{width: 800px;} .prop {height:960px;} } /* [L0] Tablets/Desktops (980) */ @media only screen and (min-device-width: 980px) { #debug-info:after { content: "L0";} @viewport { zoom: 1.0; width: extend-to-zoom; } @-ms-viewport {width: device-width;} #container {width:975px;} #header1, #header2, #mrsurvey_top, #footer {width: auto;} #header1, #header2 {display: none;} #mainContent {min-height: 560px;} .prop {height:560px;} }