/* --- modifications to bootstrap's css ------------------------ */

/* background-image stuff from https://www.w3schools.com/css/css3_backgrounds.asp
   Note that if you change the height of the banner image then you'll have
   to change the margin-top for h1 as well (see comments for h1 below). */
@media {
  .banner-image {
    height: 6em; /* for the phones, a taller height is set below for wider platforms */
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('https://rimstar.org/images/rimstarorg_banner.jpg');
  }
}
@media (min-width: 640px) {
  .banner-image {
    height: 10em; /* the height for non-phones */
  }
}

/* the following are duplicated from what's done to navbar-header in 
   bootstrap.css. They don't seem to do anything for the banner-image. */
.banner-image:before,
.banner-image:after {
  display: table;
  content: " ";
}
.banner-image:after {
  clear: both;
}

.media {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  background-color: #f5f5f5
}

.navbar-brand {
  font-size: 14px;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-right: 2px;
  padding-left: 2px;
}

caption {
  text-align: center;
}
.panel-body {
  padding: 0px;
}
.panel-heading {
  padding: 5px 5px;
}
.panel-title-x {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  text-align: center;
}
}
.panel-body {
  /* For centering images I tried the following for centering 
     but it made the image not scale vertically, probably since the 
     flex tells it to fill
     display: flex; justify-content: center;
  */
}

/*
 This is copied from bootstrap.css exactly except I changed 768px to
 490px. That means that the columns don't go to single column until
 the window is less than 490px.
 */
@media (min-width: 490px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}

/* used in place of col-sm-8 col-sm-3 col-sm-offset-1 to set the space 
   to the left of the page's right column and not use the 490px
   modification done to col-sm-8 above */
.side_col-sm-8 .side_col-sm-3 {
  position: relative;
  min-height: 1px;
  padding-right: 0px; /* 15px */
  padding-left: 0px; /* 15px */
}
@media (min-width: 768px) {
  .side_col-sm-8 {
    float: left;
    width: 66.66666667%;
  }
  .side_col-sm-3 {
    float: left;
    width: 30%;
  }
  .side_col-sm-offset-1 {
    margin-left: 3%; /* 8.33333333% */
  }
}

/* --- styles for html files used in iframes ------------------- */
#iframeblk {
  font-size: .72em;
  margin-left: 10px;
  margin-right: 10px;
}

/* --- topics list styles -------------------------------------- */
.topics {
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f8f8f8;
  border-color: #e7e7e7;
  padding: 5px;
  margin-bottom: 10px;
}

/* --- content area styles ------------------------------------- */
/* h1 is used for main title on page. Note that it's not actually below
   the banner and navbar. Instead it's overlapping it, hence the need for
   a huge margin. */
h1 {
  margin-top: 110px;
}
@media (min-width: 640px) {
  h1 {
    margin-top: 160px;
  }
}
h2, h3, h4, h5 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h2 { /* 1st level header for sections of text in content */
  color: green;
  font-size: 20px;
  font-weight: 500;
}
h3 { /* 2nd level header for sections of text in content */
  color: green;
  font-size: 16px;
}
h4 { /* 3rd level header for sections of text in content */
  color: black;
  font-size: 16px;
}
h5 { /* 4th level header for sections of text in content */
  color: black;
  font-size: 14px;
  font-weight: normal;
}
table.centered { /* borderless centered table, white background */
  margin-left: auto; /* these center the table */
  margin-right: auto;
}
table.bordercentered { /* solid, single-line border; centered table, colored background */ 
  border: 1px gray solid;
  margin-left: auto; /* these center the table */
  margin-right: auto;
}
table.bordercenteredwhite { /* solid, single-line border; centered table, white background */ 
  border: 1px gray solid;
  margin-left: auto; /* these center the table */
  margin-right: auto;
}
table.borderwhite {
  border: 1px gray solid;
}
table.border { /* solid, single-line border not overriding background */
  border: 1px gray solid;
}
/* note, there's a quotedoc class for div's below, use that instead */
table.quoteddoc { /* for a large body of someone else's text included */
  background-color: #FEF0D7;
}
td.border { /* good for when two tables are side-by-side, colored background */
  border: 1px gray solid;
}
td.borderwhite { /* good for when two tables are side-by-side, white background */
  border: 1px gray solid;
}
caption.bottom {
  caption-side: bottom; /* css default is top */
}
/* For a table with data in it. Can center by doing:
   <table class="centered" id="datatable">
   For the header default alignment is center. Can do:
   <th class="left"> and <th class="right">
   Row colors alternate. For odd numbered just use <tr>, 
   for even numbered rows use <tr class="alt">
   For the data cells, default alignment is left. Can do:
   <td class="center"> and <td class="right">
   Note the following alternative approach that can be used:
   table.datatable tr:nth-child(even) {background-color:#F1F1F1;}
   table.datatable tr:nth-child(odd)  {background-color:#ffffff;}
   table.datatable tr.fixzebra        {background-color:#F1F1F1;}
 */
#datatable { /* id for the table tag */
  border-collapse: collapse;
}
#datatable td, #datatable th {
  border: 1px solid #b0b0b0;
  padding: 1px 7px 1px 7px;
}
#datatable th {
  vertical-align: bottom;
  background-color: #d0ffd0;
}
#datatable tr.alt td { /* class for the even numbered tr tag rows */
/*  background-color: #e8ffe8;*/
  background-color: #ecffec;
}
#datatable th.right { /* classes for aligning text in the cells */
  text-align: right;
}
#datatable td.right {
  text-align: right;
}
#datatable th.left {
  text-align: left;
}
#datatable td.center {
  text-align: center;
}

