/* https://chemandy.com/themes/navigation.css */
/* Use the reference number series 10 to 19 */

body { background: #eee; color: #000; font: 500 240% Georgia, Cambria, "Latin Modern Math", "Lucida Bright", "Liberation Serif", Palatino, "Times New Roman", Serif; font-size:100%\9
}
@media print {body {background: #fff
}
}																																
.ac { text-align: center
}
.am {vertical-align: middle
}
.ap {text-align: right; display:none
}
.ar { text-align: right
}
/* banner 10 is shopping cart link*/
.banner10 {background-color: #65d838; border: #edffa9 1pt solid; border-radius: 10px; color: #000; display:inline-block; font: 700 100% arial, helvetica, sans-serif; padding: .2% 1.2% .2% .5%; position: absolute; right: 2%; text-decoration: none; white-space: nowrap; vertical-align: middle
}
/* banner 12 is for site map*/
.banner12 { background: #aa3; border: #000 1pt solid; color: #fff; font-size: 100%; font-weight: 700; margin: 3% 28%; text-align: center
}
/* banner 14 is latest calculator etc*/
.banner14 { border-radius: 20px; border: #4cbe00 5pt double; background: #eee; opacity: 1; color: #000; font-size: 100%; font-weight: 700; margin: 5% 3% 0; padding: 2% 1%; text-align: center; vertical-align: top; width: 85%
}
.cart {height: auto; margin: 0 5% 0 0; width: 2.5em; vertical-align: middle
}
.centrecolumn {background: #eee; display: table-cell; margin-left: 30%; text-decoration: none
}
.f10 { font-size: 102%; font-weight: 600; color: #000; text-align: center
}
.f11 {font-size: 100%; font-weight: 500; margin: 4% 0 3% 2%; width:66%
}
.f12 {font-size: 100%; font-weight: 500; margin-left: 5%
}
.f13 {font-size: 100%; font-weight: 500; margin-left: 2%
}
.f14 {font-size: 90%; font-weight: 500; margin-left: 5%
}
.f16 {font-size: 100%; font-weight: 600; color: #be004c; margin: .5% 2%; padding: 2% 1% 
}
.f17 {background: #eef; font-size: 100%; font-weight: 600; color: #00E; margin: .5% 2%; padding: 1% 0
}
.f18 {font-size: 110%; font-weight: 600; color: #1e4c00; float: right; margin: 0.5% 2% 0 0; background: #eee
}
.f19 {font-size: 100%; font-weight: 600; margin: 3% 0 2%
}
.fl {float: left
}
.figurefloatright {float:right; border: none; padding: 0 0 2% 2%; width: 33.3%; height: auto
}
.firstcolour { background: #eee; color:#000; font-size: 100%; font-weight: 500; margin: .5% 2%; padding: 1%
}
.firstcolour a { background: #eee; color:#000; font-size: 100%; font-weight: 600; margin: 0 2%
}
.firstcolour a:link, .secondcolour a:link {	color: #00e; font-size: 100%; font-weight: 600; line-height:200%
}
.firstcolour a:visited, .secondcolour a:visited { color: #909; font-size: 100%; font-weight: 600; line-height:200%
}
.floatright { float:right; padding: 2%
}
.footer {border-left: #000 1pt solid; font: 500 100% Georgia, Cambria, "Latin Modern Math", "Lucida Bright", "Liberation Serif", Palatino, "Times New Roman", Serif; background-image: linear-gradient(to bottom right, #a3e83f, #4cbe00); color: #000; clear: both; padding: 1% 1% .5% 1%; position:  relative; z-index: 1
}
.footer A:link {color: #00E
}
.footer A:visited {color: #909
}
.fr {float:right
}
h1 {border: #000 1pt solid; padding: .5%; background: #c9ebb2; font: 600 150% "Times New Roman", Cambria, Palatino, Serif; margin: 3% 30% 0; color: #000
}
h2 {font-size: 130%; color: #be004c; text-align: center
}
h3 {background: #eee; color: #be004c; font-size: 150%; text-decoration: underline
}
h4 {background: #eee; color: #600; font: 700 130% "Times New Roman", Cambria, Palatino, Serif; text-decoration: underline
}
h5 {font-size: 150%; color: #be004c
}
h1, h2, h3, h5 { font-weight: 700; text-align: center
}
hr {background: #000 0 50%; height: 2px; 
}
img.ac {margin: 0 0 0 60%; border: none
}
label {font-size: 80%
}
.leftcolumn {display: table-cell; border: #000 1pt solid; background: url("../images/grey.png") #bbb; text-align: center; width: 18%
}
.main {display: table; width: 100%
}
.middle { font-weight: 500; vertical-align: middle
}
.ml5 {margin-left: 5%
}
.mr1 {float: right; margin-right: 1%
}
.mr2 {float: right; margin-right: 2%
}
#nav > a {display: none
}
#nav li {position: relative
}
#nav li a {margin-top: 3%; padding: 5% 0; background: #66d819; display: block; text-decoration: none; text-align: center; font-weight: 600; white-space: nowrap
}
#nav li a:active { background: #88e04c
}			
#nav span:after {width: 0; height: 0; border: .5em solid transparent; border-bottom: none; border-top-color: #FFF; content: ''; vertical-align: middle; display: inline-block;	position: relative; right: -0.313em
}
/* first level */
#nav > ul {margin: -9% 2% -3%; height: 2.5em; background: #66d819; list-style: none
}
#nav > ul > li {width: 17%; height: 75%; float: left
}
#nav > ul > a {font-size: 1.2em; line-height: 2.9em; padding: 0	
}
#nav > ul > li:not( :last-child ) > a {border-right: 2px solid #333
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background: #88e04c
}
/* second level */
#nav li ul {margin: 10% 2% 3% -10.2%; background: #4cbe00; width: 111%; display: none; position: absolute; top: 100%; list-style: none; padding: 0 5% 5%
}
#nav li:hover ul {display: block
}
#nav li ul a {border-top: 2px solid #333; padding: .75em; margin: -1% 5% 2%
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {background: #88e04c
}
.pac { padding: 1%; text-align: center; font-size: 100%
}
.paddedfigure {border: none; padding: 3% 0 0 25%; width: 25%; height: auto
}
.secondcolour { background: #eee; color:#000; font-size: 100%; font-weight: 500; margin: .5% 2%; padding: 1%
}
.secondcolour a { background: #eee; color:#000; font-weight: 600; margin: 0 2%
}
.shopping-cart { border: none
}
.subhead {color: #be004c; font-size: 125%; font-weight: 700; text-align: center
}
#textarea, select { border: 1pt solid; background: #FFF; color: #000; font: normal 80% Georgia, Cambria, "Latin Modern Math", "Lucida Bright", "Liberation Serif", Palatino, "Times New Roman", Serif
}
.textboxes { margin-right: 35%
}
table.select {background:#eee; border: 2px solid #000; border-collapse: collapse; margin: 0 3%; padding:4px; width: 95%  
}
td.select {background:#eee; border: 2px solid #000; padding:4px; text-align: center
}

