/* Usage: <link rel="stylesheet" type="text/css" href="/css/styles.css"> */

/* Common Element Styles */

body
{
	margin: 12pt auto;
	width: 866px;
	font: 12px/15px Lucida Grande, Arial;
	background: #D7D7DB;
	color: #333;
}

img
{
	border: none;
}

h1
{
	margin-top: 0ex;
	margin-bottom: 1ex;
	margin-left: -4pt;
	font: bold 24px Optima,Arial;
	text-align: left;
	color: #5F5F50;
}

h2
{
	font: bold 16px Lucida Grande,Arial;
	border: none;
	clear: left;
	margin-top: 3ex;
	margin-bottom: 1.5ex;
	color: #5F5F50;

	/* Recommended by http://www.htmlhelp.com/tools/csscheck/ */
	background: transparent;
}

h2 + p
{
	/* A paragraph after an H2 heading should not add spacing above. */
	margin-top: 0pt;
}

h3
{
	font: bold 13px Lucida Grande,Arial;
	text-align: left;
	color: #3F3F30;
}

h4
{
	margin-bottom: 0ex;
}

dt
{
	font-style: italic;
	padding: 1ex;
}

tr.alternateRow, td.alternateRow, div.alternateRow,
tr.alt, td.alt, div.alt
{
	background: #f9f9fd;
}

th
{
	font: 12px/15px Georgia,Palatino,Times;
	font-weight: bold;
	text-align: left;
	color: black;
}

tr
{
	vertical-align: top;
}

td
{
	font: 12px/18px Lucida Grande, Arial;
	color: #333;
}

li
{
	/* Lists should not be justified because they are not full paragraphs and
		it generally causes large spacing between words when a list item wraps
		multiple lines. To use full justification. Wrap the list item in a P
		element. */
	text-align: left;
	
	/* The default indentation of lists is too large. */
	margin-left: -2ex;
}

li.body
{
	/* For lists that do want to use prose. */
	margin-bottom: 0.5ex;
}

a.inline
{
	text-decoration: none;
}

a.inline:hover
{
	text-decoration: underline;
}

p.title
{
	font-weight: bold;
	margin-bottom: 0px;
}

p.description
{
	margin-top: 0px;
}

/* Page Structure Styles */

#hdrnavbar
{
	background: #E0E0E0 url('/images/transparent_gradient_18.png') repeat-x;
	padding: 8px 16px;
	border: 1px solid darkgray;
	border-top: none;
}

#hdrnavbar #links a
{
	font: 12px Lucida Grande;
	text-decoration: none;
	color: #555;
	margin-left: 1em;
	margin-right: 1em;
}

#hdrnavbar #links a:hover
{
	color: blue;
}

#hdrnavbar #buttons
{
	float: right;
}

#hdrnavbar #buttons img.button
{
	margin-top: -1px;
	margin-left: 8px;
}

#page
{
	/* Page content should not hug the top or bottom of the page. */
	padding: 24px 32px;

	background: white;
	border: 1px solid darkgray;
	border-top: none;
}

#page ul li
{
	/* Square bullets are more discrete. */
	list-style-type: square;
}

#page *.paralist li
{
	/* Lists that use paragraphs will want a larger than default gap between lines. */
	margin-bottom: 1ex;
}

#pageContent
{	
	/* Pages with no content should still have some height. 250px is the height that
		will fill the screen on a MacBook, but the value is arbitrary. */
	min-height: 250px;
}

#footer
{
	/* Visually separate the page content from the footer. */
	border-top: 1px solid gray;
	padding-top: 2ex;

	text-align: center;

	/* The footer should be below both the page and the navigation menu.
	   This is mostly an issue when the page content is very small. */
	clear: both;
}

#footerLinks
{
	text-align: center;
	font: 11px "Lucida Grande",Geneva,Arial;
}

#footerLinks p
{
	margin-top: 0.5ex;
	margin-bottom: 0.5ex;
}

#copyright
{
	text-align: center;

	/* Without spacing, the copyright hugs the navigation links above and the
		window's bottom edge below. */
	margin-top: 4ex;
	margin-bottom: 2ex;
}

#copyright.fineprint
{
	font: 10px Lucida Grande,Geneva,Arial;
	color: black;

	/* Fine print is almost always rendered with center alignment. */
	text-align: center;

	/* Recommended by http://www.htmlhelp.com/tools/csscheck/ */
	background: transparent;
}


