/*
Based on:
CSS Reset by Eric Meyer - Released under Public Domain
http://meyerweb.com/eric/tools/css/reset/
with new HTML 5 elements added
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background: transparent; border: 0; font-size: 100%; margin: 0;  outline: 0; padding: 0; vertical-align: baseline; }
body  { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; } /* remember to set this! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/*
All-media style sheet for http://www.x-excel.com by Jeremy Bojczuk, Lab 99 Web Design (http://www.lab99.com/).
CSS coding and all original images: copyright Lab 99 Web Design, 2018, minor tweaks June 2019, November 2022, and February 2023.
Main colours:
  #83869f : medium grey (header background)
  #252941 ; darkest grey (text)
  #f5f808 : yellow (nav & footer links)
  #a03c3c : dark red (headings)
  #4775f9 : light blue (a:link)
  #f94758 : bright red (a:hover)
Beginning with basic styles for mobiles and obsolete browsers, then adding and adjusting for wider screen devices and print:
*/

html { height: 100%; scrollbar-color: #a03c3c #83869f; text-align: center; width: 100%; }
::-webkit-scrollbar { background: #f4f5f9; border-left: 2px solid #a03c3c; border-right: 2px solid #a03c3c; }
::-webkit-scrollbar-thumb  { background: #a03c3c; }
@-ms-viewport { width: device-width; } /* IE10 hack */
@viewport { width: device-width; zoom: 1; } /* to replace HTML meta tag in due course */
@font-face { 
	   font-family: "philosopher"; 
				font-style: normal; 
				font-weight: 400; 
    src: url("fonts/philosopher-v10-latin-regular.eot");
				src: local("Philosopher Regular"), local("Philosopher-Regular"), 
         url("fonts/fonts/philosopher-v10-latin-regular.eot?#iefix") format("embedded-opentype"), 
				     url("fonts/philosopher-v10-latin-regular.woff2") format("woff2"), 
				     url("fonts/philosopher-v10-latin-regular.woff") format("woff"), 
				     url("fonts/philosopher-v10-latin-regular.ttf") format("truetype"),
         url("fonts/philosopher-v10-latin-regular.svg#Philosopher") format("svg"); 
    } /* eot: 22.6 kB; woff2: 19.5 kB; woff: 24 kB; ttf: 51.3 kB; svg: 59.5 kB */
@font-face { 
    font-family: "open sans"; 
    font-style: normal; 
				font-weight: 400; 
				src: url("fonts/open-sans-v16-latin-regular.eot"); 
				src: local("Open Sans Regular"), local("OpenSans-Regular"), local("open sans"), 
									url("fonts/open-sans-v16-latin-regular.eot?#iefix") format("embedded-opentype"), 
									url("fonts/open-sans-v16-latin-regular.woff2") format("woff2"), 
									url("fonts/open-sans-v16-latin-regular.woff") format("woff"), 
									url("fonts/open-sans-v16-latin-regular.ttf") format("truetype"), 
									url("fonts/open-sans-v16-latin-regular.svg#OpenSans") format("svg");
	   } /* eot: 16 kB; woff2: 14.4 kB; woff: 18.1 kB; ttf: 27.1 kB; svg: 56.3 kB */
@font-face { 
	   font-family: "open sans"; 
				font-style: italic; 
				font-weight: 400; 
				src: url("fonts/open-sans-v16-latin-italic.eot");
				src: local("Open Sans Italic"), local("OpenSans-Italic"), 
									url("fonts/open-sans-v16-latin-italic.eot?#iefix") format("embedded-opentype"), 
				     url("fonts/open-sans-v16-latin-italic.woff2") format("woff2"), 
				     url("fonts/open-sans-v16-latin-italic.woff") format("woff"), 
				     url("fonts/open-sans-v16-latin-italic.ttf") format("truetype"), 
				     url("fonts/open-sans-v16-latin-italic.svg#OpenSans") format("svg");
	    } /* eot: 14.8 kB; woff2: 14.4 kB; woff: 18.1 kB; ttf: 27.1 kB; svg: 59.4 kB */
@font-face { 
	   font-family: "open sans"; 
				font-style: normal; 
				font-weight: 700; 
				src: url("fonts/open-sans-v16-latin-700.eot");
				src: local("Open Sans Bold"), local("OpenSans-Bold"), 
									url("fonts/open-sans-v16-latin-700.eot?#iefix") format("embedded-opentype"), 
				     url("fonts/open-sans-v16-latin-700.woff2") format("woff2"), 
				     url("fonts/open-sans-v16-latin-700.woff") format("woff"), 
				     url("fonts/open-sans-v16-latin-700.ttf") format("truetype"), 
				     url("fonts/open-sans-v16-latin-700.svg#OpenSans") format("svg");
				} /* eot: 15.4 kB; woff2: 15.1 kB; woff: 18.9 kB; ttf: 28.8 kB; svg: 55.7 kB */
/* 4 x woff2 = 63.4 kB */
/* Thanks: https://google-webfonts-helper.herokuapp.com/fonts */

/* main elements */
body  { background: #83869f; color: #252941; font: medium/160% "open sans", "helvetica neue", helvetica, arial, sans-serif; text-align: left; width: 100%; }
.inner  { margin: 0 auto; width: 94%; }
#main  { background: #fff; float: left; padding: 1em 0; width: 100%; }
#primary, #secondary  { background: #fff; float: left; width: 100%; }

/* headings */
h1  { border-bottom: 1px dotted #a03c3c; color: #a03c3c; font: normal 210%/120% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; letter-spacing: 0.02em; margin: 0 0 0.4em 0; padding: 0 0 0.3em 0; }
h2  { color: #a03c3c; font: normal 170%/140% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; margin: 0.5em 0 0.3em 0; }
#partner, #further  { border-top: 1px dotted #a03c3c; margin: 0.8em 0 0.3em; padding: 0.5em 0 0 0; }
h3  { color: #a03c3c; font: normal 135%/140% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; margin: 0.5em 0 0.3em 0; }

/* paragraphs and lists */
p  { margin: 0 0 0.7em 0; }
#thanks-p  { border-bottom: 1px dotted #a03c3c; font-size: 120%; padding: 0 0 1em 0; }
ol  { list-style: decimal; margin: 0 0 0.5em 30px; }
ul  { list-style: disc; margin: 0 0 0.5em 20px; }
.dd-ul  { list-style: circle; margin: 0 0 0 35px; }
li  { padding: 0.1em 0; }
dl  { margin: 0 0 1em 0; }
dt  { font-weight: bold; margin: 0.5em 0 0.2em 0; }
dd  { padding: 0 0 0.2em 0.5em; }
dd:before  { content: "\2022"; margin: 0 5px 0 0; } /* to insert bullet points */
dd.address-dd:before  { content: none; margin: 0; }

/* links */
a:link  { color: #4775f9; text-decoration: underline; }
a:visited  { color: #253f88; }
a:hover { color: #f94758; text-decoration: underline; }
a:focus  { color: #f94758; outline: 3px solid #f5f808; }
a:active  { color: #000; }

/* minor elements */
img  { float: left; height: auto; padding: 0.2em 0.5em 0.5em 0; max-width: 100%; }
abbr  { border-bottom: 1px dotted #53566f; cursor: help; speak: spell-out; text-decoration: none; }
strong  { font-weight: bold; }
em, cite  { font-style: italic; }
.printonly  { display: none; }

/* header */
#header  { float: left; height: auto; padding: 0.1em 0 0.1em 0; position: relative; width: 100%; }
#sitename-1  { color: #f5f808; font: normal 200%/140% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; margin: 0; }
#sitename-2  { display: none; } /* to be reinstated in wider layouts, below */

/* skipnav link */
#skipnav  { position: absolute; right: 20px; top: 4px; }
a#skipnav-a:link, a#skipnav-a:visited  { color: transparent; padding: 5px 10px; }
a#skipnav-a:hover, a#skipnav-a:focus  { background: #fff; color: #000; }

/* navigation menu */
#nav-ul  { float: left; list-style: none; margin: 0.1em 0 0.4em 0; width: 100%; }
.nav-li  { float: left; padding: 0; width: auto; }
a.nav-a { background: #525464; border: 1px solid #383c55; color: #f5f808; display: block; float: left; margin: 0.2em 0.2em 0 0; padding: 0.1em 0.5em; text-align: center; text-decoration: none; }
.nav-a:hover  { background: #383c55; border: 1px solid #fff; color: #fff; }
.nav-a:active  { color: #260f59; }
.nav-a:focus  { background: #fff; border: 1px solid #f94758; color: #000; }
body#index a#navindex, body#index a#navindex:hover,
body#excel a#navexcel, body#excel a#navexcel:hover,
body#word a#navword, body#word a#navword:hover,
body#powerpoint a#navpowerpoint, body#powerpoint a#navpowerpoint:hover,
body#office2007 a#navoffice2007, body#office2007 a#navoffice2007:hover,
body#basic a#navbasic, body#basic a#navbasic:hover,
body#prices a#navprices, body#prices a#navprices:hover,
body#location a#navlocation, body#location a#navlocation:hover,
body#contact a#navcontact, body#contact a#navcontact:hover  { background: #383c55; border: 1px solid #383c55; color: #fff; cursor: default; text-decoration: none; }

/* footer */
#siteinfo  { background: #525464; clear: both; color: #fff; float: left; padding: 1em 0; width: 100%; }
#siteinfo-ul  { font-style: italic; list-style: none; margin: 0; }
.siteinfo-li  { margin: 0; padding: 0.1em 0; }
a.siteinfo-a:link, a.siteinfo-a:visited  { color: #f5f808; text-decoration: none; }
a.siteinfo-a:hover  { color: #fff; text-decoration: underline; }
a#gotop-a  { border: 1px solid #fff; display: block; padding: 0.5em; }
a#gotop-a:hover  { background: #383c55; }
a#logo99  { background: url(images/lab99-icon-16x16.png) no-repeat 0 50%; padding-left: 20px; }
body#sitemap a#sitemap-a  { display: none; }

/* home page illustrated links */
#links-ul  { float: left; list-style: none; margin: 0.5em 0 0.5em 0; width: 100%; }
.links-li  { float: left; margin: 0 1em 1em 0; padding: 0; width: auto; }
.links-li:last-of-type  { margin: 0 0 1em 0; }
li#excellink  { background: url(images/microsoft-icons-64x564.png) no-repeat 15px 10px; }
li#wordlink  { background: url(images/microsoft-icons-64x564.png) no-repeat 15px -90px; }
li#powerpointlink  { background: url(images/microsoft-icons-64x564.png) no-repeat 15px -190px; }
a.links-a  { float: left; font: normal 200%/120% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; height: 78px; line-height: 78px; padding: 0 15px 0 90px; text-decoration: none; }
a#excellink-a  { border: 3px solid #207245; color: #207245; }
a#wordlink-a  { border: 3px solid #2a5699; color: #2a5699; }
a#powerpointlink-a  { border: 3px solid #077467; color: #077467; }
a#excellink-a:hover, a#excellink-a:focus,
a#wordlink-a:hover,a#wordlink-a:focus,
a#powerpointlink-a:hover, a#powerpointlink-a:focus  { border: 3px solid #f94758; color: #f94758; outline: 3px solid #f94758; text-decoration: none; }

/* location page */
#map-container  { float: left; width: 100%; }
#map  { border: 2px solid #83869f; float: left; height: 350px; margin: 1em 0; width: 95%; }
#map img  { background: transparent; padding: 0; }

/* contact form: old and new versions */
form  { float: left; padding: 0.5em 0 0 0; width: 100%; }
fieldset  { border: 1px solid #fff; }
legend  { visibility: hidden; }
.zemdiv, .form-p  { margin: 0 0 1em 0; }
label  { float: left; padding: 5px 0; width: 100%; }
input  { background: #f1f2f4; border: 3px solid #dcdde0; font: medium/160% "open sans", "helvetica neue", helvetica, arial, sans-serif; padding: 5px 10px; width: 90%; }
textarea  { background: #f1f2f4; border: 3px solid #dcdde0; font: 100%/160% "open sans", "helvetica neue", helvetica, arial, sans-serif; height: 200px; margin: 0.5em 0 0 0; padding: 5px 10px; width: 90%; }
input:hover, textarea:hover  { background: #fff; border: 3px solid #a03c3c; }
input:focus, textarea:focus  { background: #fff; border: 3px solid #a03c3c; outline: 3px solid #a03c3c; }
input.zemSubmit, input.comSubmit  { background: none; border: 3px solid #4775f9; color: #4775f9; font-weight: bold; margin: 0 0 0 0.5em; padding: 0.2em 0.8em; width: auto; }
input.zemSubmit:hover, input.zemSubmit:focus, input.comSubmit:hover, input.comSubmit:focus  { border: 3px solid #f94758; box-shadow: 1px 1px 5px #999; color: #f94758; cursor: pointer; }
ul.zemError, ul.comError  { border-top: 3px solid #6a2f2f; border-bottom: 3px solid #6a2f2f; color: #6a2f2f; margin: 0 0 1em 0; padding: 0.5em 0 0.5em 25px; }
.comThanks p  { font-size: 120%; font-weight: bold; }

/* 
===
>>>  media queries: wider screens, print
===
*/

@media all and (min-width: 660px)  { /* add non-basic CSS */
#sitename-1  { font: normal 280%/140% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; text-shadow: 0 0 9px #000; }
#sitename-2  { color: #fff; display: block; font: normal 125%/140% "philosopher", "open sans", "helvetica neue", helvetica, arial, sans-serif; margin: 0; }
#nav-ul  { margin: 0.6em 0 0.8em 0; }
a.nav-a  { background: #525464; background: linear-gradient(#777990, #525464); border: 1px solid #525464; border-bottom-left-radius: 10px; border-top-right-radius: 10px; }
a.nav-a { margin: 0.3em 0.3em 0 0; padding: 0.4em 1.2em; }
.more-p  { border: 1px solid #d4d7e5; border-bottom-left-radius: 5px; border-top-right-radius: 5px; }
a.links-a  { border-bottom-left-radius: 15px; border-top-right-radius: 15px; }
a#excellink-a:hover, a#wordlink-a:hover, a#powerpointlink-a:hover  { box-shadow: 1px 1px 5px #999; }
#siteinfo  { text-align: center; text-shadow: 0px 0px 3px #000; }
a#gotop-a, input, textarea  { border-bottom-left-radius: 10px; border-top-right-radius: 10px; }
/* course details in two columns */
@supports (display: grid) {
  .dl-container  { display: grid; grid-template-columns: repeat(2, 1fr); }
  .dl-1  { grid-column: 1; padding: 0 0.5em 0 0; }
  .dl-2  { grid-column: 2; padding: 0 0 0 0.5em; }
}
}

@media all and (min-width: 980px)  { /* full-screen layout: two columns */
body  { font-size: 110%; }
.inner  { width: 950px; }
#header  { padding: 1.5em 0 0.8em 0; }
#sitename-1  { color: #f5f808; float: left; font-size: 300%; line-height: 2.5rem; margin: 0; padding: 0.2rem 0.5em 0 0; }
#sitename-2  { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.2); border-bottom-left-radius: 15px; border-top-right-radius: 15px; float: right; line-height: 2.5rem; margin: 0; padding: 0.2rem 0.8em;  }
#primary  { margin: 0.5em 0 0 0; width: 570px; }
#secondary  { background: #f4f5f9; border: 1px solid #83869f; border-bottom-left-radius: 15px; border-top-right-radius: 15px; float: right; margin: 1em 0 0 0; padding: 0 20px 1em 20px; width: 290px; }
a.nav-a  { padding: 0.3em 0.7em; text-shadow: 1px 1px 1px #222; transition: background-color 0.40s ease, color 0.40s ease; }
a.nav-a:focus  { text-shadow: none; }
a.links-a  { padding: 0 20px 0 100px; }
a#gotop-a  { border: none; display: inline; padding: 0; }
a#gotop-a:hover  { background: #525464; }
label  { padding: 5px 1em 5px 0; text-align: right; width: 10em; }
label.zemTextarea, label.textarea  { padding: 0; text-align: left; width: 100%; }
input  { width: 320px; }
textarea  { width: 530px; }
#map  { height: 400px; width: 948px; }
}

@media all and (min-width: 1180px)  { /* wide-screen layout */
body  { font-size: 120%; }
.inner  { width: 1100px; }
#sitename-1  { font-size: 320%; }
#primary  { width: 690px; }
#secondary  { width: 320px; }
a.nav-a  { padding: 0.4em 0.8em; }
input  { width: 390px; }
textarea  { width: 600px; }
#map  { height: 450px; width: 1098px; }
}

@media all and (min-width: 1380px)  { /* extra-wide-screen layout */
body  { font-size: 130%; }
.inner  { width: 1300px; }
#sitename-2  { font-size: 145%; }
#primary  { width: 820px; }
#secondary  { width: 380px; }
a.nav-a  { padding: 0.4em 1.1em; }
a.links-a  { font-size: 150%; padding: 0 15px 0 85px; }
input  { width: 490px; }
textarea  { width: 700px; }
#map  { height: 500px; width: 1298px; }
}

@media print  { /* print only */
.noprint  { display: none; }
.printonly  { display: block; }
body  { background: #fff; color: #000; font: small/170% georgia, serif; }
@page  { margin: 2cm 1cm; }
.inner  { float: left; margin: 0; width: 100%; }
#main, #primary, #secondary  { border: none; font: small/170% georgia, serif; margin: 0; padding: 0; width: 100%; }
#sitename-1, h1, h2, h3  { border: none; color: #000; font-family: georgia, serif; font-weight: normal; page-break-after: avoid; text-shadow: none; }
#sitename-2  { background: none; border: none; border-bottom: 1px dotted #000; color: #000; margin: 0 0 1em 0; padding: 0 0 1em 0; }
#partner  { border-top: 1px dotted #000; }
p  { orphans: 2; widows: 2; }
a:link  { color: #000; text-decoration: none; }
a:visited  { color: #000; }
img  { background: #fff; border: none; page-break-inside: avoid; }
abbr  { border-bottom: none; }
#map  { border: none; width: 100%; } 
#siteinfo  { border-top: 1px solid #000; color: #000; margin: 1em 0 0 0; padding: 0.5em 0 0 0; page-break-inside: avoid; text-align: left; text-shadow: none; width: 100%; }
a.siteinfo-a:link, a.siteinfo-a:visited  { color: #000; }
a#logo99  { background: none; padding: 0; }
input, input.zemSubmit, textarea { background: #fff; border: 1px solid #000; color: #000; }
#links-ul  { list-style: disc; margin: 0 0 0.5em 20px; }
.links-li  { margin: 0; padding: 0.1em 0; width: 100%; }
.links-li:last-of-type  { margin: 0; }
li#excellink, li#wordlink, li#powerpointlink  { background: none; }
a.links-a  { font: normal 100%/160% georgia, serif; height: auto; line-height: auto; padding: 0; }
a#excellink-a, a#wordlink-a, a#powerpointlink-a  { border: none; color: #000; }
}