/*
Material Blue (Background): #1565C0

Light Gray (sub-heading): #989898
Darker Gray (Links): #616161
Dark Gray (Heading): #858585
#Darkest Gray (some text): #424242

Light Red (Links): #c62828
Dark Red (Heading): #b71c1c
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


#0f1229 #ca9034 #ce9b4a #dea03c #d29c45 #d29a40
*/


/* Fonts used:
	Roboto Slab (Regular 400) - For serif focus titles

	Poppins (Bold 700) - For headings
	Poppins (Semi-bold 600) - For subheadings

	Lato (Regular 400) - For text and buttons
	Lato (Bold 700) - For subtext

	font-family: 'Lato', sans-serif;
	font-family: 'Poppins', sans-serif;
	font-family: 'Roboto Slab', serif
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@600;700&family=Roboto+Slab&display=swap');



:root{
  font-size: 16px;

	--font-col: #000000; /* Main font colour */
	--sub-col: #6b6b6b; /* Grey secondary font colour */

	--invert-col:  #ffffff; /* White font for dark bg elements */

	--bg-col: #ffffff; /* White background colour for main bg */
	--element-col: #ececec; /* Light grey for box elements d3d3d3 */
	--element-light-col: #f9f9f9;

	--main-col: #15163E; /* Blue -- for nav */

	--main-col-darken:  #0F1124; /* Dark blue -- for bg */
	--main-col-xdark: #090A1A; /* Extra dark blue -- for footer */

	--accent-col: #d29a40; /* Gold -- for primary focus */
	--accent-col-light: #bda277; /* Light gold -- for secondary focus */
	--accent-col-xlight: #fddd9b;
	--accent-col-dark: #a27200 ;
	--accent-col-xdark: #90690c ;
}

html{
	/*height: 100%*/
}

body {
    font-family: 'Lato', sans-serif;
	font-size: 16px;
	background-color: var(--main-col);
	color:  var(--font-col);
    margin: 86px 0 0 0;
	padding:0;
	line-height:1.3em;
    height: 100%;
}

body.popupwin {
    font-family: 'Lato', sans-serif;
	font-size:10pt;
	width: 800px;
    margin: 20px auto 20px auto;
	padding: 0px;
	line-height:1.3em;
    background-color: var(--main-col);
}

table.popupwin_Content{ 
    background-color: WHITE; 
    padding: 0px 50px 30px 50px; 
    margin: 40px;
    min-width: 800px; 
    min-height: 400px; 
    }

/* Text styles */
h1{
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color: var(--accent-col);
	margin-top: 1.5em;
	line-height: 1.2em;
}
h2{
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color: var(--accent-col);
	line-height:  1em;
}
h3{
	font-size: 1.5em;
	font-family: 'Poppins', sans-serif;
	color: var(--accent-col-xdark);
	font-weight: 600;
	margin: 5px 0 0 0;
}
.IE-font-increase{
	font-size: 1.2em;

}
.summary-text{
	text-align: center;
	text-transform: uppercase;
	color: var(--sub-col);
}

.sticky{
	margin: 0;
	padding: 0.25em 0;
	position: sticky;
	top: 55px;
	background-color: var(--invert-col);

}
.news-header{
	padding-left: 10%;
}



@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()){
	.sticky{
		/* using @supports */
		background-color: #ffffff80 !important;
		-webkit-backdrop-filter: saturate(180%) blur(8px);
		backdrop-filter: saturate(180%) blur(8px);
		border-bottom: 1px solid var(--invert-col);
	}
}


/* Index page banner specific */
#focus-title{
	font-family: 'Roboto Slab', serif;
	font-weight:  400;
	color: var(--invert-col);
	line-height: 1.2em;
	margin: 1em 0 0 0;
}
#focus-text{
	font-weight:  700;
	color:  var(--accent-col-light);
	margin-bottom: 2em;
}
#banner-img{
	width: 90%;
	display:  block;
	margin: auto;
}




/* Buttons */
.button{
	box-sizing:  border-box;
	display: inline-block;
	margin: 1em;
	transition: transform 0.2s;
	border-radius: 4px;

	background-color: var(--accent-col);
	border:  2px solid var(--accent-col);
	color:  var(--invert-col);
	/*line-height: 1.5em;*/
	min-height: 1.8em;
	text-align: center;

	cursor: pointer;
}
.button:hover{
	-webkit-transform: scale(1.025);
}
.button:active{
	-webkit-transform: scale(0.95);
}

.primary-button{
	width: 40%;
	margin: 2%;
	max-width:  200px;
	min-width: 100px;
	height:  3em;

    background: linear-gradient(163deg, var(--accent-col-light) 0%, var(--accent-col) 40%);
    padding: 2px;
    border: none;

	text-decoration: none;
	color:  var(--invert-col) !important;
	line-height:  2.6em;
}

