/**/
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/* Revision 1.6.02, 2018/12/14, RG */
/* ******Desktop Styles****** */
@font-face
{
font-family: "Segoe UI", Arial, sans-serif;
}
body
{
color: #000000;
mc-hyphenate: never;
font-size: 11pt;
line-height: 1.7em;
font-family: Segoe UI;
font-family: "Segoe UI", Arial, sans-serif;
}
p
{
color: #000000;
margin-bottom: 8px;
margin-top: 4px;
}
.center
{
position: relative;
margin-right: auto;
margin-left: auto;
float: none !important;
text-align: center;
}
.centered-text
{
text-align: center;
}
/* Background to Browser Edge */
.off-canvas-content .title-bar .nav-search
{
display: none;
}
.off-canvas-content .main-section > .outer-row
{
max-width: 100%;
padding: 0;
}
/* Responsive Header Styles */
#content-body > .responsive-header
{
background-color: transparent;
width: 100%;
}
/* UI Emphasis Styles */
.uicontrol /* Use for setting names and other field labels */
{
font-weight: bold;
}
.uinavhead /* Use for navigation provided at the top of a help topic. E.g., Settings > Site Settings > Hotspots/Maps */
{
font-weight: bold;
font-size: 14;
}
.uidialog /* Use for the title of a dialog window */
{
font-style: italic;
}
.userInput /* Use to deatil anything a user needs to input into the application, such as drop-down selections or content into a field */
{
font-weight: bold;
font-family: 'Courier New';
}
.nav /* Use this hwen documenting navigation paths for the user to follow in the app*/
{
font-weight: normal;
font-style: italic;
font-family: 'Courier New';
}
/* Transitioning Image Button Styles */
.img-button
{
position: relative;
height: 136px;
width: 136px;
margin: 0 auto;
}
.img-button img
{
position: absolute;
left: 0;
-webkit-transition: opacity 400ms ease-in-out;
-moz-transition: opacity 400ms ease-in-out;
-o-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out;
}
#img-button-container:hover .img-top
{
opacity: 0;
}
.img-text,
.img-home
{
color: #ffffff;
font-weight: bold;
text-decoration: none;
transition: color 400ms;
}
#img-button-container:hover .img-text
{
color: #E82938;
font-weight: bold;
text-decoration: none;
}
#img-button-container:hover .img-home
{
color: #58595B;
font-weight: bold;
text-decoration: none;
}
.img-menu /* Use for images included in UI menu headings. */
{
position: relative;
padding: 4px 16px 16px 16px;
width: 90%;
height: auto;
}
.img-file /* Use for PDF and HTML transitioning images */
{
position: relative;
margin: 0;
}
.img-button img,
.img-menu img,
.img-file img /* Image transitioning effect. */
{
position: absolute;
left: 0;
-webkit-transition: opacity 400ms ease-in-out;
-moz-transition: opacity 400ms ease-in-out;
-o-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out;
}
#img-button-container:hover .img-top /* Forces top image to disappear, giving the illusion of image transformation. */
{
opacity: 0;
}
.img-text /* The text label accompanying the transitioning image. */
{
color: #ffffff;
font-weight: bold;
text-decoration: none;
transition: color 400ms;
}
#img-button-container:hover .img-text /* The color transition for the text label. */
{
color: #E04E39;
font-weight: bold;
text-decoration: none;
}
/* Topic Heading Styles */
div.topic-heading
{
background-image: url('../../img/bg/bg-site.png');
background-size: cover;
background-repeat: no-repeat;
padding-top: 20px;
height: auto;
padding-bottom: 20px;
}
div.topic-heading-sub
{
background-image: url('../../img/bg/bg-trucks.png');
background-size: cover;
background-repeat: no-repeat;
padding-top: 20px;
height: auto;
padding-bottom: 20px;
box-shadow: none;
}
div.topic-heading h1,
div.topic-heading-sub h1
{
font-size: 3.6em;
margin-top: 1.11em;
margin-bottom: 0.5em;
line-height: 100%;
}
div.topic-heading h2,
div.topic-heading-sub h1
{
font-size: 1.8em;
margin-bottom: 40px;
line-height: 100%;
}
.search,
.search-bar
{
margin: 0 auto;
}
/* Home Page Slide Show Styles */
div.slide-show
{
margin-top: 10px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
width: 40%;
}
div.slide-show-quarter
{
margin-top: -50px;
margin-bottom: 60px;
margin-left: auto;
margin-right: auto;
width: 12.5%;
}
.mc-wrapper .mc-caption
{
background: none;
color: #ffffff;
text-decoration: bold;
}
/* Mad Cap proxy/editor assigned styles */
MadCap|searchBarProxy
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
float: none;
width: 25%;
}
MadCap|topicToolbarProxy
{
float: none;
}
p.TOC2
{
margin-left: 20px;
display: 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;
color: #000000;
padding: 0;
padding-top: 0;
}
html.HomePage
{
mc-community-features: disabled;
}
/* Heading Styles */
h1
{
font-size: 22pt;
font-weight: bold;
color: #58595B;
margin-bottom: 8px;
padding-bottom: 10px;
margin-top: 30px;
clear: both;
}
h2
{
font-size: 18pt;
font-weight: bold;
color: #58595B;
margin-bottom: 4px;
margin-top: 20px;
clear: both;
}
h2.h2-center /* Home page label under the product logo. (e.g., "Documentation Portal") */
{
text-align: center;
margin-bottom: 1.2em;
}
.white-header
{
color: #ffffff;
font-weight: normal;
}
h3
{
font-size: 14pt;
font-weight: bold;
font-style: italic;
color: #222222;
margin-bottom: 4px;
margin-top: 16px;
clear: both;
}
h4
{
font-weight: normal;
font-style: italic;
font-size: 14pt;
color: #222222;
margin-top: 16px;
margin-bottom: 0em;
mc-heading-level: 0;
mc-next-tag: p;
clear: both;
}
h5
{
font-weight: normal;
font-size: 12pt;
font-style: italic;
color: #56585c;
margin-top: 16px;
margin-bottom: 0em;
mc-heading-level: 0;
mc-next-tag: p;
clear: both;
}
hr
{
width: 100%;
display: block;
height: 1px;
border: 0;
border-top: 3px solid #e04e39;
margin: 1em 0;
padding: 0;
}
/* Heading Text Styles */
div.heading-text
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
}
div.heading-text::before
{
content: ' ';
display: table;
}
div.heading-text::after
{
content: ' ';
display: table;
clear: both;
}
div.heading-text > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.heading-text > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
/* Image Popup & UI Button Styles */
img.zoom /* Use for **ALL** screenshots of product interfaces. */
{
mc-thumbnail: popup;
mc-thumbnail-max-width: 175px;
mc-thumbnail-max-height: 128px;
max-width: 4in;
page-break-before: avoid;
border-style: solid;
border-width: 2px;
border-color: #E04E39;
padding: 3px;
vertical-align: middle;
}
img.ui-button /* Use for all UI button icons inserted in-line with text instructions. */
{
max-height: 14px;
}
img.zoomuibutton /* Use for UI buttons that need to be zoomed for users to see. */
{
mc-thumbnail: popup;
mc-thumbnail-max-width: auto;
mc-thumbnail-max-height: 15px;
border-style: solid;
border-width: 1px;
border-color: #E04E39;
vertical-align: middle;
}
/* Home Page Footer Styles */
/* Used for footers on Master Pages. Do not include in-line. */
div.footer /* Footer container. */
{
background-image: url('../../img/bg/bg-concrete-d.png');
background-size: cover;
background-repeat: repeat-x;
height: auto;
padding-top: 40px;
padding-bottom: 40px;
text-decoration: none;
color: #D0D0CE;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #e04e39;
}
div.footer a /* Hyperlinks in the div. */
{
text-decoration: none;
color: #ffffff;
}
div.footer > div.outer-row
{
line-height: 30px;
padding: 0;
}
div.page-footer /* Div inside the footer div. Don't ask why. */
{
margin-left: auto;
margin-right: auto;
width: 80%;
}
div.page-footer::before
{
content: ' ';
display: table;
}
div.page-footer::after
{
content: ' ';
display: table;
clear: both;
}
div.page-footer > div /* Left-aligned div that contains the CommAlk logo. */
{
float: left;
box-sizing: border-box;
}
div.page-footer > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
}
div.page-footer > div:nth-child(2) /* Right-aligned div that contains copyright and help links. */
{
width: 75%;
/* width: 50%; In case a third column is added. */
float: right;
}
/* In case we add a third column...
div.page-footer > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
} */
.footer-logo
{
max-width: 100%;
}
.footer-links
{
text-align: right;
}
p.copyright /* Used only on Master Pages. Do not include in-line. */
{
font-size: 0.9em;
text-align: right;
color: #ffffff;
line-height: 1.6em;
margin: 0 0 10px 0;
}
/* Hyperlink Styles */
img.hyperlinked
{
border-style: none;
}
a
{
text-decoration: none;
color: #2d82dc;
transition: color 500ms;
}
a:visited
{
color: #0000cd;
transition: color 500ms;
}
a:visited:hover
{
color: #2d82dc;
}
a:hover
{
color: #0000cd;
}
div.footer a:hover
{
text-decoration: none;
color: #e04e39;
}
p.task-button a:hover
{
color: #ffffff;
background-color: #E04E39;
}
p.video-button a:hover
{
color: #000000;
background-color: #D0D0CE;
}
p.task-button a:hover
{
color: #ffffff;
background-color: #E82938;
}
.breadcrumb-home:hover a
{
color: #E04E39;
}
a.MCBreadcrumbsLink
{
transition: color 500ms;
text-decoration: underline;
}
a.MCBreadcrumbsLink:hover
{
color: #E04E39;
}
/* Task Button Styles */
div.task-buttons
{
mc-grid-row: true;
width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
padding-top: 10px;
padding-bottom: 20px;
}
div.task-buttons::before
{
content: ' ';
display: table;
}
div.task-buttons::after
{
content: ' ';
display: table;
clear: both;
}
div.task-buttons > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 29%;
margin-left: 2%;
margin-right: 2%;
}
div.task-buttons > div:nth-child(1)
{
width: 29%;
margin-left: 2%;
margin-right: 2%;
}
div.task-buttons > div:nth-child(2)
{
width: 29%;
margin-left: 2%;
margin-right: 2%;
}
p.task-button a
{
display: inline-block;
margin: 5px 0px 5px 0px;
border-radius: 10px;
border: solid 2px #222222;
padding: 7px 15px 7px 15px;
font-size: 14pt;
text-align: left;
color: #ffffff;
font-weight: bold;
text-align: center;
background-color: #7BAED6;
text-decoration: none;
-webkit-transition: all 400ms;
-moz-transition: all 500ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
transition: all 400ms;
}
p.task-button img
{
margin-bottom: -5px;
margin-right: 5px;
}
/* Madcap Dropdown Styles */
MadCap|dropDown
{
margin-bottom: 6px;
margin-top: 6px;
mc-closed-image: url('../../img/style/dropdown-arrow-closed.png');
mc-open-image: url('../../img/style/dropdown-arrow-open.png');
border-bottom: solid 2px #D0D0CE;
border-top: solid 2px #D0D0CE;
clear: both;
width: 80%;
}
MadCap|dropDown.SecondLevel
{
margin-left: 10px;
mc-closed-image: url('../../img/style/dropdown-arrow-closed.png');
mc-open-image: url('../../img/style/dropdown-arrow-open.png');
}
/*
MadCap|dropDownBody
{
border-bottom: solid 2px #E04E39;
} */
MadCap|dropDownHotspot
{
color: #E04E39;
font-size: 13pt;
font-weight: bold;
}
MadCap|dropDownHotspot:hover
{
color: #58595B;
}
/* Madcap Cross-reference Styles*/
MadCap|xref
{
color: #2d82dc;
font-weight: bold;
mc-format: '{para}';
text-decoration: underline;
transition: color 500ms;
}
MadCap|xref:hover
{
color: #E04E39;
}
/* List Styles */
li /* List item placement. */
{
margin-bottom: 0px;
padding-top: 2px;
}
ul /* Unordered list bullets. */
{
list-style-image: url('../../img/style/bullets-1.png');
padding-bottom: 0px;
clear: both;
}
ul ul,
ol ul
/* Second-tier bullets for unordered list inside an unordered list. */
/* Second-tier bullets for unordered list inside an ordered list. */
{
list-style-image: url('../../img/style/bullets-2.png');
margin-left: -10px;
}
ul ul ul,
ol ul ul,
ol ol ul
/* Third-tier bullets for unordered list inside an unordered list inside an unordered list. */
/* Third-tier bullets for unordered list inside an unordered list inside an ordered list. */
/* Third-tier bullets for unordered list inside an ordered list inside an ordered list. */
{
list-style-image: url('../../img/style/bullets-3.png');
margin-left: -10px;
}
ol /* Ordered list bullets (none). */
{
list-style-image: none;
padding-bottom: 0px;
}
ol ol,
ul ol
/* Second-tier numbering for ordered list inside an ordered list. */
/* Second-tier numbering for ordered list inside an unordered list. */
{
list-style-type: lower-alpha;
margin-left: -10px;
}
ol ol ol,
ol ul ol,
ul ol ol,
ul ul lo
/* Third-tier bullets for ordered list inside an ordered list inside an ordered list. */
/* Third-tier bullets for ordered list inside an unordered list inside an ordered list. */
/* Third-tier bullets for ordered list inside an ordered list inside an unordered list. */
/* Third-tier bullets for ordered list inside an unordered list inside an unordered list. */
{
list-style-type: lower-roman;
margin-left: -10px;
}
/* Callout Styles */
p.code /* Used for blocks of code that span multiple lines. Use
to start each line with this class. */
{
font-family: 'Courier New', monospace;
background-color: #D0D0CE;
background-repeat: no-repeat;
margin-bottom: 15px;
padding: 8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
span.file,
span.code /* Use to indicate file names and text entries for end users to input. */
{
font-family: 'Courier New', monospace;
}
div.four-cells-home-pg /*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.four-cells-home-pg::before
{
content: ' ';
display: table;
}
div.four-cells-home-pg::after
{
content: ' ';
display: table;
clear: both;
}
div.four-cells-home-pg > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.four-cells-home-pg > div:nth-child(1)
{
width: 16.667%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(2)
{
width: 16.667%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(3)
{
width: 16.667%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(4)
{
width: 16.667%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(5)
{
width: 16.667%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(6)
{
width: 16.667%;
margin-left: 0%;
}
/* Medium Responsive Layout */
@media only screen and (max-width: 1279px)
{
#content-section .right-section,
#content-section .left-Section
{
padding: 0;
}
div.slide-show
{
width: 100%;
}
.left-Section div.button-group > div
{
margin-bottom: 20px;
}
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
div.headingText > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.pdf-section > div:nth-child(1)
{
width: 50%;
}
div.pdf-section > div:nth-child(2)
{
width: 50%;
}
div.pdf-section > div:nth-child(1)
{
width: 50%;
float: none;
margin-left: auto;
margin-right: auto;
}
div.pdf-section > div:nth-child(2)
{
width: 50%;
float: none;
margin-left: auto;
margin-right: auto;
}
div.pdf-section > div:nth-child(1)
{
width: 33.33333%;
}
div.pdf-section > div:nth-child(2)
{
width: 33.33333%;
}
div.pdf-section > div:nth-child(3)
{
width: 33.33333%;
}
div.pdf-button > div:nth-child(1)
{
width: 50%;
}
div.page-footer > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
}
div.page-footer > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.page-footer > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
}
div.homeVideos > div:nth-child(1)
{
width: 33.33333%;
}
div.homeVideos > div:nth-child(2)
{
width: 33.33333%;
}
div.homeVideos > div:nth-child(3)
{
width: 33.33333%;
}
div.four-cells-home-pg > div:nth-child(1)
{
width: 50%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(3)
{
width: 50%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(4)
{
width: 50%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(5)
{
width: 8.3333%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(6)
{
width: 8.3333%;
margin-left: 0%;
}
}
/* Small Layout */
@media only screen and (max-width: 890px)
{
MadCap|searchBarProxy.homeSearchBar
{
width: 100%;
}
.left-content
{
margin-bottom: 60px;
}
div.topic-heading h1
{
font-size: 2em;
}
div.topic-heading h2
{
font-size: 1.2em;
}
#content-section
{
padding-top: 30px;
padding-bottom: 30px;
}
.video-section
{
padding-top: 30px;
}
.video-section .columns
{
padding: 0;
}
.footer-links,
p.Copyright,
.footer-icons
{
text-align: center;
}
div.HomeHeroSection > div:nth-child(1)
{
width: 100%;
}
div.HomeWelcomePDFSection > div:nth-child(1)
{
width: 100%;
}
div.HomeWelcomePDFSection > div:nth-child(2)
{
width: 100%;
}
div.HomeWelcomeButtons > div:nth-child(1)
{
width: 41.667%;
float: none;
margin-left: auto;
margin-right: auto;
}
div.HomeWelcomeButtons > div:nth-child(2)
{
width: 41.667%;
float: none;
margin-left: auto;
margin-right: auto;
}
div.HomePDFSection > div:nth-child(1)
{
width: 33.333%;
margin-left: 0%;
}
div.HomePDFSection > div:nth-child(2)
{
width: 33.333%;
margin-left: 0%;
}
div.HomePDFSection > div:nth-child(3)
{
width: 33.333%;
margin-left: 0%;
}
div.pdf-button > div:nth-child(1)
{
width: 41.667%;
float: none;
margin-left: auto;
margin-right: auto;
}
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.HomeVideoSection > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.HomeVideoSection > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.HomeVideoSection > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(4)
{
width: 100%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(5)
{
width: 8.3333%;
margin-left: 0%;
}
div.four-cells-home-pg > div:nth-child(6)
{
width: 8.3333%;
margin-left: 0%;
}
}