/* {font-style font-variant font-weight font-size/line-height font-family;} */
body
{
	margin:				0px 0px;
	font-size:			12px;
	line-height:		18px;
	font-family:		"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	color:				#333333;
	
}

p
{
	margin-bottom:		18px;	
}

p.grey
{
	color:				#999999;
}


/* global setting for hyperlink style and colours */
a
{
	color:				#6666FF;
	text-decoration:	none;
}

a:hover
{
	text-decoration:	underline;
}

/**********************************************************************/
/* Headings                                                           */
/**********************************************************************/
h1
{
	font-size:			24px;
	line-height:		36px;
	font-weight:		bold;
	margin-bottom:		18px;
}


h2, .headingBox
{
	font-size:			16px;
	line-height:		18px;
	margin-bottom:		18px;
	font-weight:		bold;
}


h3
{
	font-size:			12px;
	line-height:		18px;
	font-weight:		bold;
}

h4
{
	font-weight:		bold;
	font-size:			12px;
	line-height:		18px;
	margin-bottom:		-10px;		/* no gap between this line and the next */
}



/**********************************************************************/
/* iconHeadingBox                                                     */
/*                                                                    */
/* Use this to display a 32x32px icon to the left of a vertically-    */
/* centred heading (which will be displayed in "h2" style).           */
/*                                                                    */
/* Example:                         	                              */
/*                                                                    */
/*	<div class="iconHeadingBox">                                      */
/*		<div class="iconBox">                                         */
/*			<img src= ...>                                            */
/*		</div>                                                        */
/*		<div class="headingBox">                                      */
/*			heading here                                              */
/*		</div>                                                        */
/*	</div>                                                            */
/*                                                                    */
/**********************************************************************/
.iconHeadingBox
{
	margin-top:			16px;		/* space before hand */
	height:				32px;		/* saves having to use clear:both afterwards */
	width:				370px;
	position:			relative;
	/* border:				1px solid #FFFF00; */
}


.iconBox
{
	float:				left;
	left:				0;
	top:				0;
	width:				32px;
	height:				32px;
	position:			relative;
}

.headingBox
{
	float:				left;
	left:				8px;		/* white space between icon & heading */
	top:				8px;		/* move text up */
	position:			relative;
	
}


/* captions */
.figureCaption
{
	font-size:			10px;
	line-height:		14px;
	color:				#76797C; 
}

.footnote
{
	font-size:			10px;
	line-height:		14px;
	color:				#555555; 
}

/* For specifying menu commands or other interface elements */
.interface	/* was "inline.interface"; now use "<span class="interface"> */
{
	font-family:		"Courier", "Courier New", monospace;
}

/* introductory paragraph */
.intro
{
	font-size:			14px;
	line-height:		20px;
	font-weight:		normal;
	/*letter-spacing:		-0.07em;*/
	color:				#888888;
}



/**********************************************************************/
/* Outer Box                                                          */
/* This provides a nice white background with a light-grey frame and  */
/* rounded corners (Mac).                                             */
/* NOTE: this was an ID, but is now a CLASS. This allows us to specify*/
/* an appropriate ID, for the page itself, thus letting the section   */
/* links be updated according to the current page.                    */
/**********************************************************************/
.outerBox
{
	/*background-color:		#EEEEEE;*/
	/*background-color:		#F6F6FF; */	/* too light? */
	background-color:		#EEEEEE;	/* grey */
	background-color:		#EEEEFF;	/* Cambridge Light Blue! */
	background-color:		#EEEEF6;	/* Cambridge Light Blue! */
	margin-left:			auto;
	margin-right:			auto;
	vertical-align:			top;
	width:					840px;
	position:				relative;
	height:					auto;
	margin-bottom:			20px;
	margin-top:				20px;
	border:					1px solid #DDDDDD;
							-webkit-border-bottom-left-radius: 18px;	/* Apple extension */
							-webkit-border-bottom-right-radius: 18px;	/* Apple extension */
							-webkit-box-shadow: 0px 2px 4px #CACACA;	/* Apple extension */	
							-moz-border-radius-bottomleft: 18px;		/* Mozilla */
							-moz-border-radius-bottomright: 18px;		/* Mozilla */
							-moz-box-shadow: 2px 2px 4px #CACACA;		/* Mozilla */
/*
	overflow: auto;
	overflow: hidden;
*/
}


/**********************************************************************/
/* Navigation Bar: "Home | Products | Sales | Support | News"         */
/**********************************************************************/
#global-nav
{
	position:				float;
	width:					843px;
	margin:					0px;	/* remove vertical spacing after list */
	padding:				0px;	/* remove any offset of "li" items */
	height:					20px;
	border-bottom:			1px solid #FFFFFF;
	list-style:				none;
}

