@charset "UTF-8";
/* ---------------------------------------- main-menu.css ---------------------------------------- */
/*

Guidelines are on the wiki
http://skynettask.bc/wikimso/index.php/Css-guidelines
and on the sharepoint.



Used on the homepage:
=====================

http://www.portal.local.skynet.be/ 
http://www.portal.dvl.skynet.be/ 
http://www.portal.uat.skynet.be/ 
http://www.portal.skynet.be/ 


Special comments legend:
========================

WIP: Work In Progress meaning the declarations are in test and may be removed/replaced...
---
TODO: Means that one or more operations (e.g. converting px to % units) are pending.
----
*/
/* =Sprite :)
-------------------------------------------------------------- */
nav.main-menu .first-level li span.icon,
nav.main-menu .second-level .follow-us-on-facebook a.icon,
nav.main-menu .second-level .mobile-devices a.icon,
nav.main-menu .second-level .close-main-menu .icon {
  background-image: url("../images/main-menu/main-menu-sprite.png");
  background-repeat: no-repeat;
}

/* =Main menu
-------------------------------------------------------------- */
nav.main-menu {
  display: block;
  margin: 0 0 20px 0;
  /*TODO*/
  clear: both;
}

nav.main-menu .first-level {
  background-color: #414141;
  height: 45px;
  /* TODO ? with line-height ?*/
  width: 100%;
}

nav.main-menu .second-level {
  background-color: #efefef;
  height: 7px;
  /* TODO ? with line-height ?*/
  border-bottom: 1px solid #d8d8d8;
  width: 100%;
  /* box-shadow */
  -moz-box-shadow: 0 1px 3px #D8D8D8;
  -webkit-box-shadow: 0 1px 3px #D8D8D8;
  box-shadow: 0 1px 3px #D8D8D8;
}

nav.main-menu .second-container {
  position: relative;
  width: 982px;
  margin: 0 auto;
  height: 7px;
  z-index: 1;
  background-color: #efefef;
}

/*
Guess what... IE does NOT understand the z-index property...
You can read more about it below.

Source: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/


The Problem
An absolutely positioned div (hover menu) and under it I had other contents also absolutely positioned.
The z-index are not respected...

The Solution
@jorenrapini pointed out that IE doesn’t use z-index properly.
I came across this quirksmode.org article that explained the flaw in detail:
    “In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly�
The above article does not directly contain a workaround but in the comments a fellow said the following:
    giving the parent element a higher z-index actual fixes the bug
<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />
*/
.ie nav.main-menu .second-container {
  z-index: 1000199;
}

nav.main-menu .second-level .content {
  width: 980px;
  padding-bottom: 59px;
  /* 33px of content + 26px margin-top */
  z-index: 1000100;
  background: #efefef;
  border: 1px solid #d8d8d8;
  border-top-width: 0;
  position: absolute;
  left: 0;
  top: 7px;
  display: none;
  /* border-radius */
  -moz-border-radius: 0 0 3px 3px;
  /* mozilla */
  -webkit-border-radius: 0 0 3px 3px;
  /* webkit */
  -khtml-border-radius: 0 0 3px 3px;
  /* Konqueror browsers */
  border-radius: 0 0 3px 3px;
  /* future CSS3 browsers */
  /* box-shadow */
  -moz-box-shadow: 0 1px 1px #D8D8D8;
  -webkit-box-shadow: 0 1px 1px #D8D8D8;
  box-shadow: 0 1px 1px #D8D8D8;
}

nav.main-menu .first-level ul {
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  display: block;
  width: 975px;
  /*TODO*/
}

.ie6 nav.main-menu .first-level ul {
  margin-left: -9px;
}

nav.main-menu .first-level ul li {
  float: left;
  display: block;
  margin: 0;
  margin-right: 1px;
}

.ie6 nav.main-menu .first-level ul li {
  height: 45px;
}

nav.main-menu .first-level li.home,
nav.main-menu .first-level ul li {
  background: #fff;
  margin: 0;
  overflow: hidden;
}