@media screen and (-webkit-min-device-pixel-ratio:0){
a:visited {fill:inherit; stroke:inherit
}
}

/* large screens/TV */
@media only screen and (max-width: 2001px) {
body { font-size: 100%
}
.banner10 {margin-top: 2%
}
.figurefloatright {width: 25%
}
h1 {margin: 3% 30%
}
hr {height: 1px
}
.main {margin-top: 2.2%
}
}

/* large laptops */
@media only screen and (max-width: 1601px) {
body { font-size: 100%
}
.main {margin-top: -.5%
}
}
/* laptops */
@media only screen and (max-width: 1299px) {
body {font-size: 80%
}
.banner10 {margin-top: 2%; border-radius: 8px
}
.f19 {margin: 2% 0 2% 2% 
}
h1 {margin: 2% 30%
}
.main {margin-top: .5%
}
#nav {width: 100%; position: static; margin: 0
}
/* second level */
#nav li ul {margin: 9% 2% 3% -10%; width: 110%
}
#nav li ul li {width: 100%; line-height: .9em
}
.figurefloatright {width: 33.3%
}
}

/* small laptops */
@media only screen and (max-width: 1001px) {
body {font-size: 90%
}
.banner10 {margin-top: -6%; font-size: 90%
}
.figurefloatright {width: 50%
}
h1 {font-size: 110%; margin-top: 10%
}
.leftcolumn {width: 28%
}
.main {margin-top: -8.5%
}
.mr2 {margin-right: 1%
}
#nav > ul > li {width: 20%
}
#nav > ul {margin: -10% 2% -2% 3%
}
/* second level */
#nav li ul {margin: 9% -10% 0 -25%
}
.subhead {font-size: 100%
}
}

/* large tablets */
@media only screen and (max-width: 801px) {
body {font-size: 75%
}
.banner10 {font-size: 75%
}
.banner14 {font-size: 90%; margin: 0 5%; padding: 2% 0; border-radius: 10px
}
.f13 {margin: .5% 0 0 5%
}
.f16 {margin: .5% 0 0 2%
}
.f19 {margin: 7% 0 2% 5% 
}
.figurefloatright {width: 40%
}
.firstcolour, .secondcolour {margin: .5% 2% .5% 5%
}
.paddedfigure {width: 35%; height: auto
}
h1 {font-size: 110%
}
input {margin: 0 -10% 0 1%
}
.main {margin-top: -7%
}
#submit, #reset {width: 60%; height: auto
}
}

