/*
 *  $Id$
 *
 *  This file is part of the OpenLink Software Virtuoso Open-Source (VOS)
 *  project.
 *
 *  Copyright (C) 1998-2018 OpenLink Software
 *
 *  This project is free software; you can redistribute it and/or modify it
 *  under the terms of the GNU General Public License as published by the
 *  Free Software Foundation; only version 2 of the License, dated June 1991.
 *
 *  This program is distributed in the hope that it will be useful, but
 *  WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *  General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License along
 *  with this program; if not, write to the Free Software Foundation, Inc.,
 *  51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
 *
 */

html {
  font-size: 16px; /* Base for rem calculations */
}

body {
  margin: 0; padding: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm); /* 14px, similar to original 9pt */
  line-height: var(--line-height-normal);
  text-align: center;
  color: var(--color-neutral-900);
}

a.describe {margin-right: 6px}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}


#PG { width: 100%;
      text-align: left;
      background-color: var(--color-white);
}

#HD {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  width: 100%;
  padding: 0 var(--space-4);
  background: linear-gradient(to bottom, var(--color-primary-900), var(--color-primary-700));
  border-bottom: 1px solid var(--color-primary-900);
}

#HD img { margin: var(--space-0-5) 0 0 0; padding: 0; vertical-align: middle; border: 0;}

#HD h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-white);
  padding: 0;
  line-height: var(--line-height-tight);
}

#HD h1 a { color: var(--color-white)}

#HD h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-white);
  padding: 0;
  line-height: var(--line-height-tight);
}

#main_menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  margin: 0 0 0 auto;
  list-style: none;
}

#main_menu li a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-family: sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: var(--transition-fast);
}

#main_menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

#main_menu li a.sel {
  background: var(--color-primary-50);
  color: var(--color-neutral-700);
  font-weight: var(--font-weight-medium);
  text-shadow: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

li#mnu_settings a {
  background: var(--color-success-600);
  color: var(--color-white);
  text-shadow: none;
  margin-left: var(--space-5);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
}

li#mnu_settings a:hover {
  background-color: var(--color-success-700);
}

li#mnu_settings ul {}
li#mnu_settings ul li { }

#h1 div.page-resource-uri {float: left}

#hd_l {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

#hd_r {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

#hd_r img { margin: var(--space-4) var(--space-3) 0 0;
            vertical-align: middle;
            padding-bottom: var(--space-1);
            background-color: var(--color-white); }

a.logo { margin-left: var(--space-3); }

#opl_logo { border: 0; }

#MD { width: 100%;
      margin-top: 0;
      background-color: var(--color-white);
      padding-bottom: var(--space-3);
      margin-left: auto; margin-right: auto;}

#MD tr:hover {
  background-color: var(--color-primary-50);
}

#MD div#settings { 
  margin: 10px;
}

#MD div#settings label { }
#MD div#settings label.ckb {}
#MD div#settings input.ckb {}
#MD div#settings ul { list-style-type: none; padding: 0;}
#MD div#settings ul li { padding: 0;}
#MD div#settings td:hover {background: inherited}
#MD div#settings tr:hover {background: inherited}
#FT { width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-top: 1px solid var(--color-primary-700);
      padding-top: var(--space-3); }

#ft_b { padding-top: var(--space-3); }

span.copyright {
  font-size: var(--font-size-xs); /* 12px, similar to 8pt */
  color: var(--color-neutral-500);
}

div.page_resource_info {
  float: left; clear: left;
  text-align: left;
  margin: var(--space-4);
}

div.page_resource_info h2 { display: inline; padding: 0;}

td.rnk { margin: 0; padding: 0; }
img.rnk { float: left; clear: left; margin-top: var(--space-px);}

/*#new_srch { margin-top: 40px; margin-bottom: 40px; width: 100%; text-align: center;}
label.left_txt { margin-right: 10px;}*/

