/*

  Style sheet:
	docs/rmexa.css

  Purpose:
	Style sheet for RMEXA pages

  Copyright:
	Copyright (c) 2009 - 2018 Corpita Pty Ltd, Melbourne, Australia

  Notes:
	RMEXA colours (<<<TBD>>>):
	  Dark green: rgb(113,191,68) #71bf44
	  Light green: rgb(215,224,38) #d7e026

  History:
	2018-02-18 by SLJ
	    Add left and right vertical scroll bars
	2017-10-26 by SLJ
	    Add help
	2017-05-17 by Simon L Jackson
	    New version

*/


/* CSS reset */

*, *::after, *::before {
  box-sizing: border-box;
  border-collapse: collapse;
  font-size: 12pt;
}

* {
  margin: 0;
  padding: 0;
}

:focus {
  outline: none;
}


/* Primary classes */

html {
  overflow: hidden;
}

body {
  background-color: rgb(127,127,127);
  font-family: "Open Sans", sans-serif;
  font-size: 12pt;
}

h1 {
  font-size: 24pt;
  padding-bottom: 12pt;
}

h2 {
  font-size: 18pt;
  padding-bottom: 9pt;
}

h3 {
  font-size: 14pt;
}

a {
  color: rgb(0,0,0);
  text-decoration: underline;
}

a:active,
a:focus,
a:hover {
  color: rgb(63,63,63);
}

li {
  padding-bottom: 5pt;
}

ul {
  padding-bottom: 5pt;
}

p {
  padding-bottom: 10pt;
}

p span {
  vertical-align: top;
}

p span+input.romberbutton {
  margin-left: 5pt;
  margin-top: -1pt;
}

input,
select {
  font-size: 12pt;
}

ol,
ul {
  padding-left: 20pt;
}


/* Page layout */

div#rmexaouter {
  background-color: rgb(255,255,255);
  margin: 10pt auto 10pt auto;
  height: calc( 100vh - 20pt);
  width: 960pt;
}

div#rmexapopup {
  background-color: rgb(255,255,255);
  margin: 10pt auto 10pt auto;
  width: 570pt;
}

div#rmexatop {
  padding: 10pt;
}

div#rmexaouter div#rmexatop {
  height: 60pt;
}

div#rmexapopup div#rmexatop {
  height: 40pt;
}

div#rmexatop h1 {
  color: rgb(0,128,0);
  display: inline-block;
  font-size: 30pt;
  padding: 10pt 0 0 45pt;
  vertical-align:top;
}

div#rmexamiddle {
}

div#rmexamiddle>div {
  float: left;
}

div#rmexamiddle div.rmexaleft {
/*  background-color: rgb(255,255,0); */
  height: calc( 100vh - 170pt );
  overflow-y: auto;
  margin-top: 60pt;
  padding: 0 0 10pt 10pt;;
  width: 150pt;
}

div#rmexamiddle div#rmexamain {
/*  background-color: rgb(255,0,255); */
  float: left;
  height: calc( 100vh - 120pt );
  overflow-y: scroll;
  padding: 10pt 0 10pt 10pt;
  width: calc( 100% - 150pt );
}

div#rmexapopup div#rmexamiddle div#rmexamain {
  width: calc( 100% - 20pt );
}

div#rmexamiddle div.rmexaright {
/*  background-color: rgb(0,255,255); */
  display: none;
  padding: 10pt 10pt 10pt 0;
  width: 20pt;
}

div#rmexamiddle::after{
  clear: both;
  content: ' ';
  display: block;
}

div#rmexabottom {
  height: 40pt;
}

div#rmexabottom>div {
  float: left;
}

div#rmexabottom div.rmexaleft {
/*   background-color: rgb(127,127,0); */
  padding: 10pt;
  width: calc( 100% / 2 );
}

div#rmexabottom div.rmexaright {
/*   background-color: rgb(0,127,127); */
  padding: 10pt;
  text-align: right;
  width: calc( 100% / 2 );
}

div#rmexabottom::after{
  clear: both;
  content: ' ';
  display: block;
}

div.rombermenu h3 {
  margin-top: 6pt;
}

div.rombermenu ul {
  list-style-type: none;
  margin-top: 6pt;
  padding-left: 0;
}

div.rombermenu h3+ul {
  margin-top: 0;
}

div.rombermenu ul li {
  padding-bottom: 0;
  padding-left: 6pt;
}

div.rombermenu ul li a {
  text-decoration: none;
}

div.rombermenu ul li a:active,
div.rombermenu ul li a:focus,
div.rombermenu ul li a:hover {
  text-decoration: underline;
}


