/* -------- sue hannay  -------------*/

html{height: 100%;}

  *,
*::after,
*::before{
	box-sizing: border-box;
	}

  :root {
    --grey: hsl(0, 0%, 74%);
    --darkgrey:  hsl(194, 49%, 34%);
    --blue:  hsl(194, 67%, 87%);
    --teal: hsl(180, 21%, 37%);
    --lav: hsl(193, 52%, 91%);
  }

button,
input,
textarea,
select {
font: inherit;
background:  white;
margin:  2%;
padding: 16px;
}


body
{   font-family: 'Open Sans', sans-serif;
  background: #e5e5e5 url(faint-grid.jpg) repeat; 
  padding: 0px;
  margin:0px;
  font-size: 0.95em;}

p{ font-size: 1.08em; 
	padding:  0px 10%;	margin: 0px; font-weight: normal;	color: #3c403d; line-height: 2.3em;
max-width:80em;
}

h1{    font-size: 2.3em !important;
    	padding: 12px 10% 0px 10%; 
		margin: 0px; 
		font-weight: normal; 
		color: #056583;	
		font-family: 'Montserrat', sans-serif;}

h2{	  font-size: 1.6em;	padding:  6px 10% 12px 10%;	
margin: 0px; font-weight: normal;	
color:var(--teal);  line-height:1.7em; 
font-family: 'Montserrat', sans-serif; 
letter-spacing: .023em; 
font-weight: 400;
}

h3{	font-size: 1.4em; 	padding:  12px 10% 4px 10%;	margin: 0px; font-weight: 900;	color:  #777;	line-height: 1.8em; letter-spacing: 0.05em; }
	
	
h4{ font-size: 0.7em;
  padding: 10px 27px 0px 23px;   margin:0;  font-weight: normal;
  color:#888;
}
/*
h5{ font-size: 1.1em;
  padding: 0px 0px 0px 48px;   margin: 0px;  font-weight: bold;
  color: #ddd;
}

h6{ font-size: 0.6em;
  padding: 0px 30px 0px 0px;   margin: 0px;  font-weight: normal;  color: #ddd;  padding:2px;}
*/

a{outline: none; text-decoration: none;}
		
  
a:link { 	color: #222;	
border-bottom: 1px dotted #222; 
padding: 1px;	
}

a:visited {color: #222;	
border-bottom: 1px dotted #222; padding: 1px;	
background:#fff;
}

a:hover { color: #056583;	padding: 1px;
border-bottom: 3px solid; background: snow;}

a:active {	color: #294664;	padding: 1px;	background:#5FDAFC;}
		

img{ border: 0px; margin: 0px; padding: 0px 30px 30px 0; 
max-width: 100%; height: auto; border: 0;}


/* unordered list */
ul{  line-height: 2em;
	padding: 0;
	margin: 0px 0 0 40px; list-style-type:disc;
	font-weight: normal;
	color: #aaa;}


ul li{ list-style-type: disc;  margin: 0 0 0 8%;   padding: 0;}

li{ line-height: 2em;
	padding: 6px 24px 0px 2px;
	margin: 0px 0 0 2px; list-style-type:disc;
	font-weight: normal;  
	}
	
	#right li { padding: 0 5%; margin: 0;}
	
	li p {padding: 0 0 0 15px;}
	
	
	.tom {color: #056583; background: white; margin: 5% 15% 0 15%; padding: 23px;border: 2px dashed #ccc; border-radius: 4px; font-size: 1.2em; text-align: center;}
	
	.fas {padding: 0; color:var(--teal); margin: 4px 0 0 0;}
	.fas:hover {color: black;}

.sml {font-size: 0.8em;}

.quote {border-left: 23px solid #5fdafc; padding: 2% 12% ; margin: 1% 0 0 2.3%;}

.action {border: 1px dashed #bbb; 
         border-radius: 6px;
         width: 80%; 
         margin: 0% 10%;
		 padding: 5% 0;
		 background: var(--lav) url(faint-grid.jpg)repeat;
		  }


 @media all and (max-width : 600px) {
.action h3	{font-size: .95rem;}
}

iframe {border: 4px solid white; margin: 0 5%; width: 89%;  box-shadow: 0px 0px 60px rgba(223, 223, 223, 0.5);}	

/* margin lefts / margin rights - to centre content */
#main, #foot, #top, nav, #site_content
{ margin-left: auto; 
  margin-right: auto;
}

/* main container -------------------------------- */
#main
{width: 84%;
 height: auto; 
background: transparent;
margin:0px 8% 23px 8%; padding: 0 ;
border-top: 0;
}



@media all and (min-width : 2001px) {
#main {width: 60%; margin: 0 20% 23px 20%;}
nav {width: 60% !important;}
}

/*
@media all and (max-width : 2000px) {
#main {width: 80%; margin: 0 10% 23px 10%;}
}
*/

@media all and (max-width : 1999px) {
#main {width: 85%; margin: 0 7.5% 23px 7.5%;}
}


@media all and (max-width : 1599px) {
#main {width: 100%; margin: 0 0 23px 0;}
}



/* logo */
#top
{ width: 100%; padding: 0px;
  height: auto; 
  background:  snow;  padding: 80px 0 0px 0;
  }
  
  
  #toplt {height: auto; padding:0; width: 100%; text-align: center;}
   
  #toprt {width: 0%; height: auto; padding:0;}
  
  @media all and (max-width : 800px) {
	  #toprt, #toplt {width: 100%;}
	   }
  
  
 #top a:link, #top a:visited {	border-bottom: 0; padding: 0px; color: #056583;}

#top a:hover {	background-color:transparent;
	color: tomato; border-bottom: 0;}
	
		
#top a:active {	background: transparent; color: #ddd; padding: 0;}
	

   
  
#toplt h1 { font-size: 3.6em !important; letter-spacing: 0.23em;
   padding:20px 4px 0 4px;  
  margin: 0px; font-variant:small-caps;             
  font-weight: 600; }
 

#top h2 { font-weight: 600; letter-spacing: .1em; padding: 18px 0 12px 0%; margin:0; font-variant:small-caps; color:#034356; font-size: 1.6em;}



#top h4 {color: #056583;}

@media only screen and (max-width: 800px)
{
	#toplt h1 {font-size: 2.44em !important; padding: 40px 0px 0 0px; }
	#top h2 {padding: 0px 4% 0 4%; letter-spacing: .1em; 
	font-size: 1.8em; text-align: center;}
		}

#top img {  padding: 0;  
  background: white; margin: 0; width: 100%; height: auto;}
  

/* navigation menu */
#gall
{ width: 100%;   height: auto; 
    background: snow;  padding: 0 0 32px 0;}
	

#gall h1 {font-weight: 600;}
#gall h2 {font-weight: 600;}

#gall a {padding: 4px; color: var(--teal)}
#gall a:hover {background: white; padding: 4px;}
  
  #gall img {
   border: 12px solid white; margin: 0 23px 23px 0; padding: 0;}
  
  

