/*********************************************************************************************************************** Application: Clerk's Office / Election Support / Hand Tally Assistant File name: master.css Function: CSS Style Sheet for media="screen". Date Release Type Name Change Description ---------- -------- ---- -------------------- ------------------------------------------------------------------------ 2017-04-20 2.0.0 New Steve Lackey New style sheet. 2019-04-26 2.0.4 Enh Steve Lackey Convert app passwords to hashed values -- add new style. 2020-01-17 2.0.5 Fix Steve Lackey Add a report banner to the site report copies. Switch BernCo seal to an image with a transparent background. 2020-01-29 2.0.5 Enh Steve Lackey Change site report to use "inline-block" instead of floats. 2022-07-11 2.0.9 Fix Steve Lackey Fix design flaw in race presentation for write-in ballots. WO# 400267. 2022-07-25 2.0.9 Fix Steve Lackey Fix styling of radio buttons. 2022-11-28 2.0.10 Enh Steve Lackey Add site results preview page. 2022-12-05 2.0.10 Enh Steve Lackey Correctly handle write-in type ballots having races with both max votes per ballot greater than one and a mix of regular and write-in candidates (add new classes). 2023-03-31 2.0.10 Fix Steve Lackey Change site results report layout scheme from a set of nested tables to div's that use CSS grid layout. (Fix printing problem.) 2023-06-29 2.0.10 Enh Steve Lackey Move ballot entry race navigation buttons closer to the vote checkboxes. 2023-07-06 2.0.10 Enh Steve Lackey Add timestamp to preview report race descriptions to assist in corrections. 2023-07-07 2.0.10 Enh Steve Lackey Add timestamp to replay ballot information to assist in corrections. ************************************************************************************************************************ Tech Info: * About the radio button and check box lists... The "transform: scale" parm on the checkbox and radio button lists "input" control entry has the same value as one of the ".makeLarger..." classes. I would have liked to use the class rather than repeating the transform, but attempts to get IIS to put the class just on the checkbox input field in the rendered HTML were not successful. The repeated information turns out to be the simplest solution. ***********************************************************************************************************************/ body { font-family: Arial, Tahoma, Verdana, sans-serif; background-color: ghostwhite; margin: 0 0 0 0; padding: 0 0 0 0; min-width: 50em; } #banner { display: table; width: 100%; background-color: white; padding-left: 0.3em; padding-top: 0.3em; padding-right: 0.3em; } #bannerContent { display: table-row; } #bannerLogo { display: table-cell; padding: 1em 0 1em 1em; } #bannerLogo img { height: 100px; width: 100px; } #bannerText { display: table-cell; width: 100%; vertical-align: top; text-align: center; } #bannerTextLine1 { font-size: 3em; } #bannerTextLine2 { font-size: 2em; } #bannerTextLine3 { padding: 0.5em 0 0 0; } .bannerItem { font-size: 0.9em; margin-left: 1em; margin-right: 1em; } #bannerButtonArea { display: table-cell; vertical-align: top; padding-right: 1em; } #bannerButtonArea input { display: block; width: 12em; text-align: center; } #pageTitle { margin: 2em 2em; } #pageTitleLeft { font-size: 1.4em; font-weight: bold; } #pageTitleCtr { font-size: 1.4em; font-weight: bold; text-align: center;} #content { margin: 2em 2em; } #errMsg { color: red; margin: 1em 0 1em 0; } .errorMsg { color: red; } .panelTopMargin { margin-top: 1.5em; } .panelHeading { font-size: 1.1em; font-weight: bold; } .panelHeadingCtr { font-size: 1.1em; font-weight: bold; text-align: center; } .panelRow { margin-top: 1.5em; } .panelRowCtr { margin-top: 1.5em; text-align: center; } .panelSeparator { border-style: solid; border-width: 1px; border-color: #A0A0A0; height: .15em; color: #A0A0A0; background-color: #A0A0A0; } .rowElement { display: inline-block; margin-right: 2em; } .rowElementLast { margin-right: 0; } .elementLabel { margin-right: 0.2em; } .elementLabelFixed { display: inline-block; width: 10em; margin-right: 0.2em;} .elementValue { font-weight: bold; } .elementBtnList { padding-left: 1em; } .elementBtnList td { width: 12em; } .elementBtnList input { vertical-align: -5%; margin-right: 0.5em; transform: scale(1.35, 1.35); -ms-transform: scale(1.35, 1.35); } .elementBtnList label { vertical-align: middle; } .panelButtonRow { margin-left: 4em; } .buttonElement { margin-right: 4em; } .buttonElementLast { margin-right: 0; } .inputLabel { display: inline-block; width: 8em; } .inputLabelMed { display: inline-block; width: 10em; } .inputLabelLong { display: inline-block; width: 12em; } .inputLabelXLong { display: inline-block; width: 20em; } .inputLabelTop { display: block ; text-align: left; margin-bottom: 0.25em; } input[type=text] { font-size: 1.05em; } input[type=password] { font-size: 1.05em; } select { font-size: 1.05em; } .boldText { font-weight: bold; } .readOnly { background-color: #F4F4F4; } .hidden { display: none; } .alignRight { text-align: right; } .radioListHoriz td { width: 5em; } .radioListHoriz input { vertical-align: -5%; margin-right: 0.5em; transform: scale(1.35, 1.35); -ms-transform: scale(1.35, 1.35); } .radioListHoriz label { vertical-align: middle; } .chkBoxList { margin-left: 2em; border-collapse: collapse; } .chkBoxList tr:not(:first-child) { border-top: 1em solid transparent; } .chkBoxList tr:not(:last-child) { border-bottom: 1em solid transparent; } .chkBoxList input { vertical-align: middle; margin-right: 1em; transform: scale(2.00, 2.00); -ms-transform: scale(2.00, 2.00); } .chkBoxList label { vertical-align: middle; } .makeLarger110 { transform: scale(1.10, 1.10); -ms-transform: scale(1.10, 1.10); } .makeLarger115 { transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); } .makeLarger120 { transform: scale(1.20, 1.20); -ms-transform: scale(1.20, 1.20); } .makeLarger125 { transform: scale(1.25, 1.25); -ms-transform: scale(1.25, 1.25); } .makeLarger135 { transform: scale(1.35, 1.35); -ms-transform: scale(1.35, 1.35); } .makeLarger150 { transform: scale(1.50, 1.50); -ms-transform: scale(1.50, 1.50); } .makeLarger175 { transform: scale(1.75, 1.75); -ms-transform: scale(1.75, 1.75); } .makeLarger200 { transform: scale(2.00, 2.00); -ms-transform: scale(2.00, 2.00); } .makeLarger225 { transform: scale(2.25, 2.25); -ms-transform: scale(2.25, 2.25); } .makeLarger250 { transform: scale(2.50, 2.50); -ms-transform: scale(2.50, 2.50); } /* Telerik calender and related */ .inputLabelCal { display: inline-block; width: 8em; vertical-align: top; } .errorMsgCal { display: inline-block; vertical-align: top; color: red; } .RadCalendar { width: auto !important; min-width: 0em !important; max-width: 999em !important; height: auto !important; min-height: 0em !important; max-height: 999em !important; } .rcTitlebar td { font-family: Arial, Tahoma, Verdana, sans-serif !important; font-size: 1.50em !important; font-weight: bold !important; background-color: #D0D0D0 !important; } .rcTitlebar td a { transform: scale(1.40, 1.40); -ms-transform: scale(1.40, 1.40); } .rcWeek { font-family: Arial, Tahoma, Verdana, sans-serif !important; font-size: 1.50em !important; } .rcWeek th { width: 2.40em !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; font-weight: bold !important; } .rcRow { font-family: Arial, Tahoma, Verdana, sans-serif !important; font-size: 1.50em !important; } .rcRow td { width: 2.40em !important; text-align: center !important; padding: 0.25em 0 0.25em 0 !important; } .rcMyToday { border-color: red !important; } /* Race / Candidate vote capture display related. */ .navPanel { width: 70%; display: table; margin-top: 2em; } #nav_content { display: table-row; } #nav_msgArea { display: table-cell; width: 70%; vertical-align: center; } #nav_buttonArea { display: table-cell; width: 30%; vertical-align: center; text-align: right; min-width: 20em; } .navButton { margin-left: 1em; margin-right: 1em; } .racePanel { margin-top: 2em; } .raceBtnHidden { visibility: hidden; } .raceDivHidden { display: none; } .raceDivVisible { display: block; } .raceCandReg { margin-bottom: 1em; } .raceCandTable { width: 70%; border-spacing: 0; border-collapse: collapse; border: 1px solid black; } .raceCandTable tr.evenRow td { background-color: #E0E8EF; } .raceCandTable th { vertical-align: middle; text-align: center; padding: 1em; color: white; background-color: #1C5E55; border: 1px solid black; } .raceCandTable th.raceDesc { width: 80%; } .raceCandTable th.partyHdr { width: 10%; } .raceCandTable th.votesHdr { width: 10%; } .raceCandTable td { vertical-align: middle; padding: 1em; border: 1px solid black; } .raceCandTable td.candName { text-align: left; } .raceCandTable td.candParty { text-align: center; } .raceCandTable td.candVote { text-align: center; } /* General reporting display related */ .reportSeparator { border-style: solid; border-width: 1px; border-color: #40E0D0; height: .15em; color: #40E0D0; background-color: #40E0D0; margin: 1.5em 0; } /* Voting Site preview display related */ .sitePrvw_resultsTitle { font-size: 1.1em; font-weight: 600; margin-top: 1.5em; } .sitePrvw_resultsTbl { font-family: Tahoma, Arial, Verdana, sans-serif; border: 1px solid black; border-collapse: collapse; } .sitePrvw_resultsTbl td { padding: 0.1em 0.25em; border: 1px solid black; } .sitePrvw_ballotDescr { text-align: left; font-weight: bold; } .sitePrvw_ballotDtTm { font-weight: normal; } .sitePrvw_ballots { text-align: center; font-weight: bold; } .sitePrvw_raceDescr { text-align: left; font-weight: bold; } .sitePrvw_raceDtTm { font-weight: normal; } .sitePrvw_raceVotes { text-align: center; font-weight: bold; } .sitePrvw_candName { font-style: italic; text-align: center; } .sitePrvw_candNameWI { text-align: center; } .sitePrvw_candVote { text-align: center; } .sitePrvw_candVoteWI { text-align: center; } .sitePrvw_tabHdr { text-align: center; font-weight: bold; } .sitePrvw_tabCell { text-align: center; } /* Voting Site report display related */ .siteRptBanner { display: table; width: 100%; padding: 5pt 5pt 5pt 5pt; } .siteRptBannerContent { display: table-row; } .siteRptBannerLogo { display: table-cell; padding: 5pt 0 10pt 5pt; } .siteRptBannerLogo img { height: 100px; width: 100px; } .siteRptBannerText { display: table-cell; width: 100%; vertical-align: top; text-align: center; } .siteRptBannerTextLine1 { font-size: 36pt; } .siteRptBannerTextLine2 { font-size: 24pt; } .siteRptBannerTextLine3 { padding: 5pt 0 0 0; } .siteRptBannerItem { font-size: 10pt; margin-left: 7pt; margin-right: 7pt; } .siteRpt_area { width: 468pt; /* page-break-after: always; */ } .siteRpt_resultsArea { display: grid; width: 100%; grid-template-columns: 1fr; grid-auto-flow: row; height: auto; } .siteRpt_resultsItem { grid-row: auto; grid-column: auto; /* page-break-inside: avoid; */ } .siteRpt_hdrTbl { width: 100%; font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 8pt; border: 1pt solid black; border-collapse: collapse; margin: 0 0 0 0; } .siteRpt_hdrTbl td { padding: 1pt 5pt; } .siteRpt_hdrGrey { width: 160pt; font-weight: bold; text-align: center; white-space: nowrap; background-color: #F0F0F0; border: none; } .siteRpt_hdrBlack { text-align: center; color: white; background-color: black; border: 1pt solid black; } .siteRpt_hdrWhite { text-align: center; border: 1pt solid black; } .siteRpt_raceTbl { width: 100%; font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 8pt; border: 1pt solid black; border-collapse: collapse; margin: 0 0 0 0; } .siteRpt_raceTbl td { padding: 1pt 5pt; } .siteRpt_raceDescr { width: 280pt; color: white; background-color: black; text-align: center; border: 1pt solid black; } .siteRpt_raceVotes { color: white; background-color: black; text-align: center; border: 1pt solid black; } .siteRpt_candName { width: 280pt; font-style: italic; text-align: right; border: 1pt solid black; } .siteRpt_candNameWI { width: 280pt; } .siteRpt_candVote { text-align: center; border: 1pt solid black; } .siteRpt_candVoteWI { text-align: center; } .siteRpt_tabCellHdr { text-align: center; padding: 1pt 3pt !important; font-weight: bold; } .siteRpt_tabCell { text-align: center; padding: 1pt 3pt !important; } .siteRpt_signArea { display: block; width: 100%; /* page-break-inside: avoid; */ } .siteRpt_sign { width: 252pt; border: 1pt solid black; padding: 5pt; font-size: 8pt; text-align: center; margin-left: auto; margin-right: auto; } .siteRpt_signBoldTxt { font-size: 125%; font-weight: bold; } .siteRpt_signJustTxt { text-align: justify; padding: 10pt; } .siteRpt_signLine { display: inline-block; width: 216pt; border-top: 1pt solid black; font-size: 80%; vertical-align: text-top; } /* Ballot replay display related */ .replayMarginBot { margin-bottom: 1.5em; } .replayMainTbl { width: 100%; text-align: left; border-collapse: collapse; border: 1px solid black; } .replayMainTbl td { border: 1px solid black; padding: 0.15em 0.5em; } .replayHdrTbl { width: 100%; font-weight: bold; border: 1px solid black; } .replayHdrTbl td { border: none; } .replayRace { width: 100%; font-weight: bold; } .replayDtTm { font-weight: normal; } .replayCand { width: 90%; } .replayCount { width: 10%; text-align: center; } .replayCkBox { margin-right: 0.5em; } /* Maintenance pages related */ table.gridview { border: 1px solid #000000; border-collapse: collapse; } table.gridview caption { font-size: 1.1em; font-weight:600; margin-bottom: 0.6em; } table.gridview tr { vertical-align: top; } table.gridview th { border: 1px solid #000000; padding: 0.3em; } table.gridview td { border: 1px solid #000000; padding: 0.3em; } table.gridview td.centerit { text-align: center; } table.gridview td.rightit { text-align: right; } table.lgGridVw { font-size: 0.80em; } table.lgGridVw caption { font-size: 1.2em; font-weight:600; margin-bottom: 0.6em; } /*table.gridview td.dates { white-space: nowrap; } */ /* Dates in the gridviews use a format string with non-breaking hyphens. ( HTML ‑ or C# "\u2011" ) If this causes trouble do the following: * replace the non-breaking hypens with regular ones * on the gridview date and date/time columns add ItemStyle-CssClass="dates" * enable the above CSS: */ /***** END OF STYLE SHEET *****/