/*  Comments
    C1  CSS does not support defines.  Must run through defines.m4
    C2  @media max-width N kicks in for width<=N
        @media min-width N kicks in for width>=N
        The closedness of the comparison is from just one particular tutorial web site.  It may or may not be accurate.
          It is moot actually as a px is not a dot and dots/pix conversion is not generally going to yield integers.
*/

html {
  box-sizing: border-box;
  font-family: verdana,arial,sans-serif;
  font-size: 100%;                                              /*  Establish REM as default  */
  line-height: 1.5;
}

*, *:before, *:after { box-sizing:inherit; }

body {
  background-color: #f0f0f0;
}

.monospace {
  font-family: monospace;
}

.bannerDiv, .errorDiv, .mainDiv, .navDiv, .tableTitle { /*  Can not quite do from body because of tutorials */
  text-align: center;
}

.bannerDiv {
  font-family: Georgia,Times New Roman,serif;
  font-weight: bold;
  font-style: italic;
  font-size: 48px;
  color: #fefe50;
  background-color: #6fa47e;
}

.bannerImg {
  position          :relative;
  border            :0px;
  margin-left       :-1px;
  margin-right      :-1px;
  margin-bottom     :12px;
  top               :14px;
  box-shadow        :0px 0px 0px;
}

.tableTitle {
  font-size: 1.2rem;
}

@media (min-width: 551px) { .navDiv { margin-top: 1.5rem; } }

.navDiv a {                                                     /*  Matches descendants of class "navDiv" with tag "a". */
  color: #fefe50;
  background-color: #6fa47e;
  text-decoration: none;
  border-radius: 8px;
  padding: 0 1rem;
}
.navDiv a:hover { background-color: #9feab2; }

/*  Go to list style on phone */
@media (max-width: 550px) { .navDiv a { display:block; margin:1rem 20%; } }

.entryError {
  color:red;
}

.mainDiv, .mainDivReg {
  padding: 0rem 1rem 1rem 1rem;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

.inputPair, .radioCheck, .notesDiv, .portraitDiv, .submitDiv, table {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.inputPairLabel, .radioCheckLabel, .notesDivLabel, .portraitDivLabel {
  display: inline-block;
  width: 35%;
}
@media (max-width: 550px) { .inputPairLabel, .notesDivLabel, .portraitDivLabel { display:block; width:97%; } }

.inputPairInput, .radioCheckBoxes, .notesDivText, .portraitDivPicker {
  display: inline-block;
  padding-left: 8px;
  width: 62%;                                                   /*  Sum <100% so do not trigger a second line  */
  border-radius: 6px;
}
@media (max-width: 550px) { .inputPairInput, .notesDivText,  .portraitDivPicker { display:block; width:97%; } }

.inputPairInput {
  margin-top: 4px;
  margin-bottom: 4px;
  height: 2rem;
}

.radioCheckBoxesChoices {
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.radioCheckBoxes > :first-child { margin-left: 0; }
.radioCheckBoxes > :last-child { margin-right: 0; }

@media (min-width: 551px) { .notesDivLabel { position:relative; transform:translateY(-2.5rem); } }

.notesDivText {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.portraitDivPicker {
  font-size: 0.8rem;
}
@media (min-width: 551px) { #portraitDivPicker { position:relative; transform:translateY(-2.5rem); } }

.submitDivInput {
  display: block;
  width: 70%;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #ffffff;
}

.submitAsButton {
  color: #fefe50;
  background-color: #6fa47e;
  border-radius: 8px;
  border-width: 0px;
  text-decoration: none;
  font-size: 1.05rem;
  padding: 0 1rem;
  margin-top: 16px;
}

.abortDiv a {
  color: #fefe50;
  background-color: #6fa47e;
  border-radius: 8px;
  border-width: 0px;
  text-decoration: none;
  font-size: 1.05rem;
  padding: 0 1rem;
  margin-top: 16px;
}
.abortDiv a:hover { background-color: #9feab2; }

.footerDiv {
  margin-left: auto;
  margin-right: auto;
}

.footerImg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.footerDiv2 {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.footerImg2 {
  display: inline-block;
  text-align: center;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.footerL {
  width:45%;
  height: auto;
  margin-top: 1rem;
  margin-left: 0%;
  margin-right: 3%;
}

.footerR {
  width:45%;
  height: auto;
  margin-top: 1rem;
  margin-left: 3%;
  margin-right: 0%;
}

@media (max-width: 550px) {
  .footerL {
    width:96%;
    height: auto;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
  }
  .footerR {
    display: none;
  }
}

/*  For tables in general  (From Duckett/Chapter 14/Example)  */
table {
  margin-top: 2rem;
  border-spacing: 0px;
  word-wrap: break-word;
}

th, td {
  text-align: left;
  word-wrap: break-word;
  padding: 5px 30px 5px 10px;
  margin: 0px;
  border-spacing: 0px;
  border-top: 0px solid #f0f0f0;
  border-right: 0px solid #f0f0f0;
  border-bottom: 0.25rem solid #f0f0f0;
  border-left: 0.25rem solid #f0f0f0;
}

tr.headRow th {
  text-align: center;
  color: #f0f0f0;
  background-color: #6fa47e;
  border-top: 0.25rem solid #f0f0f0;
  border-right: 0px solid #f0f0f0;
  border-bottom: 0.25rem solid #f0f0f0;
  border-left: 0.25rem solid #f0f0f0;
}

tr th:last-child, tr td:last-child { border-right: 0.25rem solid #f0f0f0; }

table.bottomTable th, table.bottomTable td {
  border-bottom: 0.25rem solid #6fa47e;
  border-left: 0.25rem solid #6fa47e;
}

table.bottomTable tr.headRow th {
  border-top: 0.25rem solid #6fa47e;
  border-bottom: 0.25rem solid #6fa47e;
  border-left: 0.25rem solid #6fa47e;
}

table.bottomTable tr th:last-child, table.bottomTable tr td:last-child {
  border-right: 0.25rem solid #6fa47e;
}

tr.lightRow td, tr.lightRow th {
  background-color: #e0e0e0;
}

tr.darkRow td, tr.darkRow th {
  background-color: #d0d0d0;
}

tr.lightRow2 td, tr.lightRow2 th {
  background-color: #e0ffe0;
}

tr.darkRow2 td, tr.darkRow2 th {
  background-color: #d0ffd0;
}

#portrait {
  display: inline-block;
  margin-left: 16px;
}