/* Hack for old browsers than don't support HTML 5.0 new elements - block is default so gets them working as intended */
article, aside, footer, header, section, main, nav { display: block; }

/*MAIN*/
body { margin:0; font-size: 1.05em; line-height: 1.25em; font-family: 'Helvetica Neue', Helvetica, Arial; color: #555; word-wrap: break-word; overflow-wrap: break-word; }
a { color: #4C9CF1; text-decoration: none; font-weight: bold; }
@media (hover: hover) { a:hover { color: #444; } }
img { max-width: 100%; }
header { background: #fff; width: 100%; height: 76px; position: fixed; top: 0; left: 0; border-bottom: 4px solid #4C9CF1; z-index: 100; }
img#logoimg { margin-top: 18px; margin-left: 18px; width: 200px; max-width: 70%; position: absolute; z-index: -1; }
nav { float: right; padding-top: 20px; padding-bottom: 18px; padding-left: 0px; padding-right: 18px; }
nav ul { list-style: none; margin:0; border:0; padding: 0; }
nav li { font-size: 1.5em; display: inline-block; float: left; padding: 10px; }
#hidden-checkbox { display:none; } /* never display the hidden checkbox */
#hidden-checkbox + label > img { display:none; width: 40px; height: 40px; border-radius: 4px 4px 0 0; background-color: #4C8FEC; } /* hide the menu icon by default - for large screens */
#hidden-checkbox:checked + label > img { background-color: #444; }
@media (hover: hover) { #hidden-checkbox + label > img:hover { background-color: #444; } }
.current { color: #2262AD; }
.currentbottom { color: #4169E1; }
main { margin: 80px auto 40px; max-width: 980px; position: relative; padding: 20px; }
h1, h2 { font-size: 1.25em; margin: 20px 0 ;}
p { line-height: 1.45em; margin-bottom: 20px; }

img#topimg { float: right; width: 425px; max-width: 50%; margin-top: 20px; margin-bottom: 5px; margin-right: 0px; margin-left: 20px; }
.maincentreimg { width: 100%; height: 90px; position: relative; }
.maincentreimg img { max-height: 100%;  max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0;  left: 0;  right: 0;  margin: auto; }
.mainfloatimgleft { float: left;  max-height: 100px; max-width: 45%; margin-right: 5px; vertical-align: middle; }
.mainfloatimgright { float: right; max-height: 100px; max-width: 45%; margin-left: 5px; vertical-align: middle; }
.mainfloatimg425right { float: right; width: 425px; max-width: 50%; margin-top: 20px; margin-bottom: 5px; margin-right: 0px; margin-left: 20px; }

.table-responsive { overflow-x:auto; }
.feestable { border: 1px solid black; border-collapse: collapse; width: 100%; max-width: 600px; }
.feestable th { border: 1px solid black; padding-left: 4px; padding-right: 4px; background-color: #ADD8E6; }
.feestable td { border: 1px solid black; padding-left: 4px; padding-right: 4px; text-align: right; }
.feestable th td:nth-child(1), .feestable tr td:nth-child(1) { text-align: left; }
.officehourstable { border: 1px solid black; border-collapse: collapse; width: 100%; max-width: 600px; }
.officehourstable th { border: 1px solid black; padding-left: 4px; padding-right: 4px; text-align: left; background-color: #ADD8E6;}
.officehourstable td { border: 1px solid black; padding-left: 4px; padding-right: 4px; text-align: left; }
.map-responsive { overflow:hidden; padding-bottom:56.25%; position:relative; height:0; }
.map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

.footerbutton { background-color: #32CD32; border: none; border-radius: 8px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-weight: bold; margin-bottom: 20px; }
div#footermakeanappointment { padding-top: 1.25em; padding-bottom: 1.25em; text-align: center; vertical-align: middle; background-color:#808080; color:white; }
div#footerabouttermsandpolicy { word-spacing: 32px; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 20px; padding-right: 20px; text-align: center; vertical-align: middle; background-color:#43464b; }
div#footerabouttermsandpolicy a { word-spacing: normal; }
@media (hover: hover) {
.footerbutton:hover { background-color: #008000; color: white; }
div#footerabouttermsandpolicy a:hover { color: white; }
}

/*MEDIA QUERY - Make the navigation menu shrink to icon if pages gets too small */
@media only screen and (max-width : 800px) {
header { position: absolute; }
nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #fff; border: 5px solid #444; right: 20px; top: 60px; width: 50%; border-radius: 4px 0 4px 4px; }
nav li { text-align: center; width: 100%; padding: 10px 0; margin: 0; }
#hidden-checkbox + label > img { display: block; } /* show the menu ICON for small screens */
#hidden-checkbox:checked + label + ul { display: block; }  /* show the menu ITEMS if hidden checkbox has been checked */
}
/*MEDIA QUERY - Make the floating pics grow to take up whole page width if page gets too small */
@media only screen and (max-width : 400px) {
img#topimg { max-width: 100%; margin-top: 0px; margin-bottom: 15px; }
.mainfloatimgleft { margin-top: 0px; margin-bottom: 15px; }
.mainfloatimgright { margin-top: 0px; margin-bottom: 15px; }
}
/*MEDIA QUERY - Make the footer button grow to take up whole page width if page gets very small - else padding-right will cause horizontal scrolling */
@media only screen and (max-width : 200px) {
.footerbutton { display:block; }
}