/*
 * By: Audrey Ruelas, Guy Hadland and Bern Ruelas.
 * 
 * Updated: 3-April-2026.
 *
 * Copyright (c) 2002-2026 UniSoft Corporation.
 */


.clearfix {
	overflow: auto;
}

body {
	font-family: 'Open Sans', "Verdana", Arial, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
}


h1 {
	text-transform: uppercase;
	text-align:center;
	font-size:28px;
	line-height: 1em;
	margin: 1em 0;
	font-weight: 300;
}

h2 {
	font-size:21px;
	line-height: 1em;
	margin: 1em 0;
	color: #222;
	font-weight: 300;
}

h2.green {
	font-size:21px;
        line-height: 1em;
        margin: 1em 0;
        color: green;
        font-weight: 300;
}


h3 {
	font-size:18px;
	line-height: 1em;
	margin: 1em 0;
	font-weight: 300;
}


h4 {
	font-size:16px;
	font-weight: 400;
}

p {
	margin-bottom: 1em;
}

#inputText {
	font-family: "courier new";
	font-size: 16px;
	padding: 15px;
	display: block;
}

/* Link settings for pages and definitions(a.def) */
/*
.pageWrapper a {
	color: #614CF2;
	text-decoration: none;
}

.pageWrapper a:hover {
	color: #4838B2;
	text-decoration: none;
	border-bottom: 1px dotted #281F65;
}
*/

/* Added to Center Logo */

.pageWrapper {
	width: 90%;
	margin-top:	10px;
	margin-bottom:	1px;
	margin-left:	auto;
	margin-right:	auto;
	max-width:	940px;
	display:	block;
}

.site-header {
}

.site-header a:hover {
	border: none;
}

.site-header .site-description {
	text-align: center;
	font-size: 1.15em;
	text-transform: uppercase;
}


.clearBoth {
	clear: both;
}

.clearRight {
	clear: right;
}

.clearLeft {
	clear: left;
}

.footer {
	display: block;
	width: 900px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}


/*
 * 
 * 
 */

.mainpartoftext {
        width: 100%;
        margin-top: 10px;
        margin-left: 0%;
        margin-right: 0%;
        padding-top: 1px;
        /* display: block; */
}


.blue-box {
	padding: 15px 20px;
	overflow: hidden;
	background-color: #99ccff;
	box-shadow: 5px 5px 0px 0px #ddd;
}

.blue-box-usc {
        padding: 15px 20px;
        overflow: hidden;
        background-color: #99ccff;
}

.oneHalfBlueBox {
	width: 40%;
	float: left;
	margin-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 25px;
	/*background-color: #99ccff;*/
	overflow: hidden;
	background-color: #f9f9f9;
	box-shadow: 5px 5px 0px 0px #ddd;
}


.oneThirdBlueBox {
	width:			40%;
	float:			left;
	margin-top:		20px;
	padding-top:		0px;
	padding-right:		20px;
	padding-left:		20px;
	padding-bottom:		25px;
	overflow:		hidden;
	background-color:	#99ccff;
/*	box-shadow:		 5px 5px 0px 0px #ddd; */
}

/* Alternative of the above	*/

.oneThirdBlueBox2 {
	width:			 40%;
	float:			 right;
	margin-top:		 10px;
	padding-right:		 20px;
	padding-left:		 20px;
	padding-bottom:		 25px;
	overflow:		 hidden;
	background-color:	 #99ccff;
	/* box-shadow: 5px 5px 0px 0px #ddd; */
}

/* Second alternative of the above, hopefully transistional     */

.oneThirdBlueBox3 {
        width: 35%;
        float: right;
        margin-top: 20px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 25px;
        /*background-color: #99ccff;*/
        overflow: hidden;
        background-color: #99ccff;
        /* box-shadow: 5px 5px 0px 0px #ddd; */
}

.oneThirdBlueBox0 {
	width:			 40%;
	float:			 right;
	margin-top:		 0px;
	padding-right:		 20px;
	padding-left:		 20px;
	padding-bottom:		 25px;
	overflow:		 hidden;
	background-color:	 #99ccff;
	/* box-shadow: 5px 5px 0px 0px #ddd; */
}


.twoThirdColumn2 {
	margin-left:		0%;
	width:			55%;
	float:			left;
	margin-right:		1px;
	margin-left:		0px;
	padding-right:		1px;
	padding-left:		0px;
	padding-bottom:		1px;
	margin-bottom:		0px;
}

.oneThirdBlueBox2-ul {
        padding-left:   30px;
	background-color: #99ccff;
}


