/*<meta />*/

@import url('help_(en-US).css');

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

/* Home Page General Styles*/

h1
{
	/*	background-color: transparent; */
	font-size: 2em;
	color: #5a5a5a;
	padding-bottom: 1em;
}

h2
{
	font-size: 1.75em;
}

h2.SubCenter
{
	text-align: center;
	margin-bottom: 1.2em;
}

h2.home_links
{
	font-size: 1.5em;
	color: #5a5a5a;
	text-align: center;
}

img.Hyperlinked
{
	border-style: none;
}

p
{
	color: #5a5a5a;
	margin-bottom: 8px;
	margin-top: 8px;
	margin-left: 30px;
	margin-right: 30px;
	font-family: Raleway;
	font-size: 1rem;
}

p.intro
{
	color: #ffffff;
	font-size: 1.15em;
	margin-bottom: 20px;
	margin-top: 20px;
}

p.Copyright
{
	font-size: 0.7em;
	text-align: left;
	color: #888888;
	line-height: 1.6em;
	margin: 10px 30px 20px 30px;
}

hr.home
{
	width: 100%;
	height: 2px;
	border: solid 1px #cccccc;
	margin: 20px;
}

/* this style is used to wrap the content in the tiles on the front landing pages to make the full tile a link */

div a.front-tile
{
	padding: 10px;
	display: block;
	text-decoration: none;
	color: #696969;
	font-weight: normal;
	font-size: .9rem;
}

div a.front-tile:hover
{
	color: #2d9bae;
}

div.Two-box > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.Two-box > div:hover
{
	box-shadow: 2px 3px 7px rgba(0,0,0,.25);
}

div.Two-box > div:nth-child(1)
{
	border-radius: 20px;
	background-color: #f5f5f5;
	text-align: center;
	border: none 10px #ffffff;
	margin: 10px;
	width: 50%;
}

div.Two-box > div:nth-child(2)
{
	border-radius: 20px;
	background-color: #f5f5f5;
	text-align: center;
	border: none 10px #ffffff;
	margin: 10px;
	width: 50%;
}

div.Three-box	/*Insert a Three-box div for a three-column responsive layout in a section intro topic. */
{
	mc-grid-row: true;
	margin-left: 40px;
	margin-right: 40px;
}

div.Three-box::before
{
	content: ' ';
	display: table;
}

div.Three-box::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.Three-box > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
}

div.Three-box > div:nth-child(1)
{
	border-radius: 20px;
	text-align: center;
	background-color: #ebebeb;
	border: none 2px #000000;
	margin: 1%;
	width: 31.33%;
}

div.Three-box > div:nth-child(2)
{
	border-radius: 20px;
	text-align: center;
	background-color: #ebebeb;
	border: none 2px #000000;
	margin: 1%;
	width: 31.33%;
}

div.Three-box > div:nth-child(3)
{
	border-radius: 20px;
	text-align: center;
	background-color: #ebebeb;
	border: none 2px #000000;
	width: 31.33%;
	margin: 1%;
}

div.Three-box-links	/*Insert a three column responsive layout for links in a section intro topic*/
{
	mc-grid-row: true;
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 20px;
}

div.Three-box-links::before
{
	content: ' ';
	display: table;
}

div.Three-box-links::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.Three-box-links > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

div.Three-box-links > div:nth-child(1)
{
	width: 31.33333%;
	margin: 1%;
}

div.Three-box-links > div:nth-child(2)
{
	width: 31.33333%;
	margin: 1%;
	border-left: 1px solid #EEE;
	border-right: 1px solid #EEE;
}

div.Three-box-links > div:nth-child(3)
{
	width: 31.33333%;
	margin: 1%;
}

nav.title-bar	/* adds space at the bottom of the top menu bar */
{
	padding-bottom: 20px;
}

.centered-text
{
	text-align: center;
	text-shadow: -20px 10px 50px rgba(0,0,0, 0.99), 5px 5px 50px rgba(0,0,0, 0.99), 20px -10px 50px rgba(0,0,0, 0.99);
}

.center
{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	float: none !important;
	text-align: center;
}

.whiteheader
{
	color: #ffffff;
	font-weight: normal;
}

.off-canvas-content .title-bar .nav-search
{
	display: none;
}

.off-canvas-content .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

/* Home Page Button Styles */

.button
{
	cursor: pointer;
	background-color: transparent;
	width: 200px;
	height: 35px;
	font-weight: bold;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
}

.button.black
{
	border: solid 2px black;
	color: black;
}

.button.black:hover
{
	background-color: #ccc;
}

