/* CrystalMaker Software CSS definitions for text styles */
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');
}

body.blank
{
	margin:				20px;
	background-image:	none;
}

p
{
	font-size:			1.25em;	//14px;
	line-height:		1.6em;
	color:				#666666;
	margin-bottom:		18px;	
}

p.grey
{
	color:				#999999;
}

p.red
{
	color:				#FF0000;
}

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;
	
}

.figure
{
	font-size:			1.0em;
	color:				#999999;
	padding-top:		8px;
	padding-bottom:		8px;
}

.figure p
{
	font-size:			12px;
	line-height:		18px;
	color:				#999999;
}

.figure .caption
{
	font-size:			12px;
	line-height:		18px;
	color:				#999999; 
	text-align:			left;
	margin-bottom:		12px;
}

/* Small figure caption (p class="figureCaption") */
.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;
}

p.intro
{
	font-size:			1.4em;
	line-height:		1.6em;
}


/*******************************************************************************
 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:			#EEEEF6;	/* Cambridge Light Blue! */
	margin-left:				auto;
	margin-right:				auto;
	vertical-align:				top;
	max-width:					980px;		/* (Liquid Layout) */
	position:					relative;
	height:						auto;
	margin-bottom:				20px;
	border:						1px solid #DDDDDD;
	border-bottom-left-radius:	18px;
	border-bottom-right-radius:	18px;
	box-shadow:					0px 2px 4px #CACACA;
}

img
{
	max-width:					 100%;		/* (Liquid Layout) */
}

/*******************************************************************************
 Logo Frame
 ******************************************************************************/
#topBanner
{
	background-color:		#CCCCFF;
	white-space:			nowrap;
	margin-left:			auto;
	margin-right:			auto;
	border-bottom:			1px solid #AAAAFF;
	position:				relative;
	min-height:				54px;			/* (Liquid Layout) */
	max-width:				980px;			/* (Liquid Layout) */
}

#logoBox
{
	position:				absolute;
	left:					0px;
	top:					0px;
	height:					54px;
	width:					169px;

	display:				inline-block;
	background-image:		url('../images/cms_logo.gif');
	background-repeat:		no-repeat;
	background-size:		169px 54px;	/* Was 180 x 54 */
	background-position:	top left;
}

#logoBox:hover
{
	background-image:		url('../images/cms_logo_rotating.gif');
}

#logoBox a
{
	display:				inline-block;
	width:					100%;
	height:					100%;
}


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

/* Search box classes: hilited or un-hilited */
.searchFieldHilite, .searchFieldClear
{
//	width:					114px;	/* = 150px - padding-left - padding-right */
	max-width:				114px;	/* (Liquid Layout) */
	margin:					0px;
	padding:				0px;
	padding-left:			24px;
	padding-right:			12px;
	font-size:				11px;
	line-height:			11px;

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

	border:					none;
	outline-style:			none;
}

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

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

/*******************************************************************************
 Navigation Bar: "Software | Support | Shop | News | About
 ******************************************************************************/
#global-nav
{
	max-width:				980px;	/* (Liquid Layout) */
	margin:					0px;	/* remove vertical spacing after list */
	padding:				0px;	/* remove any offset of "li" items */
	height:					28px;	/* was 19 px */
	list-style:				none;
	background-color:		#FFCCFF;
}

/* basic button attributes */
#global-nav li
{
	float:					left;
	width:					20%;
	text-align:				center;
	vertical-align:			middle;
	letter-spacing: 		1px;
}

/* button up style */
#global-nav a 
{
	display:				block;
	font-size:				13px;		/* Was 10 px */
	line-height:			27px;		/* Defines the text offset */
	height:					28px;		/* ust come AFTER line-height, so reset size */
	color:					#333366;	/* font colour */
	width:					100%;
	border-bottom:			1px solid #CCAACC;
	border-left:			1px solid #CCAACC;

	/* Allows us to set box size excluding borders */
	-webkit-box-sizing:		border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing:		border-box;    /* Firefox, other Gecko */
  box-sizing:				border-box;         /* Opera/IE 8+ */
}

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