div.expln { margin: 0 100px 5px 100px;}
div.doc_ctr { margin: var(--space-3); }
div.main_actions { float: left; clear: left; width: 100%; text-align: left;}
div.main_expln { float: left; clear: left; text-align: center; width: 100%;}

#res { float: left; clear: left; margin: var(--space-2) 0 0 0; width: 78%}
#res h3 { margin-top: 0; margin-left: var(--space-2);}

#new_search_txt {}

#new_uri_txt {}
#new_lbl_txt {}

#user_map { position: relative;width: 100%; height:650px; }

input.thr { background-image: url(/fct/images/thrb.gif); 
            background-repeat: no-repeat; 
            background-position: right;}

table.result {
  clear:left;
  width: 100%;
  margin: var(--space-1);
  font-size: var(--font-size-sm); /* 14px, similar to 9pt */
}
table.result td {
  max-width: 350px;
  overflow: hidden;
  font-size: var(--font-size-sm);
  text-align: left;
  width: 175px; /* 50% of original 350px default for spreadsheet view */
}
span.iri { font-weight: var(--font-weight-semibold) }
span.value { font-weight: var(--font-weight-semibold) }

table.dataset_list td { margin: 0 10px 0 10px }
th { text-align: left; }

div.subj_nav { float: left; width: 100%;}

p.subj_desc {
  float: left;
  clear: left;
  width: auto;
  text-align: left;
  font-style: italic;
  font-size: var(--font-size-xl); /* 20px, similar to 12pt */
  line-height: var(--line-height-relaxed);
  margin: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-900);
}

p.subj_delim {
  float: left;
  clear: left;
  margin-left: 10px;
  width: 750px;
  border-bottom: 1px solid var(--color-neutral-900);
}

div.subj_nav div.nav {
  float: right;
  clear: right;
  text-align: left;
  width: 200px;
  margin-top: 10px;
  border-left: 1px solid var(--color-neutral-300);
}

div.subj_nav div.nav ul { list-style-type: none; padding: 0; margin-left: 10px;}
div.subj_nav div.nav h3 { text-align: left; margin-left: 10px; }

table.description {
  text-align: left;
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  border: none;
  box-shadow: none;
  background: transparent;
}
table.description td {
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-neutral-100);
}
table.description td.property { white-space: nowrap;}
table.description ul.obj {
  padding: 0;
  margin-top: 0;
  margin-left: var(--space-3);
  list-style-type: none;
}

#main_srch {
  margin-top: var(--space-4);
  margin-left: auto;
  margin-right: auto;
}

#TAB_ROW {
  display: flex;
  gap: var(--space-1);
  align-items: flex-end;
  width: 780px;
  margin-left: auto;
  margin-right: auto;
}


div.tab {
  position: relative;
  min-width: 12em;
  padding: var(--space-3) var(--space-4);
  padding-bottom: var(--space-1);
  cursor: pointer;
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: var(--transition-fast);
}

div.tab:hover {
  background-color: var(--color-neutral-200);
}

div.tab a { text-decoration: none; white-space: nowrap; color: inherit; }

div.tab_selected {
  background-color: var(--color-white);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--color-neutral-300);
  border-bottom: 2px solid var(--color-white);
  position: relative;
  z-index: 1;
}

#TAB_ROW div.tab_act { margin-left: auto; padding-top: var(--space-3);}

#TAB_CTR { width: 800px; margin-left: auto; margin-right: auto; text-align: center;}
#TAB_CTR table { width: 100%; }

body.usage_page p.subj_desc { width: 900px; }
body.usage_page #TAB_ROW { margin-left: 10px; width: 920px}
body.usage_page #TAB_CTR { margin-left: 10px; width: 920px}
body.usage_page td { text-align: left;  margin: 0 10px 0 10px; margin-left: 10px;width: auto;}
body.usage_page th { text-align: left;  margin: 0 10px 0 10px; margin-left: 10px;width: auto;}


