/*  Default look-and-feel for www.math.rochester.edu. */

@import "/style/normalize.css";
@import "/style/fisheye.css";

@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  src: local('Sorts Mill Goudy Regular'),
    local(SortsMillGoudy-Regular),
    url(/style/sorts-mill-goudy-normal-400.ttf) format("truetype");
}

/* * { box-sizing: border-box } */

html {
  font-size: 18px;
  min-width: 320px;
}

abbr, acronym {
  text-decoration: none;
}

html,
#footer {
  background-color: #a3d1fd;
}

body {
  background: #fff;
  color: #222;
  font-family: "Palatino Linotype", Palatino, serif;
  margin: .5rem auto 0 auto;
  max-width: 65rem;
  position: relative;
}

h1 { font-size:170% }
h2 { font-size:140% }
h3 { font-size:120% }
h4 { font-size:110% }
h5,h6 { font-size:105% }

h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: .5em 0;
  line-height: 1.2em;
}

img {
  max-width: 100%;
}

p {
  line-height: 1.4em;
  margin: .8em 0;
}

blockquote {
  margin-left: 1em;
}

ul,
dd {
  margin-left:0;
  padding-left:1.5em
}

dt {
  font-weight: bold;
  font-size: 105%;
  margin-top: .5em;
}

hr {
  border: 0;
  border-bottom: 1px solid #bbb;
}

table.zebra tr:nth-child(even) {
   background-color: #eee;
}
table { margin: .5em 0 .5em 0 } /* ; border: 1px solid gray } */
thead, tfoot { background-color: #ddf }
td, th { padding: .2em .5em .2em .5em }

pre:not(.plaintext),
code { 
  background: #f5efef;
  border: 1px solid #dcc;
}
pre.plaintext {
  margin: 2em 0 1em 1em;
  padding: .5em;
  min-width: 80ex;
  border: 1px solid #bbb;
  background: #f5f5f5;
  font-size: 15px;
  font-family: monospace;
}

pre:not(.plaintext) { padding: .5em }
code { line-height: 1.3em; padding: 1px .15em }
pre > code { border: none }

#error_report pre {
  font-size: 85%;
}

.top_message {
  padding: 10px;
  margin-bottom: 1em;
  box-shadow: 3px 3px 5px #999;
  border-radius: 10px;
  font-family: sans-serif;
  padding-left: 95px;
  background-repeat: no-repeat;
  background-position: 10px 5px;
  min-height: 70px;
}
.top_message h1 {
  font-size: 140%;
  margin-top: 0;
}
.top_message.error { 
  background-color: #ffb0b0;
  background-image: url("/icons/icon-error.png");
}
.top_message.warning { 
  background-color: #ffffcc;
  background-image: url("/icons/icon-warning.png");
}
.top_message.info {
  background-image: url("/icons/icon-info.png");
  background-color: #bbffbb
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify-right {
  text-align: right;
}

.red { color: #d00 }

.inline-list {
  display: inline;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.inline-list li { 
  display: inline;
  margin-left: 0;
  padding-left: 0;
}
.inline-list li:before { 
  content: " | ";
  color: #aaa;
}
.inline-list li:first-child:before { content: none }

.thumbnail {
  width: 30%;
  max-width: 7em;
}
.thumbnail img {
  width: 100%;
}
.illustration,
.photo {
  width: 100%;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #444;
  font-size: smaller;
  margin-bottom: .5em;
}
.illustration img,
.photo img {
  width: 100%;
}
.photo img {
  box-shadow: 2px 2px 5px #444;
}

.float-right,
.float-left { margin-bottom: .5em; }
.float-right { float: right; margin-left: 1em; }
.float-left { float: left; margin-right: 1em; }

.float-left {
}

.float-none {
  float: none;
}
#header {
  font-size: 100%;
  /* border-bottom: 1px solid #bbb; */
  margin: 0 .5rem;
  padding: .5rem 0 0 0;
  min-height: 3.3em;
}

#header br {
  clear: both;
}

#search {
  font-size: 85%;
  float: left;
  clear: left;
  margin: .3em 0 0 0;
}

input[type="submit"] {
  line-height: 1.3em;
}

#header h1 {
  float: left;
  font: small-caps normal 160%/1em 'Sorts Mill Goudy', serif;
  margin: .15em 0 0 0;
}

