/*
-------------------------------------------------
   Katmar Software Responsive Standard Stylesheet

   Author        : Harvey Wilson
   Date Created  : 8 May 2020
   Date Revised  : 14 May 2020
-------------------------------------------------
*/

html { 
  margin: 0;   	padding: 0;
}

body {
	margin: 0px;   padding: 0px;
	font: 12px Verdana, Helvetica, Tahoma, Arial, sans-serif;
	background: #F0F4FA; 
	color: BLACK; 	
	text-align: center;    /* this fixes IE6 */
}

/* headings */
h1, h2, h3, h4 { 
  font-family: Verdana, Helvetica, Tahoma, Sans-serif;  
}

h1 {
	font-size: 22px;	
	font-weight: bold;
	line-height: 25px;	
	text-align: center;    
	color: #555;
	padding: 0;
	margin: 5px 0 15px 0;
}
h2 {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	padding: 0;
	margin: 0 0 15px 0;	
}
h3 {
	font-size: 14px;	 
	color: #666;
	font-weight: bold;
	padding: 0;
	margin: 0 0 10px 0;	
}
h4 {  /* used for centered labels under graphics */
	font-size: 12px;	 
	color: #666;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	padding: 0;
	margin: 0 0 10px 0;	
}

p {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
}	

/*Styles for other classes. */
.AlignLeft {
	float: left;
	margin: 10px 10px 0px 0px;
	padding: 15px;
	border-style: solid;
	border-color: #9C9EFC;
	border-width: 1px;
}

.AlignPPTRight {
	float: right;
	width: 152;
	margin: 30px 0 10px 10px;
	padding: 12px 12px 8px 12px;
	border-style: solid;
	border-color: #9C9EFC;
	border-width: 1px;
	background-color: #F0F4FA;
}

.AlignCaption {
	font-weight: normal;
	margin: -1px 0 0 0;
	padding: 10px 0 0 0;
	text-align: center; 
	border: none;
}

.AlignTextLeft {
	text-align: left;
}
.AlignTextRight {
	text-align: right;
}
.AlignTextCentre {
	text-align: center;
}
.Nomenclature {
	font-style: italic;
	display: inline-block;  
	margin: 0 0 0 15px;
	width: 50px;
}	
.EightyPercent {
	width: 80%;
	height: 80%;
}
.BoldUnderline {
	font-weight: bold;
	text-decoration: underline;
}
.JustBold {
	font-weight: bold;
	text-decoration: none;
}
.Underline {
	text-decoration: underline;
}	
.StrikeOut {
	text-decoration: line-through;
}
.BoldRed {
	font-weight: bold;
	color: #ff3300;
}
.ItalicText {
  font-style: italic;
}	
.SpacedForTouchscreen {
   /* Do nothing on a full screen */
}

table {  
/*  text-align: left;  */
	vertical-align: middle;
	border-collapse: collapse;		
}	

/* Standard Link Behaviour */
a:link, a:visited {
	color: #0033ff;
	text-decoration: underline;
}

a:hover {
	color: #ff3300;
	text-decoration: underline;
}

/* Styles for overall content which will be wrapped to center */
#MainWrap {
	background: #fff;
	color: #333;
	margin: 0px auto;
	padding: 0px 0px 1px 0px;
	/* width: 900px;  */
	width: 100%; 
	max-width: 900px; 
	clear: both;
	text-align: center;  /* this fixes FireFox */    	
}

/*Styles for the main header at the top. */
#Header {
	/* margin: 0px auto; */
	padding: 20px 0px 10px 20px;
	/* width: 880px; */   /* total width = 760 + left padding 20 = 780 */
	color: #fff;
	background-color: #9C9EFC;
	font-family: Verdana, Helvetica, Tahoma, Sans-serif;
	text-align: left;   
	overflow: auto;     /*  ????  */
}

#Header img { 
	float: left;
	border: 0px;
	padding-right: 20px;
	max-width: 128px;
}

#Header .logo-text { 
	/* float: left; */
	font-size: 22px;	
	font-weight: bold;
	line-height: 25px;	    
	text-align: left;
	margin: 0; 
	padding: 20px 0 0 110px;
	color: #fff;
	background: transparent;
}

#Header .slogan {
	/* clear: both; */
	margin: 0;  
	padding: 15px 0 0 110px;
	color: #fff;
	background: transparent;
	line-height: 20px;
	font-size: 15px;
	font-weight: bold;
}

#Header .katmarhome a {
    float: right;
	margin: 0 20px 0 0;  
	padding: 0;
	color: #0609c6;
	background: transparent;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
}

