﻿html {
	-webkit-text-size-adjust: none;
}

/* General Classes */
.clear {
	clear: both
}

body {
	margin: 0;
	/* code from existing code */
	background-color: white;
	color: #13489F;
}

#mainmenuwrap {
	padding: 7px;
}

#mainmenu {
	overflow: auto;
	background: #002269;
	width: 155px;
	height: 100%;
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	font-family: "Segoe UI", "San Francisco", "Droid Sans", sans-serif;
}

#mainmenu .gray-txt {
	color: #aaa;
}

#mainmenu a {}

#mainmenu a img {
	border: 0px none;
	margin-left: 0px;
	margin-right: 0;
	margin-top: 15px;
	margin-bottom: 10px
}

#mainmenu ul {
	padding: 0;
	font-weight: bold;
	text-align: left;
	list-style: none;
	margin: 0;
}

#mainmenu ul ul {
	margin-bottom: 15px;
	padding: 0;
}

#mainmenu li a,
#mainmenu li a:active,
#mainmenu li a:visited {
	color: #FFF;
	text-decoration: none;
	font-weight: normal;
}

#mainmenu li a:hover {
	color: #aaa;
}

#content {
	margin-left: 155px;
	/* set to what you want */
	padding: 10px
}

body,
td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #13489F;
}

div.index {
	margin: 5px;
}

p {
	text-align: justify;
}

.h1-norm-font {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 0.85em;
	color: #13489F;
}

.h2-norm-font {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #13489F;
}

.th-norm-font {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #13489F;
}

/* Text Colors */

.grn-txt {
	color: green;
}

.dblu-txt {
	color: #3366CC;
}

.red-txt {
	color: red;
}

.blue-txt {
	color: blue;
}

.gray-txt {
	color: gray;
}

.blk-txt {
	color: black;
}

.dgrn-txt {
	color: #008000;
}

.prpl-txt {
	color: #EE82EE;
}

.dkprpl-txt {
	color: #FF00FF;
}

.dblu-txt {
	color: #3366CC;
}

.red-txt {
	color: red;
}

.gray-txt {
	color: gray;
}

.brwn-txt {
	color: #996633;
}

.wht-txt-on-red {
	color: white;
	background-color: red;
}

.nvy-txt-on-yllw {
	background-color: yellow;
}

.wht-txt-on-mid-blue {
	color: white;
	background-color: #3366CC;
}

.wht-txt-on-dgrn {
	color: white;
	background-color: #008000;
}

.wht-txt-on-dkprpl {
	color: white;
	background-color: #800080;
}

.nvy-txt-on-orng {
	background-color: #FFCC00;
}

.nvy-txt-on-yllw {
	background-color: #FFFF33;
}

.nvy-txt-on-ambr {
	background-color: #FFCC66;
}

.nvy-txt-on-blu {
	background-color: #6666FF;
}

.wht-txt-on-blu {
	background-color: #6666FF;
	color: white;
}

.nvy-txt-on-grn {
	background-color: #66FF00;
}

.wht-txt-on-grn {
	background-color: #66FF00;
	color: white;
}

.orng-txt {
	color: #FF9900;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.m-btm-0 {
	margin-bottom: 0;
}

.m-btm-5 {
	margin-bottom: 5px;
}

.m-btm-10 {
	margin-bottom: 10px;
}

.m-btm-20 {
	margin-bottom: 20px;
}

.width-1 {
	width: 1%;
}

.width-2 {
	width: 2%;
}

.width-3 {
	width: 3%;
}

.width-4 {
	width: 4%;
}

.width-5 {
	width: 5%;
}

.width-6 {
	width: 6%;
}

.width-7 {
	width: 7%;
}

.width-8 {
	width: 8%;
}

.width-9 {
	width: 9%;
}

.width-10 {
	width: 10%;
}

.width-11 {
	width: 11%;
}

.width-12 {
	width: 12%;
}

.width-13 {
	width: 13%;
}

.width-14 {
	width: 14%;
}

.width-15 {
	width: 15%;
}

.width-16 {
	width: 16%;
}

.width-17 {
	width: 17%;
}

.width-19 {
	width: 19%;
}

.width-20 {
	width: 20%;
}

.width-21 {
	width: 21%;
}

.width-22 {
	width: 22%;
}

.width-25 {
	width: 25%;
}

.width-28 {
	width: 28%;
}

.width-30 {
	width: 30%;
}

