/* SusiDNS "Midnight" theme */
/* Author: dr|z3d */

body {
     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
     background-color: #000;
     color:#c9ceff;
     margin: 0 10px;
     font-size: 9pt;
}

body.iframed {
     background: transparent !important;
     margin: 0;
     padding: 0;
     overflow: hidden;
}

* {
     outline: none;
}

::selection {
     background: #22296f !important;
     background: rgba(34, 41, 111, 0.9) !important;
     color: white;
}

::-moz-selection {
     background: #22296f !important;
     color: white;
}

#navi, .buttons, #buttons, #host_list tr:first-child, #host_list img, #host_list td:nth-child(n+2) a {
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
}

#logo {
     display: none;
}

/* topnav */

div#navi  {
     border: 1px solid #2d295f;
     padding: 3px 0 2px;
     background: #002 url(/themes/console/midnight/images/titles.png) repeat-x scroll center center !important;
     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
     margin: -11px 0 27px;
     box-shadow: inset 0 0 0 1px #000;
     position: sticky;
     top: -1px;
     z-index: 999;
     text-align: center !important;
     font-weight: bold;
     font-size: 9pt;
     padding: 6px 5px 5px !important;
     min-width: 512px;
}

.iframed #navi {
     padding: 5px !important;
     border: 1px solid #443da0 !important;
     margin: 0 0 27px;
     position: static;
}

#navi a, #navi a:visited {
     border: 1px solid #2d295f;
     border-radius: 2px;
     padding: 5px;
     margin: 3px 0 !important;
     filter: drop-shadow(0 0 1px #000);
     display: inline-block;
     outline: none;
     text-transform: capitalize;
     color: #928fbf !important;
     box-shadow: inset 0 0 0 1px #000;
}

#navi a:hover, #navi a:focus {
    border: 1px solid #652787;
    color: #652787 !important;
}

#navi a:active {
     border: 1px solid #652787;
     background-blend-mode: luminosity;
     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
     color: #c9ceff !important;
}

#navi a.abook {
     background: #001 url(/themes/susidns/images/abook.png) 6px center no-repeat;
     background: url(/themes/susidns/images/abook.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
     padding: 5px 8px 5px 25px;
}

#navi a.abook:hover, #navi a.abook:focus {
     background: #000 url(/themes/susidns/images/abook.png) 6px center no-repeat !important;
     box-shadow: inset 0 1px 1px 0 #c9ceff;
}

#navi a.abook:active {
     background: #652787 url(/themes/susidns/images/abook.png) 6px center no-repeat !important;
}

#navi a#subs {
     background: #001 url(/themes/susidns/images/subs.png) 6px center no-repeat;
     background: url(/themes/susidns/images/subs.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
     padding: 5px 8px 5px 25px;
}

#navi a#subs:hover, #navi a#subs:focus  {
     background: #001 url(/themes/susidns/images/subs.png) 6px center no-repeat;
     box-shadow: inset 0 1px 1px 0 #c9ceff;
}

#navi a#subs:active {
     background: #652787 url(/themes/susidns/images/subs.png) 6px center no-repeat;
}

#navi a#config {
     background: #001 url(/themes/console/images/buttons/configure.png) 6px center no-repeat;
     background: url(/themes/console/images/buttons/configure.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
     padding: 5px 8px 5px 25px;
}

#navi a#config:hover, #navi a#config:focus {
     background: #000 url(/themes/console/images/buttons/configure.png) 6px center no-repeat;
     box-shadow: inset 0 1px 1px 0 #c9ceff;
}

#navi a#config:active {
     background: #652787 url(/themes/console/images/buttons/configure.png) 6px center no-repeat;
}

#navi a#overview {
     background: #001 url(/themes/susidns/images/overview.png) 6px center no-repeat;
     background: url(/themes/susidns/images/overview.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
     padding: 5px 8px 5px 25px;
}

#navi a#overview:hover, #navi a#overview:focus {
     background: #000 url(/themes/susidns/images/overview.png) 6px center no-repeat;
     box-shadow: inset 0 1px 1px 0 #c9ceff;
}

#navi a#overview:active {
     background: #652787 url(/themes/susidns/images/overview.png) 6px center no-repeat;
}

#navi > * {
     vertical-align: middle;
}

/* end topnav */

hr {
     color: #2d295f;
     background: #2d295f;
     height: 1px;
     border: 0px solid #2d295f;
     width: 100%;
     margin: 5px 0;
     text-align: center;
     display: none;
}