#Header .katmarhome a:hover {
	color: #ff3300;  /* red */
}

/*Styles for the main header menus. */
#HeaderMenus {
	color: #000;
	height: 24px;
	line-height: 24px;
	padding: 0 0 0 0px;
	margin: 0 0 0 0;
	clear: both;   /* stops the bottom border from floating to the right */
	background-color: #DFEDFE;
	border-style: solid;  
	border-color: #9C9EFC;  
	border-width: 1px;  
	border-top: none;
}

#HeaderMenus ul {
	line-height: 24px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

#HeaderMenus li {
	float: left;
	list-style-type: none;	
} 

#HeaderMenus li a {
	display: block;
	padding: 0px 10px;
	font-size: 14px;
	/* font-size: 1.83vw; */
	font-weight: normal;
	font-family: Verdana, Helvetica, Tahoma, Arial, sans-serif;
	text-decoration: none;
	background-color: inherit;
	color: #000;
}

#HeaderMenus .selected {
	color: #840000; 
	text-decoration: none;	
	font-weight: bold;
	background-color: #DFEDFE;   
}

#HeaderMenus a:hover {
	background-color: #9C9EFC;
	color: #fff;
	text-decoration: none;
}

#HeaderMenus a:hover.selected {
    color: #840000;  
	background-color: #DFEDFE; 
}	

/* Wrap left and right columns and draw the left and right borders */
#Content-Wrap {
	margin: 0 auto;
	padding: 0;
	width: 898px;    /*778px;*/ 
	background: #fff; 
	border-left: solid 1px #9C9EFC;
	border-right: solid 1px #9C9EFC;
/*	overflow: auto;*/
}

/* The main content block on the left hand side */
#LeftBlock {
	float: left;
	width: 675px;   /*555px;*/ 
	padding: 20px 10px 10px 10px;
	text-align: left;
	background: #fff; 
/*	border-left: solid 1px #9C9EFC;*/
	border-right: solid 1px #9C9EFC;
}

#LeftBlock p {
	color: #000;
	text-align: justify;
	background-color: inherit;
	line-height: 20px;
	margin: 0;
	padding: 0px 0 20px 0;
}

#LeftBlock ul {
	Margin: 0 0 20px 50px;
	Padding: 0;
	line-height: 18px;
}

#LeftBlock .Buttons {
	float: left; 
	margin: 0 0 20px 90px;
}

#RightBlock {
	width: 182px; 
	float: right;
	padding: 20px 10px 10px 10px;
	text-align: left;
	background: #fff; 
/*	border-right: solid 1px #9C9EFC;*/
	overflow: auto;
}

#RightBlock p.TopPara {
	color: #000; /* #9C9EFC; #ff3300;*/
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	background-color: inherit;
	line-height: 20px;
	margin: 0;
	padding: 0px 0 15px 0;
}

#RightBlock p {
	color:   #000; /* #9C9EFC; #ff3300;*/
/*	font-weight: bold;*/
	text-align: justify;
	background-color: inherit;
	font-size: 11px;
	line-height: 16px;
	margin: 0;
	padding: 0px 0 20px 0;
}

#RightBlock p a:link, #RightBlock p a:visited {
	color: #0033ff;
/*	font-size: 14px;*/ 
	font-weight: bold; 
	text-decoration: none;
}

#RightBlock p a:hover {
	color: #ff3300;
/*	font-size: 14px;*/	
	font-weight: bold;
	text-decoration: underline;
}

#RightBlock ul {
	Margin: 0 0 0px 10px;
	Padding: 0;
	font-size: 11px;
	line-height: 18px;
}

#RightBlock ul li {
	Margin: 5px 0 5px 20px;
}

/* Use when there are no separate columns */
#FullWidthBlock {
	/* width: 858px;  */
	margin: 0 0 0px 0;
	padding: 20px 20px 1px 20px;   /*bottom padding required to extend side borders*/
	background: #fff;
	border-left: solid 1px #9C9EFC;
	border-right: solid 1px #9C9EFC;  
	clear: both;
	text-align: left;
	overflow: auto;
}

#FullWidthBlock h2 {
	padding: 0px 0px 0px 30px;
}

#FullWidthBlock h3 {
	padding: 0px 0px 0px 30px;
}

#FullWidthBlock p {
	color: #000;
	text-align: justify;
	background-color: inherit;
	line-height: 20px;
	margin: 0;
	padding: 0px 30px 20px 30px;
}

#FullWidthBlock .TextButton {
	display: block;
	color: #000;
	width: 350px;
	text-align: center;
	background-color: #66ff66;
	font-size: 20px;
	line-height: 45px;
	border-radius: 0.7em;
	margin: 0px auto 10px;
	padding: 0px 0px 0px 0px;
}

