eclipse_newsletter/_includes/_index-css.php

<?php
/*******************************************************************************
 * Copyright (c) 2014, 2016 Eclipse Foundation and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *    Christopher Guindon (Eclipse Foundation) - Initial implementation
 *    Eric Poirier (Eclipse Foundation)
 *******************************************************************************/
?>

<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell {
  height: 100% !important;
  margin: 0;
  padding: 0;
  width: 100% !important;
}

.float-left {
  float:left;
}

.margin-right-20 {
  margin-right:20px;
}

#emailBody table {
  border-collapse: collapse;
}

#emailBody img, a img {
  border: 0;
  outline: none;
  text-decoration: none;
}

#emailBody h1, #emailBody h2, #emailBody h3, #emailBody h4, #emailBody h5, #emailBody h6 {
  margin: 0;
  padding: 0;
}

#emailBody p {
  margin: 1em 0;
}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody {
  width: 100%;
}

#emailBody .ExternalClass {
  width: 100%;
} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
  .ExternalClass td, .ExternalClass div {
  line-height: 100%;
} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td {
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a {
  padding: 0;
}
  /* Force Outlook 2007 and up to provide a "view in browser" message. */
img {
  -ms-interpolation-mode: bicubic;
} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
  /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
  padding-top: 20px;
}

.flexibleImage {
  height: auto;
}

.bottomShim {
  padding-bottom: 20px;
}

.imageContent, .imageContentLast {
  padding-bottom: 20px;
}

.nestedContainerCell {
  padding-top: 20px;
  padding-Right: 20px;
  padding-Left: 20px;
}
/*////// GENERAL STYLES //////*/
body:not(#body_solstice), #bodyTable {
  background-color: #F5F5F5;
}

#bodyCell {
  padding-top: 40px;
  padding-bottom: 40px;
}

#emailBody {
  background-color: #FFFFFF;
  border: 1px solid #e9e9e9;
  border-collapse: separate;
  padding:20px;
  margin-bottom:50px;
}

#emailBody h1, #emailBody h2, #emailBody h3, #emailBody h4, #emailBody h5, #emailBody h6 {
  color: #202020;
  font-family: Arial, sans-serif, 'Lato';
  font-size: 20px;
  line-height: 125%;
  text-align: Left;
}

.textContent, .textContentLast {
  color: #404040;
  font-family: Arial, sans-serif, 'Lato';
  font-size: 16px;
  line-height: 125%;
  text-align: Left;
  padding-bottom: 20px;
}

.textContent a, .textContentLast a {
  color: #2C9AB7;
  text-decoration: underline;
}

.nestedContainer {
  background-color: #E5E5E5;
  border: 1px solid #CCCCCC;
}

.emailButton {
  background-color: #2C9AB7;
  border-collapse: separate;
  border-radius: 4px;
}

.buttonContent {
  color: #FFFFFF;
  font-family: Arial, sans-serif, 'Lato';
  font-size: 18px;
  font-weight: bold;
  line-height: 100%;
  padding: 15px;
  text-align: center;
}

.buttonContent a {
  color: #FFFFFF;
  display: block;
  text-decoration: none;
}

.emailCalendar {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
}

.emailCalendarMonth {
  background-color: #2C9AB7;
  color: #FFFFFF;
  font-family: Arial, sans-serif, 'Lato';
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

.emailCalendarDay {
  color: #2C9AB7;
  font-family: Arial, sans-serif, 'Lato';
  font-size: 60px;
  font-weight: bold;
  line-height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
/*////// MOBILE STYLES //////*/
@media only screen and (max-width: 480px) {
  /*////// CLIENT-SPECIFIC STYLES //////*/
  body {
    width: 100% !important;
    min-width: 100% !important;
  } /* Force iOS Mail to render the email at full width. */
  /*////// FRAMEWORK STYLES //////*/
  /*
    CSS selectors are written in attribute
    selector format to prevent Yahoo Mail
    from rendering media query styles on
    desktop.
  */
  table[id="emailBody"], table[class="flexibleContainer"] {
    width: 100% !important;
  }
  /*
    The following style rule makes any
    image classed with 'flexibleImage'
    fluid when the query activates.
    Make sure you add an inline max-width
    to those images to prevent them
    from blowing out.
  */
  img[class="flexibleImage"] {
    height: auto !important;
    width: 100% !important;
  }
  /*
    Make buttons in the email span the
    full width of their container, allowing
    for left- or right-handed ease of use.
  */
  table[class="emailButton"] {
    width: 100% !important;
  }
  td[class="buttonContent"] {
    padding: 0 !important;
  }
  td[class="buttonContent"] a {
    padding: 15px !important;
  }
  td[class="textContentLast"], td[class="imageContentLast"] {
    padding-top: 20px !important;
  }
  /*////// GENERAL STYLES //////*/
  td[id="bodyCell"] {
    padding-top: 10px !important;
    padding-Right: 10px !important;
    padding-Left: 10px !important;
  }
}
</style>


<!--THEME POUR ECLIPSE-->
<style>
#emailBody * {
  font-family: Arial, sans-serif, 'Lato';
}

#emailBody p {
  font-size: 12px;
  color: #5b5b5b;
  margin-top: 0px;
}

#emailBody h3 {
  color: #3b335a;
  font-weight:700;
}

#emailBody li {
  font-size: 12px;
}

#emailBody .buttonContent {
  background-color: #f7941e;
  border-radius: 10px;
  transition: background-color 0.5s;
}