div#filter {
     border: 1px solid #2d295f;
     padding: 0 0 15px;
     text-align: center;
}

div#filter + div#search {
     border: 1px solid #2d295f;
     margin-top: 13px;
     margin-bottom: 14px;
}

div#filter + div#search > form {
     margin: 0;
     padding: 0;
}

#filter p, #search td {
     font-size: 9pt !important;
     font-weight: bold;
}

td.search > * {
     vertical-align: middle;
}

#search input[type="text"] {
     background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat;
     background: url(/themes/console/images/buttons/search.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #000019 100%) !important;
     padding: 5px 5px 5px 25px !important;
     margin-left: 5px;
}

#search input[type="text"]:focus {
     background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat !important;
}

#filter p {
     padding: 12px 10px 0;
     margin: -3px 0 -3px;
}

#filter p:first-child {
     padding-bottom: 0;
}

p#filtered {
     margin: -15px 0 10px !important;
}

#search {
     padding: 0 10px;
     margin-top: -1px !important;
     padding-bottom: -20px;
     margin-bottom: 20px;
}

#filter a:link, #filter a:visited {
     text-transform: capitalize;
     background: #000;
     border: 1px solid #443da0;
     border-radius: 2px;
     padding: 3px 8px;
     text-align: center;
     color: #443da0;
     display: inline-block;
     margin: 2px 0;
}

#filter a:hover, #filter a:focus  {
     border: 1px solid #652787;
     transform: scale(1.1);
}

#filter a:active {
     background: #652787;
     color: #c9ceff !important;
     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
}

#filter span {
     display: inherit;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-weight: bold;
     word-spacing: 0.1em;
     vertical-align: middle;
     border: 1px solid #2d295f;
     border-radius: 0 0 2px 2px;
     padding: 5px 10px 8px !important;
     min-width: 300px;
     max-width: 500px;
     width: 40%;
     white-space: nowrap;
     margin: -1px auto;
     box-shadow: inset 0 0 0 1px #000;
     background: url(/themes/console/midnight/images/titles.png) repeat-x scroll center center #000;
     background-image: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important;
}

#filter span a, #filter span a:hover {
     letter-spacing: normal;
     word-spacing: normal;
     display: inline-block;
     border: none !important;
     background: none !important;
     transform: none;
}

#filter span a:active {
     background: none;
     box-shadow: none;
     color: #4f0519 !important;
}

#filter span b {
     font-size: 11pt;
     margin: -3px 5px 0;
     text-transform: uppercase;
     color: #fff;
     line-height: 80%;
}

#filter p {
     text-align: center;
}

#booksearch {
     padding: 7px 5px;
     text-align: center;
}

p {
     color:#c9ceff;
     margin: 0 0 4px;
     font-size: 9pt;
     text-align: justify;
}

#messages + p, p.book {
     border: 1px solid #2d295f;
     background: #001 url(/themes/susidns/images/addressbook.png) 10px center no-repeat;
     background-size: 24px 24px;
     padding: 20px 20px 20px 42px !important;
}

#messages {
     margin-bottom: 24px;
}

#messages:empty {
     margin-top: -10px;
     display: none;
}

span.addrhlpr {
     font-size: 8pt;
}

h3 {
     color: #c9ceff;
     font-size: 10pt;
     font-weight: bold;
     border: 1px solid #2d295f;
     padding: 7px 10px;
     border-radius: 2px;
     background: #000 url(/themes/console/midnight/images/titles.png) repeat-x scroll center center;
     background: linear-gradient(to bottom, #191729 0%, #000 50%);
     letter-spacing: 0.08em;
     word-spacing: 0.1em;
     text-shadow: 0 0 2px #010011;
     text-transform: uppercase;
     box-shadow: inset 0 0 0 1px #000;
}

#content h3 {
     border: none;
     border-radius: 0;
     border-bottom: 1px dotted #2d295f;
     background: none !important;
     margin: 0 20px 10px;
     padding: 5px 10px;
}

#content p + h3 {
      margin-top: 15px !important;
}

.headline h3 {
     border-radius: 2px 2px 0 0;
     margin-top: -10px;
}

.headline h3:first-child {
     font-size: 10.5pt;
     margin-bottom: 24px;
     border-radius: 0;
}

#content h3:first-child {
     margin-top: -15px;
     font-size: 10.5pt;
}

.headline h3:first-child + h4 {
     margin-top: -25px;
     margin-bottom: 25px !important;
}

