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 */
}

#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;
}