.fullWidthBlueBox {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 15px;
	/*background-color: #99ccff;*/
	overflow: hidden;
	background-color: #99ccff;
	box-shadow: 5px 5px 0px 0px #ddd;
}



/* Figure captions */
.figure {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	float: left;
}


/* Double lists */
.floatLeft {
	display: block;
	width: 40%;
	float:left;
	margin-left: 10%
}

.floatRight {
	display: block;
	width: 50%;
	float:Right;
}

/* Space out the ocap/monitor_app Open Cable, ocap/TSB-StatMux pic */
#picSpace {
	float: left;
	padding: 10px 15px 10px 0px;
}

/* Effect to enlarge pics */

.thumbnail {
	padding-right: 20px;
}

.thumbnail:hover {
	position:	relative;
	/*    top:-25px;
	left:-35px; */
	width:		800px;
	height:		auto;
	display:	block;
	z-index:	999;
}


/* Room for some images and logos */
#room img {
	margin-right: 15px;
	margin-bottom: 15px;
}

/* Address page */
.address {
	padding-left: 25%;
}

/* List style for support.html */
ul none {
	list-style-type: none;
}

/* Text alignments for Contact page */
#textRight {
	text-align: right;
}

#textCenter {
	text-align: center;
}

/* Form alignment for Contact page */
#centerForm {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
}

form input {
	height: 3em;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
 	border-radius: 7px;
}

textarea {
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}


/* red used for Glossary Letters */
.red {
	color: #F00;
}

a:link {
	color: #1515e3;
}

a:visited {
	color: #00c122;
}

a:hover {
	color: #0F0;
	text-decoration: none;
}

a:active {
	color: #408E2F;
}

/* Now define the definition links */

a.def:link {
	color: #E26969;
}

a.def:visited {
	color: #FF9999;
}

a.def:hover {
	color:			#721717;
	text-decoration:	none;
}

a.def:active {
	color: #721717;
}

/* Table for the date, right aligned.   */
.datetable {
        width: 940px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        text-align: right;
        border-width: 0px 0px 0px 0px;
        font-size: 12pt;
}

.otherh2 {
        font-size:21px;
        color: black;
        font-weight: 500;
}

.datasheeth2 {
        font-size:21px;
        color: #ff0000;
        font-weight: 500;
}


/* New stuff, grh, 27 October 2017 */

/* nav-wrapper effects the box in which all the header
 * menus and drop downs are place.
 */

.nav-wrapper {
        border:                 1px solid black;
        border-radius:          5px;
        background-color:       #f9f9fe;
        padding-top:            15px;
        padding-right:          2px;
        padding-bottom:         35px;
        padding-left:           16px;
        display:                block;
	z-index:		9;
	position:		relative;
}

a.nav-wrapper-a:link {
	color:		#282266;
}

a.nav-wrapper-a:visited {
        color:          #f82266;
}


.nav-whole {
	margin:			0;
	padding:		0;
	list-style:		none;
	padding-left:		0;
	z-index:		1;
}

.nav-ul {
	margin-left:    2px;
	padding-left:	0;
	display:        inline-block;
	width:		216px;
}


.nav-toplevel {
	float:			left;
	display:		block;
	background-color:	#f9f9fe;
	position:		relative;
	margin:			0 1px;
	list-style-type:	none;
	width:			100px;
}

.nav-level2 {
        float:                  none;
        display:                block;
        background-color:       #f9f9fe;
        position:               relative;
        margin:                 0 1px;
        margin-left:            2px;
        padding:                2px;
        list-style-type:        none;
}


.nav-level2:hover {
	background-color:	#ffffff;
}


a.ntop:link {
	color:		#282266;
}

a.ntop:visited {
        color:          #00c122;
}

a.nav-toplevel:link {color: #A93226;}

.dropdown {
	position:		relative;
	display:		inline-block;
}

.nav-items2 {
        display:                none;
        position:               absolute;
	z-index:		-1;
/* Need to move drop down to align with bottom of horizontal tab
 * if this value goes above 20 we loose the drop down!
 */
        top:                    35px;
        background-color:       #f9f9fe;
        min-width:              256px;
        padding-top:            4px;
        padding-left:           2px;
        padding-right:          2px;
        padding-bottom:         2px;
        margin-left:            0px;
        list-style-type:        none;
	border:			1px solid black;
	border-color:		#000000;
}


.dropdown:hover .dropdown-content .dropdown-content-js {
	display:	block;
	position:	absolute;
}


/* Three columns for the Home Page, using <p></p> as column
 * seperators.
 */

#threecol {
        column-count:   3;
        background-color:       #ffffff;
}

