@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:500,500i");

/* 'White' theme [last update 10.30 Dec 14 2018] */
/*
Everything is contained in #wrap, which is positioned relative
so that absolutes relate to it. Absolutes are used because the
order of boxes in the HTML is not usually the same as the order
of display. The primary boxes in the HTML are ordered as follows:
main, #search (if used), nav, #extra, footer.
*/

* { margin: 0; padding: 0; }

html,
body {
height: 100%;
}

html {
position: relative;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box; /* Padding and borders increase box */
overflow-y: scroll;
}

body {
margin: 0;
text-align: center;
font-size: 62.5%; /* Set 1.0em to 10px */
line-height: 1.0;
color: #000;
background: #ebebeb; /* Whatever is fancied */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}

/* FONTS */

body, #contactform .submit {
font-family: "Open Sans", Tahoma, sans-serif;
}

#content h1 {
font-family: "Ubuntu", Tahoma, sans-serif;
}

h2, h3, h4, h5, h6 {
font-family: "Open Sans", Tahoma, sans-serif;
}

pre {
font-family: Consolas, Monaco, monospace;
}

p strong, p b, ul strong, ul b {
font-weight: 600;
}

/* FONT SIZES */

#wrap {
font-size: 1.7em;
}

#content h1 {
font-size: 2.25em;
}

h2 {
font-size: 1.8em;
}

h3 {
font-size: 1.6em;
}

h4 {
font-size: 1.45em;
}

#extra h4 {
font-size: 1.3em;
}

h5 {
font-size: 1.4em;
}

h6 {
font-size: 1.3em;
}

#content p#banner {
font-size: 0.9em;
}

#content p {
font-size: 1.1em;
}

#content p.caption {
font-size: 1.0em;
}

#content p.meta {
font-size: 0.75em;
}

#content ul {
font-size: 1.1em;
}

#search {
font-size: 0.8em;
}

#menu {
font-size: 0.9em;
}

#extra {
font-size: 0.9em;
}

#footer {
font-size: 0.8em;
}

pre {
font-size: 16px;
}

label {
font-size: 1.0em;
}

input[type=text],
input[type=password],
textarea,
.submit {
font-size: 1.0em;
}

/* LAYOUT */

/* Defaults */

#wrap {
position: relative;
margin: 0 auto; /* Centred */
text-align: left;
background: #fff; /* Applies throughout */
}

#getnav { /* Hide except on small screens */
display: none;
}

#content p#banner {
position: absolute;
top: 0.7em;
margin: 0;
}

#content p#banner {
left: 15px;
}

#content {
padding-bottom: 1.0em;
}

#content.narrow {
width: 640px;
}

#content.wide {
width: 860px;
}

#comments {
clear: both;
display: block;
margin-top: 20px;
}

#search {
position: absolute;
top: 0.6em;
right: 15px;
text-align: left;
}

#search-submit {
display: none;
}

#footer {
display: block;
clear: both;
padding: 25px 0 3.0em 0;
height: auto;
margin-bottom: 2.0em;
}

/* End defaults */

/* -------------------------------------------------- */
/* Breakpoint 1 */
/*
Screens over 1024px because #wrap is 980px wide.
#content.wide is 860px and is floated left with
60px left padding, leaving 60px on right so the
860px looks centred.
#content.narrow is 640px wide with a 50px space
to #extra.normal at 220px floated right with
right 10px margin. 60 + 640 + 50 + 220 + 10 = 980.
*/

@media screen and (min-width: 1025px) { /* Wide screen */

  #wrap {
  width: 980px;
  }

  #content { /* Both .narrow and .wide */
  float: left; /* #extra .normal floated right */
  display: inline;
  margin-top: 5.0em;
  padding-left: 60px;
  }

  #extra {
  margin-right: 15px;
  }

  #extra.normal { /* For narrow content */
  float: right;
  display: inline;
  margin-top: 7.35em; /* Lines with H1 (edit to suit) */
  padding-bottom: 2.0em;
  width: 220px;
  }

  #extra.option { /* For wide content (goes to bottom) */
  display: block;
  clear: both;
  max-width: 860px;
  margin: 0 auto;
  }

/*
#menu is given one of two classes: .one or .two
depending on whether #content is .narrow or .wide
so the menu can be moved to suit (eg: to bottom).
Those classes are not used in this stylesheet.
*/

  #menu {
  position: absolute;
  top: 2.7em;
  left: 5px;
  max-width: 980px;
  height: 1.8em;
  }

} /* End breakpoint 1 */