/* button "down" style */
/* e.g., if body id = home, the link with id = nav-home is shown in a "down" state. */
body#software	#gn-software	a,
body#store		#gn-store		a,
body#support	#gn-support		a,
body#news		#gn-news		a,
body#about		#gn-about		a
{
	background-color:		#AA33AA; 
	font-weight:			bold;
	color:					#FFFFFF;
	text-decoration:		none;
	border-bottom:			1px solid #990099;
}



/*******************************************************************************
 Dropdown menus 
 
 We use a transition effect to make the menu appear to drop down. We achieve
 this by:
 
 For initial content:-
 
 1. Specify max-height = 0 for the content.
 2. Specify overflow = hidden.
 
 When hovering:-
 
 - Set max-height = 100% with an "ease-in" transition.
 
 N.B., For any sub-menus to work, we'll need to set the nav-menu-content's
 overflow = visible, as otherwise only parts of the submenu that overlap with 
 the nav-menu-content will be visible (typically only the drop shadow!).
 
 Note that the traditional method of setting display = none or display = block
 to hide or show items can't be used here. That's because we want to animate
 the display, using an ease-in or ease-out transition, and hence we rely on
 the overflow instead.
*******************************************************************************/
.nav-menu
{
}

.nav-menu-content
{
	position:			absolute;
	background-color:	#FFEEFF;
	min-width:			20%;
	box-shadow:			0px 8px 16px 0px rgba(0,0,0,0.2);
	padding:			0px 0px;
	z-index:			23;
	letter-spacing: 	0px;

	/* For pull-down effect (turn off the display:none/block mechanism) */
	max-height:			0;				// For start animation.
	transition:			max-height 0.5s ease-out;
	overflow:			hidden;
}

.nav-menu:hover .nav-menu-content
{
	/* For pull-down effect (turn off the display:none/block mechanism) */
	max-height:			100%;
	transition:			max-height 0.5s ease-in;
}

.nav-menu-content:hover
{
	overflow:			visible;	 // Allows submenu to become visible.
}

.nav-menu-content a
{
	cursor:				pointer;
}


.nav-menu-separator
{
	height:					3px;
	background-color:		#EEDDEE;//#FFEEFF;
}

/* Override the block highlight for a selected tab */
#global-nav #gn-software	.nav-menu-content a,
#global-nav #gn-store		.nav-menu-content a,
#global-nav #gn-support		.nav-menu-content a,
#global-nav #gn-news		.nav-menu-content a,
#global-nav #gn-about		.nav-menu-content a
{
	color:					#333366;
	text-decoration:		none;
	background-color:		#FFEEFF; 
	border-top:				0px;
	border-bottom:			1px solid #EEDDEE;
	border-left:			1px solid #EEDDEE;
	border-right:			1px solid #EEDDEE;
	font-weight:			normal;
}

#global-nav #gn-software	.nav-menu-content a:hover,
#global-nav #gn-store		.nav-menu-content a:hover,
#global-nav #gn-support		.nav-menu-content a:hover,
#global-nav #gn-news		.nav-menu-content a:hover,
#global-nav #gn-about		.nav-menu-content a:hover
{
	color:					#FFFFFF;
	background-color:		#CC66CC; 
	border-left:			1px solid #AA33AA;
	border-bottom:			1px solid #AA33AA;
}

/*
 For the submenu we use a regular display none/block mechanism, c.f., the
 max-height transition used for the main menu (nav-menu) items.
 */
.nav-submenu
{
	min-width:			20%;
	z-index:			32;
}

.nav-submenu-title a
{
	background-image:		url('../images/next-icon.png');
	background-repeat:		no-repeat;
	background-position-x:	right 4px;
	background-position-y:	center;
	background-size:		10px 10px;
}

.nav-submenu-content
{
	position:			absolute;
	left:				100%;
	background-color:	#CCCCCC;
	box-shadow:			0px 8px 16px 0px rgba(0,0,0,0.2);
	min-width:			100%;
	transform:			translate(0, -28px);	// Shift the box upwards
	padding:			0px 0px;
	z-index:			1;
	letter-spacing: 	0px;
//	border-top:			1px solid #EEDDEE;

	/* For pull-down effect */
	max-height:			0;				// For start animation.
	transition:			max-height 0.1s ease-out;
	overflow:			hidden;
}

.nav-submenu:hover .nav-submenu-content
{
	/* For pull-down effect (turn off the display:none/block mechanism) */
	max-height:			100%;
	transition:			max-height 0.1s ease-in;
}







