/*<meta conditions="for_template_import.dec_2024" />*/

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

*
{
	margin: 0;
	padding: 0;
}

/* These are the domain color variable colors. Currently the project is using the Marine domain color. Just change the --brand_color variable color to the required color an it will change that color throughout the project. You can add an additional color variable as needed. Make sure to also change the variable in the Content_Styles.css and the sm_brand.css files.

	--DTCC_Green_SAAS: #7AC143;
	--DTCC_Orange_WMS: #F78E1E;
	--DTCC_Blue_CORP: #0096D6;
	--DTCC_Marine_ITP: #00B0AD;
	--DTCC_Sienna_CLEARING: #E85F43;
	--DTCC_Magenta_DERIV: #A0285A;
	--DTCC_Aubergine_DATA: #4f1956;
	--DTCC_MIDNIGHT_BLUE: #003956;
	--DTCC_YELLOW: #e3e431;
	--gray2 #212121;
*/

:root
{
	--brand_color: #A0285A;
	--brand_color_alternate: #A0285A;
	--breadcrumb_standard: #0E5447;
	--breadcrumb_end_state: BDBDBD;
	--breadcrumb_hover: #F6C5544;
	--breadcrumb_highlight: #F6C544;
}

/* This inserts the header background image. There isn't an option to do this in the skin so it is inserted with css. The bottom colored borter is also added via this style. The background and bottom border color can be changed here for each project. Keep in mind that background image does NOT contain the logo or text so I'm assuming it will be common for all other project. Just the border color will change. */

nav.title-bar
{
	border-bottom-style: none;
	border-bottom-color: #e3e431;
	border-bottom-width: 6px;
	padding: 0px;
	/*	background: #ffffff url('../Images/TEMPLATE_header_images/header_background.png') no-repeat left top;*/
	height: 107px;
}

/* SDeLoach added for header */

nav.title-bar.tab-bar
{
	height: 57px;
	background-size: cover;
}

/* These are the styles for the white links in the upper right corner of the header. The div contains the a.Header_Links links. This div is ate the bottom of the master pages and is moved to its position in the upper right corner by a small script that is in each master page */

div.HeaderLinks
{
	margin: 8px 20px 8px 8px;
	z-index: 1000;
	float: right;
}

a.Header_Links
{
	font-size: 12px;
	color: #ffffff;
	padding-left: 20px;
}

/* These are search bar styles */

.search,
.search-bar
{
	display: inline-block;
}

.search-bar._Skins_Search_Bar.mc-component .search-filter-wrapper
{
	display: inline-block;
	right: 70px;
}

.search-bar.search-bar-container._Skins_Search_Bar.mc-component .search-submit,
.search-bar.search-bar-container._Skins_Search_Bar_No_Filter.mc-component .search-submit
{
	border: solid 1px #0096d6;
}

/* this is the div that contains the breadcrumb and toolbar proxy along with the Bookmark and PDF icons that are next to the other toolbar buttons */

div.BCrumb_and_Toolbar
{
	background-color: #ffffff;
	position: fixed;
	margin-left: 7px;
	padding: 16px 0px 5px 0px;
	width: 98%;
	top: 100px;
	border-bottom: 1px solid #797979;
	height: 134px;
	z-index: 9;
}

/* Breadcrumb Styles */

MadCap|breadcrumbsProxy
{
	mc-breadcrumbs-prefix: ' ';
	width: 98%;
	background-color: #ffffff;
	padding-bottom: 5px;
	font-style: normal;
	font-size: 14px;
	line-height: 18px;
	height: 45px;
	mc-breadcrumbs-count: 5;
	mc-breadcrumbs-divider: ' > ';
}

span.MCBreadcrumbsPrefix
{
	margin-left: -10px;
}

a.MCBreadcrumbsLink
{
	padding-left: 10px;
	padding-right: 10px;
	color: #0E5447;
	font-weight: bold;
}

a.MCBreadcrumbsLink:visited
{
	color: #0E5447;
	font-weight: 600;
	text-decoration: none;
}

a.MCBreadcrumbsLink:hover
{
	color: #F6C5544;
	font-weight: 600;
	border-bottom-width: 6px;
}