#add h3 {
     margin-top: -1px;
     margin-left: -11px;
     margin-right: -11px;
     padding: 8px 10px;
     font-size: 10pt;
}

#add table {
     width: 100%;
}

#add td:last-child {
     width: 94%;
}

.headline {
     margin-top: -16px;
}

div#messages p {
}

div#messages + p {
     padding: 12px 10px 8px 20px;
}

div#book p {
     padding: 15px 15px 15px 35px !important;
}

h4 {
     font-size: 9pt;
     margin-top: -15px;
     word-spacing: 0.1em;
     border: 1px solid #2d295f;
     padding: 8px 10px;
     margin-bottom: 30px !important;
     background: linear-gradient(to right, #000, #001);
}

div#messages > p.messages {
     padding: 10px;
}

#messages p {
     padding: 15px 15px 15px 40px !important;
     background: url(/themes/console/images/info/infohelp.png) 6px center no-repeat;
}

a:link {
     color: #7972d1;
     text-decoration: none;
     font-weight: bold;
     outline: none;
}

a:hover, a:focus {
     text-decoration: none;
     color: #652787 !important;
}

a:visited {
     color: #4e47bf;
     text-decoration: none;
}

a:active {
     color: #4f0519 !important;
}

th {
     color: #c9ceff;
     font-size: 9pt;
     padding: 5px 10px;
     font-size: 10pt;
     text-align: left;
}

.iframed .book tr.head th {
     border-top: 1px solid #2d295f;
     border-bottom: 1px solid #2d295f;
}

table.book td:first-child {
     font-weight: bold;
}

td {
     color: #c9ceff;
     padding: 5px;
     font-size: 9pt;
     vertical-align: center;
}

td.checkbox {
     width: 32px !important;
}

td.names a {
     font-size: 9pt !important;
}

td > img[width="320"], td > img[src^="/imagegen"] {
     border-radius: 2px;
     width: 240px;
     height: 240px;
     border: 1px solid #2d295f;
     padding: 5px;
     margin: 10px 3px;
     background: #000;
}

img[src="/imagegen/id?s=256&c="], img[src="/imagegen/id?s=20&c="] {
     opacity: 0; /* hide broken identicons but ensure hostlist remains intact */
}

ol, ul {
     margin: 0 20px 0 10px;
     display: table-row;
     padding: 0px 10px;
}

li {
     color: #c9ceff;
     line-height: 150%;
     margin: 0;
     font-size: 9pt;
     list-style: square;
}

tr.list1 {
     background-color: #010011;
}

tr.list0 {
     background-color: #000;
}

p.messages {
     color:#c9ceff;
     border: 1px solid #2d295f;
     padding: 5px 5px 10px;
     margin: 5px 0 10px;
     margin: -15px 0 14px;
     border-radius: 0;
}

.help {
     border: 1px solid #2d295f;
     padding: 20px 30px;
     background: #001;
     margin-bottom: 5px;
}

.help h3 {
     margin: 10px -31px;
     border-radius: 0;
}

.help h3:first-child {
     margin-top: -21px;
}

.help ul li:last-child {
     margin-bottom: -10px;
}

.help p {
     border: none;
     padding: 0;
}

#helpsubs {
     background: #001 url(/themes/console/images/info/infohelp.png) 12px center no-repeat;
     padding: 15px 15px 15px 52px;
}

div#content p {
     padding: 0 30px;
     line-height: 140%;
}

p.footer {
     font-size: 8pt;
     text-align: center;
     border: 1px solid #113;
     padding: 5px 0 2px;
}

#footer {
     position: fixed;
     bottom: -4px;
     width: calc(100% - 20px);
     margin: 0;
     display: none;
}

.iframed #footer {
     display: none;
}

#buttons {
     text-align: right;
     background: #001;
     background: linear-gradient(to right, #001, #000) !important;
}

p.buttons, .buttons {
     text-align: right;
     margin: 5px 0 -5px;
     padding: 0 3px;
}

p.buttons {
     border: 1px solid #2d295f;
     padding: 8px 5px;
}

div#book + div#buttons {
     margin: 9px 0 20px !important;
}

#add p.buttons {
     border: none;
     padding: 0;
}

form[action="subscriptions"] {
     margin: 0;
}

textarea[name="config"], textarea[name="content"] {
     border-radius: 0;
     margin-top: -26px;
     resize: none;
     border: 1px solid #2d295f;
     font-size: 8.5pt;
}