/*******************************************************************************
 ******************************************************************************/






/*******************************************************************************
 Section Links
 ******************************************************************************/
#section-nav
{
	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 */
	min-height:				36px;
	line-height:			24px;
	list-style:				none;
}

/* list element styles */
#section-nav li
{
	font-size:				12px;
	padding-top:			10px;
	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;
	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="faqs" class="outerBox"> and one of the
 links within this <div> has id="sn-faqs", then this will be shown in the
 specified style.
 ******************************************************************************/
 
/* PRODUCTS */
#whatis.outerBox			#sn-whatis a,
#whatschanged.outerBox		#sn-whatschanged a,
#gallery.outerBox			#sn-gallery a,
#tours.outerBox				#sn-tours a,
#quicktour.outerBox			#sn-quicktour a,
#videotutorials.outerBox	#sn-videotutorials a,
#techspecs.outerBox			#sn-techspecs a,
#whatsnew.outerBox			#sn-whatsnew a,
#download.outerBox			#sn-download a,
#update.outerBox			#sn-update a,
#buynow.outerBox			#sn-buynow a,

/* STORE */
#prices.outerBox			#sn-prices a,
#licence-agreement.outerBox	#sn-licence-agreement a,
#licence-types.outerBox		#sn-licence-types a,
#faqs.outerBox				#sn-faqs 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,
#structures					#sn-structures a,
#suggest					#sn-suggest a,
#request					#sn-request a,

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

/* ABOUT */
#location.outerBox			#sn-location a,
#history.outerBox				#sn-history a,
#news.outerBox				#sn-news a,
#awards.outerBox			#sn-awards a,
#careers.outerBox			#sn-careers 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;
}




/*******************************************************************************
 HeaderBox: main section title here, e.g., "SingleCrystal"
 ******************************************************************************/
#headerBox
{
	top:					0px;
	min-height:				72px;		/* (Liquid Layout) */
	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-weight:			bold;
	font-size:				24px;
	line-height:			36px;
}

#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;
	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;
	
	position:				relative;
	height:					auto;
	border:					1px solid #CCCCDD;
	border-radius:			12px;

	overflow:			hidden;		/* We hide anything that doesn't fit into */
									/* the div. This is useful for our tall   */
									/* columns with vertical lines, and       */
									/* ensures that each column appears with  */
									/* the same height.                       */
}

.contentBoxVerticalPadding
{
	height:					22px;		/* Should be same height as navigation bar */
}



.contentBoxClass.noPadding
{
	padding-left:			0px;
	padding-right:			0px;
}

/*
 ContentBoxClass is designed to be repeated vertically, so add space at 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 */
}

.contentBoxClass.black				/* for use with galleries */
{
	background-color:			#000000;
	color:						#FFFFFF;
	border:						0px solid #CCCCDD;
}


/* 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;
	border-top-left-radius:				12px;
	border-top-right-radius:			12px;
	border-bottom-left-radius:			0px;
	border-bottom-right-radius:			0px;
}

.contentBoxClass.footer
{
	text-align:				left;
	height:					24px;
	padding-bottom:			0px;
	border-top-left-radius:				0px;
	border-top-right-radius:			0px;
	border-bottom-left-radius:			12px;
	border-bottom-right-radius:			12px;
}

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

.contentBoxClass.contentRoundedBottom
{
	border-top-left-radius:				0px;
	border-top-right-radius:			0px;
	border-bottom-left-radius:			12px;
	border-bottom-right-radius: 		12px;
}

.contentBoxClass.contentRoundedTop
{
	border-top-left-radius:				12px;
	border-top-right-radius:			12px;
	border-bottom-left-radius:			0px;	
	border-bottom-right-radius: 		0px;	
}

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

/* 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;
	padding-left:		20px;
	padding-right:		20px;
	margin-top:			0px;
	margin-bottom:		0px;
	font-weight:		normal;
}

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

#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;
	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;
	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;
	font-size:			18px;
	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;
	max-width:			439px;
	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;		/* We hide anything that doesn't fit into */
									/* the div. This is useful for our tall   */
									/* columns with vertical lines, and       */
									/* ensures that each column appears with  */
									/* the same height.                       */
	width:				100%;
}




/*******************************************************************************
 Triple-column layout
 ******************************************************************************/
