/*
Title:      Footer default styles
Date:       November 2012
Author:     teodora.costin.ext@belgacom.be
Remarks:    Never hesitate to comment your CSS declarations!!! Comments will be erase on prod via minify.php anyway :)
*/
/* ---------------------------------------- Sprite --- */
/* I like defining sprites in a center point, making it easy to have a bird's-eye view all elements using the sprites. */
.footer-container .securityPartners li.linkimg,
.footer-container .mainFooter .logo,
.pre-footer-container .icon {
  background-image: url("../../images/ng/footer-sprite.png");
}

/* I do not want to apply a JavaScript fix for IE6 and the lack of png24 support so I use a png8 for this case. */
.ie6 .footer-container .securityPartners li.linkimg,
.ie6 .footer-container .mainFooter .logo,
.ie6 .pre-footer-container .icon {
  background-image: url("../../images/ng/footer-sprite-ie6.png");
}

/* ---------------------------------------- Global --- */
.pre-footer-container a,
.footer-container a,
.post-footer-container a {
  color: #fff;
  text-decoration: none;
}

.pre-footer-container a:hover,
.footer-container a:hover,
.footer-container .securityPartners p a:hover,
.post-footer-container a:hover {
  text-decoration: underline;
}

.pre-footer-container,
.footer-container,
.post-footer-container {
  font-size: 10px;
  font-size: 1.0rem;
}

.ie6 .pre-footer-container .bodyContainer,
.ie6 .footer-container .bodyContainer,
.ie6 .post-footer-container .bodyContainer {
  width: 980px;
  /* Due to the lack of support of max-width in IE6, I define the width... */
}

/* ---------------------------------------- Pre-footer --- */
.bodyContainer {
  clear: both;
}

.pre-footer-container {
  background-color: #414141;
  color: #fff;
  border-bottom: 1px solid #000;
  line-height: 27px;
  line-height: 2.7rem;
  /*margin-top:35px; /*TODO Continue testing when the homepage is ready for complete testing on IE */
}

.pre-footer-container a {
  color: #0297d6;
}

.pre-footer-container .mobile-devices {
  float: left;
  padding-left: 112px;
  /* Fix size used to display part of a sprite */
  z-index: 1;
  /* Because the facebook will come on top (after .mobile-devices in the HTML Markup)... */
}

.pre-footer-container .follow-us-on-facebook {
  padding-right: 35px;
  /* Fix size used to display part of a sprite */
  width: auto;
}

.pre-footer .mobile-devices .icon {
  display: block;
  width: 102px;
  /* Fix size used to display part of a sprite */
  height: 62px;
  /* Fix size used to display part of a sprite */
  background-position: 0 -65px;
  /* Fix size used to display part of a sprite */
  left: 0;
  bottom: 0;
}

.pre-footer .follow-us-on-facebook .icon {
  display: block;
  width: 30px;
  /* Fix size used to display part of a sprite */
  height: 27px;
  /* Fix size used to display part of a sprite */
  background-position: -105px -65px;
  /* Fix size used to display part of a sprite */
  right: 0;
  bottom: 10px;
}

.ie6 .pre-footer .follow-us-on-facebook .icon {
  bottom: 9px;
  /* IE6 is different :-( But you know that! */
}

.ie7 .pre-footer .follow-us-on-facebook .icon {
  bottom: 10px;
  /* IE7 is different :-( But you know that! */
}

