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

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