/*-- Responsive PageHeader Section --*/ /* show header */ @media (min-width: 721px) { #container_h { display: block } } /* hide header */ @media (max-width: 720px) { #container_h { display: none !important } } /*-- Responsive Left Menu Section --*/ /* show Left Menu */ @media (min-width: 401px) { #leftmenu { visibility: visible; display: block } } /* hide Left Menu */ @media (max-width: 680px) { #leftmenu, #imgMenu { visibility: hidden; display: none } } /* hide Vertical Bar */ @media (max-width: 800px) { #vbL { visibility: hidden; display: none } } /*-- Responsive Horizontal (top) Menu Section --*/ #divCC_hbar { margin: 8pt 0 7pt 0; display: table } #div_hbar_M1 { display:table-cell } #div_hbar_M2 { display:table-cell } .ALeftMenu { font-size: 19px !important } /*-- Misceleneous Styles --*/ /* Exception Handling Section */ .cssBlank { } .messageOK { color:Green; font-weight: bold; padding: 10pt 0 0 0pt; } .messageNOK { color: Brown; font-size:90%; font-weight: bold; border: solid 1px brown; background-color: AntiqueWhite; margin: 1pt 6pt 6pt 1pt; padding: 5pt 5pt 5pt 5pt; } .imgNOK_1 { vertical-align:middle; padding-right: 5pt; } .divErrMsg1 { padding-left: 18pt; } .divErrMsg2 { padding-left: 30pt; } /* _____________ */ #contentwrapper, #contentcolumn { width: 100% } td label { margin-bottom: 30px; font-size: 150% } /* size of radio */ .cssTD75 { width: 50%; height:50%; vertical-align:top } /**** === Panel 0 === ****/ #divPanel_0 { padding: 0 10pt 0 10pt; text-align: justify } #contentwrapper { margin-left: 10pt } /* !!! - Keep this placeholder setting just in case - it is needed only for wide VBars !!! */ /*#divCC { padding-left: 15pt !important }*/ #div123 { font-size: 85% !important; text-align: center } .sbHdrH3 { max-width: 85%; font-size: large; margin-left: auto; margin-right: auto; text-align: center } /* covers 0 - 800px ranges */ /*** Step #1 ***/ .Header2 { text-align: center; padding-bottom: 10pt } /*** Step #2 ***/ .flagBar1 { __width: 450px; margin: 25pt auto; text-align: center } .flagBar1 img { height: 25pt; width: 3.6em } .flagBar1_Text { font-weight: bold; font-size: 1.15em } .flagBar2 { display: none; margin-bottom: 10pt } .imgHdMsg { height: 45pt; width: 35pt } #imgFlag, #divTranslServices img { float: left; width: 40pt; height: 30pt !important; margin: 0 10pt 0 0 } #imgMapFlag { height: 50px !important; margin: 20px 10pt 0 0; vertical-align: middle } #trStateLng { margin-top: 20pt } .imgOverlay { width:20px; position:absolute; left:0; right:0; top:0; bottom:0 } .spanStatesList { color: Brown } .list2 { margin-top: 10pt; margin-bottom: 15pt; padding: 0; font-size: 120%; font-weight: bold; } #divTranslServices { white-space: normal; margin: 25pt 0 15pt 0 } /*** Step #3 ***/ #tdTraningStyle, #tdExamStyle { padding-top: 0.5em; vertical-align: top } #tdExtOpt { margin-left: -15pt; text-align: left } #tdExtOpt ul { margin-left: -20pt } .tdAsterRisk { text-align: right; vertical-align: top; color: Brown; font-size: 110%; font-weight: bold } .altCss1, .altCss2 { font-size: 85%; width: 100%; padding-right: 0; padding-left: 1.5em } .altCss1 { color: Navy } .altCss2 { color: Brown; font-style: italic } /*** Buttons ***/ .divBtnBox { text-align: center } /** Button general style settings **/ .btnRound, .btnQnA { border: 1px solid #6B4000; border-right-width: 2px; border-bottom-width: 2px; background-color: #FEB333; color: #03042E; padding: 5pt 16pt 5pt 16pt; margin: 5pt 10pt 5pt 0; font-weight: bold; -moz-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 20px; border-bottom-left-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; border-top-left-radius: 20px; } /** Button size settings **/ .btnRound, .btnQnA { width: auto; min-width: 150pt; height: auto; min-height: 50pt; font-size: 12pt; } /** Button cursor settings **/ .btnRound, .btnQnA { cursor: pointer } /* === Panels 1 and 2 === */ .cssProgressCounter { margin: 15pt auto 15pt } .divHdMsg, .cssAnswerTable, .cssAnswerText, .cssAImage, #divTestRetakePanel, .divTestResultsTitleH { width: 95% !important /* 92% */ } .divHdMsg { padding-left: 1.25em; padding-bottom: 1.65em } /** Q-n-A Section **/ .cssQuestionTable, .cssAnswerTable { border: solid 1px #384F74; background-color: AntiqueWhite; margin-left: 15pt } .cssQuestionTitle, .cssAnswerTitle { font-family: Arial; font-weight: bold; font-size: 125%; text-align: center; padding: 15pt 15pt } .cssQuestionText, .cssAnswerText { font-family: Arial; font-size: 14pt; padding: 0 10pt 0 10pt; } .divQImage, .divAnswerImage, .cssQImage, .cssAImage { margin-left: auto !important; margin-right: auto !important; text-align: center !important } .cssQImage, .cssAImage { width: auto !important; width: 100%; margin-top: 5px; } .tblAnswerBtns { display: inline-block; margin-top: 10pt } .tdQBox { text-align: center } .tdXR { text-align: justify; vertical-align:top; padding: 1.5em 10px 10px 5px; font-size: 1.15rem } .tdXL { width: 1px; padding-left: 7pt; } /*** === Panel 3 === ***/ #divPanel_3 { margin-left: 10pt } .graphTableL { float: left; margin-bottom: 10pt } .graphOuter { padding-top: 10pt; padding-bottom: 10pt; } /*** Test Score Results Fluid Columns Section ***/ .cssScoreSummaryContentWrapper { float: left; width: 100% } .cssScoreSummaryContentColumn { margin-right: 250px; } /* Set right margin to RightColumnWidth */ .cssScoreByCatRightColumn { float: left; width: 250px; /* Width of right column in pixels */ margin-left: -250px; /* Set left margin to -(RightColumnWidth) */ margin-top: 0pt; } .innertube_R, .innertube_1R { text-align: justify; margin: 0 10px 10px 10px } /* Inner DIV inside each column */ .innertube_1R { padding: 1pt 0 10pt 0; } .innertube_1R h2 { color: Brown } /*** Test Results Report Generic CSS ***/ .reportImg { width:100% } #divCatH { width: 100%; margin-left: 10pt; text-align: center } /** Reporting css used in QandAMaster.js **/ .red { color: Red } .brown, .brown115 { color: Brown } .green { color: Green } .small { font-size: small } .divTestResultsTitleH { text-align: center; font-weight: bold; font-size: 110%; color: Brown; padding-left: 16pt; } .divTestResultsTitle { white-space: nowrap; font-weight: bold; margin: 10px 5px 10px 5px; padding: 0; } .bckgr1 { background: #BFB1D0; } .bckgr2 { background: #E0D4FF; } .bckgr3 { background: #CEE381; } .tblTestResults { border: solid 1px #384F74; margin: 0px; padding: 0px; font-weight: bold; font-size: 85%; } .tblTestResults table td { margin: 2px 5px 2px 5px; padding: 2px 5px 2px 5px; } .trResults, .trResultsR, .trScore { border: solid 1px #384F74; text-align: left } .trResultsR { text-align: center; } .trScore { height: 40px; } .Header1 { font-weight: bold; color: Brown; padding-top: 1.5em; } .Header2 { font-weight: bold; color: Maroon; font-size: 115% } .tdTop1 { padding: 5pt 0 0 0; vertical-align: top;} .tblRetakeOptions { width: 100%; margin-left: 5pt } .spanRetakeOptionText { padding-bottom: 5pt } .tdCatList { min-width: 300px; text-align: left; font-weight: bold } #btnRetakeTest { margin-left: 35pt; min-width: 230px; } /* Responsive BreakPoints for Score Results Right Column */ @media (min-width: 851px) /* tablets thru desktop break point */ { .cssScoreSummaryContentWrapper { float: left; width: 100% } .cssScoreSummaryContentColumn { margin-right: 600px; } /* Set right margin to RightColumnWidth */ .cssScoreByCatRightColumn { float: left; width: 600px; /* Right Column Width */ margin-left: -600px; /* Set left margin to -(RightColumnWidth) */ margin-top: 0pt; } } @media (min-width: 721px) and (max-width: 850px) { .cssScoreSummaryContentWrapper { float: left; width: 100% } .cssScoreSummaryContentColumn { margin-right: 600px; } /* Set right margin to RightColumnWidth */ .cssScoreByCatRightColumn { float: left; width: 600px; /* Right Column Width */ margin-left: -600px; /* Set left margin to -(RightColumnWidth) */ margin-top: 0pt; } .innertube_1R { text-align: left; width: 80% !important; } .tdCatList { min-width: 270px } } @media (max-width: 720px) /* phones to low tablets break point */ { .cssScoreSummaryContentWrapper { float: none; } .cssScoreSummaryContentColumn { margin-right: 0; } .cssScoreByCatRightColumn { float: none; width: 600px; margin-left: 0 } /* Set width for RightColumnWidth */ .innertube_1R { text-align: left; margin-top: 15pt; width: 95%; } .tdCatList { min-width: 250px } } /* --- End of Test Results Report CSS --- */ /*-- Responsive fluid QnA Section --*/ /* shared styles from smartphones to high tablets */ @media (max-width: 1024px) { #adphT1 { margin: 10pt 0 10pt 15pt } #adphL2 a img { width: 300px; height: 200px } #divShareBtns { visibility: hidden; display: none } /* horizontal menu height and wrap adjustment for small screens */ #container_hbar { margin-left: 0 !important; padding-left: 200pt } #container_hbar { background-size: contain } #imgMenu { height: 70pt; margin-top: 5pt } #divCC_hbar { height: 55pt; display: inherit; margin-left: auto; margin-right: auto; text-align: center } #divCC_hbar a { font-size: 14pt } #div_hbar_M1 { display: inherit; margin-top: -8pt } #div_hbar_M2 { display: block; margin-top: 7pt } } @media (min-width: 1025px) { body { min-width: 740px } /* h_bar */ #divCC_hbar { margin-left: 15pt !important } #divCC { width: 75% } /* Panel 0 */ #contentwrapper { width: 98%; margin-left: 5pt } #div123, .sbHdrH3, .Header2 { text-align: left } .imgHdMsg { float: left; height: 20px; width: 30px; margin: 3pt 10pt 10pt 0 } .divBtnBox { text-align: center } #btnStartTest { margin-left: -35pt } /* Panels 1 and 2 */ #divPanel_1, divPanel_2 { min-width: 750px } .cssQuestionTable { width: 95% !important } .cssQuestionText { width: 95% !important } .cssQImage, .cssAImage { float: right; width: auto !important; min-width: 200px; max-width: 100% !important; padding-left: 15pt } .tdQBox { text-align: left } .divAnswerBtns { text-align: center } .btnQnA { max-width: 475px; min-height: 40pt; font-size: 15pt } /* Panel 3 - Test Results */ .divTestResultsTitleH { font-size: 16pt; text-align: left } #divCatH { text-align: left } .tblTestResults, .tdCatList { min-width: 350px } .graphTableL { margin-right: 20pt } .Header1, .spanRetakeOptionText, .altCss1, #PostTestChoices { width: 100% } .divTestResultsTitle, #PostTestChoices { padding-left: 10pt !important } .list1 { font-size: 100% } .altCss2 { font-weight: bold } #PostTestChoices { width: 100% } #spanRetake3optNote { width: 200px } #btnRetakeTest { margin-left: 15pt } } /* tablets to desktopes */ @media (min-width: 800px) and (max-width: 1024px) { body { min-width: 801px } /* h_bar */ #divCC_hbar { margin-left: -175pt !important } /* Panel 0 */ .divBtnBox { text-align: center } #btnStartTest { margin-left: -35pt } /* Panels 1 and 2 */ .imgHdMsg { float: left; height: 20px; width: 30px; margin: 3pt 10pt 10pt 0 } .cssQuestionTable { width: 95% !important } .cssQuestionText { width: 95% !important } .cssQImage, .cssAImage { float: right; width: 100%; min-width: 200px; max-width: 400px; padding-left: 15pt } .divAnswerBtns { text-align: center } .btnQnA { max-width: 475px; min-height: 40pt; font-size: 15pt } /* Panel 3 - Test Results */ .innertube_1R { margin-top: 0 } .divTestResultsTitleH { font-size: 16pt } #tblTestScoreSummaryPanel { width: 90% } #divCatH { text-align: left } .tblTestResults { min-width: 250px } .tdCatList { min-width: 325px } .tblRetakeOptions { margin-left: 20pt } .graphOuter { width: 70% /*90%*/ } .Header1, .spanRetakeOptionText, .altCss1, #PostTestChoices { width: 100% } .divTestResultsTitle, #PostTestChoices { padding-left: 10pt !important } .list1 { font-size: 100% } .altCss2 { font-weight: bold } #PostTestChoices { width: 100% } #spanRetake3optNote { width: 200px } #btnRetakeTest { margin-left: 15pt } } /* hight tablets */ @media (min-width: 700px) and (max-width: 799px) { body { min-width: 701px; max-width: 800px; width: auto !important } /* h_bar */ #container_hbar { margin-left: -12pt !important } #divCC_hbar { margin-left: -210pt } #divCC_hbar a { font-size: 14pt } /* Panel 0 */ .divBtnBox { text-align: center } /* taking care of centering buttons */ .btnRound { max-width: 45% } /* Panels 1 and 2 */ .spanPrgCntr1, .spanPrgCntr2 { white-space: nowrap; width: 90% } .spanPrgCntr3 { width: 90% } .imgHdMsg { float: left; height: 40px; width: 40px; margin: 3pt 10pt 0 0 } .cssQuestionTable { width: 90% !important } .cssQuestionText { width: 90% !important; font-size: 14pt !important } .tdXR { text-align: left } .cssQImage, .cssAImage { float: right; width: 85%; min-width: 200px; max-width: 300px; padding-left: 15pt } .divAnswerBtns { text-align: center } .btnQnA { max-width: 375px; min-height: 40pt; font-size: 15pt } /* Panel 3 - Test Results */ .tblTestResults { width: 95% } .Header1 { width: 100%; padding-left: 0; /*padding-top: 4pt*/ } .spanRetakeOptionText, .altCss1 { width: 100% } .divTestResultsTitle { white-space: normal; width: 90%; text-align: center } .divTestResultsTitle, #PostTestChoices { padding-left: 10pt } .divTestResultsTitle { margin-left: -10pt } #PostTestChoices { width: 95% } #btnRetakeTest { margin-left: 15pt } .tdTop1 td { padding-right: 0 } } /* phablets and low tablets section */ @media (min-width: 600px) and (max-width: 699px) { body { min-width: 600px; max-width: 699px; width: auto !important } /* h_bar */ #container_hbar { margin-left: -12pt !important } #divCC_hbar { margin-left: -210pt } #divCC_hbar a { font-size: 14pt } /* Panel 0 */ .divBtnBox { text-align: center } /* taking care of centering */ /* Panels 1 and 2 */ .spanPrgCntr1, .spanPrgCntr2 { white-space: nowrap; width: 90% } .spanPrgCntr3 { width: 90% } /*.divHdMsg { padding-left: 20px } */ .imgHdMsg { float: left; height: 40px; width: 40px; margin: 3pt 10pt 0 0 } .cssQuestionTable { width: 90% !important } .cssQuestionText, .cssAnswerText { width: 95% !important; font-size: 14pt !important } .cssQImage, .cssAImage { float: none; width: 100%; min-width: 200px; max-width: 100% } .divAnswerBtns { text-align: center; margin-top: 10pt; margin-left: auto !important; margin-right: auto !important } .btnQnA { max-width: 375px; min-height: 4rem; font-size: 15pt } /* Panel 3 - Test Results */ .innertube_1R { width: 90% } .Header1 { width: 100%; padding-left: 0; /*padding-top: 5pt*/ } .spanRetakeOptionText, .altCss1 { width: 100% } .divTestResultsTitle { white-space: normal; width: 50% } .divTestResultsTitle, #PostTestChoices { padding-left: 10pt } .divTestResultsTitle { width: 90%; margin-left: -10pt } .tdCatList { width: 92% } .graphOuter { width: 92% } #PostTestChoices { width: 95% } #btnRetakeTest { margin-left: 15pt } .tdTop1 td { padding-right: 0 } } /* high smartphones */ @media (min-width: 501px) and (max-width: 599px) { body { min-width: 500px } /* h_bar */ #container_hbar { margin-left: -12pt !important } #divCC_hbar { margin-left: -210pt } #divCC_hbar a { font-size: 14pt } /* Panel 0 */ .divBtnBox { text-align: center } /* taking care of centering */ /* Panels 1 and 2 */ .spanPrgCntr1, .spanPrgCntr2 { white-space: nowrap; width: 90% } .spanPrgCntr3 { width: 90% } .imgHdMsg { float: left; height: 60px; width: 40px; margin: 3pt 10pt 0 0 } .cssQuestionTable { width: 90% !important } .cssQuestionText { width: 90% !important; font-size: 14pt !important } .cssQImage, .cssAImage { float: none; width: 85%; min-width: 200px; max-width: 400px } .divAnswerBtns { text-align: center; margin-top: 10pt; margin-left: auto !important; margin-right: auto !important } .btnQnA { max-width: 375px; min-height: 4rem; font-size: 15pt } /* Panel 3 - Test Results */ .divTestResultsTitle { white-space: normal; width: 50% } .Header1 { width: 100%; padding-left: 0; /*padding-top: 5pt*/ } .spanRetakeOptionText, .altCss1 { width: 100% } .divTestResultsTitle { width: 90%; margin-left: -10pt } .divTestResultsTitle, #PostTestChoices { padding-left: 10pt } .tblTestResults, .tdCatList { width: 75% } .graphOuter { width: 80% } #PostTestChoices { width: 95% } #btnRetakeTest { margin-left: 15pt } .tdTop1 td { padding-right: 0 } } /* medium size smartphones */ @media (min-width: 401px) and (max-width: 500px) { body { min-width: 400px } /* h_bar */ #container_hbar { margin-left: -12pt !important } #divCC_hbar { margin-left: -235pt } #divCC_hbar a { font-size: 14pt } /* Panel 0 */ .divBtnBox { text-align: center } /* taking care of centering */ /* Panels 1 and 2 */ .spanPrgCntr1, .spanPrgCntr2 { white-space: nowrap; width: 90% } .spanPrgCntr3 { width: 90% } .imgHdMsg { float: left; height: 60px; width: 40px; margin: 3pt 10pt 0 0 } .cssQuestionTable { width: 90% !important } .cssQuestionText { width: 90% !important; font-size: 14pt !important } .tdXR { text-align: justify } .cssQImage, .cssAImage { float: none; width: 85%; min-width: 200px; max-width: 325px } .cssAnswerText { padding: 0 7pt } .divAnswerBtns { text-align: center; margin-top: 10pt; margin-left: auto !important; margin-right: auto !important } .btnQnA { max-width: 375px; min-height: 4rem; font-size: 15pt } /* Panel 3 - Test Results */ .innertube_1R { width: 95% } .Header1 { width: 100%; padding-left: 0 } .divTestResultsTitle { white-space: normal; width: 90% /*50%*/ } .tblTestResults, .tdCatList { width: 60% } .tdCatList ol { margin-left: 0 } .graphOuter { width: 60% } .tdTop1 td { padding-right: 0 } #PostTestChoices { width: 95%; padding-left: 10pt } .spanRetakeOptionText, .altCss1 { width: 100% } #btnRetakeTest { margin-left: 15pt } } @media (min-width: 0px) and (max-width: 400px) { body { min-width: 340px } /* width of left menu + 10px */ /* h_bar */ #container_hbar { margin-left: -12pt !important } #divCC_hbar { margin-left: -210pt } #divCC_hbar a { font-size: 13pt } #div_hbar_M2 { white-space: nowrap } /* Panel 0 */ /* Panels 1 and 2 */ .spanPrgCntr1, .spanPrgCntr2 { white-space: nowrap; width: 90% } .spanPrgCntr3 { width: 90% } .imgHdMsg { float: left; height: 80px; width: 40px; margin: 3pt 10pt 0 0 } .cssQuestionTable { width: 95% !important; margin-left: 0.625em } .cssQuestionText { padding-left: 0 !important } .cssAnswerText { padding: 0 5pt !important } .cssAnswerText li { text-align: left } .tdXR { text-align: left } .cssQImage, .cssAImage { float: none; width: 85%; min-width: 200px; max-width: 250px } .divAnswerBtns { text-align: center; margin-top: 10pt; margin-left: auto !important; margin-right: auto !important } .btnQnA { max-width: 175px; min-height: 4rem; font-size: 15pt } /* Panel 3 - Test Results */ .tdCatList { min-width: 250px } .tblTestResults, .tdCatList { width: 40% } .Header1 { width: 100% !important; padding-left: 0 } #PostTestChoices, .spanRetakeOptionText, .altCss1 { width: 90% } .divTestResultsTitle { white-space: normal; width: 260px; /*margin-left: -10pt;*/ } .divTestResultsTitleH { width: 95% !important; font-size: 100%; line-height: 1.4em; padding-left: 0; } .graphOuter { width: 45% } #PostTestChoices { width: 225px } #spanRetake3optNote { width: 175px } #btnRetakeTest { margin-left: 15pt; min-width: 230px; white-space: normal; } .tdTop1 td { padding-right: 0 } }