/**/
@import url("FontStyles.css");
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/* Home Page General Styles*/
body
{
font-family: PrimarySerif, sans-serif;
line-height: 1.5em;
background-color: #e4e8e8;
}
h1
{
font-family: PrimarySansSerif, sans-serif;
font-size: 2.75em;
line-height: normal
}
h2
{
font-family: PrimarySansSerif, sans-serif;
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-content .main-section > .outer-row
{
max-width: 100%;
padding: 0;
}
.title-bar .menu-icon span
{
width: 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: rgba(106, 98, 102, 0.90); /* rgba(42, 96, 116, 0.90) */
}
/*==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;
height: 750px;
padding-bottom: 15px;
padding-top: 15px;
/*
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
*/
background-image: url('../Images/Banner.png');
background-position: center;
}
.main-section{
background: #524c4f;
/* dark gray: #6a6266; #583a49; 666666; 635c51; 5c3219; 003900 */
}
div.content-container /*Wraps the content on the masterpage and provides the background behind topics.*/
{
margin-right: 0;
background-color: #524c4f;
padding: 15px;
min-height: 95vh;
}
/*==Home Tiles section==*/
div.home-tiles-container
{
padding-top: 20px;
padding-bottom: 20px;
margin-left: auto;
margin-right: auto;
width: 75%;
}
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.home-tiles::before
{
content: ' ';
display: table;
}
div.home-tiles::after
{
content: ' ';
display: table;
clear: both;
}
div.home-tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 300px;
background-color: rgba(0, 0, 0, 0.85);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 11.5px;
padding-right: 11.5px;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
overflow: hidden;
}
*/
div.home-tiles > div:nth-child(1)
{
width: 16.667%;
margin-left: 12.667%;
}
div.home-tiles > div:nth-child(2)
{
width: 16.667%;
margin-left: 2%;
}
div.home-tiles > div:nth-child(3)
{
width: 16.667%;
margin-left: 2%;
}
div.home-tiles > div:nth-child(4)
{
width: 16.667%;
margin-left: 2%;
}
/*=Elements for text contained within each home-tile=*/
p.card-title
{
text-align: center;
font-weight: bold;
color: #19b9f3;
}
p.card-subtitle
{
text-align: center;
color: #ffffff;
border-bottom: 1px solid #d3d3d3;
}
p.card-content
{
color: #ffffff;
font-size: 0.9em;
text-align: center;
}
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);
}
/* Link Styles */
a:link
{
font-size: inherit;
font-weight: inherit;
color: #ec511b;
text-decoration: none;
}
a:visited
{
color: #ec511b;
}
a:hover
{
color: #01b3e3;
}
div.home-tiles a:hover /*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
color: #fff;
}
/* span styles */
span.italic
{
font-style: italic;
}
span.larger
{
font-size: 200%;
}
/*==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.*/
/* original commented out
div.info-section
{
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)
{
width: 33.333%;
margin-left: 5%;
}
*/
/* Info Title New from Tablet mode */
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-family: 'PrimarySansSerif', Arial, sans-serif;
font-size: 2em;
line-height: 1.7em;
padding-bottom: 10px;
border-bottom: 1px solid #9c9c9c;
color: #01b3e3;
font-weight: 600;
/* text-shadow: 1px 1px 2px rgba(230,230,230,0.40); */
}
p.info-content
{
font-family: 'PrimarySerif', Arial, sans-serif;
font-size: 1.5em;
color: #01b3e3;
/* text-shadow: 1px 1px 1px rgba(230,230,230,0.40); */
}
/*==Home Page Footer==*/
div.footer
{
padding-top: 0px;
padding-bottom: 0px;
height: 100px;
background-size: auto;
background-image: url('../Icons/BandedBackground.png');
background-position: center;
background-color: #524c4f;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
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: #524c4f;
}
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: 60%;
background-size: cover;
background-repeat: no-repeat;
padding-bottom: 0px;
padding-top: 0px;
background-color: #524c4f;
}
div.footer-logo
{
height: 100px;
background-color: #524c4f;
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
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: 20%;
margin-left: 0%;
overflow: hidden;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 60%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 20%;
margin-left: 0%;
overflow: hidden;
}
div.info-container
{
margin-left: auto;
margin-right: auto;
width: 75%;
padding-bottom: 5px;
}
/* Marquee title at top of home page */
p.marquee
{
font-family: 'PrimaryDisplay', Arial, sans-serif;
font-size: 1.5em;
line-height: 1.8em;
color: #01b3e3;
text-shadow: 1px 1px 20px rgba(0,0,0,0.90);
}
div.marqueeContainer
{
margin-bottom: 30px;
text-align: center;
width: 100%;
position: relative;
margin-top: -600px; /* moves everything over the hero image */
/* background-color: rgba(247,247,247,0.05); */
}
/* Div containing video */
div.videoContainer
{
margin: auto;
/*
width: 804px;
height: 604px;
*/
width: 604px;
height: 450px;
background-color: #cbcfcf;
border: 2px solid #cbcfcf;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
/*
#stationVideoLarge
{
display: block;
}
#stationVideoMedium
{
display: none;
}
#stationVideoSmall
{
display: none;
}
*/
/*===========================================================================================================================================================
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: 979px)
{
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-content
{
font-size: 1em;
font-weight: 600;
}
/*
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
*/
div.home-master-page-footer > div:nth-child(1)
{
width: 15%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 70%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 15%;
margin-left: 0%;
}
/*
div.videoContainer
{
width: 604px;
height: 456px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#stationVideoLarge
{
display: none;
}
#stationVideoMedium
{
display: block;
}
#stationVideoSmall
{
display: none;
}
*/
}
@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.topic-hero
{
height: 500px;
}
div.marqueeContainer
{
margin-top: -350px; /* moves everything over the hero image */
}
p.marquee
{
font-size: 1em;
line-height: 1.6em;
text-shadow: 1px 1px 12px rgba(0,0,0,0.90);
}
div.home-master-page-footer > div:nth-child(1)
{
width: 5%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 90%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 5%;
}
div.footer
{
height: 65px;
background-image: url('../Icons/BandedBackground_small.png');
}
div.footer-logo
{
height: 85px;
}
div.footer-logo img
{
width: 200px;
height: auto;
}
p.info-title {
font-size: 1.5em;
line-height: 1.3em;
}
/*
div.videoContainer
{
width: 404px;
height: 320px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#stationVideoLarge
{
display: none;
}
#stationVideoMedium
{
display: none;
}
#stationVideoSmall
{
display: block;
}
*/
}