div.tab_page {
  width: 100%;
  min-height: 150px;
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  border-top: 2px solid var(--color-neutral-300);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

div.tab_page form {
  margin-top: var(--space-10);
}
div.tab_page form label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}
label.left_txt {
  font-weight: var(--font-weight-semibold);
}

div.pg_b_nav { float: left; clear: left; width: 100%; margin-left: var(--space-3);}

div.ac_info { margin-top: var(--space-5);}
div.ac_info img.txt_i { vertical-align: middle; margin: var(--space-1);}

div.autocomplete_list {
  padding: 0;
  margin: 0;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
  list-style-type: none;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

div.ac_list_option {
  text-align: left;
  margin: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-neutral-700);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}


div.ac_list_option:first-child { background-color: var(--color-primary-500); color: var(--color-white); }

div.ac_list_option span.opt_lbl { color: inherit; margin-right: 10px; font-weight: var(--font-weight-medium); text-align: left;}

div.ac_list_option span.opt_iri { font-style: italic; font-size: var(--font-size-xs); opacity: var(--opacity-80); text-align: left;}

div.ac_list_option:first-child span.opt_lbl { color: inherit; margin-right: 10px;}
div.ac_list_option:first-child span.opt_iri { color: inherit; margin-right: 10px;}

div.ac_list_option:hover { color: var(--color-white); background-color: var(--color-primary-500)}
div.ac_list_option:hover span.opt_lbl { color: inherit };
span.descr {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
  margin-top: 0;
}

#result_nfo {
  float: left;
  clear: both;
  width: 100%;
  margin-top: var(--space-2);
  margin-left: var(--space-2);
  color: var(--color-primary-700);
}

#fct_nav {
  float: right;
  margin-left: var(--space-3);
  margin-top: var(--space-1);
  padding-left: var(--space-1);
  width: 200px;
  border-left: 1px solid var(--color-primary-700);
}

#fct_nav h3 { margin: 0; padding: 0; color: var(--color-primary-700); }

#fct_nav ul { list-style-type: none; padding: 0; margin: 0;}
#fct_nav ul li { list-style-type: none;}
#fct_nav ul li a { text-decoration: none;}
#fct_nav ul li a:hover { text-decoration: underline;}
#fct_nav ul { margin-top: var(--space-2); }
#fct_nav ul.n2 { border-top: 1px solid var(--color-neutral-300);}

#FT img { border: 0;}

input.num { text-align: right;}

div.thr_ctr { display: inline; width: 16px; border: 0; padding: 0;margin: 0;}

.dlg { background-color: var(--color-white);
       border: 1px solid var(--color-neutral-300);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-xl);
       margin: var(--space-3) auto;
       width: 90%;
}
.dlg .title { margin: 0;
              text-align: center;
              background: linear-gradient(to bottom, var(--color-neutral-50), var(--color-neutral-100));
              border-bottom: 1px solid var(--color-neutral-300);
              border-radius: var(--radius-lg) var(--radius-lg) 0 0;
              padding: 2px 0 2px 0;}
.dlg .title h2 { color: var(--color-neutral-900)}
.dlg form { margin: 0; width: 100%;}
.dlg .btn_bar { margin: 0;
                padding-top: 2ex;
                width: 100%; height: 6ex;
                border-top: 1px solid var(--color-neutral-300);
                background-color: var(--color-neutral-50);
                border-radius: 0 0 var(--radius-lg) var(--radius-lg);
                text-align: right; }
.dlg .btn_bar button { margin-right: var(--space-1); }
.dlg .btn_bar input[type="submit"] { margin-right: var(--space-1-5); }
.dlg .title h2 {
  font-size: var(--font-size-lg); /* 18px, similar to 10pt */
  font-weight: var(--font-weight-semibold);
  margin: 0;
  color: var(--color-neutral-900);
}
.dlg .expln { margin-left: 120px }
.dlg .fm_sect { margin: 0 var(--space-3) var(--space-4) var(--space-3); border-top: 1px solid var(--color-neutral-300)}
.dlg .fm_sect:first-child { border: 0; margin-top: var(--space-5);}
.dlg .fm_sect h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}
.dlg label.left_txt { float: left; clear: left; width: 120px;}
.dlg .ctl_expln {
  margin-left: 120px;
  font-size: var(--font-size-xs);
  font-style: oblique;
}
 