.tripleCols
{
	column-count:			3;
	-moz-column-count:		3;
	-webkit-column-count:	3;
	column-width:			250px; /* minimum column width */
	margin-top:				8px;
	margin-bottom:			8px;
}

/******************************************************************************
 Double-column layout
 ******************************************************************************/
.doubleCols
{
	column-count:			2;
	-moz-column-count:		2;
	-webkit-column-count:	2;
	column-width:			250px; /* minimum column width */

	margin-top:				8px;
	margin-bottom:			8px;
}

.doubleCols.ruled,			/* Use: "<div class="doubleCols ruled">" */
.tripleCols.ruled
{
	-webkit-column-rule:	1px solid #CCCCCC;
	-moz-column-rule:		1px solid #CCCCCC;
	column-rule:			1px solid #CCCCCC;
}

.tripleCols ul,
.doubleCols ul	/* Clearing top and bottom margins stops the first column starting lower than the others */
{
	margin-top:				0px;
	margin-bottom:			0px;
}

.tripleCols li,
.doubleCols li
{
	margin:					0.5em;;	/* Add some breathing space */
	break-inside:			avoid;
}

.tripleCols p,
.doubleCols p
{
//	margin-top:				4px;
//	margin-bottom:			4px;
	margin:					4px;
	break-inside:			avoid;
}

.tripleCols h4,
.doubleCols h4
{
	color:					#6666CC;
	margin:					4px;
	padding-top:			10px;
	break-inside:			avoid;	
	-webkit-column-break-inside:	avoid;

	break-after:			avoid;
	-webkit-column-break-after:	avoid;
}

.tripleCols h2,
.doubleCols h2
{
	margin:					4px;
	break-inside:			avoid;	
	-webkit-column-break-inside:	avoid;
	break-after:			avoid;
	-webkit-column-break-after:	avoid;
}

.doubleCols .keepTogether,
.tripleCols.keepTogether
{
   display: inline-block;
    width: 100%;
}


/* Force a column break "<div class="colBreak"></div> (doesn't really work property) */
.doubleCols .colBreak,
.tripleCols .colBreak
{
	-moz-column-break-after:	always;
	-webkit-column-break-after:	always;
	break-after:				column;	
}





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


/*******************************************************************************
 Main Table
 A conventional table-based (rather than div-based) layout.
 Usage: <table class="mainTable">
 ******************************************************************************/
.mainTable
{
	padding:				0px;
	background:				#FFFFFF;
}

.mainTable td,
.mainTable th
{
	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 tr.header,  .mainTable td.header,
.mainTable tr.header2, .mainTable td.header2,
.mainTable tr.footer
{
	color:					#FFFFFF;
	background:				#BBBBCC;
	text-align:				center;
	font-weight:			bold;
	font-size:				12px;
}

.mainTable tr.header2,
.mainTable td.header2,
.mainTable tr.footer
{
	font-size:				11px;
}

/*
   Header style for column (cell). Use this for the left-most column, if we
   need to label the row.
*/
.mainTable td.header,
.mainTable td.header2
{
	text-align:				right;
}

/*
	Use this to hide the top-left cell in a table with row- and column headers
*/
.mainTable td.blank p,
.mainTable td.blank
{
	background:				#FFFFFF;
	color:					#333333;
}





/*******************************************************************************
 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;
	border-radius: 		12px;
	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;
	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;
	border-radius:		12px;
	margin-bottom:		24px;	/* white space after box */
	padding-left:		10px;
	padding-right:		10px;
}

/*
 	Blue-backed standout frame: use this for demonstrations, exercises.
*/
.standout-blue
{
	position:			relative;
	background-color:	#EEEEFF;
	border:				1px solid #AAAAFF;
	margin-top:			12px;	/* white space before box */
	margin-bottom:		12px;	/* white space after box */
	
	padding:			10px;
}

