/* CrystalMaker CSS Definitions for Products pages */

#galleryContainer h2
{
	margin-left:		auto;
	margin-right:		auto;
	text-align:			center;
	letter-spacing:		-0.06em;
	font-size:			15px;
	line-height:		20px;
	font-weight:		normal;
	margin-top:			0px;
	margin-bottom:		20px;
	color:				#888888;

}

/*******************************************************************************
 Products grid

 A block element is an element that takes up the full width available,
 and has a line break before and after it.
*******************************************************************************/
.productItem
{
 	float:				left;
 	position:			relative;
 	display:			block;
	width:				240px;
	margin-left:		20px;
	margin-bottom:		20px;
	margin-top:			20px;
	background:			#FFFFFF;
/*
margin:	20px;
left:	-10px;
top:	-10px;
*/
	border:				none;
 }
 
.productItem.first
{
	margin-left:		0px;
}

.productItem.centred
{
	clear:				both;
	float:				none;
	margin-left:		auto;
	margin-right:		auto;
}

.productItem h3, .productItem p, .productItem a
{
	text-decoration: 	none;
	color: 				#000;
}

.productItem h3
{
	margin-bottom: 		0.25em;
	font-size:			1.6em;
	font-weight:		normal;
}

.productItem p
{
	font-size: 		.8em;
}


/*******************************************************************************
 Product Bar

 This is a row of links that appears below the item description and gives
 quick access to specific pages.
*******************************************************************************/
.productBar
{
	list-style-type:	none;
 	margin-left:		0;
 	padding:			0;
 	height:				1.3em;
}

.productBar li
{
	float:				left;
	text-decoration		none;
	background-color:	#DDDDEE;
 	
 	text-align:			center;
 	border-top:			1px solid #EEEEFF;
 	border-left:		1px solid #EEEEFF;
 	border-bottom:		1px solid #CCCCDD;
 	border-right:		1px solid #CCCCDD;
}

.productBar li a
{
	padding:			0em 1em;
	text-decoration:	none;
	display:			block;
	color:				#666699;
	/*border-right:		1px #FFFFFF solid;*/
	font-size:			.85em;
}

.productBar li a:hover
{
	background-color:	#666699;
	color:				#FFFFFF;
	text-decoration:	none;
}


/*******************************************************************************
 Tech Specs styles & Version History

 Here we have styles for the various product "tech specs" pages and product
 version history.
*******************************************************************************/
/*
	Table of Contents
*/
#contentsRow
{
	width:					100%;
	position:				relative;
	overflow:				hidden;	/* clears floats */
	margin-top:				15px;
	margin-bottom:			20px;
}

#contentsRowText
{
	float:					left;
	left:					0px;
	width:					500px;
	min-height:				128px;		/* matches height of picture box on RHS */
	margin-right:			20px;
	padding-left:			20px;
	padding-bottom:			0px;
	position:				relative;
	border:					1px solid #DDDDDD;
							-webkit-border-radius: 12px;
							-moz-border-radius: 12px;
	background-color:		#EEEEFF;
}

#contentsRowText h4
{
	margin-top:				10px;
	margin-bottom:			10px;
	font-size:				1.2em;
	color:					#AAAACC;
}

/* we design the summary list to be split into two columns */
#contentsRowText ul
{
	margin-top:				0px;
	margin-left:			0px;
	padding-left:			0px;
/*	list-style-position:	inside; */		/* bullet is placed flush with text */
	list-style-type:		none;		/* dispense with bullets */
	float:					left;
	
	width:					49%;
}

#contentsRowText li a
{
	color:					#333333;	/* don't show coloured links: too messy when we have a list of many links! */
}

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



/* This <div> appears on the right-hand side of the summary box and should
	contain the product icon */
#contentsRowPicture
{
	float:					right;
	text-align:				right;
	position:				relative;
}




/* system requirements, based on "standout-grey" in main.css */
#sysReqsBox
{
	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;
}

#sysReqsBox #leftColBox,
#sysReqsBox #rightColBox
{
	width:				328px;
	/*border:				1px solid;*/
}



/*
 technical specifications start here
*/
#techSpecsBox, #versionHistoryBox
{
}

#techSpecsBox h2, #versionHistoryBox h3
{
	margin-top:				20px;
	padding-top:			20px;
	border-top:				1px solid #DDDDDD;
}

#versionHistoryBox h3				/* version number uses this style */
{
	font-size:			18px;
	margin-bottom:		0px;
}

#versionHistoryBox h4				/* release date uses this style */
{
	font-weight:		normal;
	color:				#999999;
	margin-top:			11px;
	margin-bottom:		0px;
	font-size:			11px;
}


#versionHistoryBox ol, #versionHistoryBox ul
{
	margin-left:		0px;
	padding-left:		20px;
}


/*******************************************************************************
 "In Action" index
*******************************************************************************/
#moreActionBox
{
}

#moreActionBox h2
{
	text-align:			center;
	font-size:			13px;
	color:				#999999;
}

#moreActionBox p
{
	font-size:			10px;
	line-height:		15px;
	color:				#666666;
}

.headerImage
{
	width:				120px;
	height:				90px;
	border:				0px;

	background:			#CCCCFF;
	padding:			0px;
						-webkit-border-radius: 4px;
						-moz-border-radius:    4px;
}

.headerImage:hover
{
	background:			#EEEEEE;
	opacity:			0.0;
	filter:				alpha(opacity=0);
}

.sixBoxClass
{
	display:			block;
	float:				left;
	width:				120px;
	padding-left:		3px;
	padding-right:		3px;
	background:			#FFFFFF;
	text-align:			center;
}

.sixBoxClass h4
{
	font-size:			11px;
	line-height:		14px;
	margin-top:			8px;
	margin-bottom:		12px;
	font-weight:		normal;
	color:				#333333;
}

.sixBoxClass a
{	
	background:			#FFFFFF;
	color:				#666666;
	position:			absolute;
	top:				131px;
	
	width:				102px;
	height:				72px;
	text-align:			center;
	font-size:			11px;
	line-height:		14px;
	text-decoration:	none;
	border:				1px solid #CCCCCC;
						-webkit-border-radius: 4px;
						-moz-border-radius:    4px;
	padding:			8px;
	opacity:			0.0;
	filter:				alpha(opacity=0);	/* for IE win, n.b., percentage! */
}

.sixBoxClass a:hover
{
	opacity:			1.0;
	filter:				alpha(opacity=100);	/* for IE win, n.b., percentage! */
}

.sixBoxClass.active a:hover
{
	opacity:			0.0;
	filter:				alpha(opacity=0);	/* for IE win, n.b., percentage! */
}



.sixBoxClass.active h4
{
	color:				#CCCCCC;
}

.sixBoxClass.active .headerImage
{
	opacity:			0.3;
	filter:				alpha(opacity=30);	/* for IE win, n.b., percentage! */
}