/* Instructions */

.main-point {
  margin-bottom:   1em;
  padding:         0.5em;
  border:          0.15em solid #006CC8;
  border-radius:   0.5em;
  color:           #202020;
}

.instructions li p {
  margin-bottom:   0;
  font-weight:     bold;
}

.instructions span {
  border-bottom:   1px dotted #4080FF;
  color:           #4080FF;
  cursor:          pointer;
}

.instructions ol li {
  padding-top:     0.2em;
}

.instr-more {
  height:          0;
  overflow:        hidden;
  transition:      height .2s linear;   /* NOTE: not working when changing from/to 'auto' or 'initial' */
}


/* Prime Table */

.prime-table {
  width:           98%;
  text-align:      center;
  background:      #B0B0B0;
  table-layout:    auto;
}

.prime-table th {
  min-width:       1em;
  height:          1em;
  background:      #E0E0E0;
}

.prime-table th[data-url] {
  text-decoration: underline;
  color:           #4080FF;
  cursor:          pointer;
}

.prime-table td {
  background:          white;
  cursor:              default;
}

.prime-table .primary-row td {
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
}

.prime-table .primary-row td.item-descr {
  cursor:          pointer;
}

.LTR .item-descr {
  width:           15em;
}

.RTL .item-descr {
  width:           10em;
}

.myval {
  width:           1em;
  margin:          0;
  padding:         0;
}

.myval select {
  width:           2.8em;
  margin:          0;
  padding:         0;
  border:          0.15em solid #60A0D0;
}

.myval select:hover {
  border:          0.15em solid #80C0FF;
}

.myth {
/*TEMP(redundant?)
  border:          0.15em solid #4080FF;
  color:           #4080FF;
  cursor:          pointer;
*/
}


.item-info-link {
  font-style:      normal;
  border-bottom:   1px dotted #4080FF;
  color:           #4080FF;
  cursor:          pointer;
}

.item-info {
  display:         none;
  position:        fixed;
  top:             15%;
  color:           black;
  border:          0.15em solid black;
  box-shadow:      0.5em 0.5em 1em gray;
  background:      #C0E0FF;
}

.item-info h3 {
  width:           100%;
  margin:          0.3em;
}

.item-info .x-button {
  display:         inline-block;
  position:        absolute;
  margin:          0.2em;
  padding:         0.2em 0.35em;
  text-align:      center;
  font-size:       120%;
  font-weight:     bold;
  background:      #EEE;
  border:          0.15em solid gray;
  border-radius:   0.4em;
  cursor:          pointer;
}

.RTL .item-info .x-button {
  left:            0;
}

.LTR .item-info .x-button {
  right:           0;
}

.item-info .x-button:hover {
  background:      white;
}

.item-info table {
  width:           98%;
  margin:          1%;
}

.item-info table th {
  text-align:      center;
  background:      #CCC;
}

.item-info .val-val {
  width:           2em;
  height:          2em;
  text-align:      center;
  background:      white;
}

.item-info .val-descr {
  padding:         0.3em;
  background:      white;
}

.item-info .val-title {
  font-size:       110%;
  font-weight:     bold;
  color:           #006;
}

.item-info .val-more {
}

.item-info p {
  margin-top:      0.3em;
  margin-bottom:   0.5em;
  color:           black;
}



td.embed-info {
  padding-bottom:  2.5em;
  color:           black;
  background:      #C0E0FF;
}

.embed-info h3 {
  width:           100%;
  text-align:      initial;
  margin:          0.3em;
}

.embed-info .x-button {
  display:         inline-block;
  position:        absolute;
  margin:          0.2em;
  padding:         0.2em 0.35em;
  text-align:      center;
  font-size:       120%;
  font-weight:     bold;
  background:      #EEE;
  border:          0.15em solid gray;
  border-radius:   0.4em;
  cursor:          pointer;
}

.RTL .embed-info .x-button {
  left:            0;
}

.LTR .embed-info .x-button {
  right:           0;
}

.embed-info .x-button:hover {
  background:      white;
}

.embed-info table {
  width:           98%;
  margin:          1%;
}

.embed-info table th {
  text-align:      center;
  background:      #CCC;
}

.embed-info .val-val {
  width:           2em;
  height:          2em;
  text-align:      center;
  background:      white;
}

.embed-info .val-descr {
  padding:         0.3em;
  text-align:      initial;
  background:      white;
}

.embed-info .val-title {
  font-size:       110%;
  font-weight:     bold;
  color:           #006;
}

.embed-info .val-more {
}

.embed-info p {
  margin-top:      0.3em;
  margin-bottom:   0.5em;
  color:           black;
}



.LTR .legend {
  margin-left:      9em;
}

.RTL .legend {
  margin-right:     9em;
}

.legend {
  white-space:     nowrap;
}

.legend span {
  margin:          0;
  padding:         0.1em 0.8em;
  font-size:       70%;
  white-space:     nowrap;
  border:          0.1em solid gray;
}

