/* ©2025 Boulder Guitar Society */
/**********************************************************/
/*                       common.css                       */
/*                                                        */
/* Supports yellow/tan/brown paper for base.html          */
/*                                                        */
/**********************************************************/

body {
   /* global color scheme */
   --textbrwn: #4E1D02;    /* rgb(78, 29, 2) */
   --textorng: #D15439;    /* rgb(209, 84, 57) */
   --linkblue: #0011EE;
   --linkorng: #D15439;
   --linkbrwn: #4E1D02; 
   --linkhovr: #D13715;
   --linkvstd: #0011EE;
   --linkactv: #D12600;
   /* the overall dark brown background layer */
   background: rgb(255, 255, 255) url(/stylings/PrintedPaper_browser_backgr-1.jpg) repeat scroll top left;
   font-family: 'Arial', sans-serif;
   color: var(--textbrwn);
   margin: 0pt;
}

a {
   text-decoration: none;
   color: var(--linkblue);
}

a:visited {
   color: var(--linkblue);
}

a:hover {
   color: var(--linkhovr);
}

a:active {
   color: var(--linkactv);
}

#body_content {
   /* the inner yellow/tan background layer */
   background: transparent url(/stylings/PrintedPaper_background-2.jpg) repeat scroll top left;
   width: 700px;
   margin-bottom: 0px; 
   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;
   overflow: hidden;
   position: relative;
   word-wrap: break-word;
   text-align: left;
}

#body_content p {
   /* text to fit in the yellow area */
   width: 490px;
   margin-left: 30px;
   margin-right: 0px;
   margin-top: 10px;
   margin-bottom: 10px;
   line-height: 18px;
   font-size: 15px;
   font-stretch: normal;
   font-style: normal;
   font-weight: 400;
   font-variant: normal;
   letter-spacing: 0;
   opacity: 1.00;
   padding-bottom: 0px;
   padding-top: 0px;
   text-align: left;
   text-decoration: none;
   text-indent: 0px;
   text-transform: none;
}

#body_content h1 {
   width: 600px;
   margin-left: 30px;
   margin-right: 0px;
   margin-top: 10px;
   margin-bottom: 10px;
   line-height: 18px;
   font-size: 15px;
   font-stretch: normal;
   font-style: normal;
   font-weight: 400;
   font-variant: normal;
   letter-spacing: 0;
   opacity: 1.00;
   padding-bottom: 0px;
   padding-top: 0px;
   text-align: left;
   text-decoration: none;
   text-indent: 0px;
   text-transform: none;
}

#body_content h2, h3, h4 {
   margin-left: 30px;
}

#body_content img.wgly {
   margin-left: 30px;
   height: 6px;
   width: 531px;
   object-fit: none;
   object-position: -75px 0px;
   border: none;
}

#header_zone {
   /* the box within which header parts are positioned absolutely */
   position: relative;
   width: 700px;
   height: 78px;
   margin-left: 0px;
   z-index: 5;
}

#header_zone #logo {
   /* for the medium logo on common pages */
   position: absolute;
   left: 30px;
   top: 29px;
   height: 40px;
   z-index: 1;
   border: none;
}

#header_pos {
   /* positions the header tx/img within the header_zone */
   position: absolute;
   left: 30px;
   top: 17px;
   width: 500px;
   height: 61px;
   z-index: 1;
}

#header_txt h1 {
    /* style for font-based headers within header_pos */
    color: var(--textorng);
    font-family: 'Times New Roman', serif;
    font-weight: 600;
    font-size: 54px;
    line-height: 61px;
    width: 530px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#header_txt p {
    /* style for font-based headers within header_pos */
    color: var(--textorng);
    font-family: 'Times New Roman', serif;
    font-weight: 600;
    font-size: 54px;
    line-height: 61px;
    width: 530px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#wgly1 {
   /* for the wiggly line ABOVE the header */
   position: absolute;
   left: -234px;
   top: 19px;
   width: 531px;
   height: 6px;
   z-index: 1;
   border: none;
}

#wgly2 {
   /* for the wiggly line BELOW the header */
   position: absolute;
   left: -236px;
   top: 74px;
   width: 531px;
   height: 6px;
   z-index: 1;
   border: none;
}