/*small tablets */
@media only screen and (max-width: 655px) {
body {font-size: 66.6%
}
.banner10 {font-size: 90%; padding: .6% 3% .6% 1%
}
.cart {width: 1.8em
}
.f12, .f14, .f19 {margin-left: 4%
}
.figurefloatright {width: 40%; margin-top: 5%
}
.footer {font-size: 90%
}
input {margin: 0 -40% 0 1%
}
.leftcolumn {width: 32%
}
.main {margin-top: -6%
}
#nav {position: relative; top: auto; left: auto
}
#nav > a {width: 3.125em; height: 3.125em; text-align: left; text-indent: -9999px; background: #00F; position: relative
}
#nav > a:before, #nav > a:after { position: absolute; border: 2px solid #fff; top: 35%; left: 25%; right: 25%; content: ''
}
#nav > a:after {top: 60%
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type	{display: block
}
/* first level */
#nav > ul {width: 25%; height: auto; margin: -5% 0 0 65%; background: #4cbe00; display: none;	position: absolute;	left: 0; right: 0
}
#nav:target > ul {display: block; line-height: 4em
}
#nav > ul > li {width: 80%; margin: -2% 0 0 -10%; float: none
}
#nav > ul > li > a {padding: 0 .833em; font-size: 100%
}
#nav > ul > li:not( :last-child ) > a {border-right: none; border-bottom: 1px solid #333
}
/* second level */
#nav li ul { margin: 0 0 0 -20%; position: static; padding: 1.25em; padding-top: 0; width: 130%
}
#nav li ul li {font-size: 100%; margin: 0 0 -4% 6%; width: 105%
}
#nav li ul a {border-top: 1px solid #333
}
#submit, #reset {width: 50%; margin-right: 10%
}
textarea {width: 90%; height: auto
}
}

/* mobile phones */
@media only screen and (max-width: 505px) {
.banner10 {margin-top: -10%; font-size: 75%
}
.banner14 {font-size: 75%; margin: 0 2%
}
.f10 {font-size: 90%
}
.f13 {font-size: 90%
}
.f19 {margin: 5% 0 0 10%; font-size: 90%
}
.figurefloatright {width: 50%
}
.paddedfigure {width: 45%
}
h1 {font-size: 90%; margin: 4% 30%
}
input {margin-left: 5%; width: 95%; height: auto
}
.main {margin-top: -10%
}
/* first level */
#nav > ul {width: 37%; margin: -7% 0 0 45%
}
#nav > ul > li {margin: -2% 0 0 -15%
}
/* second level */
#nav li ul {font-size: 100%; margin: 1% 0 2%; width: 100%
}
#nav li ul li {width: 155%; margin: 0 0 2% -20%
}
table.select {margin-left: 0  
}
textarea {width: 80%
}
}

/* small mobile phones */
@media only screen and (max-width: 350px) {
.banner10 {border-radius: 7px; font-size: 78%; margin-top: -20%
}
.banner14 {font-size: 85%; padding: 2% 1%; margin-left: 1%
}
.centrecolumn {vertical-align: top; margin: 0 0 1.5% 38%
}
.f12, .f14 {margin-left: 2%
}
.f13 {margin: .5% 0 0 10%
}
.f16 {font-size: 75%
}
.f19 {margin: 10% 0 0 20%
}
.figurefloatright {width: 90%; margin: 0 4% 8%
}
.firstcolour, .secondcolour {font-size: 80%; margin: .5% 2%
}
h1 {font-size: 100%; margin: 4% 20%
}
input {margin-left: 0
}
.main {margin-top: -14%
}
.leftcolumn {width: 37%; font-size: 80%
}
#nav > ul {margin: -10% 0 0 45%
}
/* second level */
#nav li ul li {margin: 0 0 2% -44%; width: 175%
}
.paddedfigure {height: auto; width: 50%
}
.subhead {font-size: 90%
}
td.select {padding: 0px
}
#submit, #reset {margin: 0 10% 0 30%
}
}

/* smallest mobile phones */
@media only screen and (max-width: 300px) {
.banner10 {border-radius: 4px; margin-top: -23%
}
.banner14 {font-size: 75%; margin-left: -1%
}
.centrecolumn {margin: 0 0 -1% 46%
}
h1 {margin: 4% 10%
}
input {margin-right: -50%; width: 90%
}
.main {margin-top: -18%
}
#nav > ul {font-size: 85%; margin: -10% 0 0 45%; width: 40%
}
/* second level */
#nav li ul li {width: 140%; margin: 0 0 2% -30%
}
#submit, #reset {margin: 0 1% 0 10%; width: 80%; font-size: 95%
}
td.boldnarrow {width: 3%
}
}