/* Import a couple of hacks for IE5 only (leaving them in this stylsheet makes
 it invalid).  The comments hide from all browsers but IE-Mac. */
/*\*//*/
  @import "shared-ie-mac.css";
/**/


/* For all browsers */
body, div, p, th, td, li, dd, code, tt, h3 {
	font-size: small;
}

/* For IE only */
* html body, * html div, * html p, * html th, * html td, * html li, * html dd, * html code, * html tt, * html h3 {
	font-size: x-small;
	f\ont-size: small; /* For IE 6 only (cos of escape) */
}

body {
	margin: 0;
	padding: 0; /* Opera needs this */
	background-color: #fff;
	color: #000;
}

p {
	line-height: 150%;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	text-align: left;
}

h1 {
	font-family: Arial, sans-serif;
	font-size: 150%;
	color: #000;
	font-style: italic;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	text-align: left;
	padding-right: 21px;
	background-image: url(mini-palm-tree.gif);
	background-repeat: no-repeat;
	background-position: 100% 50%;
	min-height: 20px;
	margin-bottom: 0.5em;
}

/* min-height works on IE7 so it doesn't need this. */
* html h1 {
	height: 21px;
}

h2 {
	font-family: Arial, sans-serif;
	font-size: 125%;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	text-align: left;
}

h3 {
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #000;
	margin-top: 1.4em;
	margin-bottom: 0.6em;
}

/* For in normal text - need to override these settings for menu */
ul, ol {
	line-height: 150%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 2em;
	padding-left: 0; /* Brings Firefox and IE into line */
	text-align: left;
}

/* As for ul, ol */
ul li, ol li {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	list-style-position: outside;
}

/* Not ideal, but an ul of class compact gets bullet lists looking reasonable
 next to a float: left image. */
ul.compact, ol.compact {
	margin-left: 0;
}

ul.compact li, ol.compact li {
	list-style-position: inside;
	margin-left: 1em;
}

/* Justification is not good when there's little text in a cramped space. */
ul.shortitems, ol.shortitems {
	text-align: left;
}

a {
	text-decoration: underline;
	color: #002db3;
}

/* Don't include links around images */
p a:hover, li a:hover, h2 a:hover {
	background-color: #ffff00;
}

a:visited {
	color: #800080;
}

img {
	border: none;
}

img.img-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.9em;
	margin-bottom: 0.9em;
	clear: both;
}

* html img.img-center {
	text-align: center;
	/* A p following an img-center in IE 5 and 6 causes the paragraph to jump up a 
	 * bit when you mouseover a link.  This happens when the margin-bottom on the
	 * img is bigger than the margin-top on the p.  Fix this by setting the
	 * img margin-bottom to that of the margin-top on the p, and adding a padding 
	 * to make up the difference (the padding only works on IE6, but it's not 
	 * critical).
	 */
	margin-bottom: 0.6em;
	padding-bottom: 0.3em;
}

p.title-center {
	text-align: center;
	font-weight: bold;
	margin-top: 0.3em;
	margin-bottom: 0.9em;
}

