div.container {
	max-width: 1100px;
	margin: auto;
	text-align: left;
	background-color: white;
	border: 0px solid red;
}
div.banner {
	/*	display: -webkit-flex; /* Safari 
		-webkit-flex-direction: row-reverse; /* Safari 6.1+
		display: flex;  */
		
		margin: 0px; padding: 0px;
		border: 0px solid blue; /*position: relative; 18/12 tried flex instead of block */
		min-height: 205px;  /*width:  100%;top: 0px;  */
		background-color: #D8E6E9;/*yellow;*/
	    background-image:url(Seafront-2.jpg); height: 200px;
		background-size:100% 100%;
		background-repeat: no-repeat; max-height:200px;
		max-width: 1100px;
		
		
}
div.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
div.middlenarrow {
float: left;
padding:20px 0px 0px 0px;
margin:0px 10px 0px 5px;
width: 60%;
height:1200px; text-align: left; 
/*background-color: white;*/
color: rgb(0, 102, 153);
border: 0px lightblue;
}
div.middlewide {
float: left;
padding:20px 0px 0px 0px;
margin:0px 10px 0px 10px;
width: 45%; min-width: 600px;
height:1200px; text-align: left; 
color: rgb(0, 102, 153);
border: 0px solid blue;
}
div.right-column {
padding:100px 0px 0px 0px;
float: left;
width: 37%;
}
header, footer {
    padding: 1em;
    color: black;
    background-color: white;
    clear: left;
    text-align: left;
}

/* navigation for index files - draft effort 17/10/17 */
	/*	 navigation buttons  */
	/* FOR MOBILE PHONES */
	

	/* navigation for index files - draft effort 17/10/17 */
	/*	 navigation buttons  */
	nav {  float: left; border: 0px solid blue;
	padding:0px 0px 0px 0px; width: 15%;  min-width: 180px; margin-left: 0px; top: 0px;   color: rgb(0, 102, 153); font-size: 1.0em 	}
	dt.tab {float: left; margin-bottom: 0px; padding: 0px 0px;text-align: left; 
	}
	
	dt.tab a { margin: 30px 0px ;
	 text-decoration: none; color: rgb(0, 102, 153); font-weight:normal; 
	}
	dt.tab a {
	background : white; border : 0px  ;
	}
	dt.tab a:hover {
	padding-top : 0px; background : lightblue; border-color : rgb(0, 102, 153);font-weight:bold;
	}
	dt.tab a:active { 
	padding-top : 0px; background : lightblue; border-color : red; font-weight:bold; width: 200px; height: 50px;
	}	
	
	/* nav-bar-horizontal */	
	
div.nav2 {float: left; border: 0px solid blue;
	padding:0px 0px 0px 0px; width: 100%;   min-width: 180px; margin-left: 0px; margin-top: 0px; top:0px;   color: rgb(0, 102, 153); font-size: 1.0em 	
	}
ul {
    list-style-type: none;
    margin: 0;
    padding:0px 0px 0px 0px;
	background-color: #D8E6E9;
	overflow: hidden;
	border: 0px solid #9FA6A8;
    }

 li {
    float: left;
	padding:0px 5px 0px 5px;
	
	text-align: center; 
	border: .5px solid white; /*#9FA6A8;*/
	/*width: 14%;*/
}

 li a {
    float: left;
    color: rgb(0,102, 153);
	width: 90px; height: 42px;
    
    
    text-decoration: none;  border: 0px solid #9FA6A8;
}
 li a:hover:not(.active) {
    background-color: lightblue;
    color: blue;
}
.active {
	background-color: lightblue;
	}

	/*	<!-- links --> */
	div.dlink{display: block; padding: 2px 2px; border-width: 1px; border-style: solid; border-color: rgb(0,102,153); background: white; 
	}
	p.link {display: block;  padding: 0px 0px;background:white;  
	}
	dt.tab2 {display: block; margin-bottom: 0px;padding: 0px 0px;text-align: left;  
	}

	dt.tab2 a { margin: 30px 0px ;
	 text-decoration: underline; color: rgb(0, 102, 153); font-size: 10pt;
	}
	dt.tab2 a {
	background : white; 
	}
	dt.tab2 a:hover {
	padding-top : 0px; background : lightblue; border-color : rgb(0, 102, 153);font-weight:bold;
	}
/*  committee  - draft effort 01/12/17 */
	/*	<!-- links --> */
	div.button{background-color: white; /* Green */
    border: none;
    color: rgb(0, 102,153);
    padding: 5px 5px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
	height: 50px;
    /*margin: 4px 2px;*/
    cursor: pointer;
	float: left
	}
	p.com {display: block;  padding: 0px 0px;background:white;  
	}
	dt.tab3 {display: block; margin-bottom: 0px;padding: 0px 0px;text-align: left;  
	}
	dt.tab3 a { margin: 30px 0px ;
	 text-decoration: underline; color: rgb(0, 102, 153); font-size: 10pt;
	}
	dt.tab3 a {
	background : white; 
	}
	dt.tab3 a:hover {
	padding-top : 0px; background : lightblue; border-color : rgb(0, 102, 153);font-weight:bold;
	}
	
body  {font-family: Aerial, Helvetica, Verdana, sans-serif;
	font-size: 100%;
	}
	

@media screen and (max-width: 900px) {
div.banner{border: 2px solid blue;
		min-height: 150px;/*width:  150; */
		background-image:url(seafront-banner-900.jpg); height: 150px; width:  100%;
		/*background-size: 100% 100%;*/
		background-repeat: no-repeat; /*max-height: 150px;*/
		max-width: 900px;
	}
div.nav2 {
padding: 0px 5px 0px 5px; margin-top: 0px;
min-width: 500px; border: 2px solid red;
}
 ul {
        width: 100%;
        height: auto;
        position: relative;
		border: 2px solid #9FA6A8;
    }
     li a {
        float: left;
        padding: 0px;
		border: 2px solid lightblue;
    }
    div.middlenarrow {
	padding:0px 5px 0px 5px;
	width: 100%;
	min-width: 500px;
	overflow:scroll;
        }
	div.right-column {
		width: 60%;
		padding:10px 0px 0px 0px;
		margin: 0% 20% 0% 20%;
		border: 1px solid lightblue;
		}
}
 

@media screen and (max-width: 500px) {
div.banner{
		border: 2px solid red;
		min-height: 80px;
		background-image:url(seafront-banner-500.jpg); height: 80px; width:  100%;
		max-width: 500px;max-height: 100px;
	}
div.nav2 {
padding: 0px 0px 0px 0px; margin-top:0px;
min-width: 300px; border: 2px solid blue;
 }
	ul {
        width: 100%;
        height: auto;
        position: relative;
		border: 2px solid #9FA6A8;
    }
     li a {
        float: left;
		border: 2px solid grey;
    }
div.middlenarrow {
	width: 100%;
	min-width: 200px;
	overflow:scroll;
	        }
div
}