/*<meta />*/

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

/*
******************************************************************************************************************************************************
******************************************************************************************************************************************************
**	                                                                                                                                                **
**   Portal_LandingPage.css                                                                                                                         **
**	                                                                                                                                                **
**   Welcome to the THREDD Documentation Portal "PORTAL_LANDINGPAGE" Stylesheet. It contains the elements that control the look and feel of the        **
**   LANDING PAGES on the THREDD Documentation Portal.                                                                                                 **
**	                                                                                                                                                **
**  There are three stylesheets used in the Documentation portal:                                                                                   **
**	                                                                                                                                                **
**   - Portal_LandingPage.css: This stylesheet. Controls the display of the Landing pages.                                                          **
**   - Portal_HomePage.css:    Controls the display of the Home page.                                                                               **
**   - Portal_Styles.css:      Controls the display of the topics in the Documentation Portal                                                       **
**                             Must be used for all topics, including the Home Page and the Landing pages.                                          **
**	                                                                                                                                                **   
**   NOTE: Styles for specific mediums (SCREEN, PRINT, MOBILE, TABLET) are listed at the end of this stylesheet                                     **
**	                                                                                                                                                **
******************************************************************************************************************************************************
******************************************************************************************************************************************************
*/

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - LANDING PAGE GENERAL STYLES
/* ================================================================================================================================================= */

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

html.home-page
{
	mc-community-features: disabled;
}