/* Romber forms */

div.rombererror p,
div.rombererror li {
  color: #ff4444;
}

div.rombererror li {
  margin-left: 20pt;
}

.romberhide {
  display: none;
}

.romberview {
}

input.romberbutton {
  border: none;
  background-color: rgb(113,191,68); /* rgb(111,189,63) */
  color: rgb(255,255,255);
  cursor: pointer;
  margin: 1pt;
  min-width: 60pt;
  padding: 2pt 5pt 3pt 5pt;
  text-align: center;
  vertical-align: middle;
}

input.romberbutton:hover {
  background-color: rgb(215,224,38);
}

div.romberform,
div.rombertwocol {
  display: inline-table;
}

div.rombercontainer,
div.romberform {
  width: 100%;
}

div.romberform>div>div {
  vertical-align: top;
}

div.romberform>div>div>h3 {
  margin-left: 0;
  padding-left: 0;
}

div.romberform>div>div>h4,
div.romberform>div>div>p,
div.rombercheckbox>p {
  margin: 0 5pt 0 5pt;
  padding: 0 0 3pt 0;
  vertical-align: top;
}

div.romberform>div {
}

div.romberform>div:after,
div.romberoutersheet>div:after,
div.rombersplit>div:after,
div.rombertwocol>div>div:after {
  clear: both;
  content: ' ';
  display: block;
}

div.romberform>div>div,
div.romberoutersheet>div>div,
div.rombersplit>div>div,
div.rombertwocol>div>div {
  float: left;
}

div.romberform div.romberbutton,
div.romberform div.rombercompound,
div.romberform div.romberdisplay,
div.romberform div.romberfile,
div.romberform div.romberinfo,
div.romberform div.romberinput,
div.romberform div.romberitemlist,
div.romberform div.rombermessage,
div.romberform div.romberprompt,
div.romberform div.romberradioset,
div.romberform div.romberresult,
div.romberform div.romberselect,
div.romberform div.rombertextarea {
  padding-top: 5pt;
}

div.romberform div.romberbuttons {
  padding-top: 15pt;
  padding-bottom: 15pt;
  width: 100%;
}

div.rombercontainer h2,
div.rombercontainer h2+p,
div.romberform>div div.romberbutton h3,
div.romberform>div div.romberbutton h3+p {
  display: inline;
}

div.rombercontainer h2+p input {
  margin: -2pt 0 4pt 5pt;
}

div.romberform>div div.romberbutton h3+p input {
  margin-top: 0pt;
}

div.romberform div.rombercheckbox input.rombercheckbox {
  margin-top: 10pt;
  padding-top: 3pt;
}

div.romberform input.rombercompound,
div.romberform input.romberfile,
div.romberform input.romberinput,
div.romberform input.romberresult,
div.romberform select.compoundselect,
div.romberform select.romberitemlist,
div.romberform select.romberitemset,
div.romberform select.romberselect,
div.romberform textarea.rombertextarea {
  border: 0.5pt solid #bfbfcf;
  background-color: white;
  vertical-align: top;
}

div.romberform input.romberinput,
div.romberform input.romberresult,
div.romberform textarea.rombertextarea {
  padding: 1pt 3pt 2pt 3pt;
}
div.romberform input.romberinput,
div.romberform input.romberresult {
  height: 20pt;
}

div.romberform div.rombermessage:first-child {
  width: 100%
}

div.romberform div.rombermessage p input {
  margin-left: 4pt;
  margin-top: -2pt;
}

div.romberform div.romberprompt {
  text-align: right;
  width: 180pt;
}

div.romberform div.romberprompt+div {
  width: calc( 100% - 180pt - 20pt );
}

div.romberform div.romberradioset input.romberradioset {
  margin-top: -3pt;
}

div.romberform input.romberresult {
  background-color: transparent;
  border-width: 0pt;
}

div.romberform select.romberitemlist,
div.romberform select.romberitemset{
  padding: 1pt 3pt 2pt 3pt;
}

div.romberform select.romberselect {
  height: 20pt;
  padding: 1pt 3pt 2pt 2pt;
}

div.romberform div.rombercompound label,
div.romberform div.romberselect label {
  position: relative;
  top: 1pt;
}

div.romberform textarea.rombertextarea {
  padding-top: 1pt;
}

div.romberform>div>div.rombertextarea>p:first-child {
  padding-top: 3pt;
}

