/* whole website Cambria,Cambo,*/
*  {box-sizing: border-box;}
body, td {font-family:Cambria, Georgia, serif;text-align:justify;
    color:#000;margin:0px;padding:0px;font-size:110%;}
h1 {font-size:140%;color:#548dd4;padding:5px;margin:0px}
h2 {font-size:120%;color:#548dd4;}
p {line-height:150%;padding:0px 15px 0px 15px}
img {padding:0px 15px 0px 10px;}
td {text-align:left;border-style:solid;border-width:1px;padding-left:4px}
em {color:#00c;font-style:normal}
a {text-decoration: none}
h1, h2 {text-align:center}
h3 {margin-bottom:-10px;padding-left:15px}
p.single {line-height:100%;text-align: left;}




/* whole page */
#outer {padding:0px;margin-left:auto;margin-right:auto;max-width:1000px;
}

/*  head part */
#heading{	padding: 0px;	width: 100%;    color:#000;
    vertical-align:middle;height:70px;
    border-bottom:#ccc solid 2px}
#headcol1 {width:24%;float:left;font-size:250%;color:#548dd4;letter-spacing:15px;
    border-right:#548dd4 solid 2px;margin:5px}
#headcol2 {width:65%;float:right;margin-left:30px}
#headcol2 h1 {font-size:150%;padding:0px;text-align:left;font-weight:lighter;letter-spacing:8px}
#headcol2  {padding:20px 5px;}
/*  content part*/
#content {margin:-15px 0px 0px 5px;width:97%;padding-top:10px}
.leftcol,.rightcol {width:48%;float:left;height:200px;padding:10px;}
.leftcol img {max-width:90%;padding-left:15px;max-height:180px}
.rightcol {padding-top:90px}

#frame1 {text-align:center;width:220px;float: left;padding-top:20px}
#frame1 img {width:90%;margin:25px 20px 10px 10px;}
#frame1 .caption {font-size:90%;margin-bottom: 10px;}
.break {margin:35px 0px}
.breaksw {margin-top:70px}
.emailimg {margin-right:10%;width:140px;float:right}


/*  footer part */
#footer {clear:both;font-size:90%;text-align:center;color:#004;background: #ccc;padding:10px;margin-top:0px}  
#footcol1, #footcol2,#footcol3 {width:30%;float:left;text-align:left;padding-left:2%;}
#footcol1 ul, #footcol2 ul,#footcol3 ul {margin:0px;padding:0px;list-style-type:none;}



/* repsonsive naviagation no max width*/
.topnav {    overflow: hidden;width:40%;margin:-10px auto}
/* Style the links inside the navigation bar */
.topnav a, .active {    float: left;
    display: block;
    color: #548dd4;
    text-align: center;
    padding: 8px 2%;
    text-decoration: none;
    font-size: 115%;}
/* Change the color of links on hover */
.topnav a:hover {     color: #009;}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {    display: none;} 



 @media screen and (max-width:830px){
    #heading {	height:60px;}
    #headcol1 {font-size:250%; }
	#headcol2 h1 {font-size:120%;letter-spacing:5px}
    .topnav {    width:50%;margin:-10px auto}
	.topnav a, .active { padding: 8px 2%; font-size: 105%;}
	#footcol1, #footcol2,#footcol3 {width:97%;text-align:left;padding-left:2%;}
    .break {margin:5px}
    .breaksw {margin-top:65px}
    .leftcol, .rightcol {height:170px}
    .leftcol img {padding-left:15px;max-height:150px}
    .rightcol {padding-top:80px}

}
 

 /* When the screen is less than 621 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 621px) {
    body {font-size:100%;}
    .topnav {width:90%}
    .topnav a,.active {display: none;}
    .topnav a.icon {float: right; display: block;font-size:200%
  }
    #headcol1 {font-size:200%;color:#548dd4;letter-spacing:10px;}
    #headcol2 {width:70%;margin:0px;/*! padding: 0px; */}
    #headcol2 h1 {font-size:110%;letter-spacing:4px}
    #footcol1, #footcol2,#footcol3 {width:97%;text-align:left;padding-left:2%;}
    #frame1 {width:30%;margin: 0px 10px 10px -5px;}
    
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative;right: 0%; width:300px;background-color:#ccc}
    .topnav.responsive a.icon {position: absolute; right: 15px;  top: -10px;  }
    .topnav.responsive a {  float: none;    display: block;    text-align: left;padding:15px  }
    .leftcol, .rightcol {height:150px}
    .leftcol img {padding-left:15px;max-height:130px}
    .rightcol {padding-top:60px}
 }
 
 
@media screen and (max-width: 480px) {
    body,p  {font-size:95%}
    .topnav {width:90%}
    .topnav a,.active {display: none;}
    .topnav a.icon {float: right; display: block;font-size:200%  }
    #outer {width:100%;padding:1%;}
	#heading {height:60px;width:98%;}
    #headcol1 {width:40%;font-size:200%;margin:0px}
    #headcol2 {width:50%;margin:0px;padding: 0px;}
    #headcol2 h1 {font-size: 95%; letter-spacing: 5px }
    #content{width:97%;text-align:center;padding:0px 5px}
    #content p {text-align:justify;}
    .leftcol , .rightcol {width:98%;font-size:100%}
    .rightcol {height:50px}
	.leftcol {margin-top: 10px;border-top: 1px grey dotted;}
	.rightcol {margin-bottom: 10px;border-bottom: 1px dotted grey;padding-top:10px}}
    .leftcol img{width:70%;float: none;margin-bottom: 5px;}
      
    #frame1 {width:40%;margin-top:-35px  }
    .emailimg {width:80px;float:none;}
	.break {margin:0px}
    p.single {text-align:left !important;}
    ul {text-align: left}
}





/* base colours */
body {background-color:#fff}
#heading {background-color:#fff;}
#content {background-color:#fbFFFF ; }
h2,em, a:link  {color:#548dd4;}
h1 {color:#000}
#headcol2 h1 {text-align:left} 
 .topnav.responsive  { background-color:#e3f2fd }
/* Add an active class to highlight the current page */
.active { color: #009;}
#footer a {color:#fff}
#footer a:hover {color:#000}
#footer {background-color: #548dd4;  ;color:#fff;}
#footcol1, #footcol2, #footcol3 {}
.footer-item >li {border-bottom: 1px dotted #00c;}