@charset "UTF-8";

p {
	margin-top: 0;
	margin-bottom: 0;
}

#headerbox {
	clear: both;
	margin-top: 46px;
	margin-bottom: 28px;
}

h1 {
	color: #007AFF;
	font-size: 20px;
	font-weight: bold;
	margin-top: 6px;
	margin-bottom: 0;
	text-align: left;
}

h2 {
	color: #007AFF;
	font-size: 20px;
	font-weight: bold;
	margin-top: 48px;
	margin-bottom: 12px;
	text-align: left;
}

h4 {
	font-size: 30px;
	font-weight: bold;
	margin-top: 6px;
	margin-bottom: 0;
	text-align: left;
	color: #007AFF
}

h5 {
	font-size: 20px;
	font-weight: bold;
	margin-top: 6px;
	margin-bottom: 16px;
	text-align: left;
	color: #007AFF;
}

#iconbox {
	float: left;
}

#mainScreen {
	padding-top: 30px;
}

.iconimg {}

#results {
	margin-top:10px
}

#pagetitle {
	padding-left: 78px;
	padding-top: 1px;
	padding-bottom: 20px
}

.parastyle {
	padding-top: 24px
}

.shortparastyle {
	padding-top: 12px
}

.topic {
	pading-top:10px
}

.imgcenter {
   	display:block;
   	margin:0 auto;
   	text-align:center;
	padding-top: 2px;
	padding-bottom: 2px;
}

.ste {
   	text-align:left;
   	padding-left:4px;
   	width:10%;
}

.ste2 {
   	text-align:left;
   	padding-left:4px;
}

.centeredtable
{
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	border-collapse: collapse;
}

.centeredtable td,
.centeredtable tr {
	border: 1px solid black;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.tdc {
	text-align: center;
}

.tdcg {
	text-align: center;
	color: #007f00;
}

.centeredtable th {
	border: 1px solid black;
}

.thc {
	text-align: center;
}



.def {
	border-bottom: 1px dotted black;
	color: darkgreen;
	title: test
}

.char1 {
	font-size:120%
}

a {
	color: #3366CC;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #3366CC;
}

#rule {
	margin-left: 0px;
	margin-right: 5px;
}

hr {
	background-color: #ECECEC;
	background-repeat: repeat-x;
	height: 1px;
	width: 100%;
	border-top: 1px solid #CCCCCC;
	border-right-style: none;
	border-bottom: 1px solid #F5F5F5;
	border-left-style: none;
	margin-top: 15px;
	margin-bottom: 14px;
}

body {
  padding: 0px 30px;
}

.blueColour {
  color: #007AFF;
}

.brownColour {
  color: #A2845E;
}

.purpleColour {
  color: #AF51DE;
}

.darkGreenColour {
  color: darkGreen;
}

.redColour {
  color: red;
}

.greenColour {
  color: green;
}

.sidenavBlackColour {
  color: black;
}


span.nobr { white-space: nowrap; }

.sidenav {
	width: 185px;
	position: fixed;
	z-index: 1;
	top: 150px;
	left: 40px;
	background: #eee;
	overflow-x: hidden;
	padding: 8px 0;
}

.sidenav a {
	padding: 4px 8px 4px 16px;
	text-decoration: none;
	font-size: 18px;
	color: #2196F3;
	display: block;
}

.sidenav a:hover {
	color: #064579;
}

.navmain {
	clear: both;
	margin-top: 130px;
	margin-left: 270px;
	padding: 0px 10px;
	}

.toptop {
	width: 100%;
	top: 0px;
	position: fixed;
	height: 40px;
	overflow: hidden;
	background-color: white;
}

.fixtop {
	width: 100%;
	margin-bottom: 28px;
	top: 40px;
	position: fixed;
	height: 110px;
	overflow: hidden;
	background-color: white;
}

.topicx {
	padding-top: 8px
}

.boxed {
  border: 1px solid green ;
  text-align:center;
}

.ind0 {
	pading-top:5px
	margin-left: 24px
}

.ind1 {
	margin-left: 24px
}

.ind2 {
	margin-left: 48px
}



@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
  h1,
  h2,
  h4,
  h5 {
    color: #007AFF;
    background-color: #222;
  }
  .main-navigation .main-menu > li > a, a, a:visited {
	color: #33ABCC;
  }
  .centeredtable td,
  .centeredtable tr,
  .centeredtable th,
  .centeredtable {
  	border: 1px solid #999;
  }
  .centeredtable thead {
  	color: black;
  	border: 1px solid #999;
  }
  .blueColour {
    color: #007AFF;
  }
  .brownColour {
    color: #AC8E68;
  }
  .purpleColour {
    color: #BF5AF2;
  }
  .darkGreenColour {
    color: #33D74C;
  }
  .greenColour {
    color: #33D74C;
  }
  .redColour {
   color: #FF463A;
  }
  .def {
	border-bottom: 1px dotted #eee;
    color: #33D74C;
  }
  .fixtop {
	background-color: #222;
  }
  #iconbox {
	background-color: #222;
  }
  .toptop {
	background-color: #222;
  }
  .sidenav {
	background: #555;
  }
  .sidenav a:hover {
    color: black;
  }
  .sidenavBlackColour {
    color: #eee;
  }
  hr {
  	background-color: #222;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #222;
  }
}