textarea[name="config"] {
     height: 220px;
     overflow-y: scroll;
     resize: none;
}

div#config + div#buttons, div#content + div#buttons {
     border: 1px solid #2d295f;
     margin-top: -3px;
     padding: 5px;
     margin-bottom: 15px;
     background: #001;
}

.illustrate {
     max-width: 700px;
     height: auto;
     margin: 20px auto 15px;
     padding: 10px;
     border-radius: 2px;
     border: 1px solid #010011;
     font-size: 10pt;
     box-shadow: inset 0px 0px 1px 0px #020022;
     background: #fff;
     filter: sepia(100%) invert(100%);
}

_:-ms-lang(x), img.illustrate {
     width: auto;
     max-width: 600px;
}

div#book, #emptybook {
     padding: 0;
     margin: -15px 0 -10px;
}

#book table {
     width: 100%;
     border: 1px solid #2d295f !important;
}

.iframed #book table {
     border: none !important;
}

.iframed #book #host_details {
     border-top: 1px solid #2d295f !important;
}

#book table th {
     padding: 5px 0;
     background: url(/themes/console/midnight/images/titles.png) repeat-x scroll center center #000;
     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
     border-bottom: 1px solid #2d295f;
}

#book th:last-child {
     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, url(/themes/console/midnight/images/titles.png) repeat-x scroll center center #000 !important;
     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%) !important;
     font-size: 0;
     padding: 0 !important;
}

#book td {
     border-bottom: 1px solid #17142f;
     padding: 0;
}

#book table tr:hover {
     background: #003;
}

#book table tr:hover textarea {
     color: #c9ceff;
}

#book, #messages, #filter, #search {
     background: #001;
}

.book th:first-child, .book td:first-child {
     padding: 0 10px !important;
     width: 200px;
     white-space: nowrap;
}

.book td:nth-child(2) {
     padding: 2px 0 2px 5px !important;
     width: 30px;
}

.book td:nth-child(3) {
     text-align: center;
     width: 20px;
     padding: 2px 25px 2px 0 !important;
}

.book td:nth-child(3) a:not(old) {
     font-size: 0 !important;
}

.book td:nth-child(3) .addrhlpr a::after {
     content: url(/themes/console/images/buttons/fullview.png);
     text-align: center;
     padding: 2px 10px !important;
     filter: drop-shadow(0 0 1px #555);
}

.book td:nth-child(3) .addrhlpr:hover {
     filter: drop-shadow(0 0 1px #b73fff);
}

.headline + #book > table td {
     padding: 5px;
}

.headline + #book > table td:first-child {
     width: 120px;
     white-space: nowrap;
     text-align: right;
}

.headline + #book > table td.destinations {
     padding: 0;
}

#visualid {
     border: 1px solid #2d295f;
     margin-top: -10px;
     background: #001;
}

.iframed #visualid {
     border: none;
}

#visualid h3 {
     margin-top: -1px;
     border-left: none;
     border-right: none;
}

#idAddress {
     text-transform: none;
}

#visualid table {
     width: 100%;
     margin-top: -15px;
     margin-bottom: 1px;
     border-collapse: collapse;
}

#visualid td:first-child {
     text-align: right;
}

#visualid td[colspan="2"] {
     text-align: right;
     border-top: 1px solid #2d295f;
     padding: 17px 9px 15px !important;
}

.iframed #visualid td[colspan="2"] {
     padding: 20px 9px 5px !important;
}

div#add {
     border: 1px solid #2d295f;
     padding: 0 10px 15px;
     margin-top: 20px;
     background: #001;
}

.page {
     color:#c9ceff;
     margin: 10px 0;
     padding: 0;
     font-size: 9pt !important;
     background: #000;
}

.iframed .page {
     margin: 1px 0 0;
     overflow: hidden;
}

input {
     font-size: 9pt;
     font-weight: bold;
     text-align: left;
     padding: 4px !important;
     border-radius: 2px;
     border: 1px solid #443da0;
     background: #000 none !important;
     color: #4e47bf;
     margin: 2px 4px 2px 0;
     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
     min-width: 64px !important;
}

input[type="checkbox"], input[type="radio"], .optbox {
     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
     background: none;
     min-width: 16px;
     min-height: 16px;
}

input[type=submit]::-moz-focus-inner, input[type=reset]::-moz-focus-inner {
     border: none;
     outline: none;
}