#opts_ctr {
  width: 100%;
  text-align: center;
  background-color: var(--color-white);
}

#opts {
  margin: auto;
  border: 1px solid var(--color-neutral-700);
  text-align: left;
  font-size: var(--font-size-sm);
  width: 650px;
}

#cond_form {
  width: 100%;
  border-top: 1px solid var(--color-neutral-300);
  margin-top: var(--space-4);
  margin-left: var(--space-2);
}

button.in_set_cond_b {
  margin-left: var(--space-3);
}

a.in_del:hover { cursor: pointer; }

#opts input[type="checkbox"] { margin-left: 120px; }

#res .btn_bar {
  text-align: right;
  border-top: 1px solid var(--color-neutral-300);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
}

#res .btn_bar_top {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: var(--space-3);
}

#res .pager .stats {
  font-style: italic;
}

#res .pager button {
  background-color: var(--slate-100);
  background-image: none;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  color: var(--slate-700);
  font: bold 11px Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  text-align: center;
  text-shadow: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

#res .pager button:hover:not(:disabled) {
  background-color: var(--slate-200);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

#res .pager button:disabled {
  color: var(--color-neutral-500);
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

div.empty_result {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  margin: var(--space-5);
}

div.dbg { 
  display: none; }

/*div.dbg { padding: 10px; background-color: yellow; border: 1px solid black}*/

div#pager { margin-top: 10px; float: right;}

div#pager a { background-color: var(--color-neutral-200);
              padding: 2px;
              border: 1px solid var(--color-primary-700);
              padding: 3px 5px 3px 5px;
              width: auto;
              text-decoration: none;
              text-align: center;}

h3#view_info {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

div#top_ctr {
  font-size: var(--font-size-base);
  background-color: inherit;
  margin-top: 0; padding-top: var(--space-1);
  padding-left: var(--space-2); padding-right: -4px;
}

#top_ctr ul {
  list-style-type: none;
}

#top_ctr ul .focus {
  font-weight: var(--font-weight-bold);
  color: var(--color-success-600);
}

div.error_msg { margin: 5px; }
div.error_msg h2 {}
div.error_msg div.body { margin: 10px;}
div.error_msg div.nav { margin-top: 10px;}
div.error_msg div.diag {
  margin: var(--space-3);
  font-size: var(--font-size-xs);
}
div.error_msg div.diag h3 {}
#err { color: var(--color-error-600); font-size: 120%; }

div.facet_ctr {
  float: left;
  margin-left: 4px;
}

div.facet_ctr:first-child { margin-left: 0;}

.facet_hd {
  margin: 0;
  text-align: center;
  border-top: 1px solid var(--color-neutral-700);
  border-left: 1px solid var(--color-neutral-700);
  border-right: 1px solid var(--color-neutral-600);
  background-color: var(--color-neutral-400);
  background-image: url(/images/dlg_title_bkg.png);}

div.facet {
  float:left;
  height: 20em;
  width: 394px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-white);
  border: 1px inset;
}

.plink_a {margin-left: 1em}
.sparqlhpv_a {margin-left: 1em}
.pivotedit_a {margin-left: 0.1em}

div#sparql_link { margin-top: 10px; float: right;}
div#sparql_link a {
  background-color: var(--color-neutral-200);
  padding: 2px;
  border: 1px solid var(--color-primary-700);
  padding: 3px 5px 3px 5px;
  width: auto;
  text-decoration: none;
  text-align: center;}

div.featured { margin: 5px; }
div.featured .expln { text-align: left;}
#featured_list { font-size: var(--font-size-sm);}
#featured_list td { font-size: var(--font-size-sm);}

