/*ver.4.220224*/ /* 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; } body { font-family:Verdana, Arial, Helvetica, sans-serif; margin: 0; padding:10px 0 0 0; text-align: center; font-size: 100%; /* 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 */ } #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; } #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: x-small; text-align: center; color: #7f8287; /*gray*/ } #resprivacy a:link { color: #0040FF /*blue*/ text-decoration: none; } #resprivacy a:hover { color: #0040FF; /*blue*/ text-decoration: underline; } 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; } /* .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; } .clear { clear:both; height:1px; overflow:hidden; } .centered { text-align:center; } #landscape { /* this is used for forcing landscape on mobile devices, programmer to apply */ display: none; /* DO NOT CHANGE - this is enabled by the program (via force_landscape.css or suggest_landscape.css) */ } #responses { display: block; } /* 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"]{ -webkit-appearance: none; border-radius: 5px; } /* 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; }*/ /* mrInterview */ .mrQuestionText { } .mrQuestionTable { BORDER-COLLAPSE: collapse } .mrQuestionTable input[type=radio], input[type=checkbox] { margin: auto; padding: auto; margin-left: auto; margin-right: auto; } @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; } */ } .mrGridQuestionText { } .mrGridCategoryText { } .mrBannerText { } .mrErrorText { } .mrSingle, .mrMultiple { } .mrSingleText, .mrMultipleText, .mrOtherText { } .mrEdit { } .mrDropdown { } .mrListBox { } .mrNext, .mrPrev, .mrFirst, .mrLast, .mrStop, .mrGoto { border-radius: 5px; /* rounded corners */ /* border: 1px solid gray; */ background-color: white; color: #646464; margin: 0 .5em; } .mrNext { background-color: white; /*Optional - style next button a different color*/ } .mrNext:hover, .mrPrev:hover, .mrFirst:hover, .mrLast:hover, .mrStop:hover, .mrGoto:hover { color: black; /* text color */ outline: none; /* hide dotted outline in Firefox */ } .mrGotoDropdown { } .mrOtherText { } .mrOtherEdit { } .mrProgressText { font-size: .65em; color: gray; } .instruct { background-color: transparent; font-style: italic; margin: 0px; padding: 0px; /*font-weight: bold; color: #009933;*/ } .chevron::before { 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); } table.center { margin-left:auto; margin-right:auto; } /* 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) */ /* MEDIA QUERIES (smallest to largest displays) */ /* [a] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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";} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [A6] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [A7] styles - 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";} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [A8] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [A9] styles - Smartphones (320) */ @media only screen and (min-device-width: 320px) and (-webkit-device-pixel-ratio: 3) { #debug-info:after { content: "A9";} } /* [B0] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [C2] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [D0] styles - 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] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [D2] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [X0] styles - 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] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [X2] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [E0] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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] styles - 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] styles - Phablets (737) anything between a large phone and a 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] styles - 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] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; } */ } /* [J2] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; }*/ } /* [J3] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox] { margin-left: 40%; margin-right: auto; } */ } /* [J4] styles - 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;} /* centers grid radio buttons (iOS) .mrQuestionTable input[type=radio], input[type=checkbox]{ margin-left: 40%; margin-right: auto; }*/ } /* [K0] styles - 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] styles - 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] styles - 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 { display: none; } #header2 { display: none; } #mainContent {min-height: 560px;} .prop {height:560px;} #bottom_logo { } }