body {
  font-family: Arial,Verdana,sans-serif;
  margin:  10px;
  padding: 10px;
  background-color: #ffffff;
  color: black;
}

/* Link styles of choice; Replace the use of these PHP parameters
   $linkcolor    ="#0040fd";   # highlight links with this colour
   $alinkcolor   ="teal";      # show active links with this colour
   $vlinkcolor   ="#6833ca";   # show vistited links this colour
   $notlinkcolor = "#442185";  # for point labels which are not links.
   $subheadcolor =  $notlinkcolor; # Sub headers

They are used in the navigation bar at the top.  Need to create a class for
See also ESC_params.py to reset these for python generated pages.

*/


a:link    {color: #0040fd;}
a:visited {color: #6833ca;}
a:hover   {background-color: Silver;}
a:active  {color: teal;}


/* Start with the default style for hr */
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}


/* Replace the former  border='0' width='95%%' cellspacing='2' cellpadding='5' */
table.banner {
    width: 100%;
    border-style: none;
    border-spacing: 2px;
    padding: 5px;
}

/* Use CSS to Set up dropdown menus */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 6px 10px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Styles adapted from w3.css, used for top navigation row */


.esc-btn,.esc-button{border:none;display:inline-block;outline:0;padding:7px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.esc-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.esc-btn,.esc-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.esc-disabled,.esc-btn:disabled,.esc-button:disabled{cursor:not-allowed;opacity:0.3}.esc-disabled *,:disabled *{pointer-events:none}
.esc-btn.esc-disabled:hover,.esc-btn:disabled:hover{box-shadow:none}

.esc-dropdown-click,.esc-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.esc-dropdown-hover:hover .esc-dropdown-content{display:block;z-index:1}
.esc-dropdown-hover:first-child,.esc-dropdown-click:hover{background-color:#ccc;color:#000}
.esc-dropdown-hover:hover > .esc-button:first-child,.esc-dropdown-click:hover > .esc-button:first-child{background-color:#ccc;color:#000}
.esc-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}

.esc-bar-block .esc-dropdown-hover,.esc-bar-block .esc-dropdown-click{width:100%}
.esc-bar-block .esc-dropdown-hover .esc-dropdown-content,.esc-bar-block .esc-dropdown-click .esc-dropdown-content{min-width:100%}
.esc-bar-block .esc-dropdown-hover .esc-button,.esc-bar-block .esc-dropdown-click .esc-button{width:100%;text-align:left;padding:8px 16px}
.esc-bar{width:100%;overflow:hidden}.esc-center .esc-bar{display:inline-block;width:auto}
.esc-bar .esc-bar-item{padding:8px 16px;float:left;width:auto;border:none;outline:none;display:block}
.esc-bar .esc-dropdown-hover,.esc-bar .esc-dropdown-click{position:static;float:left}
.esc-bar .esc-button{white-space:normal; font-size: 12pt;}
.esc-bar-block .esc-bar-item{display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none}
.esc-bar-block.esc-center .esc-bar-item{text-align:center}.esc-block{display:block;width:100%}

.esc-content{max-width:980px;margin:auto}.esc-rest{overflow:hidden}
.esc-cell-row{display:table;width:100%}.esc-cell{display:table-cell}
.esc-cell-top{vertical-align:top}.esc-cell-middle{vertical-align:middle}.esc-cell-bottom{vertical-align:bottom}
.esc-hide{display:none!important}.esc-show-block,.esc-show{display:block!important}.esc-show-inline-block{display:inline-block!important}
@media (max-width:600px){.esc-modal-content{margin:0 10px;width:auto!important}.esc-modal{padding-top:30px}
.esc-dropdown-hover.esc-mobile .esc-dropdown-content,.esc-dropdown-click.esc-mobile .esc-dropdown-content{position:relative}
.esc-hide-small{display:none!important}.esc-mobile{display:block;width:100%!important}.esc-bar-item.esc-mobile,.esc-dropdown-hover.esc-mobile,.esc-dropdown-click.esc-mobile{text-align:center}
.esc-dropdown-hover.esc-mobile,.esc-dropdown-hover.esc-mobile .esc-btn,.esc-dropdown-hover.esc-mobile .esc-button,.esc-dropdown-click.esc-mobile,.esc-dropdown-click.esc-mobile .esc-btn,.esc-dropdown-click.esc-mobile .esc-button{width:100%}}
@media (max-width:768px){.esc-modal-content{width:500px}.esc-modal{padding-top:50px}}
@media (min-width:993px){.esc-modal-content{width:900px}.esc-hide-large{display:none!important}.esc-sidebar.esc-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.esc-hide-medium{display:none!important}}
@media (max-width:992px){.esc-sidebar.esc-collapse{display:none}.esc-main{margin-left:0!important;margin-right:0!important}}

.esc-container,.esc-panel{padding:0.01em 16px}.esc-panel{margin-top:16px;margin-bottom:16px}
.esc-code,.esc-codespan{font-family:Consolas,"courier new";font-size:16px}
.esc-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.esc-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.esc-card,.esc-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.esc-card-4,.esc-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}

.esc-button:hover{color:#000!important;background-color:#ccc!important}

.esc-blue,.esc-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.esc-nav-blue,.esc-hover-nav-blue:hover{color:#0040fd!important;background-color:#c6dbff!important}

table.nav {
    width:            100%;
    background-color: #c6dbff;
    border-style:     none;
    border-spacing:   2px;
}

td.nav {
    text-align:       left;
    padding:          5px;
}

td.nav_active {
    text-align:       left;
    background-color: DeepSkyBlue;
    padding:          5px;
}

/* This will only apply if <tr class='top'> is used */
tr.top {
  background-attachment: fixed;
  background-image:      url('/images/range_view_small.jpg');
  background-repeat:     no-repeat;
  background-position:   left top;
}

.blackbox {
    border:             2px solid black;   /* Put a border around the paragraph */
    background-color:   #f2f2f2;          /*   #e6e6e6; */
    width:              90%;  /* width of the paragraph */
    padding:            20px; /* pad between the text content and the border */
    margin:             auto;  /* horizontally centre */
}

.error {
    border:             2px solid red;   /* Put a border around the paragraph */
    background-color:   #f2f2f2;
    width:              90%;  /* width of the paragraph */
    padding:            20px; /* pad between the text content and the border */
    margin:             auto;  /* horizontally centre */
}

.warning {
    border:             2px solid blue;   /* Put a border around the paragraph */
    background-color:   #f2f2f2;
    width:              90%;  /* width of the paragraph */
    padding:            20px; /* pad between the text content and the border */
    margin:             auto;  /* horizontally centre */
}

/*     background-color: #c6dbff;
 */
/* Classes to apply to h tags as desired.  Use the subhead() call to place
headers with the appropriate class, name tag for navigation, and <h?> hlevel

subhead( $subhead, $class='point_subheader', $name='', $hlevel=4)

*/
.top_header {
    color:           #442185;
    font-weight:     bold;
    font-size:       1.5em;
    padding:         5px;
}

.point_header {
    background-color: #c6dbff;
    color:            #442185;
    font-weight:      bold;
    font-size:        1.5em;
    padding:          5px;
}

.point_subheader {
    display: inline;
    background-color: #c6dbff;
    color:            #442185;
    font-weight:      bold;
    font-size:        1.2em;
    padding:          5px;
}
.point_subheader2 {
    display: inline;
    background-color: #ffdead;
    color:            #442185;
    font-weight:      bold;
    font-size:        1.2em;
    padding:          5px;
}


.indent_large {
    margin-left: 50px;
}

.indent_medium {
    margin: 30px;
}

.indent_small {
    margin: 15px;
}


/* Style blocks of text with an indent - replace the blockquote with <div class='content'></div> */
/*  overflow-x: auto; will put a horizontal scroll bar on tables which are too wide for the window. */
.content { margin-left: 50px; overflow-x: auto; line-height: 1.4em;}
.contentbig { margin-left: 50px; overflow-x: auto; line-height: 1.4em; font-size 1.5em;}
.floatleft { float: left; margin-top 10px; margin-bottom 10px; margin-right 50px; margin-left 50px;  padding-left 50px; text-align: left;}
.floatright { float: right; margin-top 10px; margin-bottom 10px; margin-right 50px; margin-left 50px;  padding-right 50px;text-align: right;}
.imageleft { float: left; margin 10px 10px 10px; }
.imageright { float: right; margin 10px 10px 10px; }
.clearfix  { overflow: auto; }

.borderbox { border: 3px solid #442185; }


/* Default table style
table {
    border: none;
    border-collapse: collapse;
    padding: 6px;
    background-color: #ffffff;
}

th {
    border: none;
    padding: 6px;
    font-weight: bold;
}

*/
th { padding: 5px;}

td { padding: 5px;}

div.sml_padding {
  padding: 5px;
}
/* Use <div class='table-container'> around a table to get a horizontal scrollbar for extra wide tables */
.table-container {
    overflow-x: auto;
}
/* Alternate style of table for data output, with border, no hover, single background colour */
table.showborder {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 6px;
    background-color: #f0f0f0;
}
/* Need to have the cells show a border too */
.showborder {border: 1px solid black; padding: 5px;}



/* Style tables for data output from a database query */
table.datatable {border: none;}
/* Styles for long tables - enable fixed header!
tbody.datatable {
  display:block;
  overflow:auto;
}

thead.datatable tr{
    display:block;
}
*/

tr.datatable:nth-child(even) {background-color: #f2f2f2;}
tr.datatable:nth-child(odd) {background-color:  #e6e6e6;}
tr.datatable:hover {background-color: #c6dbff;}

/* Style tables for data input (no hover) */
table.datainput {border: none; padding:10px;}
tr.datainput:nth-child(even) {background-color: #f2f2f2;}
tr.datainput:nth-child(odd)  {background-color: #e6e6e6;}

/* Style table cells according to whether money is owed or refundable ESC_booking_update.py and ESC_member_update.py */
.payment { text-align: center; background-color: pink;}
.refund  { text-align: center; background-color: #c6dbff;}
.donation { text-align: center; background-color: #EEE8AA;}
.limecell { text-align: center; background-color: #40E0D0;}

/* Highlight data cells more generally ESC_booking_rates.py */
.highlight { text-align: right; background-color: #ffcccc;}
/* Use an extra column with special styles for a vertical divider */
.verticalrule {
    border-top-style: none;
    border-right-style: groove;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #f2f2f2;
    padding: 0px;
	      }
.horizontalrule {
    border-top-style: groove;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #f2f2f2;
    padding: 0px;
	      }

/* Styles for other types of table cell content DONT USE THIS */
.date  { text-align: center; background-color: #f2f2f2;}
.notes { text-align: center; background-color: #f2f2f2;}
.memid { text-align: center; background-color: #f2f2f2;}

/* Table Cells to contain labels for neighbouring Input Cells */
.labelcenter { text-align: center; background-color: #f2f2f2;  padding: 3px;}
.labelleft   { text-align: left;   background-color: #f2f2f2;  padding: 3px;}
.labelright  { text-align: right;  background-color: #f2f2f2;  padding: 3px;}
/* Table Cells contain input tags */
.inputcenter { text-align: center; background-color: #c6dbff;    padding: 3px;}
.inputleft  { text-align: left;    background-color: #c6dbff;    padding: 3px;}
.inputright { text-align: right;   background-color: #c6dbff;    padding: 3px;}


/* Table Cells of a datatable with NO override of background colour desirable */
.datacenter {padding: 4px; text-align: center;}
.dataleft   {padding: 4px; text-align: left;}
.dataright  {padding: 4px; text-align: right;}

/* style for element to be visible only on demand */
   .more { display: none;}


/* Styles in use by phpMyEdit - first start with their defaults */
hr.pme-hr {
    border: 0px solid;
    padding: 0px;
    margin: 0px;
    border-top-width: 1px; height: 1px;
}

table.pme-main {
    border: #004d9c 1px solid;
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
}

table.pme-navigation {
    border: #004d9c 0px solid;
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
}

td.pme-navigation-0, td.pme-navigation-1 { white-space: nowrap; }

th.pme-header {
    border: #004d9c 1px solid;
    padding: 4px;
    background: #add8e6;
}

td.pme-key-0, td.pme-value-0, td.pme-help-0, td.pme-navigation-0, td.pme-cell-0,
td.pme-key-1, td.pme-value-1, td.pme-help-0, td.pme-navigation-1, td.pme-cell-1,
td.pme-sortinfo, td.pme-filter {
    border: #004d9c 1px solid;
    padding: 3px;
}

td.pme-buttons { text-align: left;   }
td.pme-message { text-align: center; }
td.pme-stats   { text-align: right;  }

/* Tried to style submit buttons 25/3/2019, but got overridden.  I wonder what this might override! */
input[type=submit] {
    border: 1px solid #004d9c;
    color: #000000;
    background: #f2f2f2;
    padding: 10px 20px;
    border-radius: 3px;
}

input[type=submit]:hover {
    background: #ffcccc;
}

input[type="radio"]:checked {
  box-shadow: 0 0 0 3px #004d9c;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px #004d9c;
}

/* Styling of a table of contents section */

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 100%;
    margin-bottom: 1em;
    padding: 25px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

.toc_list {
    padding: 5px;
    line-height: 2em;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

.table-of-contents {
float: left;
width: 20%;
background: #f9f9f9 none repeat scroll 0 0;
font-size: 100%;
padding: 25px;
margin: 0 0 0.5em 0.5em;
}

.table-of-contents ul>li {
margin: 0 0 .6em 0;
list-style-type: none;
}

.table-of-contents a {
text-decoration: none;
color: #3D5AFE;
}

* {
  box-sizing: border-box;
}

/* Create columns that float next to each other */
.column1 {
  float: left;
  width: 30%;
  padding: 10px;
}
.column2 {
  float: left;
  width: 70%;
  padding: 10px;
  line-height: 1.4em;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - make columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {
  .column1 {
    width: 100%;
  }
  .column2 {
    width: 100%;
  }
}

/*
ul li       {text-indent: 0px; color: #000000; }
ul li ul li {color: #303030; }
td          {font-size: small; color: darkblue; }
td li       {text-align: left;}
p table     {background-color: #f0f0f0;}
td.green    {color: green;}
td.blue     {color: blue;}
*/