.PRINTONLY { /* stuff to be shown only when page is printed */
   display:             none !important;
}

/* ===================== general appearance ========================= */

body  {
  color:                #000000;
  background-color:     #FFFFFF;
  background-image:     url('/cv/Style/images/beige.jpg');  background-repeat:    repeat;
  background-attachment: fixed;
  font-family:          serif;
  font-size:            11pt;
}

h2 {
  font-family:          sans-serif;
  color:                #7F6B57; /* tan */
  margin-top:           2em;
  font-weight:          bold;
  text-align:           center;
}

h3 {
  font-family:          sans-serif;
  color:                #7F6B57; /* tan */
  margin-top:           1em;
  font-weight:          bold;
  text-align:           left;
}

hr {
  color:                #9F8B77; /* lighter tan */
  border-style:         solid;
}

a {
  font-weight:          bold;
  text-decoration:      none;
}
a:link {
  color:                #831111; /* dark red */
}
a:visited {
  color:                #551F1F; /* maroon */
}
a:hover {
  color:                #C41111; /* bright red */
}
a:active {
  color:                #000000; /* black */
}

/* ===================== "Easter eggs" ============================== */
/* A pop-up is shown when the mouse hovers over these otherwise
 * invisible links. */

a.easteregg {
  font-weight:          inherit;
  color:                inherit;
  display:              inline-block; /* helps position child span (below) correctly */
}
a.easteregg:hover {
  color:                #831111; /* dark red, makes clear what triggered the pop-up  */
}
a.easteregg span {
  display:              none;    /* extra text is normally not shown */
}
a.easteregg:hover span {         /* on hover, extra text is shown in pop-up */
  display:              block;
  z-index:              100;     /* on top of everything else */
  position:             absolute;
  margin-top:           -0.5em;  /* position the box just below/overlapping the link */
  margin-left:          1em;
  border-style:         solid;
  border-width:         1px;
  max-width:            20%;
  padding:              1px 5px 1px 5px;
  background-image:     url('/cv/Style/images/white.jpg');  color:                #551F1F; /* maroon */
  font-size:            80%;
  font-weight:          normal;
  text-align:           center;
}


/* ===================== page header ================================ */

/* === For any page */

table.pagetitle_main,
table.pagetitle_secondary {
  /* "auto" margins center the table within a containing block: */
  margin-left:          auto;
  margin-right:         auto;
  text-align:           center;
  color:                #7F6B57; /* tan */
  font-family:          sans-serif;
}

/* left: image */
table.pagetitle_main      tr > td:first-child > a > img,
table.pagetitle_secondary tr > td:first-child > a > img {
  border:               0;
}

/* right: text */
table.pagetitle_main      tr > td:first-child +td,
table.pagetitle_secondary tr > td:first-child +td {
  vertical-align:       bottom;
  text-align:           right;
  font-size:            150%;
  font-weight:          bold;
}

/* === For non-index pages */

/* Push the image and text to the edges */
table.pagetitle_secondary {
  width:                100%;
}


/* ===================== navigation ================================= */

table.nav {
  width:                100%;
  font-family:          sans-serif;
}

table.nav td {
  text-align:           center;
  text-decoration:      none;
  padding:              0px;
  border-style:         solid;
  border-width:         2px;     /* required for border to show in Chrome */
  border-top-color:     #7F6B57; /* tan */
  border-right-color:   #9F8B77; /* lighter tan */
  border-bottom-color:  #9F8B77; /* lighter tan */
  border-left-color:    #7F6B57; /* tan */
  font-size:            110%;
  font-weight:          bold;
}

table.nav td a {
  text-decoration:      none;
  display:              block;
}

table.nav td.nav_self {
  border-bottom-style:  none;
  background-image:     url('/cv/Style/images/beige.jpg');}

table.nav td.nav_other {
  border-bottom-style:  dotted;
  background-image:     url('/cv/Style/images/tan.jpg');}

table.nav td:hover {
  background-image:     url('/cv/Style/images/white.jpg');}

table.nav td a:link:hover {
  color:                #831111; /* dark red, i.e. no change from non-hover */
}

table.nav td a:visited:hover {
  color:                #551F1F; /* maroon, i.e. no change from non-hover */
}


