/*!**** Structure de la page hors zone de contenus */

html {
  background-color: #5f6755;
}

body {
  position: relative; /* pour les positionnements absolus */
}

div#body, div#header-body {
  width: 1280px;
  margin: 0px auto;
}

div#body {
  background: white;
  box-shadow: 0px 0px 30px 0px #333c29;
  padding-top: 100px; /* 20px au-dessus du header + 80px de hauteur du header */
}

/* Header */

@font-face {
  font-family: TheSans;
  font-weight: 700; /* Bold */ 
  font-style: normal;
  src: url('/newsletter/styles/TheSans/Bold/thesans-bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('/newsletter/styles/TheSans/Bold/thesans-bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/newsletter/styles/TheSans/Bold/thesans-bold-webfont.woff') format('woff'), /* Modern Browsers */
       url('/newsletter/styles/TheSans/Bold/thesans-bold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/newsletter/styles/TheSans/Bold/thesans-bold-webfont.svg#interstate_extralight_condRg') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: TheSans;
  font-weight: 700; /* Bold */ 
  font-style: italic;
  src: url('/newsletter/styles/TheSans/BoldItalic/thesans-bold-italic-webfont.eot'); /* IE9 Compat Modes */
  src: url('/newsletter/styles/TheSans/BoldItalic/thesans-bold-italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/newsletter/styles/TheSans/BoldItalic/thesans-bold-italic-webfont.woff') format('woff'), /* Modern Browsers */
       url('/newsletter/styles/TheSans/BoldItalic/thesans-bold-italic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/newsletter/styles/TheSans/BoldItalic/thesans-bold-italic-webfont.svg#interstate_extralight_condRg') format('svg'); /* Legacy iOS */
}

div#header {
  position: absolute;
  top: 20px;
  width: 100%;
  height: 80px;
  background-color: #90977d;
  opacity: 0.95;
}

div#header-body {
  position: relative; /* pour les positionnements absolus */
  overflow: hidden; /* pour contenir les floats */
}

div#header-body div#numero {
  position: absolute;
  left: 295px;
  top: 0px;
  font-family: TheSans, sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: #111;
}

div#header-body div#date-numero {
  position: absolute;
  left: 330px;
  top: 12px;
  font-family: TheSans, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  color: #d2ed28;
}

img#header-logo {
  float: left;
}

a#header-logo2 {
  display: block;
  float: right;
  color: #fff;
  text-decoration: none;
  font-family: TheSans, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding-top: 5px;
  width: 320px;
  height: 75px;
  background: url(/newsletter/images/logo-ee.png) right center no-repeat;
}

ul#header-menu {
  position: absolute;
  top: 20px;
  right: 130px;
  padding: 25px 50px 15px 150px; /* pour éviter qu'on clic à côté du menu n'envoie sur http://computer-engineering.fr */
}

ul#header-menu li {
  display: inline;
  border-left: 1px solid #888;
}

ul#header-menu li:first-child {
  border-left: none;
}

ul#header-menu li a {
  color: #666;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-decoration: none;
  padding: 3px 10px 3px 12px;
}

/* Footer */

div#footer {
  padding: 20px 0px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: #aaa;
  box-shadow: 0px -10px 15px -15px #aaa;
  position: relative; /* pour le z-index */
  z-index: 100; /* pour que l'ombre aille par-dessus les deux colonnes */
}

div#footer a {
  color: #aaa;
  text-decoration: none;
}

div#footer a:hover {
  text-decoration: underline;
}


/*!**** Zone de contenus */

/*!* Structure */

div.page {
  overflow: hidden;
}

div#colonne-gauche, div#colonne-droite {
  float: left;
}

body.pagetype-une div#colonne-gauche {
  width: 920px; /* = 960 - 2x20 */  /* Utilisé dans PageUne::AfficherUne */
  padding: 20px;
}

body.pagetype-article div#colonne-gauche {
  width: 960px; /* = 960 - 2x0 */
}

div#colonne-droite {
  width: 320px; /* = 1280 - 960 */
  background-color: #d2ed28;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}

/*!* Look : liens */

div.page a {
  text-decoration: none;
  color: orange;
}

/*!* Look : article (tous types de page, toutes colonnes) */

div.article {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.44; /* Utilisé dans PageDeNumero::AfficherArticle */
}

div.article div.bouee {
  float: right;
}

