/* ===== common configuration */

html, body, div, p, input, textarea {
  -webkit-box-sizing: border-box ;
     -moz-box-sizing: border-box ;
          box-sizing: border-box ;
}


body {
  font-family: Calibri, Arial, Sans-Serif ;
  font-size-adjust: 0.47 ;
  /*
    For better appearance in the browsers without support of font-size-adjust,
    let's limit its effect to the cases when the first font (in the list of fonts)
    is not found only.

    So we will need to specify 'font-size-adjust' property on any overriding
    of the 'font-family' (to avoid inheration the value specified here
    and breaking the above convention).

    See also: https://www.thoughtco.com/aspect-ratio-table-common-fonts-3467385
    (It seems that ratio for Verdana there is incorrect)
  */
  font-size: medium ;
}

table { border-collapse: collapse; }
table p { margin: 0.5ex 0; }
td { vertical-align: top; }

a img { border: none; }

a[href] {
  color: rgb(33, 42, 114);
  border-bottom: 1px solid rgb(33, 42, 114);
  text-decoration: none;
  padding: 0 1px 0;
}

a.external[href]:after {
  content: " ⇗ ";
}

a:visited { color: rgb(120, 110, 150); border-bottom-color: rgb(120, 110, 150); }

:target {
  border-bottom: 2px dotted gray;
}

p *:target, h2:target {
  background-color: RGB(249, 201, 16);
  border: none;
}

input[type=radio]:focus { outline: 1px dotted gray; } /* for FF */

/* for IE10 */
label { cursor: default; }
label:hover input { outline: 1px dotted gray; }


/* Prevent line breaks between a radio button and its label
   -- another approach is to ensure turning off xsl:autput/@indent */
label.bale
    { white-space: nowrap; }
label.bale > .label
    { white-space: normal; }


p, li { max-width: 50em; }
/*
p { margin-left: 2em; }
*/
h1 { max-width: 30em; /* h1 font is big */ }
h2 { max-width: 40em; }
h3 { max-width: 43em; }
h4 { max-width: 47em; }

/* ===== common blocks */

.line > *  {
  display: inline-block; display: inline !ie7;
  vertical-align: top;
}

.line div.txt   { padding: 2em 3em;  }
.line div.right { padding-left: 5em; padding-right: 1em; }
.line a[href][id=a-logo] { border-bottom: none; }


