celine-style.css

.page {
  position: relative;
}

/* Declare the font "Aller" ... */
@font-face {
  font-family: "Aller";
  src: url("fonts/Aller_Rg.ttf");
}
@font-face {
  font-family: "Aller";
  src: url("fonts/Aller_Bd.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "Aller";
  src: url("fonts/Aller_It.ttf");
  font-style: italic;
}
@font-face {
  font-family: "Aller";
  src: url("fonts/Aller_BdIt.ttf");
  font-style: italic;
  font-weight: bold;
}
/* ... and use it as default font for whole document body */
body {
  font-family: "Aller";
}

/*
 *
 * Common to many things
 *
 */
h4 {
  padding: 0 0 0 1cm;
  border-bottom: 3px solid #36a9e1;
  display: block;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 0mm;
}
ul {
  margin: 1mm 0 1mm 0;  /* top, right, bottom, left */
}
/* most often, I don't want to see list bullets */
li {
  list-style-type: none;  /* hide <LI> bullets */
}
/* ... except if inside a <ul class="w-bullets"> */
ul.w-bullets li {
  list-style-type: disc;
}

/* all <label> contained inside <UL class="w-label-7"> would have a right aligned text */
ul.w-label label ,
ul.w-label-7 label {
  text-align: right;
  font-weight: bold;
}
/*ul.w-label-7 label:after {
  content: ": ";
}*/
ul.w-label li span ,
ul.w-label-7 li span {
  display: inline-block;
  border-left: 3px solid white;
  margin-left: 2mm; /* with extra space around the left-border */
  padding-left: 2mm;
}
ul.w-label li span ,
ul.w-label label ,
ul.w-label-7 li span ,
ul.w-label-7 label {
  padding-top: 1mm;
  padding-bottom: 1mm;
}
ul.grey {
  background-color: #EEE;
}

/*
 *
 * <header> containing "#job", "#contact" and "#photo" objects
 *
 */
#job {
  padding-top: 1cm;
  margin-bottom: 1cm;
  position: relative;
}
#job .title {
  display: inline-block;  /* doing so, the width is automatically adjusted */
  text-transform: uppercase;
  background-color: #36a9e1;
  color: white;
  margin: 0;
  padding: 2mm 2mm 2mm 10mm;     /* order: top, right, bottom and left */
}
#job .subtitle {
  display: block;
  padding-left: 10mm;
  color: #36a9e1;
}

#contact {
  position: absolute;
  /* relative to the parent with "position:relative;" property, which is '.page' */
  right: 1cm;
  top: 1cm;
  width: 8cm;
  text-align: right;
}

#contact h4,
#contact li > i > label { /* oui, je fais disparaître les <label> */
  display: none;
}

#contact h1 ,
#contact ul {
  margin: 0;
}
div.hr {
  margin-top: 2mm;
  border-top: 1px solid #CCC;
  margin-bottom: 2mm;
}

#contact h1 ,
#contact .email ,
#contact .phone {
  color: #36a9e1;
}
#contact .email {
  margin-top: 3mm;
}

.two-phones {
  font-size: smaller;
}

#photo {
  display: none;
}
header.with-photo #contact {
  right: 4cm;
}
header.with-photo #photo {
  display: block;
  position: absolute;
  width: 3cm;
  top: 0.5cm;
  right: 0.5cm;
}

/*
 * Header of the 2nd page
 */
.pageheader {
  border-bottom: 1px solid #36a9e1;
  margin: 0.5cm;
}

/*
 *
 * EXPERIENCES
 *
 */
#experiences h4 {
  margin-top: 0.7cm;
}
.xp {
  margin: 4mm 0mm;
  position: relative;
  padding-left: 2.8cm;
  z-index: 1;
}
.xp .date {
  width: 2.8cm;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  font-weight: bold;
  box-sizing: border-box;
  background-color: #EEE;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 2mm;
  z-index: -1;
}
/* To center the date vertically is not "easy" in CSS.
 * I use a trick top=50% + negative margin-top of half the size.
 * Not perfect but it seems to work...
 */
.xp .date {
  top: 50%;
  margin-top: -4.4mm;
}
.xp .job {
  padding: 2mm;
  box-sizing: border-box;
  width: 17.5cm;
  display: inline-block;
  border-left: 3px solid #36a9e1;
  padding-left: 3mm;
  z-index: 2;
}
.xp .job .title {
  font-weight: bold;
}
.xp .job .empl {
  font-style: italic;
}
.xp .job .sstitre {
  font-style: italic;
  font-weight: bold;
}
.xp .job ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
}
.xp .job li {
  margin: 1mm 0mm;
  margin-left: 5mm;
  position: relative;
}
.xp .job li:before {
  content: "- ";
}
.xp .job li:before {
  position: absolute;
  top: 0.5mm;
  margin-left: -5mm;
  font-family: 'Material Icons';
  color: grey;
  content: "navigate_next ";
}
.xp .job li.keywords:before {
  content: "vpn_key ";
  margin-left: -6mm;
  top: 0mm;
}
.xp .job li.keywords {
  margin-left:7mm;
	font-size: 90%;
	margin-top: 2mm;
}
.xp.internship li:before {
  content: "";
}

.xp.internship li {
  margin-left:0mm;
}


/*
 *
 * The end, using two columns
 *
 */

#two-columns {
  margin-top: 0cm;
}
#two-columns #left {
    width: 45%;
}
#two-columns #right {
    width: 51%;
}
#two-columns h4 {
    margin-top: 5mm;
}
#left h4 {
  padding-left: 5mm;
}
#right h4 {   /* special case for the right column */
  padding-left: 0;
}

/* using #left, it's common to #languages and #education */
#left ul > li {
  margin: 2mm 0;
}
#left ul > li > span.l {
  background-color: #EEE;
  padding-right: 1ex;
  text-align: right;
  display: inline-block;
  width: 2.8cm;
  font-weight: bold;
}
#left ul > li > span.r {
  border-left: 3px solid #36a9e1;
  padding-left: 1ex;
  display: inline-block;
}
#left ul li span {
  padding-top: 1mm;
  padding-bottom: 1mm;
  vertical-align: middle;
  /* There's an alignment problem - 1px - between grey background (left span)
   * and blue border (right span) due to the "bold" font on the left.
   * A quick solution is to force a min-height to both cells */
  min-height: 0.75cm;    box-sizing: border-box;
}
#left ul {
  padding-left: 0;
}


#interests ul {
  padding-left: 2mm;
}


#interests ul li {
  padding-top: 2mm;
  padding-bottom: 2mm;
  padding-left: 2mm;
  list-style: none;
}
#interests ul > li ~ li { /* apply to all <LI> elements except first one */
  border-top: 1px solid #36a9e1;
}


/*
 * for CV2
 */
#bandeau {
  margin-top: 3cm;
}
#left-colonne {
  width: 25%;
}
#right-colonne {
  width: 73%;
}