css/derekovecs.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;800&family=Fira+Sans:wght@300;400;700&display=swap');
@import url('https://cdn.datatables.net/buttons/3.0.0/css/buttons.dataTables.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

body, input {
    font-family: 'Fira Sans', sans-serif;
    font-size: 11pt;
}

p, dt, dd {
    line-height: 150%;
    font-size: 10pt;
}

.footer {
    font-size: 8pt;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #c0c0c0;

/* position: absolute;
   bottom: 0;
   left: 0;*/
   right: 2vw;
   width: 98vw;
}

.footertext {
    display: flow-root;
    text-align: center;
    color: grey;
    font-size: 8pt;
}

.footertext a:any-link {
    color: grey;
}

h1 {
    margin: 5px 10px 0 0;
    color: rgb(246,168,0);
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: bold;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: uppercase;
    text-shadow: none;
    word-wrap: break-word;
}

h2 {
    color: grey;
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: bold;
    letter-spacing: normal;
    text-transform: uppercase;
    text-shadow: none;
    word-wrap: break-word;
    font-size: 12pt;
    margin-top: 0pt;
    margin-bottom: 0pt;
    margin-left: 2px;
}

h3 {
    color: rgb(246,168,0);
    font-family: "Fira Sans Condensed", sans-serif;
    font-weight: bold;
    /* line-height: 1.35; */
    font-size: 18pt;
    margin-bottom: 2pt;
    letter-spacing: normal;
    text-transform: uppercase;
    text-shadow: none;
    word-wrap: break-word;
}

.ui-widget-header {
    font-family: "Fira Sans Condensed"; sans-serif;
    font-weight: bold;
}

.ui-widget {
    font-family: "Fira Sans", sans-serif;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    font-weight: bold;
}

showoptions, #SEARCH {
    margin-left: 10px;
    margin-right: 10px;
}

.tabs-left-vertical .ui-tabs-nav {
    position: absolute;
    width: 21em;
    transform: translate(-100%,0%) rotate(-90deg);
    transform-origin: 100% 0%;
}

.tabs-left-vertical .ui-tabs-nav li {
    float: right;
}

.tabs-left-vertical .ui-tabs-panel {
    padding-left: 3.5em;
}

.tabs-left-vertical .ui-tabs-panel {
    height: 20em;
}

.mono {
    font-family: "DejaVu Sans Mono", Inconsolata, SourceCodePro, "Courier New", Courier, monospace;
    font-size: 9pt;
    line-height: 150%;
}

.ui-tooltip-content {
    font-size: 10pt;
    color: #222222;
}

svg > .ui-tooltip-content {
    font-size: 8pt;
    color: #222222;
}

a.merged {
    color: #0000ff;
    fill: #0000ff;;
}

.merged {
    color: #0000ff;
    fill: #0000ff;;
}

#first a, .paradigmator a {
    text-decoration: none;
}

a.marked, #first a.marked {
    text-decoration: underline;
}

.somtext {
    font-style: normal;
    color: #333;
}

.somtext.merged {
    color: #0000ff;
    fill: #0000ff;;
}

.somtext.target {
    font-weight: bold;
  animation: blink-animation 0.5s steps(5, start) 100;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

a.target.merged {
    font-weight: bold;
    color: #0000ff;
    fill: #0000ff;;
  animation: blink-animation 0.5s steps(5, start) 100;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

a.target {
    font-weight: bold;
    color: orange;
    fill: orange;
  animation: blink-animation 0.5s steps(5, start) 100;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}


@keyframes blink-animation {
  to {
    opacity: 0.5;
  }
}

@-webkit-keyframes blink-animation {
  to {
    opacity:0.5;
  }
}

table.display {
    width: 40% important!;
    margin: 1;  /* <- works for me this way ****/
}

table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
    padding: 2px 2px;
    //  border-bottom: 1px solid #111;
}

/* The scores in the result tables are read column by column, which only works
   if the digits line up. Fira Sans and Fira Sans Condensed both carry tabular
   figures in their tnum feature - without it their digits vary in width by
   almost a third, from 433 to 558 units. font-feature-settings is the fallback
   for browsers that do not know font-variant-numeric. */
table.dataTable {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.dataTables_filter input { width: 16ex }

.dt-button {
  margin-top: 4px !important;
  padding: 0px 6px 0px 6px !important;
  border: none;
  border-collapse:collapse;
}

g.u a, g.tsnet a, td.collocator {
    cursor: pointer;
}

#collocators {
    margin-bottom: 15px;
}

#header {
    width: 100%;
    //   border: 1px solid red;
    overflow: hidden; /* will contain if #first is longer than #second */
}

