/* Colours & global components*/

*, html, body, p, ol, ul {color:#333; }
html{ background:#fff; background-image: linear-gradient(#fff, #ddd); background-attachment: fixed; }
#menubutton {background:#eee; }
.menuoverlay {color:#888; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color:#111;}
a, .weebutton, .button {color:steelblue; }
hr {border:0; border-top: 1px solid #888; margin:8px 0; }
select {color:Black; }

.button {color:steelblue; border:1px solid #bbb; background:#ccc; box-shadow:2px 2px 8px #aaa; }
.button:hover, a:hover {color:darkblue;}

.panel {padding:10px; margin:30px 0; border:1px solid #ccc; box-shadow: 4px 4px 16px #aaa; vertical-align:top;}

.overlay { z-index: 1;
  overscroll-behavior: contain;	-webkit-overflow-scrolling: touch; /* smooth velocity scrolling on ipad */
  position: fixed; height: 100%; width: 0; width: 100%; left: 0; left: -100%; top: 0; 
  background-color: rgb(200,200,200); /* fallback background */
  background-color: rgba(200,200,200, 0.85); /* background w/opacity */
  overflow-x: hidden;  transition: 0.4s;
}
/* Position the content inside the overlay */
.overlay-content { position: relative; width:98%; max-width:700px; min-width:350px;	margin:0 auto;  overflow-x: hidden; text-align: left; }
/* The navigation links inside the overlay */
.overlay h3 {color:#eee; }
.overlay a { display:inline-block; padding: 4px; margin:4px; border-radius:8px; color: #222; text-decoration: none; background: #aaa; }
.overlay a:hover, .overlay a:focus { color: green; }

.black {color:black !important;}
.grey {color:#888 !important;}
.lightgrey {color:#ccc !important;}
.white {color:White !important;}
.red {color:red !important;}
.blue {color:steelblue !important;}
.green {color:green !important;}
.orange {color:orange !important;}
.gold {color:gold !important;}
.silver {color:silver !important;}
.bronze {color:#cd7f32 !important;}
.pink {color:pink !important;}

.backblack {background:black !important;}
.backgrey {background:#888 !important;}
.backdarkgrey {background:#ddd !important;} /* make this light for this theme */
.backlightgrey {background:#ccc !important;}
.backwhite {background:White !important;}
.backred {background:tomato !important;}
.backblue {background:steelblue !important;}
.backgreen {background:lightgreen !important;}
.backorange {background:orange !important;}
.backgold {background:gold !important;}
.backpink {background:pink !important;}

.shadow {box-shadow: 4px 4px 16px #aaa; }
.textshadow {text-shadow: 8px 8px 6px #aaa; }

/* Default font weights to suit these colours */

h1 {font-weight:500;}
h2 {font-weight:700;}
h3 {font-weight:600;}
h4 {font-weight:600;}
h5 {font-weight:600;}
h6 {font-weight:600;}
body, p, ol, ul, a, .button, .weebutton {font-weight:450;}