/*===========================================================================================================
Site Info
=============================================================================================================
Date: 12/08/16
Site: League of Women Voters, #A0014042
Web Designer:
Last Modified By: Steven Napierski, 12/08/16, initial buildout/changes
Melissa Anderegg -- 04/12/17 -- client changes to homepage
=============================================================================================================
Stylesheet Info
=============================================================================================================
Index:
Base
Generic
Home Page
Sub-Page
Gift Exclusions
IMPORTANT NOTES - PLEASE READ BEFORE STARTING YOUR SITE:
Fill out the information above (Site Info) so that we can have a quick reference of who built this site.
Our stylesheets are based off of the Mobile First ideology. This means that anything that is located
outside of a media query will display on mobile and desktop. Anything that is located within the
@media only screen and (min-width:768px) media query will be desktop only.
There are mobile styles located under the "Generic", "Home Page" and "Sub-Page" sections that are outside
of a media query and most contain predefined empty style attributes. For these styles you will only need to
fill in the predefined attributes. Do NOT add/remove attributes to/from them as it will alter the default
mobile template. If you need to overwrite anything it should be for Desktop and will go into a media query.
For each section there may be 3 different subsections: DEFAULT, CUSTOM and ADAPTIVE. DEFAULT applies to
both Custom and Adaptive display modes.
CUSTOM styles should be removed or commented out when building a site in Adaptive display mode.
ADAPTIVE styles should be commented out or removed when building a site in Custom display mode.
ALL MOBILE STYLE DEFINITIONS THAT ARE NEEDED FOR STYLING THE MOBILE SITE ARE ALREADY LOCATED IN THIS
STYLESHEET. ANY CUSTOM FEATURES THAT YOU ADD ARE EXCEPTIONS. YOU'LL BE RESPONSIBLE FOR ADDING IN THE STYLE
DEFINITIONS FOR THOSE ON BOTH DESKTOP AND MOBILE.
All styles that you add on your own need to be inside of a @media only screen and (min-width:768px) media query
that is pre-defined in this CSS or that you add yourself. The GOAL is to have you style for desktop and fill
in the pre-defined mobile styles to make the mobile site have a color scheme that matches the client's site.
REMEMBER that your mobile styles will carry over to Desktop so they might need to be overwritten using the
desktop specific media query.
CUSTOM/ADAPTIVE SPECIFIC STYLES
The following lines contain styles that are specific to the framework that you're using. When using Custom
you'll need to remove the commented adaptive styles. When using Adaptive you'll need to remove the custom
styles. These blocks can be found on the following lines (in the default file only. After editing these lines
will change):
- Lines 265-288
- Lines 358-380
- Lines 392-395
- Lines 410-423
- Lines 464-467
============================================================================================================*/
/*************************************************************************************************************
////////////////////// Base
*************************************************************************************************************/
.hidden {display:none !important; visibility:hidden !important}
div.stl-colwrap, .stl-center div.row {margin:0;}
.stl-center div.row > div {margin:1% 0 0;} /* Fix left alignment of Stelter main content area */
/* Apply border-box to all Stelter content */
.sub-middle-section *, .sub-middle-section *:before, .sub-middle-section *:after,
.stl-nav-sm *, .stl-nav-sm *:before, .stl-nav-sm *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
/*************************************************************************************************************
////////////////////// Client Overrides
*************************************************************************************************************/
@media only screen and (max-width: 992px){
#banner{
padding-bottom: 0 !important;
}
#main {
padding-top: 0 !important;
}
#stl-whats-new{
margin-top: 10px;
padding-left: 0 !important;
}
#memorialLearnMore{
margin-bottom: 20px;
}
}
#stl-whats-new ul{
padding-left: 35px !important;
}
.journey-main .stl-info-slider h4{
color: white !important;
}
.journey-main .stl-info-slider ul li a {
color: white;
}
.journey-main .stl-info-slider ul li a:hover{
color: blue
}
.row.lower h2{
padding-left: 15px;
padding-right: 15px;
color: #005596 !important;
}
.row.lower h3{
font-weight: bold;
}
#memorialAndTributeGiftsHook{
margin-bottom: 20px;
}
#memorialAndTributeGiftsHook p:first-of-type {
font-size: 16px;
font-family: calluna, serif;
}
#memorialLearnMore {
color: #005596;
font-size: 16px;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
letter-spacing: 2px;
}
#memorialLearnMore:hover:before{
-webkit-transform: translateX(0.375rem);
-moz-transform: translateX(0.375rem);
-ms-transform: translateX(0.375rem);
transform: translateX(0.375rem);
}
#memorialLearnMore:before{
margin-right: 10px;
content: "\f178";
display: inline-block;
width: 18px;
height: 13px;
content: '';
background: url(images/arrow-blue.png);
-moz-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
margin-left: 10px;
background-size: contain;
}
@media only screen and (min-width: 768px){
}
/* Donor page overrides */
.meet-our-donors-thumb {width:auto; float:none;}
@media screen and (min-width:576px) {
.meet-our-donors-thumb {float:left;}
}
.adventure h3,#stl-journey-container div:not(.stl-info-slider) > h4,.adventure h3 + div p,.adventure h3 + p,.adventure h4 + div p,.adventure h4 + p,.stl-info-slider > img{
display:none !important;
}
html body{
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
background-color: #f8f7f5;
color: #333;
font-size:16px;
}
.section{
padding:30px 0;
}
.red{
background:#D52144;
color:#FFF;
}
#bread{
background:#FFF;
}
#header,#main{
background:#FFF;
}
.home #main{
background-color:#005596;
}
/*#main .container p:first-of-type{
}*/
.home #main .container h2, .home #main .container p:first-of-type{
color: white;
}
@media (min-width: 1200px){
.container {
max-width:1110px;
}
}
#header .container{
max-width:1300px;
}
@media (min-width: 1300px){
#header .container{
width:1300px;
}
}
@media only screen and (max-width:1024px) {
#header .col-lg-2{
text-align:center;
}
}
#banner{
/*background: linear-gradient(180deg, #FFF 20%,#0058A1 20%);*/
text-align:left;
/*color:#FFF;*/
padding-bottom:30px;
}
#banner img{
display:block;
max-width:100%;
border:10px solid #FFF;
margin:0 auto;
}
#banner h1{
font-size:50px;
font-weight:normal;
color: #005596 !important;
text-align: left;
padding-left: 15px;
}
#banner h2{
font-size:22px;
font-weight:normal;
line-height: 1.2em;
color: #FFF !important;
} @media only screen and (max-width:767px) {
#banner h1{
font-size:40px;
}
#banner h2{
font-size:20px;
}
}
#stl-cms ol.breadcrumb {
padding: 20px 15px 0;
float: none;
text-align: left;
}
@media only screen and (min-width:768px) {
#bread ol.breadcrumb {
padding: 20px 0 0;
}
}
#main{
padding:40px 0;
}
body:not(.home) #main.section{
padding-top:0;
}
#footer{
padding-bottom:30px;
}
#site-information {
color: #666
}
#site-information .container {
color: #666;
text-align: center;
font-size: 12px;
line-height: 1.166666667;
padding: .625rem 0 1.25rem
}
#site-information .footer-social-links ul {
margin-bottom: 1.25rem;
padding: 0;
}
#site-information .footer-social-links ul li {
display: inline-block;
padding: 0 .53125rem;
padding-bottom: .25rem
}
#site-information .footer-social-links ul li:hover {
opacity: .7
}
#site-information .footer-social-links ul .facebook-icon {
background: url(images/facebook-icon.svg) no-repeat;
background-size: auto 16px
}
#site-information .footer-social-links ul .twitter-icon {
background: url(images/twitter-icon.svg) no-repeat;
background-size: auto 16px
}
#site-information .footer-social-links ul .linkedin-icon {
background: url(images/linkedin-icon.svg) no-repeat;
background-size: auto 16px
}
#site-information .footer-social-links ul .youtube-icon {
background: url(images/youtube-icon.svg) no-repeat;
background-size: 16px auto
}
#site-information .footer-social-links ul .rss-icon {
background: url(images/rss-icon.svg) no-repeat;
background-size: auto 16px
}
#site-information a {
color: #666;
text-decoration: underline
}
#site-information .copyright-links {
padding: 20px 0 40px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px
}
#site-information .copyright-links a {
text-decoration: none;
padding: 10px;
color: #333
}
#site-information .copyright-links a:focus, #site-information .copyright-links a:hover {
text-decoration: underline
}
.social-links ul {
text-align: center
}
.social-links ul li {
display: inline-block
}
.social-icon {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 20px;
height: 17px;
background-repeat: no-repeat
}
.social-icon:focus, .social-icon:hover {
background-position-y: -40px
}
/*************************************************************************************************************
////////////////////// Generic
*************************************************************************************************************/
/* -------------------------------
Structure
------------------------------- */
/* Outermost site wrapper - wraps entire site
:: Default page structure ::
----------------------
:: If header/footer are set to display outside the container, this element becomes the parent ::
-------------------------------------------------------------------------------------------
:: */
@media only screen and (min-width:768px) {
#stl-page {}
/* Inner page wrapper - wraps entire site be default (see default page layout above) - Set background, positioning, etc as necessary */
div#stl-cms {background:transparent; padding-bottom:0; position:relative;}
/* Main container element - may be used to restrict template to a specified width */
#stl-cms div.stl-container {width:auto;}
}
/* -------------------------------
Typography
------------------------------- */
/* Overrides bootstrap giving everything margin-bottom:10px; line-height should equal bottom margin */
p, table, tr, td, form, label, ul, ol, li, blockquote {}
@media only screen and (max-width:768px) {
/* This media query is in place so that this override only affects mobile.
The styles directly below this query section are in place to affect only the
Stelter content. Without this setup these styles will cause some formatting
issues with the client's header/footer sections. */
p, table, tr, td, form, label, ul, ol, blockquote,
.hotnews, .journey-paths, .not-sure, .eBrochure, .see-how-it-works, .learn-how-to-fund, .GIfeature, .next-steps {margin-bottom:10px;}
}
.stl-container p, .stl-container table, .stl-container tr, .stl-container td,
.stl-container form, .stl-container label, .stl-container ul, .stl-container ol,
.stl-container blockquote, .stl-container .hotnews, .stl-container .journey-paths,
.stl-container .not-sure, .stl-container .eBrochure, .stl-container .see-how-it-works,
.stl-container .learn-how-to-fund, .stl-container .GIfeature, .stl-container .next-steps {margin-bottom:10px;}
/* Links/Buttons */
a, a:hover:not([href]) {text-decoration:none;}
a:hover, a:focus {}
.stlButton {} /* Buttons found on features throughout the site. (ie. Gift Illustrator, eBrochure, eBrochure popups, etc...) */
#stl-cms .stl-button, #stl-cms .stlButton, #stl-cms a.stlButton, .stlButton {
background-color:#333;
border-radius:0;
display:block;opacity:1;
font-size:18px; font-weight:normal; text-decoration:none; color:#fff !important;
/*width:100%;*/
}
#stl-cms .stl-button:hover, #stl-cms .stl-button:focus, .stlButton:hover, .stlButton:focus {}
#stl-cms p{
font-size:18px;
line-height: 29px;
margin-bottom: 20px;
}
button.stlButton, #stl-cms button.stlButton{
color: #005596 !important;
font-size: 1em;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
background:none;
border:none;
padding: 0;
text-align: left;
letter-spacing: 2px;
}
button.stlButton:hover{
}
button.stlButton:before, #stl-cms button.stlButton:before{
content: "\2192";
margin-right: 10px;
font-family: monospace;
font-size: 26px;
vertical-align: baseline;
display: inline-block;
}
@media only screen and (min-width:768px) {
}
/* General Content */
.stl-center p, .stl-center table, .stl-center tr, .stl-center td, .stl-center form, .stl-center label, .stl-center ul, .stl-center ol, .stl-center blockquote {}
.stl-copyright, .stl-center .stl-copyright p, .copyright p, .stl-footnote {font-size:11px;font-style:italic;}
footer#footer .stl-copyright p{
font-size:12px !important;
padding-top: 10px;
font-style:normal;
margin-bottom: 20px;
}
@media only screen and (min-width:768px) {}
/* Match the color, margins/padding, font size, etc... to the client's site for all headers */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {font-family: calluna, serif;
color: #000026;} /* Headings Reset */
.stl-page-header {} /* Page header (not always used) */
.stl-page-title, .eBrochurePage h1 {padding-top: 30px;} /* Page title styles */
.stl-page-subtitle, .eBrochurePage h2,.case-study h3 {font-size:30px;} /* Sub Title styles */
.sub-middle-section h3 {}
.case-study h3{
}
@media only screen and (min-width:768px) {}
/* Lists */
.sub-middle-section ul, .sub-middle-section ol, .eBrochurePage ul, .eBrochurePage ol {}
.sub-middle-section li, .eBrochurePage li {}
@media only screen and (min-width:768px) {}
/* -------------------------------
Breadcrumbs/Share
------------------------------- */
ol.breadcrumb{
background:#f8f7f5;
}
@media only screen and (max-width:767px) {#stl-cms ol.breadcrumb {
padding: 20px 10px 0;
}
}
.breadcrumb li:after {
display:none;
}
.breadcrumb li + li:before {
content: "\f078";
font-family: FontAwesome;
color: #818181;
font-size: .5em;
vertical-align: middle;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
display: inline-block;
margin: -5px 5px 0 0;
}
ol.breadcrumb li{
display: inline-block;
color: #7D7669;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.25;
word-spacing: 1px;
}
ol.breadcrumb a {
color: #333;text-decoration:none;} /* Set this color if setting the generic "a" style isn't working */
ol.breadcrumb a:hover{
text-decoration:underline;
}
/* To Override Breadcrumb separators
.breadcrumb > li + li:before {content:"/ "; padding:0 5px; color:#CCC;} */
/*share wrapper is at the end of the breadcrumb bar*/
.stl-share-wrapper {}
@media only screen and (min-width:768px) {}
/* -------------------------------
Quicklinks
------------------------------- */
.nav-small {margin-left:-15px; margin-right:-15px;} /* Remove gap on left and right of mobile header */
.nav-small .navbar-header {} /* Main quicklinks background and bottom-border colors */
.nav-small .navbar-toggle {} /* Quicklinks button background and border colors (button with three horizontal lines) */
.nav-small .navbar-toggle .icon-bar {} /* Horizontal bar color inside of Quicklinks button */
.nav-small .navbar-collapse {} /* Color of Quicklinks dropdown menu border */
/* -------------------------------
Pullouts
------------------------------- */
@media only screen and (max-width:767px) {
.pull-right, .main-copy .pull-right.ebro {float:none;margin:0;width:100%;}
}
@media only screen and (min-width:768px) {
/*sidebar items may want to be in boxes with a background - this may move into the site control */
#stl-whats-new, .pull-right, .GIfeature {padding:10px; margin-bottom:20px;}
}
/* -------------------------------
Left/Right Navigation
------------------------------- */
#upperNav {
min-height:40px;
position: relative;
z-index: 1;
padding:20px 0 0;
}
#upperNav .navigation ul.stl-nav {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#upperNav .navigation ul.stl-nav > li {
display: block;
}
#upperNav .navigation ul.stl-nav > li > a,#upperNav a.stlHomelink {
line-height:40px;
text-decoration:none;
color:#5C5C5C;
padding: 0 .25em;
color: #d52144;
font-size: 1.125em;
text-transform: none;
word-spacing: 1px;
font-family: calluna, serif;
}
#upperNav a.stlHomelink:hover{
color: #000027;
}
#upperNav .navigation ul.stl-nav > li.onTrail > a:after{
content: "\f078";
margin-left: 5px;
font-family: FontAwesome;
color: #818181;
font-size: .5em;
vertical-align: bottom;
}
#upperNav .navigation ul.stl-nav ul {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255,255,255,.5);
}
#upperToggle {
display: block;
line-height: 40px;
color: #335D8C;
font-size: 1.250em;
background: #E8F2F7;
padding: 0 10px;
margin-top: 20px;
}
#upperToggle span:before{
font-family:FontAwesome;
content:"\f0c9";
float:right;
}
#upperNav .navigation ul.stl-nav li.onTrail ul li{
color: #FFF;
white-space: nowrap;
padding:5px 0;
display:block;
}
#upperNav .navigation ul.stl-nav li.onTrail ul li a{
padding: .5em 0;
border-radius: 0;
color: #005696;
font-size: 1em;
border-bottom: 3px solid transparent;
white-space: nowrap;
text-decoration:none !important;
font-family: Calluna,'Arial Narrow','Helvetica Narrow',Arial,Helvetica,sans-serif;
}
#upperNav .navigation ul.stl-nav li.onTrail ul li a:hover{
border-bottom: 3px solid #005696;
}
@media (max-width: 992px) {
#upperNav .navigation{
display:none;
border-top: 5px solid #335D8C;
margin: 20px -15px 0;
border-bottom: 5px solid #335D8C;
padding: 10px 15px;
}
#upperNav .navigation ul.stl-nav li.onTrail > a:before{
font-family:FontAwesome;
content:"\f078";
float:right;
color: #818181;
font-size: .5em;
vertical-align: bottom;
}
#upperNav .navigation ul.stl-nav li.onTrail.active > a:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#upperNav .navigation ul.stl-nav li.onTrail.active {
background: #E8F2F7;
margin: 0 -15px;
padding: 0 15px;
}
#upperNav .navigation ul.stl-nav li.onTrail.active ul {display:block;}
#upperNav .navigation ul.stl-nav li.onTrail ul li a{
padding: 10px 0;
border-radius: 0;
color: #005696;
font-size: 1em;
font-family: calluna, serif;
}
#upperNav .navigation ul.stl-nav li.onTrail ul li a:hover{
border-bottom: 3px solid transparent;
}
#upperNav .navigation ul.stl-nav > li.onTrail > a:after{
display:none;
}
}
@media (min-width: 992px) {
#upperToggle{
display:none;
line-height:40px;
color:#FFF;
}
#upperNav .navigation {display:block !important;margin-top:35px;}
#upperNav .navigation ul.stl-nav,#lowerNav .navigation, #lowerNav .navigation ul.stl-nav {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
#upperNav .navigation ul.stl-nav,#lowerNav .navigation ul.stl-nav {
justify-content: flex-start;
}
#upperNav .navigation ul.stl-nav > li > a{
padding: 0 0 0 10px;
}
#upperNav .navigation ul.stl-nav > li:hover > a{
color: #000027;
background-color: #fff;
}
#upperNav .navigation ul.stl-nav li.onTrail ul li{
}
#upperNav .navigation ul.stl-nav > li {
display: inline-block;
position:relative;
}
#upperNav .navigation ul.stl-nav li.onTrail ul {
position: absolute;
top: 46px;
background: #E8F2F7;
padding: 10px 20px;
border-top: none;
padding: .75em 1em;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: none;
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
}
#upperNav .navigation ul.stl-nav li.onTrail ul:before{
display: block;
content: "\25B4";
position: absolute;
height: 0;
width: 0;
text-shadow: 0 -8px 18px rgba(0,0,0,.25);
top: -10px;
left: 50%;
color: #fff;
font-size: 33px;
line-height: .3;
text-indent: -9px;
z-index: -10;
font-family: Calluna,'Arial Narrow','Helvetica Narrow',Arial,Helvetica,sans-serif;
}
#upperNav .navigation ul.stl-nav li.onTrail ul:after {
content:'';
display:block;
height:18px;
width:100%;
position:absolute;
top:-18px;
left:0;
}
#upperNav .navigation ul.stl-nav li.onTrail:hover ul, #upperNav .navigation ul.stl-nav li.onTrail:focus ul {
display: block;
}
}
@media only screen and (max-width:768px) and (min-width:768px) {
#upperNav .navigation ul.stl-nav > li > a, #upperNav a.stlHomelink {
font-size: .9em;
}
}
/*************************************************************************************************************
////////////////////// Home Page
*************************************************************************************************************/
/* -------------------------------
What's New
------------------------------- */
/* DEFAULT */
#stl-whats-new {
padding:0 15px;}
#stl-whats-new h3.stl-whats-new-title {}
.hotnews { padding: 0;
margin: 0;
float: none !important;
width: auto;}
.hotnews .clear {display:none; /*remove clear float*/}
#stl-whats-new {position:relative;
font-family: Calluna,'Arial Narrow','Helvetica Narrow',Arial,Helvetica,sans-serif;
font-size:18px;
margin-bottom: 0;}
#stl-whats-new h3.stl-whats-new-title {
margin-top: 0;
}
#stl-whats-new ul {color:#FFF; margin:0; padding:0; list-style-type:none;}
#stl-whats-new ul a{
/*color:#FFF;*/
text-indent: 10px;
font-family: Calluna, serif;
text-transform:none;
letter-spacing:normal;
font-weight:normal;
text-decoration:none;
font-size:.9em;
}
#stl-whats-new ul a:before {
display: none;
}
#stl-whats-new a:hover{
text-decoration:underline;
}
#stl-whats-new a.stl-wn-view-more{
font-size: 16px;
color: #005596;
font-size: 16px;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
letter-spacing: 2px;
padding-left: 0;
}
#stl-whats-new a.stl-wn-view-more:hover{
text-decoration:none;
}
#stl-whats-new a.stl-wn-view-more:hover:before{
-webkit-transform: translateX(0.375rem);
-moz-transform: translateX(0.375rem);
-ms-transform: translateX(0.375rem);
transform: translateX(0.375rem);
}
#stl-whats-new a.stl-wn-view-more:before{
margin-right: 10px;
content: "\f178";
display: inline-block;
width: 18px;
height: 13px;
content: '';
background: url(images/arrow-blue.png);
-moz-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
margin-left: 10px;
background-size: contain;
}
@media only screen and (min-width:768px) {
#stl-whats-new{
padding:0;
}
#stl-whats-new ul{
padding:10px 0; padding-left:15px; padding-top:0; overflow:hidden;
}
#stl-whats-new ul li{
/*display:inline-block;*/
}
#stl-whats-new ul li + li:before{
/*content:"|";
padding:0 10px;*/
}
#stl-whats-new a.stl-wn-view-more{
/*position:absolute;
top:0;
right:0;
font-size: 16px;
letter-spacing: 2px;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;*/
}
}
/* -------------------------------
Begin My Giving Journey
------------------------------- */
/* DEFAULT */
.stl-journey-paths h4 a {} /* Journey Paths Section title color */
.stl-journey-group p.stlButton {} /* Title color of each journey section feature (when journey section is expanded) */
/* pop ups
This pop ups section can be edited as needed. But, for the most part you should
only need to modify the fonts and colors */
.stl-popup {}
.stl-white-popup h2 { margin-top: 0;}
.stl-white-popup p {}
.stl-white-popup ul { margin: 0;
padding-left: 20px;}
.stl-white-popup a { text-decoration: none !important; font-family: calluna, serif;}
#stl-cms .journey-main.stl-colwrap {margin:0 -1%;}
#stl-cms div.stl-info-slider {text-align:left;
padding-left: 100px;
border-top: 2px #3082bf solid;
}
#stl-cms div.stl-info-slider ul {color:#000; list-style:none;
margin: 0;
padding: 0; font-family: calluna, serif;}
#stl-cms div.stl-info-slider ul li{
padding-bottom: 10px;
font-size: 18px;
}
#stl-cms .journey-main.stl-colwrap .stl-w-04:first-child div.stl-info-slider{
background:url(images/icon-new-givingamt.png) no-repeat 0 10px;
}
#stl-cms .journey-main.stl-colwrap .stl-w-04:nth-child(6) div.stl-info-slider{
background:url(images/icon-new-age.png) no-repeat 0 10px;
}
#stl-cms .journey-main.stl-colwrap .stl-w-04:nth-child(11) div.stl-info-slider{
background:url(images/icon-new-assets.png) no-repeat 0 10px;
}
#stl-cms div.stl-info-slider ul a{text-decoration:none !important;}
#stl-cms div.stl-info-slider h4 {
color: #333;
padding: 0;
font-size: 20px;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 900;
}
@media only screen and (min-width:768px) {
.stl-journey-paths {text-align:center;}
#stl-cms .stl-journey-paths p {margin:0;}
#stl-cms .stl-journey-paths h3 {}
#stl-cms div.stl-info-slider {text-align:left;
}
#stl-cms div.stl-info-slider ul a {}
}
@media only screen and (max-width:768px) {#stl-cms div.stl-info-slider {text-align:left;
padding-left: 0;
background:none !important;
}
}
/* CUSTOM - Remove from Adaptive */
/* mobile styles */
@media screen and (max-width:767px){
.journey-main {overflow-y: inherit !important;}
.stl-journey-paths .middle-results {display:none;}
#stl-cms .journey-main.stl-colwrap {margin:0;}
.journey-main.stl-colwrap .stl-col.stl-w-04 {float:none;width:98%;}
#stl-cms div.stl-info-slider div.stl-slider-wrap {min-height:0;}
.stl-slider-wrap ul {background:transparent;}
.stl-journey-paths .stl-button {display:inline;margin:0 !important; padding:0; }
.stl-journey-paths .stl-slider-wrap {background-image:none !important;}
.stl-journey-paths img {display:none;}
#stl-cms div.stl-info-slider div.stl-slider-wrap ul {opacity:1;position:relative;top:0;}
}
/* ADAPTIVE - Remove from Custom */
/* uncomment to use
@media screen and (max-width:767px){
.stl-journey-paths .stlButton {color:#000 !important;} /* Title color of each journey section feature (when journey section is expanded)
}
*/
/* -------------------------------
Not Sure How to Get Started
------------------------------- */
/* questionnaire lightbox
This lightbox questionnaire section can be edited as needed. But, for the most part you should
only need to modify the fonts and colors. The styles for this popup do not need to be inside
of a Media Query. It will never ber larger than its popup box and the styles should carry over
from mobile to desktop just fine. */
.GettingStartedPage {}
.not-sure-where-to-being-questionnaire {padding:10px 20px 20px; font-size: 16px;}
.not-sure-where-to-being-questionnaire .stl-page-header { line-height: 35px;
padding: 15px 0;
margin: 0;
font-size: 36px;
color: #000026;
font-family: calluna, serif;} /* Not Sure popup header */
.not-sure-where-to-being-questionnaire ul {margin:10px 0px; list-style:none; padding-left:0;}
.not-sure-where-to-being-questionnaire ul li {margin:0 0 25px;}
.not-sure-where-to-being-questionnaire ul li.q1 > div {padding-left:33px;}
.not-sure-where-to-being-questionnaire ul li input {margin:5px 10px;width:auto}
.not-sure-where-to-being-questionnaire ul li.q1 input[type="radio"] {margin-left:-23px;}
.not-sure-where-to-being-questionnaire p {margin:0}
.not-sure-where-to-being-questionnaire ul > li > p, .getting-started-suggestion > p {
border-bottom:2px solid #ccc;
padding-bottom:5px; margin-bottom:10px;
}
.not-sure-where-to-being-questionnaire ul li.q1 > p { margin:0 0 10px;}
.getting-started-suggestion ul, .getting-started-suggestion ul li {list-style:disc; margin:0 0 5px; padding:0;}
.getting-started-suggestion ul {margin-left:25px;}
.notSure {text-align:center;padding:0 20px;}
.notSure .not-sure-inside {}
.notSure .not-sure-inside h3 {margin:0;font-size:36px;color:#fff;}
.notSure .not-sure-inside p {margin-bottom: 0 !important; margin-top:10px !important;}
.notSure .not-sure-inside a, .features a {color:#005596;
font-size:1em;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration:none;
letter-spacing: 2px;
}
.notSure .not-sure-inside a {color:#fff;}
.features a {font-size:.9em; /*smaller to allow to fit on one line*/}
.notSure .not-sure-inside a:after,#stl-whats-new a.stl-wn-view-more:after,.giftSet a:before,button.stlButton:before, #stl-cms button.stlButton:before,#stl-gift-illustrator-container .GIfeature a:before, .features a:before {
display: inline-block;
width: 18px;
height: 13px;
content:'';
background:url(images/arrow-blue.png);
-moz-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
margin-left: 10px;
background-size: contain;
}
.notSure .not-sure-inside a:after {/*background:url(images/arrow-black.png);*/}
.features a:before {margin-right:10px;}
.features a.popup-video.img:before {display:none;}
.notSure .not-sure-inside a:hover:after,#stl-whats-new a.stl-wn-view-more:hover:after,.giftSet a:hover:before,button.stlButton:hover:before, #stl-cms button.stlButton:hover:before,#stl-gift-illustrator-container .GIfeature a:hover:before, .features a:hover:before {
-webkit-transform: translateX(0.375rem);
-moz-transform: translateX(0.375rem);
-ms-transform: translateX(0.375rem);
transform: translateX(0.375rem);
}
#not-sure-details button{
border: 1px white solid;
background-color:#005596;
border-radius: 5px;
padding: 10px 0;
}
#not-sure-details button:hover{
background-color: white;
}
#not-sure-details button a{
text-transform: initial !important;
padding: 0 50px;
}
#not-sure-details button:hover a{
color: #005596;
}
#not-sure-details a:after{
background: initial !important;
width: 0;
margin-left: 0;
}
@media only screen and (max-width: 767px){
#main .container div.notSure{
text-align: left;
padding-left: 0;
}
}
@media only screen and (max-width: 378px){
#not-sure-details button a{
padding: 0 20px;
}
}
#stl-gift-illustrator-container .GIfeature a:before{
background-image:url(images/arrow-black.png);
}
#stl-whats-new a.stl-wn-view-more:after {display:none;}
.giftSet a:before,button.stlButton:before, #stl-cms button.stlButton:before,#stl-gift-illustrator-container .GIfeature a:before{
margin-left:0;
margin-right:10px;
}
.notSure .not-sure-inside a:hover{
text-decoration:none;
}
@media only screen and (min-width:768px) {
#stl-cms .not-sure {margin-bottom:20px;}
}
.main-copy {
padding-bottom: 10px;
}
#stl-getting-started-container {
background:#D52144;
color:#fff;
}
/* -------------------------------
Additional Homepage Features
------------------------------- */
.features .row.lower {margin-top:40px;}
.features img {width:160px; float:left; margin-right:20px;}
#video-modal {padding-left:0; padding-right:0; padding-bottom:0;}
/*************************************************************************************************************
////////////////////// Sub-Page
*************************************************************************************************************/
/* -------------------------------
Videos
------------------------------- */
.see-how-it-works {margin:20px 0;}
.see-how-it-works h3 {display:none;}
/* -------------------------------
Case Study
------------------------------- */
.case-study {}
.case-study img { margin-bottom: 10px;
margin-top: 10px;
padding: 0 5px 5px 0;}
.stl_caseStudyBody.collapse {display:none !important;} /* This line and the line directly below help the mobile case study function correctly */
.stl_caseStudyBody.collapse.in {display:block !important;width:100%;}
@media only screen and (min-width:768px) {
.stl_caseStudyBody.collapse {display:block !important;} /* This forces the case study body to stay open on desktop. It's a counter to the above !important styles. */
}
/* -------------------------------
Learn How to Fund It/See How It Works
------------------------------- */
/* DEFAULT Learn How to Fund It */
.learn-how-to-fund {margin:20px 0;}
.learn-how-to-fund h3 {margin:0; padding:0px;}
.learn-how-to-fund p {display:none;} /* hide learn more teaser since it's empty */
#stl-fund-it-container .learn-how-to-fund ul {color:#000; list-style:none;
margin: 10px 15px;
padding: 0; font-family: calluna, serif;}
#stl-fund-it-container .learn-how-to-fund ul li{
padding-bottom: 10px;
}
#stl-fund-it-container .learn-how-to-fund ul a{text-decoration:none !important;}
/* CUSTOM Learn How to Fund It - Remove from Adaptive */
#stl-fund-it-container .learn-how-to-fund ul li {display:inline-block;width:100%;}
/* ADAPTIVE - Remove from Custom */
/* uncomment this to use
.learn-how-to-fund {background:none;margin:20px 0px 20px 10px;}
@media only screen and (min-width:768px) {
.learn-how-to-fund {padding:0;}
.learn-how-to-fund h3 {background-color:#000; color:#fff !important; margin:0; padding:10px; text-align:center;}
.learn-how-to-fund ul {padding:10px; margin:10px 25px; list-style-type:disc;}
}
*/
/* -------------------------------
Gift Illustrator
------------------------------- */
/* DEFAULT */
#stl-gift-illustrator-container {margin:20px 0 30px; padding:25px; background: #D52144;}
#stl-gift-illustrator-container .GIfeature {margin:0;padding:0;}
#stl-gift-illustrator-container .GIfeature h3, .stl-gift-illustrator-row .GIfeature h3 {font-size:30px;margin: 0 0 15px !important;color:#FFF;padding:0;}
#stl-gift-illustrator-container .GIfeature p, .stl-gift-illustrator-row .GIfeature p {
color:#FFF;}
#stl-gift-illustrator-container .GIfeature a{
font-size: 1em;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
color:#FFF;
letter-spacing: 2px;
}
/* ADAPTIVE - Remove from Custom */
/* uncomment to use
.stl-gift-illustrator-row .GIfeature {background:#ccc;margin:20px 0;padding:0;}
*/
/* -------------------------------
PEPK Pullout
------------------------------- */
/* DEFAULT */
.stl-pepc-promo h3 {}
.stl-pepc-promo img {display:none;}
.stl-pepc-promo .stlButton {}
.stl-pepc-promo .stlButton span {}
/* ADAPTIVE - REMOVE FROM CUSTOM */
/* uncomment to use
.stl-pepc-promo img {margin:0 auto;}
*/
/* -------------------------------
Next Steps
------------------------------- */
.next-steps.row {margin:20px 0;} /* Fix left and right margins by overriding bootstrap css */
.next-steps h3.visible-xs.hidden-lg {display:none !important;}
.next-steps h3.next-steps-head.hidden-xs.visible-md.visible-lg {display:block !important;}
.next-steps ol {padding:0 0 0 15px;} /* Align list elements flush left */
@media only screen and (min-width:768px) {
#stl-cms .next-steps h3.next-steps-head.hidden-xs.visible-md.visible-lg {margin-top:0;}
.next-steps ol li {margin-bottom:10px;}
.next-steps p {margin:10px 15px}
}
#stl-next-steps-container {
font-family: calluna, serif;
font-size: 16px;
color: #333;
line-height: 1.5em;
}
div#stl-fund-it-container {
border-top: 1px solid #dbdcdc;
}
/* -------------------------------
Hide Empty Containers
------------------------------- */
#stl-video-container:empty, #stl-fund-it-container:empty, #stl-gift-illustrator-container:empty, #stl-pepk-container:empty {display:none;}
#stl_case-study:empty {margin:-20px 0;} /* margin is set on the container, so have to adjust */
/* -------------------------------
Popup Forms
------------------------------- */
.popup-form { background:#FFF; margin:40px auto; padding:20px 30px; text-align:left; max-width:450px; position:relative; }
#brochureform, #DCGAbrochureform, .white-popup-block {background:#FFF; margin:0 auto; padding:20px; text-align:left; max-width:450px; position:relative; }
.white-popup-block p {}
.white-popup-block p input[type="text"], .white-popup-block p input[type="email"] {width:100%;}
/* -------------------------------
DCGA Pullout (CGA Page Only)
------------------------------- */
/* DEFAULT */
#dcga-container {}
#dcga-container h3 {}
#dcga-container p {}
.giftSet:before{
display: block;
color: #959490;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.25;
content:"Brochure";
padding-bottom: 10px;
}
.giftSet.stl-pepc-promo:before{
content:"Planning Guide";
}
.giftSet { border-top: 1px solid #dbdcdc;
padding:30px 0;}
.giftSet h3 {color:#D52144;
margin: 0 0 15px !important;}
.giftSet p {}
.giftSet a{
color: #005596;
font-size: 1em;
letter-spacing: 2px;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
}
/* ADAPTIVE - remove from Custom */
/* uncomment to use
#dcga-container {clear:both;}
*/
/* -------------------------------
eBrochure pullouts
------------------------------- */
.pull-right.eBrochure {padding-top:0;}
.eBrochure h3 {margin:0 0 5px;}
/* -------------------------------
Real Estate Page
------------------------------- */
.reg-toggle-container {margin:10px 0;}
.reg-toggle-box {cursor: pointer;
background: #F8F7F5;
color: #D31F44;
padding: 10px;font-family: calluna, serif;
font-size: 20px;}
#stl-cms .reg-content a.stlButton{
color: #005596 !important;
font-size: 1em;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
background:none;
border:none;
padding: 0;
text-align: left;
}
button.stlButton:hover{
}
.reg-content > p{
padding-top:10px;
}
.reg-toggle-box span:first-of-type {}
.reg-toggle-box span.toggle-span:before {content:" ";}
.reg-content {display:none;margin: 0 0 20px;}
.reg-content > p:last-child, #real-estate-page .reg-content > p:last-child a {margin-bottom:0;}
/* -------------------------------
Definition Flyovers
------------------------------- */
.popup-flyover {display:none;}
.popup-flyover:after {}
.popup-flyover span.toolH3:empty {display:none;}
.popup-flyover p {}
.popup-flyover p:nth-child(2) {margin-top:10px;} /* Add space under headers in flyovers */
@media only screen and (min-width:768px) {}
/* -------------------------------
Contact Us Page
------------------------------- */
.stl_ContactInfo {margin-bottom:20px;}
.stl_ContactName {font-weight:bold;}
.stl_ContactTitle {font-style:italic;}
/* form */
#stl-contact-form input[type="text"], #stl-contact-form input[type="email"], #stl-contact-form textarea {border:1px solid #999;padding:3px;width:100%;}
@media only screen and (min-width:768px) {
#stl-contact-form input[type="text"], #stl-contact-form input[type="email"], #stl-contact-form textarea {width:50%;}
}
span.stl_ContactPhoto {
display: block;
}
/* -------------------------------
PEPC Download Page
------------------------------- */
#bymail {display:none; margin:10px 0 30px 0;} /* Hides bymail option until selected */
@media only screen and (min-width:768px) {
#pepc {margin-top:18px;}
.notes {color:#f00;}
#lessonBook, #recordBook {width:47%; float:left;}
#recordBook {float:right;}
.lrgBookImg {display:inline-block; height:auto; max-width:100%}
.bigNumber {
background:#999;
text-align:center; font:bold 20px/20px Arial, Helvetica, sans-serif; color:#FFF !important;
height:30px; width:24px;
float:left;
margin:4px 10px 0 0; padding:5px 3px;
}
.stepInfo {}
.lrgBookImg {margin-left:-8px; margin-bottom:10px;}
/* clearff */
.clearff:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
* html .clearff {zoom:1;}
/* IE6 */
*:first-child+html .clearff {zoom:1;}
}
/*************************************************************************************************************
////////////////////// Gift Exclusions
*************************************************************************************************************/
/* Appreciated Securities
.ge-as {display:none !important; visibility:hidden !important;}*/
/* Bargain Sale
.ge-bs {display:none !important; visibility:hidden !important;} */
/* Charitable Gift Annuities
.ge-cga {display:none !important; visibility:hidden !important;} */
/* Charitable Remainder Trust
.ge-crt {display:none !important; visibility:hidden !important;}*/
/* Charitable Lead Trust
.ge-clt {display:none !important; visibility:hidden !important;}*/
/* Charitable Remainder Unitrust
.ge-crut {display:none !important; visibility:hidden !important;}*/
/* Deferred Charitable Gift Annuities
.ge-dcga {display:none !important; visibility:hidden !important;}*/
/* Donor Advised Funds
.ge-daf {display:none !important; visibility:hidden !important;}*/
/* Endowed Gift */
.ge-endow {display:none !important; visibility:hidden !important;}
/* life insurance
.ge-li {display:none !important; visibility:hidden !important;}*/
/* Memorial Gift
.ge-mem {display:none !important; visibility:hidden !important;}*/
/* Real Estate */
.ge-re {display:none !important; visibility:hidden !important;}
/* Retained Life Estate
.ge-rle {display:none !important; visibility:hidden !important;}*/
/* securities
.ge-sec {display:none !important; visibility:hidden !important;}*/
/* tangible personal property
.ge-tpp {display:none !important; visibility:hidden !important;}*/