/* -------------------------------------------------- */
/* Breakpoint 2 */
/*
Centres #content and puts #extra.normal underneath.
#extra.option is already underneath (not floated).
Breakpoint calculated to trigger when screen width
is 1024 wide (with 15px approx. grey sides showing).
*/

@media screen and (max-width: 1024px) {

  #wrap {
  width: auto; /* Was 100% */
  }

  #content.narrow,
  #content.wide { /* Unfloated left */
  float: none; display: block;
  margin: 0 auto 0 auto;
  padding: 5.3em 10px 1.0em 10px;
  width: auto;
  min-height: 2.5em;
  }

  #content.narrow {
  max-width: 640px;
  }

  #content.wide {
  max-width: 860px;
  }

  #content p#banner {
  left: 10px;
  }

  #search {
  right: 10px; /* From 15px */
  }

  #extra { /* Goes above footer */
  float: none; display: block;
  margin: 0 auto 0 auto;
  }

  #extra.normal { /* For narrow #content */
  max-width: 640px;
  }

  /* #extra wide column */
  #extra.option {
  max-width: 860px;
  }

  #menu {
  position: absolute;
  top: 3.0em; /* Drops a bit for space to search box */
  left: 0;
  width: 100%;
  height: auto;
  }

  #footer {
  padding-right: 10px;
  padding-left: 10px;
  }

} /* End breakpoint 2 */

/* -------------------------------------------------- */
/* Breakpoint 3 */
/*
For 860 wide + side spaces of 10px + 17 scrollbar.
When the screen width is less than 897, #extra.option
needs 10px space at sides. This can't be done with side
margins because they need to be auto to centre the div.
The only way to stop the text going right to edge is to
add side padding.
*/

@media screen and (max-width: 897px) {

  #extra.option {
  padding-right: 10px;
  padding-left: 10px;
  }

} /* End breakpoint 3 */

/* -------------------------------------------------- */
/* Breakpoint 4 */
/*
The same as breakpoint 3 but for #extra.normal.
*/

@media screen and (max-width: 677px) {

  #extra.normal {
  padding-right: 10px;
  padding-left: 10px;
  }

} /* End breakpoint 4 */

/* HEADINGS */

h2, h3, h4, h5, h6 {
line-height: 1.2;
}

h1 {
line-height: 1.0;
text-shadow: 1px 2px 3px #ccc;
}

h2, h3, h4 {
text-shadow: 1px 1px 2px #ccc;
}

#content h1 {
margin: 0.65em 0 0.65em -2px;
padding: 0 0 2px 0;
font-weight: 500;
letter-spacing: -2px;
color: #333;
}

#content h1 i {
color: #bbb;
font-style: normal;
}

#content h1 span {
color: #7fa729;
text-transform: none;
}

h2, h3 {
margin: 0.75em 0 0.15em 0;
font-weight: 400;
letter-spacing: -1px;
color: #333;
}

h4 {
margin: 1.0em 0 0 0;
font-weight: 600;
letter-spacing: -1px;
color: #333;
}

h5, h6 {
margin: 0.6em 0 0 0;
font-weight: 600;
letter-spacing: -0.5px;
color: #333;
}

#extra h4 {
margin: 0 0 0.5em 0;
letter-spacing: normal;
}

#extra.option h4 {
margin-bottom: 0.25em;
}

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  #extra.normal h4 {
  margin-bottom: 0.25em;
  }

} /* End breakpoint 2 */

h4#comment {
margin-bottom: 6px;
}

/* LOOKS */

#comments { /* Everything in #comments */
line-height: 1.0;
color: #777;
border-top: 1px solid #ebebeb;
}

#content p {
margin: 0.5em 0 0.5em 0;
line-height: 1.4;
}

#comments p {
margin: 0.5em 0 0.5em 0;
}

#content p#banner {
color: #999;
font-weight: normal;
line-height: 1.2;
}

#content p.caption {
clear: both;
margin: -0.5em auto 1.5em auto;
width: 50%;
padding: 0.4em 6px 0.5em 6px;
border-bottom: 1px solid #999;
text-align: center;
color: #666;
line-height: 1.4;
}

#content p.meta {
clear: both;
margin: 20px 0 0 0;
color: #999;
}

#content p.meta::before {
content: "[ ";
font-size: 1.2em;
}

#content p.meta::after {
content: " ]";
font-size: 1.2em;
}

#content ul {
clear: left;
margin-left: 25px;
padding: 0.25em 0 0.25em 0;
list-style-type: disc;
list-style-position: outside;
line-height: 1.4;
}