/* basic button attributes */
#global-nav li
{
	float:					left;
	width:					168px;
	height:					18px;
	text-align:				center;
	vertical-align:			middle;
}

/* button up style */
#global-nav a
{
	background-color:		#DDDDDD;
	border-top:				1px solid #CCC;
	border-left:			1px solid #CCC;
	border-right:			1px solid #999999;
	border-bottom:			1px solid #999999;
	font-size:				10px;
	line-height:			18px;
	color:					#333366;
	display:				block;
	width:					166px;
	height:					18px;
	position:				relative;
}

/* button "down" style */
/* e.g., if body id = home, the link with id = nav-home is shown in a "down" state. */
body#home     #gn-home a,
body#software #gn-software a,
body#register    #gn-register    a,
body#support  #gn-support  a,

body#aboutus  #gn-aboutus  a
{
	background-color:		#;
	border-top:				1px solid #884488;
	border-left:			1px solid #884488;
	border-right:			1px solid #09F;
	border-bottom:			1px solid #09F;
	font-weight:			bold;
	color:					#EEE;
	text-decoration:		none;
	background-color: #03F;
}

/* button "up" - hover */
#global-nav a:hover
{
	color:					#333;
	text-decoration:		none;
	background-color:		#C2DEFE;
	border-left:			1px solid #CCAACC;
	border-top:				1px solid #CCAACC;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}


/* button "down" - hover */
body#sales #nav-sales a:hover
{
	color:				#36F;
}



/**********************************************************************/
/* Section Links          */
/**********************************************************************/
#section-nav
{
	position:				float;
	float:					right;
	margin:					0px;	/* remove vertical spacing after list */
	margin-top:				23px;
	margin-right:			20px;
	margin-bottom:			13px;
	padding:				0px;	/* remove any offset of "li" items */
	height:					36px;
	line-height:			24px;
	list-style:				none;
}

/* list element styles */
#section-nav li
{
	font-size:				12px;
	padding-top:			10px;
	position:				float;
	float:					left;
	text-align:				right;
	vertical-align:			middle;
	margin-left:			24px;
	color:					#999999;		/* link inactive colour */
}

#section-nav a
{
	color:					#333366;		/* link active colour */
	text-decoration:		none;
}


/* This identifies the "home" item, which will be displayed on the left. */
/* This should be the first item in the list (pseudo-class ":first-child") */
#section-nav li:first-child
{
	position:				absolute;
	padding-top:			0px;
	left:					20px;
	margin-left:			0px;
	font-weight:			bold;
	font-size:				24px;
	line-height:			35px;
	color:					#000000;
}

#section-nav li:first-child a
{
	color:					#000000;
}


/* Class definition for a "standout" section link */
/* We'll draw this using a rounded button */
#section-nav .standout a
{
	padding-left:			10px;		/* add room for curved LH edge */
	padding-right:			10px;		/* add room for curved RH edge */
	background:				#AAAAEE;
	border:					1px solid #BBBBBB;
							-webkit-border-radius: 12px;
							-moz-border-radius: 12px;
	font-size:				11px;
	line-height:			19px;
	color:					#FFFFFF;

	display:				block;
}

#section-nav a:hover, #section-nav li:first-child a:hover
{
	color:					#6666FF;
}

/* Make the link for the current page appear disabled. We do this by matching */
/* the id for the "outerBox" class that encloses this page's content, with    */
/* the id for the current link.                                               */
/* For example, if we have: <div id="faq" class="outerBox"> and one of the    */
/* links within this <div> has id="sn-faq", then this will be shown in the    */
/* specified style.                                                           */


/* SUPPORT */
#register.outerBox			#sn_register a,
#installation.outerBox		#sn-installation a,
#help.outerBox				#sn-help a,
#tutorials.outerBox			#sn-tutorials a,
#references.outerBox		#sn-references a,
#register.outerBox			#sn-register a,
#feedback.outerBox			#sn-feedback a

{
	color:					#999999;		/* link inactive colour */
	cursor:					default;		/* show arrow instead of pointing hand */
}

#home.outerBox #sn-home a
{
	cursor:					default;		/* show arrow instead of pointing hand */
}

#home.outerBox #sn-home a:hover
{
	color:					#000000;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}




/**********************************************************************/
/* HeaderBox: main section title here							      */
/**********************************************************************/
#headerBox
{
	top:					0px;
	height:					72px;
	margin-left:			20px;
	margin-right:			20px;
	position:				relative;
/*	border:					1px dotted #FF0000; */
}

/* Section title goes in this box */
#headerTitleBox
{
	width:					auto;
	top:					23px;
	position:				absolute;
/*	font-family:			'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif; */
	font-weight:			bold;
	font-size:				24px;
	line-height:			36px;
	/*border:					1px dotted #FF0000;	*/
}

#headerTitleBox a
{
	color:					#000000;
	text-decoration:		none;
}


#headerTitleBox a:hover
{
	color:					#6666FF;
	text-decoration:		none;
}


/* This is the frame in which our individual page links can sit */
#headerLinksBox
{
	position:				absolute;
	top:					36px;	/* so baseline of links aligns with headerTitle */
	right:					0px;
	text-align:				right;
	vertical-align:			bottom;
	/*border:					1px dotted #FF0000;	*/
}

/* These are the links to pages within the section */
.pageLink, .pageLinkDown, .pageLinkStandout
{
	float:					left;
	text-align:				left;
	vertical-align:			middle;
	margin-left:			8px;
	position:				relative;
	/* border:					1px dotted #00FF00; */
}

.pageLink a, .pageLinkDown a, .pageLinkStandout a
{
	padding-top:			1px;	/* to make the "standout" buttons taller */
	padding-bottom:			1px;	/* to make the "standout" buttons taller */
	padding-left:			8px;
	padding-right:			8px;
	font-size:			12px;
	color:				#333366;
	text-decoration:	none;
}

.pageLinkDown a
{
	/* border:				1px dotted #333366; */
	color:					#999999;
	/*color:				#6666FF; */
}

.pageLink a:hover, .pageLinkDown a:hover, .pageLinkStandout a:hover
{
	color:				#6666FF;
}

/* this is the currently-active "page" link */
.pageLinkStandout
{
	padding-left:			10px;
	padding-right:			10px;
	background:				#AAAAEE;
	border:					1px solid #BBBBBB;
							-webkit-border-radius: 12px;
							-moz-border-radius: 12px;
}

.pageLinkStandout a
{
	font-size:			11px;
	color:				#FFFFFF;
}




/**********************************************************************/
/* Content Box:                                                       */
/* This provides a nice white box (with rounded corners on the Mac)   */
/* for holding page content.                                          */
/**********************************************************************/
#contentBox, #contentFeatureBox, .contentBoxClass
{
	clear:					both;	/* clear any floats before */
	/* shouldn't need this, apparently, */
									/* but need to clear the section links */
	background-color:		#FFFFFF;
	margin-left:			20px;
	margin-right:			20px;
	margin-bottom:			0px;
	margin-top:				20px;
	padding-left:			20px;
	padding-right:			20px;
	vertical-align:			top;
	top:					-1px;
	width:					760px;	/* 800px including padding */
	position:				relative;
	height:					auto;
	border:					1px solid #CCCCDD;
	-webkit-border-radius: 12px;				/* Apple extension */
	-moz-border-radius: 12px;					/* Apple extension *//*
	overflow: auto;
	overflow: hidden;
*/
}

/* ContentBoxClass is designed to be repeated vertically, so add space */
/* at the bottom. Last item will have no space, and is indicated by the */
/* sub-class, "last".                                                   */
.contentBoxClass
{
	margin-bottom:			20px;
}
.contentBoxClass.last
{
	margin-bottom:			0px;	/* remove padding from bottom margin */
}




/* subclasses of "contentBox", to allow for a header */

.contentBoxClass.header, .contentBoxClass.footer
{
	color:					#FFFFFF;
	background:				#CCCCDD;
	border:					1px solid #CCCCDD;
}

.contentBoxClass.header
{
	text-align:				left;
	height:					20px;	/* = 24px - padding-top */
	font-size:				14px;
	font-weight:			bold;
	margin-bottom:			0px;
	padding-top:			4px;
	padding-bottom:			0px;
							-webkit-border-top-left-radius:		12px;
							-webkit-border-top-right-radius:	12px;
							-webkit-border-bottom-left-radius:	0px;
							-webkit-border-bottom-right-radius:	0px;
							-moz-border-radius-topleft:			12px;
							-moz-border-radius-topright:		12px;
							-moz-border-radius-bottomleft:		0px;
							-moz-border-radius-bottomright:		0px;
}

.contentBoxClass.footer
{
	text-align:				left;
	height:					24px;
	padding-bottom:			0px;
							-webkit-border-top-left-radius:		0px;
							-webkit-border-top-right-radius:	0px;
							-webkit-border-bottom-left-radius:	12px;
							-webkit-border-bottom-right-radius:	12px;
							-moz-border-radius-topleft:			0px;
							-moz-border-radius-topright:		0px;
							-moz-border-radius-bottomleft:		12px;
							-moz-border-radius-bottomright:		12px;
}

.contentBoxClass.contentRounded
{
	/* same as parent class */
}

.contentBoxClass.contentRoundedBottom
{
							-webkit-border-top-left-radius:		0px;
							-webkit-border-top-right-radius:	0px;
							-webkit-border-bottom-left-radius:	12px;				/* Apple extension */
							-webkit-border-bottom-right-radius: 12px;				/* Apple extension */
							-moz-border-radius-topleft:			0px;					/* Apple extension */
							-moz-border-radius-topright:		0px;					/* Apple extension */
							-moz-border-radius-bottomleft:		12px;					/* Apple extension */
							-moz-border-radius-bottomright:		12px;					/* Apple extension */
}

.contentBoxClass.contentRoundedTop
{
							-webkit-border-top-left-radius:		12px;
							-webkit-border-top-right-radius:	12px;
							-webkit-border-bottom-left-radius:	0px;				/* Apple extension */
							-webkit-border-bottom-right-radius: 0px;				/* Apple extension */
							-moz-border-radius-topleft:			12px;					/* Apple extension */
							-moz-border-radius-topright:		12px;					/* Apple extension */
							-moz-border-radius-bottomleft:		0px;					/* Apple extension */
							-moz-border-radius-bottomright:		0px;					/* Apple extension */
}

.contentBoxClass.contentSquare
{
							-webkit-border-radius:		0px;
							-moz-border-radius:			0px;
}

.contentBoxVerticalPadding
{
	height:					20px;
}


/* This box holds the title for the current page, which should be     */
/* inside the white "content box".                                    */
#contentTitleBox
{
	border-bottom:			1px solid #CCCCCC;
	vertical-align:			middle;
	text-align:				center;
	padding-top:			20px;
	padding-bottom:			20px;
}

/* This is the main title for the current page */
#contentTitleBox h1, #contentFeatureBox h1
{
	font-size:			32px;
	line-height:		48px;
	letter-spacing:		-0.05em;
	padding-left:		20px;
	padding-right:		20px;
	margin-top:			0px;
	margin-bottom:		0px;
	font-weight:		normal;
/*	border:				1px dotted #FF0000; */
}

/* This is a subtitle, to be positioned underneatht the page title */
#contentTitleBox h2, #contentFeatureBox h2
{
	padding-left:		60px;
	padding-right:		60px;
	position:			relative;
	letter-spacing:		-0.06em;
	font-size:			15px;
	line-height:		20px;
	font-weight:		normal;
	margin-top:			0px;
	margin-bottom:		0px;
	color:				#888888;
/*	border:				1px dotted #FF0000;	*/
}

#contentFeatureBox h2
{
	/* padding-bottom:		20px; */
}



/* The "feature box" is for use as an introductory box, possibly with    */
/* graphics that can spread from one side to the other, without a margin.*/
#contentFeatureBox, .contentFeatureBoxClass
{
	padding-left:			0px;
	padding-right:			0px;
	padding-top:			20px;	/* don't need padding at bottom if have figure caption */
	padding-bottom:			0px;
	width:					800px;
	margin-bottom:			20px;
	text-align:				center;
}

#contentFeatureBoxPicture
{
	padding-top:			20px;
	padding-bottom:			0px;
/*	border:					1px dotted #FF0000;	*/
}


/* This is the main title for the current page */
#contentTitleBox h1, #contentFeatureBox h1
{
	font-size:			32px;
	line-height:		48px;
	letter-spacing:		-0.05em;
	padding-left:		20px;
	padding-right:		20px;
	margin-top:			0px;
	margin-bottom:		0px;
	font-weight:		normal;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;/*	border:				1px dotted #FF0000; */
}

/* This is a subtitle, to be positioned underneatht the page title */
#contentTitleBox h2, #contentFeatureBox h2
{
	padding-left:		60px;
	padding-right:		60px;
	position:			relative;
	letter-spacing:		-0.06em;
	font-size:			15px;
	line-height:		20px;
	line-height:		24px;
	font-weight:		normal;
	margin-top:			0px;
	margin-bottom:		0px;
	color:				#888888;
/*	border:				1px dotted #FF0000;	*/
}








/* If we have a two-column layout, then this box holds the left-hand  */
/* column. Note that getting the two columns side-by-side is a little */
/* tricky when using divs. In particular, we need to use a "clear"    */
/* setting after we've finished with our right-hand column.           */
#leftColBox, .leftColClass, #rightColBox, .rightColClass
{
	padding-top:		8px;
	top:				0px;
	width:				370px;	/* = page width (800px) / 2 - 20px (left) - 10px (right) */
	position:			relative;
}

#leftColBox, .leftColClass
{
	left:				0px;
	float:				left;
	padding-right:		10px;
}

/* This is for the right-hand column in a two-column layout.          */
#rightColBox, .rightColClass
{
	float:				right;
	padding-left:		10px;
}


/* This is the essential "column terminator", required to get the     */
/* enclosing "contentBox" div to draw properly.                       */
#clearCols, .clearFloat
{
	clear:				both;
}

/* A generic container to clear those pesky floating divs */
.container
{
	border:				none;
	overflow:			hidden;
	width:				100%;
}


/* triple-column layout */
/* N.B., left- and right-hand boxes already have 20px of padding */
#tripleColBox1, #tripleColBox2, #tripleColBox3
{
	top:				0px;
	float:				left;
	width:				225px;	/* 266px with 20px padding L & R */
	position:			relative;
	padding-bottom:		10px;
}

#tripleColBox1
{
	padding-right:		20px;
	border-right:		1px solid #CCCCDD;
}

#tripleColBox2
{
	left:				-1px;	/* so LH border overlaps RH border of col1 */
	padding-left:		20px;
	padding-right:		20px;
	border-left:		1px solid #CCCCDD;
	border-right:		1px solid #CCCCDD;
}

#tripleColBox3
{
	left:				-2px;	/* so left-hand border overlaps RH border of col2 */
	padding-left:		20px;
	border-left:		1px solid #CCCCDD;
}





/* quad-column layout */
/* N.B., left- and right-hand boxes already have 20px of padding */
#quadColBox1, #quadColBox2, #quadColBox3, #quadColBox4
{
	top:				0px;
	float:				left;
	width:				158px;	/* 199px with 20px on LH & RH sides */
	position:			relative;
	padding-bottom:		10px;
}

#quadColBox1
{
	padding-right:		20px;
	border-right:		1px solid #CCCCDD;
}

#quadColBox2
{
	left:				-1px;
	padding-left:		20px;
	padding-right:		20px;
	border-left:		1px solid #CCCCDD;
	border-right:		1px solid #CCCCDD;
}

#quadColBox3
{
	left:				-2px;
	padding-left:		20px;
	padding-right:		20px;
	border-left:		1px solid #CCCCDD;
	border-right:		1px solid #CCCCDD;
}

#quadColBox4
{
	left:				-3px;
	padding-left:		20px;
	border-left:		1px solid #CCCCDD;
}



#tripleColBox1 h4, #tripleColBox2 h4, #tripleColBox3 h4,
#quadColBox1 h4, #quadColBox2 h4, #quadColBox3 h4, #quadColBox4 h4
{
	margin-bottom:		0px;
}

#tripleColBox1 p, #tripleColBox2 p, #tripleColBox3 p,
#quadColBox1 p, #quadColBox2 p, #quadColBox3 p, #quadColBox4 p
{
	/* margin-top:			0px; */
}




/******************************************************************************/
/* Content area styles                                                        */
/******************************************************************************/


/******************************************************************************/
/* Main Table                                                                 */
/* A conventional table-based (rather than div-based) layout.                 */
/******************************************************************************/
.mainTable
{
	padding:				0px;
/*	border-collapse:		collapse; */
	background:				#FFFFFF;
/*	
	border:					1x solid #CCCCDD;
							-webkit-border-radius: 12px;
							-moz-border-radius: 12px;
*/
}

.mainTable td
{
	padding:				8px;
	vertical-align:			top;
}

.mainTable tr
{
	background:				#EEEEEE;	/* unless overridden by the user by td bgcolor="" */
}

.mainTable, .mainTable p
{
	color:					#333366;
	font-size:				11px;
	line-height:			1.3em;
	margin-top:				0px;
	margin-bottom:			1.5em;
}

.mainTable p.footnote
{
	color:					#9999CC;
}

.mainTable .header, .mainTable .footer, .mainTable .header2
{
	color:					#FFFFFF;
	background:				#BBBBCC;
	text-align:				center;
	font-weight:			bold;
}

td .header2, td .footer
{
	color:					#FFFFFF;
	font-size:				11px;
}

td .header
{
	font-size:				12px;
}


/******************************************************************************/
/* File Table                                                                 */
/* Used for file data, with three "columns": icon, link (filename) and size   */
/******************************************************************************/
.fileTable			/* container to clear those pesky floating divs */
{
	overflow:			hidden;
	width:				100%;
	margin-top:			10px;
	margin-bottom:		20px;
	color:				#333333;	/* text */
}

.fileTable a
{
	color:				#333333;
}

.fileTable .rowIcon,
.fileTable .rowLink,
.fileTable .rowSize,
.fileTable .rowIconH,
.fileTable .rowSizeH,
.fileTable .rowHeader,
.fileTable .rowFooter
{
	position:			relative;
	float:				left;
	display:			block;
	text-align:			left;
	font-size: 			0.9em;
	line-height:		3em;
	text-decoration: 	none;
	
}


.fileTable .rowLinkH
{
	position:			relative;
	float:				left;
	display:			block;
	text-align:			left;
	font-size: 			0.9em;
	line-height:		2em;
	text-decoration: 	none;
	
}

.fileTable .rowIcon,
.fileTable .rowLink,
.fileTable .rowSize
{
	height:				32px;
	background:			#FFFFFF;
	border-bottom:		1px solid #DDDDDD;
}
 
.fileTable .rowIconH,
.fileTable .rowLinkH,
.fileTable .rowSizeH
{
	height:				48px;
	background:			#FFFFFF;
	border-bottom:		1px solid #DDDDDD;
}

.fileTable .rowIconH,
.fileTable .rowIcon,
.fileTable .rowHeader,
.fileTable .rowFooter
{
	padding-left:		8px;
}

.fileTable .rowIcon,
.fileTable .rowIconH

{

	width:				24px;
	border-left:		1px solid #DDDDDD;
	text-align:			center;
}

.fileTable .rowLink,
.fileTable .rowLinkH

{
	padding-left:		8px;
	width:				247px;
}

.fileTable .rowSize,
.fileTable .rowSizeH
{
	padding-left:		8px;
	width:				73px;
	border-right:		1px solid #DDDDDD;
}

/* alternate row colours */
.fileTable .rowSize.hilite,
.fileTable .rowLink.hilite a
{
	color:				#EE0000;
}

/* alternate row colours */
.fileTable .rowIcon.alt,
.fileTable .rowLink.alt,
.fileTable .rowSize.alt
{
	background:			#EEEEEE;
}

.fileTable .rowHeader
{
	font-weight:		bold;
	width:				360px;	/* must add up to rowIcon + rowLink + rowSize */
	height:				24px;
	line-height:		26px;
	 background:			#EEEEEE; 
	border:				1px solid #DDDDDD;
						-webkit-border-top-left-radius:		12px;
						-webkit-border-top-right-radius:	12px;
						-webkit-border-bottom-left-radius:	0px;
						-webkit-border-bottom-right-radius:	0px;
						-moz-border-radius-topleft:			12px;
						-moz-border-radius-topright:		12px;
						-moz-border-radius-bottomleft:		0px;
						-moz-border-radius-bottomright:		0px;
 }
 
.fileTable .rowFooter
 {
	width:				360px;	/* must add up to rowIcon + rowLink + rowSize */
	height:				10px;
	top:				-1px;	/* erase line above */
	background:			#EEEEEE;
	border:				1px solid #DDDDDD;
						-webkit-border-top-left-radius:		0px;
						-webkit-border-top-right-radius:	0px;
						-webkit-border-bottom-left-radius:	12px;
						-webkit-border-bottom-right-radius:	12px;
						-moz-border-radius-topleft:			0;
						-moz-border-radius-topright:		0;
						-moz-border-radius-bottomleft:		12px;
						-moz-border-radius-bottomright:		12px;
 }
 
 /* colour variants */
.fileTable.red .rowHeader,
.fileTable.red .rowFooter
{
	background:			#FFEEEE;
}

.fileTable.blue .rowHeader,
.fileTable.blue .rowFooter
{
	background:			#DDDDFF;
}






 .fileTable .rowIcon p
 {
	font-size: 			0.5em;
 }



/******************************************************************************/
/* Solid standout frame, with rounded corners (at least, on the Mac!).        */
/* Use this for major tasks.                                                  */
/******************************************************************************/
.standout-solid
{
	position:			relative;
	left:				0px;
	background-color:	#FFFFFF;
	border:				1px solid #DDDDDD;
						-webkit-border-radius: 12px;
						-webkit-box-shadow: 0px 2px 4px #CACACA;
						-moz-border-radius: 12px;
						-moz-box-shadow: 0px 2px 4px #CACACA;
	margin-bottom:		24px;
	padding-left:		10px;
	padding-right:		10px;
}

/*
	Dotted standout frame, with square edges and small, grey text.
	Use this for examples and "Did you know?" topics. This is the
	quintissential "standout" box.
*/
.standout-dotted
{
	position:			relative;
	left:				0px;
	background-color:	#FFFFFF;
	border:				1px solid #BBBBBB;
	/*
						-webkit-border-radius: 12px;
						-moz-border-radius: 12px;
	*/
	border-style:		dotted;
	margin-bottom:		14px;
	padding-left:		10px;
	padding-right:		10px;
}


/*
	Yellow-backed standout frame with small grey text. Use this for
	important notes and warnings.
*/
.standout-yellow
{
	position:			relative;
	left:				0px;
	background-color:	#FFFFDD;
	border:				1px solid #DDDDCC;
						-webkit-border-radius: 12px;
						-moz-border-radius: 12px;
	margin-bottom:		24px;	/* white space after box */
	padding-left:		10px;
	padding-right:		10px;
}

.standout-dotted p, .standout-yellow p
{
	font-size:			8pt;
	line-height:		12pt;
	text-decoration:	none;
	color:				#444444;
	margin-bottom:		10px;	
}


/*
 	Grey-backed standout frame.
*/
.standout-grey
{
	position:			relative;
	left:				0px;
	background-color:	#EEEEEE;	/* #F6F6FF; */
	border:				1px solid #EEEEEE;
						-webkit-border-radius: 12px;
						-moz-border-radius: 12px;
	
	margin-top:			12px;	/* white space before box */
	margin-bottom:		12px;	/* white space after box */
	
	padding-top:		10px;
	padding-bottom:		10px;
	padding-left:		20px;
	padding-right:		20px;
}

.standout-grey #leftColBox,
.standout-grey .leftColClass,
.standout-grey #rightColBox
.standout-grey .rightColClass
{
	width:				328px;
	/*border:				1px solid;*/
}




/* use this to have pictures hanging in the text, with some padding around them */
.hangingLeftPictureBox
{
	padding-right:		10px;
	padding-bottom:		10px;
	position:			float;
	float:				left;
}


.hangingRightPictureBox
{
	padding-left:		10px;
	padding-bottom:		10px;
	position:			float;
	float:				right;
}




/**********************************************************************/
/* This should be the last content box on the page. It holds our      */
/* copyright string, which should appear within the outer grey box    */
/* beneath the content box.                                           */
/**********************************************************************/
#copyrightBox
{
	clear:				both;
	height:				20px;
	margin-top:			4px;
	font-size:			8pt;	
	text-align:			center;
	color:				#AAAAAA;
	color:				#666699;
	position:			relative;
	
}

/* horizontal line */
.hr-grey
{
	height:				1px;
	border-bottom:		1px solid #CCCCCC;
}


/*
 *	Simple two-column list - designed for form input, and used for the
 *	for the Contact, Feedback, Support Request and Registration pages.
 *
 */
.rowTitle, .rowData
{
	float:				left;
	position:			relative;
	margin-bottom:		18px;
	text-align:			left;
}
.rowTitle
{
	left:				0px;
	width:				150px;
	color:				#666666;
}

.rowData
{
	width:				580px;
}

.rowStop
{
	clear:				both;
}




/* Miscellaneous */
/* displays a "new" graphic in the corner of the frame */
.newCornerBox
{
	left:					-1px;
	top:					-1px;
	position:				absolute;
	height:					128px;
	width:					128px;
	background-image:		url('../images/new-corner.png');
	z-index:				1;	/* above default layer */
}

.smallNewCornerBox
{
	left:					-1px;
	top:					-1px;
	position:				absolute;
	height:					64px;
	width:					64px;
	background-image:		url('../images/new-corner-small.png');
	background-position:	center;
	z-index:				1;	/* above default layer */
}



.newFeatureText
{
	background-color:		#FFFFCC;
	font-style:				italic;
	font-size:				0.75em;
/*	font-size:				14px; */
	font-weight:			lighter;
}



/******************************************************************************/
/* Hot News Headlines                                                         */
/******************************************************************************/
#quadFeatureRow
{
	clear:				both;	/* clear any floats above */
	position:			relative;
	left:				20px;
	width:				820px;	/* allow for margin on RHS of last featureRowBox */
	height:				145px;
	margin-bottom:		20px;
	/*border:				1px dotted #FF0000;*/	/* debug */
}

.quadFeatureCell
{
	float:				left;
	left:				0px;
	width:				174px;	/* = 800/4 - 2*8 - 11 + 1 (192 incl. border)*/
	height:				135px;	/* = 130 - 2*8 - 2 (145 incl. border)*/
	padding-left:		8px;
	padding-right:		8px;
	padding-top:		4px;
	padding-bottom:		4px;
	margin-right:		11px;
	z-index:			0;
	text-align:			center;
	background-color:	#FFFFFF;
	border:				1px solid #CCCCDD;
						-webkit-border-radius: 12px;				/* Apple extension */
						-moz-border-radius: 12px;					/* Apple extension */

	position:			relative;
}

.quadFeatureCell h1, .quadFeatureCell h2, .quadFeatureCell h3
{
	font-size:			12px;
	line-height:		16px;
	margin-top:			0px;
	margin-bottom:		0px;
	color:				#000000;
	text-decoration:	none;
}

.quadFeatureCell h2
{
	font-family: 		Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:			11px;
	font-weight:		normal;
	margin-bottom:		4px;		/* extra space before picture */
	color:				#666666;
}

.quadFeatureCell h3
{
	font-family: 		Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:			10px;
	font-weight:		normal;
	width:				174px;	/* so that centring works */
	letter-spacing:		-1px;
	margin-top:			8px;
	color:				#666666;
}


/******************************************************************************/
/* Triple feature: three cells arranged side-by-side across the page          */
/* As used on the Sales Index page.                                           */
/*                                                                            */
/* To get clickable links and a nice button background on these cells, embed  */
/* a "clickButton" and "clickButtonBackground" div inside.                    */
/******************************************************************************/
#tripleFeatureRow
{
	clear:				both;			/* clear any floats above */
	margin-left:		10px;
	margin-right:		10px;
	margin-bottom:		0px;
	margin-top:			-10px;
	position:			relative;
	width:				820px;
	
	float:				left;
	display:			block;
	overflow:			hidden;
	border:				none;
}


.tripleFeatureCell
{
	position:			relative;
	float:				left;
	background:			#FFFFFF;
	width:				221px;
	height:				160px;	/* must be taller than the tallest content */
	margin:				10px;
	padding:			15px;
	
	text-align:			center;
	z-index:			0;

	border:				1px solid #CCCCDD;
						-webkit-border-radius: 12px;
						-moz-border-radius: 12px;

/*
	background-image:	url('../images/button-gradient-200px.png');
	background-repeat:	repeat-x;
*/
}

.tripleFeatureCell h3
{
	margin:				0;
	text-decoration: 	none;

	font-size:			1.3em;
	font-weight:		normal;
	margin-top:			10px;
	margin-bottom:		10px;
	color:				#333333;
	z-index:			0;
}

.tripleFeatureCell p
{
	margin-top:			0px;
	font-size: 			12px;
	color:				#666666;
	z-index:			0;
}



/*
 *
 *	Div click button
 *
 *	In order to make a DIV clickable, so that the entire DIV acts
 *  like a link, embed this DIV inside another DIV that also has
 *	graphics and/or text.
 *
 *	EXAMPLE:
 *
 *	<div class="container">
 *		<div class="clickButtonBackground"> button image behind content </div>
 *		<div class="clickButton"><a href="index.html"> hot region </a></div>
 *			 button content here 
 *			<h1>This is a button</h1>
 *		</div>
 *	</div>
 *
 *	Notes:  in order to get clickable behaviour across the entire
 *	button, this DIV needs to be at the same, or a higher level, than
 *	the rest of the container content. This means that we, unfortunately,
 *	can't have a button image here.
 *
 */
.clickButton
{
	position:			absolute;
	left:				0px;
	top:				0px;
	width:				100%;
	height:				100%;;
	z-index:			99;		/* has to be on top */
/*	background:			#EEEEFF;	*/	/* background for debugging */

	border:				0px solid #CCCCDD;
						-webkit-border-radius: 12px;
						-moz-border-radius: 12px;
}

.clickButton a
{
	display:			block;
	width:				100%;		/* link fills container */
	height:				100%;
	border:				0px solid #6666FF;
						-webkit-border-radius: 12px;
						-moz-border-radius: 12px;
}

.clickButton a:hover
{
	background:			#6666FF;
	opacity:			0.15;	/* CSS3 syntax, but doesn't seem to work on IE Win */
	filter:				alpha(opacity=15);	/* for IE win, n.b., percentage! */
}

.clickButtonBackground
{
	position:			absolute;
	left:				-1px;		/* because of 1px border */
	top:				-1px;		/* because of 1px border */
	width:				100%;
	height:				100%;
	;
	z-index:			-1;			/* so image appears behind the container content */
	/*	background:			#EEEEFF;	*/	/* background for debugging */
	
	border:				1px solid #CCCCDD;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	/* background-image:	url('../images/button-gradient-200px.png'); */
	background-repeat:	repeat-x;
	margin-top: 20px;
}