#urlogo {
  height: 1.4rem; /* ems make image scale with font size changes */
  float: left;
  margin: .45em .6em 0 0;
}

nav,
#header,
#footer,
#content footer {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#content {
  padding: 0 .7rem 0 .5rem;
  font-size: 90%;
  position: relative;
  padding-bottom: 2rem;
  line-height: 1.3em;
}

#content > h1 {
  clear: left;
  margin-top: 0
}

#content ul {
  margin-bottom: .8em;
}

#breadcrumbs {
  font-size: 89%;
  margin: .5em 0;
  padding: .2em .4em 0 0;
  position: static;
  z-index: -1;
}

#breadcrumbs a {
  /* white-space: nowrap; */
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
}

#breadcrumbs span.active {
  font-weight: bold;
}

.print-only {
  display: none !important;
}

#content footer {
  font-size: 80%;
  color: #777;
  text-align: right;
  padding: .5rem;
  position: absolute;
  bottom: 0;
  right: 1.2rem;
  width: 20rem;
}

#content footer div p {
  margin: .1em;
}

#footer {
  clear: both;
  text-align: center;
  color: #888;
  font-size: 80%;
  padding: .1rem 1rem;
}

#footer a {
  color: #fff;
}

#footer ul {
  list-style-type: none;
  margin-top: .5rem;
  padding: 0;
}

#footer ul li {
  display: inline;
}

#footer ul li:before {
  content: " • ";
  color: #fff;
}

#footer ul li:first-child:before {
  content:none;
}

/* Allow users to scroll stuff (like MathJax equations) that don't fit the screen width */
.hscroll {
  overflow-y: scroll;
}

nav a:link,
#header a:link,
#content footer a:link,
#footer a:link {
  font-weight: normal;
  text-decoration: none;
}
#content a:link {
}

/*
#content p a:link,
#content section a:link { 
  font-weight: bold;
}
*/

nav a:hover,
#header a:hover,
#content footer a:hover,
#footer a:hover,
#content a:hover {
  text-decoration: underline;
}
#content a[name]:hover {
  text-decoration: none 
}

#fisheye {
  margin: 1em;
  margin-left: .7em;
  background: #fff;
  /* transform: translateX(1.2rem); */
  overflow: hidden;
  box-shadow: 1px 1px 4px #ccc;
  border-radius: .3em;
  font-size: 90%;
  width: 11rem;
  padding-top: .5rem; 
  padding-left: .3rem;
}

/* used in directory listings */
nav.alpha_index {
  margin-bottom: 1.5em;
}
nav.alpha_index ul { list-display-type: none }
nav.alpha_index ul li { color: #aaa }
nav.alpha_index ul li:last-child:after { content: none }

/* used in (sub)site maps */

#map {
}
#map a {
  text-decoration: none;
}
#map a:hover {
  text-decoration: underline;
}
#map ul {
  padding-left: 1.5em;
}
#map > ul {
  /* list-style-type: none;
  padding-left: 0;
  */
}
#map > ul > li {
  margin-top: 1em;
}
#map ul ul {
  font-size: 85%;
}
#map li {
  margin-top: .5em;
  font-weight: normal;
}
#map > ul > li {
  /* font-weight: bold; */
  font-size: 120%;
}

#map dl {
  margin-left: 0;
}
#map dt {
  font-weight: normal;
}
#map dd {
  padding-left: 0em; 
  font-size: 85%; 
  font-weight: normal; 
  color: #777
}

/* for the events calendar */

body.events #title {
  font-style: italic
}

body.events #speaker {
  font-size: 110%
}

body.events #where-and-when {
  font-weight: bold;
}

body.events #content #feedback,
body.events #content #page-url {
  display: none;
}

.hamburger #fisheye { display: none }
.hamburger input[type=checkbox]:checked ~ label:after {
  content: 'hide site map';
}
.hamburger input[type=checkbox]:checked ~ #fisheye {
  display: block;
  clear: left;
}

/* #breadcrumbs:before { content: "<35rem " } */