/* ---------------------------------------- main footer --- */
.footer-container {
  position: relative;
  overflow: hidden;
  background-color: #000;
  /* background with gradient */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#000));
  /* old webkit */
  background-image: -webkit-linear-gradient(#292929, #000);
  /* new webkit */
  background-image: -moz-linear-gradient(#292929, #000);
  /* mozilla */
  background-image: -ms-linear-gradient(#292929, #000);
  /* IE10 preview */
  background-image: -o-linear-gradient(#292929, #000);
  /* opera 11.10+ */
  background-image: linear-gradient(#292929, #000);
  /* future CSS3 browsers */
  color: #fff;
  border: 1px solid #465c50;
  border-width: 1px 0;
}

.footer-container ul.segments,
.footer-container ul.segments a {
  color: #26a1d4;
}

.footer-container ul.segments {
  margin-top: 2.05%;
  /* 20px/980px */
  margin-bottom: 1.73469%;
  /* 16px/980px */
}

.footer-container .securityPartners {
  margin-bottom: 2.15%;
  /* 21px/980px */
}

.footer-container .securityPartners ul {
  height: 28px;
  /* Fix size used to display part of a sprite */
  margin-bottom: 3.6%;
  /* 9px/254px */
}

.footer-container .securityPartners li.linkimg {
  height: 28px;
  /* Fix size used to display part of a sprite */
  margin-right: 6px;
  /* Fix size used voluntary ! */
}

.footer-container div.securityPartners li.linkimg a {
  display: block;
  height: 28px;
  /* Fix size used to display part of a sprite */
  line-height: 28px;
  /* Fix size used to display part of a sprite */
}

.footer-container .securityPartners li.linkimg a:hover {
  text-decoration: none;
}

.footer-container div.securityPartners li.linkimg a strong {
  visibility: hidden;
}

.footer-container div.securityPartners ul li.cyberhate {
  background-position: 0 0;
  /* Fix size used to display part of a sprite */
  width: 41px;
  /* Fix size used to display part of a sprite */
}

.footer-container div.securityPartners ul li.spamsquad {
  background-position: -45px 0;
  /* Fix size used to display part of a sprite */
  width: 54px;
  /* Fix size used to display part of a sprite */
  margin-right: 2px;
  /*TODO*/
}

.footer-container div.securityPartners ul li.ecops {
  background-position: 0 -28px;
  /* Fix size used to display part of a sprite */
  width: 64px;
  /* Fix size used to display part of a sprite */
}

.footer-container div.securityPartners ul li.stopchildporno {
  background-position: -70px -28px;
  /* Fix size used to display part of a sprite */
  width: 25px;
  /* Fix size used to display part of a sprite */
}

.footer-container .mainFooter .logo {
  width: 85px;
  /* Fix size used to display part of a sprite */
  height: 61px;
  /* Fix size used to display part of a sprite */
  background-position: -99px 0;
  /* Fix size used to display part of a sprite */
  margin: 2.05% 0;
  /* 20px/980px */
  padding: 0;
  border: none 0;
  text-indent: -9999px;
}

.footer-container .mainFooter .logo span {
  visibility: hidden;
}

/* ---------------------------------------- Eye candy for capable browsers :) --- */
.pre-footer-container .icon,
.footer-container .mainFooter .logo,
.footer-container .securityPartners li.linkimg {
  -webkit-transition: opacity .3s ease-in-out;
  /* webkit */
  -moz-transition: opacity .3s ease-in-out;
  /* mozilla */
  -o-transition: opacity .3s ease-in-out;
  /* opera */
  transition: opacity .3s ease-in-out;
  /* future CSS3 browsers */
}

.pre-footer-container .icon:hover,
.footer-container .mainFooter .logo:hover,
.footer-container .securityPartners li.linkimg:hover {
  opacity: .8;
}

/* ---------------------------------------- post footer --- */
.post-footer-container {
  background: #414141;
  color: #fff;
  line-height: 14px;
  line-height: 1.4rem;
  text-align: center;
  padding: 0.5%;
  /* 3px/1263px */
  padding: 0.24%;
  /* 3px/1263px */
}

/* ---------------------------------------- SuperCMS Crosslinks --- */
.crosslink-column {
  width: 14.28571%;
  /* 140px /980px */
  padding: 1.73469% 2.05% 1.73469% 0;
  /* 16px /980px, 20px /980px */
  font-family: "Arial", Helvetica, sans-serif;
}

.crosslink-column h3 {
  font-family: "Arial", Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  /* @codingStandardsIgnoreStart */
  font-size: 11px;
  line-height: 20px;
  /* @codingStandardsIgnoreEnd */
  font-size: 1.1rem;
  line-height: 2.0rem;
  color: #FFF;
  font-weight: 700;
}

.crosslink-column ul li a {
  /* @codingStandardsIgnoreStart */
  font-size: 11px;
  line-height: 20px;
  /* @codingStandardsIgnoreEnd */
  font-size: 1.1rem;
  line-height: 2.0rem;
  color: #26A1D4;
  text-decoration: none;
}

.crosslink-column ul li a:hover {
  text-decoration: underline;
}