/*<meta />*/

@import url('InEightStyles-v2.css');

@import url('InEightLayout-v2.css');

@import url('InEightHeaderFooter-v2.css');

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

/* Set the product color */

:root
{
	--Product-Color: #071e36;
}

div.top-logo
{
	background-image: url('../Images/banners/foreman-contruction-banner-shorts-KL.jpg');
	background-size: cover;
	background-position: right bottom;
	background-repeat: no-repeat;
}

/* Remove or comment out the following if you want to include search filters in the HTML output. */

div.search-filter
{
	display: none;
}

/* Menu bar below search - Topic, Video, Release Notes, Videos - uses a product specific color. */

div.menu-search-container
{
	height: auto;
	width: 100%;
	padding: 0 0 0 15px;
	background-color: #fff;
	mc-hidden: hidden;
}

div.pseudo-menu-container
{
	width: 100%;
	max-width: 1700px;
	overflow: hidden;
	text-align: center;
	mc-hidden: hidden;
	margin: auto;
}

img.middlealignicon
{
	vertical-align: middle;
	padding: 10px;
	max-height: 90px;
}

/*Use this image style for business process workflows*/

img.max-width-no-padding
{
	max-width: 100%;
	border: 1px solid #ebeced;
}

/*a:link
{
	color: var(--Product-Color);
}*/

/* Uncomment the following to hide the search filter categories in the search bar */

/*
div.search-filter
{
	display: none;
}
*/

@media print
{
	div.front-matter h1,
	h1.Lesson,
	h1.Chapter,
	h1.Section
	{
		color: var(--Gray-Medium);
	}
}

@media only screen and (max-width: 1350px)
{
	a.tablelink
	{
		margin-bottom: 8pt;
		margin: 1.12em 0;
		margin-top: 4pt;
	}

	ul.icongridbold
	{
		font-weight: bold;
	}
}

a.documentlink
{
	color: #ff6c0c;
}

table.videoTable
{
	border-spacing: 10px 20px;
	margin-left: 0;
	margin-right: auto;
}

/* Document Version Selection */
/* This container positions the dropdown content within the responsive layout defined below. */

.menu-dropdown
{
	display: block;
	width: 100%;
	height: 208px;
	margin-top: 0;
}

/* 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: block;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Optional styling for paragraph linked to the dropdown. Not needed if a graphic is used. */

