/* --------- GLOBAL STYLES --------- */
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
.relative {
position: relative;
}
.img-container {
position: relative;
}
.img-container img {
display: block;
width: 100%;
height: auto;
}
.centered-text {
text-align: center;
}
.desktop-hidden {
display: none;
}
.mobile-hidden {
display: inherit;
}
.nowrap {
white-space: nowrap;
}
.centered-text {
text-align: center;
}
.underlined-text {
text-decoration: underline;
}
/* ------ PAGE STYLES ------ */
body {
font-family: arial, sans-serif;
}
header {
margin-top: 25px;
background-color: #fff;
}
body.finance-health .item.fh,
body.pretend-category .item.pc {
background-color: #63AFD4;
}
header #memberPortal {
color: #fff;
background-color: #63AFD4;
text-decoration: underline;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid #fff;
border-top: 0;
position: absolute;
right: 35px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 2px 2px 3px #ccc;
}
.logo-container {
float: left;
}
.logo-container img {
width: 223px;
height: 50px;
background-color: #fff;
margin-right: 5px;
}
.navbar-fixed-top{
padding-top:25px;
background-color: #fff;
}
ul.nav {
background-color: #0F487F;
}
ul.nav .item.last {
float: right;
}
.navbar-header {
background-color: #fff;
}
.navbar-toggle .icon-bar {
background-color: #cccccc;
border-radius: 1px;
}
.navbar-nav>li>a {
color: #fff;
font-size: 14px;
font-weight: 700;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: #63AFD4;
}
.light-blue-text {
color: #63AFD4;
}
#breadcrumbs {
font-family: helvetica, arial, sans-serif;
padding: 25px 0 0;
}
#breadcrumbs a,
#breadcrumbs a:hover,
#breadcrumbs a:visited,
#breadcrumbs a:focus {
font-size: 22px;
text-decoration: underline;
color: #63AFD4;
}
#mainContent {
padding: 80px 0 50px;
}
.article-column {
border-right: 3px solid #b4b4b4;
padding-right: 50px;
}
.article-column h1 {
margin-top: 0;
margin-bottom: 20px;
font-size: 56px;
line-height: 66px;
font-weight: 700;
color: #0F487F;
}
.article-column .img-container.feature {
margin-bottom: 30px;
}
.article-column .img-container.feature .band-medium {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 25px;
background-color: rgb(15,72,127);
background-color: rgba(15,72,127,.7);
}
.article-column .img-container.feature .band-dark {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15px;
background-color: #0F487F;
}
.article-column .published-date {
font-size: 24px;
line-height: 26px;
}
.article-column .article {
margin-top: 50px;
}
.article h3 {
font-size: 32px;
color: #0F487F;
margin-bottom: 25px;
margin-top: 50px;
}
.article h4 {
font-size: 24px;
color: #0F487F;
margin-bottom: 15px;
margin-top: 50px;
}
.article p {
font-family: helvetica, arial, sans-serif;
font-size: 22px;
margin-bottom: 25px;
}
.article ul li {
font-family: helvetica, arial, sans-serif;
font-size: 22px;
margin-bottom: 15px;
}
.article .brand-std {
color: #0F487F;
font-weight: 400;
}
.article .brand-bold {
color: #0F487F;
font-weight: 700;
}
.mt30 {
margin-top: 30px;
}
.article a,
.article a:hover,
.article a:focus,
.article a:visited {
text-decoration: underline;
color: #63AFD4;
}
.article video {
box-shadow: 0 0 6px #b4b4b4;
width: 100%;
max-width: 600px;
height: auto;
}
.article .ul-link-intro {
font-size: 22px;
}
ul.no-bullets li {
list-style: none;
margin-bottom: 4px;
}
ul.ul-none {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.colored-bullets li::before {
content: "\2022";
color :#63AFD4;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.article ul {
margin-bottom: 40px;
}
.errors-header {
margin-top: 60px;
margin-bottom: 0;
font-size: 36px;
}
.meals-header {
margin-top: 60px;
margin-bottom: 0;
font-size: 36px;
}
.related-column {
padding-left: 30px;
}
.related-column h2 {
margin-top: 0;
font-size: 46px;
color: #0F487F;
letter-spacing: 1px;
}
.suggestion img {
width: 100%;
height: auto;
}
.suggestion {
margin-bottom: 20px;
}
.suggestion .suggestion-text {
position: relative;
padding: 15px;
background-color: #0F487F;
color: #fff;
font-size: 18px;
}
.suggestion .suggestion-text div {
padding-right: 135px;
}
.suggestion .suggestion-text a {
display: inline-block;
color: #0F487F;
background-color: #fff;
padding: 3px 10px;
position: absolute;
right: 15px;
bottom: 15px;
}
.suggestion .suggestion-text a,
.suggestion .suggestion-text a:hover,
.suggestion .suggestion-text a:focus,
.thumb .thumb-text a,
.thumb .thumb-text a:hover,
.thumb .thumb-text a:focus,
.feature-thumb .feature-thumb-text a,
.feature-thumb .feature-thumb-text a:hover,
.feature-thumb .feature-thumb-text a:focus {
text-decoration: none;
}
.suggested-thumbs-column {
text-align: center;
}
.feature-thumb .band-medium {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background-color: rgb(15,72,127);
background-color: rgba(15,72,127,.7);
}
.feature-thumb-text {
padding: 15px 15px 55px;
background-color: #0F487F;
color: #fff;
font-size: 16px;
position: relative;
}
.feature-thumb-text h1 {
margin-top: 0;
margin-bottom: 15px;
font-size: 30px;
font-weight: 700;
}
.feature-thumb-text a {
color: #000;
background-color: #fff;
padding: 5px 12px;
position: absolute;
bottom: 15px;
right: 15px;
font-weight: 700;
}
.thumb {
display: flex;
margin-bottom: 15px;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 1px solid #ccc;
}
.thumb .image-container {
width: 40%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.article-anchor {
display: block;
position: relative;
top:-80px;
visibility: hidden;
}
.article .finance-health-image {
margin-left: auto;
margin-right: auto;
width: 400px;
}
.article .finance-health-image img {
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.article .finance-health-wide-image {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.article .finance-health-wide-image img {
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.article .last{
margin-top: 50px;
}
.budget-rating{
color: #008000;
}
/* ############ */
/* Make a rule like below for each thumb with .b, .c, .d, etc., where only the background url is set.
The markup will also need to get the img src associated with whichever picture is wanted on each thumb.
This setup is needed so that both desktop and mobile get image styles that don't look terrible.
Use the -section-page-secondary-image version of the images here, and note that the folder and file must match */
/* finance medical */
.thumb a .image-container.a, .thumb .image-container.a{
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/8d6e390a-a140-4acd-9d0a-c06d70c795ff.png');
}
.thumb a .image-container.b, .thumb .image-container.b {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/bae60e9f-7556-4142-b1fc-215c71338b69.png');
}
.thumb a .image-container.c, .thumb .image-container.c {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/76c9d949-ebb1-45e9-9025-f94364a81649.png');
}
/* finance health*/
.thumb .image-container.d {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/710a816b-f2f5-4a2f-8b53-4847976c2cdf.png');
}
.thumb .image-container.e {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/a0e4744b-b510-4fc7-859f-f37a39c1a8f7.png');
}
.thumb .image-container.f {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/f6753028-fa9e-47cc-a598-c9316b616329.png');
}
/* finance budget */
.thumb .image-container.g {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/04ee1568-85f2-4656-96be-33f9822a83f5.png');
}
.thumb .image-container.h {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/becaa119-524c-4591-b0b8-83804316c6c8.png');
}
.thumb .image-container.i {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/0dbb79f3-23a4-400b-8c45-bd86f65260e7.png');
}
/* lifestyle sleep*/
.thumb .image-container.j {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/bbc81a33-8d3b-4eaa-a275-d61693d2f6f7.png');
}
.thumb .image-container.k {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/ea80ff32-9754-41bc-9d26-5b7dbcd2c594.png');
}
.thumb .image-container.l {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/8aeded56-d05c-4963-b7d6-2f61b1f06c59.png');
}
/* lifestyle cold*/
.thumb .image-container.m {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/101b2b76-32f5-4203-b776-4dedae6f20ad.png');
}
.thumb .image-container.n {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/383af5cb-de8e-4c53-89c9-aab94dea63b0.png');
}
.thumb .image-container.o {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/6d7ae018-efd0-43cc-8737-8ecfbf6e029b.png');
}
/* lifestyle healthy*/
.thumb .image-container.p {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/0c712f92-29ff-42c3-995c-c5679d72a20d.png');
}
.thumb .image-container.q {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/35875744-50b2-42a8-94f1-5f20d6d944c9.png');
}
.thumb .image-container.r {
background-image: url('https://image.myblue.bcbsm.com/lib/fe5d15707c630c787615/m/1/b09a832d-634e-499e-8084-9b8443f856a7.png');
}
/* ############ */
.thumb img {
display: none;
}
.thumb .thumb-text {
position: relative;
float: right;
width: 60%;
padding: 15px 15px 55px;
background-color: #fff;
font-size: 16px;
}
.thumb .thumb-text a {
display: inline-block;
color: #fff;
background-color: #63AFD4;
padding: 5px 12px;
position: absolute;
right: 15px;
bottom: 15px;
}
.thumb-text h2 {
margin-top: 0;
font-size: 23px;
font-weight: 700;
}
.link-box {
display: inline-block;
margin-top: 15px;
background-color: #0F487F;
color: #fff;
text-align: center;
border: 6px solid #63AFD4;
font-size: 18px;
}
.link-box a {
display: block;
padding: 15px 20px;
color: #fff;
}
.link-box a,
.link-box a:hover,
.link-box a:visited,
.link-box a:focus {
text-decoration: none;
color: #fff;
}
.article .flat-list li {
margin-bottom: 5px;
}
.article .list-intro {
margin-bottom: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 22px;
line-height: 24px;
}
.infographic-container .infographic {
max-width: 100%;
}
.infographic-container .infographic.skinny {
max-width: 600px;
}
footer {
background-color: #D7D7D7;
padding: 40px 0 35px;
}
.article .mb5 {
margin-bottom: 5px;
}
/* ------ ADDTHIS BUTTONS STYLES ------ */
.desktop-flex {
display: flex;
}
.share-article-container {
width: 245px;
position: absolute;
bottom: 0;
}
.share-article-container p {
font-size: 24px;
font-weight: bold;
margin-bottom: 4px;
}
/* ------ MEDIA QUERIES ------ */
@media screen and (min-width: 768px) {
.navbar-nav {
float: none;
padding-left: 220px;
}
.navbar-collapse.collapse {
padding-right: 0;
}
}
@media screen and (max-width: 767px){
.desktop-flex {
display: block;
}
.share-article-container {
position: static;
margin: 25px auto 0;
}
header #memberPortal{
color: #0F487F;
background-color: #A0A0A0;
text-decoration: underline;
border-radius: 4px;
border: none;
border-top: 0;
position: relative;
right: 0;
padding-top: 0;
padding-bottom: 0;
box-shadow: none;
float: left;
width: 100%;
font-weight: 700;
}
header #memberPortal>a:focus, header #memberPortal>a:hover {
border-radius: 4px;
}
}
@media screen and (min-width: 991px) {
.navbar-nav>li>a {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
footer .container {
width: 1170px;
}
}
@media screen and (min-width: 1400px) {
.container {
width: 1370px;
}
}
@media screen and (min-width: 1600px) {
.container {
width: 1570px;
}
}
@media screen and (max-width: 1199px) {
.suggestion .suggestion-text div {
padding-bottom: 40px;
padding-right: 0;
}
.article-column h1 {
font-size: 48px;
line-height: 52px;
}
.related-column h2 {
font-size: 37px;
}
}
@media screen and (max-width: 991px) {
.article-column h1 {
font-size: 38px;
line-height: 42px;
}
.related-column h2 {
margin-top: 20px;
font-size: 26px;
line-height: 28px;
}
.article-column .published-date {
font-size: 20px;
line-height: 22px;
}
.article p,
.article .ul-link-intro,
.article ul li {
font-size: 20px;
}
.suggestion .suggestion-text {
font-size: 16px;
}
.feature-thumb-text {
font-size: 15px;
}
.feature-thumb-text h1 {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.article-column {
padding-right: 14px;
border-right: 0;
}
.article-column h1 {
font-size: 30px;
line-height: 32px;
}
.article-column .published-date {
font-size: 18px;
line-height: 20px;
}
.article-column .article {
margin-top: 30px;
}
.article h3 {
margin-top: 40px;
font-size: 26px;
line-height: 30px;
}
.article p,
.article ul li {
font-size: 18px;
margin-bottom: 20px;
}
.article .list-intro {
font-size: 18px;
}
.related-column {
padding-left: 15px;
}
.related-column h2 {
font-size: 32px;
}
.feature-thumb {
margin-bottom: 15px;
}
.thumb {
display: block;
}
.thumb .image-container {
display: block;
width: 100%;
}
.thumb .thumb-text {
float: none;
width: 100%;
padding: 15px 15px 55px;
}
.thumb .image-container {
background: none;
background-size: auto;
}
.thumb img {
display: block;
width: 100%;
}
}
@media screen and (max-width: 630px) {
.infographic-container .infographic.skinny {
max-width: 100%;
}
}
@media screen and (max-width: 475px) {
.article iframe {
height: 200px;
width: 100%;
}
}
@media screen and (max-width: 475px) {
.container>.navbar-header{
margin-left:0px;
}
}