* {  margin: 0;  padding: 0;  box-sizing: border-box; }

html, body { height: 100%; font-size: 62.5%; }


body {
  font-size: 1.25em; /* currently ems cause chrome bug misinterpreting rems on body element */
  font-weight: 400;
color:#404040;
font-family: Verdana, Geneva, sans-serif;
background:white;
}

#wrapper {background:transparent;margin:0 auto;max-width:1600px;min-height:200px;padding:0;margin-top:-1px;}


img{width:100%;	height:auto;	color:#c00;}
table{border-collapse:collapse;}
.printonly{display:none;}
p {  margin-top: 0; }
a:link, a:visited, a:active {color:blue ; text-decoration:none;outline: 0;}
a:hover {color: black; text-decoration:none;background:white;}
.footerlink, a.footerlink:link, a.footerlink:visited, a.footerlink:hover  {color:#eee;}
a.current:link, a.current:visited {	color: white;	background-color: blue;}
/* -------customise--------------- */
h1, h2, h3, h4, h5, h6 {color:#554E48;
	font-style: normal;
	font-weight: bold;
	text-shadow: 0px ;
font-size:2em;margin-bottom:10px;
}
h1{font-size:1.8em;}
h2{font-size:1.5em; }
h3{font-size:1.3em;}
h4{font-size:1em;}

.rbox, .rboxy {width:98%;background:white;border-radius:10px;padding:10px 0px;margin:0 auto;margin-bottom:10px;	border:5px solid #348E7E;}
label{line-height:28px;}
input[type="radio"] {    display: none;}
input[type="checkbox"] {    display: none;}
input[type=radio] + label, input[type=checkbox] + label {border:1px solid silver;padding:4px 0px 5px 10px;background:#eee;
  color: black;border-radius: 4px ; white-space: nowrap;  font-style: normal;} 
input[type=radio] + label, input[type=checkbox] + label {background:#eee;margin:5px 3px;color:black; 
font-size:1em;font-weight:bold;border-radius:5px;text-decoration:none;padding:4px 0px 5px 10px;}
input[type=radio] + label:hover, input[type=checkbox] + label:hover {background:red;color:white;}
input:checked + label {border-radius: 4px; color:white;	background:red;}

/* -------body map text boxes-----must be in print css too !!--------- */
.blink, a.blink, .blink2 {display:block;margin:5px 3px;color:white;  text-align:center; 				 background:#348E7E;
font-size:1em;font-weight:bold;border-radius:3px;text-decoration:none;padding:0.5em ;}
a.blink2 {color:white;background:red;}
.blinkclicked, .blink:hover, a.blink:hover{color:  white;	 background: red;}
.blinkbox{display:inline-block;vertical-align:top;text-align:center;}

.notile{display:block;margin:0;padding:0;border-radius:0px;background:transparent;opacity:0.3;}
#bodypic{display:inline-block;width:420px;height:443px;margin:0 auto;padding:0;position:relative;background:#eee;}

.bh{cursor:pointer;opacity: 0;position:absolute;}

.bhr{opacity: 1;}


.blinkbox{display:inline-block;vertical-align:top;}
.bhlink, .bhlink3  {display:block;margin:5px 3px;color:white;  text-align:center;  background: #1A437D ;
font-size:1em;font-weight:bold;border-radius:3px;text-decoration:none;padding:6px ;cursor:pointer;}
.bhlink3  {color:white;background:red;}

#bodypic{display:inline-block;width:420px;height:443px;margin:20px auto;padding:0;position:relative;background:#eee;}
.bhpr{opacity: 0;}
.bhphr{opacity: 1;}



.vouchr{font-family:monospace;font-size:16px;font-weight:bold;color:navy;}



.aligned { display: flex;  align-items: center;  justify-content: center;  }
.aligned span {padding-left: 5px; text-align:center;   }
/* -------end customise--------------- */



.text-centre{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.inner{padding:1em;margin:0 auto;}

.rred{color:red;}
.grn{color:green;}
.blk{color:black;}
.blu{color:blue;}
.smally{font-size:0.75em;}

textarea{    border:1px solid #999999;    width:98%;    margin:5px 0;    padding:1%;font-family: sans-serif;}
.selinput {color:black;font-size:1.25em;background-color :#eee; padding: 2px 0px 2px 0px;border : 1px solid #ccc; }
.textbox {background-color : white; font-size:1.25em;
border : 1px solid silver;border-radius: 3px ;
border-right : 1px solid #808080;border-bottom : 1px solid #808080;
padding : 3px;color : black;  width:60%;}

.formlabel{font-weight:bold;}
.reqd{background:#f7cbca;}
#upl2{color:red;display:none;}
.clean-error, .clean-ok {margin:0 auto;font-family : sans-serif;
font-size:11px;border : 1px solid #cc0000;
background : #f7cbca;color : #cc0000;font-weight : bold;
padding : 4px;text-align : center;width : 90%;margin: 0 auto;}
.clean-ok {border : 1px solid #349534;background : #c9ffca;color : #008000;}
.incbox {margin:10px 0;padding:4px;border: solid 1px #ccc;min-height:25px;color:black;
 -webkit-border-radius: 6px ;
-moz-border-radius: 6px ;
border-radius: 6px ;}
table.gridtable {border-width: 0px;	border-collapse: collapse;background:#F6F6F6;}
table.gridtable td {border-width: 0px;padding:3px; text-align:left;color:black;}
table.mytable {border-width: 1px;	border-collapse: collapse;margin:0 auto;}
table.mytable td {border-width: 0px;padding:5px; text-align:left;color:black;}



.buttong {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin:  2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-size: 14px/100% ;
	padding: .5em 2em .55em;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
border:0;}
.buttong:hover {text-decoration: none;background:black;}
.buttong:active {position: relative;top: 1px;}
a.buttong:link, a.buttong:visited {color: white;}
.bigdisc {padding:8px;	-webkit-border-radius: 20px;	-moz-border-radius: 20px;	border-radius: 20px;}
.bigrounded {padding:8px 10px 8px 10px;	-webkit-border-radius: 2em;	-moz-border-radius: 2em;	border-radius: 2em;}
.large2 {	font-size: 14px;	padding: .4em 1.5em .42em;}
.medium {	font-size: 12px;	padding: .4em 1.5em .42em;}
.small {	font-size: 11px;	padding: .2em 1em .275em;}
.rred{color:red;}
.nill{	font-size: 12px;padding:0;margin:5px;}
.mini {	font-size: 11px;	padding: 2px;}
/* color styles ---------------------------------------------- */
.black, .black a:link, .black a:active, .black a:visited{background-color:black;color:white;}
.gray, .gray a:link, .gray a:active, .gray a:visited{background-color:gray;color:white;}
.teel, .teel a:link, .teel a:active, .teel a:visited{background-color:teal;color:white;}

.red, .red a:link, .red a:active, .red a:visited{background-color:red;color:white;}
.orange, .orange a:link, .orange a:active, .orange a:visited{background-color:orange;color:black;}
.pink, .pink a:link, .pink a:active, .pink a:visited{background-color:pink;color:black;}
.navy, .navy a:link, .navy a:active, .navy a:visited{background-color:navy;color:white;}
.green, .green a:link, .green a:active, .green a:visited{background-color:purple;color:white;}
.green:hover{background:#7c16cb;}
.blue, .blue a:link, .blue a:active, .blue a:visited{background-color:blue;color:white;}
.purple, .purple a:link, .purple a:active, .purple a:visited{background-color:purple;color:white;}
.magenta, .magenta a:link, .magenta a:active, .magenta a:visited{background-color:magenta;color:white;}
.gold, .gold a:link, .gold a:active, .gold a:visited{background-color:gold;color:black;}
.cyan, .cyan a:link, .cyan a:active, .cyan a:visited{background-color:cyan;color:black;}
.buttong:hover{text-decoration: none;background:black;color:white;}
.bar, .colum, .pie{ display: inline-block; background: url('graphix/chartsprites.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left;cursor:pointer;    opacity: 0.6;   filter: alpha(opacity=60); margin:0 3px;}
 .bar:hover, .colum:hover, .pie:hover{   opacity: 1;   filter: alpha(opacity=100);}
.bar { background-position: -0px -0px; width: 25px; height: 25px; }
.colum { background-position: -0px -25px; width: 25px; height: 25px; }
.pie { background-position: -0px -50px; width: 25px; height: 25px; }




#qTip { padding: 5px 8px; border: 1px solid #666666; display: none;border-radius:3px;
 background: lightyellow; color: black; font: normal 12px sans-serif;
 text-align: left; position: absolute; z-index: 1000;}
.mobonly{display:none;}
dt {  border: solid black;  border-width: 0 2px 2px 0;  display: inline-block;  padding: 2px;}
.right {  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);}
.left {  transform: rotate(135deg);  -webkit-transform: rotate(135deg);}
.up {  transform: rotate(-135deg);  -webkit-transform: rotate(-135deg);}
.down {  transform: rotate(45deg);  -webkit-transform: rotate(45deg);}

.bigloader { border:3px solid #DCDCDC; border-radius: 50%; border-top:3px solid navy; width:24px; height:24px;animation:spin 1s linear infinite;margin:0 4px;display:inline-block;vertical-align:middle;}

.hugeloader { border:4px solid #DCDCDC; border-radius: 50%; border-top:5px solid navy; width:40px; height:40px;animation:spin 1s linear infinite;margin:0 4px;display:inline-block;}
@keyframes spin {   100% {    transform: rotate(360deg); }  }

.hide{display:none;}


/*
.isreqd{border:1px solid red;background-color:pink;}.bhpr{opacity: 0.5;}.bhphr{opacity: 1;}.bhpxr{opacity: 1;}.bhpr2{opacity: 0.3;}
.validate{border:1px solid red;}
*/
[class*='icon-'] {font-size:0.75em;}


/*---------------------.nright(text-align:right;}---------------*/
/*---------------------------------row position:relative; ? -----*/
/* -- grid -- */
.row {min-height:10px;background:transparent;  margin: 0 auto;   width:99%; margin: 0 auto 5px;}
.row:after {    content: "";    display: table;    clear: both; }
[class*='bit-'] {  float: left;  padding: 0.3em; border:0px dashed red;}
.tope{margin:0;padding-bottom:0;}
.bit-1 {  width: 100%; }
.bit-2 {  width: 50%; }
.bit-3 {  width: 33.33333%; }
.bit-4 {  width: 25%; }
.bit-5 {  width: 20%; }
.bit-6 {  width: 16.66667%; }
.bit-7 {  width: 14.28571%; }
.bit-8 {  width: 12.5%; }
.bit-9 {  width: 11.11111%; }
.bit-10 {  width: 10%; }
.bit-11 {  width: 9.09091%; }
.bit-12 {  width: 8.33333%; }
.bit-20 {  width: 20%; }
.bit-23 {  width: 23.33333%; }
.bit-25 {  width: 25%; }
.bit-30 {  width: 30%; }
.bit-33 {  width: 33%; }
.bit-35 {  width: 35%; }
.bit-50 {  width: 50%; }
.bit-40 {  width: 40%; }
.bit-60 {  width: 60%; }
.bit-65 {  width: 65%; }
.bit-70 {  width: 70%; }
.bit-75 {  width: 75%; }
.bit-80 {  width: 80%; }
.bit-90 {  width: 90%; }

@media (max-width: 30em) {

	h1, h2,  h4, h5, h6 {	font-style: normal;	font-weight: 500;	text-shadow: 0px ;	font-size:1em;}

	.selinput {max-width:250px;}
	#bodypic, #bodydemopic{display:none;}
	#mytypeother{width:70%;}
}







@media only screen and (max-width: 720px) {
.notmob{display:none;}
.mobonly{display:block;}
.grid {width:100%; }

	h1{font-size:1.5em}
	.textbox {width:95%;}
.blink,	a.blink, .blink2 {display:inline-block;}

}