#navbar {
   font-family: 'Comic Sans MS', sans-serif;
   font-size: .9em;
   color: #62462E;
   line-height: 25px;
   text-transform: uppercase;
   width: 480px;
   margin-left: 30px;
   margin-top: 15px;
   margin-bottom: 20px;
}

#navbar .noncurrent-page {
   display: inline-block;
   margin-left: 0px;
   margin-right: 20px;
}

#navbar .noncurrent-page a {
   text-decoration: none;
   color: #62462E;
}

#navbar .noncurrent-page a:hover {
   text-decoration: none;
   color: var(--linkhovr);
}

#navbar .current-page {
   display: inline-block;
   margin-left: 0px;
   margin-right: 20px;
   background-image: url(/stylings/PrintedPaper_line-3.png);
   background-repeat: no-repeat;
   background-position: center bottom;
}

#navbar .current-page a {
   text-decoration: none;
   color: #C75624;
}

#latest_ttl p {
   color: var(--textbrwn);
   font-family: 'Times New Roman', serif;
   font-size: 36px;
   line-height: 42px;
   margin-left: 30px;
}

#latest_ttl a {
   color: var(--linkhovr);
   text-decoration: none;
}

#latest_ttl a:visited {
   color: var(--linkhovr);
   text-decoration: none;
}

#latest_ttl a:hover {
   color: var(--linkblue);
   text-decoration: none;
}

.recent {
  object-fit: contain;
  object-position: left bottom;
  height: 120px;
  width: 490px;
}

#body_content .meeting h1 {
   color: var(--textorng);
   font-family: 'Times New Roman', serif;
   font-size: 40px;
   line-height: 55px;
   margin-left: 30px;
}

.meeting h2 {
   font-family: 'Times New Roman', serif;
   font-size: 30px;
   margin-left: 30px;
}

.meeting img {
   max-width: 600px;
}

.meeting a {
   text-decoration: underline;
}

.meeting #prev {
   font-size: 26px;
   position: absolute;
   left: 508px;
   top: 28px;
}

.meeting #next {
   font-size: 26px;
   position: absolute;
   left: 576px;
   top: 28px;
}

.meeting #next a,
.meeting #prev a {
   text-decoration: none;
   color: var(--linkbrwn);
}

.meeting #next a:visited,
.meeting #prev a:visited {
   color: var(--linkbrwn);
}

.meeting #next a:hover,
.meeting #prev a:hover {
   color: var(--linkorng);
}

.meeting #next a:active,
.meeting #prev a:active {
   color: var(--linkorng);
}

.stars a {
   text-decoration: none;
   color: var(--linkorng);
}

.stars a:visited {
   color: var(--linkorng);
}

.stars a:hover {
   color: var(--linkblue);
}

.stars a:active {
   color: var(--linkblue);
}

.stars .letters {
   margin-left: 30px;
   margin-top: 2.0em;
   font-size: 1.1em;
}

.stars .iltrid {
   margin-top: 20px;
}

.stars .letters a,
.stars .iltrid a {
   text-decoration: none;
   color: var(--linkbrwn);
}

.stars .letters a:visited,
.stars .iltrid a:visited {
   text-decoration: none;
   color: var(--linkbrwn);
}

.stars .letters a:hover,
.stars .iltrid a:hover {
   text-decoration: none;
   color: var(--linkblue);
}

.stars .letters a:active,
.stars .iltrid a:active {
   text-decoration: none;
   color: var(--linkblue);
}

.iltr {
   text-align: center;
   height: 2.0em;
   line-height: 1.0em;
   font-size: 1.5em;
}

#starpics {
   display: grid;
   grid-template-columns: auto auto auto;
   width: 490px;
   margin-left: 50px;
}

.starpic {
   width: 120px;
   height: 120px;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -82px;
  background-color: black;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#footer {
   height: 120px;
   margin-left: 0px;
   position: relative;
   width: 700px;
   z-index: 0;
}

#footlogo {
   position: absolute;
   left: 248px;
   top: 26px;
   border: none;
   z-index: 1;
}

#footlogo img {
   height: 40px;
}

#footlinks {
   display: grid;
   grid-template-columns: auto auto;
   position: absolute;
   left: 30px;
   top: 78px;
   width: 531px;
   z-index: 1;
   line-height: 18px;
   font-size: 15px;
}

#wgly3 {
   position: absolute;
   left: -45px;
   top: 98px;
   width: 531px;
   border: none;
   z-index: 1;
}