#content ol {
clear: left;
margin-left: 25px;
padding: 5px 0 0 0;
line-height: 1.4;
}

#content li {
padding: 0.15em 0 0.15em 0;
}

#content ul.listing {
margin: 1.0em 0 0.6em 0;
padding-top: 0;
list-style-type: none;
border-top: 1px solid #ebebeb;
}

#content ul.listing li {
padding: 0.3em 20px 0.3em 20px;
border-bottom: 1px solid #ebebeb;
}

#content ul.listing li span {
color: #999;
}

#content ul.listing li:hover {
background: #fdfdfd;
}

div.box,
div.bg {
display: block;
clear: left;
overflow: auto;
margin: 1.0em 0 1.0em 0;
padding: 0.7em 20px 0.8em 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.box {
color: #777;
background: #fff;
border: 1px solid #ddd;
}

div.bg {
color: #555;
background: #f4f4f4;
border: 1px solid #f4f4f4;
}

/* For video */
/* Put tags up against it to prevent auto p */

div.video {
display: block;
margin: 1.2em auto 1.2em auto;
text-align: center;
}

video {
padding: 0;
background: #ddd;
}

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  video {
  max-width: 100% !important;
  height: auto !important;
  }

} /* End breakpoint 2 */

/* End for video */

/* For iframes */

iframe {
height: auto;
background: #f4f4f4;
}

.iframe-wrapper {
clear: both;
position: relative;
overflow: hidden;
padding-top: 56.25%;
margin: 1.0em 0 1.0em 0;
}

.responsive {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/* End for iframes */

#search {
line-height: 1.0;
}

#menu {
padding: 4px 0;
line-height: 1.0;
text-transform: capitalize;
}

#menu ul {
list-style-type: none;
}

#menu li {
display: inline;
}

#extra {
line-height: 1.4;
color: #000;
}

#footer {
text-align: center;
color: #ccc;
background: #555 url("../img/bg-footer.png") no-repeat;
background-position: center bottom;
/* x-value y-value blur spread color */
-webkit-box-shadow: 0 700px 0 700px #555;
-moz-box-shadow: 0 700px 0 700px #555;
box-shadow: 0 700px 0 700px #555;
}

#footer p {
margin-bottom: 10px;
}

/* FORMS */

#content form {
margin-bottom: 10px;
}

#pw {
margin-top: 30px;
}

label {
line-height: 1.5;
}

input,
textarea {
font-family: "Open Sans", Tahoma, sans-serif;
font-size: inherit;
}

#content input[type=text],
input[type=password],
textarea {
border: 1px solid #ddd;
}

#content input[type=text],
input[type=password] {
margin: 4px 6px 4px 0;
padding: 5px 4px;
width: 240px;
}

#search input[type=search] {
padding: 4px 10px 5px 14px;
color: #000;
background: #fff url("../img/search.png") no-repeat;
background-position: right 6px top 6px;
border: 1px solid #ebebeb;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
font-size: inherit;
}

#search input[type=search]:hover,
input[type=search]:focus {
background: #fdffe4;
border: 1px solid #dee47e;
}

::placeholder { /* Chrome, Firefox, Opera, Safari */
color: #999;
opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
color: #999;
}

/* End new */

@media screen and (min-width: 1025px) { /* Breakpoint 1 */

  #search input[type=search] {
  width: 234px; /* Line up with #extra (220 + 14 left padding) */
  }

} /* End breakpoint 1 */

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  #search input[type=search] {
  width: 185px;
  }

} /* End breakpoint 2 */

textarea {
margin-top: 5px;
padding: 4px;
overflow: auto; /* Remove default vertical scrollbar in IE 8/9/10/11 */
}

.narrowtext {
width: 630px;
}

@media screen and (min-width: 1025px) { /* Breakpoint 1 */

  .widetext {
  width: 850px;
  }

} /* End breakpoint 1 */

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  textarea.narrowtext {
  width: 98.5%;
  }

  .widetext {
  width: auto;
  }

} /* End breakpoint 2 */

.submit {
display: block;
margin: 8px 0 0 0;
padding: 7px 17px 7px 16px;
color: #ff0099;
background-color: #fff;
border: 1px solid #bbb;
-webkit-box-shadow: inset 0 0 8px 5px #ebebeb;
-moz-box-shadow: inset 0 0 8px 5px #ebebeb;
box-shadow: inset 0 0 8px 5px #ebebeb;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.submit:hover {
color: #000;
-webkit-box-shadow: 0px 0px 15px #ccc;
-moz-box-shadow: 0px 0px 15px #ccc;
box-shadow: 0px 0px 15px #ccc;
cursor: pointer;
}

