/*<meta />*/

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

body
{
	font-family: Tahoma, Arial, sans-serif;
	background-color: #f3f3f3;
}

html.home-topic	/*Used on home topic to override padding set in the skin*/
{
	
}

html.home-topic .body-container	/*Overrides padding set in the skin*/
{
	padding: 0;
}

html.home-topic .main-section > .outer-row	/*Overrides padding set in the skin when in tablet/mobile*/
{
	max-width: 100%;
	padding: 0;
}

/* Hide the topic menu on the home page */

.sidenav-wrapper
{
	display: none;
}

/* Hide the topic menu on the home page */

.nav-search-wrapper
{
	display: none;
}

.menu-icon span
{
	display: none;
}

div.home-footer
{
	background-color: #20318c;
	padding: 1% 2%;
}

/* Link default colors */

a:link
{
	color: #20318c;
}

a:visited
{
	color: #20318c;
}

a:focus
{
	color: #20318c;
}

a:hover
{
	color: #ff0000;
}

.menu-content a:hover
{
	background-color: #969696;
	color: #ffd700;
}

.links-dropdown a:hover
{
	color: #ffd700;
}

.links-content a:hover
{
	background-color: #969696;
	color: #ffd700;
}

a:active
{
	color: #ffffff;
}

MadCap|dropDownHotspot a:active
{
	color: #62afff;
}

link-visited-focus-hover-active h1	/* Product Title */
{
	font-weight: bold;
	font-size: 20pt;
	color: #20318c;
}

h2
{
	font-weight: 700;
	font-size: 18pt;
	color: #ffffe0;
	margin-top: 0;
	margin-right: 12px;
	margin-left: 0;
	margin-bottom: 16px;
	padding: 0;
}

h3
{
	font-weight: bold;
	font-size: 14.0pt;
}

h4
{
	font-weight: bold;
	font-size: 12.0pt;
	mc-heading-level: 0;
}

h5
{
	font-weight: bold;
	font-size: 10.0pt;
	mc-heading-level: 0;
}

h6
{
	font-weight: bold;
	font-size: 8.0pt;
	mc-heading-level: 0;
}

p
{
	font-family: Tahoma, Arial, sans-serif;
	font-size: 1em;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.2em;
	/* letter-spacing: 0.25; */
}

p.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #fff;
}

p.footer a
{
	color: #fff;
	text-decoration: none;
}

ol,
ul
{
	letter-spacing: .25;
	line-height: 20pt;
}

img
{
	border: none;
	max-width: 100%;
}

a.Popup
{
	
}

MadCap|expandingHead
{
	font-style: italic;
	font-weight: normal;
	cursor: hand;
	text-decoration: none;
	color: #006600;
}

MadCap|expandingBody
{
	color: #777777;
	font-style: italic;
}

MadCap|dropDownBody
{
	padding: 10px 10px;
}

.dropDownBody p,
li
{
	color: white;
	font-family: Arial, Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

.dropDownBody ul,
ol
{
	margin: 0;
	padding-top: 5px;
}

MadCap|dropDown
{
	border-bottom: 1px solid #dadada;
	mc-image-position: left;
	mc-image-spacing: 10px;
	mc-open-image: url('../Images/minus.png');
	mc-closed-image: url('../Images/plus.png');
	padding: 10px 0;
}

MadCap|dropDownHotspot
{
	cursor: hand;
	text-decoration: none;
	color: #ffffe0;
	font-size: 14pt;
	font-weight: 500;
	border-bottom: none;
}

MadCap|xref
{
	color: #076685;
	font-weight: bold;
	mc-format: '{para}';
	text-decoration: underline;
}

div.home-layout
{
	padding: 1% 2%;
	overflow: visible;
}

/* Add a border to divide sections */

div.Border
{
	content: "  ";
	padding: 5px 0px;
	height: 20px;
	width: 100%;
	border-top: solid 1px #ffd700;
}

div.home-section
{
	padding: 2% 0;
	border-bottom: solid 1px #ffd700;
}

MadCap|breadcrumbsProxy
{
	border-bottom-width: 0;
	color: #888888;
}

MadCap|slideshowBullet.active
{
	background-color: #ffd700;
}

/* top splash image container */

div.topic-hero
{
	padding: 2%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #005BD4;
}

/* Header within the top splash image */

div.topic-hero h1
{
	color: #fffff4;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 40pt;
	text-align: center;
	/* shadow to lift text off the backgound */
	text-shadow: 2px 2px 20px rgba(0,0,0,0.90);
}

/* Home tiles are the large boxes beneath the menu that display side-by-side in desktop view. */

div.home-tiles
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.home-tiles::before
{
	content: ' ';
	display: table;
}

div.home-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #62afff;
	padding: 2%;
	border-radius: 3px;
	/* border: 2px solid #ffd700; */
}

