/**/
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap');
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/* Home Page General Styles*/
body
{
font-family: Arial;
line-height: 1.5em;
background-color: #e4e8e8;
}
h1
{
font-size: 2.75em;
}
h2
{
font-size: 1.6785em;
}
p
{
color: #5a5a5a;
margin-bottom: 8px;
margin-top: 8px;
}
span.highlight /*Span class used to change the color of text within block elements*/
{
color: #19b9f3;
}
.center
{
position: relative;
margin-right: auto;
margin-left: auto;
float: none !important;
text-align: center;
}
.off-canvas-wrapper .main-section > .outer-row
{
max-width: 100%;
padding: 0;
}
.Tipnew
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #f0f7fb;
background-image: url('../images/Pencil.png');
background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #3498db;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
}
/*==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: 50%;
}
MadCap|topicToolbarProxy
{
float: none;
}
MadCap|menuProxy.menu1
{
mc-toc-depth: 1;
mc-context-sensitive: True;
}
MadCap|menuProxy.menu2
{
mc-toc-depth: 1;
mc-context-sensitive: True;
}
html.home-page
{
mc-community-features: disabled;
}
/*==Top Navigation Bar Section==*/
nav.title-bar
{
position: absolute;
width: 100%;
background-color: #000000;
}
/*==Home Page Hero Section==*/
div.topic-hero /*This is the Hero/Banner on the Home Page - To replace the banner image with your own, change background-image property*/
{
background-size: cover;
background-repeat: no-repeat;
padding-top: 20px;
height: 200px;
padding-bottom: 150px;
padding-top: 100px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-position: center;
background-image: url('../images/blue-waves.jpg');
}
/*==Home Tiles section==*/
div.home-tiles-container
{
padding-top: 0px;
padding-bottom: 50px;
margin-top: -210px;
margin-left: auto;
margin-right: auto;
width: 96%;
}
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;
margin-top: -30px;
}
div.home-tiles::before
{
content: ' ';
display: table;
}
div.home-tiles::after
{
content: ' ';
display: table;
clear: both;
}
div.home-tiles > div
{
float: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: auto;
background-color: rgba(255,255,255, 1);
border-radius: 4px;
box-shadow: 0px 0px 35px rgba(0,0,0,0.1);
padding-top: 10px;
padding-bottom: 12px;
padding-left: 11.5px;
padding-right: 11.5px;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
vertical-align: top;
display: inline-block;
width: 280px;
transition: 0.6s;
}
div.home-tiles > div:nth-child(1)
{
margin-left: 0%;
}
div.home-tiles > div:nth-child(2)
{
margin-left: 1.5%;
}
div.home-tiles > div:nth-child(3)
{
margin-left: 1.5%;
}
/*=Elements for text contained within each home-tile=*/
p.card-title
{
text-align: center;
font-weight: 400;
color: #555;
font-family: lato;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 14px;
}
p.card-subtitle
{
text-align: center;
color: #ffffff;
border-bottom: 1px solid #d3d3d3;
}
p.card-content
{
background-color: #f0f0f0;
font-size: 13px;
line-height: 17px;
text-align: left;
margin-top: 7px;
transition: 0.4s;
border-radius: 2px;
font-family: lato;
font-weight: 400;
}
p.card-content:hover
{
background-color: #dddddd;
}
p a
{
color: #333333 !important;
display: block;
padding: 8px 0px 8px 10px;
}
div.home-tiles a /*Complex Selector: Links within the home tiles will have the following properties*/
{
text-decoration: none;
color: #19b9f3;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
div.home-tiles a:hover /*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
color: #fff;
}
/*==Info section==*/
div.info-section /*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.info-section::before
{
content: ' ';
display: table;
}
div.info-section::after
{
content: ' ';
display: table;
clear: both;
}
div.info-section > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.info-section > div:nth-child(1)
{
width: 16.667%;
margin-left: 16.667%;
}
div.info-section > div:nth-child(2)
{
width: 16.667%;
margin-left: 2%;
}
div.info-section > div:nth-child(3) /*Video Container*/
{
width: 33.333%;
margin-left: 5%;
}
/*=Elements for content contained within each info section=*/
p.info-title
{
line-height: 1em;
padding-bottom: 10px;
border-bottom: 1px solid #9c9c9c;
}
p.info-content
{
font-size: 0.9em;
}
/*==Home Page Footer==*/
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
background: #000000;
position: absolute;
width: 100%;
bottom: 0px;
}
div.footer a
{
text-decoration: none;
color: #DADADA;
}
div.footer p /* Complex Selector: Any that is contained within div.footer will have the following properties */
{
font-size: 0.8em;
color: #b1b1b1;
}
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: 75%;
}
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;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
}
div.info-container
{
margin-left: auto;
margin-right: auto;
width: 75%;
padding-bottom: 75px;
}
/*===========================================================================================================================================================
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: 1279px)
{
/* div.home-tiles > div:nth-child(1)
{
width: 33.33333%;
margin-left: 10%;
}
div.home-tiles > div:nth-child(2)
{
width: 33.333%;
margin-left: 16.667%;
}
div.home-tiles > div:nth-child(3)
{
width: 33.33333%;
margin-left: 10%;
margin-top: 2%;
}
div.home-tiles > div:nth-child(4)
{
width: 33.333%;
margin-left: 16.667%;
margin-top: 2%;
}*/
div.info-section > div
{
text-align: center;
}
div.info-section > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-bottom: 10%;
margin-top: 5%;
}
div.info-section > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-bottom: 5%;
}
div.info-section > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
p.info-title
{
font-size: 2em;
}
p.info-content
{
font-size: 1em;
}
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
}
}
@media only screen and (max-width: 767px)
{
/* div.home-tiles > div
{
margin-top: 2%;
}
div.home-tiles > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.home-tiles > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.home-tiles > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
div.home-tiles > div:nth-child(4)
{
width: 100%;
margin-left: 0%;
}
*/
p.card-title
{
font-size: 1.1em;
}
div.info-section > div
{
text-align: center;
}
div.info-section > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-bottom: 10%;
margin-top: 5%;
}
div.info-section > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-bottom: 5%;
}
div.info-section > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
p.info-title
{
font-size: 2em;
}
p.info-content
{
font-size: 1em;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 100%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 100%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 100%;
}
}
/*-- WELCOME PAGE --*/
.n13-hd-01
{
font-family: 'Lato';
font-weight: 300;
font-size: 50px;
line-height: 65px;
color: #0D4E90;
display: block;
position: relative;
top: -80px;
}
.n13-hd-02
{
font-family: 'Lato';
font-weight: 300;
font-size: 15px;
line-height: 22px;
color: #0D4E90;
display: block;
position: relative;
top: -80px;
}
.n13-hd-03
{
font-family: 'Lato';
font-weight: 300;
font-size: 13px;
line-height: 22px;
color: #0D4E90;
display: block;
position: relative;
top: -80px;
}
@media only screen and (max-width: 780px)
{
.n13-hd-01
{
font-family: 'Lato';
font-weight: 300;
font-size: 35px;
line-height: 38px;
display: block;
position: relative;
top: -80px;
}
.n13-hd-02
{
font-family: 'Lato';
font-weight: 300;
font-size: 13px;
line-height: 18px;
display: block;
position: relative;
top: -70px;
}
}
@media only screen and (max-width: 900px)
{
div.home-tiles > div
{
width: 90%;
max-width: 350px;
display: block;
margin-bottom: 20px;
}
div.home-tiles > div:nth-child(1)
{
margin-left: 0%;
}
div.home-tiles > div:nth-child(2)
{
margin-left: 0%;
}
div.home-tiles > div:nth-child(3)
{
margin-left: 0%;
}
}