@-moz-document url-prefix() {
  div.romberform div.romberinfo,
  div.romberform div.rombermessage,
  div.romberform div.romberprompt {
    padding-top: 6pt;
  }
  div.romberform select.rombercompound,
  div.romberform select.romberselect {
    padding: 0pt 3pt 4pt 0;
  }
}

@media (-webkit-min-device-pixel-ratio: 0) {
  div.romberform select.rombercompound,
  div.romberform select.romberselect {
    padding-left: 0;
  }
}

@supports (-ms-ime-align:auto) {
  div.romberform select.rombercompound,
  div.romberform select.romberselect {
    padding-left: 1pt;
  }
}


/* Romber grid styles */

div.rombergrid {
  margin-bottom: 6pt;
}

div.ricoLG_outerDiv * {
  border: none;
}

body div.ricoMenu div.ricoMenuHeading,
body div.ricoMenuSafari div.ricoMenuHeading {
  font-size: 12pt;
}

table.ricoLG_table {
  border-top: none;
  border-left: none;
  border-right: 1pt solid #CCCCCC;
  border-bottom: 1pt solid #CCCCCC;
}

table.ricoLG_table tr td {
  border: none;
}

tr.ricoLG_hdg th,
tr.ricoLG_hdg td {
  background-color: #73bf44 !important;
  border-bottom: 1pt solid #CCCCCC;
}

.ricoLG_outerDiv .ricoLG_bottom .ricoLG_cell {
  border-bottom: none;
  border-left: 1pt solid #CCCCCC;
  font-size: 12pt;
  min-height: calc( 1em + 8pt );
  padding: 1pt 4pt 1pt 3pt;
}

.ricoLG_hdg .ricoLG_cell {
  height: auto;
  max-height: 4em;
  min-height: calc( 1em + 8pt );
  font-weight: normal;
  padding: 1pt 4pt 1pt 3pt;
}

.ricoLG_cell input {
  margin: 0pt 2pt 2pt 0;
  padding-left: 1pt;
}

.ricoLG_hdg img {
  border: 0pt;
  margin: 0pt -2pt 0pt -2pt;
  max-height: 1em;
  position: absolute;
  top: 7pt;
  float: right;
}

.ricoLG_hdg .ricoSort p {
  padding: 0pt;
  margin: 0pt 5pt 0pt 0pt;
}

.ricoLG_bottom img {
  margin-top: 3pt;
}

div.ricoLG_outerDiv a:visited,
div.ricoLG_outerDiv a:link {
  color: white;
  text-decoration: none;
}

div.ricoLG_outerDiv a:hover {
  color: white;
  text-decoration: underline;
}

div.ricoLG_oddRow {
  background-color: #ffffcc; 
}

div.ricoLG_evenRow {
  background-color: #EEEEEE; 
}

div.ricoLG_selection,
div.ricoWindow .ricoTitle {
  background-color: #FFFFFF;
}

div.ricoLG_highlightDiv {
  border-color: #0f8fff;
}

div.ricoContent td {
  color: black;
}

.ricoLG_hdg p.results_left {
  float: left;
  margin-right: 4pt;
}

.results_center {
  text-align: center;
}

.ricoLG_hdg p.results_center {
  margin-left: 4pt;
}

.results_right {
  text-align: right;
}

.ricoLG_hdg p.results_right {
  text-align: right;
}

.results_right .ricoLG_cell {
  padding-right: 15pt;
}

caption {
  text-align: left;
  font-size: 12pt;
  padding: .75em;
  color: #000;
}


/* Romber help */
div.romberhelp {
  background-color: #ececec;
  border: 1pt solid #7f7f7f;
  display: none;
  left: calc(( 100vw - 400pt ) / 2 );
  margin: 0px;
  position: fixed;
  padding: 30pt 10pt 30pt 10pt;
  top: calc( 100vh / 4 );
  width: 400pt;
  z-index: 10;
}

span.romberhelp {
  background-color: rgb(113,191,68);
/*
  background-image: url(/images/help_22.png);
  background-repeat: no-repeat;
  background-position: center;
*/
  color: transparent;
  cursor: pointer;
  content: none;
  display: inline-block;
  height: 20pt;
  overflow: hidden;
  width: 20pt;
}

span.romberhelp:before {
  content: '?';
  color: white;
  padding-left: 8pt;
  font-weight: bold;
}
 
div#romberhelp_alert {
  border: 1pt solid #8B0304;
}

div.romberhelp p {
  text-align: center;
}

div#romberhelp_alert p {
  color: #8B0304;
}

div.romberhelp_close {
  position: absolute;
  right: 0pt;
  top: 0pt;
}