/* system requirements, based on "standout-grey" in main.css */
.standout-blue-rounded
{
	position:			relative;
	left:				0px;
	background-color:	#F9F9FF;	/* #F6F6FF; */
	border:				1px solid #CCCCFF;
	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-dotted p,
.standout-dotted li,
.standout-yellow p,
.standout-yellow li,
.standout-blue p,
.standout-blue li
{
	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;
	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;
}

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


.hangingRightPictureBox
{
	padding-left:		10px;
	padding-bottom:		10px;
	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;
	margin-top:			8px;
	margin-bottom:		12px;
	font-size:			8pt;	
	text-align:			center;
	color:				#AAAACC;
	position:			relative;
}


/* Centred text */
.centerText
{
	text-align:			center;
}

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


/*
Simple two-column list - designed for form input, and used for the Contact,
Feedback, Support Request and Registration pages.
 */
.rowTitle, .rowForm, .rowText
{
	float:				left;
	position:			relative;
	margin-bottom:		18px;
}
.rowTitle					/* Right-aligned row title */
{
	left:				0px;
	width:				24%;
	color:				#666666;
	text-align:			right;
	padding-right:		1%;
}

.rowText					/* Use this for address, and other primary text */
{
	width:				75%;
	text-align:			left;
}

.rowForm					/* Use this for form fields, with text as notes */
{
	width:				75%;
	text-align:			left;
	font-size:			8pt;
	color:				#666666;
}

.rowForm textArea
{
	resize:				both;
}

.rowForm .styled
{
	border:				1px solid #CCCCCC;
	padding:			4px;
	width:				440px;
}

.rowForm textArea.styled
{
	width:				440px;
	height:				150px;
	resize:				both;	/* allow resizing */
}

.rowForm a
{
	font-size:			8pt;
	color:				#666666;
	text-decoration:	underline;
}

.rowForm .warning
{
	color:				#CC0000;
}


.rowForm .warning a
{
	font-size:			8pt;
	color:				#CC0000;
	text-decoration:	underline;
}

.rowSkip
{
	clear:				both;
	width:				100%;
	height:				24px;
}

.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;
}




/******************************************************************************
 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 */
	border-left:		1px solid #CCCCDD;	/* this gives us vertical line */


	/* Allows us to set box size excluding borders */
	-webkit-box-sizing:		border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing:		border-box;    /* Firefox, other Gecko */
 	 box-sizing:			border-box;         /* Opera/IE 8+ */
}

.clickButton a
{
	display:			block;
	width:				100%;		/* link fills container */
	height:				100%;
}

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






/*
#cse-search-results
{
	background:			#FFEEEE;
	width:				700px;
	border:				1px solid #FF0000;
}
*/
/*******************************************************************************
 Top Right Button
*******************************************************************************/
#topRightCornerButton
{
	text-align: 		right;
	position: 			absolute;
	top: 				25px;
	right:				20px;
	border:				1px solid #CCCCCC;
	border-radius:		9px;
	padding-left:		8px;
	padding-right:		8px;
}

#topRightCornerButton a
{
	color:				#999999;
}

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


/*******************************************************************************
 Video Tutorial Button
*******************************************************************************/
.VideoTutorialButton
{
	color:				#999999;
	background:			#EFEFEF;
	border:				1px solid #CCCCCC;
	border-radius:		9px;
	text-decoration:	none;
	padding-left:		9px;
	padding-right:		9px;
	padding-bottom:		1px;
	font-size:			0.75em;
}

.VideoTutorialButton a
{
	color:				#999999;
	border-style:		none none none none;
}


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




/*******************************************************************************
 CMS Flush Left List
*******************************************************************************/
ol.flushLeftList
{
	list-style:			inside;
	list-style-type:	decimal;
	padding-left:		0px;
	counter-reset:		item;
}
ol.flushLeftList li
{
	display:			block;
	padding-bottom:		12px;
}

ol.flushLeftList li:before		/* Pseudo element */
{
	content:			counter(item) ". ";
	counter-increment:	item;
	font-weight:		bold;
}

ol.flushLeftList ul
{
	padding-top:		0px;
	counter-reset:		item;
}

ol.flushLeftList ul li
{
	padding-bottom:		0px;
}

ol.flushLeftList ul li:before
{
	content:			"- ";
	font-weight:		bold;
	color:				black;
}