div.MCBreadcrumbsBox_0,
div.breadcrumbsProxy_1
{
	border-bottom: none;
	float: left;
	display: inline-block;
	width: 85%;
	padding-top: 10px;
}

span.MCBreadcrumbsDivider
{
	margin-left: -3px;
	margin-right: -4px;
}

span.MCBreadcrumbsSelf
{
	margin-right: auto;
}

span.MCBreadcrumbsSelf:last-child
{
	padding-left: 10px;
}

/* These 2 divs contains the body copy of the home page and a topic page.*/

div.content
{
	z-index: -2;
	width: 77.5%;
	margin-left: 21.25%;
	margin-top: 165px;
	margin-bottom: 70px;
	padding: 0px 0px 0px 10px;
}

div.content_home_page
{
	margin-top: 165px;
	padding-top: 0px;
	z-index: -2;
	width: 90%;
	margin-left: 10%;
}

/* This div contains the left side navigation */

div.sideContent_left_navigation
{
	float: left;
	width: 20%;
	position: fixed;
	margin: 115px 0px 10px 0px;
	/*SDeLoach - modified top */
	min-height: 100%;
	padding-top: 0;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	border-right: solid 1px #797979;
}

/* scroll */
/* setup in other stylesheet */

div#smartmenu-accordion
{
	height: calc(100% - 283px);
}

/* scroll */

ul._Skins_menu
{
	height: 100%;
	overflow-y: auto;
	padding-right: 4px;
	margin-right: 0;
}

/* these are the styles for the Related Topics control. These can be adjusted to to meet you needs*/

.MCHelpControl-Related .MCHelpControl-RelatedHotSpot_
{
	background-image: none;
	margin-left: -15px;
	font-family: Arial Narrow, san-serif;
	color: #000000;
	font-size: 18pt;
	line-height: 10pt;
	padding-top: 1in;
	font-weight: bold;
	margin-bottom: 13px;
}

.MCRelatedTopicsControlList
{
	font-size: 14pt;
	margin-top: 20px;
}

ul.MCHelpControlList.MCRelatedTopicsControlList
{
	margin-left: -5px;
	font-size: 14pt;
}

ul.MCHelpControlList.MCRelatedTopicsControlList > li
{
	/*list-style-image: none;
	list-style-type: none;*/
	font-size: 12pt;
}

/* Footer styles */

#White_spacer
{
	background-color: #ffffff;
	position: fixed;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 70px;
	left: 0;
	bottom: 0px;
}

div.home-footer
{
	padding: 5px 18px 2px 0px;
	background-color: #F5EAD9;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 55px;
	text-align: left;
	vertical-align: top;
	border-top: solid 1px #b7b7b7;
}

#footer_left
{
	display: inline-block;
	height: 55px;
	width: 50%;
	padding-top: 6px;
	text-align: left;
	color: #616161;
	font: Roboto;
}

#footer_right
{
	display: inline-block;
	height: 55px;
	width: 48%;
	text-align: left;
	vertical-align: top;
	padding: 10px 0px 2px 0px;
	font: Roboto;
}

a.footer
{
	color: #0E5447;
	font-size: 14px;
	font-family: Roboto;
	font-style: normal;
	font-weight: 500;
}

a.footer:hover
{
	text-decoration: underline;
}

p.footer_links
{
	margin-bottom: 3px;
}

span.footer_divider
{
	margin: 0px 14px 0px 14px;
	color: #AEA69A;
}

p.footer_copyright
{
	font-size: 12px;
	color: #616161;
	font: Roboto;
}

/* Toolbar styles */

div.toolbar
{
	margin-bottom: -3px;
	width: 15%;
	float: right;
	display: inline-block;
	height: 30px;
}

div.toolbar_left
{
	width: 100%;
}

div.toolbar_right
{
	float: right;
}

._Skins_Topic_Toolbar.mc-component .button
{
	margin-right: 8px;
}

/* These styles are for the PDF icon in the toolbar */

a.pdf_button
{
	margin-top: 8px;
	margin-right: 12px;
	background: none;
	padding: 0px;
}

img.pdf_button
{
	max-width: 18px;
}

/* Search highlight colors */

span.SearchHighlight1
{
	background-color: #ffff00;
}

span.SearchHighlight2
{
	background-color: #00ffff;
}

div.hidden
{
	display: none;
}