/* Page Structure: Side Bar Styles */
#sidebar
{
	display: none;

	width: 15em;
	margin-left: 3em;

	/* Ensure box is wide enough for the world_flags. */
	min-width: 200px;

	float: right;

	/* In case the sidebar is taller than the main copy, add a gap to the
		bottom so it doesn't hug the footer. */
	margin-bottom: 3ex;
}

#buyNowBox, #buyNowBox td
{
	font: 11px Lucida Grande,Arial;
}

#buyNowBox
{
	border: 1px solid lightgray;
	padding: 1.4ex;
	margin-bottom: 3ex;

	/* The height should enclose the buyNow graphic, which is floated
	   right and therefore doesn't contribute to the box's normal height
	   calculation. Depending on the font size, the text in the buy box
	   may take three or four rows. Setting a minimum height ensures that
	   the button is never clipped. */
	min-height: 50px;
}

#buyNowBox img
{
	margin-left: 0.3em;
	margin-right: 1.25em;
}

#buyNowBox p
{
	margin-top: 0pt;
	text-align: left;
}


/* Subscribe to Liquid Ledger News Badge */
#subscribeBox
{
	background: #F7F7F7 url('/images/transparent_gradient_12.png') repeat-x;
	border: 1px solid darkgray;
	border-top: 1px solid lightgray;
	border-left: 1px solid lightgray;

	font: 13px Lucida Grande,Arial;
	text-align: left;

	padding: 0.5ex;
	margin-bottom: 2ex;

	/* The icon floats to the left and is not included in the box height,
		so the box's height must be set explicitly or it won't be tall
		enough to enclose the floating image.	 */
	height: 48px;
}

#subscribeBox p
{
	font-size: 11px;
	margin: 0ex;
}

/* #page is needed or else this rule isn't specific enough to override the
	existing p.title rule and the margin-top has no effect. */
#page #subscribeBox p.title
{
	font: bold 12px Lucida Grande,Arial;

	/* Center text vertically */
	margin-top: 0.5ex;
}

#subscribeBox img
{
	float: left;
	padding-top: 4pt;
	padding-left: 8pt;
	padding-right: 8pt;
}

a.subscribeBox
{
	/* To achieve the illusion that this is an image badge, make the anchors
	   render as normal text, not as links. */
	text-decoration: none;
	color: black;
}


#sidebar div.tileBox
{
	border: 1px solid lightgray;
	border-bottom: none;
	font: 11px Lucida Grande,Arial;
	text-align: left;
	padding: 8pt;
}

#sidebar div.lastTileBox
{
	border-bottom: 1px solid lightgray;
	margin-bottom: 2ex;
}

#sidebar p.title
{
	font-weight: bold;
	margin-top: 0ex;
	margin-bottom: 0.25ex;
}

#sidebar p.description
{
	margin-top: 0ex;
	margin-bottom: 0.5ex;
}

#sidebar #quoteBox
{
	font: bold 13px Lucida Grande,Arial;
	text-align: center;
	margin-bottom: 4ex;
}


/* List/Table Styles */

table.coloured
{
	margin-top: 2ex;
	margin-bottom: 2ex;
	border: 1px solid darkgray;
	border-spacing: 0px;
}

table.coloured tr:last-child td
{
	border-bottom: none;
}