table.sparql_qry_list { width: 78%; margin-left: auto; margin-right: auto}
table.sparql_qry_list td.title { font-weight: var(--font-weight-semibold); }  
table.sparql_qry_list td.expln { width: 50%; }  

#demo_queries_ctr { margin: 10px; min-height: 200px}

ul.demo_qry_list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.demo_qry_list div.expln { margin: 10px; }
ul.demo_qry_list pre { margin: 10px; }

div#dbg_output {
  float: left;
  clear:left;
  font-size: var(--font-size-xs);
}

span.advisory { font-weight: var(--font-weight-semibold); }

span.pivot_page_opts a, 
span.pivot_page_size a, 
span.pivot_qrcode_opts a,
span.pivot_link_opts a { text-decoration: none; }

span.pivot_page_opts a:hover,
span.pivot_page_size a:hover,
span.pivot_qrcode_opts a:hover,
span.pivot_link_opts a:hover { text-decoration: underline; }

span.pivot_page_opts a:disabled,
span.pivot_page_size a:disabled,
span.pivot_qrcode_opts a:disabled,
span.pivot_link_opts a:disabled { color: var(--color-neutral-500); }

div#nav {
    float: left;
    clear: left;
    text-align: center;
    margin-left: 50px;
    padding: 1rem 0;
    background-color: var(--color-neutral-50);
    border-top: 1px solid var(--color-neutral-200);
    position: sticky;
    bottom: 0;
    z-index: var(--z-default);
    width: 100%;
    box-sizing: border-box;
}

div#nav button {
    background-color: var(--slate-100);
    background-image: none;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    color: var(--slate-700);
    font: bold 11px Geneva, Verdana, sans-serif;
    line-height: 1;
    padding: var(--space-1) var(--space-3);
    text-align: center;
    text-shadow: 0 1px 0 var(--color-white);
    cursor: pointer;
    transition: var(--transition-fast);
    margin: 0 0.25rem;
}

div#nav button:hover:not(:disabled) {
    background-color: var(--slate-200);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

div#nav button:disabled {
    color: var(--color-neutral-500);
    opacity: var(--opacity-50);
    cursor: not-allowed;
}

div#nav input[type="text"] {
    padding: 0.375rem 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 3rem;
}

div#nav input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px rgba(var(--primary-500-rgb), 0.15);
}

div#nav input[type="text"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

a#sp_link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}
a.desc_permalink {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

#qrcode_img { 
  border: none;
  margin-left: auto; 
  margin-right: auto; 
  display: block; 
  }

#qrcode_thumb {
  position:fixed; top:80px; right: 10px; z-index: 0;
  margin-top: 10px; 
  margin-right: 10px; 
  }

#FT_share { margin: auto; width: 400px}

#fct_form { margin-top: 1ex }

.addthis_toolbox { margin: 20px 10px auto; }

#FT_share .addthis_toolbox { margin: 0 }

#val_login_status {
  padding: 5px 0 0 0;
  color: inherit;
  text-shadow: none;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#val_login_status a {
  color: inherit;
  text-decoration: none;
}

#val_login_status a:hover { color: inherit; }

/* Modern login status classes - backward compatibility */
.login-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.login-status-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s;
  background-color: transparent;
  border: 1px solid transparent;
}

.login-status-link:hover {
  color: #0f172a;
  background-color: #f8fafc;
}

.login-status-user {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid transparent;
}

.login-status-user:hover {
  color: #0f172a;
  background-color: #f8fafc;
}

.login-status-disabled {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #64748b;
  font-weight: normal;
  font-size: 13px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: not-allowed;
  opacity: 0.8;
  background-color: rgba(203, 213, 225, 0.06);
}

.login-status-text {
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
}

.login-status i {
  font-size: 14px;
  width: 1em;
  text-align: center;
}

img.dicon { border-width:0; height:20px; vertical-align: middle; }