@media all and (min-width: 35rem) {
/*  #breadcrumbs:before { content: "35-40rem " } */
  #content {
    /* border-left: 1px solid #bbb; */
    background-image: url(/images/skyline.png);
    background-position: bottom left;
    background-width: 100%;
    background-repeat: no-repeat;
    min-height: 40em;
    padding-bottom: 90px;
  }

  #content {
    padding-right: 1.4rem;
    float: right;
    width: calc(100% - 14rem);
  }

  #content footer {
    min-height: 2rem;
  }

  #content footer div {
    position: absolute;
    bottom: .8em;
    right: 0;
    background-color: rgba(255,255,255,0.5);
    border-radius: .5em;
  }

  .hamburger label { display: none }
  .hamburger #fisheye { display: block }

  #fisheye {
    margin-top: 0;
    margin-left: 0;
    background: #fff;
    position: absolute;
    top: 4.5rem;
    transform: translateX(.7rem);
    overflow: hidden;
    box-shadow: 1px 1px 4px #ccc;
    border-radius: .3em;
    font-size: 90%;
    width: 11rem;
    padding-top: .5rem; 
    padding-left: .3rem;
  }
}

@media all and (min-width: 40rem) {
 
  /* #breadcrumbs:before { content: "40-43rem " } */

  #search {
    clear: none;
    float: right;
    margin-top: .5em;
  }

  #urlogo {
    height: 1.6rem; 
    margin-right: .6em;
  }
  #header {
    height: 2.6em;
  }
  #header h1 {
    font-size: 180%;
  }


}
@media all and (min-width: 40rem) and (min-height: 40rem) {
  /* the map is fixed only if there's enough vertical room to display it all */
  #fisheye {
    position: fixed;
    top: 5rem;
  }
}


/* ----------- breakpoint 1 ----------- */

@media all and (min-width: 43rem) {

  /* #breadcrumbs:before { content: "43-53rem" } */

  #urlogo {
    height: 1.9rem; 
    margin-right: .6em;
  }
  #header h1 {
    font-size: 200%;
  }

  .thumbnail {
    width: 30%;
    max-width: 7em;
  }
  .thumbnail img {
    width: 100%;
  }
  .illustration,
  .photo {
    width: 45%;
    max-width: 30em;
    margin-left: 1em;
    float: right; 
  }

}

/* ----------- breakpoint 2 ----------- */


@media all and (min-width: 53rem) {

  /* #breadcrumbs:before { content: ">53rem" } */

  .hscroll {
    overflow-y: inherit;
  }

  #breadcrumbs {
    /* margin: 1.1em; */
    padding: .2em .4em 0 0;
    font-size: 90%;
  }
  #fisheye {
    transform: translateX(1.2rem);
  }
  #content { width: calc(100% - 14.7rem); }

  #footer {
    font-size: 15px;
  }

  #footer div {
    margin: 0;
    padding: 0;
  }
 
  #header {
    margin: 0 1rem;
  }

  #search {
    margin-top: 1em;
  }
  
  #urlogo {
    height: 2.4rem; 
    margin-top: .6em;
    margin-right: 1em;
  }

  #header h1 {
    font-size: 270%;
  }

}


/* ----------- print styles ----------- */

@media only print {
  /* remove elements that have no use in print */
  #search,
  #breadcrumbs,
  #fisheye,
  #feedback,
  #footer nav,
  .no-print {
    display: none;
  }

  #header {
    margin: 0;
    padding: 0;
    min-height: 0;
    height: auto;
  }
  #urlogo {
    height: 1.51rem;
  }
  #header h1 {
    color: #888;
    font-size: 180%;
  }

  #body {
    margin: 0;
    padding: 0;
  }

  #content {
    margin: 1.4rem 0 0 0;
    padding: 0;
    width: 100%;
    float: none;
  }

  #content footer,
  #content footer div {
    position: static;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* use sane, simple colors when printing */
  body, h1, h2, h3, h4, h5, h6, table, tr, th, td, a:link, a:visited {
    background: #fff;
    color: #000;
  }
  /* no need to show underline on acronyms/abbreviations */
  abbr, abbr[title], acronym {
    text-decoration: none;
    border-bottom: none;
  }

  /* show print-only elements */
  .print-only {
    display: block !important;
  }

  a:link, a:visited { 
    text-decoration: none;
  }

  /* show url in links when printing */
  #content a:visited[href^="http"],
  #content a:link[href^="http"] {
    font-weight: bold;
  }

  #content a:visited[href^="http"]:after,
  #content a:link[href^="http"]:after {
    color: gray;
    font-weight: normal;
    font-family: monospace;
    font-size: 80%;
    content: " [" attr(href) "] ";
  }
}