/* Sur-titre */

div.article h3 {
  font-size: 1.25em; /* Utilisé dans PageDeNumero::AfficherArticle */
  font-weight: bold;
  color: orange;
}

/* Dates */

div.article .dates {
  font-size: 0.7em; /* Utilisé dans PageDeNumero::AfficherArticle */
  color: hsl(130, 10%, 50%);
  margin-bottom: 0.75em; /* Utilisé dans PageDeNumero::AfficherArticle */
}

/* Titre */

@font-face {
  font-family: Interstate;
  font-weight: 100; /* extra light */ 
  font-style: normal;
  src: url('/newsletter/styles/Interstate/ExtralightCondensed/interstate-extralight-cond-webfont.eot'); /* IE9 Compat Modes */
  src: url('/newsletter/styles/Interstate/ExtralightCondensed/interstate-extralight-cond-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/newsletter/styles/Interstate/ExtralightCondensed/interstate-extralight-cond-webfont.woff') format('woff'), /* Modern Browsers */
       url('/newsletter/styles/Interstate/ExtralightCondensed/interstate-extralight-cond-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/newsletter/styles/Interstate/ExtralightCondensed/interstate-extralight-cond-webfont.svg#interstate_extralight_condRg') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: Interstate;
  font-weight: 100; /* extra light */ 
  font-style: italic;
  src: url('/newsletter/styles/Interstate/ExtralightItalic/interstate-extralight-italic-webfont.eot'); /* IE9 Compat Modes */
  src: url('/newsletter/styles/Interstate/ExtralightItalic/interstate-extralight-italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/newsletter/styles/Interstate/ExtralightItalic/interstate-extralight-italic-webfont.woff') format('woff'), /* Modern Browsers */
       url('/newsletter/styles/Interstate/ExtralightItalic/interstate-extralight-italic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/newsletter/styles/Interstate/ExtralightItalic/interstate-extralight-italic-webfont.svg#interstate_extralightitalic') format('svg'); /* Legacy iOS */
}

div.article h2 {
  font-family: Interstate, sans-serif;
  font-weight: 100;
  line-height: 1; /* Utilisé dans PageDeNumero::AfficherArticle */
  /* Tailles et marges définies pour chaque cas (une, article, édito, sommaire) */
}

div.article h2,
div.article h2 a {
  color: black;
}

/* Chapeau */

div.article .chapeau {
  line-height: 1.2;
  font-weight: bold;
}

/* Inter-titres */

div.article h4 {
  font-size: 1.25em;
  margin-top: 1.25em;
  margin-bottom: 0.75em;
}

/* Texte */

div.article p, div.article ul { margin-bottom: 0.75em; }
div.article li { padding-top: 0.5em; }
div.article li:first-child { padding-top: 0em; }

div.article strong {
  font-weight: 600;
}

div.article sup {
  font-size: 60%;
}

div.article:not(.sommaire) ul {
  margin-left: 2em;
  list-style: disc;
}


/*!* Look : article (tous types de page, colonne de gauche) */

/* Sur-titre */
/* Dates */
/* Titre */
/* Chapeau */
/* Inter-titres */

div#colonne-gauche div.article h4 {
  color: #5f6755;
}

/* Texte */

div#colonne-gauche div.article p,
div#colonne-gauche div.article ul {
  color: hsl(130, 10%, 50%);
}

/*!* Look : édito (tous types de page, colonne de droite) */

div.edito {
  padding: 15px;
  background-color: white;
  border-left: 1px solid #ccc;
  font-size: 14px;
}

div.edito h3 {
  margin-left: -15px;
  text-transform: lowercase;
  margin-bottom: 0.5em;
  font-weight: 400;
}

div.edito h2 {
  font-size: 2.5em;
  margin-top: 0.4em;
  margin-bottom: 0.5em;
}

div.edito p,
div.edito ul {
  padding-right: 30px;
  color: hsl(130, 10%, 70%);
  font-weight: bold;
  font-style: italic
}


/*!* Look : sommaire (tous types de page, colonne de droite) */

div.sommaire {
  background-color: hsl(90, 10%, 60%);
  padding: 15px 0px;
}

div.sommaire h3 {
  color: #d2ed28;
  text-transform: lowercase;
  margin-bottom: 1em;
  font-weight: 400;
}