.button a
{
	display: block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

/* Responsive Header Styles*/

#contentBody > .responsive-header
{
	background-color: transparent;
}

/* Content Section */

#content-section
{
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #e6e6e6;
	margin-top: -40px;
}

#content-section h2
{
	font-weight: normal;
}

.right-section div.button-group,
.left-section div.button-group
{
	margin-top: 20px;
}

#content-section .left-section
{
	padding-right: 20px;
}

#content-section .right-section
{
	padding-left: 20px;
}

.left-section .left-content,
.right-section .right-content
{
	height: 270px;
	margin: 20px;
}

#content-section .right-section .table-images:first-of-type
{
	margin-bottom: 20px;
}

#content-section.mc-blurb p
{
	margin-top: 0;
	margin-bottom: 5px;
}

#content-section.mc-blurb .mc-bullets
{
	margin-top: 10px;
	padding-left: 30px;
	padding-right: 10px;
}

#content-section.mc-blurb .mc-bullets > li
{
	color: #5a5a5a;
	font-size: 14px;
	margin-top: 8px;
	line-height: 1.6em;
}

/* Home Page Topic Hero section*/

div.topichero h1
{
	font-size: 2em;
	margin-top: 1.11em;
	margin-bottom: 0.5em;
	line-height: 100%;
}

div.topichero h2
{
	font-size: 1.75em;
	margin-bottom: 80px;
	line-height: 100%;
}

.search,
.search-bar
{
	margin: 0 auto;
}

/* Home Page Footer */

div.footer
{
	padding-bottom: 40px;
	background-color: #e3f2f2;
	padding-top: 30px;
}

div.footer a
{
	text-decoration: none;
	color: #DADADA;
}

div.footer > div.outer-row
{
	line-height: 30px;
	padding: 0;
}

.footer-logo
{
	max-width: 100%;
}

.footer-links
{
	text-align: left;
}

.footer-links a
{
	padding-right: 15px;
}

.footer-icons
{
	text-align: right;
}

a:visited
{
	color: #e81410;
}

a:hover
{
	color: #b32317;
}

.mc-wrapper .mc-pager.mc-default-pager a:hover
{
	background-color: #2d9bae;
}

.Three-box-links a:hover
{
	text-decoration: underline !important;
}

.footer-icons > a:first-of-type
{
	padding-right: 10px;
}

/* MadCap proxy/editor assigned styles */

MadCap|searchBarProxy
{
	display: block;
	margin-top: 30px;
	margin-bottom: 10px;
}

MadCap|topicToolbarProxy
{
	float: none;
}

MadCap|menuProxy.menu1
{
	mc-toc-depth: 1;
	mc-context-sensitive: True;
}

MadCap|menuProxy.menu2
{
	mc-toc-depth: 1;
	mc-context-sensitive: True;
}

MadCap|slideshow
{
	border-style: none;
	box-shadow: none;
}

MadCap|slideshowCaption
{
	background: none;
	padding-top: 0;
	color: #2a2a2a;
	font-family: raleway;
	font-weight: bold;
	padding: 10px;
	margin: 10px;
	text-align: center;
	vertical-align: bottom;
	font-style: italic;
}

html.HomePage
{
	mc-community-features: disabled;
}

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

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

div.HomeHeroSection > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.HomeHeroSection > div:nth-child(1)
{
	width: 100%;
	/*	margin-left: 0%; */
}

div.HomeMasterPageFooter	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

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

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

div.HomeMasterPageFooter > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

div.HomeMasterPageFooter > div:nth-child(2)
{
	width: 50%;
	margin-left: 0%;
}

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

h3
{
	font-family: Raleway;
	font-style: italic;
	font-weight: bold;
	color: #7e8083;
	font-size: 1.1em;
	text-align: center;
	letter-spacing: 1px;
	margin-top: 5px;
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

div.HomeHero	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

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

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

div.HomeHero > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.HomeHero > div:nth-child(1)
{
	margin: 1%;
	width: 48%;
	background-size: 100% 200px;
	height: 200px;
}

div.HomeHero > div:nth-child(2)
{
	text-align: center;
	margin: 1%;
	width: 48%;
}

/* Search links */

div.flex-search	/* container for links below the Home page search bar */
{
	display: flex;
	flex-wrap: wrap;
	font-size: 9pt;
	margin-left: 20%;
	margin-right: 20%;
}

div.popular_searches	/* popular searches */
{
	padding: 10px;
	flex: 80%;
}

div.search_tips	/* Link to search tips */
{
	padding: 10px;
	flex: 20%;
	text-align: end;
}

/* Medium Layout */

@media only screen and (max-width: 979px)
{
	#content-section .right-section,
	#content-section .left-section
	{
		padding: 0;
	}

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

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

	div.HomeMasterPageFooter > div:nth-child(2)
	{
		width: 50%;
		margin-left: 0%;
	}

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

	div.HomeVideoSection > div:nth-child(1)
	{
		width: 33.33333%;
	}

	div.HomeVideoSection > div:nth-child(2)
	{
		width: 33.33333%;
	}

	div.HomeVideoSection > div:nth-child(3)
	{
		width: 33.33333%;
	}

	div.HomeHero > div:nth-child(1)
	{
		
	}

	div.HomeHero > div:nth-child(2)
	{
		
	}

	div.Three-box-links > div:nth-child(1)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.Three-box-links > div:nth-child(2)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	div.Three-box-links > div:nth-child(3)
	{
		width: 33.33333%;
		margin-left: 0%;
	}
}

/* Small Layout */

@media only screen and (max-width: 767px)
{
	MadCap|searchBarProxy.homeSearchBar
	{
		width: 100%;
	}

	.left-content
	{
		margin-bottom: 60px;
	}

	div.topichero h1
	{
		font-size: 2em;
	}

	div.topichero h2
	{
		font-size: 1.2em;
	}

	#content-section
	{
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.footer-links,
	p.Copyright,
	.footer-icons
	{
		text-align: center;
	}

	div.HomeHeroSection > div:nth-child(1)
	{
		width: 100%;
	}

	div.HomeMasterPageFooter > div:nth-child(1)
	{
		width: 100%;
	}

	div.HomeMasterPageFooter > div:nth-child(2)
	{
		width: 100%;
	}

	div.HomeMasterPageFooter > div:nth-child(3)
	{
		width: 100%;
	}

	div.Three-box > div:nth-child(1)
	{
		width: 100%;
	}

	div.Two-box > div:nth-child(1)
	{
		width: 100%;
	}

	div.Two-box > div:nth-child(2)
	{
		width: 100%;
	}

	div.Three-box > div:nth-child(2)
	{
		width: 100%;
	}

	div.Three-box > div:nth-child(3)
	{
		width: 100%;
	}

	div.Three-box-links > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
		border-top: 1px solid #DDD;
	}

	div.Three-box-links > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
		border-left: none;
		border-right: none;
		border-top: 1px solid #DDD;
	}

	div.Three-box-links > div:nth-child(3)
	{
		width: 100%;
		margin-left: 0%;
		border-top: 1px solid #DDD;
	}

	nav.title-bar
	{
		padding-bottom: 10px;
	}

	h1
	{
		font-size: 1.5em;
	}

	p.intro
	{
		font-size: 1em;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	div.topichero
	{
		height: 300px;
		margin-bottom: 15px;
	}

	div.HomeHero > div:nth-child(1)
	{
		width: 100%;
		background-size: 100% 150px;
		height: 150px;
	}

	div.HomeHero > div:nth-child(2)
	{
		width: 100%;
	}

	div.flex-search
	{
		display: none;
	}
}

div.title-text
{
	text-align: center;
	border: solid 0px #ffffff;
	font-family: Raleway;
	color: #5a5a5a;
}

div.Search
{
	font-family: Raleway;
	color: #5a5a5a;
	font-size: 9pt;
	width: 100%;
	padding-bottom: 200px;
}

div.topichero
{
	width: 100%;
	margin-bottom: 20px;
	background-size: contain;
	background-position-x: center;
	background-position-y: center;
	padding-bottom: 60px;
	font-family: Raleway;
	height: 250px;
	padding-top: 20px;
}

p.announcement
{
	bottom: 9px;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	margin-top: 20px;
	line-height: 100%;
	border-bottom: solid 1px #e6e6e6;
	border-left: solid 1px #e6e6e6;
	border-right: solid 1px #e6e6e6;
	border-top: solid 1px #e6e6e6;
	padding-left: 20px;
	left: 2px;
	min-height: 30px;
	text-align: center;
	clear: both;
	margin-left: 50px;
	padding-top: 20px;
	margin-right: 50px;
	padding-right: 20px;
	margin-bottom: 5px;
	padding-bottom: 20px;
	width: auto;
}

/* Override default slideshow default link colors */

.mc-wrapper .mc-pager.mc-default-pager a.active
{
	background-color: #2d9bae;
}

/* Remove underlines from links in What's New, Popular Topics, and Latest Integration Guide tiles */

.Three-box-links a
{
	text-decoration: none !important;
}

/* Shows an underline for the links in What's New, Popular Topics, and Latest Integration Guide tiles */
/* this div is used on template pages to wrap around the breadcrumbs proxy and the language menu, so they are placed in the same row */

div.breadcrumbsArea
{
	display: flex;
}

/* this style sets the width of the first div within the breadcrumbsArea, which is the breadcrumbs proxy, to be the full width of the page minus the 180 px of the language menu */

div.breadcrumbsArea > div:nth-child(1)
{
	width: calc(100% - 180px);
}

/* this style sets the width of the second div within the breadcrumbsArea, which is the language menu, to be 180 px */

div.breadcrumbsArea > div:nth-child(2)
{
	width: 180px;
}

/* this style is applied to the language menu select element on template pages where there are no breadcrumbs so that it aligns to the right side of the page just like on pages with the breadcrumbs */

.languageMenu
{
	float: right;
}