div.home-tiles > div:nth-child(1)
{
	width: 49%;
	margin-left: 0%;
}

div.home-tiles > div:nth-child(2)
{
	width: 49%;
	margin-left: 2%;
}

/* Layout for the large boxes beneath the menu that display side-by-side in desktop view. */

div.home-tiles-layout
{
	mc-grid-row: true;
	margin-right: auto;
	height: 425px;
	overflow: scroll;
	overflow-x: auto;
	overflow-y: auto;
	padding: 1%;
	padding-left: 1%;
	margin-left: auto;
}

div.home-tiles-layout::before
{
	content: ' ';
	display: table;
}

div.home-tiles-layout::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.home-tiles-layout > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-tiles-layout > div:nth-child(1)
{
	width: 33.33333%;
	margin-left: 0%;
}

div.home-tiles-layout > div:nth-child(2)
{
	width: 66.66667%;
	margin-left: 0%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 4px;
	padding-right: 4px;
}

/*
div.home-tiles-layout p
{
	line-height: 1.2;
}

*/

/* =========== GRID MENU =========== */
/* This is the grid menu that contains links to the topics */
/* Grid Menu Container */
/* Large box beneath the header and search bar that contains the entire menu grid. */

div.MenuBox
{
	padding: 1%;
	background-color: #62afff;
	margin: auto;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	/* Optional color border can be set here. */
	/* border: 2px solid #ffd700; */
}

/* Text witin the menu box and above the menu grid cells. Says something like "Tell me about..." */

.MenuBox h1
{
	color: #ffffe0;
	margin-top: 6px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 1px;
	text-align: center;
}

/* Responsive Grid Cells */

/* This is the responsive output that contains the menu cells. It goes from five cells across in desktop mode, 
    to three in tablet mode, to one in mobile. See the tablet and mobile overrides in later sections.*/

div.MenuCells
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.MenuCells::before
{
	content: ' ';
	display: table;
}

div.MenuCells::after
{
	content: ' ';
	display: table;
	clear: both;
}

/* These are the rounded cells that appear in the grid rows. */

div.MenuCells > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	background-color: #F9F9F9;
	height: 3em;
	border-radius: 5px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

/* Sets overall width of each cell, taking into account the margins defined above.*/

div.MenuCells > div:nth-child(n)
{
	width: 18%;
}

/* Offset menu in every fifth cell so that it displays to the left and doesn't overspill the right side of the page.*/

div.MenuCells > div:nth-child(5n) div.menu-content
{
	left: -5.2em;
}

/* Grid Cell Menu Styles */
/* These styles set the text layout and colors for the top-level topics and the menu links */
/* This container positions the dropdown content within the responsive layout defined below. */

.menu-dropdown
{
	position: relative;
	display: inline-block;
}

/* The menu overlay makes text appear to be a solid image so that touchscreens like iPads 
don't try to select the text on a tap. */

