@font-face { font-family: "ABeeZee"; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; src: local("ABeeZee Regular"), local("ABeeZee-Regular"), local("ABeeZee"), url("../abeezee-regular.woff") format("woff"); } @font-face { font-family: "Free Monospaced"; src: url("../freemono.eot?") format("eot"), url("../freemono.woff") format("woff"), url("../freemono.ttf") format("truetype"), url("../freemono.svg#FreeMono") format("svg"); font-weight: normal; font-style: normal; } .inputwrapper { font-family: "ABeeZee", sans-serif; margin: 0 1em 1em 1em; } .textwrapper { margin: 0 0 1em 0; padding: 0 1em 0 0; } .arrow_box { position: relative; background: #fff; border: 1px solid #ddd; } .arrow_box:focus { border-color: #888; } .arrow_box:hover { border-color: #333; } .arrow_box:after, .arrow_box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 1em; margin-left: -1em; } .arrow_box:before { border-color: rgba(221, 221, 221, 0); border-top-color: #ddd; border-width: calc(1em + 1px); margin-left: calc(-1em - 1px); } .arrow_box:focus:before { border-color: rgba(136, 136, 136, 0); border-top-color: #888; } .arrow_box:hover:before { border-color: rgba(51, 51, 51, 0); border-top-color: #333; } .selectwrapper > .arrow_box { display: inline-block; } .textinput { background-color: #fff; border: none; color: #000; font-family: "Free Monospaced", monospace; height: 10em; margin: 0; padding: 0.5em; resize: vertical; width: 100%; } .textinput:focus { border-color: #888; } .textinput:hover { border-color: #333; } .selectwrapper { margin: 0 0 1em 0; padding: 0; text-align: center; } .select { background-color: #fff; border: none; color: #000; font-family: "ABeeZee", sans-serif; margin: 0; padding: 0.5em; } .option { /* font-family: "ABeeZee", sans-serif;*/ } .errormessage { /* font-family: "ABeeZee", sans-serif;*/ }