/*
 * 'td' and 'th' have to be added here to make the font-family 'take'
 * in Navigator 4.x 
 */
body, p, td, th {
	font-family: sans-serif;
	color: inherit;
	background-color: white;
}

body {
	color: black;
	background-position: top left;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-image: url(/img/livery/orion/side.jpg);
	/* 
         * Add extra padding for IE6 bug - it won't scroll all
	 * the way to the bottom!
         */
	padding-bottom: 10ex;
}


h1,h2,h3 {
	color: #404080;
	background-color: transparent;
	font-weight: bold;
}

h1, .h1 {
	font-size: 2.33em;
}

h2 {
	font-size: 1.66em;
}

h3 {
	font-size: 1.33em;
	font-style: italic;
}


/* 
 * Amazingly, the W3C CSS validator says that this is wrong, but it
 *  conforms to the published grammar:
 * 
img {
	border: 0px none transparent;
}
*/

/*
 * Cover all bases!
 */
img {
	border-style: none;
	border-width: 0px;
	border-color: transparent;
}

/*
 * The black bar at the top with the cutouts for the docking
 * menus
 */
#topTrim {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

/*
 * An invisible square over the logo that lets you click on the logo
 * to get to the home page. Thanks to Barry for this
 * suggestion. 
 *
 * IE4/5/6 doesn't recognise 'fixed' even though it's in CSS2. A
 * script workaround is implemented. For IE4, 'position' has to be set
 * to 'absolute', because it doesn't allow the logoTrap to be moved
 * under script control otherwise. Other browsers (Mozilla, Opera)
 * correctly respect 'fixed'. Luckily, IE4 ignores 'fixed' and keeps
 * 'absolute' if we set them in the order below, whilst better browsers
 * respect the last setting. This comes at the expense of a warning
 * from the CSS validator, but it's not an error, so we'll live with
 * it for IE4 compatibility. NS4 is a long story with a happy ending! 
 */
#logoTrap {
	position: absolute;
}
#logoTrap {
	top: 9px;
	left: 8px;
	width: 47px;
	height: 44px;
	z-index: 5;
	cursor: pointer;
	color: white;
	background-color: transparent;
	position: fixed;
}

#logoTrap img {
	padding: 0px;
	margin: 0px;
	cursor: pointer;
}


/*
 * The menu 'trays' that slide out from their docking positions in the
 * topTrim, collectively.
 */
div.menu {
	position: absolute;
	top: -100px;
	z-index: 1;
	width: 102px;
	padding: 0px;
	margin: 0px;
	background-position: top left;
	background-repeat: no-repeat;
	font-family: sans-serif;
	color: white;
	background-color: transparent;
	font-size: 11px;
}

/* 
 * The navigation bar showing the current page and its antecedent pages
 * in the site hierarchy; shown just below the topTrim.
 */
div.navbar {
	font-size: 11px;
	font-weight: bold;
	margin-left: 100px;
}

/*
 * The menu "hot spots" (little triangles) that are only used in
 * Navigator 4.x. These little squares are positioned over the
 * triangles on a 'high' layer to allow clicks to be trapped.
 */
div.menuhs {
	position: absolute;
	z-index: 4;
	width: 16px;
	height: 16px;
	padding: 0px;
	margin: 0px;
}

/*
 * Each of the menus. Positions in Navigator are set in JavaScript
 * since it doesn't get absolute postioning right.
 */
#menu1 {
	left: 345px;
	height: 94px;
	background-image: url(/img/livery/orion/consg.png);
}

#menu2 {
	left: 458px;
	background-image: url(/img/livery/orion/devel.png);
	height: 111px;
}

#menu3 {
	left: 572px;
	height: 111px;
	background-image: url(/img/livery/orion/about.png);
}

/*
 * The paragraph within the menu trays.
 */
div.menu p {
	background: transparent;
	margin: 7px 0px 0px 10px;
	padding: 0px;
}

/*
 * It's necessary to make the list style in the trays the default for
 * the page. Otherwise, some browsers (IE6) insist on putting bullets
 * in the trays, which is horrid.
 */
ul {
	line-height: 13px;
	list-style-type: none;
	color: gray;
	background-color: transparent;
	margin: 0px 0px 0px 15px;
	padding: 0px;
}