.menu-mask
{
	display: inline-block;
	padding: 0px 5px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* This is the container that holds the topic links. It is hidden until a mouseover event. */

.menu-content
{
	display: none;
	position: relative;
	width: 140%;
	background-color: #f1f1f1;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align: center;
	/* top alignment creates a vertical offset that makes the menu overlap the bottom of the cell. */
	top: -0.2em;
	/* left alignment repositions the menu drop-down to the side. */
	left: 0.2em;
	z-index: 2;
}

/* Show the dropdown menu on a mouseover. */

.menu-dropdown:hover .menu-content
{
	display: block;
}

/* Text that displays in each cell before the user selects the cell. */

.menu-dropdown p
{
	font-family: Arial, Verdana, sans-serif;
	color: #20318c;
	font-size: 1.2em;
	margin: 0;
	padding-top: 8px;
	line-height: 1.2em;
}

/* Allows one to make the cell text a link without it appearing to be a link. */

.menu-dropdown p > a
{
	color: #20318c;
	text-decoration: none;
}

/* In the cell snippet, the category paragraph can uses this alternate, smaller text if the menu cell has to go to two lines. */

p.smallMenuText
{
	font-family: Arial, Verdana, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	padding: 0px 3px;
}

/* Paragraphs that display when the dropdown opens. Each is typically a link. */

.menu-content p
{
	font-family: Arial, Verdana, sans-serif;
	padding: 2px 0px;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2em;
}

/* Styling for the cross-reference or hypertext link within the topic menu. */

.menu-content a
{
	color: #20318c;
	text-decoration: none;
	padding: 8px 2px;
	display: block;
	font-weight: normal;
}

/* Change the color of dropdown links on a hover. */

/* This is the plain line of text that appears at the top of the menu so that touchscreens do not 
   automatically select the first link in the drop-down list.*/

p.menu-topic
{
	font-family: Arial, Verdana, sans-serif;
	background-color: #20318c;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	/*Spreads the letters out wider; optional */
	color: #ffffe0;
	padding: 8px 2px;
	display: block;
}

/* Paragraph for the icon that displays at the top of the menu dropdowns. */

p.menu-icon
{
	height: 20px;
	padding: 2px;
	display: block;
	background-color: #20318c;
	background-image: url('../Images/LinkMenuArrowDown.png');
	background-repeat: no-repeat;
	background-position: center center;
	border-left: thin solid #ffd700;
	border-right: thin solid #ffd700;
	border-top: thin solid #ffd700;
}

/* ========= LINKS IN HOME PAGE HEADER ============ */
/* These are the links at the top of the home page that simulate the Flare "Top Nav" skin */
/* The CSS is similar to the menu grid, but modifed to accommodate a different style of layout */

/* Container that sits to the right of the logo at the top banner. This overlays the Flare output 
  created by the side navigation skin. */

div.topLinksContainer
{
	background-color: transparent;
	position: absolute;
	right: 20px;
	top: 10px;
	width: 100%;
	padding-left: 280px;
	height: 60px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 2;
	/* border is useful for testing but shouldn't display otherwise 
	border: 1px solid aqua; */
}

/* Responsive output that allows the menu links to reflow based on the viewport width. 
   Up to three link headers are possible. */

div.topLinks
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.topLinks::before
{
	content: ' ';
	display: table;
}

div.topLinks::after
{
	content: ' ';
	display: table;
	clear: both;
}

/* Cells that contain each link drop-down. */

div.topLinks > div
{
	float: right;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 15px;
	padding-right: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	height: 60px;
	/* border is useful for testing but shouldn't display otherwise  
	border: 1px solid white; */
}

div.topLinks > div:nth-child(n)
{
	width: 25%;
	margin-left: 0%;
}

/* Container that positions the dropdown content within the links. */

.links-dropdown
{
	position: relative;
	display: inline-block;
}

/* Masks the text appears to be a solid image and touchscreens 
   like the iPad don't select non-linked text when the user taps the text. */

.links-mask
{
	display: inline-block;
	padding: 0px 0px;
	cursor: pointer;
	height: 60px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	-moz-box-sizing: border-box;
	/* border for testing only  
	border: 1px solid red; */
}

/* Dropdown link container. This contains the links that appear when the user clicks or taps
   the top-level link that displays in the banner. This is hidden until the mouseover event. */

.links-content
{
	display: none;
	position: relative;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	background-color: #f1f1f1;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align: center;
	/* top alignment creates a vertical offset that makes the menu overlap the bottom of the containing div. */
	top: -1em;
	z-index: 2;
}

/* Show the dropdown links on a mouseover. */

.links-dropdown:hover .links-content
{
	display: block;
}

/* Text that displays in the main cell at the top of the dropdown. */

.links-dropdown p
{
	font-family: Arial, Verdana, sans-serif;
	color: #ffffe0;
	font-size: 1.1em;
	font-weight: 600;
	margin: 0;
	padding: 0px 5px;
	line-height: 1.2em;
}

/* Style for cross-reference or hypertext link shown on the home page. */

.links-dropdown a
{
	color: #ffffe0;
	text-decoration: none;
}

/* Change color of main text, whether plain text or a link, on hover. */

.links-dropdown p:hover
{
	color: #ffd700;
}

/* Paragraphs that are typically links inside the main link dropdown. */

.links-content p
{
	font-family: Arial, Verdana, sans-serif;
	padding: 2px 0px;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2em;
}

/* Cross reference or hypertext links within the drop-down. */

.links-content a
{
	color: #20318c;
	text-decoration: none;
	padding: 8px 4px;
	display: block;
	font-weight: normal;
}

/* Change color of links in the dropdown on hover */
/* Paragraph for the icon that displays at the top of the link dropdowns. */

p.links-icon
{
	height: 18px;
	padding: 2px;
	display: block;
	background-color: #20318c;
	background-image: url('../Images/LinkMenuArrowDown.png');
	background-repeat: no-repeat;
	background-position: center center;
	border-left: thin solid #ffd700;
	border-right: thin solid #ffd700;
	border-top: thin solid #ffd700;
}

a
{
	color: #20318c;
	font-weight: bold;
	font-size: 11pt;
}

span.SearchHighlight
{
	mc-hidden: unhidden;
	background-color: yellow;
}

@media only screen and (max-width: 1057px)
{
	html.home-topic .body-container
	{
		margin-left: 0;
	}

	/* Hide the tablet/mobile menu icon */

	nav.title-bar .menu-icon
	{
		display: none;
	}

	div.home-tiles > div:nth-child(1)
	{
		width: 49%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(2)
	{
		width: 49%;
		margin-left: 2%;
	}

	div.home-tiles-layout
	{
		height: 475px;
	}

	div.home-tiles-layout > div:nth-child(1)
	{
		width: 90%;
		margin-left: 0%;
		text-align: center;
	}

	div.home-tiles-layout > div:nth-child(2)
	{
		width: 90%;
		margin-left: 5%;
	}

	.menu-icon span
	{
		display: none;
	}

	.menu-content
	{
		width: 110%;
	}

	/* Set the width of the menu grid cells when in tablet mode. */

	div.MenuCells > div:nth-child(n)
	{
		width: 30.333%;
		margin-left: 0%;
		margin-left: 1.5%;
		margin-right: 1.5%;
	}

	/* Reset the menu offset of every fifth cell. */

	div.MenuCells > div:nth-child(5n) div.menu-content
	{
		left: 0.2em;
	}

	/* Give the menu of every third cell an offset to the left. */

	div.MenuCells > div:nth-child(3n) div.menu-content
	{
		left: -2.5em;
	}

	/* Reduce font size of the splash image text */

	div.topic-hero h1
	{
		font-size: 36pt;
	}

	div.topLinks > div
	{
		padding-left: 4px;
		padding-right: 1px;
		padding-top: 1px;
		padding-bottom: 1px;
	}

	div.topLinks > div:nth-child(n)
	{
		width: 25%;
		margin-left: 0%;
	}

	.links-dropdown p
	{
		font-size: 1em;
		line-height: 1.2em;
	}

	.links-content p
	{
		font-size: 1em;
		line-height: 1.2em;
	}
}

@media only screen and (max-width: 597px)
{
	/* Hide the tablet/mobile menu icon */

	nav.title-bar .menu-icon
	{
		display: none;
	}

	div.home-tiles > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.home-tiles > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
		margin-top: 5%;
	}

	div.home-tiles-layout p
	{
		line-height: 1.2;
	}

	div.MenuCells > div:nth-child(n)
	{
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
	}

	div.home-layout
	{
		padding: 0% 1%;
	}

	div.home-tiles-layout
	{
		height: auto;
	}

	div.BlueBox
	{
		padding: 0;
	}

	.BlueBox h1
	{
		padding-top: 10px;
	}

	div.Border
	{
		padding: 0px 0px;
		height: 10px;
		border: none;
	}

	.menu-icon span
	{
		display: none;
	}

	div.topic-hero h1
	{
		font-size: 24pt;
	}

	div.MenuCells > div:nth-child(n) div.menu-content
	{
		left: 0em;
	}

	.menu-content
	{
		left: 0em;
		min-width: 94%;
		width: 94%;
		margin: auto;
	}

	p.footer
	{
		font-size: 0.8em;
	}

	/* Modify the position and operation of the cells that contain each link in the header so
	   that they wrap under the logo in mobile mode. */

	div.topLinksContainer
	{
		background-color: #20318c;
		position: static;
		right: auto;
		top: auto;
		width: 100%;
		padding-left: 0px;
		padding-bottom: 10px;
		height: auto;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		z-index: 0;
	}

	div.topLinks > div
	{
		float: right;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 8px;
		padding-right: 4px;
		padding-top: 8px;
		padding-bottom: 8px;
		text-align: left;
		display: block;
		height: 30px;
	}

	div.topLinks > div:nth-child(n)
	{
		width: 44%;
		margin-left: 2%;
		margin-right: 2%;
	}

	.links-content
	{
		position: relative;
		box-shadow: none;
		text-align: center;
		top: 0.5em;
		z-index: 2;
	}

	.links-mask
	{
		height: auto;
		margin-left: 10px;
	}

	.links-dropdown p
	{
		font-size: 1.0em;
		line-height: 1.2em;
	}

	.links-content p
	{
		font-size: 1.0em;
		line-height: 1.1em;
		padding: 4px 15px;
	}

	.links-content a
	{
		text-decoration: none;
		display: block;
		font-weight: normal;
		padding: 4px 4px;
	}
}

span.SearchHighlight1
{
	color: #000000;
	background-color: #ffff66;
}

span.SearchHighlight10
{
	color: #ffffff;
	background-color: #990099;
}

span.SearchHighlight2
{
	color: #000000;
	background-color: #a0ffff;
}

span.SearchHighlight3
{
	color: #000000;
	background-color: #99ff99;
}

span.SearchHighlight4
{
	color: #000000;
	background-color: #ff9999;
}

span.SearchHighlight5
{
	color: #000000;
	background-color: #ff66ff;
}

span.SearchHighlight6
{
	color: #ffffff;
	background-color: #880000;
}

span.SearchHighlight7
{
	color: #ffffff;
	background-color: #00aa00;
}

span.SearchHighlight8
{
	color: #ffffff;
	background-color: #886800;
}

span.SearchHighlight9
{
	color: #ffffff;
	background-color: #004699;
}