css/derekovecs.css

body, input {
    font-family: Lato, sans-serif;
    font-size: 11pt;
}

.info {
    font-size: 8pt;
    margin-top: 4px;
/* position: absolute;
   bottom: 0;
   left: 0;
   right: 0; */
}

h1 {
    margin: 5px 10px 0 0;
    color: rgb(246,168,0);
    font-family: "Univers LT Std 47 Cn Lt", "Univers LT Std 67 Cn Lt", "Roboto Condensed", "Univers LT Std 67 Cn Bold", "UniversLTStd-BoldCn", "Times", 'League Gothic', Impact, 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: "Univers LT Std 47 Cn Lt", "Univers LT Std 67 Cn Lt", "Roboto Condensed", "Univers LT Std 67 Cn Bold", "UniversLTStd-BoldCn", "Times", 'League Gothic', Impact, 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-letf: 2pt;
}

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

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

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

a.merged {
    color: green;
    fill: green;
}

.merged {
    color: green;
    fill: green;
}

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

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

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

.somtext.merged {
    font-style: italic;
    color: #333;
    fill: #333;
}

.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 {
a.target {
    font-weight: bold;
  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;
}

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: 10px;
    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;
    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-size: 8pt;
    float: right;
    text-aligh: 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: "Univers LT Std 47 Cn Lt", "Univers LT Std 67 Cn Lt", "Roboto Condensed", "Univers LT Std 67 Cn Bold", "UniversLTStd-BoldCn", "Times", 'League Gothic', Impact, sans-serif;
}

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