/* Outter wrapper for footer menu at the bottom of each page */

.footerWrapper2 {
        width:			940px;
	display:		block;
        background-color: 	#000000;
        background-position: 	center bottom;
        margin-left:		auto;
        margin-right:		auto;
        padding-bottom:		200px;
	padding-left:		0px;
	font-size:		14px;
}

/* Width of each column is set here (essentially).	*/
.footer-li {
	float:			left;
	list-style-type:	none;
	display:		block;
	min-width:		181px;
	background-color:	#000000;
	margin:			0 0px;
	padding:		2px;
	padding-left:		0;
}


/* Needed to reduce the padding usually used for the ul bullet points. */
.footer-ul {
	list-style-type:	none;
	padding:		12px;
	background-color:	#000000;
}

.footer-col-li {
        float:                  none;
        list-style-type:        none;
        display:		block;
	margin-left:		0px;
	padding:		0px;
        padding-left:		0;
	background-color:       #000000;
}

.footer-col-li a {
	color:	#00ffff;
}

.footer-col-li a:hover {
	background: #8080ff;
}

.copyright {
	float:		left;
	color:		red;
	text-align:	center;
	margin-top:	12px;
	width:		100%;
}

.img-with-text {
	text-align:	 center;

}

.twoColBlueTable {
	background-color:	#99ccff;
	text-align:		center;
}

.ulmarginleft ul li {
	margin-left:	20px;
	list-style-position: outside;
}

.tabad {
	background-color: #3374ff;
	width: 950px;
	height: 500px;
}


.tabtext2 {
        color: #fffc33;
        font-size: 15px;
}


.nav-div2 {
        float:                  left;
        display:                block;
        background-color:       #f0f9fe;
        position:               relative;
        margin:                 0 1px;
        list-style-type:        none;
        width:                  108px;
/*  was 100px;	*/
}

.nav-div2:hover {
        background-color:       #c0c8ff;
	display:		block;
}

.nav-div2-link {
        float:                  left;
        display:                block;
        background-color:       #f0f9fe;
        position:               relative;
        margin:                 0 1px;
        list-style-type:        none;
        width:                  108px;
}

.nav-topli {
        float:                  left;
        display:                block;
        background-color:       #f9f9fe;
        position:               relative;
        margin:                 0 1px;
        list-style-type:        none;
        width:                  256px;
}


.s {
        display:                none;
        position:               absolute;
        z-index:                -1;
        top:                    35px;
        background-color:       #f9f9fe;
        min-width:              216px;
        padding-top:            2px;
        padding-left:           2px;
        padding-right:          2px;
        padding-bottom:         2px;
        margin-left:            0px;
	border:                 1px solid #000000;
        list-style-type:        none;
}

.nav-toplevel2 {
        float:                  left;
        display:                inline;
        background-color:       #f9f9fe;
        position:               relative;
        margin:                 0 1px;
        list-style-type:        none;
        width:                  108px;
}

/* 202 needed for RH margin...
 */

.nav-ul2 {
	margin-top:    0px;
	margin-left:    2px;
	padding-left:	0;
	display:        inline-block;
	width:		216px;
	background-color: #f9f9fe;
	border:                 0px solid black;
        border-color:           #000000;
}

/* The width in outterdiv effects the spacing of the
 * top level menu items. Was 108.
 */

.outterdiv {
        float:                  left;
        display:                block;
        visibility:		visible;
	background-color:       #f9f9fe;
        position:               relative;
        margin:                 0 1px;
        list-style-type:        none;
        width:                  128px;
}

.LeftHalfColumn2 {
        width: 45%;
        float: left;
        margin-right: 15px;
        margin-left: 0px;
        padding-right: 10px;
        padding-left: 0px;
        padding-bottom: 5px;
}

.RightHalfColumn2 {
        width: 45%;
        margin-right: 15px;
        margin-left: 0px;
        padding-right: 10px;
        padding-left: 0px;
        padding-bottom: 5px;
        float: right
}



.event-wrapper {
        border:                 1px solid black;
        border-radius:          5px;
        background-color:       #00ff00;
        padding-top:            10px;
        padding-right:          2px;
        padding-bottom:         10px;
        padding-left:           16px;
        display:                block;
        z-index:                9;
        position:               relative;
	width:			920px;
	font-family:		Verdana, Geneva, sans-serif;
	font-size:		20px;
	color:			#000000;
}

.event-wrapper-links:hover {
        color:		#000000;
}

.event-wrapper-links:visited {
        color:          #0000ff;
}