img.img-right, img.img-right-heading2 {
	float: right;
	margin-left: 0.6em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

img.img-right-heading2 {
	margin-top: 1.5em;
}

img.img-left {
	float: left;
	margin-right: 0.6em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
	
/* For pages that don't have the template */
.noTemplate {
	margin: 0.8em;
}

div.highlighted {
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	margin-left: 0.8em;
	margin-right: 0.8em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	border: 1px solid #ccc;
}

div.highlighted p, div.highlighted li {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 120%;
	font-style: italic;
}

div.whatNext {
	clear: both;
	float: left;
	margin-top: 2.4em;
	margin-bottom: 1.2em;
	margin-left: 0.8em;
	margin-right: 0.8em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border: 1px solid #ccc;
}

* html div.whatNext { /* IE overdoes the borders with float. No idea why. */
	margin-left: 0.45em;
	margin-right: 0.45em;
}

.whatNext h2, .fullLinksMenu h2 {
	clear: both;
	background-color: #fff;
	color: #000;
	border: 1px solid #ccc;
	position: relative;
	margin: 0;
	top: -0.5em;
	padding: 0.2em 0.4em;
	display: inline;
}

div.whatNext ul {
	margin-top: 0;
	margin-bottom: 0.6em;
}

.testimonial {
	border: 1px solid #ccc;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.testimonial p, .testimonial ul {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	line-height: 130%;
}

.testimonial p.source {
	font-weight: bold;
	text-align: right;
	font-family: Verdana, Arial, sans-serif;
	font-style: normal;
}

.fullLinksMenu {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px 1px 0 1px; /* ul puts bottom border in */
}

.fullLinksMenu h2 { /* Rest of definition is with whatNext */
	margin-left: 0.3em;
}
/* Allow a link in h2 that doesn't look different unless hovered over. */
.fullLinksMenu h2 a {
	text-decoration: none;
	color: #000;
}
.fullLinksMenu h2 a:hover {
	background-color: transparent;
	text-decoration: underline;
}
.fullLinksMenu h2 a:visited {
	color: #000;
}

.fullLinksMenu ul {
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #ccc;
	list-style-type: none;
	line-height: 130%;
}

.fullLinksMenu li {
	padding: 0.3em 0.5em 0.5em 0.5em; /* top right bottom left */
	margin: 0;
	border-top: 1px solid #eee;
}

.fullLinksMenu li.first {
	border-top: none;
}

p.contact {
	font-style: italic;
	margin-top: 1.8em;
}

h2.separatedOff {
	border-top: 1px solid #ccc;
	padding-top: 0.5em;
	margin-top: 3.5em;
}

div.infoLines {
	margin-left: 1.5em;
}

div.infoLines p {
	line-height: 125%;
}

.licenceTextArea {
	width: 100%;
}

/* took this out of entryForm so it can be used elsewhere. */
p.errorSummary {
	color: #ff0000;
	font-weight: bold;
	text-align: left;
}

p.backTo {
	text-align: right;
}

.img-captcha {
	margin: 0;
}

.entryForm {
	margin-top: 1.4em;
	margin-bottom: 1.4em;
	margin-left: 1.4em;
}

.entryForm div {
	display: block;
}

/* Hack to make browsers fill the DIV rather than overflow.  Doesn't work on IE,
but that's OK cos setting the height below triggers bug that has same effect.*/
.entryForm div:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* Correct the IE/Mac fix for other browsers, and do the IE/Win only height fix */
/* Hides from IE-mac \*/
* html .entryForm div {
	height: 1%;
}
/* End hide from IE-mac */

.entryForm div.formEntry {
	margin-bottom: 1em;
}

.entryForm div.closelyFollowedFormEntry {
	margin-bottom: 0.4em;
}

.entryForm label.label {
	width: 22%;
	float: left;
	text-align: right;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

.entryForm p {
	text-align: left;
	line-height: 120%;
	margin: 0;
	padding: 0;
}
.entryForm p.longLabel {
	margin-bottom: 0.2em;
}
.entryForm p.optionLongLabel {
	margin-bottom: 0.6em;
}

.entryForm p.entry, .entryForm p.optionEntry, 
		.entryForm p.closelyFollowedOptionEntry, .entryForm p.notes, 
		.entryForm p.error, .entryForm p.submit, .entryForm .img-captcha, 
		.entryForm p.textAreaEntry, .entryForm p.soloTextAreaEntry {
	margin-left: 22%;
	padding-left: 0.8em;
}

/* Ideally there'd be no need for textAreaEntry, just use entry instead.  But 
 * IE goes funny with the width of the text area unless the p is inline.
 * soloTextAreaEntry is distinguished from textAreaEntry for the benefit of 
 * IE bugs only.  The IE only hacks below came purely from experimentation.
 */
.entryForm p.textAreaEntry textarea, .entryForm p.soloTextAreaEntry textarea {
	width: 92%;
}
* html p.textAreaEntry, * html p.soloTextAreaEntry {
	display: inline;
}
* html .entryForm p.textAreaEntry textarea, 
		* html .entryForm p.soloTextAreaEntry textarea {
	width: 70%;
}
* html .entryForm p.textAreaEntry textarea {
	/* for IE5 only - necessary for some reason. */
	float: left;
	f\loat: none;
}
* html .entryForm p.textAreaEntry textarea {
	margin-left: 0.8em;
}
* html .entryForm p.soloTextAreaEntry textarea {
	/* Only for IE6. */
	ma\rgin-left: 3px;
}

.entryForm p.submit {
	margin-bottom: 0.4em;
}
			
/* Forget trying to correct for IE here.  To get rid of the stupid 3px margin on
 the float would require putting into IE float mode, in which the margin-left
 above wouldn't work right.  Not worth worrying about. */

.entryForm p.error {
	color: #ff0000;
	margin-bottom: 0.1em;
}

.entryForm p.notes {
	font-style: italic;
	margin-top: 0.1em;
}

/* IE5 and opera do padding in a fieldset differently to Firefox. Prob
 * best to avoid padding on a fieldset!
 */
.entryForm fieldset {
	padding: 0;
	margin-bottom: 1.5em;
	border: 1px solid #ccc;
}
/* IE runs into problems with hovers and JavaScript inserts in a fieldset that
 * isn't the top one.  The fieldset jumps up.  Setting the top-margin of the 
 * fieldset equal to the bottom-margin of the one above it fixes this.  The
 * margins cancel out so the visible space is no larger, except for on the first
 * fieldset, for which we need to define a special class.
 */
* html .entryForm fieldset {
	margin-top: 1.5em;
}
.entryForm fieldset.first {
	margin-top: 0;
}

.entryForm fieldset p.fieldsetNotes {
	margin-top: 0;
	margin-bottom: 0.8em;
}

/* Because of fieldset padding issues described above, we use a div after the
 * legend of the fieldset. */
.entryForm fieldset .fieldsetInterior {
	padding-top: 1.2em;
	padding-bottom: 0.5em;
	padding-left: 0.9em;
	padding-right: 0.9em;
}

.entryForm fieldset legend {
	border: 1px solid #ccc;
	padding: 0.1em 0.2em;
	margin-left: 0.5em;
}

.entryForm p.optionEntry {
	margin-bottom: 0.4em;
}

/* IE5 a bit funny about this spacing for some reason. IE6 also. */
* html .entryForm p.optionEntry {
	margin-bottom: 0.1em;
}

.entryForm p.closelyFollowedOptionEntry {
	margin-bottom: 0em;
}

.entryForm p.optionEntry input, .entryForm p.closelyFollowedOptionEntry input {
	margin: 0.1em;
	padding: 0;
	vertical-align: middle;
}

.entryForm p.optionEntry label, .entryForm p.closelyFollowedOptionEntry label {
	vertical-align: text-bottom;
	margin: 0;
	padding: 0;
	margin-left: 0.2em;
}

.listTable {
	border-collapse: collapse;
	border-spacing: 0;
	/*width: 100%; - messes up on IE 5.5 - not sure it's good anyway */
}

.listTable td, th {
	padding: 0;
}

.listTable tbody td {
	padding-left: 0.5em;
	padding-right: 0.5em;
	border-bottom: 1px solid #ccc;
}

.listTable tbody td {
	padding-top: 0.16em;
	padding-bottom: 0.16em;
}

/* Created so that a single table can exist with text between groups of rows */
.dummyTableBody td {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* This and following allow for a thead style element to be created with a 
 * listTableHead class on a tbody element (only one real thead element is 
 * allowed in a single table).*/
.listTable thead td, .listTableHead td {
	background-color: #0040ff;
	padding: 0 !important;
	border: 0 !important;
}

.listTable thead a, .listTableHead a {
	color: #fff;
	display: block;
	text-decoration: underline;
	padding-left: 0.4em;
	padding-right: 0.4em;
	padding-top: 0.26em;
	padding-bottom: 0.3em;
	border: 1px solid #0040ff; /* transparent doesn't work on IE 5.5 here */
}

.listTable thead a:visited, .listTableHead a:visited {
	color: #fff;
}

.listTable thead a:hover, .listTableHead a:hover {
	background-color: #ffff00;
	color: #000;
	border: 1px solid #ccc;
}

.labelledItems {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.labelledItem {
	margin-left: 1.5em;
	margin-right: 1.5em;
	display: block;
}

.labelledItem p {
	margin: 0;
	text-align: left;
}

.labelledItem p.label {
	float: left;
	width: 50%;
	padding-right: 0.7em;
	font-weight: bold;
}

.labelledItem p.item {
	margin-left: 50%;
	padding-left: 0.7em;
}

/* Hack to make browsers fill the DIV rather than overflow.  Doesn't work on IE,
but that's OK cos setting the height below triggers bug that has same effect.*/
.labelledItem:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* Correct the IE/Mac fix for other browsers, and do the IE/Win only height fix */
/* Hides from IE-mac \*/
* html .labelledItem {
	height: 1%;
}
/* End hide from IE-mac */

/* Use this as a div wrapper for the button.  class to center on button itself
 would be display: block; margin-left: auto; margin-right: auto; - doesn't
 work in IE 5.5 though. */
.closeButton {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	text-align: center;
}

.programOption {
	margin-top: 1.2em;
	margin-bottom:1.2em;
	margin-left: 1.6em;
	margin-right: 1.6em;
	padding: 0.4em;
	border: 1px solid #ccc;
}
.programOption p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 120%;
	text-align: left;
}
.programOption p.nameAndStatusMessage {}
.programOption p.programActions {
	margin-left: 15%;
	text-align: right;
}

.twoBoxes {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 45em;
	max-width: 100%; /* Stops it from overflowing the screen when font larger. */
}

/* For IE5 and 6. */
* html .twoBoxesWrapper {
	text-align: center;
	width: 100%;
}

.halfBoxLeft, .halfBoxRight, .halfBoxLeft_hover, .halfBoxRight_hover {
	border: 1px solid #ccc;
	width: 48%;
	margin: 0.9em 0;
}

/* Because max-width doesn't work in IE5 or 6, just use percentages instead of
 * em.  Otherwise there are problems when the text is enlarged or the screen
 * made smaller. */
* html .twoBoxes {
	width: 88%; /* On 1024*768 and normal font size this looks identical to 45em 
	width.  Once most people are above that res, IE7+ should be dominant. */
}

* html .halfBoxLeft, * html .halfBoxRight, * html .halfBoxLeft_hover, 
		* html .halfBoxLeft_hover {
	width: 48.5%; /* Fits better on IE5. */
	w\idth: 48%; /* Return for IE6. */
}

.halfBoxLeft, .halfBoxLeft_hover {
	float: left;
}

.halfBoxRight, .halfBoxRight_hover {
	float: right;
}

.twoBoxes p, .twoBoxes h2 {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.twoBoxes h2 {
	margin-top: 0.6em;
}

.twoBoxes p.readMore {
	text-align: right;
}

p.bigCodeLine {
	font-size: 200%;
	text-align: center;
}
.bigCode {
	background-color: #ffff00;
	padding: 0.1em 0.3em 0.1em 0.3em;
	border: 1px solid #ccc;
}


.signupFormTable {
	margin: 0 2em 0.6em 2em;
}


/* default value is baseline, but IE doesn't line up the text. */
* html .costDropDown select {
	vertical-align: middle;
}




/** Nice IE hacks for vertical centering from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
.thumbnails .outer {
	width: 156px;
	height: 156px;
	float: left;
	text-align: center;
	display: table;	
	#position: relative;
}

.thumbnails .inner {
	display: table-cell;
	vertical-align: middle;
	#position: absolute;
	#top: 50%;
	#left: 50%;
}

.thumbnails .inner img {
	#position: relative;
	#top: -50%;
	#left: -50%;
}