div.sommaire h2 {
  padding: 0px 15px;
  font-size: 2em;
  color: #ddd;
  margin-bottom: 0.75em;
}

div.sommaire h2 a {
  color: #ddd;
}

div.sommaire li {
  line-height: 1.1;
  padding: 0.25em 15px;
}

div.sommaire li:first-child {
  padding: 0.25em 15px;
}

div.sommaire li.page-courante,
div.sommaire li:hover {
  background-color: #ccc;
}


div.sommaire li h4:before {
  content: "•";
  margin-right: 0.3em;
}

div.sommaire li h4 {
  font-size: 1em;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: bold;
  padding-left: 0.6em;
  text-indent: -0.6em;
  color: black;
}


/*!* Look : blocs (page de une, colonne de droite) */

div.article.bloc {
  padding: 15px;
  background-color: #E5F577;
  font-size: 14px;
}

div.article.bloc div.chapeau {
  margin-bottom: 1em;
}

div.article.bloc p,
div.article.bloc ul {
  padding-right: 30px;
}


div.article.bloc-le-saviez-vous div.chapeau {
  padding-top: 40px;
  background: url(/newsletter/images/le-saviez-vous.png) no-repeat left top;
}


/*!**** Contenus en page article */

body.pagetype-article div#colonne-gauche div.article {
  font-size: 14px; /* Utilisé dans PageDeNumero::AfficherArticle */
  background: right top no-repeat;
  padding: 20px;
  padding-right: 120px;
}

body.pagetype-article div#colonne-gauche div.article h2 {
  font-size: 4em; /* Utilisé dans PageDeNumero::AfficherArticle */
  margin-bottom: 0.75em;
}

body.pagetype-article div#colonne-gauche div.article .chapeau {
  margin-bottom: 1.5em;
}


/*!**** Contenus en page de une */

body.pagetype-une div#colonne-gauche div.article {
  font-size: 13px;
  /* La colonne de gauche (en page de une) a un padding de 20px */
  padding-right: 100px; /* Utilisé dans PageUne::AfficherUne et AfficherArticle */
  background: right top no-repeat;
}

body.pagetype-une div#colonne-gauche div.article h2 {
  font-size: 3em;
  margin-bottom: 0.4em;
}

body.pagetype-une div#colonne-gauche div.article .chapeau {
  margin-bottom: 1em;
}

/*!* Premier article en exergue */
/* On augmente la taille du texte; un peu plus pour le titre que pour le reste. */
/* La précision ">" sert à éviter le premier article d'un multi. */

body.pagetype-une div#colonne-gauche > div.article:first-child {
  font-size: 14px;
}

body.pagetype-une div#colonne-gauche > div.article:first-child h2 {
  font-size: 4em;
}

/*!* Images */

body.pagetype-une div#colonne-gauche div.article.image {
  padding-right: 0px;
}

body.pagetype-une div#colonne-gauche div.article.image img {
  max-width: 100%;
}

/*!* Bandeaux défilants */

body.pagetype-une div#colonne-gauche div.article.bandeaux {
  padding-right: 0px;
  height: 161px;
}

/*!* Filets hors multi-article */

body.pagetype-une div#colonne-gauche div.article {
  border-top: 1px dotted #aaa;
  padding-top: 10px;
  margin-top: 10px;
}

body.pagetype-une div#colonne-gauche div.article:first-child {
  border-top: none;
  padding-top: 0px;
  margin-top: 0px;
}

/*!* Multi-article */

body.pagetype-une div#colonne-gauche div.multi-article {
  padding-right: 0px;
  overflow: hidden;
  margin-bottom: -1000px;
  padding-bottom: 1000px;
}

body.pagetype-une div#colonne-gauche div.multi-article div.article {
  float: left;
  border-top: none;
  padding-top: 0px;
  margin-top: 0px;
  border-left: 1px dotted #aaa;
  padding-left: 10px;
  padding-bottom: 1000px;
  margin-bottom: -1000px;
}

body.pagetype-une div#colonne-gauche div.multi-article div.article:first-child {
  border-left: none;
  padding-left: 0px;
}



/*!**** Contenus en page "admin" */

body.pagetype-admin div.page {
  padding: 20px;
}

body.pagetype-admin div.page h2 {
  font-size: 1.25em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

body.pagetype-admin div.page ul {
  margin: 0.5em 0em 1em 2em;
  list-style: square;
}