.prime-table td.state-0,.state-0 { color: black;  background: white;   }
.prime-table td.state-1,.state-1 { color: white;  background: #F22;    }
.prime-table td.state-2,.state-2 { color: black;  background: #FFF890; }
.prime-table td.state-3,.state-3 { color: white;  background: #0D0;    }


.state-0 b {
  font-weight:       normal;
  color:             red;
}


/* Results table (aka tri-color map) */

.results-table {
  width:           98%;
  margin-top:      1em;
  text-align:      center;
  background:      #B0B0B0;
}

.results-table caption {
  margin-bottom:   0.2em;
  color:           #0040B0;
}

.results-table th {
  background:      #E0E0E0;
}

.results-table td {
  width:           20%;
  background:      #FFFFFF;
}


/*TEMP(unused)
.party-bar {
  margin:          6px;
  border:          black solid 2px;
  background:      #F0F0F0;
  cursor:          default;
  border-radius:   5px;
}

.party-bar .pb-line1 {
  font:            bold 23px Times New Roman;
}

.party-bar .pb-line2 {
  font:            normal 14px Times New Roman;
}

.party-bar .tip {
  display:         none;
  position:        absolute;
  right:           0px;
  top:             1em;
  opacity:         1;
  filter:          Alpha(opacity=100);
}

.party-bar:hover .tip {
  display:         block;
  border:          solid 1px black;
  color:           black;
  background:      #E0E0E0;
  opacity:         1;
  filter:          Alpha(opacity=100);
}

.my-party-bar {
  margin:          3px;
  font:            bold 18px sans-serif;
  border:          #2040D0 solid 2px;
  color:           #2040D0;
  background:      #B0F0FF;
  opacity:         0.25;
  filter:          Alpha(opacity=25);
  cursor:          default;
  border-radius:   5px;
}

.table-separator {
  width:           100%;
  height:          10px;
  margin-top:      50px;
  margin-bottom:   70px;
  background:      #A0C0E0;
}
*/


/* Summary (results) table */

.sum-table-descr {
  margin-bottom:   0.5em;
}

.sum-table-descr p {
  margin:          0.3em;
}

#sum-table td {
  width:           3%;
}

#sum-table td p {
  margin:          0 20%;
  padding-top:     0;
  text-align:      center;
}

.st-rating  {
  direction:       ltr;
  padding:         0.5em 0;
  font-size:       140%;
  font-weight:     bold;
  color:           #006;
}


/* Share results box */

.share-results-box {
  width:           70%;
  margin-left:     15%;
  margin-right:    15%;
  margin-top:      1em;
  text-align:      center;
}

.share-results-button {
  padding:         1em;
  font-size:       150%;
  color:           #E0E0E0;
  background:      #006CC8;
  border-radius:   0.5em;
  text-shadow:     1px 1px 1px rgba(0,0,0,0.6);
  cursor:          pointer;
  transition:      background .2s ease-in-out;
}

.share-results-button:hover {
  color:           #FFFFFF;
  background:      #0090F0;
}

#share-results-box {
  display:         none;
}

#share-results-box p {
  margin-bottom:   0.2em;
}

#share-results-box textarea {
  width:           100%;
  height:          3em;
  padding:         0.3em;
  border:          0.15em solid black;
}


.prime-table .primary-row td:hover {
  box-shadow:        0px 0px 0.5em #00F;
}

.prime-table .primary-row th:hover {
  box-shadow:        0px 0px 0.5em #80F;
}

#sum-table.prime-table td:hover {
  box-shadow:        none;
}



.info-box {
  display:           none;
  padding:           0.6em;
  text-align:        initial;
  white-space:       pre-wrap;
  line-height:       120%;
  font-weight:       normal;
  color:             black;
  background:        #FFFFF8;
  border:            0.15em solid black;
}

.info-box .head {
  margin:            0 0 0.6em 0;
  font-size:         120%;
  font-weight:       bold;
  color:             #40A;
}

.info-box .foot {
  margin:            0.8em 0 0 0;
  font-size:         80%;
  font-weight:       bold;
  color:             #40A;
}


.prime-table th:hover,
.prime-table td:hover {
  position:          relative;
}

:hover>.info-box {
  display:           inline-block;
  position:          absolute;
  left:              100%;
  width:             30em;
  box-shadow:        -2px 3px 10px rgba(0,0,0,0.7);
}

:hover>.info-box {
  top:               100%;
  bottom:            initial;
}

.RTL :hover>.info-box {
  right:             100%;
}

:hover>.info-box.far-cell {
  left:              initial;
  right:             100%;
}

.RTL :hover>.info-box.far-cell {
  right:             initial;
  left:              100%;
}


/*TEMP
:active>.info-box {
  display:           block;
	position:          fixed;
	top:               5px;
	left:              5px;
  width:             800px;
	outline:           100px solid rgba(0,0,0,0.7);
}
*/


@media only screen and (max-width: 768px) and (orientation: landscape), only screen and (max-width: 1024px) and (orientation: portrait)
{
  .myval select {
    width:           4em;
  }
}


@media only screen and (max-width: 768px)
{
  :hover>.info-box {
    width:            200px;
  }
}


@media only screen and (max-width: 1024px)
{
  :hover>.info-box {
    width:            350px;
  }
}


.feedback-invite {
  margin-bottom:      2em;
  font-size:          180%;
  text-align:         center;
}