html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}    /*this ensures any padding or borders are included in widths*/
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} /* not sure what this does*/
h1,h2,h3, h4{font-family:"Segoe UI",Arial,sans-serif;color: #008; font-weight:600; margin:5px 0;}
h5,h6{font-family:"Segoe UI",Arial,sans-serif;color: #800000;font-weight:600; margin:5px 0;}
h1, h2, h3, h4, h5, h6 {text-align: center;}

h1{ font-size:24px}
h2{ font-size:20px}
h3{ font-size:16px;}
h4{ font-size:14px;}

h5{font-size:14px; font-weight:800;}
h6{font-size:12px}
p{font-size: 1em}

hr{background-color: #296D98; height: 5px; border:none; clear: both; width: 100%;}
.vr {padding: 10px; border-right: 2px solid #E3E3E3;}

  <div style=>
  <div style="border-left: 2px solid black; height: 50px; margin: 0 10px;"></div>
  <div style="padding: 10px;">Div 2</div>
</div>

b{font-style:bold;}
em{font-style: italic; font-weight: 600; color: #800000;}

.scriptfont{font-family: "Brush Script MT", cursive; font-size:24px}
.timesfont{font-family: "Times New Roman", Times, serif; font-size:18px}
.font18{font-size:18px}
.font16{font-size:16px}

ul{display:inline-block;}

a{color:#800000; font-weight: 600;}

body{font-family:"Segoe UI",Arial,sans-serif; font-size:14px }

.clear, .clear50 { clear: both; width: 100%;  font-size: 0px;  }
.clear50 {height: 50px;}
.new-row {clear: both;}

.nobullet{list-style-type:none; padding:0; margin:0;}
.entry {font-style:italic; color: #808080; float: right; margin-right:15px;}
.none{display:none;}
.topmargin:{margin-top:50px; background-color:pink;}

.content-main { width: 100%; max-width:1260px; margin:auto;}
.content-sub, .content-sub>.quarter, .content-sub>.third, .content-sub>.half, .content-sub>.half>.third, .content-sub>.whole {padding:0px 5px; text-align: center; }
.content-sub img {float: center;}   /*I don't think this is a valid float */
.content-sub span{text-align: center}
.content-sub p{text-align:justify}

.top, .centre, .foot{text-align: center!important}
.top-bar { background-image:url("/images/icons/54rollBanner.jpg"); background-color:#008;}
.left{text-align: left!important}
.centreImage{
    display: block;
    width: 75%!important;  /* 75% of the container */
    margin: 0 auto!important; /* center horizontally */
    height: auto; /* maintain aspect ratio */
    float: none;
    }

.just{text-align:justify;}
.just li{text-align: left}
.centre p{text-align: center!important; align-items: center}

.fl{float: left; display:inline;}
.fr{float:right!important; display:inline; }
.fc{float:center!important; display:inline; }

#topNav, #galleryNav, #yearsNav, #docsNav, .navBar, #staffNav{ display: flex;}

.navBar a, #topNav a, #galleryNav a, #yearsNav a, #docsNav, #staffNav.hambutton, #staffNav a, .sidebar a, .search-container form, .dropdown, .dropdown a, .showif600{
    color: white;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    font-size: 15px;
    border-left: 1px solid white;}

.navBar a, #topNav a, #galleryNav a, #yearsNav a, #staffNav a{width:100%; padding:5px;}
.hambutton {padding:5px; cursor:pointer}
.hambutton:hover {background-color: #BAD1E8}
.topbutton {padding: 3px; cursor: pointer; font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; background-color: #3792cb; color: white; border-radius: 40px;}
.topbutton a{padding: 3px; cursor: pointer; font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; text-decoration: none; background-color: #3792cb; color: white; border-radius: 40px;}

.button{margin: 5px; margin-bottom:20px}
.button a{padding: 1px 10px 1px 10px;  background-color:#85ADD6; color: white; font-size:15px; font-weight: 600; text-decoration: none; border-radius: 50px; }

/*#topNav a.active, #galleryNav a.active, .sidebar a.active {background-color: pink; color: green;  }
#galleryNav a.active {background-color:#34699D} */
.active, .active a{background-color:#BAD1E8!important; color: white;}

.foot{color:#fff; font-weight:600}
.foot a{color:#fff;}
.foot a:hover{background-color:#3792cb; color:#008}

/* The container <div> - needed to position the dropdown content */
.showif600 {width:100%; padding: 5px; display: none;}
.hideif600{display: inline}
.noArrow:{display: none;}
.showWhen600 {display: none;}
.hideWhen600{display: inline}

.sidebar{
    display:none;
    width:200px;
    z-index:1;
    overflow:auto;
    color:white;
    }

.sidebar {position:fixed!important;}

.sidebar a{
    display:inline-block;
    width:100%;
    padding:5px;
    }
/*.sidebar a:first-child{text-align: left}Is this for hambutton to appear at the left in sidebar menus? It affects the double column in news-nav*/

 .animate-left{position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:50px;opacity:0} to{left:70px;opacity:1}}
 .animate-top{position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:50px;opacity:0} to{top:50px;opacity:1}}
 .animate-opacity { @keyframes animateleft{from{left:50px;opacity:0} to{left:50px;opacity:1}}
 }

 .fixed-height {height: 600px;
 }

 /*colours used */
.greenblue, .greenblue a{background-color:#b0f0f0; color: #008}
.palerblue, .palerblue a {background-color: #85ADD6; color:white;}
.paleblue, .paleblue a {background-color: #71A1D0; color:white;}
.lightblue, .lightblue a{background-color: #6699CC; color:white;}
.darkblue, .darkblue a{background-color: #578FC7; color: white; }
.darkerblue, .darkerblue a{background-color: #4F8AC4; color: white; }
.paleblue a, .palerblue a, .lightblue a, .darkblue a, .darkerblue a{border-bottom: 2px solid transparent;}

.paleblue a:hover, .palerblue a:hover, .lightblue a:hover, .darkblue a:hover{border-bottom: 2px solid white;}

.purple, .purple a{background-color:purple!important;}
.navy{background: linear-gradient(to right, #296D98,#036, #296D98); color: white;}
popupblue { color: #000088; font-weight:600; }
yellow { background-color: #FF0; color: #000}
red {background-color:#F00; color:white;}
green {background-color: #060; color: white;}
blue {background-color:#00F; color: white;}
silver {background-color: #E6E6E6; color: #000}
strike {text-decoration: line-through}


.wood-type {color: #781D42; font-size: 14px; font-weight: 700;  padding:2px;}
.size-price {font-style:italic; color:#060;}
.date {font-style: italic; color: #8A0000; font-weight:600; float: left; margin-left: 15px;}
.dateh2 {font-family:"Segoe UI", Arial, sans-serif; color: #008; font-weight:600; font-size: 20px; float: left; }
.year {color: #8A0000; font-weight:600; }
.date-large {color: #060; font-weight: 600; font-size:20px; }
.place {color: #060; font-weight: 600; font-size:16px; text-align:center}

 img.hover-shadow {transition: 0.3s;}
.hover-shadow:hover {box-shadow: 0 4px 8px 0; cursor:pointer;}

.mySlide {border-radius: 5px; transition: 0.3s; cursor:pointer; width:100%; height:auto;}
.mySlide:hover {box-shadow: 0 4px 8px 0; cursor:pointer;}
.changefont  {border-radius: 5px; transition: 0.3s; cursor:pointer; }

.quarter{float: left; width:23%; height:100%; margin:1%;}
.quarterR{float: left; width:23%; height:100%; margin:1%; }
.border{border-style:solid; border-width:1px; border-color: #008; border-radius: 2px; padding: 2px}
.fifth img, .fifthR img, .quarter img, .quarterR img, .third img, .thirdR img, .threequarterR img, .halfR img, .half img, .fifth img, .whole img{width:98%; margin: 2%}
.half, .halfR{float: left; width: 47.9%; margin: 1% 1%}
.halfR{float: left; width: 48%; height: 100%; margin: 1% 1%;}

.threequarter, .threequarterR{float: left; width:74.99999%}
.third, .thirdR{float: left; width:31%; height:100%; margin: 1% 1%;}
.whole { float: left; width: 98.9%; margin-left: auto; margin-right: auto}

.twothirds, .twothirdsR{float: left; width:66%; padding: 1%;}
.fifth, .fifthR {float: left; width: 18%; height:100%; margin: 1% 1%;}
.ninetyfive {width: 95%; margin-left: auto; margin-right: auto}
.ninetyfive img {width: 98%}
.thirdRightR{float: right; width:33.333333%;  margin-top:10px; margin-left:10px; margin-right:10 px}
.quarterRightR{float:right; width:24.99999%;  margin-top:10px; margin-left:10px}

.caption, {margin:1px 0px 10px; background-color: #EBF4F2!important; border-radius:5px; border-style:solid; border-width:1px; border-color: #A0CCC1;}

.caption p{padding:1px;  border:2px; margin:2px;}
 .contact{
  padding: 72px 5px;
   border-style: solid;
    border-width: 1px;
    border-color: #781D42;
}

.row-padding, .row-padding>.quarter, .row-padding>.half{padding:1px 1px}   /* controls gap between columns html box-sizing at top ensures padding incuded in any width*/
.padding-small {padding:4px 3px!important}
.padded {padding-top:40px!important; padding-bottom:40px!important;}
.padded-contact {padding-top:80px; }
.padding-sides {padding-left:15px; padding-right:15px;}
.padtop{padding-top:20px;}

.border-sides {box-sizing: border-box; border-left:10px; border-right:10px;}
 .light-back {background-color: gray}

.bar{font-size:18px}
.bar:after{content:""; display:table; clear:both}
.bar a:hover{background-color: #000088; color:white}

.gridtable {
	color:#333333;
    border-color: #900;
    font-size: 12px;
}
.gridtable tr:nth-child(even) {
  background-color: #FFE5EA;
}
.gridtable th, tr, td {
    text-align: centre; padding: 2px;
}
.gridtable th {
    color: #900; background-color: #FFE5EA;
}
.gridtable th.subheader {
	text-align: center;
	color: #fff;
	background-color: #900;
}

.over{ overflow-x: auto;}

/* The Modal (background) */

.modal {
  display: none;
  position: absolute;
  z-index: 2;
  padding: 10px;
  left: 0;
  top: 0;
  width:auto;
  height:auto;
  overflow: auto;
  background-color: #E6E6E6;
}
 .modalImage {
    margin: auto;
    display: inline;
    max-width: 100%;
    z-index:2
    }

 .modalContainer {
 display:block;
 position:fixed;
 top: 30px;
 width:80%;

 z-index:2
 }
.caption-container {max-width:600px;}
.caption-container-wide {max-width:900px;}



.dropdown, .dropdown a{
  position: relative;
  display: block;
  width:100%;
  padding:5px;
  border-bottom: 2px solid transparent;
  float: center;
  z-index: 0;
    }
.dropdown:hover{border-bottom: 2px solid white;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content{
  display: none;
  position: absolute;
  top: 25px;
  left: 2px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float:none;
  padding: 6px 8px;
  text-decoration: none;
  display: block;
}
.RHS {
    left: -20px;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

 /* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #000088;
  font-weight:600;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 200px;
  background-color: #000088;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.popuptext a {color: white}

}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}




@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}
/* The Close Button */
.close {
 position: absolute;
  top: 10px;
  right: 12px;
  color: #f1f1f1;
  background-color: black;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
    color: white;
    background-color: #8A0000;
    text-decoration: none;
    cursor: pointer;
    }
.expand{
    position: absolute;
    bottom:10px;
    right: 12px;
    color: white;
    background-color:black;
    font-size: 100 px;
    font-weight: bold;
    z-index:1;
}

.container {
    margin: 200px auto;
    width: 500px;
    height: 60px
    }

/* search form More set with .topNav*/

.search-container form{
    display: flex;
    flex-direction: row;
    padding: 4px;
    }

.search-field {
    width: 25%;
    padding: 1px 2px 1px 2px;
    border: 1px;
    border-radius: 50px;
    outline: none;
    }

.search-button {
  background: transparent;
  border: none;
  outline: none;
  margin-left: -33px;
}

.search-button img {
  width: 20px;
  height: 20px;
  object-fit: cover;
}
/*This makes the whole of the dropdown menu tabs (divs) active as a click button. Without this only the text is clickable*/

.menu, .menuAtSide{
  text-align:center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding:5px;
  z-index: 1;}

.menuAtSide{position:relative;}

.showif600 {display: none;}
.hideif600{display: inline}

.noArrow {display:none;}
.showArrow { display:inline}
.downArrow{}
.upArrow{}
.show{display:inline;}

/* Add a dark background on topnav links and the dropdown button on hover */

.image_fl {float: left; margin: 10px;}
.image_fr {float: right; margin: 10px;}

 .sticky {position: fixed; top: 0; width: 100%; max-width: 1260px; margin:auto;}
.sticky + .content-sub {padding-top: 100px;}
.sticky + .dropdown {padding-top: 30px}
.stickyTop{top: 0}

 /*the changes for 780 need to come before those for 600, so they don't override the 600 ones*/
@media only screen and (max-width: 780px) {

.hide{display:none}
.quarter{width:47.5%;} .search-field{width:90%;} .half{width:95%}
.modalImage {width: 90%;}
.modal-content {width: 100%;}
 }
/* (B) SMALL SCREEN - COLLAPSE INTO SINGLE COLUMN Place at bottom of stylesheet to over-ride class statements above*/
@media only screen and (max-width: 600px) {

.half, .quarter, .third, .twothirds{width:95% }

.showif600{display: inline;} /*only visible on small screen*/
.hideif600{display: none}    /*hidden on small screen */
.search-field{ width:80%}
.contact{padding:0;} /* removes padding for contact details */
.showWhen600 {display: inline;}
.hideWhen600{display: none;}

}