#FullWidthBlock .WideTextButton {
  	display: block;
	color: #000;
	width: 550px;
	text-align: center;
	background-color: #66ff66;
	font-size: 20px;
	line-height: 45px;
	border-radius: 0.7em;
	margin: 10px auto 10px;
	padding: 0px 0px 0px 0px;
}

#FullWidthBlock .TextButton a:link {
	text-decoration: none;
	color: #000;
}	

#FullWidthBlock .TextButton a:visited {
	text-decoration: none;
	color: #cc33cc;
}

#FullWidthBlock .TextButton a:hover {
	text-decoration: underline;
	color: #ff3300;
}

#FullWidthBlock .WideTextButton a:link {
	text-decoration: none;
	color: #000;
}	

#FullWidthBlock .WideTextButton a:visited {
	text-decoration: none;
	color: #cc33cc;
}

#FullWidthBlock .WideTextButton a:hover {
	text-decoration: underline;
	color: #ff3300;
}

#FullWidthBlock ol {
	Margin: 0 0 20px 20px;
	Padding: 0 40px 0 20px;
	line-height: 18px;
}

#FullWidthBlock ol.lowercasealpha {
	Margin: 0 0 20px 20px;
	Padding: 0;
	line-height: 18px;
	list-style-type: lower-alpha;
}

#FullWidthBlock ol li {
	Margin: 0 0 15px 30px;
}

#FullWidthBlock ul {
	Margin: 0 0 10px 20px;
	Padding: 0 40px 0 20px;
	line-height: 19px;
	list-style-type: disc;
}

#FullWidthBlock ul li {
	Margin: 5px 25px 5px 30px;
	text-align: justify;	
}

#FullWidthBlock .ListNoDot {
	list-style-type: none;
	Margin: 0 0 10px 10px;	
}

#FullWidthBlock .Buttons {
	float: left; 
	padding: 1px 1px 20px 159px;
/*	margin: 0 0 1px 0;*/
}

#FullWidthBlock .ItalicHighlight {
  /* width: 650px; */
	text-align: center;
	background-color: #ffff99;
	font-style: italic;
	font-weight: bold;
	line-height: 25px;
	margin: 0px auto 20px;
	padding: 5px /*0px 0px 0px 0px*/ ;
}

#FullWidthBlock .BottomBorder {
	width: 858px;    /*738px;*/
	border-bottom: 2px solid #9C9EFC;
}	

#FullWidthBlock .History {
	line-height: 20px;
}	

#FullWidthBlock .AlignLeft {
	float: left;
	margin: 0px 10px 5px 0px;
	padding: 0px 5px 5px 0px;
	border-style: none;
}

#FullWidthBlock .AlignRight {
	float: right;
	margin: 0px 0px 5px 10px;
	padding: 0px 0px 5px 5px;
	border-style: none;
}

#FullWidthBlock .AlignCentre {
	display: block;	  
	margin: 15px auto 15px auto;
	padding: 0px;
	border-style: none;
}

.ExPropTable   /* Example Properties Table */ {
	/*   float: left;  */
	clear: both;
	margin: -20px 10px 5px 30px;
	border-style: none;	
}

.ExResultsTable   /* Example Results Comparison Table */ {
	clear: both;
	margin: -10px 10px 5px 30px;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;	
	border-color: black;
}

.ExResultsTable td, th {
	padding: 0px 5px 0px 5px;
	border: 1px solid;
}   

#Footer {
	clear: both;  
	/* width: 898px;   */
	color: #000;
	margin: 0px auto;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	font-family: Verdana, Helvetica, Tahoma, Arial, sans-serif;
	background-color: #DFEDFE;
	border: 1px solid #9C9EFC;	
	text-align: center;
	line-height: 22px;	
}
	
.ScreenShot {
    /* width: 858px;  */
	background-color: #fff;
	float: center;
	margin: 0px auto;
	/* margin: 0px 10px; */
	padding: 0 auto;
	text-align: center;  		  
}		

.ScreenShotBB   /* Bottom Border */ {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #9C9EFC;		  
}		
	
.ScreenShot h1, .ScreenShot h2 {	
	margin: 0 0 0.7em 0;
	padding: 25px 0 10px 0;
	overflow: hidden;
	text-align: center;
	text-decoration: underline;	
	font-size: 20px;
	color: #9C9EFC;
}	 
		
#FullWidthBlock .ScreenShot img {
	max-width: 100%;
	/* max-width: 400px; */
	text-align: center;
	border: none;
	margin: 10px auto 0px;
	padding: 20px auto 0px;
}	
		
