/*
 * General
 */

html {
  font-family: sans-serif;
}

#main {
  width:    80ex;
  margin:   1.5ex auto;
  position: relative;
}

a,
paper tit {
  color: #36c;
  text-decoration: none;
}

a:hover,
a:visited,
paper tit:hover,
paper tit:visited {
  color: #3ac;
}

.hide {
  display: none;
}

/*
 * Custom elements
 */

shim,
paper,
paper tit,
paper aut,
paper pub,
course,
course name,
course sem {
  display: block;
}

has-pic {
  display: inline;
}

/*
 * Frames and photos
 */

.framed {
  border: 1px solid lightgray;
}
.framed {
  padding: .5em;
}
#photo-ghost {
  padding: 1em;           /* .5em internal padding in adjacent boxes */
  /*background: yellow;*/ /* (To check the padding) */
}

.framed {
  margin:   .5em 0em;
  margin:   0em;
  position: relative;
}

shim {
  height:     .5em;
  background: white; /* Occlude #photo borders */
  position:   relative;
  z-index:    1;
}

#photo-ghost,
#photo {
  padding-right:      0em;
  border-right-width: 0px;
}
#photo-ghost {
  margin-top: -1.5em;
}
#photo {
  margin-top: -1em;
}

#photo-guard {
  position: relative;
}

#photo-ghost {
  float: right;
}

#photo {
  background: white; /* Occlude .framed borders */
  position:   absolute;
  top:        0em;
  right:      0px;
}

.photo {
  position: relative;
  z-index:  2;
  display:  none;
}
.photo.show {
  display:  block;
}

#photo-ghost,
#photo,
.photo {
  width:  250px;
  height: 300px;
}

/*
 * Content
 */

#name big {
  font-size:      x-large;
  vertical-align: -10%;
}

#name sep {
  color: lightgray;
}
#name sep:before,
#name sep:after {
  content: " ";
}

#info {
  line-height: 1.3em;
}

#info small {
  color: gray;
}
#info small:before {
  content: " ";
}

.framed h3 {
  margin-top:    0em;
  margin-bottom: -.25em;
}

paper {
  margin-top:  1em;
  margin-left: .5em;
}

paper tit {
  font-weight: bold;
}

paper p {
  margin: 0px;
}

paper .extra {
  float:      right;
  text-align: right;
  font-size:  small;
}

#teaching > div {
  margin-top:  1em;
  margin-left: .5em;
  line-height: 1.3em;
}

course name {
  float: left;
}

course sem {
  text-align: right;
}