/* Bruce uc76bd main css style sheet library */

/*  Begin Bruce uc76bd "main section" CSS styling */
/*  Change Page background color here, for all pages except Home Page  */
/*  body {background-color: White; color: #336699; font-family: arial; line-height:175%;}  */
/*  alternative BG colors: #fff6e6 #ffdb99 #c7bd95 thistle #c7bd95  tea #bfb5a2,  #d2c3a3 #c5d5c5  */
body {background-color: #ffffff; font-family: arial;}

/*  "left boxes", lead in for Anchor Links: background DarkGreen, font color White */
.leftboxes {background-color: DarkGreen; color: White; letter-spacing: -1px;}

/*  "left boxes" for Home Page only: background Maroon, font color White */
#home.leftboxes {background-color: Maroon; color: White; letter-spacing: -1px;}


/*  create Top Bar as "div box", BG color was "Blue" now #0000e6; "Non-Anchor" Text Color is Khaki  */
/*  effective 4-12-2020 adding line-height: 100%; height: 100%; equal values trick to center text Vertically */
.topbar {font-size: 1.05em; color: Khaki; background-color: #0000e6; line-height: 145%; height: 145%;}


/* Effective April 2017: to style link anchors in the top bar  */
.topbar a:link {text-decoration: none; color: Khaki;}
.topbar a:visited {text-decoration: none; color: Khaki;}
.topbar a:hover {color: Khaki;}
.topbar a:active {text-decoration: none; color: Khaki;}

/* create Bottom Bar as "div box" with Khaki anchor links */
/*  effective 4-12-2020 adding line-height: 100%; height: 100%; equal values trick to center text Vertically */
.bottombar {font-size: 1.05em; color: Khaki; background-color: #0000e6; line-height: 145%; height: 145%;} 

/* style the link anchors color Khaki in Bottom Bar  */
.bottombar a:link {text-decoration: none; color: Khaki;}
.bottombar a:visited {text-decoration: none; color: Khaki;}
.bottombar a:hover {color: Khaki;}
.bottombar a:active {text-decoration: none; color: Khaki;}


/* style links that are not "class" or "id" related, used in main sections between Top and Bottom Bars */
a:link {text-decoration: none; color: MidnightBlue}
a:visited {text-decoration: none; color: MidnightBlue}
a:hover {color: MidnightBlue}
a:active {text-decoration: none; color: MidnightBlue}

/*  sytle the text size, line height, wrap, border in main sections of Web Pages */
.mymainlinks {font-size: 1.23em; color: DarkGreen; line-height:145%; white-space: initial; border: 1px solid #0000e6; margin: 1px; padding: 2px;}

/*  style properties of Teal "Ajax" buttons at bottom of every page: Ajax, DOM, XHR links */
#bottombuttons button {-webkit-appearance: none; color: White; background-color: Teal; 
  padding: 0 0 2px; text-align: center; font-size: 0.8em; width: 45px; height: 24px;} 

/* style "alignment" of Teal Buttons "div" container: existing "id" bottombuttons, center for phones and left for desktops */
/* play with backround color: Black, #668cff (med blue), #fffbe6 (light yellow)    */

#bottombuttons {border: 1px solid #0000e6; background-color: Maroon; margin: 0 auto; text-align: center;}


/* style "alignment" of "Omega: Time" with "div" container: class "omegatime", center for phones and left for desktops */
/* .omegatime {margin: auto; width: 98%; padding: 3px} */
.omegatime {text-align: center; font-size: 1.05em; line-height: 175%; width: 98%; padding: 1px}

/* Adding a Global Style for the "pre" tag. Initally set for App Select Output */

pre {white-space: pre-wrap !important;}

#alertDiv {
   font-size: 1.15em;
   line-height: 140%;
   color: DarkGreen;
 }

/* as of June 6 2023 added for cellphone css */

#ajaxDiv {
   font-size: 1.05em;
   line-height: 130%;
   color: Maroon;
 }


/* adding span class "ender" to change color of Menu text endings to "Maroon". Later, may change text size */
/*    <span class="ender">test</span> */

.ender {color: Maroon; font-size: 65%;}


/* Experiment with "@media" Media Query code for display in Desktop Browser and Chromebook */

/* As simple example, this works:  @media only screen and (orientation: landscape) {  ...style... }  */


@media only screen and (min-width: 780px) {

/* increase size of alert div for desktop and iPad */

#alertDiv {
   font-size: 1.55em;
   line-height: 145%;
   color: DarkGreen;
 }

/* as of June 6 2023 added for iPad and Desktop media query */

#ajaxDiv {
   font-size: 1.55em;
   line-height: 145%;
   color: Maroon;
 }


body {background-color: #ffffff;}

.topbar {font-size: 1.8em;}

.bottombar {font-size: 1.8em;}

/* May 26 2023 Trying to increase size of text for all Main Links on iPad and Desktop  [was 2.0em]  */
.mymainlinks {font-size: 2.4em; line-height:145%; color: DarkGreen;}

.omegatime {text-align: left; font-size: 1.8em; line-height: 175%; padding: 1px}

/*  style properties of Teal "Ajax" buttons at bottom of every page: Ajax, DOM, XHR links */
#bottombuttons button {-webkit-appearance: none; color: White; background-color: Teal; 
  padding: 0 0 2px; text-align: center; font-size: 1.05em; width: 65px; height: 40px;} 

#bottombuttons {border: 1px solid #0000e6; background-color: Maroon; margin: 0 auto; text-align: left; line-height: 175%;}

  }