/* *** STMstyleRM.css *** */
/*
 * The common cascading style sheet for all of Stellafane.org -- Responsive Mobile Design version
 * Created by Ken Slater on 2023-Jan-09
 * Last edited 2023-Feb-26
 */

/* --- General Element Styles --- Assumes 1rem = 16px on desktop */
  :root { /* Global Variables */
    --narrowdev: 480px; /* Narrow Device upper limit */
    /* Note that CSS variables cannot currently be used in @media queries 2023-Feb */
    --bodywidth:    50rem;
    --contentwidth: 48rem;
    --STMpink: #FFB7F6; /* Stellafane Pink */
  }

  * { font-family: Verdana,Arial,helvetica,sans-serif; }

  /* Nominal body width is 50rem * 16px = 800px */
  body { background: #ebebeb none; color: black; width: var(--bodywidth); padding: 1rem 0; margin: auto;
         box-sizing: border-box; }
  header, nav, main, footer { width: var(--contentwidth); margin: auto; }

  img#STMlm  { border:0; box-shadow: 0.3rem 0.3rem 0.33rem 0 gray; }
  img#STMlm:hover { box-shadow: 0px 0px 10px 5px var(--STMpink) }
  img#STMhdr { border:1px gray solid; float:right; box-shadow: 0.3rem 0.3rem 0.3rem 0 gray; border-radius: 20px; }

  main { clear:both; }
  h1.PageTitle { text-align: center; margin: 0.6rem 0; text-shadow: 6px 6px 9px #FFCCFF,
    -6px 6px 9px #FFCCFF, 6px -6px 9px #FFCCFF, -6px -6px 9px #FFCCFF, 3px 3px 2px #404040; }
  h2.byline { text-align: center; margin-top: 0; }

  p, ol, ul  { text-align: justify; }

  a { font-weight: bold; color: #000088; text-decoration: none; }
  a:visited, a:link  { color: #000088; border-color: #000088; text-decoration: none;      }
  a:active,  a:hover { color: #000088; border-color: #FF70C0; text-decoration: underline; }

  hr { color: #FF70C0; background-color: #FF70C0; width: 100%; height: 0.15rem; border-width: 0; clear: both; }

/* --- Common Attributes as classes --- */
  .C { text-align: center  }
  .R { text-align: right   }
  .L { text-align: left    }
  .J { text-align: justify }
  .CLR { clear:both }

  .B { font-weight: bold  }
  .I { font-style: italic }
  .N { font-weight: normal; font-style: normal }
  .U { text-decoration: underline    }
  .S { text-decoration: line-through }

  .MT0 { margin-top: 0 }
  .MT3 { margin-top: 3px }
  .MT6 { margin-top: 6px }
  .MT9 { margin-top: 9px }
  .MB0 { margin-bottom: 0 }
  .MB3 { margin-bottom: 3px }
  .MB6 { margin-bottom: 6px }
  .MB9 { margin-bottom: 9px }
  .MR10 { margin-right: 10px }
  .ML10 { margin-left:  10px }

  .smaller  { font-size: smaller }
  .larger   { font-size: larger }

  .VT { vertical-align: top    }
  .VM { vertical-align: middle }
  .VB { vertical-align: bottom }

  .FR { float: right }
  .FL { float: left  }

  .YellowHighlight { background-color:#FFFF66 }
  .pinkbg { background-color: var(--STMpink); }
  .grayout { color: gray }
  .red { color: red }

  a.link-off { pointer-events:none; cursor:default; color:#aaaaaa; }
  a.link-off:after { content:" (Not Ready Yet)"; font-size:smaller; font-style:italic; }

/* --- Common Item Styles ---*/
  .backto	  { font-style: italic; text-align: center; }
  .pointer  { cursor: pointer; }
  .hoverblue:hover { box-shadow: 0px 0px 7px 3px blue !important; border-color: blue !important; }
  .hoverpink:hover { box-shadow: 0px 0px 7px 3px var(--STMpink) !important; border-color: var(--STMpink) !important; }

  /* --- CSS Often Used Items --- */
  .txshdw  { text-shadow: 3px 3px 3px gray; }
  .txshdw2 { text-shadow: 3px 3px 3px silver; }
  .bxshdw  { box-shadow: 3px 3px 5px 0px gray; }
  .bxrnd  { border: 1px gray solid; border-radius: 20px; }
  .nornd  { border-radius: 0px !important; }

  /* --- Cards for Responsive Mobile Design --- */
  .flexcard { display: flex; flex-flow: row wrap; justify-content: space-between; row-gap: 1rem; }
	.card {
    box-sizing: border-box;
    border: 1px gray solid; border-radius: 20px;
		background-color: white;
		padding: 10px 15px 10px 10px;
    box-shadow: 5px 5px 5px 0px gray;
	}
  .widecard { width: 100% !important; }
	.card > h2 {
    margin-top: 0px;
		margin-bottom: 3px;
		text-align:center;
    text-shadow: 3px 3px 3px silver;
	}
	.card > h4 {
    margin-top: 0px;
		margin-bottom: 3px;
		text-align: center;
		font-style: italic;
		font-size: 10pt;
	}
	.card p:first-of-type { margin-top: 0; }
	.card p:last-of-type { margin-bottom: 0; }
	p.pushdown { clear:both; margin:0; padding:0; border:none; }

  /* --- Inline 'Button' made from HTML elements --- */
  a.button { padding-left: .5ex; padding-right: .5ex; line-height: 166%; border-width: 2px; border-color: navy; }
  a:visited.button { background-color: var(--STMpink); border-style: outset; color: navy; }
  a:link.button    { background-color: var(--STMpink); border-style: outset; color: navy; }
  a:hover.button   { background-color: #FF70C0;      border-style: outset; color: navy; }
  a:active.button  { background-color: var(--STMpink); border-style: inset;  color: red;  }

  /* --- Picture and Text Boxes --- */
  .pink-box-rnd { border: 1px gray solid; border-radius: 15px; padding: 10px; background-color: var(--STMpink); box-shadow: 5px 5px 5px 0px gray; }
  aside { border: 1px gray solid; border-radius: 20px; background-color: #FFCCFF; padding: 7px; }

  figure   { margin: 0; width:max-content; }
  figure.r { float: right; margin-left:  15px !important; text-align: center; padding: 0; border: none; }
  figure.l { float: left;  margin-right: 15px !important; text-align: center; padding: 0; border: none; }
  figure.c {               margin:       auto !important; text-align: center; padding: 0; border: none; }
  figure img { border: 1px gray solid; box-shadow: 3px 3px 5px 0px gray; }
  figure.ns img { border: 0; box-shadow: none; }
  figure.rnd   img { border-radius: 20px; }
  figure.rnd10 img { border-radius: 10px; }
  figcaption { font-size: 0.75rem; line-height: 0.9rem; font-weight: normal; color: #660033;
               text-align: center; margin: 0; display: block; }

  /* --- Common Footer Styles --- */
  footer { text-align:center; clear:both; }
  div#gx table { margin: auto; display: inline-block; overflow: hidden; }
  div#gx table td { text-align: left; overflow: hidden; }
  div.footer p { display:flex; flex-flow: row wrap; justify-content: space-around; column-gap: 0;
               width: 100%; column-gap: 0.5rem; width: 95%; margin: auto; }
  footer span { display: inline-block; color: #888; }
  footer a { font-weight: normal; }
  p.footer { text-align: center !important; margin-top: 0.3rem; color: #999; }

  /* --- Responsive Design Adjustments --- */
  /* Default Layout: Desktops, Laptops, Tablets, Phones Landscape */
    h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.17rem; }
    p, ol, ul, footer { font-size: 1rem; }
    p.footer { font-size: 0.8rem; }
    span.footL, span.footR { width: 45%; font-size: 1.0rem; }
    span.footL { text-align: right; } span.footR { text-align: left ;}
    .card { width: 48.5%; }
    .card p { font-size: 0.9em; text-align: left; }

  @media only screen and ( max-width: 480px ) { /* Phones Portrait */
    h1 { font-size: 3rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.75rem; }
    p, ol, ul, footer { font-size: 1.6rem; }
    p.footer { font-size: 1.0rem; }
    span.footL, span.footR { width: 95%; font-size: 1.5rem; text-align: center;}
    .card { width: 100%; }
    .card p { font-size: 1.4rem; text-align: justify; }
    figcaption { font-size: 1.5rem; line-height: 1.8rem; }
		.highslide-heading, .highslide-caption { font-size: 1.5rem !important; }
  }

/* End of STMstyleM.css */