.width-32 {
	width: 32%;
}

.width-33 {
	width: 33%;
}

.width-34 {
	width: 34%;
}

.width-35 {
	width: 35%;
}

.width-36 {
	width: 36%;
}

.width-37 {
	width: 37%;
}

.width-38 {
	width: 38%;
}

.width-40 {
	width: 40%;
}

.width-42 {
	width: 42%;
}

.width-43 {
	width: 43%;
}

.width-44 {
	width: 44%;
}

.width-45 {
	width: 45%;
}

.width-47 {
	width: 47%;
}

.width-48 {
	width: 48%;
}

.width-49 {
	width: 49%;
}

.width-50 {
	width: 50%;
}

.width-55 {
	width: 55%;
}

.width-57 {
	width: 57%;
}

.width-60 {
	width: 60%;
}

.width-63 {
	width: 63%;
}

.width-64 {
	width: 64%;
}

.width-65 {
	width: 65%;
}

.width-66 {
	width: 66%;
}

.width-67 {
	width: 67%;
}

.width-68 {
	width: 68%;
}

.width-70 {
	width: 70%;
}

.width-72 {
	width: 72%;
}

.width-75 {
	width: 75%;
}

.width-80 {
	width: 80%;
}

.width-83 {
	width: 83%;
}

.width-84 {
	width: 84%;
}

.width-85 {
	width: 85%;
}

.width-88 {
	width: 88%;
}

.width-90 {
	width: 90%;
}

.width-92 {
	width: 92%;
}

.width-95 {
	width: 95%;
}

.width-97 {
	width: 97%;
}

.width-100 {
	width: 100%;
}

/*.textAlignCenter*/
.centered-txt {
	text-align: center;
}

.h1-norm-font {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 0.85em;
	color: #13489F;
}

.h2-norm-font {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #13489F;
}

.th-norm-font {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #13489F;
}

.numericList {
	list-style-type: decimal;
}

.alphaList {
	list-style-type: lower-alpha;
}

.upper-alphaList {
	list-style-type: upper-alpha;
}

.roman-numericList {
	list-style-type: lower-roman;
}

.noParentText {
	display: inline-block;
	padding-top: 0;
	vertical-align: top;
}

.image {
	text-align: center;
	padding: 10px;
	vertical-align: middle;
}

body,
td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #13489F;
}

div.index {
	margin: 5px;
}

p {
	text-align: justify;
}

ul,
ol {
	text-align: justify;
	/*margin: 0 0 10px 0; amended to increase space after bullets followed by hr, but had other issues*/
	margin: 0 0 0 0;
	padding: 0 0 0 30px;
}

p+ol,
p+ul {
	margin-top: -8px;
}

a:visited {
	color: blue;
	text-decoration: underline;
}

a:hover {
	/*
	font-weight: bold;
*/
	color: gray;
	text-decoration: underline;
}

/* Content */
h1 {
	color: #13489F;
	font-size: 1.2em;
	font-weight: bold;
}

h2 {
	color: #13489F;
	font-size: 1em;
	font-weight: bold;
}

h3 {
	color: #13489F;
	font-size: 2em;
	font-weight: bold;
}

h4 {
	color: #13489F;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}

hd {
	color: #13489F;
	font-size: 1em;
	font-weight: bold;
	text-align: top;
}

p.back-to-top a:link,
p.back-to-top a:active,
p.back-to-top a:visited {
	font-size: 0.85em;
	color: #808080;
}

p.back-to-top a:hover {
	font-size: 0.85em;
	color: #FF0000;
}

table {
	border-collapse: collapse;
	color: #13489F;
	font-size: 1em;
}

th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	color: #6666FF;
	padding: 5px;
}

td {
	text-align: left;
	text-align: top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #13489F;
}

/* Plain Table */

table.plain {
	border: 0;
}

table.plain td,
th {
	text-align: left;
	vertical-align: top;
	padding-bottom: 2px;
	padding-top: 2px;
}

table.plain ol {
	margin-left: 2.2em;
	margin-top: 0em;
	margin-bottom: 0em;
}

table.plain li {
	margin-top: 0em;
	margin-bottom: 0em;
}

table.plain li.m-btm-0 {
	margin-bottom: 0em;
}

table.plain li.m-btm-5 {
	margin-bottom: 0.5em;
}

table.plain ul {
	margin-left: 1.8em;
	margin-top: 0em;
	margin-bottom: 0em;
}

