/**/
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/* ============================================================
StylesForHomePage.css — Option A (Delta Sheet)
This file contains ONLY home-page-specific styles.
Rules identical to MainStyles.css have been removed.
Where MainStyles.css uses !important on a property this file
also sets to a different value, !important is added here and
flagged with an inline "override" comment.
Removed as identical to MainStyles.css:
- html { width: 100%; margin: auto; }
- body { font-family: Roboto Condensed; }
- body { background-color: #dadada; }
- p { margin-bottom: 8px; margin-top: 8px; }
- .center { margin-left: auto; margin-right: auto; }
============================================================ */
/* ---------- Body ---------- */
/* line-height differs from MainStyles.css (1.5 here vs 1.7em there).
!important used defensively — body has no !important in MainStyles.css
but stylesheet load order cannot be guaranteed. */
body
{
line-height: 1.5 !important; /* override */
}
/* ---------- Paragraph ---------- */
/* p margins are identical to MainStyles.css p !important and are removed.
Only the home-page color delta is kept. */
p
{
color: #5a5a5a;
}
/* ---------- .center ---------- */
/* margin-left/right are identical to MainStyles.css .center and are removed.
Only the home-page-specific additions are kept. */
.center
{
position: relative;
float: none !important;
text-align: center;
}
.inner-wrap .nav-search-wrapper /*Makes the search in the Top Navigation skin not appear on the home page*/
{
display: none;
}
.inner-wrap .main-section > .outer-row
{
max-width: 100%;
padding: 0;
}
/* ---------- Nav bar overrides ----------
Skin CSS (Styles.css) requires a full project rebuild to appear in output.
These rules override the same properties immediately, since this file is
linked directly by the master page.
Root cause of nav wrapping:
- Body font-size dropped from 1.2em (19.2px) to 1em (16px) after w3.css trim.
- Nav outer-row max-width: 62.5em × 16px = 1000px (was 1200px).
- Foundation 6 uses box-sizing: border-box; 10% padding at 1280px viewport
eats 256px, leaving only 744px for logo (300px) + nav items (~602px) = 902px.
902 > 744 → wraps. Reducing padding to 2% leaves 949px → 902 < 949 → fits.
- float: left on li items ignores white-space: nowrap on parent ul; switching
to inline-block (with float: none) makes white-space: nowrap effective.
- min-width: 0 on .navigation-wrapper prevents the flex container from
bumping navigation-wrapper to a second flex line.
------------------------------------------------------------------ */
.off-canvas-wrapper-inner nav.title-bar .outer-row
{
padding-left: 2%;
padding-right: 2%;
}
.navigation-wrapper
{
min-width: 0;
}
ul.navigation > li
{
display: inline-block; /* overrides float:left — float overrides display, so both must be changed */
vertical-align: top;
float: none; /* must explicitly clear float:left or display:inline-block is silently ignored */
}
/* ---------- Background wrapper ---------- */
div.responsive
{
width: 100%;
height: auto;
background-image: url('../Images/ARPTPageBG.png');
display: flex;
flex-direction: column;
gap: 20px;
}
/* ---------- 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,
MadCap|menuProxy.menu2
{
mc-toc-depth: 2;
mc-context-sensitive: True;
}
html.home-page
{
mc-community-features: disabled;
}
/* ---------- Responsive header ---------- */
#contentBody > .responsive-header
{
background-color: transparent;
}
.transparent
{
background-color: transparent;
}
/* ---------- Hero section ---------- */
div.topic-hero
{
padding-top: 20px;
height: auto;
padding-bottom: 40px;
}
h1.home
{
font-size: 3em;
font-weight: normal;
margin-top: 17.76px;
margin-bottom: 8px;
line-height: 100%;
border: none;
color: #000;
background-color: transparent;
}
div.center h3
{
font-size: 1.1em;
margin-bottom: 20px;
margin-top: 0;
}
.search,
.search-bar
{
margin: 0 auto;
}
button.real
{
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: .85em;
border-radius: 10px;
vertical-align: middle;
background-color: #66bb46; /* explicit — prevents .main-section button (0,1,1) from overriding .button1 (0,1,0) */
}
.button1
{
background-color: #66bb46;
}
a.noline
{
text-decoration: none;
}
/*==Home-tiles section==*/
/*div.home-tiles-container controls the white space between the tiles and the footer. It was originally 150px.*/
div.home-tiles-container
{
padding-bottom: 10px;
}
div.home-tiles /*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.tile-flex-row
{
display: flex;
align-items: stretch;
width: 100%;
}
div.home-tiles::before,
div.home-tiles::after
{
content: none; /* removes them from the flex layout entirely */
}
div.tile-flex-row > div
{
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #ececec;
text-align: left;
padding-left: 0px;
padding-right: 0px;
border-radius: 10px;
margin-bottom: 5%;
transition: transform 0.3s cubic-bezier(.25,.8,.25,1),
box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
overflow: hidden;
}
div.tile-flex-row > div:nth-child(1)
{
width: 16.667%;
margin-left: 12.667%;
}
div.tile-flex-row > div:nth-child(2)
{
width: 33.334%;
margin-left: 2%;
}
div.tile-flex-row > div:nth-child(3)
{
width: 16.667%;
margin-left: 2%;
}
/*=Elements for text contained within each home-tile=*/
div.tile-head-1,
div.tile-head-2,
div.tile-head-3,
div.tile-head-4
{
color: #fff;
}
div.tile-head-1 /*Change this background-color for the first card color*/
{
background-color: #1a5277;
}
div.tile-head-2 /*Change this background-color for the second card color*/
{
background-color: #38a1bb;
}
div.tile-head-3 /*Change this background-color for the third card color*/
{
/*background-color: #1a5277;*/
background-color: #8a4085;
}
div.tile-head-4 /*Change this background-color for the fourth card color*/
{
background-color: #81e9f3;
}
p.tile-title,
p.tile-subtitle
{
color: #fff;
padding: 10px;
margin-top: 0px;
font-size: 1.2em !important;
font-weight: bold;
text-align: center;
}
p.tile-content
{
padding-left: 5%;
padding-right: 5%;
}
p.tile-content a
{
color: blue !important;
}
div.home-tiles a /*Complex Selector: Links within the home tiles will have the following properties*/
{
text-decoration: none;
color: #fff;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
div.home-tiles a:hover /*When hovering over links within the home tiles the following properties will apply.*/
{
color: #d3d3d3;
}
/*==Home Page Footer==*/
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid green;
background-color: #ffffff;
}
div.footer a /*Complex Selector: Any anchor (links) tags that are within div.footer will have the following properties */
{
text-decoration: none;
color: #DADADA;
}
/* font-size uses !important: MainStyles.css p { font-size: .85em !important }
otherwise wins here despite the higher specificity of this selector. */
div.footer p /*Complex Selector: Any that is contained within div.footer will have the following properties*/
{
color: #000080;
font-size: 1em !important; /* override */
}
div.home-master-page-footer /*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;
width: 70%;
}
div.home-master-page-footer::before
{
content: '';
display: table;
}
div.home-master-page-footer::after
{
content: '';
display: table;
clear: both;
}
div.home-master-page-footer > div
{
float: left;
box-sizing: border-box;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 33.333%;
margin-left: 0;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 33.333%;
margin-left: 0;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 33.333%;
margin-left: 0;
}
/* font-size uses !important: same reason as div.footer p above. */
div.footer > div.home-master-page-footer > div > p
{
font-size: 1em !important; /* override */
}
/*===========================================================================================================================================================
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 only screen and (max-width: 1280px)
{
html
{
width: auto;
}
div.footer
{
padding-top: 10px;
}
div.HomeHeroSection > div:nth-child(1)
{
width: 100%;
margin-left: 0;
}
div.tile-flex-row > div:nth-child(1)
{
width: 20%;
margin-left: 5%;
}
div.tile-flex-row > div:nth-child(2)
{
width: 40%;
margin-left: 5%;
}
div.tile-flex-row > div:nth-child(3)
{
width: 20%;
margin-left: 5%;
}
}
@media only screen and (max-width: 768px)
{
html
{
width: auto;
}
MadCap|searchBarProxy.homeSearchBar
{
width: 100%;
}
h1
{
font-size: 1.5em;
}
div.home-tiles-container
{
padding-bottom: 0;
}
div.tile-flex-row /* stack the tiles vertically on phones so they aren't squeezed into narrow side-by-side columns */
{
flex-direction: column;
}
div.tile-flex-row > div:nth-child(1)
{
width: 80%;
margin-left: 10%;
}
div.tile-flex-row > div:nth-child(2)
{
width: 80%;
margin-left: 10%;
}
div.tile-flex-row > div:nth-child(3)
{
width: 80%;
margin-left: 10%;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 100%;
margin-left: 0;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 100%;
margin-left: 0;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 100%;
margin-left: 0;
}
}