/* Width of each <li> */
nav.main-menu .first-level li.home {
  width: 48px;
}

nav.main-menu .first-level li.actu {
  width: 157px;
}

nav.main-menu .first-level li.lifestyle {
  width: 102px;
}

nav.main-menu .first-level li.tv-entertainment {
  width: 185px;
}

nav.main-menu .first-level li.contests {
  width: 128px;
}

nav.main-menu .first-level li.skynet-blogs {
  width: 82px;
}

nav.main-menu .first-level li.services {
  width: 189px;
}

nav.main-menu .first-level li.mail {
  width: 84px;
}

/* Width of each <li> */
.fr nav.main-menu .first-level li.home {
  width: 48px;
}

.fr nav.main-menu .first-level li.actu {
  width: 151px;
}

.fr nav.main-menu .first-level li.lifestyle {
  width: 108px;
}

.fr nav.main-menu .first-level li.tv-entertainment {
  width: 191px;
}

.fr nav.main-menu .first-level li.contests {
  width: 120px;
}

.fr nav.main-menu .first-level li.skynet-blogs {
  width: 86px;
}

.fr nav.main-menu .first-level li.services {
  width: 186px;
}

.fr nav.main-menu .first-level li.mail {
  width: 85px;
}

nav.main-menu .first-level ul li a {
  border-right: 1px solid #fff;
  outline: none;
}

nav.main-menu .first-level ul li.home a {
  border-left: 1px solid #fff;
}