input[type=submit], input[type=reset], .fakebutton {
     color: #4e47bf;
     background: #000;
     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
     border: 1px solid #3e3f8f;
     border-bottom-color: #14144f;
     border-right-color: #14144f;
     padding: 5px !important;
     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
     text-align: center;
     min-width: 90px !important;
     box-shadow: inset 0 0 0 1px #000;
     border-radius: 2px;
}

input[type=submit]:hover, input[type=reset]:hover,
input[type=submit]:focus, input[type=reset]:focus,
.fakebutton:hover, .fakebutton:focus {
     background: #000 !important;
     color: #652787;
     border: 1px solid #652787;
     box-shadow: inset 0 1px 1px 0 #c9ceff;
}

input[type=submit]:active, input[type=reset]:active, .fakebutton:active {
     background: #652787 !important;
     color: #c9ceff !important;
     border: 1px solid #652787;
     box-shadow: inset 3px 3px 3px #000;
}

textarea {
     color: #7670c2;
     background: #000;
     border: 1px solid #443da0;
     padding: 3px 5px;
     font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
     border-radius: 2px;
     width: 100%;
     height: 120px;
     line-height: 140%;
     resize: none;
}

input[type="text"], textarea {
     background: linear-gradient(to bottom, #000 0%, #000019 100%) !important;
     box-shadow: inset 0 0 3px 3px #000;
}

input[type="text"]:focus, textarea:focus {
     background: #000 !important;
     color: #c9ceff;
     border-radius: 2px;
}

input[type=text]:focus, textarea[name="destination"]:focus {
     color: #c9ceff !important;
     background: #000;
     filter: drop-shadow(0 0 1px #99f);
     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
     transition: filter ease 0.3s;
}

textarea[cols="70"] {
     width: 100% !important;
     height: 40px;
     white-space: pre-wrap;
}

.destinations textarea {
     width: 100%;
     padding: 1px 1px 1px 2px !important;
     resize: none;
     margin: 0;
     border-radius: 0;
     border: none;
     border-left: 1px solid #17142f;
     border-right: 3px solid #17142f;
     height: 32px;
     overflow-x: auto;
     overflow-y: hidden !important;
}

.iframed iframe {
     width: calc(100% - 10px);
}

/* iframed content border removal */

.iframed #navi, .iframed h3, .iframed h4, .iframed #book, .iframed #add, .iframed #filtered, .iframed #filter, .iframed #search,
table.book, .iframed #buttons, .iframed .buttons, .iframed #messages + p, .iframed p.book, .iframed #helpsubs,
.iframed textarea[name="config"], .iframed textarea[name="content"], .iframed #helpconfig, .iframed p.messages {
     border-right: none !important;
     border-left: none !important;
}

/* page titles */

.headline h3 {
     padding: 10px 5px 10px 40px;
     background: url(/themes/susidns/images/addressbook.png) 10px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%);
     font-size: 11pt;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     word-spacing: 0.1em;
}

.headline#subscriptions h3 {
     background: url(/themes/susidns/images/subs_24.png) 10px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%);
}

.headline#configure h3 {
     background: url(/themes/susidns/images/configure_24.png) 10px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%);
}

.headline h4 {
     padding: 5px 10px 5px 35px;
     background: url(/themes/susidns/images/drive.png) 13px center no-repeat;
}

p#filtered {
     background: url(/themes/console/images/buttons/filter.png) 13px center no-repeat;
     padding: 15px 250px 15px 35px !important;
}

p.book {
     background: url(/themes/susidns/images/abook.png) 13px center no-repeat;
     padding: 10px 10px 10px 35px !important;
}

/* export hosts button adjustments */

#export {
     text-align: right;
     margin-top: -48px;
     margin-bottom: 23px;
     padding-right: 4px;
     float: right;
     clear: left !important;
}

#export input[type="submit"] {
     display: inline-block;
}

p.book {
     padding-left: 35px !important;
}

#messages + p, p.book {
     border: 1px solid #2d295f;
     background: #000 url(/themes/susidns/images/addressbook.png) 5px center no-repeat;
}

/* hide export button on published addressbook if empty */
#messages + form[action="export"] {
     display: none;
}

/* host details page */

#host_details td {
     padding: 5px 10px !important;
}

#host_details td:first-child {
     min-width: 10px !important;
     width: 10%;
     white-space: nowrap;
     font-weight: bold;
     text-align: right;
}

#host_details td:last-child {
     width: 90%;
     text-align: left;
     border-left: none !important;
     border-right: none !important;
}

#host_details td.destinations {
     background: none;
}

#host_details tr:hover {
     background: #ffd;
}