/*******************************************************************************
 adviceTabList
 
 We get our adviceTabList horizontally centred, even when we don't know its
 precise width. We accomplish this by making use of a "ghost" element, which
 we horizontally centre:
 
 1. Ensure that the container (adviceTabContainer) has a "text-align: center;"
 2. Add a "ghost" element:
 
 	#adviceTabContainer:before
 	
 	- This should have a text content (blank), an "inline-block" display style,
 	  full height, and a vertical-align set to "middle".
 
 3. We can now have as many button segments as we wish, e.g.,
 
	<div class="segmentedButtonContainer">
		<div class="segmentedButton">
			<li><a href="link1.html">Button A</a></li>
			<li><a href="link2.html">Button B></a></li>
			<li class="select"><a href="link3.html">Button C</a></li>	<!-- selected button -->
		</div>
	</div>

 ******************************************************************************/
.segmentedButtonContainer
{
	top:					0px;
	width:					100%;
	text-align:				center;
	margin-top:				8px;
}

/* The ghost, nudged to maintain perfect centering */
.segmentedButtonContainer:before
{
	content:				'';
	display:				inline-block;
	height:					100%;
	vertical-align:			middle;
	margin-right:			-0.25em; /* Adjusts for spacing */
}

.segmentedButton
{
	display:				inline-block;	/* for centred display, using our ghost element (see above) */
	vertical-align:			middle;
	list-style:				none;
}


.segmentedButton li
{
	float:					left;
	text-align:				center;
	vertical-align:			middle;
	width:					100px;
	margin-left:			-1px;			// So frames overlap
	margin-right:			0px;
	border:					1px solid #CCCCCC;
	font-size:				14px;
	padding-top:			4px;
	padding-bottom:			4px;
	text-decoration:		none;
	background-color:		#FFFFFF;

	color:					#666666;
}

.segmentedButton.wide li
{
	width:					130px;
}

.segmentedButton a
{
	text-decoration:		none;
	display:				inline-block;	// Makes the link expand to fill the whole space, if width=height=100%
	width:					100%;
	height:					100%;
	color:					#666666;
}



.segmentedButton li:first-child
{
	border-radius:			14px 0px 0px 14px;
}

.segmentedButton li:last-child
{
	border-radius:			0px 14px 14px 0px;
}

.segmentedButton li:hover
{
	background-color:		#CCCCCC;
	color:					#FFFFFF
}

.segmentedButton li.select
{
	background-color:		#666666;
	border:					1px solid #666666;
	color:					#FFFFFF;
}

.segmentedButton li.select a
{
	color:					#FFFFFF;
}

/*******************************************************************************
 Dislosure List
 
 - As used for version history and sales FAQ
*******************************************************************************/
.disclosureList
{
	margin-top:			0px;
	margin-bottom:		20px;
	padding:			0px;
	list-style:			none;
	border:				1px solid #CCCCDD;
	border-bottom:		0px solid #CCCCDD;
}

.disclosureList li
{
	background-image:	url('../images/button-gradient-24px.png');
	background-repeat:	repeat-x;
}


.disclosureList .question
{
	min-height:				17px;
	display:				block;
	position:				relative;
	
	padding:				4px;
	padding-left:			22px;
	border-bottom:			1px solid #CCCCDD;
	margin-top:				0px;
	margin-bottom:			0px;
	background-image:		url('../images/disclosure-right.png');
	background-position:	6px;
	background-repeat:		no-repeat;
}

.disclosureList li.open .question
{
	background-image:		url('../images/disclosure-down.png');
}

.disclosureList .answer li
{
	background-image:	none;
}

.disclosureList .question .version
{
	float:				left;
}

.disclosureList .question .version.major
{
	font-weight:		bold;
}

.disclosureList .question .date
{
	float:				right;
	font-style:			italic;
	font-size:			0.8em;
}

.disclosureList .question a
{
	color:				#333333;
}

.disclosureList .question:hover
{
	cursor:				pointer;
	color:				#6666FF;
}

.disclosureList .answer
{
	display:			none;
	position:			relative;
	padding:			10px;
	text-decoration:	none;
	border-bottom:		1px solid #CCCCDD;
}

.disclosureList li.open .answer
{
	display:			block;
}

.disclosureList .answer ol ul
{
	list-style-type:	circle;
}

/* Header */
.disclosureListHeader
{
	margin-top:			12px;
	margin-bottom:		12px;
	height:				24px;
}

.disclosureListHeader .title
{
	font-size:			16px;
	line-height:		18px;
	margin-bottom:		18px;
	font-weight:		bold;
	float:				left;
}

.disclosureListHeader .controls
{
	float:				right;
}