table.plain ul li {
	margin-top: 0em;
	margin-bottom: 0em;
}

/* Contents Table */

table.contents {
	border: 0;
}

table.contents td,
th {
	text-align: left;
	vertical-align: top;
	padding: 5px;
}

table.contents td a {
	color: #13489F;
}

table.contents td a:hover {
	color: #002269;
}

.nonTitle {
	width: 17px;
	height: 17px;
}

.title {
	height: 17px;
}

.separator {
	width: 17px;
	height: 17px;
}

/* Standard Table */

table.standard {
	border: solid #000080 1px;
	background-color: #FCFDD0;
	border-collapse: collapse;
	width: 100%;
	padding: 0.4em;
}

table.standard th {
	border: solid #000080 1px;
	text-align: center;
	vertical-align: middle;
	color: #13489F;
	font-size: 1em;
	padding: 5px;
	/*font-size: 0.8em*/
}

table.standard td {
	text-align: left;
	vertical-align: top;
	padding: 5px;
	border: solid #000080 1px;
}

table.standard td.power {
	text-align: left;
	vertical-align: top;
}

table.standard ol {
	/*margin-left: 2.2em;
	margin-top: 0em;
	margin-bottom: 0em;*/
	margin: 0;
	padding: 0 0 0 30px;
}

table.standard li {
	margin-top: 0em;
	margin-bottom: 0em;
}

table.standard li.m-btm-0 {
	margin-bottom: 0em;
}

table.standard li.m-btm-5 {
	margin-bottom: 0.5em;
}

table.standard ul {
	/*margin-left: 1.8em;
	margin-top: 0em;
	margin-bottom: 0em;*/
	margin: 0;
	padding: 0 0 0 30px;
}

table.standard ul li {
	margin-top: 0em;
	margin-bottom: 0em;
}

table.cccjscodes {}

table.cccjscodes.td {
	text-align: left;
	vertical-align: top;
}

.cccjsCenterCol {
	padding: 2px 4px;
}

table.minorp2p {
	border: solid #000080 1px;
	background-color: #DBFBFA;
	border-collapse: collapse;
	width: 100%;
	padding: 0.4em;
}

table.minorp2p th {
	border: solid #000080 1px;
	text-align: left;
	vertical-align: top;
	color: #13489F;
	font-size: 1em;
	padding: 5px;
	/*font-size: 0.8em*/
}

table.minorp2p th.offence {
	width: 100%;
}

table.minorp2p td {
	border: solid #000080 1px;
	text-align: left;
	vertical-align: top;
	padding: 5px;
}

table.minorp2p td.cccjscode {
	width: 75%;
}

table.minorp2p th.leftColumns {
	width: 17%;
}

table.minorp2p td.rightColumns {
	width: 83%;
}

table.minorp2p td.timelimit {
	width: 25%;
}

table.transparent {
	border: solid #000080 1px;
	background-color: #FFFFFF;
	border-collapse: collapse;
	width: 100%;
	padding: 0.4em;
	color: #13489F;
	font-size: 1em;
	/*font-size: 0.8em*/
}

table.transparent th {
	border: solid #000080 1px;
	text-align: center;
	vertical-align: top;
	padding: 5px;
}

table.transparent td {
	border: solid #000080 1px;
	text-align: left;
	vertical-align: top;
	padding: 5px;
}

table.codg td {
	text-align: left;
	vertical-align: top;
	padding: 5px;
}

table.pct {
	width: 100%;
	border: solid #13489F 1px;
	background-color: #FFFFFF;
	border-collapse: collapse;
	padding: 0.4em;
	font-size: 1em;
}

table.pct th {
	font-size: 1em;
	border: solid #13489F 1px;
	text-align: center;
	vertical-align: top;
	color: #13489F;
	padding: 5px;
}

table.pct td {
	border: solid #13489F 1px;
	text-align: center;
	vertical-align: top;
	color: #13489F;
	padding: 5px;
}

table.brightBlue {
	width: 100%;
	border: solid #13489F 1px;
	background-color: #FFFFFF;
	border-collapse: collapse;
	padding: 0.4em;
	font-size: 1em;
}

table.brightBlue th {
	border: solid #13489F 1px;
	text-align: center;
	vertical-align: top;
	color: #13489F;
	padding: 5px;
}

table.brightBlue td {
	border: solid #13489F 1px;
	text-align: left;
	vertical-align: top;
	color: #13489F;
	padding: 5px;
}

