/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Variable width responsive 2 column layout plus header and   *
 * footer.  Based on grid layout techniques.                   *
 * Uses a vertical left side menu and right side content area. *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 /*****/
 /*****/
/* MAIN PAGE LAYOUT STYLES */
*{
    box-sizing: border-box;
}
html {
   height: 100%;
}
body {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   color: #000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 90%;
}

/* DEFAULT PAGE STYLES */
a {
   color: #00f;
   background-color: transparent;
   font-weight: normal;
   text-decoration: underline;
   padding: 0 0;
}
a:hover {
   color: #f00;
   background-color: #fff;
   font-weight: normal;
   text-decoration: underline;
   padding: 0 0;
}
hr {
	width: 100%;
	height: 1px;
	background-color: #000;
	color: #000;
	border: none;
	margin: 15px 0 15px 0;
	}
/* LISTS */
ol {
	padding: 0 0 0 0;
	margin: 0 0 0 20px;
	list-style-position: outside;
}
ul {
	list-style: disc;
	padding: 0 0 0 0;
	margin: 0 0 0 15px;
	list-style-position: outside;
}
ol ul {
	list-style: circle;
	padding: 0;
	margin: 0 0 0 20px;
}
ul ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0 15px;
}
li {
	padding: 2px 0 2px 0;
	margin: 0 0 0 0;
    margin-left: 5px;
	line-height: 120%;
	}

/* TABLE */
table {
	table-layout: fixed ;
	border-collapse: collapse ;
	border-spacing: 1px ;
    border: 3px double #000;
	caption-side: top ;
	empty-cells: show ;
	font-size: 100% ;
	margin: 0 0 0 0 ;
	padding: 0 0;
    color:  #000;
    width: auto;
}
	table caption {
		font-weight: bold;
		margin: 0 0 0 0;
		padding: 0 0 1.5em 0;
	}
th {
	font-weight: bold;
	text-align: left;
	padding: 10px 3px 10px 3px;
    border: 1px solid #000;
    color: #000;
}
tr.altrow {
	background-color:#CCC;
	color:#fff;
}
td {
	font-weight: normal;
	font-size: 120%;
	padding: 8px 8px 8px 8px;
    border: 1px solid #000;
}

.fieldtable {
	border-collapse: collapse;
	border: 2px solid #aaa;
}
.fieldtable th, .fieldtable td {
	border: 1px solid #aaa;
	padding: 4px;
}

.clear	{
	clear: both;
	padding-bottom: 1px;	/* for Gecko-based browsers */
	margin-bottom: -1px;	/* for Gecko-based browsers */
	}
.hide	{
	display: none !important;
	}
	
#wrapper {
   position: relative;
   width: 990px;
   min-height: 100%;
   border: 0 dashed red;
   background-color: transparent;
   color: #000;
   padding: 0;
   margin: 0 auto 0 auto;
}

#inner-wrapper {
    border: 1px dashed transparent;
}

/* clear floats after the columns */
.row::after {
    clear: both;
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;
}

/* the left panel */
.leftPanel {
   -webkit-flex: 1;
   flex: 1;    
   /*position: -webkit-sticky;
   position: sticky;
   top: 0;*/
   min-height: 700px;
   /*max-height: 600px;*/
   height: auto;
   float: left;
   margin: 0 0 10px 0;
   padding: 0 0 10px 0;
   background-color: #eee;
   background-color: transparent;
   border: 0 dashed green;
}
   .leftPanel img {
      margin: 0px;
      border: 1px solid #999;
   }
   