/*******************************************************************************
 Bare Dislosure List - as used in the pricing/licensing guide
*******************************************************************************/
.disclosureItem
{
}

.disclosureItem .question
{
	display:				block;
	position:				relative;
	
	padding:				4px;
	padding-left:			16px;
	background-image:		url('../images/disclosure-right.png');
	background-position:	0px;
	background-repeat:		no-repeat;
}

.disclosureItem .question:hover
{
	cursor:				pointer;
	color:				#6666FF;
}

.disclosureItem .answer
{
	display:			none;
	position:			relative;
	text-decoration:	none;
}

.disclosureItem .open .question 
{
	background-image:		url('../images/disclosure-down.png');
}


.disclosureItem .open .answer
{
	display:			block;
}



/******************************************************************************/
.disclosureListIcons
{
	margin-top:			0px;
	margin-bottom:		20px;
	padding:			0px;
	list-style:			none;
}


/* "question" */
.disclosureListIcons .itemHeader
{
	height:					32px;
	display:				block;
	position:				relative;
	padding:				4px;
	padding-left:			22px;
	border-bottom:			1px solid #CCCCDD;
	margin-top:				0px;
	margin-bottom:			0px;
	background-image:		url('../images/disclosure-right.png');
	background-position:	6px;
	background-repeat:		no-repeat;
}



.disclosureListIcons .itemHeader:hover
{
	cursor:				pointer;
	color:				#6666FF;
}

.disclosureListIcons li.itemHeader:hover
{
	color:				#6666FF;
}

.disclosureListIcons li.open .itemHeader
{
	background-image:		url('../images/disclosure-down.png');
	border-bottom:			0px solid #CCCCDD;
}

.disclosureListIcons .itemHeader .icon		/* icon here */
{
	float:				left;
	width:				40px;
}

.disclosureListIcons .itemHeader .title		/* title here */
{
	float:				left;
	font-style:			normal;
	margin-top:			8px;
	font-size:			16px;
	width:				380px;
}

/*
.disclosureListIcons li.open .itemHeader .title,
.disclosureListIcons li.open .itemHeader .description 
{
	padding-bottom:		10px;
	border-bottom:		1px dotted #CCCCDD;
}
*/

.disclosureListIcons .itemHeader .description		/* description/slogan here */
{
	float:				left;
	font-style:			normal;
	margin-top:			8px;
	font-size:			10px;
	color:				#666666;
}

.disclosureListIcons .description:hover
{
	color:				#6666FF;
}

/* "answer" */
.disclosureListIcons .itemBody
{
	padding:			4px;
	padding-left:		62px;
	display:			none;
	position:			relative;
	text-decoration:	none;
	border-bottom:		1px solid #CCCCDD;
	color:				#333333;			/* To fix hover color problem */
}

.disclosureListIcons .itemBody .left
{
	float:				left;
	width:				360px;
	margin-right:		20px;				/* margin between left and right */
}
.disclosureListIcons .itemBody .right
{
	float:				left;
	padding:			0px;
	width:				450px;
}

.disclosureListIcons li.open .itemBody
{
	display:			block;
}


/*******************************************************************************
 Superscripts and Subscripts
 ******************************************************************************/
.superscript
{
	font-size:			0.5em;
//	position:			relative;
//	top:				-1em;
	vertical-align:		super;
	line-height:		normal;
}

.subscript
{
	font-size:			0.5em;
//	position:			relative;
//	bottom:				0.5em;
	vertical-align:		sub;
	line-height:		normal;
}


/*******************************************************************************
 Gently-blinking text
 ******************************************************************************/
.blinking{
    animation:blinkingText 1.5s infinite;
}
@keyframes blinkingText{
    0%  {opacity:1.000;}
    10% {opacity:0.985;}
    20% {opacity:0.940;}
    30% {opacity:0.766;}
    40% {opacity:0.800;}
    50% {opacity:0.643;}
    60% {opacity:0.500;}
    70% {opacity:0.342;}
    80% {opacity:0.174;}
    90% {opacity:0.000;}
}

/*******************************************************************************
 Colours
 ******************************************************************************/
.red	{color: #FF0000;}
.blue	{color: #0000FF;}
.magenta{color: #CC00CC;}
.grey	{color: #AAAAAA;}