.secondary-button{
	width: 40%;
	margin: 2%;
	min-width: 100px;
	max-width:  200px;
	height:  3em;

	background-color: transparent;
	border:  2px solid var(--invert-col);

	text-decoration: none;
	color:  var(--invert-col)  !important;
	line-height:  2.6em;
}

.tertiary-button{
	width:  200px;
	height:  3em;

	background-color: rgba(203, 204,224, 0.99);
	border: 0px solid #3f3f8a;

	text-decoration: none;
	color: var(--main-col) !important;
	line-height:  2.6em;

	display: block;
	margin: 1.5em auto;
    padding: 2px;
}

.regular-button{
	width: 160px;
	height: 20px;
    background: var(--accent-col);
    padding: 2px;
    border: none;
    font-size: 0.9em;
	text-decoration: none;
	color:  var(--invert-col) !important;
}

.subscribe{
	display: block;
	margin:  0 auto;
	min-width:  108px;
	width: 80%;
	height: 2em;
}


input{
  background-color: var(--element-light-col);
  border: 1px solid var(--element-light-col);
  border-radius: 2px;
  min-width: 80px;
  width: auto;
}

.fieldtext, .fieldtextmultiline{
  background-color: var(--element-light-col);
  border: 1px solid var(--accent-col-light);
  border-radius: 2px;
  min-width: 80px;
  width: auto;
}

.submit{
	width:  200px;
	height:  3em;

	background-color: var(--accent-col);
	border:  2px solid var(--accent-col);

	text-decoration: none;
	color: var(--invert-col) !important;
	line-height:  2.6em;

	display: block;
}
.subscribe:hover, .submit:hover, .purchase:hover, #buttontable tr:nth-of-type(odd) td:nth-last-child(1) .purchase:hover, #buttontable tr:nth-of-type(3n) td:nth-last-child(1) .purchase:hover{
	cursor: pointer;
  /* background: linear-gradient(153deg, rgba(216, 160, 71, 1) 2.52%, rgba(58, 60, 107, 1) 47.9%); */
  background-position: right bottom;
}