.destaddress:focus {
     background: #003;
     outline: none;
}

#host_details .destaddress {
     word-break: break-all !important;
     white-space: normal !important;
}

/* end host details */

.names img {
     width: 20px;
     height: 20px;
     vertical-align: middle;
     margin: 5px 8px 5px 0;
     padding: 1px;
     border: 1px solid #17142f;
     border-radius: 2px;
     background: #000;
}

.names img:hover, .names a:focus img {
     border: 1px solid #652787;
     background: #652787;
}

.names a:active img, .names a:focus img {
     transform: rotate(45deg) scale(0.8);
     transition: ease all 0.1s 0s;
}

/* hostname list */

#host_list {
     margin-top: 28px;
}

#host_list th:first-child,
#host_list td:first-child {
     width: 150px;
     width: 30%;
     white-space: nowrap;
     padding-left: 5px !important;
}

#host_list th:first-child {
     padding-left: 37px !important;
}

#host_list td:last-child {
     width: 16px;
     white-space: nowrap;
     font-weight: bold;
}

#host_list th:nth-child(2), #host_list td:nth-child(2),
#host_list th:nth-child(3), #host_list td:nth-child(3),
#host_list th:nth-child(4), #host_list td:nth-child(4) {
     width: 35px;
     width: 8%;
     padding: 0 5px !important;
     white-space: nowrap;
     text-align: center;
}

#host_list td:nth-child(2) a:not(old) {
     font-size: 0 !important;
}

#host_list td:nth-child(2) a::after {
     content: url(/themes/console/images/buttons/link.png);
     text-align: center;
     filter: drop-shadow(0 0 1px #555);
     cursor: pointer;
}

#host_list td:nth-child(3) a:not(old) {
     font-size: 0 !important;
}

#host_list td:nth-child(3) a::after {
     content: url(/themes/console/images/buttons/helper.png);
     cursor: pointer;
}

#host_list th:nth-child(4), #host_list td:nth-child(4) {
     padding-right: 30px !important;
}

#host_list td:nth-child(4) a:not(old) {
     font-size: 0 !important;
}

#host_list td:nth-child(4) .addrhlpr a::after {
     content: url(/themes/console/images/buttons/fullview.png);
     text-align: center;
     padding: 0 10px !important;
     filter: drop-shadow(0 0 1px #555);
     cursor: pointer;
}

#host_list td:nth-child(2) a:hover, #host_list td:nth-child(3) a:hover, #host_list td:nth-child(4) a:hover,
#host_list td:nth-child(2) a:focus, #host_list td:nth-child(3) a:focus, #host_list td:nth-child(4) a:focus {
     filter: drop-shadow(0 0 2px #652787);
}

#host_list .destaddress {
     overflow: hidden !important;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
     font-weight: normal;
     padding: 3px !important;
     -moz-user-select: all;
     -webkit-user-select: all;
     user-select: all;
}

#host_list .destaddress:focus {
     overflow: auto !important;
     text-overflow: clip;
}

td.destinations {
     max-width: 50px !important;
     border-left: 1px solid #2d295f;
     border-right: 1px solid #2d295f;
}

tr:hover .destinations {
     color: #aa0;
}

/* end hostname list */

/* responsive layout */

@media screen and (max-width: 1000px) {
.illustrate {
     margin: 15px auto 10px;
     min-width: 450px;
     width: 90%;
}
}

@media screen and (max-width: 1200px) {
#filter {
     padding: 0 5px;
}

#filter p {
     margin-left: 0;
     margin-right: 0;
}

#filter a {
     min-width: 6px;
     padding: 0 6px;
}
}

@media screen and (min-width: 1200px) {
#filter a {
     font-size: 10pt;
     margin: 0 2px -5px !important;
     display: inline-block;
     min-width: 12px;
}
}

@media screen and (min-width: 1500px) {
body, input[type="text"], select, h4, td.names a, #filter p, #search td, p, a, textarea, .help li, td, tt, code, textarea, input[type="submit"], input[type="reset"], .destaddress {
     font-size: 10pt !important;
}

#navi a {
     font-size: 10.5pt !important;
}

h3 {
     font-size: 12pt !important;
}

#filter a {
     font-size: 11pt !important;
     min-width: 14px;
}

.destinations textarea {
     height: 34px;
}
}

/* end responsive layout */

/* Edge/IE tweaks */

_:-ms-lang(x), * {
     filter: none !important;
}

/* end Edge/IE tweaks */