.event-wrapper-links:active {
        color:          #0000ff;
}

.event-wrapper-links:link {
        color:          #0000ff;
}

.column {
	float: left;
	width: 31.00%;
	margin-right: 15px;
	margin-top: 0px;
}

.hdrcolside {
	float:			left;
	width:			300px;
	margin-right:		0px;
	margin-top:		0px;
	margin-left:		0px;
	margin-right:		0px;
	padding-right:		0px;
        padding-left:		0px;
}

.hdrcolcenter {
        float:                  left;
        width:                  330px;
        margin-right:           0px;
        margin-top:             0px;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}




/* changes the image size when the browser window is reduced
 */

img.scaled {
	width:	100%;
	height: auto;
}

.centerimg {
	display:       block;
	margin-left:   auto;
	margin-right:  auto;
	width:         30%;
}

.centerimg1 {
        display:       block;
        margin-left:   auto;
        margin-right:  auto;
	margin-top:    0px;
	margin-bottom: 0px;
        width:         970px;
	border-radius: 6px;
        padding: 0px 0px;
/*	background-color: white; */
	min-height:	140px;
}

.centerimghome {
        display:       block;
        margin-left:   auto;
        margin-right:  auto;
}

/* centerimgother - when it is in a table with defined widths.
 */

.centerimgother {
	display:	block;
	margin-left:	auto;
	margin-right:	auto;
	width:		80%;
}


img.black {
	background-color:	black;
	width:			50%;
}

br.half {
	line-height:	5px;
}

img.rightaligned {
	float:	right;
}

img.leftaligned {
        float:  left;
}

img.leftlogo {
        float:  left;
	border-top-width: 0px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-style: solid;
	background: black;
}

.bigtext {
        text-transform: uppercase;
        text-align:left;
        font-size: 28px;
        line-height: 1em;
        margin: 1em 0;
        font-weight: 300;
	color: #ff0000;
}

/* New coloured links which override out defaults above.
 *
 */

a.bluelinks:link    { color:	  #3333ff;		} 
a.bluelinks:visited { color:	  #9b59b6;		}
a.bluelinks:hover   { background-color: #a9dfbf;	}
a.bluelinks:active  { color:      #a9dfbf;		}

/* New stuff for hover boxes
 */

.hbox {
	position: relative;
	display: inline;
/*	background-color: #a9dfbf;	*/
	background-color: white;
	text-decoration-line: underline;
	font-weight: bold;
}

.hbox .hboxtext {
	display: none;
	width: 290px;
	background-color: white;
	color: #000000;
	text-align: left;
	border-radius: 6px;
	padding: 5px 5px;
	font-weight: normal;

	/* Position the hbox */
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 50%;
	margin-left: -70px;

	border-style: solid;
	border-width: 1px;
}

.hbox:hover .hboxtext {
	display: block;
}

/* Another box, orginally for the AAIS-Video.html page	*/

.altBlueBox {
        width: 27%;
        float: right;
        margin-top: 0px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 15px;
        overflow: hidden;
        background-color: #99ccff;
}

.big_green {
	font-size:	33px;
	color:		green;
}

.big_red {
	font-size:	33px;
	color:		red;
}

.big_blue {
	font-size:	33px;
	color:		blue;
}

.big_news {
	font-size:		24px;
	color:			white;
	font-family: "Impact", fantasy;
}

/* Classes for images on home page	*/

.container {
	position: relative;
	padding: 0px 0px;
}

.centered {
	color:		white;
	font-size:	21px;
	text-align:	right;
	position:	absolute;
	top:		50%;
	left:		50%;
	transform: translate(-50%, -50%);
/*	background-color: #ffff00; */
}

.centered a:link {
	color: white;
}

.container2 {
	position: relative;
	color: white;
	width: 310px;
	padding: 0px 0px 0px 0px;
	margin:: 0px 0px 0px 0px;
	text-align: right;
}


.littletitle {
	background-color:	#ccffcc;
}

a.righthometext:link {
	color: white;
	font-weight: bold;
}

a.righthometext:visited {
        color: #ffe6ff;
}

a.righthometext:hover   {
	background-color: #a9dfbf;
}

a.righthometext::active  {
	color:      #ffffff;
}

.screenshot {
	width:		100%;
	height:		auto;
}

/* hdrtable - not the home page. Decided to do this differently
 * as easier to adjust column widths.
 */

.hdrtable {
	width: 			100%;
	background-color:	#cce6ff;
}


.hdrbigtext {
        text-align:	center;
        font-size:	28px;
        line-height:	33px;
        font-weight:	300;
	color:		blue;
}