#emailBody .buttonContent:hover {
  background-color: #d17e1b;
  transition: background-color 0.5s;
}

#emailBody .emailButton {
  background-color: transparent;
}

#emailBody .ThreeColumns {
  float: left;
  width: 33.3333333%;
}

#emailBody .ThreeColumns p, #emailBody .ThreeColumns h3 {
  color: #fff;
  text-align: center;
  padding: 10px;
}

#emailBody .ThreeColumns h3 {
  text-transform: uppercase;
}

#emailBody .ThreeColumns td {
  padding-bottom: 0px;
  padding-top: 0px !important;
}

#emailBody .banner_Container a {
  color:#5b5b5b;
}

#emailBody .banner_Container a:hover {
  color:#5b5b5b;
}

#emailBody #bannerTop {
  height: 200px;
  padding:0 20px;
}

#emailBody #bannerTop * {
  color: white;
}

#emailBody #bannerTop h2 {
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  padding-right: 10%;
  padding-left: 10%;
}

#emailBody #date {
  position: absolute;
  margin-top: -30px;
}

#emailBody .marginLeft {
  margin-left: 7%;
}

#emailBody .advestisementBanner {
  height: 208px;
}

#emailBody .textAdvestisementBanner {
  color: white;
  font-weight: 100;
  text-align: center;
  margin-top: 100px;
  text-transform: uppercase;
}

#emailBody #bannerBottom {
  height: 100px;
  padding-top: 0px;
  padding-bottom: 0px;
}

#emailBody #bannerBottom tr:first-child .flexibleImage {
  padding-left:10px;
}

@media screen and (max-width:991px) and (min-width:768px) {
  #emailBody #bannerBottom h3 {
    font-size:16px;
  }
}

#emailBody #iconSocial {
  width: 125px;
  margin: 0 auto;
}

#emailBody #iconSocial img {
  margin-left: 4px;
  opacity: 1;
  transition: opacity 0.5s;
}

#emailBody #iconSocial img:hover {
  opacity: 0.8;
  transition: opacity 0.5s;
}

#emailBody #emailFooter {
  padding-top: 5px;
  margin-bottom: 0px;
}

@media screen and (max-width:480px) {
  #emailBody .ThreeColumns {
    width: 100% !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .ImageText_TwoTier .text_TwoTier {
    width: 100% !important;
  }
  #emailBody .ImageText_TwoTier .marginLeft {
    margin-left: 0px !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .advestisementBanner_Container .textAdvestisementBanner {
    margin-top: 23% !important;
  }
}

@media screen and (max-width:400px) {
  #emailBody .advestisementBanner_Container .textAdvestisementBanner {
    margin-top: 27% !important;
  }
}

@media screen and (max-width:320px) {
  #emailBody .advestisementBanner_Container .textAdvestisementBanner {
    margin-top: 30% !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .advestisementBanner_Container .textAdvestisementBanner {
    margin-top: 23% !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .ThreeColumns_TextImages .ThreeColumns {
    float: none !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .ThreeColumns_TextImages img {
    display: block !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .banner_Container h2 {
    font-size: 20px !important;
  }
}

@media screen and (max-width:310px) {
  #emailBody .banner_Container h2 {
    padding-right: 5% !important;
    padding-left: 5% !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody .followUs {
    padding-bottom: 20px !important;
  }
}

@media screen and (max-width:480px) {
  #emailBody #bannerBottom .ThreeColumns td {
    display: block;
    margin-top: 0px !important;
  }
  #emailBody #emailFooter {
    padding-bottom: 0px !important;
  }
}

.article-title {
  text-align:center;
}

#container-newsletter .newsletter{
  padding-bottom:0;
}

#novaContent {
  position:relative;
}

.newsletter-header {
  position:absolute;
  top:0;
  display:block;
  width:100%;
}

.newsletter-header-bg {
  background-image:url("/downloads/images/thankyou/newsletter_header_bg.jpg");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
  width:100%;
  height:400px;
  display:block;
}

@media screen and (min-width:1200px) {
  .newsletter-header-bg {
    height:265px;
  }

}

.newsletter-header-bg.newsletter-subpages {
  background-image:url('/community/eclipse_newsletter/assets/public/images/featured-newsletter-bg.jpg');
}

.sponsored-by-neon{
  background-color:#1f1f1f;
  padding:15px 0;
  z-index:999;
  color:#9e9e9e;
}

.sponsored-by-neon .neon-logo {
  max-width:150px;
  max-height:50px;
  margin-left: 10px;
}

@media screen and (min-width:768px) {
  .eclipse-newsletter-sidebar-subscribe,
  .eclipse-newsletter-sidebar-subscribe h3 {
    color:#fff;
  }
}

.eclipse-newsletter-sidebar-subscribe {
  text-align:center;
}

@media screen and (min-width:768px) {
  .eclipse-newsletter-sidebar-subscribe {
    text-shadow: #000 0px 0px 5px;
  }
}


.eclipse-newsletter-sidebar-subscribe h3 {
  text-transform:uppercase;
  font-size:31px;
}

.eclipse-newsletter-sidebar-big-text {
  font-size: 22px;
  font-weight: 100;
}

.eclipse-newsletter-sidebar-subscribe a {
  color:#f7941d;
}

.eclipse-newsletter-sidebar-subscribe a:hover {
  color:#d77f14;
}

[style*='Lato'] {
    font-family: 'Lato', Arial, sans-serif !important;
}
</style>

<!--FONT-->
<link href='https://fonts.googleapis.com/css?family=Lato:400,700'
  rel='stylesheet' type='text/css'>