table.coloured td
{
	border-bottom: 1px solid lightgray;
	padding: 1ex;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

table.coloured th
{
	font: 11px Lucida Grande,Geneva,Arial;
	border-bottom: 1px solid gray;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5ex;
	padding-bottom: 0.5ex;
	font-weight: normal;
	color: white;
	background: #5f7f9f;

	background: #D7D7D0 url('/images/transparent_gradient_12.png') repeat-x;
	color: black;
	border-bottom: 1pt solid darkgray;
	padding: 4px 0.75em;
	font-weight: bold;
	font-size: 12px;
}

table.coloured td > p:first-child
{
	margin: 0px;
	font-weight: bold;
	color: black;
}

table.coloured td > p:first-child + *
{
	margin-top: 0.5ex;
	margin-bottom: 1ex;
}

/* FAQ-Style Entries */

a.question
{
	text-decoration: none;
}

a.question:hover
{
	text-decoration: underline;
}

a.answer
{
	font-weight: bold;
}


/* Miscellaneous Styles */

/* Drop Caps */
/*
	The following first-letter rule should be all you need to render a drop
	cap, however this does not render consistently across browsers. For
	example, Safari calculates the drop cap's enclosing box to be too small
	(although it appears to render fine), while Netscape calculates the box
	to be too large and adds a line of spacing above and below the letter
	(this bug has been observed by others so it does not seem specific to
	these style rules). The interim solution is to put the drop cap in its
	own div and to float the div to the left. The box calculation for the
	div box is still not the same in both browsers, although the calculated
	height is consistently understated and the rendering is generally
	acceptable.

p.intro:first-letter
{
	font-size: 300%;
	float: left;
	width: 0.7em;
	padding-top: 0.33ex;
}
*/

div.dropCap
{
	float: left;

	/* Put some spacing between the drop cap and the text to the right. */
	padding-right: 0.25em;

	/* A trick that forces Netscape to grow the box a little bigger so that
	   it spans two lines, otherwise the drop cap box is too small. */
	border: 1pt solid white;
}

div.dropCap span
{
	font-size: 300%;
	position: relative;

	/* Growing the font size keeps the baseline in the same position, but
	   it should sit on the baseline of the second line. This top value was
	   obtained through trial and error; it places the drop cap perfectly
	   on the second line in Safari but just a little high in Netscape. */
	top: 0.33ex;
}


/* Frequently Asked Questions */

div.faqAnswer
{
	margin: 2ex;
	padding: 0ex 1.5em;
	background: #F9F9F9;
	border-top: 1px solid lightgray;
	border-left: 1px solid lightgray;
	border-bottom: 1px solid gray;
	border-right: 1px solid gray;
}

/* Alert Dialogs */
div.alert
{
	border: 2px solid darkgray;
	border-top: 1px solid darkgray;
	background: #FFF9F9;

	/* Make an alert a bit narrower than its containing block and centered
		so it stands out. */
	width: 50em;
	margin: auto;

	margin-top: 2ex;
	margin-bottom: 2ex;
}

div.alert p.title
{
	/* Box Dimenions and padding */
	width: 100%;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;

	/* Spacing between header and body */
	margin-top: 0px;
	margin-bottom: 1ex;

	/* Borders and Colour */
	border-bottom: 1px solid gray;
	background: #901D1D;
	color: white;

	/* Body Font */
	font: bold 11px Lucida Grande,Geneva,Arial;
	text-align: center;
}		

div.alert p.description
{
	font: 11px Lucida Grande,Geneva,Arial;
	padding: 2ex;
	padding-top: 0px;
	padding-bottom: 0px;
}


/* Figures */

div.figure
{
	/* Use a sans serif font to visible separate figures from body text. */
	font: 11px Lucida Grande,Geneva,Arial;

	/* Figures should be centered and inset, with a bit of spacing above and
	   below to visually separate them from body text. */
	width: 90%;
	margin: auto;
	margin-top: 3ex;
	margin-bottom: 3ex;

	/* Render a rule above; see also the paragraph rule below. */
	border-top: 1px solid #AAB4C0;
	border-bottom: 1px solid #AAB4C0;
}

div.figure p.title
{
	font-weight: bold;

	/* The parapgrah should hug the horizontal rule above it. */
	margin-top: 0.5ex;

	/* The next paragraph element (the description) should hug the title. */
	margin-bottom: 0.2ex;
}

div.figure p.description
{
	/* The previous paragraph element (the title) should hug the description. */
	margin-top: 0ex;
	margin-bottom: 3ex;
}

div.figure p.caption
{
	/* The caption displayed beneath an image should be spaced near the image
		but should have more spacing between it and the next paragraph. */
	margin-top: 0.5ex;
	margin-bottom: 1ex;
}

div.figure a
{
	/* Anchors in figures look messy with underlines. */
	text-decoration: none;
}

div.figure a:hover
{
	text-decoration: underline;
}



/* Other Styles */
.footnote
{
	font-size: 10px;
	line-height: 1.2;
	font-style: italic;
	color: #666666;

	margin-top: 0ex;

	/* Use a hanging indent so the footnote counter appears in the left margin. */
	margin-left: 0.8em;
	text-indent: -0.8em;
}

.error
{
	color: red;
	font-weight: bold;
}

.label
{
	font-family: Lucida Grande,Geneva,Arial;
}

.requiredText
{
	color: #CC0000;
}

.fineprint
{
	font: 10px Lucida Grande,Geneva,Arial;
}

.downloadURL
{
	font: 11px Lucida Grande,Geneva,Arial;
	color: black;

	/* Recommended by http://www.htmlhelp.com/tools/csscheck/ */
	background: white;
}



/*
	This is a CSS comment where the end-of-comment marker is escaped. The
	following styles are not read by Explorer because it thinks they are
	still part of this comment.
\*/

#explorerNotice
{
	/* Explorer does a horrible job of rendering CSS. For non-Explorer
		browsers, hide the notice. */
	display: none;
}