/* Table 2 CCCJS Codes No Border 

table.cccjs
{
	border: 0;
	border-collapse: collapse;
}

table.cccjs td
{
	text-align: right;
	vertical-align: top;
}

/* Table 2 Column List No Border 

table.2col
{
	border: 0;
	border-collapse: collapse;
	width: 100%
}

table.2col td
{
	text-align: left;
	vertical-align: top;
	width: 50%;
}

table.2col ul
{
	list-style-type: disc;
	margin-left: 1.5em;
	margin-top: 0em;
	margin-bottom: 0em;
}

/* Two Column Information Tables */

table.2colinfo {
	border: solid #00008B 1px;
	border-collapse: collapse;
	background-color: #99CCFF;
	width: 100%
}

table.2colinfo th {
	border: solid #99CCFF 1px;
	font-weight: normal;
}

table.2colinfo td {
	border: solid #99CCFF 1px;
	text-align: left;
	vertical-align: top;
	width: 40%;
}

table.2colinfo ul {
	list-style-type: disc;
	margin-left: 1.5em;
	margin-top: 0em;
	margin-bottom: 0em;
}

table.2colinfo ul li {
	margin-top: 0em;
	margin-bottom: 0em;
}

/* Gravity Factor Tables */
table.gf {
	border: solid #99CCFF 1px;
	border-collapse: collapse;
	width: 100%
}

table.gf th {
	border: solid #99CCFF 1px;
	background-color: #99CCFF;
	font-weight: normal;
	padding: 5px;
}

table.gf td {
	border: solid #99CCFF 1px;
	vertical-align: top;
	padding: 5px;
}

table.gf td.center {
	text-align: center;
	vertical-align: middle;
}

table.gf .heading20 {
	text-align: center;
	width: 20%;
}

table.gf .heading40 {
	text-align: center;
	width: 40%;
}

table.gf .text20 {
	text-align: center;
	width: 20%;
}

table.gf .text40 {
	text-align: left;
	width: 40%;
}

table.gf ul {
	/*list-style-type: disc;
	margin-left: 1.5em;
	margin-top: 0em;
	margin-bottom: 0em;*/
	text-align: justify;
	margin: 0;
	padding: 0 0 0 30px;
}

table.gf ul li {
	margin-top: 0em;
	margin-bottom: 0em;
}

table.gf-4col {
	border: solid #99CCFF 1px;
	border-collapse: collapse;
	width: 100%
}

table.gf-4col th {
	border: solid #99CCFF 1px;
	background-color: #99CCFF;
	font-weight: normal;
	padding: 5px;
}

table.gf-4col td {
	border: solid #99CCFF 1px;
	text-align: left;
	vertical-align: top;
	padding: 5px;
}

table.gf-4col td.center {
	text-align: center;
	vertical-align: middle;
}

table.gf-4col .heading20 {
	text-align: center;
	width: 20%;
}

table.gf-4col .heading25 {
	text-align: center;
	width: 25%;
}

table.gf-4col .heading30 {
	width: 30%;
}

table.gf-4col .text20 {
	text-align: center;
	width: 20%;
}

table.gf-4col .text25 {
	text-align: left;
	width: 25%;
}

table.gf-4col .text30 {
	text-align: left;
	width: 30%;
}

table.gf-4col ul {
	/*list-style-type: disc;
	margin-left: 1.5em;
	margin-top: 0em;
	margin-bottom: 0em;*/
	text-align: justify;
	margin: 0;
	padding: 0 0 0 30px;
}

table.gf-4col ul li {
	margin-top: 0em;
	margin-bottom: 0em;
}

table.index {
	border: solid #000080 1px;
	background-color: #FCFDD0;
	border-collapse: collapse;
}

table.index td {
	text-align: center;
	vertical-align: middle;
	color: #000080;
	font-size: 1em;
	padding: 5px;
}

table.red-table {
	width: 100%;
	border: solid #FF0000 1px;
	background-color: #FFFFFF;
	border-collapse: collapse;
}

table.red-table td {
	width: 25%;
	text-align: center;
	color: #FF0000;
	padding: 5px;
	border: solid #FF0000 1px;
}

/* Points & Prove */
ol.p2p li {
	margin: 1em;
}

ol.p2p li ul {
	margin-left: 0;
	margin-top: 0;
}

div.cccjs-codes {
	float: left;
	margin-right: 1em;
}

