/* CrystalMaker Software CSS definitions for fonts */

/* {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;
	background-image:	url('../images/lattice_tile.gif');
}

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;
	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-bottom-right: 18px;		/* Mozilla */
							-moz-box-shadow: 0px 2px 4px #CACACA;		/* Mozilla */
/*
	overflow: auto;
	overflow: hidden;
*/
}

/**********************************************************************/
/* Logo Frame                                                         */
/**********************************************************************/
#logoBox
{
	background-color:		#CCCCFF;
	white-space:			nowrap;
	margin-left:			auto;
	margin-right:			auto;
	background-image:		url('../images/cms_logo.gif');
	background-repeat:		no-repeat;
	background-position:	top left;
	border-bottom:			1px solid #AAAAFF;

	position:				relative;
	height:					54px;
	width:					840px;
}


 /* container for a search field in the top right-hand corner */
#logoSearchBox
{
	right:					8px;
	top:					12px;
	background-color:		#CCCCFF;	/* same as header box */
}

/* Search box classes: hilited or un-hilited */
.searchFieldHilite, .searchFieldClear
{
	width:					114px;	/* = 150px - padding-left - padding-right */
/*	height:					31px; */
		height:					20px;		/* required to get Firefox to work */
		padding-top:			10px;		/* required for Firefox to work */
	padding-left:			24px;
	padding-right:			12px;
/*	font-size:				8pt;	*/

	font-size:				11px;
	line-height:			11px;

	position:				absolute;
	vertical-align:			center;
	background-position:	0px 1px;
	background-repeat:		no-repeat;
	background-position:	center;

	border:					none;
	outline-style:			none;
}


.searchFieldHilite
{
	color:					#333333;
	background-image:		url('../images/search-box-hilite.png');
}

.searchFieldClear
{
	color:					#AAAAAA;
	background-image:		url('../images/search-box-clear.png');
}



/**********************************************************************/
/* Navigation Bar: "Home | Products | Sales | Support | News"         */
/**********************************************************************/
#global-nav
{
	position:				float;
	width:					840px;
	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:					140px;
	height:					18px;
	text-align:				center;
	vertical-align:			middle;
}

/* button up style */
#global-nav a
{
	background-color:		#FFCCFF;
	border-top:				1px solid #FFDDFF;
	border-left:			1px solid #FFDDFF;
	border-right:			1px solid #CCAACC;
	border-bottom:			1px solid #CCAACC;
	font-size:				10px;
	line-height:			18px;
	color:					#333366;
	display:				block;
	width:					138px;
	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#products #gn-products a,
body#sales    #gn-sales    a,
body#support  #gn-support  a,
body#news     #gn-news     a,
body#contact  #gn-contact  a
{
	background-color:		#AA33AA; 
	border-top:				1px solid #884488;
	border-left:			1px solid #884488;
	border-right:			1px solid #CCAACC;
	border-bottom:			1px solid #CCAACC;
	font-weight:			bold;
	color:					#FFFFFF;
	text-decoration:		none;
}

/* button "up" - hover */
#global-nav a:hover
{
	color:					#FFFFFF;
	text-decoration:		none;
	background-color:		#CC66CC; 
	border-left:			1px solid #CCAACC;
	border-top:				1px solid #CCAACC;
}


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



/**********************************************************************/
/* 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.                                                           */

/* PRODUCTS */
#whatis.outerBox			#sn-whatis a,
#whatsnew.outerBox			#sn-whatsnew a,
#gallery.outerBox			#sn-gallery a,
#techspecs.outerBox			#sn-techspecs a,
#download.outerBox			#sn-download a,
#buynow.outerBox			#sn-buynow a,

#silica.outerBox			#sn-silica a,
#proteins.outerBox			#sn-proteins a,
#periodic-tables.outerBox	#sn-periodic-tables	a,
#chalcogenides.outerBox		#sn-chalcogenides a,
#crystal-search.outerBox	#sn-crystal-search a,

/* SALES */
#howto.outerBox				#sn-howto a,
#licensing.outerBox			#sn-licensing a,
#faq.outerBox				#sn-faq a,
#software.outerBox			#sn-software a,
#extras.outerBox			#sn-extras a,

/* SUPPORT */
#register					#sn-register a,
#updates					#sn-updates a,
#docs						#sn-docs a,
#advice						#sn-advice a,
#tutorials					#sn-tutorials a,
#forum						#sn-forum a,
#suggest					#sn-suggest a,
#request					#sn-request a,

/* NEWS */
#archive.outerBox			#sn-archive a,

/* CONTACT */
#location.outerBox			#sn-location a,
#sales.outerBox				#sn-sales a,
#support.outerBox			#sn-support 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;
}



/*
#section1.outerBox			#sn-1 a,
#section2.outerBox			#sn-2 a,
#section3.outerBox			#sn-3 a,
#section4.outerBox			#sn-4 a,
#section5.outerBox			#sn-5 a,
#section6.outerBox			#sn-6 a,
#section7.outerBox			#sn-7 a,
#section8.outerBox			#sn-8 a,
#section9.outerBox			#sn-9 a,
{
	color:					#999999;
	cursor:					default;
}
*/




/**********************************************************************/
/* HeaderBox: main section title here, e.g., "SingleCrystal"          */
/**********************************************************************/
#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:				0px;
	
	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;
/*	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 .rowHeader,
.fileTable .rowFooter
{
	position:			relative;
	float:				left;
	display:			block;
	text-align:			left;
	font-size: 			0.9em;
	line-height:		3em;
	text-decoration: 	none;
}

.fileTable .rowIcon,
.fileTable .rowLink,
.fileTable .rowSize
{
	height:				32px;
	background:			#FFFFFF;
	border-bottom:		1px solid #DDDDDD;
}
 
.fileTable .rowIcon,
.fileTable .rowHeader,
.fileTable .rowFooter
{
	padding-left:		8px;
}

.fileTable .rowIcon
{

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

.fileTable .rowLink
{
	padding-left:		8px;
	width:				247px;
}

.fileTable .rowSize
{
	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 */
}


/* displays a "new" graphic in the corner of the frame */
.demoCornerBox
{
	right:					-1px;
	top:					-1px;
	position:				absolute;
	height:					84px;
	width:					84px;
	background-image:		url('../images/demo-corner.png');
	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;
}


/*
#cse-search-results
{
	background:			#FFEEEE;
	width:				700px;
	border:				1px solid #FF0000;
}
*/