/* Inside the <li> */
nav.main-menu .first-level ul li span.conciergerie,
nav.main-menu .first-level ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 44px;
  line-height: 4.4rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  padding: 0 12px;
  border-radius: 3px 3px 0 0;
  /* text-shadow */
  text-shadow: 0 1px 1px rgba(37, 120, 175, 0.8);
  background-color: #2b91d2;
  /* background with gradient */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4ea8d7), to(#2b91d2));
  /* old webkit */
  background-image: -webkit-linear-gradient(#4ea8d7, #2b91d2);
  /* new webkit */
  background-image: -moz-linear-gradient(#4ea8d7, #2b91d2);
  /* mozilla */
  background-image: -ms-linear-gradient(#4ea8d7, #2b91d2);
  /* IE10 preview */
  background-image: -o-linear-gradient(#4ea8d7, #2b91d2);
  /* opera 11.10+ */
  background-image: linear-gradient(#4ea8d7, #2b91d2);
  /* future CSS3 browsers */
  /* box-shadow */
  -moz-box-shadow: 0 1px 0 0 #83c2e3 inset;
  -webkit-box-shadow: 0 1px 0 0 #83c2e3 inset;
  box-shadow: 0 1px 0 0 #83c2e3 inset;
  border-top: 1px solid #4ea8d7;
}

.ie6 nav.main-menu .first-level ul li a {
  padding: 0;
  text-align: center;
  height: 44px;
  outline: none;
}

nav.main-menu .first-level ul li a:hover {
  background-color: #4ea8d7;
  /* background with gradient */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2b91d2), to(#4ea8d7));
  /* old webkit */
  background-image: -webkit-linear-gradient(#2b91d2, #4ea8d7);
  /* new webkit */
  background-image: -moz-linear-gradient(#2b91d2, #4ea8d7);
  /* mozilla */
  background-image: -ms-linear-gradient(#2b91d2, #4ea8d7);
  /* IE10 preview */
  background-image: -o-linear-gradient(#2b91d2, #4ea8d7);
  /* opera 11.10+ */
  background-image: linear-gradient(#2b91d2, #4ea8d7);
  /* future CSS3 browsers */
  /* box-shadow */
  -moz-box-shadow: 0 1px 0 0 #83c2e3 inset;
  -webkit-box-shadow: 0 1px 0 0 #83c2e3 inset;
  box-shadow: 0 1px 0 0 #83c2e3 inset;
  border-top: 1px solid #2b91d2;
}

nav.main-menu .first-level ul li a.active,
nav.main-menu .first-level ul li a.active:link,
nav.main-menu .first-level ul li a.active:visited,
nav.main-menu .first-level ul li a.active:hover,
nav.main-menu .first-level ul li a.active:active {
  color: #636363;
  /* text-shadow */
  text-shadow: 0 1px 1px #fff;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  background-color: #efefef;
  background-image: none;
  /* box-shadow */
  -moz-box-shadow: 0 1px 0 0 #efefef inset;
  -webkit-box-shadow: 0 1px 0 0 #efefef inset;
  box-shadow: 0 1px 0 0 #efefef inset;
  border-top: 1px solid #efefef;
}

nav.main-menu .first-level ul li a.active:hover {
  color: #7f7f7f;
}

nav.main-menu .first-level li.home a,
nav.main-menu .first-level li.home a.disabled:hover {
  background-color: #a1c959;
  /* background with gradient */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#cae187), to(#a1c959));
  /* old webkit */
  background-image: -webkit-linear-gradient(#cae187, #a1c959);
  /* new webkit */
  background-image: -moz-linear-gradient(#cae187, #a1c959);
  /* mozilla */
  background-image: -ms-linear-gradient(#cae187, #a1c959);
  /* IE10 preview */
  background-image: -o-linear-gradient(#cae187, #a1c959);
  /* opera 11.10+ */
  background-image: linear-gradient(#cae187, #a1c959);
  /* future CSS3 browsers */
  /* box-shadow */
  -moz-box-shadow: 0 1px 0 0 #d5eba3 inset;
  -webkit-box-shadow: 0 1px 0 0 #d5eba3 inset;
  box-shadow: 0 1px 0 0 #d5eba3 inset;
  border-top: 1px solid #cae187;
}

nav.main-menu .first-level li.home a.disabled:hover,
nav.main-menu .first-level li.home a.disabled:hover .icon {
  cursor: default;
}

nav.main-menu .first-level li.home a:hover {
  border-top: 1px solid #cae187;
  background-color: #cae187;
  /* background with gradient */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a1c959), to(#cae187));
  /* old webkit */
  background-image: -webkit-linear-gradient(#a1c959, #cae187);
  /* new webkit */
  background-image: -moz-linear-gradient(#a1c959, #cae187);
  /* mozilla */
  background-image: -ms-linear-gradient(#a1c959, #cae187);
  /* IE10 preview */
  background-image: -o-linear-gradient(#a1c959, #cae187);
  /* opera 11.10+ */
  background-image: linear-gradient(#a1c959, #cae187);
  /* future CSS3 browsers */
  /* box-shadow */
  -moz-box-shadow: 0 1px 0 0 #d5eba3 inset;
  -webkit-box-shadow: 0 1px 0 0 #d5eba3 inset;
  box-shadow: 0 1px 0 0 #d5eba3 inset;
}

nav.main-menu .first-level ul li span.icon {
  width: 10px;
  height: 6px;
  position: absolute;
  right: 10px;
  top: 20px;
  text-indent: -9999px;
  direction: ltr;
  background-position: -20px 0;
  display: block;
}

.ie6 nav.main-menu .first-level ul li span.icon {
  line-height: 0;
}

nav.main-menu .first-level ul li a.active span.icon {
  background-position: -20px -6px;
}

nav.main-menu .first-level li.home a {
  height: 44px;
}

nav.main-menu .first-level li.home a span.label {
  display: none;
}

nav.main-menu .first-level li.home a span.icon,
nav.main-menu .first-level li.home a:hover span.icon {
  display: block;
  width: 16px;
  height: 15px;
  background-position: 0 0;
  right: 15px;
  top: 15px;
}

/* =Second level
-------------------------------------------------------------- */
nav.main-menu .second-level .close-main-menu {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 15px;
}

nav.main-menu .second-level .close-main-menu .icon {
  display: block;
  width: 10px;
  height: 10px;
  text-indent: -999px;
  direction: ltr;
  overflow: hidden;
  background-position: -20px -40px;
}

nav.main-menu .second-level .close-main-menu:hover .icon {
  background-position: -20px -50px;
}

nav.main-menu .second-level .column {
  width: 222px;
  border-right: 1px dotted #9a9a9a;
  float: left;
  margin-top: 13px;
}

nav.main-menu .second-level ul {
  padding: 0 10px 20px 10px;
}

nav.main-menu .second-level ul.last {
  /* The .last class is added via jQuery in the Main menu's JavaScript */
  padding-bottom: 0;
}

nav.main-menu .second-level li {
  margin: 0;
}

.ie6 nav.main-menu .second-level li {
  text-align: left;
}

nav.main-menu .second-level li.head {
  border-bottom: 1px solid #e2e2e2;
}

nav.main-menu .second-level li.alone {
  border-bottom-width: 0;
}

nav.main-menu .second-level li.first {
  border-top: 1px solid #fff;
  padding-top: 5px;
}

nav.main-menu .second-level li.head {
  padding-bottom: 5px;
}

nav.main-menu .second-level li.head a {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 17px;
  line-height: 1.7rem;
  font-weight: normal;
  color: #000;
  padding: 0;
}

nav.main-menu .second-level li.head a em {
  font-style: normal;
}

nav.main-menu .second-level li.head a:hover {
  font-weight: normal;
  background-color: transparent;
}

/* Default (blue) */
nav.main-menu li.head a em span {
  color: #269FD4;
  font-weight: normal;
}

/* Custom colors... */
nav.main-menu ul.news-and-sports li.head a em span {
  color: #841918;
}

nav.main-menu ul.belgacom-5 li.head a em span {
  color: #f58020;
}

nav.main-menu ul.jack li.head a em span {
  color: #7F7943;
}

nav.main-menu ul.lili li.head a em span {
  color: #DF0C3F;
}

nav.main-menu ul.jfy li.head a em span {
  color: #F27719;
}

nav.main-menu ul.skynet-blogs li.head a em span,
nav.main-menu ul.services li.head a em span {
  color: #74C027;
}

nav.main-menu ul.music li.head a em span {
  color: #721fa6;
}

nav.main-menu .second-level li.head a span.sub {
  font-size: 12px;
  font-size: 1.2rem;
}

nav.main-menu .second-level li a {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 30px;
  line-height: 3.0rem;
  text-decoration: none;
  display: block;
  color: #333;
  padding: 0 10px;
}

nav.main-menu .second-level li a:hover {
  background: #fff;
}

nav.main-menu .second-level footer {
  clear: both;
  border-top: 1px dotted #9a9a9a;
  font-family: Verdana, Arial;
  font-size: 10px;
  font-size: 1.0rem;
  line-height: 33px;
  line-height: 3.3rem;
  color: #999;
  margin: 0 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.ie6 nav.main-menu .second-level footer {
  width: 958px;
}

nav.main-menu .second-level footer a {
  text-decoration: none;
}

nav.main-menu .second-level footer a:hover {
  text-decoration: underline;
}

nav.main-menu .second-level footer a.icon:hover {
  text-decoration: none;
}

nav.main-menu .second-level .follow-us-on-facebook {
  float: left;
  width: 40%;
}

nav.main-menu .second-level .follow-us-on-facebook a {
  color: #2c4a88;
}

nav.main-menu .second-level .follow-us-on-facebook a.skynet {
  color: #1298cb;
}

nav.main-menu .second-level .follow-us-on-facebook a.icon {
  float: left;
  width: 16px;
  height: 16px;
  background-position: 0 -40px;
  text-indent: -999px;
  direction: ltr;
  margin: 8px 5px 8px 0;
  display: block;
}

.ie6 nav.main-menu .second-level .follow-us-on-facebook p {
  text-align: left;
}

nav.main-menu .second-level .mobile-devices {
  float: right;
  width: 40%;
}

nav.main-menu .second-level .mobile-devices a {
  color: #333;
}

nav.main-menu .second-level .mobile-devices a.icon {
  float: right;
  width: 30px;
  height: 22px;
  background-position: 0 -16px;
  margin: 5px 0 5px 10px;
  display: block;
}

nav.main-menu .second-level .mobile-devices p {
  text-align: right;
}