div.cccjs-codes p {
	margin: 0.5em 0 0.5em 0;
}

hr.SectionDivide {
	height: 1px;
	color: darkblue;
	background-color: darkblue;
	border-width: 0;
	margin: 0;
	padding: 0;
	line-height: 1px;
}

/* back to top button */

#scrollToTop {
	position: fixed;
	top: 40px;
	right: 20px;
}

.fadeTransition {
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.hidden {
	opacity: 0;
	z-index: -999;
}

.visible {
	opacity: 1;
	z-index: 999;
}

.round-button {
	width: 40px;
}

.round-button-circle {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: 50%;
	border: solid 1px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 3px gray;
	text-decoration: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.round-button-circle:hover {
	background-color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.round-button a {
	display: block;
	float: left;
	width: 100%;
	padding-top: 50%;
	padding-bottom: 50%;
	line-height: 0.7em;
	margin-top: -0.5em;
	text-align: center;
	color: rgba(0, 0, 0, 0.45) !important;
	font-size: 1.8em;
	text-decoration: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.round-button a:hover {
	background: rgba(0, 0, 0, 0.1);
	color: #000 !important;
}

/*.back-to-top{ display: none;}*/

/* mobile */
#topmenu {
	display: none;
}

#mobileonlytable {
	display: none;
}

/* end mobile */

.forces {
	display: none;
}


/* new list styles */

ul.cl {
	list-style: none;
	list-style-position: outside;
}


ul.cl>li:before {
	vertical-align: middle;
	font-size: 0.5rem;
	margin-right: 0.4rem;
	display: inline-block;
	padding: 0;
	margin-left: -0.9rem;
}

.a-r-b>li:before {
	/* arrow right black */
	content: "\25B2";
	transform: rotate(90deg);
	margin-top: -1px;
}

.a-r-w>li:before {
	/* arrow right outline */
	content: "\25B3";
	transform: rotate(90deg);
	margin-top: -1px;
}

.d-b>li:before {
	/* diamond black */
	content: "\25C6";
	margin-top: -2px;
}

.d-w>li:before {
	/* diamond outline */
	content: "\25C7";
	margin-top: -2px;
}

.s-b>li:before {
	/* square black */
	content: "\25A0";
	margin-top: -2px;
}

.s-w>li:before {
	/* square outline */
	content: "\25A1";
	margin-top: -2px;
}

/* page versions */

.versions {
	position: fixed;
	top: 5px;
}



@media only screen and (min-width : 667px) {


	.versions {
		right: 5px;
		background-color: #000080;
		background: #000080ab;
		padding: 5px 10px;
		border-radius: 6px;
		width: 16vw;
	}

	.versions label {
		margin: 0 5px 5px 0;
		color: #fff;
		display: block;
	}

	.version-enabled h1 {
		margin-right: 18vw;
		margin-top: 0.5em;
	}
}

.versions select {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

.versions select::-ms-expand {
	display: none;
}

.versions select:hover {
	border-color: #888;
}

.versions select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}

.versions select option {
	font-weight: normal;
}

.version-enabled {}

.version-enabled #content {
	padding-top: 2em;
}

.version-enabled #scrollToTop {
	top: 7em;
}

.version-enabled [data-version] {
	display: none;
}

.version-enabled [data-version].active {
	display: unset;
	-webkit-animation: yellow-fade 1.5s ease-in 1;
	animation: yellow-fade 1.5s ease-in 1;
}

.version-enabled span[data-version].active {
	display: inline;
}

@media only screen and (min-width : 1224px) {
	.versions select {
		font-size: 13px;
	}

	.version-enabled #content {
		margin-top: 1em;
	}
}

@media only screen and (max-width : 667px),
only screen and (min-width : 375px) and (max-width : 667px) and (orientation : landscape),
only screen and (min-width : 375px) and (max-width : 667px) and (orientation : portrait) {
	.versions {
		right: 1.5%;
		background: none;
		padding: 0px;
		border-radius: 6px;
		width: 97%;
	}

	.versions label {
		display: none;
	}

	.version-enabled h1 {
		margin-top: 2.6em;
	}
}

@-webkit-keyframes yellow-fade {
	0% {
		background: #ffff3375;
	}

	100% {
		background: none;
	}
}

@keyframes yellow-fade {
	0% {
		background: #ffff3375;
	}

	100% {
		background: none;
	}
}