/*<meta conditions="globalCond.GlobalFile" />*/

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

/******************************************************************
CSS variables - when working, need to apply as attrib where used
  
******************************************************************* 

NOTE:  mc-auto-numbers with color must be updated manually with hex code - warning callout text color*/

:root
{
	/* Print colors */
	--TitleGuideType-print-color: #6100DC;
	--TitleGuideType2-print-color: #000000;
	--TitleProduct-print-color: #333333;
	--TitleRevision-print-color: #65666A;
}

/*==Master Page Topic Layout for Online==*/

.main-section	/*This style applies the grey background. This HTML element is not on a master page, it is used at compile time.*/
{
	background: #ffffff;
}

div.content-container	/*Wraps the topic content on the masterpage and provides the white background behind topics.*/
{
	margin-right: 0;
	background-color: white;
	padding: 25px;
	min-height: 95vh;
}

div.side-content
{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 33.33%;
}

div.Leftside-content
{
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 65%;
}

div.home-section
{
	margin-top: 10px;
}

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

body
{
	background-color: #ffffff;
	font-size: 11pt;
	font-family: Lato, 'Gotham Book', 'Segoe UI', Calibri, Verdana, 'Times New Roman', 'Times New Roman Baltic';
}

/* Sets formatting for home page sections */

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

p.HomeTitle	/*Used for subheadings on homepage. Same as p.head2 without margin-top - used in tiles */
{
	font-size: 13pt;
	color: #0f3049;
	font-weight: bold;
	page-break-after: avoid;
}

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

/*======================================================
Code for creating Flexbox tiles not based on menu proxy
========================================================*/

div.FlexContainer
{
	display: flex;
	/* Activates Flexbox Layout */
	/* 	flex-wrap: wrap; Child divs wrap within container */
	flex-flow: row wrap;
	width: 100%;
}

div.FlexContainer > div	/* Applies to divs within FlexContainer */
{
	flex-basis: 16em;
	/* Min width of items in container */
	flex-grow: 1;
	/* Child divs grow to fill avail. width within container */
	margin: 1em;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0,0,0,0.25);
	border: solid 1px;
	background-color: #fff;
	transition: all 0.3s;
}

div.FlexContainer > div:hover	/* Applies to divs within FlexContainer on mouseover */
{
	box-shadow: 0 1px 24px rgba(0,0,0,0.5);
	background-color: #7EDDD3;
}

div.FlexContainer > div > a
{
	display: block;
	padding: 1em;
	color: inherit;
}

/*==================================================================================================================================================
Experimental:  Code for creating Flexbox tiles in menu proxy (Set menu width to 100% in menu proxy skin, and background color to transparent - so css can handle) - squares
====================================================================================================================================================*/

._Skins_LandingPgMenu a.selected	/* hides selected item from menu proxy output */
{
	display: none;
}

._Skins_LandingPgMenu > .has-children > .sub-menu	/* makes menu proxy wrapper a flex container  */
{
	display: flex;
	flex-flow: wrap;
	/*	height: 250px; new */
}

._Skins_LandingPgMenu > .has-children > .sub-menu > .tree-node-leaf	/* formats the flex menu items  */
{
	flex-basis: 6em;
	flex-grow: 1;
	margin: 1em;
	padding: 1em;
	border: solid 1px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.25);
	transition: all 0.3s;
}

._Skins_LandingPgMenu > .has-children > .sub-menu > .tree-node-leaf:hover	/* Applies to divs within FlexContainer on mouseover  */
{
	box-shadow: 0 1px 24px rgba(0,0,0,0.5);
	background-color: #7EDDD3;
}

/*==========
End Flexbox
============ */

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

a:link
{
	color: #076685;
}

a:visited
{
	color: #7D55C7;
}

a:hover
{
	color: #076685;
}

a:active
{
	color: #a82384;
}

a.home-button
{
	display: block;
	padding: 10px;
	text-decoration: none;
	width: 100%;
}

MadCap|dropDownBody	/* May want to merge these drop-down entries with symplr.css */
{
	padding: 10px 30px 0;
}

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

div.HomePg-image
{
	padding: 5%;
	background-image: url('../Images/Home/Group of Diverse People - Gen. CredentialingMod1.jpg');
	background-size: cover;
	background-attachment: fixed;
}

div.HomePg-image h1	/* overlays image at top of home page */
{
	color: #fff;
	font-size: 3.5em;
	text-align: center;
}

p.HomePg-sectionheader
{
	/*	background: #ef4b24; */
	background: #819FBE;
	font-size: 12pt;
	color: #ffffff;
	/*	font-weight: bold; */
	text-align: center;
	padding-bottom: 4px;
	padding-top: 4px;
	margin: 1em;
	padding: 1em;
}

p.HomePg-head2	/* Same as p.head2 without the top margin */
{
	font-size: 13pt;
	color: #0f3049;
	font-weight: bold;
	page-break-after: avoid;
}

p.HomePg-head2-centered	/* Same as p.head2 without the top margin */
{
	font-size: 13pt;
	color: #0f3049;
	font-weight: bold;
	text-align: center;
	page-break-after: avoid;
}

p.HomePg-head2-fancy	/* Same as p.head2 without the top margin */
{
	font-size: 13pt;
	color: #0f3049;
	font-weight: bold;
	page-break-after: avoid;
	border-bottom: solid 2px #000000;
	background-color: #ffe4c4;
	font-style: italic;
}

@media print
{
	body
	{
		background-color: #ffffff;
		font-family: Lato, "Gotham Book", "Segoe UI", Calibri, Verdana, "Times New Roman", "Times New Roman Baltic";
		font-size: 11pt;
	}

	p.TitleGuideType	/*Use variant with this style for first line of printed title.*/
	{
		color: #6100DC;
		font-size: 30pt;
		font-weight: bold;
	}

	p.TitleGuideType2	/*Use variant with this style for first line of printed title.*/
	{
		color: #000000;
		font-size: 26pt;
		font-weight: bold;
	}

	p.TitleProduct	/*Use variant with this style for 2nd line of printed title.*/
	{
		color: #333333;
		font-size: 16pt;
	}

	p.TitleRevision	/*Use variant with this style for 3rd line of printed title. - this is actually Version - need to fix*/
	{
		color: #65666A;
	}
}