.leftPanelContent {
   position: -webkit-sticky;
   position: sticky;
   top: 10px;
   border: 0 dashed blue;
}
/* sub menu options within a site section */
.leftnav {
   /*position: inherit; */
   /*position: -webkit-sticky;
   position: sticky;
   top: 0;*/
   width: 100%;
   margin: 0 0 0 0;
   padding: 4px 0 4px 4px;
   color: #fff;
   border: 1px solid #111;
   background-color: #faf9f2;
   border-radius: 10px;
   font: 105% Arial, Helvetica, sans-serif;
   font-weight: normal;
}
   .leftnav li a:hover {
      color: #fff;
      background-color: transparent;
      /*background-color: #477;*/
      text-decoration: underline;
      padding: 2px 0 2px 0;
   }
   .leftnav ul>li.active>a {
      background-color: transparent;
      color: #222;
      font-weight: normal;
      padding: 2px 0 2px 0;
   }
   .leftnav ul>li.active>a:hover {
      background-color: #dc7d29;
      background-color: transparent;
      color: #f00;
      text-decoration: underline;
   }
   .leftnav a {
      text-decoration: none;
      display: block;
      width: auto;
      padding: 2px 0 2px 0;
   }
   .leftnav a:link, .leftnav a:visited {
      color: #222;
      background-color: transparent;
      font-weight: normal;
   }
   .leftnav a:hover {
      color: #f00 !important;
      background-color: #dc7d29;
      background-color: transparent;
      font-weight: normal;
      text-decoration: underline !important;
      }
   .leftnav h3 {
      font: 1.6em Georgia, "Times New Roman", Times, serif;
      color: #621313;
      background-color: transparent;
      margin: 0;
      padding-bottom: 4px;
      }
   .leftnav ul {
      list-style-type: none;
      margin: 2px 0 0 0;
      padding: 0 0 0 0;
      width: 160px;
      }
   .leftnav li {
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      }
   .leftnav ul li {
      margin: 0 0 0 0;
      font-weight: bold;
      border-bottom: 0 solid #fff;
      }
   .leftnav ul li a:hover {
      color: #f00;
      text-decoration: underline;
      }      
   .leftnav ul li.last {
      border-bottom: 0;
      }
   .leftnav ul ul {
      list-style: none;
      margin-left: 10px;
      width: 145px;
      }
   .leftnav ul ul ul {
      list-style: none;
      margin-left: 10px;
      width: 145px;
      }
   .leftnav ul ul ul ul{
      list-style: none;
      margin-left: 10px;
      width: 135px;
      }
   .leftnav ul ul li {
      border-top: 0 solid #fff;
      border-bottom: none;
      margin: 0 0 0 0;
      }
   .leftnav ul ul a:link, .leftnav ul ul a:visited {
      background-color: transparent;
      color: #222;
      }
   .leftnav ul ul li a:hover {
      /*background-color: transparent;*/
      color: #f00;
      background-color: #dc7d29;
      background-color: transparent;
      font-weight: normal;
      text-decoration: underline;
      }
   .leftnav .active {
      color: #851d24;
      /*color: #000;
      background-color: #9cc;*/
      font-size: 100%;
      font-weight: normal;
      padding: 2px 0 2px 0;
      }
   .leftnav ul>li.active>ul.active {
      background-color: #9cc;
      }
   h2 .active {
      color: #f00;
      font-size: 80%;
      font-weight: normal;
      }
   .leftnav ul ul ul .first {
      border-top: 0 solid #fff;
      }
   .leftnav ul ul .first {
      border-top: 0 solid #fff;
      }
   .leftnav ul .first {
      border-top: 0 solid #fff;
      }
   .leftnav .first {
      border-top: 0 solid #ccc;
      }
   .leftnav ul .last {
      padding-bottom: 2px;
      }
   .leftnav ul ul .last {
      padding-bottom: 0;
      }
   .leftnav ul ul ul .last {
      padding-bottom: 0;
      }
      
.searchForm {
    background-color: #faf9f2;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border:  0 solid #000;
    border-radius: 10px;
}
.searchForm form {
    width: 100%;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 10px;
    padding: 0 0 10px 4px;
}
.searchForm fieldset {
	color: #000000;
	background-color: transparent;
	font-size: 100%;
	font-style: normal;
	border: 0 solid #aaa;
	margin: 5px 0 2px 0;
	padding: 5px 2px 0 4px ;
	max-width: 175px ;
	width: 100%;
}
	.searchForm legend {
		color: #000;
		font-size: 100%;
		font-weight: normal;
		border: 0;
		margin: 0 0 0 0;
		padding: 5px;
		background-color: #faf9f2;
	}
	.searchForm fieldset input {
	    width: 100%;
	    margin-top: 5px;
	}
	.searchForm fieldset button {
	    min-width: 60px;
	    background-color: #4da362;
	    color: #fff;
	    margin: 10px 0 0 0;
	    padding: 3px 10px;
	    border-radius: 10px;
	    font-size: 100%;
	    font-weight: bold;
	}
	.searchForm fieldset button:hover {
	    background-color: #51c971;
	    color: #000;
	}
	