.purchase{
  width: 115px;
  line-height: 1.9rem;
  margin:0;
  border: 0;
  transition: all 0.4s;
  background-color: var(--accent-col);
  background: linear-gradient(153deg, rgba(222, 184, 119, 1) 3%, rgba(216, 160, 71, 1) 52.94%, #15163E 100%);
  background-size: 200%;
  background-position: left top;
  /* background: linear-gradient(153deg, rgba(222, 184, 119, 1) 3%, rgba(216, 160, 71, 1) 52.94%); */
  color: var(--invert-col) !important;
  font-size: 0.8rem;
}

/* for making random buttons in the table slightly different colours */
#buttontable tr:nth-of-type(3n) td:nth-last-child(1) .purchase{
  width: 115px;
  line-height: 1.9rem;
  margin:0;
  border: 0;
  transition: all 0.4s;
  background-color: var(--accent-col);
  background: linear-gradient(153deg, rgb(231, 186, 107), rgba(216, 160, 71, 1) 52.94%, #000030);
  background-size: 200%;
  background-position: left top;
  /* background: linear-gradient(153deg, rgba(222, 184, 119, 1) 3%, rgba(216, 160, 71, 1) 52.94%); */
  color: var(--invert-col) !important;
  font-size: 0.8rem;
}
#buttontable tr:nth-of-type(odd) td:nth-last-child(1) .purchase{
  width: 115px;
  line-height: 1.9rem;
  margin:0;
  border: 0;
  transition: all 0.4s;
  background-color: var(--accent-col);
  background: linear-gradient(153deg, rgb(221, 190, 130) 3%, rgba(216, 160, 71, 1) 52.94%, #151669 100%);
  background-size: 200%;
  background-position: left top;
  /* background: linear-gradient(153deg, rgba(222, 184, 119, 1) 3%, rgba(216, 160, 71, 1) 52.94%); */
  color: var(--invert-col) !important;
  font-size: 0.8rem;
}
.info{
  width: 50px;
  height: 1em;
  border-radius:100px;
  margin:0;
  border: 0;
  transition: all 0.4s;
  background-color: var(--accent-col);
  background: linear-gradient(153deg, rgba(222, 184, 119, 1) 3%, rgba(216, 160, 71, 1) 52.94%, #15163E 100%);
  background-size: 200%;
  background-position: left top;
  /* background: linear-gradient(153deg, rgba(222, 184, 119, 1) 3%, rgba(216, 160, 71, 1) 52.94%); */
  color: var(--invert-col) !important;
  font-size: 0.6rem;
  line-height:1.8em
}

.faqbutton{
  position: fixed;
  top: 100px;
  right: 6vw;
}


/* Misc */
hr {
  margin:  3em auto;
  width:  100%;
  opacity: 0.5;
  border: 0 solid var(--element-col);
  border-top: 2px solid var(--element-col);
}


.hrlightgray
{
  height:0;
  border:0;
  border-top:1px solid var(--element-col);
  margin-top:2.5em; 
  margin-left:10px; 
  margin-right:10px; 
  margin-bottom:2em; 
  opacity: 0.5;
}


/* OLD */
ul {list-style-type: square; line-height:1.6em}

ul.goldul {list-style-type: square; line-height: 170%; color: var(--accent-col-xdark); margin-left:-10px}
ul.goldul span {color: var(--font-col); font-weight: normal;}
ul.goldul li {padding-left:3px}

ol.goldul {line-height: 170%; color: var(--accent-col-xdark); margin-left:-10px; font-weight: bold;}
ol.goldul span {color: var(--font-col); font-weight: normal;}
ol.goldul li {padding-left:5px}

li { margin-bottom: 5px;}
.body{color: var(--font-col); font-weight: normal;}

.smalltitles{font-family: 'Poppins', sans-serif; font-size: 1.8em; color: var(--accent-col-dark);}
.subtitles{font-family: 'Poppins', sans-serif; font-size: 1.4em; color: var(--accent-col-xdark);}

.boldgold { color:var(--accent-col-dark); font-weight: bold; }
.bolddarkgray { font-size: 1rem; color: #333333; font-weight: bold; }
.boldlightgray { font-size: 0.8rem; color: #B1B1B1; font-weight: bolder; }
.body8gray { font-size: 0.8rem; color: #555555; }
.body8 { font-size: 0.8rem }
.body7 { font-size: 0.7rem }

.bodybold { color: #000000; font-weight: bold; }
.bodybold9 { font-size: 0.9rem; color: #000000; font-weight: bold; }

.button:hover{text-decoration: none !important}

a:link {color: var(--accent-col-dark); text-decoration: none;}
a:hover{text-decoration: underline;}
a:visited {color: var(--accent-col-dark);}
a:active {color: var(--accent-col-dark);}

a:link.nolink {color: var(--accent-col-dark); font-size: 10pt; text-decoration: none; }
a:visited.nolink {color: var(--accent-col-dark); font-size: 10pt; text-decoration: none; }
a:active.nolink {color: var(--accent-col-dark); font-size: 10pt; text-decoration: underline; }
a:hover.nolink {color: var(--accent-col-dark); font-size: 10pt; text-decoration: underline; }

a:link.blacknolink {color: var(--font-col); text-decoration: none; }
a:visited.blacknolink {color: var(--font-col); text-decoration: none; }
a:active.blacknolink {color: var(--font-col); text-decoration: underline; }
a:hover.blacknolink {color: var(--font-col); text-decoration: underline; }

a:link.smallsubtitlesnolink { font-size: 1.2em; color: var(--accent-col-dark); font-weight: bold; text-decoration: none; }
a:visited.smallsubtitlesnolink {font-size: 1.2em; color: var(--accent-col-dark); font-weight: bold; text-decoration: none; }
a:active.smallsubtitlesnolink {font-size: 1.2em; color: var(--accent-col-dark); font-weight: bold; text-decoration: underline; }
a:hover.smallsubtitlesnolink {font-size: 1.2em; color: var(--accent-col-dark); font-weight: bold; text-decoration: underline; }

a:link.boldnolink {color: #000000; font-weight: bold; text-decoration: none; }
a:visited.boldnolink {color: #000000; font-weight: bold; text-decoration: none; }
a:active.boldnolink {color: #000000; font-weight: bold; text-decoration: underline; }
a:hover.boldnolink {color: #000000; font-weight: bold; text-decoration: underline; }

a:link.links8bold { font-size: 0.8rem; color: var(--accent-col-xdark); font-weight: bold; text-decoration: underline; }
a:visited.links8bold { font-size: 0.8rem; color: var(--accent-col-xdark); font-weight: bold; text-decoration: underline; }
a:active.links8bold { font-size: 0.8rem; color: var(--accent-col-xdark); font-weight: bold; text-decoration: underline; }

a:link.links8 { font-size: 0.8rem; color: var(--accent-col-dark); }
a:visited.links8 { font-size: 0.8rem; color: var(--accent-col-dark); }
a:active.links8 { font-size: 0.8rem; color: var(--accent-col-dark); }
a:hover.links8{text-decoration: underline}

a:link.Bolder8GrayNoLink {font-size: 0.8rem; color: #616161; font-weight: bolder; text-decoration: none; }
a:visited.Bolder8GrayNoLink {font-size: 0.8rem; color: #616161; font-weight: bolder; text-decoration: none; }
a:active.Bolder8GrayNoLink {font-size: 0.8rem; color: #616161; font-weight: bolder; text-decoration: underline; }
a:hover.Bolder8GrayNoLink {font-size: 0.8rem; color: #616161; font-weight: bolder; text-decoration: underline;}

a:link.links7bold { font-size: 0.7rem; color: var(--accent-col-xdark); font-weight: bold; text-decoration: underline; }
a:visited.links7bold { font-size: 0.7rem; color: var(--accent-col-xdark); font-weight: bold; text-decoration: underline; }
a:active.links7bold { font-size: 0.7rem; color: var(--accent-col-xdark); font-weight: bold; text-decoration: underline; }

.fieldtext { font-size: 10pt; color: #000000; background-color: WHITE; border: 1px solid #999999; padding-left: 4px; }
.fieldtextmultiline { font-size: 10pt; color: #000000; background-color: WHITE; border: 1px solid #999999; padding-left: 4px; }

table.grayborderbox {border: 1px solid #E6E6E6; background-color: WHITE; }
table.grayborderbox td {border: 0px; padding: 10px;}

blockquote {margin:18px 0 18px 20px; }

.cellbody {color: var(--font-col);  vertical-align: middle; }
.cellbodybold { color: var(--font-col); font-weight: bold; vertical-align: middle; white-space: nowrap; }

.VertCenter {vertical-align: middle; }

.DemoImage img {
    max-height: 100%;
    max-width: 90%;
    margin-bottom:10px;
}

img.Screenshot {
    max-width: 70%;
    max-height: auto;
    margin-bottom:10px;
	border-radius: 4px;
}

img.HistoryScreenshot {
    margin-bottom:10px;
	border-radius: 4px;
}



/* Orders */
.body9spaced{
  line-height: 1.6rem;
}



.thin{
  /* max-width: 1000px; */
  /* margin:0 auto; */
}

/* Banner styling */
.focus-banner{
  min-height:  100px;
  background-color:  var(--main-col-darken);
}
#banner-split{
  max-width: 1200px;
  margin: 0 auto;
  padding: 2em;

  table-layout: fixed;
  width:  100%;
}
#banner-split td{
}



/* News table */
.news-table{
  border-collapse: collapse;
  width: 80%;
  margin: 0 auto;
}
.news-table td:nth-child(1){
  white-space: nowrap;
  font-weight: 600;
  text-align:  right;
  vertical-align: top;
  padding-right: 1em;
}
.news-table td:nth-child(2){
  border-left: 1px solid var(--element-col);
  padding-left:  1em;
}
.news-table td{
  border-radius: 4px;
  height: 1em;
  padding: 0.5em;
}
.news-table tr:nth-last-child(even){
  background-color: var(--element-light-col);
}
/*.news-table tr:nth-last-child(1){
  background-color: transparent;
}*/

/* Content styling */
.flex-container{
  margin:  2em auto;
  max-width:  85%;

  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;

  /*background-color:  red;*/
}
.flex-item{
  width: 45%;
  min-width:  360px;
  height:  150px;
  margin: 2% 0.5%;
  padding: 1.2em;
  box-sizing: border-box;
  background-color: var(--element-col);
}
.flex-item h3{
  color:  var(--sub-col);
}

.striped-table{
  border-collapse: collapse;
  width: 80%;
  margin: 0;
}
.striped-table td:nth-child(1){
  white-space: nowrap;
  font-weight: 600;
  vertical-align: top;
  padding-right: 1em;
}
.striped-table td:nth-child(2){
  border-left: 1px solid var(--element-col);
  padding-left:  1em;
}
.striped-table td{
  border-radius: 4px;
  height: 1em;
  padding: 0.5em;
}
.striped-table tr:nth-last-child(even){
  background-color: var(--element-light-col);
}

/* Mailing list element */
#mailing-list-table{
  margin: 1em 0;
  width:  100%;
}
#mailing-list-table td{
  height: 1.6em;
}
#mailing-list-table td:nth-child(1){
  text-align: right;
}


/* Latest version element */
#latest-version-list > li{
  list-style: none;
  line-height: 1.2em;
}

table.historytable {border: 0px; padding: 3px; border-spacing:3px 8px; border-collapse: separate;margin-top:-8px}

span.HalfEmSpacer {displaplay: block;
                   margin-bottom: 0.5em; }