@media only screen and (max-width: 480px)
{	#gall
{   height: auto; border-bottom:0px; }

}



/* main content ------------------------ */
#site_content
{ overflow: hidden;
  width: 100%;
  height: auto;
  background: snow;
  padding: 0;}


/* sidebar */
#left
{	float: left;
	width: 100%; 
	height: auto;
	padding:5% 0 5% 0%;
  	background:var(--blue);
	margin: 0;
}



#left h1, #left h2, #left p {
	color: var(--darkgrey);}

#left a {color: #fff; border-bottom: 1px dashed #fff; opacity:0.9;}
#left a:hover {background: transparent; color: white; border-bottom: solid 2px; opacity: 1;}

.col {
  column-count: 3;
    column-gap: 40px;
	 column-rule: 1px dotted #d8f47c;
	 padding: 23px 0 50px 0;}

.col li {color: white;}


@media all and (max-width : 1024px) {
	.col {
  column-count: 2; }
	}


@media all and (max-width : 720px) {
	.col {
  column-count: 1;
    column-gap: 40px;
	column-rule: 1px dotted #d8f47c;
   padding: 23px 0 50px 0;}
}




#left h1, #gall h1 {font-size:2em; padding: 32px 8% 23px 8%; font-variant:small-caps; letter-spacing: 0.1em;}

#left h2 {color: white; font-size: 600 !important;}
#left h3 {color: white;}
#left li {color: white;}	
	
@media all and (max-width : 480px) {
	#left, #right {width: 100%; padding: 0;}	
	#left img {width: 100%; margin: 0; height: auto;}
	}




#over {width: 100%; height: auto; background: #ccc;}
#over h2 {letter-spacing: .1em; font-size: 1.4em; padding: 5%;}
#over h4{ font-size: 1.2em;  padding:0;   margin: 0;               
  font-weight: normal;  color: #888; }