/* Tool styles */
.panels {
  width: 100%;
  margin: 10pt 0 10pt 0;
  padding: 0 10pt 0 10pt;
}

.panelcontent {
  background-color: #f8f8f8;
  overflow: auto;
  overflow-y: scroll;
}

.panelcontent div.romberform h3,
.panelcontent p {
  padding-bottom: 5pt;
  padding-left: 5pt;
}

.panelcontent ul {
  list-style-position: outside;
  list-style-type: disc;
}

.panelcontent ul li a {
  color: rgb(113,191,68);
}

.panelcontent div.rombergrid {
  padding-left: 5pt;
}

.panelcontentcontainer {
  border: 1pt solid #CCCCCC;
  clear: both;
}

.panelheading {
  border-radius: 0;
  height: 24pt;
  color : rgb(255,255,255);
  background-color: rgb(113,191,68);
  float: left;
  font-weight : normal;
  margin: 3pt 1pt 0 1pt;
  overflow: hidden;
  padding-top: 3pt;
  padding-bottom: 3pt;
  text-align: center;
  white-space: nowrap;
  width: calc( 100% / 4 - 6pt );
}

.panelheading p {
  padding-top: 1pt;
}

.panelhover {
  background-color: rgb(215,224,38);
  cursor: pointer;
}

.panelselected {
  font-weight: bold;
  height: 27pt;
  cursor: auto;
  margin-top: 1pt;
  margin-bottom: -1pt;
  background-color: #1c1c1c;
}

.panelselected p {
  padding-top: 3pt;
}

.panelcontent div.rombermessage {
  width: 100%;
}


table.solutiontable {
  margin: 0 auto 0 auto;
}

table.solutiontable td {
  background-color: #ffffcc;
  color: #000000;
}

table.solutiontable th {
  background-color: #73bf44;
  color: #ffffff;
  vertical-align: middle;
}

table.solutiontable td,
table.solutiontable th {
  font-size: 9pt;
  border: 1pt solid #dfdfdf;
  padding: 2pt 5pt 2pt 5pt;
  text-align: center;
}


table.rmexasolutiontable {
  margin: 0 auto 10pt auto;
  table-layout: fixed;
}

table.rmexasolutiontable td,
table.rmexasolutiontable th {
  border: 1pt solid #dfdfdf;
  padding: 1pt;
  text-align: center;
}

table.rmexasolutiontable th {
  color: #ffffff;
  font-weight: normal;
  vertical-align: middle;
}

table.rmexasolutiontable td {
  background-color: #eeeeee; /* #ffffcc; */
  color: #000000;
}

table.rmexasolutiontable td.rmexamatched {
  background-color: #8fff4f;
}

table.rmexasolutiontable td.rmexaunmatched {
  background-color: #FFFFcc; /* #ffff7f; */
}
div.romberform>div div table.rmexasolutiontable p {
  font-size: 9pt;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

table.rmexasolutiontable tr:first-child td:first-child {
  background-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}

table.rmexasolutiontable tr:first-child th {
  background-color: #5f5f5f; /* #73bf44; */
  height: 150pt;
  max-width: 16pt;
  padding-bottom: 5pt;
  vertical-align: bottom;
}

table.rmexasolutiontable tr:first-child th p {
  transform: rotate(270deg);
}

table.rmexasolutiontable tr th:first-child {
  background-color: #5f5f5f; /* #73bf44; */
  min-height: 20pt;
  padding-right: 5pt;
  width: 200pt;
  text-align: right;
}


table.rmexaweight tr td,
table.rmexaweight tr th {
  border: 1pt solid #dfdfdf;
}

table.rmexaweight tr td {
  background-color: #ffffcc;
  text-align: center;
}

table.rmexaweight tr th {
  background-color: #73bf44;
  color: #ffffff;
  font-weight: normal;
  text-align: center;
}

table.rmexaweight tr td:first-child,
table.rmexaweight tr th:first-child {
  text-align: left;
}


/* Tables */
table.rombertable td,
table.rombertable th {
  border: 1pt solid #dfdfdf;
  padding: 1pt 2pt 1pt 2pt;
}

table.rombertable tr th {
  background-color: #73bf44 !important;
}

table.rombertable tr.romberoddrow td {
  background-color: #ffffcc;
}

table.rombertable tr.romberevenrow td {
  background-color: #EEEEEE;
}


span.rmexawideprompt {
  display: inline-block;
  padding-top: 1pt;
  text-align: right;
  width: 250pt;
}

span.rmexawideprompt+p {
  display: inline;
}