body {
  margin: 0;
  padding: 0;
  background: #fafafa;
  font-family:Helvetica,Arial,sans-serif;
  line-height:1.2;
}

.wide img {
  width:100%;
  max-width: 1200px;
  }

.mid , .mid img{
  margin:auto;
  width:100%;
  max-width:800px;
  }

.menubar a {
	float:left;
  }

.menubar {
  overflow:hidden;      /*otherwise IE6 increases height*/
  font-size:1em;
}
.menubar a:link, .menubar a:visited {
  color: #000;
  text-decoration: none;
}

.menubar a:hover, .clsSmallMenu a:hover, #current
{
  color: #fff;
  background:#f76321;
  text-decoration: none;
}

.menubar a, .clsSmallMenu a
{
  text-decoration: none;
	display:block;
  background:url(menu4.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.clear {	clear: both;}

.clsContent {
  clear:both;
  width:100%;
  max-width:1200px;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.clsGrey {
  background: #f0f0f0;
  padding:6px;
}


/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
  max-width:1200px;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}



.clsSlideCaption2 {
  width:100%;
  max-width:1200px;
  padding-top:5px;
  }


.clsSlide {
  width:100%;
  max-width:1200px;
  height:auto;

  opacity: 1;
  transition: opacity 3s;
  zbackground:transparent;
}




@media (min-width: 600px){     /* -------normal screens --*/
body {
  margin: 18px;
  }

#banner5 {
  display:none;
  }

.menubar {
  margin: 6px 0 6px 0;
}

.menubar a {
	padding:10px;
	margin:0px 1px 0px 0px;
  }

.clsSmallMenu a {
	padding:6px;
  }

.clsColLeft {
  float:left;
  width:25%;
  -webkit-order: 1;
  order: 1;
  }
.clsColCentre {
  width:50%;
  -webkit-order: 2;
  order: 2;
  }

.clsColMid {
  width:95%;
  max-width:1000px;
  margin:auto;
  -webkit-order: 1;
  order: 1;
  }

.clsColInner {
  margin-top:12px;
  }

.clsColInnerMain {
  margin:12px 0px 12px 0px;
  }


.blogiframe {
  width:1024px;
  height:700px;
  overflow:hidden;
  border:none;
  }

.clsRow {
 width:100%;
 padding:6px;
 clear:both;
 float:left;
 border-bottom:#dddddd solid 1px;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
 }

.clsRow  > div:nth-child(1) {
 width:200px;
 }

.clsRow  > div:nth-child(3) {
 width:300px;
 }

.clsRow > div {
 padding:0px 10px 0px 10px;
 display:inline;
 }
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:20%;			/* width of the right column wr */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:53%;			/* width of the middle column wc */
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width:51%;			/* width of center column content (column width minus padding on either side) wc - 2pc*/
	left:101%;			/* 100% plus left padding of center column 100 + pc */
}
.threecol .col2 {
	width:27%;			/* Width of left column content (column width minus padding on either side) wl - 2pl*/
	left:22%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding)   wr + 2pc + pl */
}
.threecol .col3 {
	width:20%;			/* Width of right column content (column width minus padding on either side) wr - 2pr*/
	left:75%;			/* Please make note of the brackets here:  100 - wl + 2pc + 2pl + pr
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
 }

}

/* -----smaller screens ----------*/
@media (max-width: 599px){

.menubar a {
	float:none;
  padding: 10px 10px 10px 10px;
  height:20px;
	font-size:1em;
  }

.menubar {
  display:none;
  }

#banner4 {
  display:none;
  }

.colmain {
  padding:10px;
  }

.clsSmallMenu a {
  padding: 10px 10px 10px 10px;
  min-height:16px;
	font-size:1em;
  }
.clsColLeft {
  width:100%;
  }
.clsColCentre {
  width:100%;
  }
.clsColCentre {
  width:100%;
  }
.clsColMid {
  width:100%;
  }
.blogiframe {
  width:100%;
  height:100%;
  overflow:hidden;
  border:none;
  }
.clsRow {
 width:100%;
 padding:6px;
 clear:both;
 float:left;
 border-bottom:#dddddd solid 1px;
 }
.clsRow > div {
  min-height:28px;
  }

/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
  padding:10px;
	width:100%;			/* width of center column content (column width minus padding on either side) wc - 2pc*/
}
.threecol .col2 {
	width:100%;			/* Width of left column content (column width minus padding on either side) wl - 2pl*/
}
.threecol .col3 {
	width:100%;			/* Width of right column content (column width minus padding on either side) wr - 2pr*/
					/*(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

}
@media (max-width: 340px){
.footerinner {
  width:310px;             /*fix Google pagespeed mobile check*/
}



}
/* ----- end smaller screens ----------*/

.clsSmallMenu2 a {
  margin-right:2px;
  display:block;
  float:left;
  width:42%;
}


.clsColInner {
  overflow:hidden;
  padding:6px 12px 6px 12px;
  background: #dae3fe;
}

.clsColInnerMain {
  padding:6px 12px 6px 12px;
  background: #fff;
}

.clsColInnerPic {
  float:left;;
  padding:6px;;
  background: #fff;
}

.footer {
  clear:both;
  margin-top:6px;
  line-height: 2em;
}

.footerinner {
  padding:3px;
}
.footer, .footer a{
  color: #fff;
  background:#f76321;
  width:100%;
  text-decoration: none;
  padding:6px;
}

.footer a:hover {
  color: #000;
  background:#ff8341;
}


.clsTable, .itab, .clsTable TD, .itab TD {
  margin: 0px;
  padding: 5px 5px 5px 5px;
  border-collapse: collapse;
  border:#dddddd solid 1px;
}

.clsTable TH, .itab TH {
  margin: 0px;
  padding: 5px 5px 5px 5px;
  border-collapse: collapse;
  border:#dddddd solid 1px;
  font-weight:bold;
  text-align:left;
}


.tRow:nth-child(odd) {
    background: #eaeaea;
}
.itab th {
    background: #A9C7f0;
    line-height: 18px;
    font: 10pt Arial;
    font-weight: bold;
}

.clsCompact TD {
  padding:5px;
}

.clsComRow{
 width:100%;
 padding:6px;
 clear:both;
 float:left;
}

.clsComRow:nth-child(odd) {
 background: #e0e0e0;
}


.clsRow:nth-child(even) {
 background: #e0e0e0;
}

.clsMenuBtn {
  position:absolute;
  right:0.4em;
  top:0.2em;
  width:25px !important;
  height:25px;
  -webkit-border-radius: .3em;
  border-radius:.3em;
}

#splash {
  padding: 12px;
  font-size: 18px;
  background-color: #ffff00;
  }


#hhdr {
  font-size: 24px;
  font-weight:bold;
  color:#f76321;
  padding: 6px;
  }