menu.top {
  font-family: Arial, Sans-Serif;
  font-size-adjust: none; /* since uppercase only is used here */
  font-size: 0.85em;
  text-transform: uppercase;
  background-color: #192F7C ;
  background-image: linear-gradient(to bottom, #2C347D, #15193B);
  margin: 0;
  padding-left: 0;
  padding-right: 0.2em;
  min-height: 3ex; /* for IE7 */
}
menu.top, menu.top a {
  color: #EDEDED;
}
menu.top a {
  /* override a[href] */
  text-decoration: none;
  border-bottom: none;
  padding: 0;
}

menu.top > li {
  display: inline-block;
  margin: 0.6em 0;
  padding: 0.4em 2em;
  border-right: solid 2px rgba(110, 110, 150, 0.5) ;
  border-left:  solid 2px rgba(110, 110, 150, 0.5) ;
  margin-right: -2px; /* collapse border */
}

/* pretty wrap for main menu */
menu.top > li {
  min-width: 13em; /* in default box-sizing content-box */
}
menu.top {
  padding-left: calc(  20px +  2*2em ); /* 'Home' icon */
}
menu.top > li.slim:first-of-type {
  box-sizing: border-box;
  margin-right: 0;
  margin-left:  calc( -20px + -2*2em );
  min-width:    calc(  20px +  2*2em );
  border: none;
}
menu.top > li > a {
  display: inline-block;
  width: 100%; /* IE7 handles it bad */
}
/* --- */


menu.path {
  padding: 0;
  padding-top: 0.5em;
  margin: 0;
  margin-bottom: 3ex;
}
menu.path, menu.path a {
  color: #757575;
}
menu.path > li {
  display: inline-block; display: inline !ie7;
}
menu.path > li:after {
  content: " > ";
  margin-right: 0.3em;
}

menu.bottom {
  background: #C6C9CE ;
  padding: 1ex 1em;
  margin: 0;
  min-height: 4ex;
}
menu.bottom > li {
  display: inline-block; display: inline !ie7;
}
menu.bottom > li.right {
  float: right;
}
menu.bottom a {
  color: #212A72;
}

/* ===== huge blocks */

@viewport {
  width: 100vw; /* see also: 'extend-to-zoom' and 'device-width' */
  zoom: 1;
}

html {
  display: flex;
  /*
  justify-content: center;
    -- it works bad with horizontal scroll in FF and GH
  */
}
body {
  margin: 0 auto;
  padding: 0.3em ;
}
body > header {
  background-color: white ;
  display: block;
}
article {
  background-color: #EDEDED ;
  /* display: block; /* for ie8 */
  display: block;
  padding-bottom: 0.5em;
  padding-left: 2em;
  padding-right: 1em;
}
body > footer {
  background-color: #E3E3E5 ;
  display: block;
  padding: 0;
  padding-bottom: 1ex;
}
body > footer p {
  margin-left: 2em;
}
/* ===== media tuning */

@media (max-width:800px) { /* logo2 width is 390px */
  #a-logo { display: none; }
  /*
  #a-logo img { display: none; }
  body { padding-left: 0; }
  */
}

@media (min-width:800px) {
  article { min-width: 600px; }
}

@media print {
  body > header
, body > footer
, body > article > menu
    { display: none; }
  body > article
    { background-color: white; }
}

/* ===== elements */

button.main, a.main, a.button {
  font-weight: bold;
  padding: 0.1em 1em;
  color: #EDEDED;
  background-color: #C0504D;
  background-image: linear-gradient(to bottom, #FF784E, #9A0C08);
  /*
  border: #8C3836 outset 0.1em ;
  */
  border-radius: 0.3em;
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  margin: 0.1em 1em;
  display: inline-block;
  white-space: nowrap;
}
button.main, a.main {
  font-size: 1.2em;
}
button.main {
  text-transform: capitalize;
  border-width: 1px;
  opacity: 0.8;
}
button.main:hover { opacity: 1; }

a.main.disabled, button.main[disabled] {
  background-color: GrayText ;
  background-image: none ;
}


h1 {
  font-family: "Calibri", "MS Trebuchet", sans-serif;
  font-size-adjust: none; /* since uppercase only is used here */
  font-size: 1.6em;
  font-weight: bold;
  text-transform: uppercase;
  color: #2C347D;
  margin-bottom: 0.25em;
}
h2, p.h2 {
  font-size-adjust: none;
  font-size: 1.3em;
  text-transform: uppercase;
  color: #2C347D;
}

.attract {
  color: rgb( 138, 48, 35 ); /* #C0504D #9A0C08 */
}

.na { /* 'na' for 'Not Available' */
  font-style: italic;
}


/* ===== style tweaks for different sections */

/* === level 1 -- supervisor */
body.section-manage menu.top {
  border-bottom: 1ex solid maroon ;
}

/* === level 2 -- TPC members, IPC members, and similar */
body.section-review menu.top {
  border-bottom: 1ex solid darkgoldenrod ;
}

/* ===== specifics */

iframe.authbox {
  width: 37em;
  height: 20ex;
  overflow: hidden;
  border: none;
}

.welcome { max-width: 15em; color: rgb(44, 52, 125);  font-size: 130%; font-weight: 200; }

p.buttons { margin-bottom: 0.5em; }
p.buttons input, p.buttons button { margin: 1em 1em 1em 0; }

 p button { margin: 0.4em; margin-top: 2em; }

p.note { font-style: italic; }

/* ===== */

table.resultset th { text-align: left; vertical-align: top; }
table.resultset th { padding-left: 0.5em; padding-right: 0.5em; border-bottom: 1px solid DarkGray; }
table.resultset td { padding: 0.5em; border-bottom: 1px solid DarkGray; padding-left: 0.52em; padding-bottom: 0.2em;}
table.resultset-off tr:active { background-color: #DFEBF4; }
table.resultset caption { padding-top: 1em; text-align: left; text-transform: uppercase; font-size-adjust: none; font-weight: bold; color: #00275D; } /* like h2 */
table.resultset { margin-bottom: 0.5em; min-width: 70%; }
table.resultset td a[href] { border-bottom: none; }

table.resultset .col-title      { min-width: 15em; }
table.resultset .col-company    { min-width:  8em; }
table.resultset .col-author     { min-width:  6em; }

table.resultset .email {
  display: inline-block;
  vertical-align: top;
  max-width: 8em;
  word-wrap: break-word; /* new name is overflow-wrap */
  font-size: 80%;
}

dd { margin-left: 1.5em; margin-bottom: 0.5em; margin-top: 0.2em; }
dd ul { padding-left: 1em; margin: 0; }
dd p  { margin-top: 0; margin-bottom: 0.2em; }

dt::first-letter { text-transform: uppercase; font-size-adjust: none; }
dt, p.h3 {
  font-family: Verdana, Arial;
  font-size-adjust: 0.55;
  font-size: 0.8em;
  font-weight: bold;
  color: #00275D;
} /* like h3 */
dt { margin-top: 1em; }
dl { max-width: 40em; }

p.descr { white-space: pre-wrap; } /* description on a session, etc */