/* ===================== page footer ================================ */

table.pagefooter {
  /* "auto" margins center the table within a containing block: */
  margin-left:          auto;
  margin-right:         auto;
  width:                100%;
  color:                #7F6B57; /* tan */
}

/* left part; no idea why "table.pagefooter > tr" doesn't work! */
table.pagefooter tr > td:first-child {
  text-align:           left;
  font-size:            80%;
  font-weight:          normal;
}
table.pagefooter tr > td:first-child a {
  font-weight:          normal;
  font-family:          monospace;
  font-size:            110%;
}

/* right part */
table.pagefooter tr > td:first-child +td {
  text-align:           right;
  width:                100%; /* force images to the right */
  vertical-align:       bottom;
}
table.pagefooter tr > td:first-child +td img {
  border:               0;
}

/* ===================== index page  ================================ */

div.cv_index > h3 {
  margin-bottom:        0.6em;
}

div.cv_index > p,
div.cv_index > dl {
  margin-top:           0.6em;
  margin-bottom:        0.6em;
  margin-left:          2em;
}

div.cv_index ul {
  margin-top:           0.6em;
  margin-bottom:        0.6em;
  margin-left:          2em;
}

table.cv_url {
  width:                100%;
}

table.cv_url tr td a {
  font-family:          monospace;
  font-size:            110%;
  text-align:           right;
}

table.coordinates {
  margin-left:          2em;
  margin-right:         2em;
}

/* left part */
table.coordinates tr > td:first-child {
  text-align:           left;
  padding-right:        2em;
}

/* right part */
table.coordinates tr > td:first-child +td {
  text-align:           right;
}

/* e-mail address */
table.coordinates tr > td:first-child +td  > a {
  font-family:          monospace;
  font-size:            110%;
  text-align:           right;
  color:                #7F6B57; /* tan */
}


/* ===================== education ================================== */

/* makes all disks are circles tan */
div.education ul {
  color:                #7F6B57; /* tan */
}

/* Links in this section are not bold */
div.education a {
  font-weight:          normal;
}

div.education > ul > li {
  margin-top:           0.5em;
}

/* Institution */
div.education > ul > li > span:first-child {
  color:                black;
  display:              block;
}

/* Years */
div.education > ul > li > span:first-child +span {
  color:                black;
}
div.education > ul > li > span:first-child +span:after {
  content:              ', ';
}

/* Programme/degree */
div.education > ul > li > span:first-child +span +span {
  color:                black;
}

/* Awards */
div.education > ul > li > ul > li > span {
  color:                black;
  font-style:           italic;
}

/* ===================== publications (citation format) ============= */

dl.cv_pubs > dt {
  margin-top:           0.5em;
  font-style:           normal;
  font-weight:          bold;
}

.cv_pub_author {
}
.cv_pub_title_article {
}
.cv_pub_title_pub {
  font-style:           italic;
}
.cv_pub_date {
}
.cv_pub_vol {
  font-weight:          bold;
}
.cv_pub_number {
}
.cv_pub_pages {
}

/* =============== jobs: static section ============================= */

/* job lists */
.cv_job_title {
  font-style:           normal;
  font-weight:          bold;
}
.cv_job_grade {
  font-style:           normal;
  font-weight:          normal;
}
.cv_job_where {
  font-style:           normal;
  font-weight:          normal;
}
.cv_job_when {
  font-style:           italic;
  font-weight:          normal;
}

dl.cv_jobs > dt {
  margin-top:           0.5em;
}

/* This makes the list-item disks tan but with black text: */
dl.cv_jobs > dd > ul > li {
  color:                #7F6B57; /* tan */
}
dl.cv_jobs > dd > ul > li > span {
  color:                black;
}


/* =============== jobs: "expandable" achievements ================== */

/* THERE ARE THREE VERSIONS OF THIS PAGE, which implement (if
   possible) "expand/compress on click" for each item:
     (1) No javaScript (CSS only): use :focus on an "a"
         element to toggle the display properties of that
         element and its neighbours.
     (2) JavaScript enabled: toggle class of div to affect 
         display of children (span,span,span,div).
     (3) Fully expanded: explicily set class of each containing
         div.  If JS enabled, user can compress each item.A
*/