.rightPanel {
   -webkit-flex: 4;
   flex: 4;
   border: 0 dashed green;
}
/* set default style for content area */
#content {
   /*max-width: 807px;*/
   width: 99%;
   min-height: 500px;
   float: right;
   margin: 0 0 5px 10px;
   padding: 5px 15px 10px 15px;
   background-color: #faf9f2;
   font-size: 100%;
   border: 1px solid #111;
   border-radius: 10px;
}
   #content p {
      line-height: 135%;
      margin:7px 0 7px 0 ;
      color: #000;
      font-size: 110%;
      width: 100%;
    }

    #content img {
        border: 1px solid #000;
    }

   /* set default template styles for content headings*/
   #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
     }
   h1 #content, h2 #content {
      color: #f00;
   }
   #content h3, #content h4 {
      color: #000;
   }
   #content h5, #content h6 {
      color: #000;
   }
   #content h1 { font-size: 4.2em; margin: 20px 0 20px 0; }
   #content h2 { font-size: 2.0em; margin: 17px 0 17px 0; }
   #content h3 { font-size: 1.8em; margin: 14px 0 14px 0; }
   #content h4 { font-size: 1.6em; margin: 11px 0 11px 0; }
   #content h5 { font-size: 1.4em; margin: 8px 0 8px 0; }
   #content h6 { font-size: 1.1em; margin: 5px 0 5px 0; }

   /* set some other default content styles */
   #content strong, #content b { font-weight: bold; }
   #content em, #content i { font-style: italic; }
   #content ul { margin-top: 5px; }
   #content ul>li>ul {
      margin-top: 0;
      margin-bottom: 0;
   }
   #content ul ul {
      list-style: none;
      padding: 0;
      margin: 5px 0 0 10px;
      margin-top: 0;
      margin-bottom: 5px;
   }
   #content li {
   	padding: 2px 0 2px 0;
   	margin: 0;
    margin-left: 5px;
    font-size: 110%;
   	line-height: 135%;
   }
   #content input.btn {
      color: #fff;
      background-color: #477;
      border-top: 1px solid #ccc;
      border-right: 1px solid #222;
      border-bottom: 1px solid #222;
      border-left: 1px solid #ccc;
      padding: 0px 6px 0px 7px;
      margin-top: 10px;
   }
   #content input.btn:hover {
      color: #000000;
      background-color: #222;
      border-top: 1px solid #222;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #222;
      padding: 0px 7px 0px 6px;
   }
   #content input.btndown {
      visibility: hidden;
      background-color: #ade;
      border-top: 1px solid #222;
      border-right: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
      border-left: 1px solid #777;
   }
.linkbox {
    color: #000000;
    background-color: #faf9f2;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: -4px 4px 6px grey;
    padding: 15px;
    margin: 10px 20px 20px 10px;
    display: block;
}
a.linkbox {
    color: #000000 ;
    background-color: #faf9f2;
    background-color: #f7f3e4;
    padding: 10px 15px;
    font-weight: normal;
    text-decoration: none;
}
a:hover.linkbox {
    color: #f7f3e4;
    /*background-color: #734d26 ;*/
    background-color: #336600;
    text-decoration: none;
    padding: 10px 15px;
    font-weight: normal;
}
h6:hover.linkbox {
    color: #faf9f2;
}
.flex-container, .flex-container-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-container > div {
  margin: 6px;
  padding: 10px 2px 0 2px;
  border: 0 dashed #f00;
  width: 100%;
  height: auto;
}
.flex-container-2 > div {
  margin: 6px;
  padding: 10px 10px 0 10px;
  border: 0 solid #0f0;    
}
.flex-container {
  justify-content: flex-end;
}
.flex-container-2 {
    justify-content: center;
}
#header {
    border: 0 dashed red;
    width: 100%;
    padding: 0 0 0 0;
    float: left;
    color: #5e5040;
}
#header h1 {
    font-size: 4.4em; 
    margin: 8px 0 20px 0;
}
h3 #header { font-size: 1.4em; margin: 10px 0 10px 0; }

.header-image {
    float: right;
    width: 98px;
    height:80px;
    margin:12px 8px 0 0;"
}
.header-image-iwa {
    float: right;
    width: 225px;
    height:80px;
    margin:12px 8px 0 0;"
}

