/* How the font sizes work:
   body: font-size=100% means font size is 100% the default on all 
         browsers, 16px. This becomes the current font size.
   Next, the respective divs for the header, footer, content, ...
   all set a font size of .72em, which is .72 of the current
   font size. Almost everything else just inherits from there.
   An exception are the <h1>, <h2>, ... <h5> which have some 
   weirdness that causes their font-sizes to have to be set
   as some em multiplier of the current size.
*/

body {
  font-size: 100%;
  background-color: white;
  margin-top: 0in;
  margin-bottom: 0in;
}
body,p,a,table,td,th,caption,ul,ol {
  font-family: arial,sans-serif;
}

/* --- stuff relating to the bootstrap port -------------------- */
// embed-responsive-item - This is a class that should be added to
// embed code from YouTube when embedding YouTube videos.
// e.g. <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/gtAbs8y5xkY?rel=0" frameborder="0" allowfullscreen></iframe>
// Note that it doesn't exist in this .css and so does nothing, but
// it does when the content file is processed with the bootstrap .css.

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

/* --- common styles for header and footer --------------------- */
img.rssimg {
  border: 0px;
}
/* back to/related links blocks */
p.backrel {
  color: white;
  text-align: right;
  margin-top: 0in;
  margin-bottom: 0in;
}
a.backrel {
  color: aqua;
}

/* --- all enclosing table ------------------------------------- */
#enclosingtable {
  border: 0px;
  width: 976px;
  margin-left: auto; /* these center the table */
  margin-right: auto;
}

/* --- header styles ------------------------------------------- */
/* block containing the entire header */
#headerblk {
  position: relative; /* div for footerblk can't be 'static'. This
                         allows child elements' absolute positioning to
                         be relative to this parent */
  width: 976px;
  height: 125px;
  font-size: .72em;
  background-image: url('https://rimstar.org/images/rimstar_header_fade_down_green.jpg');
/*  background-image: url('file:///c:/d/webpage.rsnew/images/rimstar_header_fade_down_green.jpg');*/
/*  background-image: url('file:///c:/d/webpage.rsnew/images/rimstar_header_fade_down_green_xmas.jpg');*/
}
/* title text */
#maintitleblk {
  position: absolute; /* relative to the headerblk div */
  top: 15px;
  left: 240px;
  width: 400px;
}
h1 { /* used for main title on page */
  text-align: center;
  color: white;
  font-family: arial,sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
}
/* back to and related links */
#headerbackrelblk {
  position: absolute; /* relative to the headerblk div */
  top: 50px;
  left: 650px;
  width: 320px;
}
/* rss stuff */
#headerrssblk {
  position: absolute; /* relative to the headerblk div */
  top: 5px;
  left: 950px;
}

/* --- left column styles -------------------------------------- */
#leftcolumnblk {
  font-size: .72em;
  width: 14.2em;
  background-color: #f0fff0;
}

/* --- content area styles ------------------------------------- */
#contentblk {
  font-size: .72em;
  width: 812px;
  border: 0px;
  padding: 0px;
  margin-right: 0px;
  margin-left: 2px;
}
/* for things (e.g. images) with nice single line box around them */
h2 { /* 1st level header for sections of text in content */
  color: green;
  font-family: arial,sans-serif;
  font-size: 1em;
  font-style: normal;
}
h3 { /* 2nd level header for sections of text in content */
  color: green;
  font-family: arial,sans-serif;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}
h4 { /* 3rd level header for sections of text in content */
  color: black;
  font-family: arial,sans-serif;
  font-size: 1em;
  font-weight: normal;
  font-style: italic;
}
h5 { /* 4th level header for sections of text in content */
  color: black;
  font-family: arial,sans-serif;
  font-size: 1em;
  font-weight: normal;
  font-style: 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 td {
  padding-left: 5px;
  padding-right: 5px;
}

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;
}
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;
  max-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;
} 
pre { /* font-size is because it was too small on FireFox and Chrome,
         the overflow and border were copied from the bootstrap pre
         stuff so that the same html could be used for both versions */
  font-size: 1.25em;
  overflow: auto;
  border: 1px solid #999;
  padding: 9.5px;
  margin: 0 0 10px;
  background-color: #f5f5f5;
}

/* --- footer styles ------------------------------------------- */
#footerblk {
  position: relative; /* div for footerblk can't be 'static'. This
                         allows child elements' absolute positioning to
                         be relative to this parent */
  width: 976px;
  height: 117px;
  font-size: .72em;
  background-image: url('https://rimstar.org/images/rimstar_footer_fade_up_green.jpg');
/*  background-image: url('file:///c:/d/webpage.rsnew/images/rimstar_footer_fade_up_green.jpg');*/
}
a.footerlnk {
  color: aqua;
}
a.rimstarorgtxt {
  position: absolute; /* relative to the footerblk div */
  top: 91px;
  left: 70px;
  color: aqua;
}
/* legal stuff */
#legalblk {
  position: absolute; /* relative to the footerblk div */
  top: 91px;
  left: 150px;
  color: white;
}
/* contact email address stuff */
#contactblk {
  position: absolute; /* relative to the footerblk div */
  top: 91px;
  left: 790px;
  color: white;
}
/* bookmark websites stuff */
#bookmarksblk {
  position: absolute; /* relative to the footerblk div */
  top: 15px;
  left: 10px;
  color: white;
}
/* rss stuff */
#footerrssblk {
  position: absolute; /* relative to the headerblk div */
  top: 50px;
  left: 10px;
}
/* donate button stuff */
#footerdonateblk {
  position: absolute; /* relative to the headerblk div */
  top: 15px;
  left: 480px;
}
/* back to and related links */
#footerbackrelblk {
  position: absolute; /* relative to the footerblk div */
  top: 15px;
  left: 650px;
  width: 320px;
}
img.bkmrklinkimg {
   border: 0px;
}

/* --- 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;
  font-weight: bold;
}
p.mnucurrentl2 {
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
  font-weight: bold;
}
p.mnucurrentl3 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
  font-weight: bold;
}
p.mnucurrentl4 {
  margin-left: 20px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
  font-weight: bold;
}
p.mnucurrentl5 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
  font-weight: bold;
}
p.mnucurrentl6 {
  margin-left: 30px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: green;
  font-weight: bold;
}

/* 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;
  color: black;
}
a.mnuselnonchildl2 {
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
}
a.mnuselnonchildl3 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
}
a.mnuselnonchildl4 {
  margin-left: 20px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
}
a.mnuselnonchildl5 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
}
a.mnuselnonchildl6 {
  margin-left: 30px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: black;
}

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

/* disabled menu item */
p.mnudisabledl1 {
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl2 {
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl3 {
  margin-left: 15px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl4 {
  margin-left: 20px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl5 {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: grey;
}
p.mnudisabledl6 {
  margin-left: 30px;
  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: 10px;
  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: 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.mnuseparatorl4 {
  margin-left: 20px;
  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: 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.mnuseparatorl6 {
  margin-left: 30px;
  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;
}