#content a.colour, #content a.colour:hover{border-bottom: 0px;}

/* footer */
#foot
{   height: auto ;
  width: 100%; 
  margin:0;
    background: var(--darkgrey);
  padding: 20px 0 80px 0;
  text-align: right;
 }


#foot a:link, #foot a:visited {	text-decoration: none;
	color: #fff; border-bottom: 1px dotted; background: transparent !important;
	padding: 2px 0px;} 

#foot a:hover {	background: transparent;
border-bottom: 2px solid;
}
	

	
	#foot h2{ font-size: 1.2em; letter-spacing: .2em;
  padding: 8px 23px 0px 23px; margin: 0px; background: transparent;  font-weight: normal;  color: #fff; border: 0; font-variant:normal;}
  
#foot h3 { padding: 12px 23px 0 25px; font-size:.7em; color: #fff; letter-spacing: .05em; font-weight: 100; font-variant:normal;}

#foot h4 {color: #ccc;}

#footer-lt { width: 50%; height: auto; float: left; text-align: left;}

#footer-rt { width: 50%; height: auto; float: right; }

@media all and (max-width :  600px) {
	#footer-lt, #footer-rt {width: 100%;
	text-align: center;
	}
}


#content a, #content a:hover, #footer a, #footer a:hover{text-decoration: none;}

	
/* navigation ----------------------------------------------------------------------*/



nav {margin: 0; 
background-color: var(--teal); 
width: 100%; position: fixed; z-index: 23; height: auto; padding: 8px 0 0 0%; margin: 0%;}

#nav-lt {width: 100%; height: auto; float: left; }
#nav-lt a:hover {color:  yellow !important; background: transparent;}


#nav-lt.fas a {color: #fff; }

@media all and (min-width :  1600px) {
nav {width: 85%;}	
}

/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
.toggle, [id^=drop] { display: none;}

/*nav:hover {background: #0792bc;  transition: 2s ease;}*/

nav a {
  display: block;
  padding: 0 8px;
  color: #fff !important;
  line-height: 48px;     
  border: 0 !important;   
  /* here for height of menu items... line height */
  text-decoration: none; 
  border: 0;  

  letter-spacing: 0.1em; 
}

nav a:hover {  
 color: yellow; 
background: var(--teal);
}

nav a:active {border: solid 1px;}

nav:after {
  content: "";  display: table;  clear: both;
}

nav ul {padding: 0 12px;  margin: 0;  list-style: none;  position: relative;}

nav ul li {
  margin: 0; opacity:1; 
  display: inline-block;
  background-color: var(--teal); z-index: 20; 
  /* here for 2nd part of menu */
  	list-style-type: none; 
	margin: 0px 32px 0 2px; 
	padding: 0 0 0 12px;
}


nav ul li:hover {background: var(--teal); }

nav ul ul {
  display: none;
  position: absolute;
  top: 52px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 181px;
  float: none;  margin: 0;
  display: list-item;
  position: relative; background: var(--teal); opacity: 1;
}


li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1024px) {
	nav {width: 100%;}
	
#nav-lt {width: 100%; height: auto; float: left; padding: 0; }


#nav-rt {width: 100%; height: auto; float: left; padding:0; } 


.toggle + a,
 .menu { display: none; }

.toggle {
  display: block; 
  padding: 4px 0px 4px 10px;
  color: white; 
  line-height: 48px;
  text-decoration: none;
  margin: 0; 
}

.toggle:hover {
	background-color: #0792BC; 
    color: yellow;}

[id^=drop]:checked + ul { display: block; }

nav {
	width: 100%; 
	margin: 0; 
	padding: 0; 
    text-align: left !important;}

nav ul li {
  display: block; 
  text-align: left;
  width: 100%;  
    padding: 0 0 0 20px;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 0px;
 background: var(--teal)!important;}

nav ul ul ul a { padding: 0 0px;  }

 nav a:hover,
 nav ul ul ul a { background-color: #0792BC !important; }

 nav ul li ul li .toggle,
 nav ul ul a { 
 background-color: #444;   }

nav ul ul {
  float: none;
  position: static;
  color: #fff;

}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { 
position: static;

}
}

@media all and (max-width : 800px) {

nav ul li {    width: 100%; 	text-align: left;}

}