/* thumbnailbar - Useful for a horizontal bar of thumbnails and links
   to suggested webpages and is usually at the top and bottom of
   a pages content e.g. the BB-8 pages use this.
   It's responsive to the webpage's width and if too big, then a
   horizontal scrollbar appears.
*/
div.thumbnailbar-container {
  overflow: auto;
  margin: 5px;
}
table.thumbnailbar {
  border-collapse: collapse;
  width: 100%;
}
table.thumbnailbar th {
  height: 52px;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #d4d4d4;
  vertical-align: middle;
}
table.thumbnailbar td {
  border: 1px solid #d4d4d4;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #F1F1F1;
  text-align: center;
  vertical-align: top;
}

/* paginationnav - This is for a list of page numbers, or other
   text, that appears at the top and bottom of a sequence of pages
   so the user can go to the other pages.
*/
table.paginationnav {
  border-collapse: separate;
  border-spacing: 2px;
}
table.paginationnav td {
  padding-left: 5px;
  padding-right: 5px;
  border-color: #ddd;
  border-radius: 4px;
}

div.quotedoc { /* for a large body of someone else's text included */
  background-color: #FEF0D7;
}
div.areabox { /* for highlighted area of a page */
  background-color: #f0f0f0;
  border: 1px gray solid;
  padding: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
}
div.worksheet { /* for a worksheet with calculations in it */
  background-color: #dddddd;
  border: 1px gray solid;
  padding: 5px;
}
input.worksheet_result { /* for an calculated result value in a form */
  background-color: #dddddd;
  border: 1px black solid;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
}
span.defn { /* for a word or phrase that's being defined */
/*  font-weight: bold;*/
/*  color: #685;*/
  color: green;
}
span.highl { /* for highlighting text in a sentence when bold is too loud */
  color: #705000;
}
/* for a paragraph with a leading phrase, for example:
   <span class="paraheader">Window solar air heater</span> - Since my
   mini-can solar heater was a success, I decided to...
*/
span.paraheader {
  color: green;
}
/* What's New section stuff */
p.whatsnewtitle { /* the What's New text */
  margin-bottom: 0px;
  text-align: center;
  color: green;
}
p.whatsnewline { /* the line in the header for What's New sections */
  margin: 0px;
  padding-top: 1px;
  background-color: green;
}
img.imgselborder { /* needed in Chrome for a select border when in <a href> */
  border-width: 1px;
  border-style: solid;
}
img.imgresponsive { /* makes an image resize to fit the page, copied from
                       the bootstrap img-responsive class */
  display: block;
  width: 100%;
  height: auto;
}
img.inbox { /* centers an image when in a container, like bootstrap panels */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
span.tm { /* for trademark that is <sup>'d and things like that */
  font-size: 6pt;
} 

/* --- footer styles ------------------------------------------- */
.footerblk {
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  border-color: #e7e7e7;
  padding: 5px;
}
a.footerlnk {
  white-space: nowrap;
}

/* --- menu styles --------------------------------------------- */
#mnublk {
  /* nothing for now */
}
/* current menu item */
p.mnucurrentl1 {
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
}
p.mnucurrentl2 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
}
p.mnucurrentl3 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
}
p.mnucurrentl4 {
  margin-left: 35px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
}
p.mnucurrentl5 {
  margin-left: 45px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
}
p.mnucurrentl6 {
  margin-left: 55px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
}

/* selectable item that is not a child of the current item */
a.mnuselnonchildl1 {
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselnonchildl2 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselnonchildl3 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselnonchildl4 {
  margin-left: 35px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselnonchildl5 {
  margin-left: 45px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselnonchildl6 {
  margin-left: 55px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* selectable item that is a child of the current item */
a.mnuselchildl1 {
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselchildl2 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselchildl3 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselchildl4 {
  margin-left: 35px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselchildl5 {
  margin-left: 45px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
a.mnuselchildl6 {
  margin-left: 55px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* disabled menu item */
p.mnudisabledl1 {
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl2 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl3 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl4 {
  margin-left: 35px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl5 {
  margin-left: 45px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl6 {
  margin-left: 55px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}

/* separator menu item */
p.mnuseparatorl1 {
  margin-left: 5px;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
  border-style: dotted;
  border-color: grey;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 1px;
  border-bottom-width: 0px;
}
p.mnuseparatorl2 {
  margin-left: 15px;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
  border-style: dotted;
  border-color: grey;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 1px;
  border-bottom-width: 0px;
}
p.mnuseparatorl3 {
  margin-left: 25px;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
  border-style: dotted;
  border-color: grey;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 1px;
  border-bottom-width: 0px;
}
p.mnuseparatorl4 {
  margin-left: 35px;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
  border-style: dotted;
  border-color: grey;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 1px;
  border-bottom-width: 0px;
}
p.mnuseparatorl5 {
  margin-left: 45px;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
  border-style: dotted;
  border-color: grey;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 1px;
  border-bottom-width: 0px;
}
p.mnuseparatorl6 {
  margin-left: 55px;
  margin-right: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
  border-style: dotted;
  border-color: grey;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 1px;
  border-bottom-width: 0px;
}