li {
	margin: 0px;
	padding: 0px;
}

/*
 * Colors for the links in the menu trays.
 */
div.menu a {
	color: white;
	background-color: transparent;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

div.menu a:visited {
	font-weight: normal;
}

div.menu a:hover {
	color: #80a0ff;
	background-color: transparent;
	font-weight: bold;
	font-style: italic;
}

/* 
 * The div with all the content for the page.
 */
#content {
	padding-top: 100px; /* IE5 doesn't like "margin-top" here */
	margin-left: 100px;
	width: 580px;
	font-size: medium;
}

/*
 * Make lists in the content look nice. The default list style is that
 * for the menu trays, which is not suitable for the content, of course.
 */
#content ul,
#content ol {
	font-size: medium;
	color: black;
	background-color: transparent;
	margin-left: 1em;
	list-style-position: outside;
	line-height: 130%;
}

#content ul {
	list-style-type: disc;
}


/*
 * Classes for company names, terminology, technical terms and
 * programming languages.
 */
.coname, .tech, .term, .plang {
	font-style: italic;
}


/*
 * For protocols, like FTP, HTTP, etc.
 */
.proto {
	font-family: courier, monospace;
}


/*
 * For the client list table on the clients page.
 */
#clientlist {
	border-spacing: 0px;
}

#clientlist td {
	border-top: 1px solid gray;
	padding: 1ex 1em 1ex 2em;
}

#clientlist th {
	text-align: right;
	padding: 1ex 1em 1ex 1em;
	border-top: 1px solid gray;
}


/*
 * The boilerplate at the bottom of every page
 */
#bottom {
	font-size: 8pt;
	width: 580px;
	border-top: 1px solid black;
	margin-top: 50px;
	padding-top: 10px;
	margin-left: 100px;
}

#bottom p {
	font-size: inherit;
	color: #808080;
	background-color: transparent;
	padding: 0px;
	margin: 5px 0px 3px 0px;
}

#bottom a {
	text-decoration: none;
	color: #8080ff;
	background-color: transparent;
}


/*
 * Very prominent disclaimer stuff at the bottom of the development
 * page
 */
p.clarification {
	font-size: 8pt;
	text-align: justify;
	font-weight: bold;
	color: red;
	background-color: transparent;
	border: 2px solid black;
	padding: 10px;
}


/*
 * Disclaimer link in the boilerplate
 */
.disclaimer {
	color: red;
	background-color: transparent;
	font-size: inherit;
	font-weight: bold;
	text-decoration: none;
}


/*
 * Many of the lists on the site are important
 */
ul.nb li {
	font-weight: bold;
	margin-left: 2em;
}


/*
 * Quotes used in the client testimonials page. A little mixed up from
 * two ways of doing it, but works everywhere.
 */
p.quote {
	margin-left: 3em;
	margin-right: 3em;
	font-style: italic;
	text-align: justify;
}

.quote {
	padding: 0px 3em 0px 3em;
}

.quote p {
	text-align: justify;
	font-style: italic;
}


/*
 * Citation and reference used on the development page
 */
p.citation {
	font-size: smaller;
}

p.citation a.ident {
	font-weight: bold;
	margin-right: 1em;
}

p.attribution {
	text-align: right;
	font-style: normal;
}



/*
 * Styles for the Conway's Game of Life applet
 */
table.grid {
	color: gray;
	background-color: #f7f7ff;
	border-spacing: 1px;
}

#cgol {
	text-align: center;
	width: 100%;
	padding-bottom: 2ex;
}

table.grid td {
	color: #f7f7f7;
	background-color: #ffffff;
	width: 15px;
	height: 15px;
	font-size: 6px;
	text-align: right;
	vertical-align: bottom;
}

.gridControl {
	padding-top: 0px;
	margin-top: 0px;
	font-size: x-small;
}

.noGrid {
	color: #a0a0a0;
	background-color: transparent;
	text-align: center;
	padding-top: 0px;
	margin-top: 0px;
	font-size: x-small;
}

#bottom .livery {
	padding: 0px 0px 0.1ex 2em;
	margin: 0px 0px 0px 0px;
}

div#notice {
    color: #f00;
    font-weight: bold;
    font-size: large;
    text-align: center;
}