/* Note: the "focus" trick seems to work reliably only on "a"
   elements; use 'a href="#n"' to make the click go nowhere.
   Define "focus" and "active" the same way to deal with buggy 
   early browsers.  Note that Chrome doesn't support focus, so
   Chrome users who turn JavaScript off won't be able to expand
   items.  */

/* PROBLEM with CSS-only (not fully expanded) mode in many browsers:
   a link within the description div cannot be usefully clicked on; the
   click just removes focus from the "a" and hides the div!  Note that
   enclosing everything in the "a" is worse: you can't have an "a"
   inside an "a".
 */

/* For the "user intro" to the various versions */
div.achintro p {
  margin-top:           0;
  margin-bottom:        0;
}

/* Indent the entire thing */
div.achieve {
  margin-left:          5%;
}

/* Do not increase the font size on these headings */
div.achieve > h3 {
  color:                #7F6B57; /* tan */
  margin-top:           0.5em;
  margin-bottom:        0.3em;
  font-size:            100%;
  font-weight:          bold;
  text-align:           left;
}

/* Links in this section are not bold */
div.achieve a {
  font-weight:          normal;
}

/* Causes the "container" to act like a list for display purposes. */
div.achieve > div {
  color:                #7F6B57; /* tan */
  margin-left:          2em;
  display:              list-item;
  list-style-type:      disc;
  list-style-position:  outside;
}

/* One-line summary, shown by default, becomes pale when item expanded. */
div.achieve > div          > span:first-child,
div.achieve > div             > a:first-child        > span {
  color:                black;
  font-weight:          normal;
  font-style:           normal;
}
div.achieve > div.expanded > span:first-child,
div.achieve > div             > a:first-child:active > span,
div.achieve > div             > a:first-child:focus  > span {
/*display:              none; */
  display:              block;
  color:                #7F6B57; /* tan */
  font-weight:          normal;
  font-style:           italic;
  margin-top:           0.5em;
}

/* Title, appears only when item is expanded. */
div.achieve > div          > span:first-child        +span,
div.achieve > div             > a:first-child        +span {
  display:              none;
}
div.achieve > div.expanded > span:first-child        +span,
div.achieve > div             > a:first-child:active +span,
div.achieve > div             > a:first-child:focus  +span {
  display:              inline;
  color:                black;
  font-weight:          bold;
  font-style:           normal;
}

/* Place+year, always shown, changes colour and font style. */
div.achieve > div          > span:first-child        +span +span,
div.achieve > div             > a:first-child        +span +span {
  display:              inline;
  color:                #7F6B57; /* tan */
  font-weight:          normal;
  font-style:           italic;
}
div.achieve > div.expanded > span:first-child        +span +span,
div.achieve > div             > a:first-child:active +span +span,
div.achieve > div             > a:first-child:focus  +span +span {
  display:              inline;
  color:                black;
  font-weight:          normal;
  font-style:           normal;
}
div.achieve > div          > span:first-child        +span +span:before,
div.achieve > div             > a:first-child        +span +span:before {
  content:              "(";
}
div.achieve > div          > span:first-child        +span +span:after,
div.achieve > div             > a:first-child        +span +span:after {
  content:              ")";
}

/* Description, appears only when item is expanded. */
div.achieve > div          > span:first-child        +span +span +div,
div.achieve > div             > a:first-child        +span +span +div {
  display:              none;
}
div.achieve > div.expanded > span:first-child        +span +span +div,
div.achieve > div             > a:first-child:active +span +span +div,
div.achieve > div             > a:first-child:focus  +span +span +div {
  display:              block;
  color:                black;
  font-weight:          normal;
  font-style:           normal;
  margin-left:          2em;
  margin-bottom:        0.5em;
}

/* Spans within a description are emphasized. */
div.achieve > div          > span:first-child        +span +span +div > span,
div.achieve > div             > a:first-child        +span +span +div > span {
  font-weight:          bold;
  font-style:           italic;
}

/* Non-expandable part at the bottom. */
dl.cv_jobs ul {
  margin-top:           0;
  margin-bottom:        0;
}