MadCap|relatedTopicsControlList
{
	font-size: 12pt;
}

MadCap|relatedTopicsControlListItem
{
	font-size: 12pt;
}

MadCap|relatedTopicsControlListItemLink
{
	font-size: 12pt;
}

h1
{
	color: #0E5447;
	border-bottom-color: #0e5447;
}

/* Tablet Styles */

@media screen and (max-width: 1279px)
{
	.menu-icon
	{
		display: block;
	}

	nav.title-bar .menu-icon
	{
		right: 1%;
	}

	nav.title-bar
	{
		background-color: #ffffff;
	}

	div.HeaderLinks
	{
		margin: 8px 76px 8px 8px;
	}

	div.BCrumb_and_Toolbar
	{
		position: relative;
		margin-left: 1.5%;
		padding: 5px 0px 5px 0px;
		width: 97%;
		top: 0px;
	}

	MadCap|breadcrumbsProxy
	{
		padding-right: 0px;
		width: auto %;
		padding-left: 0px;
		margin-left: 0px;
		height: 45px;
	}

	div.MCBreadcrumbsBox_0
	{
		border-bottom: none;
		background-color: #ffffff;
		top: 75px;
		height: auto;
	}

	MadCap|topicToolbarProxy
	{
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #ffffff;
		position: fixed;
		margin-bottom: 5px;
		width: 100%;
		margin-top: -10px;
	}

	._Skins_Topic_Toolbar.buttons
	{
		margin-top: -10px;
	}

	div.sideContent_left_navigation
	{
		display: none;
	}

	div.content,
	div.content_home_page
	{
		z-index: -2;
		width: 97%;
		margin-left: 1.5%;
		margin-right: 1.5%;
		margin-top: 10px;
		padding-top: 0px;
	}
}

/* Phone styles */

@media screen and (max-width: 860px)
{
	nav.title-bar .menu-icon
	{
		right: 10px;
		top: 26px;
	}

	.title-bar .menu-icon span
	{
		height: 34px;
		width: 34px;
	}

	div.HeaderLinks,
	div.toolbar_right,
	div.sideContent_left_navigation
	{
		display: none;
	}

	.search-filter-content
	{
		right: 135px;
	}

	.search-bar._Skins_Search_Bar.mc-component .search-submit-wrapper
	{
		margin-top: 0px;
	}

	div.BCrumb_and_Toolbar
	{
		height: auto;
	}

	div.MCBreadcrumbsBox_0,
	div.breadcrumbsProxy_1
	{
		width: 100%;
		padding-top: 4px;
	}

	div.toolbar
	{
		height: 0px;
	}

	div.content,
	div.content_home_page
	{
		margin-left: 0%;
		Margin-right: 0%;
	}
}

@media print
{
	.title-bar-section.middle > div,
	div.MCBreadcrumbsBox_0,
	MadCap|topicToolbarProxy,
	._Skins_Topic_Toolbar .button,
	nav.tab-bar,
	ul.navigation,
	.title-bar-section a.logo,
	.row.nav-search,
	div.BCrumb_and_Toolbar,
	div.sideContent_left_navigation,
	span.MCTextPopupArrow,
	#White_spacer,
	div.home-footer,
	a.backToTop
	{
		display: none;
	}

	div.content,
	div.content_home_page
	{
		margin-top: -110px;
		padding-top: 0px;
		width: 100%;
		margin-left: 0%;
	}
}

/* Disabled Styles */

abbr,
acronym,
address,
big,
center,
cite,
code,
em,
fieldset,
ins,
kbd,
pre,
samp,
small,
span.boolean,
span.state,
strong,
tt,
var,
MadCap|slideThumbnail.active,
MadCap|helpControlMenuItem.Highlighted,
MadCap|slideshowNavigationControls,
MadCap|slideshowNavigationControls.Previous
{
	/* disables unused styles */
	mc-disabled: true;
}

span.text
{
	
}

/* SDeLoach - footer - added for mobile layout */

@media only screen and (max-width: 767px)
{
	div.body div.home-footer
	{
		height: 100px;
	}

	div.body div#footer_left
	{
		display: block;
		height: auto;
		width: auto;
	}

	div.body div#footer_right
	{
		display: block;
		height: auto;
		width: auto;
	}
}

