/**
 * phone.css for ACA (base styling, cascades to tablet.css or screen.css if required)
 *
 * Standard Colours: 29May17
 * https://www.w3schools.com/colors/colors_hsl.asp
 * yellow / heading text
 * white / normal text
 * white / box borders
 * #1D3403 dark green / background for all boxes, tables odd rows hsl(88, 89%, 11%) rgb(30, 53, 3)
 * #003B12 another dark green / background in tables, even rows
 * #FFFAB2 yellowish / postit note background colour
 */


pre, .pre {
   /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
   font-family: monospace;
   color: black !important;
   background: white;
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.flexDiv {
      display: inline-flex;
      flex-wrap: wrap;
      background-color: transparent;
      align-items: flex-start; /* 24Aug2021: stops equal height of boxes*/
      /* flex-basis: auto;     */
} /* 21Jan2021: added */

.flexDiv div, .flexDiv article { height: auto; }

/* styling that goes with more... */
.morecontent span { display: none; }
.morelink { display: inline; }

/* 15Aug2021: Enhancements to <details><summary> adapted from https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */

/* Standard implementation is like....
   <article title='$tip' style='width: auto; max-width:800px;'>
      <details>
         <summary><h3>Brief Article Heading</h3><span class='flexhint'></span></summary>
         Extensive Content
      </details>
      <p class='hidewhenopen'>Something visible under the heading even when details are hidden.</p>
   </article>
*/
details summary { cursor: pointer;}
details summary > * { display: inline; }
details[open] + .hidewhenopen { display: none;}
details summary span.flexhint { display: block; font-size: small; font-style: italic; border-bottom: 1px dotted gray;}
details summary span.flexhint::before { content: "Click here to expand this section";}
details[open] summary span.flexhint::before { content: "Click here to hide this section";}
details.inside summary span.flexhint::before { content: "Click here to expand this section";}
details.inside[open] summary span.flexhint::before { content: "Click here for less information";}


.query { background-color: white; color: black; font-family: monospace; font-size: 0.9em;} /* 14Aug2020: added, first use in ccomp_mamage.php */
.bars span {color: red; font-weight: bold; letter-spacing: -4px;} /* 14Aug2020: added to style a many-point progress bar, first use in ccomp_manage.php */

.notphone, .nodisp { display: none; }
p, td, th, li {font-size: 0.8em;}

div { display: inline;}
div.print { display: block;}
/* div.tab {display: none;} */

/* Styling for Information and Warning Articles
 * Use like...
echo "<article class='box90 infoNote'>";
echo "<h3>Instructions to Treasurer...</h3>";
 */

.warnNote {
    background-image: url('../images/warningIcon.gif');
    background-size: 65px;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: top 5px left 5px;
    min-height: 50px;
    padding-left: 50px;
    font-weight: bold;
}
.infoNote {
    background-image: url('../images/informationIcon.gif');
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: top 5px left 5px;
    min-height: 50px;
    padding-left: 50px;
    font-weight: bold;
}

.warnNote h3, .warnNote h4, .infoNote h3, .infoNote h4 {
   margin-left: 65px;
}


.warning{
      background-image: url("../images/warning.png");
      background-repeat: no-repeat;
}

.warning h3, .warning h4 {
      margin-left: 40px;
}


/*  25Jan2023: Added */
article.errorNote  {
   margin: 10px;
   color: white;
   background: black;
   border: 2px solid white;
   font-family: monospace;
   width: auto;
}

#memberLogin      {
      position: relative;
      top: 100px;
      display: inline-block;
      vertical-align: top;
      width: auto;
      height: auto;
      overflow: hidden;
      border: 1px solid white;
      border-radius: 15px;
      padding: 5px 10px 5px 10px;
      margin: 5px;
      margin-top:10px;
      background-color: #1D3403; /* 29May17 */
}

/* ============== KEY ELEMENT POSITIONING & SIZING ============
 * <body>
 *    <header> includes #memberLogin
 *    <nav>
 *    <div id='content'>
 *    <footer>
 * </body>
 * */

header     {
      display: block;
      margin-left: 10px;
      margin-top: 10px;
}

nav  {
      position: relative;
      top: 120px; /* clears nav from #memberLogin */
      left: 10px;
      right: 10px;
      z-index: 999;
      width: 95%
}