#FullWidthBlock .ScreenShot p {
	color: #333;
	background-color: #F0F4FA;
	/* width: 500px; */
	width: 80%;
	padding: 5px 10px; 
	margin: 15px auto 25px;
}

#FullWidthBlock .TestimonialBlock {
	width: 700px;
	padding: 0px;
	margin: 15px auto 0px;
}	
	
#FullWidthBlock .TestimonialBlock p {
	color: #855;
	font: 11px Verdana bold;
	line-height: 20px;
}

#FullWidthBlock .BlackFridayBlock p {
	text-align: center; 
	padding: 30px 20px 25px 20px;	
	color: #FFF;
	background-color: #000;
	font: 20px Verdana;
	line-height: 35px;
	font-weight: bold;	
}

#FullWidthBlock .NarrowBlock p {
	width: 700px;
	padding: 0px;
	margin: 0px auto 0px;
	line-height: 20px;
}
	
#FullWidthBlock .NarrowBlock h2 {
	width: 700px;
	padding: 0px 0px 15px 0px;
	margin: 0px auto 0px;
}	
	
.KillFloat {
	clear: both;
}

.FixedSpaceFont {
	font-family: 'Courier New', monospace;
} 	


/* iPad and standard tablets */
@media screen and (max-width: 768px) {
	#HeaderMenus ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#HeaderMenus li a {
		font-size: 1.8vw;
		padding: 0px 5px;
	}	

   #FullWidthBlock .AlignLeft {
      width: 15%;
	}

	#FullWidthBlock .AlignRight {
      width: 15%;
	}

	#FullWidthBlock .WideTextButton {
		width: 80%;
	}

	#FullWidthBlock .History table {
		width: 100%;
	  }	
	  
	#FullWidthBlock .History {
		line-height: 19px;
		font-size: 11px;
     }	
     
   #FullWidthBlock ul li, #FullWidthBlock ol li {
      text-align: left;
   }

   .SpacedForTouchscreen {
      padding-bottom: 0.6em;
   }     

   img {
      max-width: 100%;
   }
} 


/* Smartphones	 */
@media screen and (max-width: 480px) {

	#Header {
      padding-left: 10px;
      margin-left: 0px;
	}

	#Header .katmarhome a {
		margin: 0 10px 0 0;  
		font-size: 12px;
	}

	#Header img {
      width: 25%;
      padding: 20px 10px 20px 0px;
      margin: auto 0px;
      /* padding-right: 10px; */
      /* padding-bottom: 10px; */
		/* display: none; */
	}

	#Header .logo-text, #Header .slogan {
		padding-left: 10px;
	}

	#HeaderMenus {
		height: 60px;		
	}

	#HeaderMenus ul {
		line-height: 30px;
		display: inline-block; 
		justify-content: center;
		align-items: center;
	}

	#HeaderMenus li a {
		/* display: inline; */
		font-size: 3.6vw;
		padding: 0px 0px 0px 20px;
	}

	#FullWidthBlock {
		padding: 20px 10px 1px 10px;   /*bottom padding required to extend side borders*/
	}

	#FullWidthBlock h1 {
		font-size: 20px;	
		/* font-weight: bold; */
		line-height: 25px;	
		text-align: center;    
		color: #555;
		margin: 5px 0 15px 0;
		padding: 0px 0px 0px 0px;
	}
	
	#FullWidthBlock h2 {
	  padding: 0px 0px 0px 0px;
	}
	
	#FullWidthBlock h3 {
	  padding: 0px 0px 0px 0px;
	}
	
	#FullWidthBlock p {
	  padding: 0px 0px 20px 0px;
	}
	
	#FullWidthBlock ul, #FullWidthBlock ol {
	  padding: 0px 0px 0px 0px;
	}

	#FullWidthBlock ul li, #FullWidthBlock ol li {
      text-align: left;
		margin: 5px 20px 5px 20px;
	  }

	#FullWidthBlock .TextButton {
		width: 80%;
		font-size: 5vw;
		line-height: 10vw;
	}

	#FullWidthBlock .WideTextButton {
		width: 100%;
		font-size: 5vw;
		line-height: 10vw;
   }
   
	/* #FullWidthBlock .AlignLeft {
      width: 15%;
	}

	#FullWidthBlock .AlignRight {
      width: 15%;
	} */

	#FullWidthBlock .History {
		line-height: 3.2vw;
		/* font-size: 10px; */
		font-size: 2.2vw;
	  }	
	
   table {
      font-size: 2.1vw;
   }

}