#preform{
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

#form-container {
  position: relative;
  width: 85%;
  /*This should be 80% of the menu bar which is currenty fixed at 950px as inherited from the old RBGE website design*/
  margin-left: auto;
  margin-right: auto;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 0.8rem;
}

#form-container h2 {
  color: #476532;
  font-size: 1.166rem;
}

#form-container h3 {
  color: #476532;
  font-size: 1rem;
}

/*Sets up the gird for the display of the query form fields*/
#databasefrm {
  /*width: 80%;*/
  /*This should be 80% of #queryform*/
  background-color: #D4E2CA;
  border-top-left-radius: 10px;
  display: grid;
  /*grid-template-rows: repeat(4, minmax(0, 1fr));*/
  row-gap: 10px;
  ;
}

/*Specify a grid layout for the query form specifying the arrangement of rows down the form*/
#fieldwrapper {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  background-color: #D4E2CA;
  border-top-left-radius: 10px;
  display: grid;
  grid-template-rows: repeat(6);
  row-gap: 10px;
  border: none;
}


/*Define a grid layout for each row of the query form specifying the arrangement accross the form*/
#formrow1,
#formrow2 {
  display: grid;
  /*grid-template-columns: repeat(3, minmax(0, 1fr));*/
  grid-template-columns: 100%;
  grid-template-rows: repeat(3, auto);
  column-gap: 5px;
}

#britishgeog {
  display: grid;
  /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, auto);
  column-gap: 5px;
}

#globalgeog {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(3, auto);
  /*grid-template-columns: repeat(3, minmax(0, 1fr));*/
  column-gap: 5px;
}

@media only screen and (min-width:910px) {

  #formrow1,
  #formrow2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #britishgeog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #globalgeog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*#britishgeog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 5px;
}*/



#filteroptions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 5px;
}

div.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 5px;
}

#databasefrm input[type='text'],
#databasefrm select {
  /*#row1 div div{*/
  width: 100%;
  box-sizing: border-box;
}

div.filterhelp {
  font-style: italic;
  font-size: 0.75rem;
}

/*Headsings within the help text*/
#form-container h1 {
  color: #476532;
  font-size: 1.3em;
  font-family: Verdana, Tahoma, sans-serif;
  margin-left: 0px;
  font-weight: bold;
}

.centred {
  display: block;
  margin-left: auto;
  margin-right: auto;
}