/* We start with default behaviour for the basic (x)html tags */

/* The general page layout */

/* The body of the webpage - sets up our default colours, fonts etc */
body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	line-height: 1.1;
	color: white;
	background-color: #006666;
}

/* Default behaviour of a paragraph */
p {
	text-align: left;
	margin-left: 0px;
	margin-top: 0em;
	margin-bottom: 1em;
	padding: 0;
}

/* Default behaviour of images - remove all borders */
img {
	border: none;
	margin: 0;
	padding: 0;
	color: inherit;
	background-color: inherit;
}

/* List padding must be set to zero for Firefox and perhaps other browsers.
	Also Firefox:  its html style-sheet specifies "-moz-padding-start"
	but in "quirks" mode it doesn't.  Not sure why we're in "quirks" mode for
	Firefox though - I think it doesn't properly support xhtml!?! */
ul {
	padding: 0;
	-moz-padding-start: 40px;
}

ol {
	padding: 0;
	-moz-padding-start: 40px;
}

table {
	border-collapse: collapse;
	border: 1px none white;
}

thead {
	font-weight: bolder;
	text-decoration: underline;
}

/* Now some "generic" helper classes: */

/* To make ANY object invisible: */
.cssinvisible {
	visibility: hidden;
	display: none;
	width: 0px;
	height: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	bottom: 0;
	right: 0;
}


/* The side bar and header block, including menu bar and logos, etc */
div.pagecontrol {
	position: absolute;
	width: 620px;
	min-width: 620px;
	top: 10px;
	float: left;
	padding: 0;
	margin: 0;
/* z-index is required, 'cos otherwise some browsers (e.g. firefox) will
	"paint" this full width, although "transparent" over the actual page
	content, making it impossible to click anything! */
	z-index: 0;
}

/* Tag line part of header, non-colour related stuff: */
div.tagline em {
	font-style: normal;
	font-weight: normal;
	font-size: 13px;
}

/* Tagline link (e-mail) to be right-justified */
div.tagline a {
	float: right;
	text-align: right;
	font-weight: normal;
}

/* The menu items are grouped in a block */
div.menu {
	float: left;
	width: 120px;
	clear: both;
	padding: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 10px;
}

/* Submenu items are indented...*/
div.menu div.submenu {
	background-color: transparent;
	padding: 0;
	margin-left: 7px;
	margin-right: 7px;
	border: none;
}

/* ... and have less bold font */
div.menu div.submenu div {
	font-weight: normal;
}

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

/* Sub-submenu items are indented by the same amount again... */
div.menu div.submenu div.subsubmenu {
	background-color: transparent;
	padding: 0;
	margin-left: 7px;
	margin-right: 7px;
	border: none;
}

/* ... and have a smaller font: */
div.menu div.submenu div.subsubmenu div {
	font-weight: normal;
	font-size: smaller;
}

div.menu div.submenu div.subsubmenu a {
	font-weight: normal;
	font-size: smaller;
}

/* The area that the content of the page will appear in. */
div.pagearea {
	padding: 0;
	margin-bottom: 20px;
	margin-right: 0;
	margin-top: 106px;
	margin-left: 125px;
	position: relative;
/*	width: 495px;*/
	min-width: 495px;
/* z-index is required, 'cos otherwise some browsers (e.g. firefox) will
	have the header and menu full width, although "transparent" over this
	actual page content, making it impossible to click anything! */
	z-index: 1;
}

div.pageheading {
	min-height: 37px;
}


a {
	color: #FFCC33;
	background-color: inherit;
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a.definition {
	color: white;
	background-color: inherit;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	cursor: help;
}

div.pageheading h1 {
	color: #FFCC33;
	background-color: inherit;
	font-size: x-large;
	font-weight: bold;
	margin: 0;
	padding: 0;
	height: auto;
}

div.pageheading h2 {
	color: #FFCC33;
	background-color: inherit;
	font-size: small;
	font-weight: bold;
	text-align: left;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0.5em;
}

h2 {
	font-size: larger;
	font-weight: bold;
	text-align: left;
	margin-left: 0px;
	margin-top: 1em;
	margin-bottom: 0;
}

/* Note we have to actually set the borders for hr
	so that the colour setting works in Firefox, etc
	Our colours here are set to match the line in the
	header, otherwise this looks odd.  */
hr {
	clear: both;
	color: white;
	background-color: #006666;
	text-align: center;
	width: 90%;
	height: 1px;
	padding: 0;
	border-top: 1px solid white;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
}

hr.inline {
	clear: none;
}

/* Classes for logos: We actually just simply have links
	The image is in the background, although this means a user
	has to switch on the option to print background images.
	There may be several ways to get round this.*/
a.cfis {
	float: left;
	background-attachment: scroll;
	background-image: url(/images/2008brand/figlogo.gif);
	background-position: center top;
	background-repeat: no-repeat;
	height: 90px;
	width: 120px;
	padding: 0;
	margin: 0;
}

a:active.cfis {
	text-decoration: none;
	background-color: #006666;
}

a:hover.cfis {
	text-decoration: underline;
	background-color: #006666;
}

a.filogo {
	background-attachment: scroll;
	background-image: url(/images/filogo.gif);
	background-position: right top;
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	padding: 0;
	margin: 0;
	position: relative;
	float: right;
}

a:active.filogo {
	text-decoration: none;
	background-color: #006666;
}

a:hover.filogo {
	text-decoration: underline;
	background-color: #006666;
}

/* Tag-line part of header */
div.tagline {
	height: 40px;
	width: 492px;
	min-width: 492px;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 3px;
	padding-top: 3px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 3px;
	margin-bottom: 3px;
	position: relative;
	float: right;
	border-top: solid 2px white;
	border-left: solid 2px white;
	font-family: Arial, Geneva, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4em;
}

/* Prevent tagline links (e.g. e-mail) from being highlighted  differently
	See also "fig.css" */
div.tagline a {
	color: white;
	background-color: inherit;
}

div.tagline a:active {
	text-decoration: none;
}

div.tagline a:hover {
	text-decoration: none;
}

/* The menu:
	"div" is used for the current page.
	Other items are "a" */
div.menu div {
	display: block;
	text-align: center;
	font-weight: bold;
	color: inherit;
	background-color: #007777;
	cursor: default;
	padding: 4px;
	margin-bottom: 2px;
/*	For Buttons effect:
	border-left: solid 2px black;
	border-top: solid 2px black;
	border-right: solid 2px white;
	border-bottom: solid 2px white;*/
}

div.menu a {
	display: block;
	text-align: center;
	font-weight: bold;
	color: #FFCC33;
	background-color: #007777;
	padding: 4px;
	margin-bottom: 2px;
/*	For Buttons effect:
	border-left: solid 2px white;
	border-top: solid 2px white;
	border-right: solid 2px black;
	border-bottom: solid 2px black;*/
}

div.menu a:active {
	text-decoration: none;
}

div.menu a:hover {
	text-decoration: none;
	color: #007777;
	background-color: #FFCC33;
/*	For Buttons effect:
	border-left: solid 2px black;
	border-top: solid 2px black;
	border-right: solid 2px white;
	border-bottom: solid 2px white;*/
}