.menu-mask > p:first-child
{
	font-family: Stratum, Arial, sans-serif;
	font-size: 1.1em;
	color: #2B3636;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* This is the container that holds the topic links. It is hidden until a mouseover event. */

.menu-content
{
	position: relative;
	top: -1.5em;
	display: none;
	width: 100%;
	padding: 2px 15px 2px 10px;
	cursor: pointer;
	border: 1px solid #e4e7e9;
	box-shadow: 0px 4px 4px 0px rgba(72.5,74.5,75.7,0.15);
	background-color: #ffffff;
	z-index: 2;
}

/* Show the dropdown menu on a mouseover. */

.menu-dropdown:hover .menu-content
{
	display: block;
}

/* Paragraphs that display when the dropdown opens. Each is typically a link. */

.menu-content p
{
	font-family: 'Source Sans Pro Bold', Calibri, sans-serif;
	color: #2B3636;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2em;
}

/* Styling for the hypertext link within the topic menu. */

.menu-content a
{
	color: #2B3636;
	text-decoration: none;
	padding-left: 5px;
	margin: .2em 0;
}

.menu-content a:hover
{
	background-color: #e4e7e9;
	color: #ff6c0c;
}

/* 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-spacer
{
	background-color: transparent;
	padding: 0;
	font-size: 1px;
	line-height: 1px;
}

p.cardtext
{
	font-size: 11pt;
	color: var(--Gray-MediumLight);
	line-height: 1.5;
	min-height: 154px;
}

p
{
	color: var(--Gray-Medium);
}

span.buttontext
{
	text-transform: uppercase;
	font-family: var(--Font-Display) !important;
}

span.tagtext
{
	font-size: 10pt;
	font-family: var(--Font-Text-Main) !important;
}

span.cardfooter
{
	font-size: 10pt;
	color: #a9a9a9;
	line-height: 1;
	font-family: var(--Font-Text-Main) !important;
}

span.noteheader
{
	text-transform: uppercase;
	font-family: var(--Font-Display) !important;
	font-size: 1.1em;
	color: var(--Gray-Medium);
}

span.ideasonsite
{
	text-transform: uppercase;
	font-family: var(--Font-Display) !important;
	font-size: 1.3em;
	color: var(--Green-InEight);
	margin-bottom: 1px !important;
	padding-top: 1rem;
	margin-top: 1.6667rem;
}

/* Heading and paragraph Styles */

h2.card
{
	font-family: var(--Font-Display);
	color: var(--Product-Color);
	/*font-size: 28pt;*/
	text-transform: uppercase;
	mc-hyphenate: never;
	font-weight: 400;
	clear: both;
	font-size: 28px;
}

h2.cardtitle
{
	font-family: var(--Font-Text-Main);
	color: var(--Gray-Medium);
	font-size: 14pt;
	font-weight: bold;
	/*text-transform: uppercase;*/
	mc-hyphenate: never;
	clear: both;
	min-height: 84px;
}

p.cardtext
{
	font-size: 11pt;
	color: var(--Gray-MediumLight);
	line-height: 1.5;
	min-height: 154px;
}

h3.stepbystep
{
	
}

h4.stepbystep-v2
{
	font-family: var(--Font-Header-Normal);
	text-transform: uppercase;
	mc-hyphenate: never;
	font-weight: 400;
	margin-top: 1rem;
	margin-left: 1rem;
}

h4.stepbystep-header
{
	font-family: var(--Font-Display);
	color: var(--Gray-Medium);
	/*font-size: 28pt;*/
	text-transform: uppercase;
	mc-hyphenate: never;
	font-weight: 400;
	clear: both;
}

p.stepbystep
{
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

@media only screen and (max-width: 768px)
{
	p.cardtext
	{
		min-height: 190px;
	}

	h2.cardtitle
	{
		min-height: 112px;
	}
}

@media only screen and (max-width: 600px)
{
	p.cardtext
	{
		min-height: 1px !important;
	}

	h2.cardtitle
	{
		min-height: 1px !important;
	}
}

h1.landing
{
	font-weight: normal;
	font-size: 18pt;
	margin-bottom: 6;
	text-align: left;
	vertical-align: middle;
	padding-top: 0;
	color: var(--Gray-Medium);
}

h4.Video
{
	font-size: 14pt;
	font-weight: normal;
	font-style: normal;
	vertical-align: middle;
}

p.readme
{
	color: #82a63e;
	text-decoration: underline;
	font-size: 11pt;
}

/* Toggler Styles */

MadCap|expandingBody.card
{
	color: var(--Gray-Medium) !important;
	font-family: var(--Font-Text-Main) !important;
	font-style: normal !important;
	font-size: 11pt !important;
	mc-hidden: hidden;
	line-height: 1 !important;
}

MadCap|expandingHead.card
{
	font-family: var(--Font-Text-Main) !important;
	font-size: 11pt !important;
	font-style: normal !important;
	cursor: hand;
	text-decoration: none;
	color: var(--Gray-Medium) !important;
	mc-hidden: hidden;
	line-height: 1 !important;
}

MadCap|toggler.card
{
	mc-closed-image: url('../Images/Icons/chevron-down.svg');
	mc-open-image: url('../Images/Icons/chevron-up.svg');
}

ul.pagelink
{
	list-style-type: none;
	margin-left: -2em;
}

div.tabfont
{
	font-family: var(--Font-Display);
	text-transform: uppercase;
}

/* Image style used for Storyline Modal pop ups */

img.Landscape100-onlythumbnail
{
	max-height: auto;
	max-width: 150px;
	padding: 10px;
	border: 1px solid #ebeced;
}

/* Used for workflow thumbnail images */

.img.imgLandscape100
{
	max-width: 1200px;
	padding: 10px;
	border: 1px solid #ebeced;
	mc-thumbnail-max-height: auto !important;
	mc-thumbnail-max-width: 100px !important;
}

.img.Landscape100
{
	max-width: 1200px;
	padding: 10px;
	border: 1px solid #ebeced;
	mc-thumbnail-max-height: auto !important;
	mc-thumbnail-max-width: 100px !important;
}

/* text style for text in nav pills */

pill-subhead
{
	font-style: var(--Font-Display);
}

/*card header for new branding*/

background-image
{
	background: url('../Icons/integrated-solutions-new-branding_orange-angled-header-bar.jpg') no-repeat center center;
	background-size: cover;
	color: white;
	/* Adjust text color for better visibility */
	text-align: center;
	/* Center the text */
	font-color: #fff;
}

/*Fix for search bar specifically for Google Search */

.search-bar._Skins_Search_Bar.mc-component
{
	display: inline-block;
	width: 60% !important;
	height: 2.5em;
	margin-bottom: -0.55rem !important;
}

