/*=--------------GENERAL STYLES ------------------*/ /* * This class will be applied to the element as soon as fonts have started loading. */ .wf-loading {visibility: hidden; } /* * This class is applied to the element when fonts have loaded and are rendered. */ .wf-active { } /* * This class is applied to the element if Typekit does not support the current browser. */ .wf-inactive { } * {margin: 0; padding: 0;} html {scroll-behavior: smooth;} html, body, form {width: 100%;} form {cursor: default;} body {background: #F5F4F4; font: 18px 'Roboto', sans-serif; font-weight: 400; color: #707070; line-height: 1.4em; text-align: center; font-variant-numeric: lining-nums; font-feature-settings: lnum; overflow-x: hidden;} a {color: #021D50; text-decoration: underline; } a:hover, a:focus, a:active {color: #0b3d91;} a:focus {outline: 1px solid #000;} p {margin-bottom: 1em; clear: both;} img {border: 0;} input, textarea, select {font-family: 'Roboto', arial, sans-serif; font-size: 1em; color: #535353; border: solid 1px #A5A3A3; } input[type="text"], input[type="password"], input[type="email"], textarea {padding: .5em;} input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {} ul, ol {padding-left: 2em; margin-bottom: 1em;} fieldset {border: 0;} div.drop {background: #fff; width: 100%; overflow:hidden; /* this hides the select's drop button */ padding:0; margin:0; position: relative; line-height: 0em; /* this is the new drop button, in image form */ border: solid 1px #000;} div.drop:before {content: '\e903'; font-family: "dabora-icons"; font-size: 2em; font-weight: bold; float: right; position: absolute; right: .1em; top: 50%; z-index: 300; -webkit-text-fill-color: black; -webkit-text-stroke: 1px white;} div.drop select { width:120% /* this percentage effectively extends the drop down button out of view */; background-color:transparent /* this hides the select's background making any styling visible from the div */; background-image:none; -webkit-appearance: none /* this is required for Webkit browsers */; border:none; box-shadow:none; padding: .5em; /* padding should be added to the select, not the div */ position: relative; z-index: 301; outline: 0; } .hidden {width: 0; height: 0; display: block; position: absolute; left: -999em; top: -999em;} .image {width: auto; height: auto; margin: 2em;} .image img {width: 100%; height: auto;} .textBlue {color: #021D50;} .floatRight{float: right;} .floatLeft {float: left;} .noFloat {float: none; display: inline;} .clearBoth {clear: both;} .clearLeft {clear: left;} .clearRight {clear: right;} .clearNone {clear: none;} .formNote {font-size: 12px; font-style: italic; line-height: 1.1em;} /*Button*/ a.button {background: #0060df; padding: .5em 1em; color: #fff; text-decoration: none; border: solid 1px #0060df; border-radius: 14px; -webkit-transition-property: background, color; -webkit-transition-duration: .5s; transition-timing-function: ease; -webkit-transition-property: background, color;transition-duration: .5s; transition-timing-function: ease;} a.button:hover, a.button:active, a.button:focus {background: #fff; color: #0060df;} ul.buttonRow li.buttonAlt {float: left; margin-left: 0;} a.buttonGo {background: green; clear: both;} a.buttonCancel {background: red; clear: both;} .buttonClose {background: #0060df; color: #fff; display: block; position: absolute; top: .5em; right: .5em; border-radius: 50%; text-decoration: none;} .buttonClose:before {content: 'X'; width: 25px; height: 25px; font-weight: bold; color: #fff; display: block;} p.buttonSpot {width: 100%; float: left; clear: both; padding: 1em 0;} /*TITLES*/ h1, h2 {font-family: 'Roboto Slab', serif; font-weight: bold; margin-bottom: 0.25em; clear: both; line-height: 1.2em;} h3, h4, h5 {margin-bottom: 0.5em; font-weight: normal; clear: both; line-height: 1.2em;} h1 {font-size: 1em; color: #021D50;} h2 {margin-bottom: .5em; font-size: 1.15em; color: #021D50;} h3 {font-size: 1.3em; color: #707070;} h4 {font-size: 1.2em; color: #707070;} /*FORMS*/ ul.formList {width: 100%; margin: 0; padding: 0 15px; list-style: none; float: left; clear: both;} ul.formList li {width: 100%; margin: 0 0 1em 0; float: left;} ul.formList li label {font-size: 1em; color: #021D50; margin-bottom: .25em; line-height: 1.3em; display: block;} ul.formList li label span {font-size: .8em;} ul.formList li input[type="text"], ul.formList li input[type="password"], ul.formList li input[type="email"] {width: 100%;} ul.formList li .formNote {color: #c70404;} ul.formList:after {content: ''; display: table; clear: both;} ul.formList li.formButton {padding: 1em 0;} ul.formList li.ballotSlider {text-align: center; margin-bottom: 2em;} ul.formLogin {width: 100%;} ul.formLogin li {width: 100%; float: left; clear: both;} ul.formLogin li label {width: 100%; color: #021D50; display: block;} ul.formLogin li .formNote {font-size: .9em; font-weight: normal;} ul.formLogin li.checkbox .formNote {font-size: .8em;} ul.formListSingle {margin: 2em 0;} #modalVote h2 {margin-bottom: 2em;} /*Content*/ .wrapper {min-height: 100%; position: relative; left: 0; text-align: center;} .contentMain {width: 96%; max-width: 800px; margin: 100px auto 0; padding: 0 10px 80px; clear: both;} #main {padding-top: 2em} .contentLogin {max-width: 400px; margin: 0 auto;} .buttonRowFixed {background: #0060df; width: 100%; height: 60px; padding: 1em 10px; position: fixed; left: 0; bottom: 0; } .buttonRowFixed a.button {background: #fff; color: #0060df; border: solid 1px #fff;} .buttonRowFixed a.button:hover, .buttonRowFixed a.button:active, .buttonRowFixed a.button:focus {background: #0060df; color: #fff; border-color: #fff;} .buttonRowFixed a.buttonAlt {background: transparent; color: #fff;} .buttonRowFixed a.buttonAlt:hover, .buttonRowFixed a.buttonAlt:active, .buttonRowFixed a.buttonAlt:focus {background: #fff; color: #0060df;} /*HEADER*/ header {background: #fff; width: 100%; height: auto; padding: 0; position: fixed; top: 0; left: 0; box-shadow: rgba(0,0,0, .1) 0px 0px 10px; z-index: 10;} header .header {height: 100%; margin: 0 auto; text-align: right; position: relative;} header .header .brandingInfoWrap {background: #fff; width: 100%; padding: 2%; float: left; clear: both;} header .header .brandingInfoWrap a.logoWHTA {width: 25%; margin-top: 0; padding: 0; float: left; display: inline-block; float: left; position: relative; } header .header .brandingInfoWrap a.logoWHTA img {max-width: 100%; width: auto; max-height: 40px; height: auto; display: block; float: left;} header .header .brandingInfoWrap h1 {width: 70%; font-size: 12px; font-weight: normal; display: inline-block;} header .header .brandingInfoWrap h1 span {white-space: nowrap;} header .header .userInfoWrap {background: rgba(0,0,0,.10); width: 100%; padding: .25em 10px; font-size: .7em; color: #000; white-space: nowrap;} /*FLOATING BOXES*/ .box {background: #fff; width: 100%; max-width: 600px; margin: 0 auto 1.5em; padding: .5em 0; border-radius: 14px; box-shadow: rgba(0,0,0, .1) 0px 0px 10px;} .boxLogin {padding: 2em; } .boxFull {width: 100%; max-width: unset; padding: 2em 1em; } /*BALLOT COUNTER BAR*/ .ballotCount { background: #021D50; width: 100%; padding: 1em 10px; color: #fff; width: 100vw; position: relative; margin: 0 0 0 -50vw; left: 50%; z-index: 9;} /*TABLES*/ .tableGen {width: 100%; float: left; clear: both;} .tableGen td {padding: .5em; text-align: left;} .tableGen td a.button {padding: .25em 1em; font-size: .8em;} .tableGen td a.button.buttonInactive {background: #eee; border: #999; color: #ccc; cursor:not-allowed;} .tableGen td a.button.buttonInactive:hover {background: #eee; color: #fff; } .tableGen:after {content: ''; display: table; clear: both;} .tableAlt tr:nth-child(odd) {background: #fff;} .tableAlt tr:nth-child(even) {background: #F5F4F4;} .tableAlt td {line-height: 1.1em;} .tableAlt td span.name {font-size: 14px;} .tableAlt div.labelVote {font-size: .7em; font-style: italic; color: #021D50; white-space: nowrap; line-height: 1em; text-align: right;} .tableAlt div.voteResult {font-size: 1em; font-weight: bold; color: green; line-height: 1em; text-align: right; padding-right: 1em;} .tableAlt td.cellRating {text-align: right; white-space: nowrap;} .tableAlt td.cellRating div.labelVote, .tableAlt td.cellRating div.voteResult {width: auto; display: inline-block;} .tableAlt td.cellRating div.labelVote {margin-right: 1em;} /*RADIO BUTTONS*/ .tableRadio td {position: relative; vertical-align: middle; text-align: right;} .tableRadio input[type=radio] {width: 30px; height: 30px; margin-right: 1em; float: right; color: #c70404;} .tableRadio label {width: 78%; display: block; float: left;} /*ERROR MESSAGE*/ #error {color: #c70404;} #error i:before { content: url(../images/general/error.svg); width: 30px; height: 30px; display: inline-block;} #error ul {width: 100%; margin: 0 0 2em; padding: 0; float: left; clear: both; list-style: none;} /* 1000 - Devices 1000px and less */ @media only screen and (max-width: 1000px) { } /* 810 - Devices 810px and more */ @media only screen and (min-width: 810px) { .contentMain {margin-top: 140px;} .contentLogin {max-width: 400px;} header .header .brandingInfoWrap, header .header .userInfoWrap .userInfo {max-width: 800px; margin: 0 auto; float: none;} header .header .brandingInfoWrap a.logoWHTA img {max-height: 100%;} header .header .brandingInfoWrap h1 {width: 50%; font-size: 16px;} } /* 440 - Devices 414px and less */ @media only screen and (max-width: 440px) { } /* 1200 - Devices 1200px and up */ @media only screen and (min-width: 1200px) { } /* 767 - Devices 767px and up AND landscape */ @media only screen and (max-width: 767px) and (orientation: landscape) { }