#content .response p {
margin-top: 6px;
color: #7fa729;
}

.zap {
display: none;
}

/* IMAGES */

img {
vertical-align: bottom;
}

#content p img {
clear: both;
display: block;
margin: 1.2em auto 1.2em auto;
max-width: 100%;
height: auto;
}

#content p img.left {
float: left;
display: inline;
margin: 0.325em 20px 0.2em 0;
}

#content p img.border {
padding: 19px;
border: 1px solid #ccc;
/* x-value y-value blur spread color */
-webkit-box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.3);
}

a img {
border: none;
}

/* Maximum width: 860px, with border: 820px */

@media screen and (min-width: 1025px) { /* Breakpoint 1 */

  #content.wide p img { /* Remove borders */
  max-width: 860px;
  height: auto;
  border: none;
  }

  #content p img.border { /* Allow for 20px side borders */
  max-width: 820px;
  height: auto;
  }

} /* End breakpoint 1 */

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  #content p img.border {
  max-width: 93%;
  height: auto;
  }

} /* End breakpoint 2 */

/* LINKS */

a {
color: #ff0099;
text-decoration: none;
/* Remove grey background from active links in IE 10 */
background: transparent;
}

/* Improve readability when focused / hovered in all browsers */
a:active,
a:hover {
outline: 0;
}

#content a:hover {
color: #000;
}

#content a.home { /* #banner */
color: #999;
}

#banner a {
color: #ff0099;
}

#banner a:hover {
color: #000;
}

#menu li a,
#menu li strong {
display: inline-block;
padding: 6px 10px;
border-left: 1px solid #bbb;
}

#menu li.home a,
#menu li.home strong {
border-left: none;
}

#menu li strong {
color: #7fa729;
font-weight: 400;
}

#menu a {
color: #000;
}

#menu a:hover {
color: #7fa729;
}

#menu li.admin a {
color: #ff0099;
}

#menu li.admin a:hover {
color: #000;
}

#content p a,
#content li a {
padding-bottom: 1px;
border-bottom: 1px dotted #999;
}

#content ul.listing a {
padding-bottom: 0;
border-bottom: none;
}

#footer p a {
padding-bottom: 1px;
color: #fff;
}

#footer p a:hover {
color: #ccc;
border-bottom: 1px dotted #ccc;
}

/* #extra list */

#extra p {
margin: 0 0 0.35em 0;
line-height: 1.5;
}

#extra.option p {
margin-bottom: 1.5em;
}

#extra ul { /* Mainly for links (#000) */
list-style: none;
padding: 1.5em 0 1.5em 0;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
}

#extra.option ul { /* At bottom */
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #fff; /* Hide */
}

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  #extra.normal ul { /* At bottom */
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #fff; /* Hide */
  }

} /* End breakpoint 2 */

#extra li {
padding: 0.25em 0;
line-height: 1.2;
}

#extra.option li { /* At bottom */
display: inline;
margin-right: 16px;
}

#extra li a {
color: #000;
}

#extra li a:hover {
color: #999;
}

@media screen and (max-width: 1024px) { /* Breakpoint 2 */

  #extra li { /* At bottom */
  display: inline;
  margin-right: 16px;
  }

} /* End breakpoint 2 */

/* MISC */

span {
color: #7fa729;
}

hr {
clear: both;
display: block;
margin: 1.15em auto 0.75em auto; /* Trial and error */
padding-bottom: 1px;
height: 0;
width: 100%;
background: #fff;
border: none;
border-top: 1px solid #ebebeb;
}

#comments hr {
margin: 1.6em auto 1.3em auto;
width: 50%;
border-top: 1px solid #999;
}

#extra hr {
margin-top: 1.0em;
margin-bottom: 1.0em;
}

blockquote {
margin: 15px 15px 15px 12px;
padding: 0 0 0 12px;
border-left: 4px solid #ddd;
color: #666;
}

del {
color: #666;
}

li.cursor a:hover {
cursor: pointer;
}

/* CODE */

pre {
margin: 1.0em 0 0.9em 0;
padding: 0.65em 0 0.75em 0;
line-height: 1.5;
color: #609;
width: auto;
word-break: break-all;
white-space: pre-wrap;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
border-top: 1px dotted #666;
border-bottom: 1px dotted #666;
}

pre b {
font-weight: normal;
color: #7fa729;
}

pre em {
font-style: normal;
color: #066;
}