div#content {
   display: block; /* necessary for padding-bottom to work */
   position: relative; /* 09Jun2021: but relative to what? */
   top: 120px; /* 09Jun2021: necessary to clear <header> & <nav> */
   padding-bottom: 300px; /* 09Jun2021, to make sure content clears the footer */
   left: 10px;
}

/* 30May2021: styling altered so that footer does not swamp small screens */
footer {
      position:relative; /* 30May2021 */
      margin: 60px 15px 0 15px; /* 30May2021 */
      background-color: hsl(0, 100%, 20%) ; /* 30May2021: hue=0 (red) saturation lightness */

}

/* =============================================================== */

article, aside, figure, hgroup, nav, section {
      display: block;
}

article {width:auto; box-shadow: 5px 5px 5px gray;}

article.inside  { border: none; background-color: #004D17} /* 22Jul2020 & 29Jan2021 */

nav {
      padding: 5px;
      font-size: 1.1em;
      border: 1px solid white;
      border-radius: 10px;
      overflow: hidden;
      background-color: #1D3403; /* 29May17: #1D3403; */
}

footer {
      display: flex;
      flex-wrap: wrap;
      flex-basis: auto;
      font-size: 1.0em; /* 22Jan2021: reviewed */
      text-align: center;
      border: 1px solid white;
      border-radius: 15px;
}

/*
 * Sticky Note styling
 * 07Jan2021: Added, first use in ndl_mamage.php
 */
article.stickyNote{
   color: black;
   font-family: sans-serif;
   background-color: #FEF886;
   border:1px solid black;
   border-radius: 0;
   box-shadow: 5px 5px 5px gray;
}

/*
 * Development Note styling
 * 09Jan2021: Added, first use in ndl_manage.php
 */
article.devNote{
   color: white;
   background-color: blue;
   font-family: monospace;
   border:1px solid white;
   box-shadow: 5px 5px 5px gray;
}

body  {
      font-family: 'Trebuchet MS', sans-serif;
      font-size: 10pt;
      margin: 0px;
      padding: 0px;
      color: white;
      background-attachment: fixed; /* 29May17 */
      background-size: cover; /* 29May17 */
}


/*
 * @since 2023-11-26: [body] styling now handled by ACA.php/pageStyling(), depending on user t:tree_webpages.access value.
 */
/* Body Background Images - updated 21Sep2022 */
@media all and (orientation:landscape)    {
      XbodyX { background-image: url("../backpix/phoneLandscape.jpg?v=21Sep2022"); /* 26May18 */ }
      body#print { background-image: none; /* 09Jan19 */ }
      }
@media all and (orientation:portrait)    {
      XbodyX { background-image: url("../backpix/phonePortrait.jpg?v=21Sep2022"); /* 26May18 */ }
      body#print { background-image: none; /* 09Jan19 */ }
      }

body.admin     { background-color: black; background-image: none;} /* 30Sep2021 */  
body.kwiklinx     { background-color: #00006B; background-image: none;} /* 30Sep2021 */  
body.archive { background: hsl(88, 89%, 7%); background-image: none;}  /* 12Nov2022 */

header     {
      background-image: url("../images/headerGraphicPhone.gif");
      background-repeat: no-repeat;
}

header p.breadcrumb{
      position: absolute;
      top: 70px;
      left: 0px; /* 29May17 */
      right: 0px; /* 29May17 */
      padding-left: 2px;
      border-top: 1px solid white; /* 29May17 */
      border-bottom: 1px solid white; /* 29May17 */
      font-size: 0.8em;
      color: white;
      background-color: #1D3403 ; /* 29May17 */
      text-align: left;
}

header p.abn  {
      color: yellow;
      font-size: 0.8em;
      position: absolute;
      top: 72px;
      right: 12px; 
}

header p.motto     {
      position: absolute;
      top: 28px;
      left: 300px;
      color: yellow;
      font-style: italic;
      font-size: 12pt;
      text-shadow: 3px 3px 1px gray;
}

header p.phoneno     {
      position: absolute;
      top: 48px;
      left: 100px;
      color: yellow;
      font-style: italic;
      font-size: 11pt;
      text-shadow: 3px 3px 1px gray;
}

nav a {
      display: inline;
      text-align: center;
      height: 25px;
      width: 180px;
      border: none;
      margin-right: 10px;
      text-decoration: none;
}

nav a.main { font-weight: bold; }

nav a.sub   {}

nav a:link { color: yellow; }
nav a:visited { color: white; }
nav a:hover { color: black; background: yellow; }
nav a:active { color: black; background: black;}

nav a.disabledLink     {
      color: gray;
      clear: left;
      text-align: center;
      pointer-events: none;
}



footer.div  { display: inline-block; text-align: center;}

h2    {
      color: yellow;
      font-style: italic;
      font-size: 25pt;
      text-shadow: 3px 3px 1px #1D3403;
}

h3    {
      color: yellow;
      font-style: italic;
      font-size: 15pt;
      text-shadow: 3px 3px 1px #1D3403;
}

h4    {
      color: yellow;
      font-style: italic;
      font-size: 12pt;
      text-shadow: 3px 3px 1px #1D3403;   
} /* 18Jun18 */

article, fieldset   {
      display: inline-block;
      vertical-align: top;
      height: auto;
      /* width: 90%; /* 25Oct2022: remmed out */
      overflow: hidden;
      border: 1px solid white;
      border-radius: 15px;
      padding: 5px 10px 5px 10px;
      margin: 5px;
      margin-top:10px;
      background-color: #1D3403; /* 29May17 */
}

/* Background colours of voting forms in ChoreoComp 24May18 */
article.ccEasyIntermediate{ background-color: #002966; /* dark blue */ }
article.ccIntermediate{ background-color: #4d004d; /* dark pink */ }

article.box90   { border: 1px solid white;}

a, article a { text-decoration: underline; color: yellow;}
article a:visited { color: white; }
article a:hover { background: #252525; }
article a:active { background: #252525; }

/*
Newspaper or Email Appearance Styling, uses Parchment colour
@see https://htmlcolorcodes.com/colors/parchment/
@since 2024-05-18: Background colour updated to Parchment #FCF5E5
*/
article.postit    {
      position: relative;
      background-color: #FCF5E5; 
      color: black;
      font-family: "font-family: 'Times New Roman', serif;";
      font-size: 1.0em;
      border-radius: 0;
      border: 1px solid black;
      overflow: hidden;
      padding: 25px;
}

/* Folded Corner for Post It Note */
article.postit:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #FCF5E5; 
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

article.postit a   {
      color: black;
      background: #FCF5E5; 
}

article.postit div  {
      display: block;
      color: black;
      background-color: #FCF5E5;
      column-count: 2;
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-rule: 1px solid black;
      -moz-column-rule: 1px solid black;
      -webkit-column-rule: 1px solid black;
      border: none;
}

article.postit h2, article.postit h3, article.postit h4      {
      color: black;
      -webkit-text-shadow: none;
      -moz-text-shadow: none;
      text-shadow: none;
      text-align: center;
      font-style: normal;
}

article.postit h3 {
      font-size: 3em;
      font-weight: 900;
      margin: 0px;
      -webkit-text-fill-color: white; /* Will override color (regardless of order) */
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
}

article.postit h4 {
      font-size: 1.2em;
      margin: 0px;
}

article.postit h5 {
      font-size: 1.0em;
      margin: 0px;
}

/* ---- End Newspaper Appearance --- */

td, th    {
      vertical-align: top;
      font-size: 1.1em;
}

td.middle {
    vertical-align: middle;
    text-align: center;
}

th    {
      border: 1px solid white;
      color: yellow;
}

table.buttonrack  {
      display: inline-block;
      vertical-align: top;
      height: auto;
      overflow: hidden;
      margin: 10px;
      border: 1px solid white;
      border-radius: 0;
      background-color: #004E4A;
}

table.table90   {
      display: inline-block;
      vertical-align: top;
      height: auto;
      overflow: hidden;
      margin: 10px;
      border: 1px solid white;
      border-radius: 15px;
      margin-top:20px;
      background-color: #1D3403; /* 29May17 */
      border-collapse: collapse;
      width: auto;
}

table.table90 tr:nth-child(odd){
      /* background-color: #464646; */
      background-color: #1D3403 ; /* 29May17 */
}

table.table90 tr:nth-child(even){
      background-color: #004D17 ; /* 04Sep2020: lightened from #003B12 */
}

table.table90 th,  table.table90 td  {
      border-right: 1px solid white;
}

table.table90 th  {
      border-bottom: 1px solid white;   
}

/**
 * @since 2023-12-21: Added to style tables of Logs
 */
table.log {
   font-family: monospace;
   background: white;
   color: black;
   border-collapse: collapse;
   
   th { color: black; border: 1px solid black; }
   td { color: black; border: 1px dotted black; }
   th a, td a { color: black;}
   th a:hover, td a:hover { color: white; background: black; }
   thead th { font-size: 1.2em; background: #FFFBC6;}
   tfoot td { color: white; background: black; }
}

tr.horiborder     {
      border-top: 1px solid white;
      border-bottom: 1px solid white;
}

/**
 * PHP echo of trace information for debugging.
 * Use like:
echo "<p class='traceEcho'>Got To Line" . __LINE__ . "</p>";
 *
 * @since   27Feb2023: Created.
*/
p.traceEcho  {background: black; color: white; font-family: monospace; font-size: 1.5em; border: 1px solid white;}
p.traceEcho::after { content: " [If you see this message, warn Mike. It should not be visible!]";}

/**
 * PHP temporary disable of something under development.
 * Use like "<div class='underConstruction'> whatever is being disabled </div>"
 *
 * @since    27Feb2023: Created
 */
.underConstruction   { background: gray; color: yellow;}
.underConstruction::before { font-size: 1.2em; content: "The function below is temporarily disabled while improvements are made.  Please come back later. "}
.underConstruction::after { font-size: 1.2em; content: "Sorry for the inconvenience! "}

/*
Sticky table headers & footers

Essential features of HTML:
   <table style='position: relative; overflow: visible; border-radius: 0;'>
   <th style='position: sticky; top:0; bot:0; background: #DCFCE4; color: black;'>

Notes:
   Can have sticky top & bottom headers with this approach.
   Doesn't interfere with cardTable styling for small screens. 
   Sticky headers cannot have borders, so use unusual colors to distinguish from rest of table.
   
Sample Implementation:
   timeline.php
*/
table.sticky { overflow: visible; border-radius: 0px; border-collapse: separate; border-spacing: 0;}
table.sticky tr th { position: sticky; top: 0; background-color: #1D3403;}
table.sticky tr th.bot { position: sticky; bottom: 0; background-color: #1D3403;}

.red {
      color: red;
      font-weight: bold;
      }
      
.green {
      color: green;
      font-weight: bold;
      }
      
.code {
      font-family: "Courier New", monospace;
}
      
p.credit    {
      font-size: smaller;
      font-style: italic;
}



/* NEW icon */
.new{
      background-image: url("../images/new_icon.png");
      background-repeat: no-repeat;
}
/.new h2, .new h3, .new h4, span.new p {
      margin-left: 40px;
      min-height: 45px;
}

/* NEWS icon 09Jan2021 */
.news{
      background-image: url("../images/newsIcon.png");
      background-size: 80px;
      background-position: 98% 2%; /* near top right */
      background-repeat: no-repeat;
}
.news h2, .news h3, .news h4, span.news p {
      margin-right: 80px;
      min-height: 45px;
}

td.underline, th.underline {
      border-bottom: 1px solid white;
}

.show123 {
      background-image: url("../images/OneTwoThree.gif");
      background-repeat: no-repeat;
      background-position: 0 100px;
}

/*
 * Button Syling developed with http://css-tricks.com/examples/ButtonMaker/# for Textual Buttons
 * Works on <button> elements and on <input class='button'> elements
 * 27Jan2021: added element <button>
 */
button, .button {
      border-top: 1px solid #96d1f8;
      background: #65a9d7;
      background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
      background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
      background: -moz-linear-gradient(top, #3e779d, #65a9d7);
      background: -ms-linear-gradient(top, #3e779d, #65a9d7);
      background: -o-linear-gradient(top, #3e779d, #65a9d7);
      padding: 5px;
      -webkit-border-radius: 9px;
      -moz-border-radius: 9px;
      border-radius: 9px;
      -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
      -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
      box-shadow: rgba(0,0,0,1) 0 1px 0;
      text-shadow: rgba(0,0,0,.4) 0 1px 0;
      color: white;
      font-size: 19px;
      font-family: 'Tahoma', Sans-Serif;
      text-decoration: none;
      vertical-align: middle;
      margin: 15px;
      cursor: pointer;
      }
.button:hover, button:hover {
      border-top-color: #28597a;
      background: #28597a;
      color: #ccc;
      }
.button:active, button:active {
      border-top-color: #1b435e;
      background: #1b435e;
      }
.button:disabled, button:disabled  {
      border-top-color: black;
      background: gray;
} /* 02Jan18: added */


/*
    Button styling especially for iOS to over-ride Apple's idiotic default styling for image buttons.
    https://css-tricks.com/overriding-default-button-styles/
    07Jan2021: Added
*/
button.img {
    display: inline-block;
    border: none;
    padding: 0.1rem 0.1rem;
    margin: 0;
    text-decoration: none;
    background: #D4ECFB;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}
    
button.img:hover, button.img:focus {
    background: #6ec6f1;
}

button.img:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button.img:active {
    transform: scale(0.99);
}
/* end button.img styling */

/*
 * Checkbox styling
 * Adapted from https://dev.to/proticm/styling-html-checkboxes-is-super-easy-302o
 *
 * Implement with:
 * <label class='checkbox'><input type='checkbox' ...><span>text</span></label>
 * 
 * Used in ndl_confirmDropoffs.php, ndl_master.php, ndl_signoffVote2List.php
 * 30Jan2021: Created
 */
.checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

.checkbox > span {
    color: white; /* MS: text beside checkbox, was #344495E */
    padding: 0.5rem 0.25rem;
}

.checkbox > input {
    height: 25px;
    width: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid #34495E;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #EF8861; /* MS: was #41B883 */
    cursor: pointer;
  }

.checkbox > input:checked {
    border: 1px solid #41B883;
    background-color: #FFFBC6; /* MS: was #34495E */
}

.checkbox > input:checked + span::before {
    content: '\2713';
    color: green; /* MS: was #41B883 */
    font-weight: bold;
    font-size: large;
    display: block;
    text-align: center;
    position: absolute;
    left: 0.7rem;
    top: 0.2rem;
}

.checkbox > input:active {
    border: 2px solid #34495E;
}

.pleaseWait {
    border: none;
    color: yellow;
    background-color: transparent;
    font-size: 1.5em;
} /* 16Aug2020: added to style "Please Wait" message after Submit button clicked (see choreocomp.php L518)

/*      
.disabledbutton, .disabledbutton:hover{
      background: grey;
}
*/

/*  Styling for Go to Top button
    Ref: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
    Usage: cuesearch.php and scripts.js (02Jul2020)
*/
#goTop {  
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  left: 30px; /* Place the button 30px from the left */
  z-index: 99; /* Make sure it does not overlap */ 
}
  
.hide {display: none;}

/** @since 2023-12-22: Styling from class.sortedTable.php for sorted columns and disabled links */
.showDiamond::before { font-size: 1.5em; content: '\00A0 \2666 \00A0' }
.disabledLink { pointer-events: none; text-decoration: none; color: red !important; }

.button2 {
      margin: 25px;
      border-top: 1px solid #c997f7;
      background: #9665d6;
      background: -webkit-gradient(linear, left top, left bottom, from(#943e9c), to(#9665d6));
      background: -webkit-linear-gradient(top, #943e9c, #9665d6);
      background: -moz-linear-gradient(top, #943e9c, #9665d6);
      background: -ms-linear-gradient(top, #943e9c, #9665d6);
      background: -o-linear-gradient(top, #943e9c, #9665d6);
      padding: 2.5px 5px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
      -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
      box-shadow: rgba(0,0,0,1) 0 1px 0;
      text-shadow: rgba(0,0,0,.4) 0 1px 0;
      color: white;
      font-size: 11px;
      font-family: 'Tahoma', Sans-Serif;
      text-decoration: none;
      vertical-align: middle;
      }
.button2:hover {
      border-top-color: #4d2878;
      background: #4d2878;
      color: #ccc;
      }
.button2:active {
      border-top-color: #371b5c;
      background: #371b5c;
      }
      
/*
 * Form styling adapted from
 * http://www.htmldrive.net/items/show/1019/html5-and-CSS3-Modern-Web-Forms-effect
 */
.form {
    color: #fff;
    background: #2d2d2d;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(60,60,60)),
        color-stop(0.74, rgb(43,43,43)),
        color-stop(1, rgb(60,60,60))
        );
     background: -moz-linear-gradient(
        center bottom,
        rgb(60,60,60) 0%,
        rgb(43,43,43) 74%,
        rgb(60,60,60) 100%
        );
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border: 2px solid white;
     border-radius: 10px;
     margin: 10px;
     padding: 25px;
     width: 600px;
     }

input.text {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     border:solid 1px #444;
     font-size: 14px;
     /* width: 90%; */
     padding: 7px 8px 7px 8px;
     background: #ddd;
     background: -moz-linear-gradient(
          center bottom,
          rgb(225,225,225) 0%,
          rgb(215,215,215) 54%,
          rgb(173,173,173) 100%
     );
     background: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(225,225,225)),
          color-stop(0.54, rgb(215,215,215)),
          color-stop(1, rgb(173,173,173))
      );
      color:#333;
      text-shadow:0px 1px 0px #FFF;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
      box-shadow: 0px 1px 0px #777;
 }
 
 input.readonly {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
     border:solid 1px #444;
     font-size: 14px;
     /* width: 90%; */
     padding: 7px 8px 7px 8px;
     background: gray;
     background: -moz-linear-gradient(
          center bottom,
          rgb(125,125,125) 0%,
          rgb(115,115,115) 54%,
          rgb(73,73,73) 100%
     );
     background: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(125,125,125)),
          color-stop(0.54, rgb(115,115,115)),
          color-stop(1, rgb(73,73,73))
      );
      color:white;
      text-shadow:0px 1px 0px #FFF;
      -moz-box-shadow: 0px 1px 0px #777;
      -webkit-box-shadow: 0px 1px 0px #777;
      box-shadow: 0px 1px 0px #777;
 }

/*
* class fwp : fields with patterns (before Submit)
* class fwf : fields with fixes (after Submit)
* Reference: http://hslpicker.com/ hue+saturation+lightness+alpha(opacity)
* 
* */
input.fwp:invalid, input.fwf:invalid {  
  background: hsla(0, 90%, 90%, 1); /* invalid shading is red */
}

input.fwp:valid {  
  background: hsla(100, 90%, 90%, 1); /* data meets pattern or required, shading is green */
}

input.fwf:valid {  
  background: hsla(200, 100%, 90%, 1); /* data is subject to fixing after Submission, shading is blue */
}
 
::-webkit-input-placeholder {
   color: blue;
   font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
   color: blue;
   font-style: italic;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: blue;
   font-style: italic;
}

:-ms-input-placeholder {  
   color: blue;
   font-style: italic;
}
 
legend {
    position: relative;
    top: -2px;
    background: #fff;
    padding: 10px 20px;
    border: 2px groove threedface;
    border-top: none;
    box-shadow: inset 0 -5px 5px rgba(0,0,0,.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    font-weight: bold;
    font-size: 1.2em;
    color: black;
    border-radius: 9px;
      -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
      -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
}

/*
fieldset    {
      background-color: #1D3403; 
      padding: 15px;
      width: 95%;
      border-radius: 9px;
      -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
      -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
}
*/

select.dropdown   {
      font-size: 15px;
           -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      background: hsla(100, 90%, 90%, 1);
      /* height: 30px; */
}

form.loginbutton, form.loginbutton input  {
      padding: 0px;
      margin: 0px;
      display: inline;
      margin-left: 20px;
}

/*
 * calendarDay is used in choreoComp.php
 */
div.calendarDay  {
      background-color: white;
      background: white url('../images/pageCorner.gif') no-repeat right bottom;
      border: 3px solid black;
      width: 120px;
      height: 120px;
      font-weight: bolder;
      -ms-transform: rotate(-7deg); /* IE 9 */
      -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
      transform: rotate(-7deg);
      float: left;
      margin: 5px;
}

div.calendarDay p.black {  
      color: black;
      text-align: center;
      font-size: 1.4em;
      margin: 0px;
} /* 29Dec2020: reduced size */

div.calendarDay p.red {
      color: red;
      text-align: center;
      font-size: 3em;
      margin: 0px;
} /* 29Dec2020: reduced size */

/*
 * dollarBill is used in renewMembership.php
 */
div.dollarBill  {
      color: green;
      text-align: center;
      font-size: 5em;
      background-color: #E0EDC5;
      border: 10px solid green;
      width: 160px;
      height: 80px;
      font-weight: bolder;
      -ms-transform: rotate(-4deg); /* IE 9 */
      -webkit-transform: rotate(-4deg); /* Chrome, Safari, Opera */
      transform: rotate(-4deg);
      margin: 5px;
      margin-left: 25px;
}

div.print  {
      background-color: white;
      background-image: none;
      color: black;
      width: 180mm;
      border: 2px solid black;
      -webkit-border-radius: 3em 1em;
      -moz-border-radius: 3em 1em;
      border-radius: 3em 1em;
      margin: 25px;
      padding: 25px;
}

div.print h1{
      font-size: 1em;
}

div.print a{
      color: blue;
}

.monospace  {
      font-family:"Courier New", monospace;
}

/*
 * Sortable as used in choreocomp.php
 * Good for two independent columns. Add more sortableN if needed.
 */
#sortable0, #sortable1, #noDragDrop { 
    list-style: none; 
    text-align: left;
    width: 90%;
    display: inline-block;
}
#sortable0 li, #sortable1 li, #noDragDrop li { 
    margin: 0 0 10px 0;
    height: 60px; 
    background: #464646;
    border: 1px solid #999999;
    border-radius: 5px;
    color: #ECECEC;
}

#sortable0 li, #sortable1 li {
      cursor: move;
}

#noDragDrop li  {
      cursor: auto;
}

.helpbox{
  height: 110px;
  padding: 5px 15px 5px 75px;
  background: #b4b3b3;
  color: black;
  border: 1px solid black;
  border-radius: 7px;
  background-repeat: no-repeat;
}

iframe.video {
      width: 600px;
      height: 337px; 
      margin: 0px;
      padding: 0px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .digits    {
    font-size: 1.5em;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #555555;
    color: #fff;
    text-align: center;
    border: 1px solid white;
    border-radius: 6px;
    padding: 5px 0;
    top: -5px;
    left: 105%;
    position: absolute;
    z-index: 1;
    font-size: 0.67em;
}

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

/*
Styling of "Days To Go" tiles

Ref: https://codepen.io/mattlitzinger/pen/ysowF
23May18
*/
.days2Go{
      width: 50px;
      max-width: 50px;
      font: bold 20px 'Verdana', sans-serif;
      text-align: center;
      color: #111;
      background-color: #ddd;
      background-image: -webkit-linear-gradient(top, #bbb, #eee); 
      background-image:    -moz-linear-gradient(top, #bbb, #eee);
      background-image:     -ms-linear-gradient(top, #bbb, #eee);
      background-image:      -o-linear-gradient(top, #bbb, #eee);
      border-top: 1px solid #fff;
      border-radius: 3px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
      margin: 0;
      padding: 5px 0; /* sets the height of the tile */
      display: inline-block;
      position: relative;
}
.days2GoLabel{
      position: relative;
      left: 5px;
      font: bold 15px 'Verdana', sans-serif;
      color: #f47321;
      text-shadow: 1px 1px 0px #000;
      text-align: center;
      text-transform: uppercase;
      display: inline-block;
}

/* ------------------------------------------------- */

/* menu bar links on green background 
A.menu_wh:link { text-decoration: none; color: #FFFFFF; }
A.menu_wh:visited { text-decoration: none; color: #FFFFFF; }
A.menu_wh:hover { text-decoration: none; color: #00C800; background: none; }
A.menu_wh:active { text-decoration: none; color: #FFFFFF; } */

/* breadcrumb links */
A.breadc:link { text-decoration: none; color: #006300; }
A.breadc:visited { text-decoration: none; color: #006300; }
A.breadc:hover { text-decoration: none; color: #00C800; background: none; }
A.breadc:active { text-decoration: none; color: #006300; }

/* menu link for current page */
A.current:link { color: #FFFFFF; text-decoration: none; }
A.current:visited { color: #FFFFFF; text-decoration: none; }
A.current:hover { color: #FFFFFF; text-decoration: none; background: none; }
A.current:active { color: #FFFFFF; text-decoration: none; }

/* Sydney Convention link style */
A.natcon1:link { text-decoration: underline; color: #000066; }
A.natcon1:visited { text-decoration: underline; color: #000066; }
A.natcon1:hover { text-decoration: none; color: #009bbb; background: #000066; }
A.natcon1:active { text-decoration: underline; color: #000066; }
A.natcon2:link { text-decoration: underline; color: #000066; }
A.natcon2:visited { text-decoration: underline; color: #000066; }
A.natcon2:hover { text-decoration: none; color: #fb4f14; background: #000066; }
A.natcon2:active { text-decoration: underline; color: #000066; }
A.natcon3:link { text-decoration: underline; color: #000066; }
A.natcon3:visited { text-decoration: underline; color: #000066; }
A.natcon3:hover { text-decoration: none; color: #69be28; background: #000066; }
A.natcon3:active { text-decoration: underline; color: #000066; }
A.natcon4:link { text-decoration: underline; color: #000066; }
A.natcon4:visited { text-decoration: underline; color: #000066; }
A.natcon4:hover { text-decoration: none; color: #c30045; background: #000066; }
A.natcon4:active { text-decoration: underline; color: #000066; }
A.natcon5:link { text-decoration: underline; color: #000066; }
A.natcon5:visited { text-decoration: underline; color: #000066; }
A.natcon5:hover { text-decoration: none; color: #ffb612; background: #000066; }
A.natcon5:active { text-decoration: underline; color: #000066; }
A.natcon6:link { text-decoration: underline; color: #000066; }
A.natcon6:visited { text-decoration: underline; color: #000066; }
A.natcon6:hover { text-decoration: none; color: #7577c0; background: #000066; }
A.natcon6:active { text-decoration: underline; color: #000066; }

/* Melbourne Convention link style */
A.melcon:link {	text-decoration: underline; color: #FF0000; }
A.melcon:visited { text-decoration: underline; color: #FF0000; }
A.melcon:hover { text-decoration: none; color: #FFBF00; background: #FF0000; }
A.melcon:active { text-decoration: underline; color: #FF0000; }

/* Adelaide Convention link style */
A.adelcon:link {	text-decoration: underline; color: #ED1C24; }
A.adelcon:visited { text-decoration: underline; color: #ED1C24; }
A.adelcon:hover { text-decoration: none; color: #ED1C24; background: #007C91; }
A.adelcon:active { text-decoration: underline; color: #ED1C24; }

/* image links */
A.img:link { border: none; }
A.img:visited { border: none; }
A.img:hover { border: 2px none #FFFFFF;  }
A.img:active { border: none; }

/* table styles */
td.pad { padding-top:4px; padding-bottom:4px; }

/**
 * phone.css EditLog:
 * 25Oct2022: Changes to article styling
 * 12Sep2021: pre styling for wrapping.
 * 24Aug2021: flexDiv: using align-items: flex-start to prevent box heights all being equal.
 * 15Aug2021: Enhancements to details$html .=.
 * 31Jan2021: .checkbox styling added from 
 * 21Jan2021: .flexDiv added
 * 16Aug2020: .pleasewait to style a "Please Wait" message when Submit Button pressed
 * 14Aug2020: .bars to show many-point progress bars as tight sequence of |||.
 * 14Aug2020: .query to render sql queries in monospace
 * 22Jul2020: article.inside
 * 10Apr2020: styling that goes with more...
 * 02Jan19: .button:disabled style, seems to supercede class 'disabledButton'
 * 18Jun18: h4 style
 * 26May18: body backpix changed & now different for landcape & portrait
 * 24May18: class article.ccEasyIntermediate & ccIntermediate: Background colours for ChoreoComp voting form
 * 23May18: class days2Go: tiles showing number of days to go
 * 03Sep17: class tooltip
 * 16Jun17: iframe.video {}
 * 26Oct16: postit font-size 1.2em
 * 06Jun16: form field shadings defined fwp=field with pattern preventing Submit & fwf=field with fix after Submit
 * 27Mar16: article.postit
 * 09Mar16: Added styling for header p.phoneno
 * 22Dec15: .show123
 * 13Dec15: sortable 
 * 22Nov15: .disabledbutton (used in choreocomp.php)
 * 29May15: input.fwp:valid & invalid
 * 14May15: class monospace
 * 18Apr15: td vertical-align
 * 02Mar15: disabledLink{}
 * 02Jan15: Revised absolute positioning for id=content
 * 06Dec14: Added styling for header p.motto
 * 08Aug14: Setup for phone
 */