#footer {
   float: right;
   margin-top: 10px;
   margin-bottom: 10px;
   max-width: 100%;
   width: 99%;
   max-height: 30vh;
   position: relative;
   padding: 6px 0 6px 0;
   background-color: #5e5040;
   color: #fff;
   border: 0 dashed #fff;
   border-radius: 10px;
   text-align: center;
   font-size: 105%;
}
   #footer p {
      margin: 5px 0;
   }
   #footer a:link, #footer a:visited {
      text-decoration: underline;
      font-weight: normal;
      color: #fff;
      background-color: transparent;
   }
   #footer a:hover {
      color: #F00;
      background-color: white;
   }
   #footer input.textButton {
      background-color: transparent;
      border: 0;
      padding: 0;
      display: inline;
   }

/* CLASSES */

.clear	{
	clear: both;
	padding-bottom: 1px;	/* for Gecko-based browsers */
	margin-bottom: -1px;	/* for Gecko-based browsers */
}
.hide	{
	display: none !important;
}
.form_margins {
   font-size: 95% ;
   border: 0 dashed #FF0033;
   background-color:transparent;
   margin: 10px 15px 10px 15px;
}
.leftpad3px { 
    padding-left: 3px; 
    
}
.tabbed_form_wrapper {
   border: 1px solid #000000;
   background-color: #fffff6;
   padding: 0px 0px 0px 0px;
   margin: 0px 10px 0px 0px;
}
.genericBox {
   border: solid 1px #999;
   margin: 0px auto 0px auto;
   padding: 0px 0px 0px 0px;
   background-color: #fff;
   width: 80%;
}
   .genericBox p {
      line-height: 110% !important;
   }

.radio-text { margin: 0px 0 0 0; }
.inside   { padding: 0 1em;   }

/* the following class can be used to hide a note for users of old version 4 browsers from users of newer browsers */
.oldbrowser {display: none; }

.bold { font-weight: bold; }
.larger { font-size: 108%; }
.smaller { font-size: 90% !important;}
.centre {   text-align: center;   }
.emphasised {   font-weight:bold ; }

.indent_block {
   margin-top:0.5em;
   margin-bottom:1.5em;
   margin-left:1.5em;
}
.indent_10px { margin-left: 10px; }
.indent_5px { margin-left: 5px; }
.indent_2em { margin-left: 2em; }
.italic {   font-style: italic;   }
.justify { text-align: justify; }
.left { text-align: left; }
.right { text-align: right; }
.center {text-align: center;}
.centre {text-align: center;}
.normal { font-weight: normal; }
.underline { text-decoration: underline; }
.red {
   color:#ff0000;
   font-size: 90%;
   margin: 10px;
}
.red_page_num {
   color:#ff0000;
   font-size: 100%;
   margin: 0px;
}
.flesh {
    color: #fef9f2;
}
.large {
    font-size: 120%;
}
.reduced {
   font-size: 90%;
   line-height: 1.3em;
}
.inline { 
    display: inline; 
}
.bottom_padding_10px {
   padding-bottom: 10px !important;
}

.search_results a:hover {
   color: #FF0000;
   text-decoration: underline;
}
.border-black {
   border: 1px solid #000;
}
.border-grey {
   border: 1px solid #999;
}
.youtube-video {
  aspect-ratio: 16/9;
  width: 75%;
}
.youtube-video-2 {
  aspect-ratio: 4/3;
  width: 60%;
}
.osmap {
  aspect-ratio: 5/4;
  width: 80%;  
}
@media only screen and (max-width: 768px) {
.leftPanel {
    position: -webkit-relative;
    position: relative;
    }
.osmap {
    width: 100%;
    }
.youtube-video {
    width: 100%;
    }
.youtube-video-2 {
    width: 80%;
    }
}

/* Responsive layout - makes columns stack on top of each other instead of next to each other */
@media only screen and (max-width: 768px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
@media only screen and (max-width: 980px) {
    #wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .leftPanel, #content {
        width: 100%;
    }
}
 
@media only screen and (min-width: 768px) {
  body {
    background-image: url('/site/images/basinfrombridge-sepia.jpg');
    background-image: url(/site/images/basinfrombridge-sepia.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover ;
  }
}
@media only screen and (max-width: 768px) {
#footer {
    max-height: 100vh;
    width: 100%;
    float: none;
    clear: right;
    font-size: 80%;
  }
}
@media only screen and (max-width: 788px) {
.header-image, .header-image-iwa {
    display: none;
  }
}