/* Explains, in the place of a table, why that table has nothing to show. */
.notice {
    align-self: flex-start;
    max-width: 40em;
    padding: 8px 12px;
    color: #555;
    border-left: 3px solid #ccc;
    background-color: #fafafa;
}

/* Query operands that are not in the vocabulary. The result is computed
   without them, so this has to be visible next to it. */
#unknownwords {
    width: 800px;
    margin: 0 auto 10px auto;
    padding: 4px 8px;
    border-left: 3px solid #c00;
    background-color: #fff4f4;
    box-sizing: border-box;
}

#topwrapper {
    width: 100%;
    display: flex;
    //       border: 1px solid red;
}

#wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding:5px;
    /*       border: 1px solid green;
    //   border: 1px solid red;
    //  overflow: hidden; /* will contain if #first is longer than #second */
}

#pagetitle {
    max-width: 460px;
    margin-right: 20px;
    float: left;
    overflow: hidden; /* if you don't want #second to wrap below #first */
    //    border: 1px solid green;
}

#options {
    /* float: left; */
    width: 800px;
    margin: 20px auto 10px auto;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

#word {
    width: 50%;
}

#first {
    margin-right: 10px;
    float: left;
    overflow: hidden; /* if you don't want #second to wrap below #first */
    //    border: 1px solid green;
}
#tabs {
    margin-right: 20px;
    min-width: 98vw;
    min-height: 80vh;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

.tabs-min {
    background: transparent;
    border: none;
}

.tabs-min .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.tabs-min .ui-tabs-nav .ui-state-default {
    background: transparent;
    border: none;
}

.tabs-min .ui-tabs-nav .ui-state-active {
    background: transparent url(/derekovecs/img/uiTabsArrow.png) no-repeat bottom center;
    border: none;
}

.tabs-min .ui-tabs-nav .ui-state-default a {
    color: #c0c0c0;
}

.tabs-min .ui-tabs-nav .ui-state-active a {
    color: rgb(246,168,0);
}

#embed {
    max-width: 802px;
    border: 1px solid #333;
}

#second {
    min-width: 700px;
/*   border: 1px solid #333; */
    overflow: hidden; /* if you don't want #second to wrap below #first */
}
#som2 svg {
    border: 1px solid #333;
}

#cost {
    font-family: "Fira Sans Condensed"; sans-serif;
    font-size: 8pt;
    float: right;
    text-align: right;
    color: #222222;
    margin-top: 4px;
    margin-bottom: 12px;
}

#sominfo1, #sominfo {
    font-size: 8pt;
    color: #222222;
    margin-top: 0px;
}

#somcolor1, #somcolor2, #somcolor3 {
    display: inline-block;
    height: 10px;
    width: 10px;
}

#third {
    border: 1px solid #333;
}

th {
    color: rgb(246,168,0);
    font-family: "Fira Sans Condensed", sans-serif;
}

th, th .regular {
    color: rgb(246,168,0);
    font-family: "Fira Sans Condensed", sans-serif;
}

p.citation {
    font-size: 8pt;
    color: #999999;
}

.ui-widget.ui-widget-content {
    border: none;
}

#ids_logo {
    position: absolute;
    top: 0px;
    right: 2vw;
    width: 200px;
}

#tabs-4, #tabs-3, #tabs-2, #tabs-1, #tabs-0, #wrapper {
    display: flex;
    justify-content: center;
    place-items: center;
}

#info {
    width: 90ex;
    max-width: 90vw;
}

#info p, dd {
    text-align: justify;
}

#info pre {
    font-family: "DejaVu Sans Mono", Inconsolata, SourceCodePro, "Courier New", Courier, monospace;
}

p.refkey {
    font-size: 90%;
    font-weight: bold;
    text-align: left;
    margin:  0;
    color: #657b83; 
}

p.reference {
    font-size: 90%;
    text-align: left;
    margin:  0;
    margin-left:  2em;
    margin-bottom: 1ex;
    color: #657b83; 
}
dt {
    float: left;
    clear: left;
    width: 25ex;
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: bold;
    margin-right: 1ex;
    margin-left: -5ex;
}

dd {
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: tabular-nums;
    /* dt floats left with a width of 25ex, pulled 5ex further left and
       followed by 1ex of margin, so it occupies everything up to 21ex. Without
       a matching indent the dd fell back to the browser default of 40px and
       its text wrapped around the float instead of starting after it. */
    margin-left: 21ex;
}