div.topic-hero	/* Home Page Hero Section */
{
	padding-bottom: 50px;
	padding-top: 50px;
	background-color: var(--Background_White);
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - TOP NAVIGATION BAR STYLES
/* ================================================================================================================================================= */

nav.title-bar	/*Adds bottom border on top navigation bar*/
{
	border-bottom: 1px solid var(--Text_Light_Grey);
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - MADCAP PROXY/EDITOR ASSIGNED STYLES
/* ================================================================================================================================================= */

MadCap|searchBarProxy
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	float: none;
	width: 50%;
}

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

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - LANDING PAGES BODY STYLES
/* ================================================================================================================================================= */

body
{
	color: var(--Text_Dark_Grey);
	font-family: Segoe UI, Arial, Helvetica, Calibri;
	font-style: inherit;
	padding: 0px 0px 1px 1px;
}

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

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - LANDING PAGES HEADING STYLES
/* ================================================================================================================================================= */

h2
{
	font-size: 1.6785em;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - LANDING PAGES PARAGRAPH STYLES
/* ================================================================================================================================================= */

p
{
	font-size: 11.0pt;
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 15pt;
	margin-right: 5%;
	letter-spacing: 0.25;
	widows: 3;
	orphans: 3;
	mc-hyphenate: never;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - LANDING PAGES HYPERLINK STYLES
/* ================================================================================================================================================= */

a.HomePageHyperlink	/* Home Page Hyperlink Property */
{
	color: var(--Hyperlink_Default_Blue);
	font-size: 11.0pt;
	text-decoration: none;
	text-indent: 6pt;
}

a.HomePageHyperlink:hover	/* Home Page Hover Hyperlink Property */
{
	color: var(--Hyperlink_Default_Blue);
	text-decoration: underline;
	font-size: 11.0pt;
	font-weight: 400;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - LANDING PAGES FOOTER
/* ================================================================================================================================================= */

div.footer
{
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--Background_White);
}

div.footer a
{
	text-decoration: none;
	color: var(--Text_Dark_Grey);
}

div.footer p	/* Complex Selector: Any <p> that is contained within div.footer will have the following properties */
{
	font-size: 0.8em;
	color: var(--Text_Dark_Grey);
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER

   This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/

/* ================================================================================================================================================= */

div.home-master-page-footer
{
	margin-top: 50px;
	mc-grid-row: true;
	margin-left: 5%;
	margin-right: auto;
	width: 40%;
}

div.home-master-page-footer::before
{
	content: ' ';
	display: table;
}

div.home-master-page-footer::after
{
	content: ' ';
	display: table;
	clear: both;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER - DESKTOP LAYOUT STYLES
/* ================================================================================================================================================= */

div.home-master-page-footer > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.home-master-page-footer > div:nth-child(1)
{
	width: 25%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(2)
{
	width: 50%;
	margin-left: 0%;
}

div.home-master-page-footer > div:nth-child(3)
{
	width: 25%;
	margin-left: 0%;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - THREE COLUMN LAYOUT USED IN INTRODUCTION TO PAYMENTS GUIDE

   These styles control the layout of the grid on the Home page and Landing pages of the Introduction to Payments Guide for Screen Layout.
   
   /*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.*/

/* ================================================================================================================================================= */

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

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

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

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

div.Three_Column_Layout > div:nth-child(1)
{
	width: 28%;
	margin-left: 3%;
}

div.Three_Column_Layout > div:nth-child(2)
{
	width: 28%;
	margin-left: 3%;
}

div.Three_Column_Layout > div:nth-child(3)
{
	width: 28%;
	margin-left: 3%;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - SCREEN LAYOUT STYLES

   These styles control the layout of the grid on the Home page for Screen Layout.
   
   /*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.*/

/* ================================================================================================================================================= */

div.info-container
{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-top: 12px;
	padding-bottom: 12px;
}

div.info-section
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	padding-top: 12px;
	padding-bottom: 18px;
}

div.info-section::before
{
	content: ' ';
	display: table;
}

div.info-section::after
{
	content: ' ';
	display: table;
	clear: both;
}

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

div.info-section > div:nth-child(1)
{
	width: 27%;
	margin-left: 2%;
}

div.info-section > div:nth-child(2)
{
	width: 27%;
	margin-left: 5%;
}

div.info-section > div:nth-child(3)
{
	width: 27%;
	margin-left: 5%;
	margin-right: 5%;
}

/* ================================================================================================================================================= */

/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - CONTENT STYLES
/* ================================================================================================================================================= */

p.info-title
{
	line-height: 1em;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 0.5px solid var(--Text_Light_Grey);
	font-size: 1.1em;
	font-weight: 400;
	text-align: left;
}

p.info-content
{
	font-size: 0.9em;
	margin-bottom: 12pt;
	margin-right: 0%;
}

p.info-content-hyperlink
{
	margin-top: 3pt;
	margin-bottom: 6pt;
	margin-left: 1%;
}

/*
******************************************************************************************************************************************************
******************************************************************************************************************************************************
**	                                                                                                                                                **
**	Styles after this point are styles that are for specific mediums. If any additional styles are added to this template                           **
**	they will be listed after mediums.                                                                                                              **
**	                                                                                                                                                **
**	[@media tablet] declares styles that will apply when the screen is in tablet view                                                               **
**	[@media mobile] declares styles that will apply when the screen is in mobile view                                                               **
**	[@media printed] declares styles that will apply for printed output                                                                             **
**                                                                                                                                                  **
******************************************************************************************************************************************************
******************************************************************************************************************************************************
*/

@media only screen and (max-width: 1279px)
{
	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

	div.info-section > div:nth-child(1)
	{
		width: 27%;
		margin-left: 2%;
		margin-bottom: 5%;
	}

	div.info-section > div:nth-child(2)
	{
		width: 27%;
		margin-left: 5%;
		margin-bottom: 5%;
	}

	div.info-section > div:nth-child(3)
	{
		width: 27%;
		margin-left: 5%;
		margin-bottom: 5%;
	}

	p.info-title
	{
		font-size: 1.1em;
	}

	p.info-content
	{
		font-size: 0.9em;
	}

	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - HOME PAGE FOOTER - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

	div.footer
	{
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

	div.home-master-page-footer
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(1)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(2)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(3)
	{
		width: 80%;
	}

	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - THREE COLUMN LAYOUT USED IN INTRODUCTION TO PAYMENTS GUIDE - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

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

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

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

@media only screen and (max-width: 767px)
{
	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - INFO CONTAINER/SECTION - MOBILE LAYOUT STYLES
/* ================================================================================================================================================= */

	div.info-section > div:nth-child(1)
	{
		width: 80%;
		margin-left: 0%;
		margin-bottom: 5%;
	}

	div.info-section > div:nth-child(2)
	{
		width: 80%;
		margin-left: 0%;
		margin-bottom: 5%;
	}

	div.info-section > div:nth-child(3)
	{
		width: 80%;
		margin-left: 0%;
		margin-bottom: 5%;
	}

	p.info-title
	{
		font-size: 1.1em;
	}

	p.info-content
	{
		font-size: 0.9em;
		width: 80%;
	}

	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - MASTER HOME PAGE FOOTER - MOBILE LAYOUT STYLES
/* ================================================================================================================================================= */

	div.home-master-page-footer
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(1)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(2)
	{
		width: 80%;
	}

	div.home-master-page-footer > div:nth-child(3)
	{
		width: 80%;
	}

	/* ================================================================================================================================================= */

	/* THREDD CUSTOMIZATION - THREE COLUMN LAYOUT USED IN INTRODUCTION TO PAYMENTS GUIDE - TABLET LAYOUT STYLES
/* ================================================================================================================================================= */

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

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

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