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

.print-only { display: none !important; }
.smallcaps { font-variant: small-caps }
.right,
.left { margin-bottom: .8em; }
.right { float: right; margin-left: 1em; }
.left { float: left; margin-right: 1em; }
.flex-right { width: 100%; float: none; margin-bottom: .5em; }
.indent { margin-left: 1.8em }
.red { color: red }
.inline { display: inline }

p.click-me a {
  /*
  display: inline-block;
  background: #eaeff2;
  border-radius: 4px;
  color: #4d4353;
  padding: 0.5em 0.8em;
  font-size: 120%;
  border: 1px solid #999;
  box-shadow: inset 0 -1px #bbbfc2;
  */
  display: inline-block;
  background-color: #587fb0;
  background: linear-gradient(180deg, #6496c8, #346392);
  border-radius: .3em;
  color: #fff;
  text-shadow: -0.1em 0.1em #346392;
  letter-spacing: 0.03em;
  padding: 0.7em 1em;
  font-size: 120%;
  box-shadow: inset 0 0 0 1px #27496d;
}
p.click-me a:hover { 
  text-decoration: none;
  /* background: #e0e0f0; */
  box-shadow: inset 0 0 0 1px #27496d, 0 .1em .2em #193047;
}
p.click-me a:active {
  box-shadow: inset 0 0 0 1px #27496d, inset 0 .1em .5em #193047;
}

* { box-sizing: border-box; }

/* groups pages */
ul.cities {
  padding-left: 1.8em;
}
ul.cities > li > h3 { 
  color: #252;
  margin-bottom: .5em;
}
ul.group {
  padding-left: 1em;
  list-style-type: none;
  margin: 0 0 .8em 0;
}
#inline-region-list {
  font-size: 90%; 
}

/* links */

a:link { text-decoration: none }
a:link:hover { text-decoration: underline }

/* inline unordered lists */

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

/* tables */

table.zebra tr:nth-child(even) { background-color: #eee }
thead, tfoot { 
  background-color: #373;
  color: #fff;
}
td, th { padding: .2em .5em }

dt { font-weight: bold }
dd { margin: 0 0 1em 1.5em }

/* draw attention to fragment targets */

/*
:target {
  transition: background-color: 1s;
}
*/

:target {
  background: #fff0f0;
  padding: .5em;
  border: 2px solid red;
  border-radius: .4em;
}
:target:before {
  content: "☞";
  font-size: 200%;
  vertical-align: bottom;
  margin-right: .5rem;
  color: red; 
}

:target:before { float: left }
:target > :first-child { margin-top: 0 }

address { font-style: normal; display: inline }
h1, h2, h3, h4, h5, h6 { 
  line-height: 1.0em; 
}
#breadcrumbs + h1 { margin-top: .5em }

h1 { font-size:200% }
h2 { font-size:170% }
h3 { font-size:150% }
h4 { font-size:130% }
h5,h6 { font-size:110% }
abbr, acronym { text-decoration: none }

body {
  font-size: 11pt;
  background-color: #333;
  font-family: 'Open Sans', sans-serif;
  padding-top: .5rem;
}

#wrapper {
  margin: 0 auto;
  min-width: 320px;
  max-width: 85rem;
  background-color: #a7df95;
  position: relative; /* contain sometimes-fixed header */
}

#wrapper > header {
  margin: 0;
  padding: 1rem;
}

#logo {
  display: block;
  max-width: 14rem;
  margin: 0 auto;
}

#search,
#language-chooser {
  padding-top: .5rem;
  text-align: center;
  margin: 0 auto;
} 
#search input[type="search"] {
  padding-left: .5em;
  font-family: inherit;
}

#fisheye {
  background-color: #e7ffd5;
  border-radius: .5em;
  display: none; /* overridden based on checkbox state */
  margin-top: .5rem;
  padding: .5rem;
  overflow: hidden;
  font-size: 110%;
}

#wrapper > article {
  padding: 1rem;
  padding-bottom: 2rem; /* leave space for abs-positioned footer */
  border-top: 1px solid #282;
  border-bottom: 1px solid #282;
  background: url('globe.jpg') no-repeat top right;
  background-color: #fff;
  position: relative; /* contain abs-positioned footer */
  line-height: 1.4em;
}

#language-list { 
  margin-bottom: .5em;
  white-space: nowrap;
  display: block 
}
#language-list li { margin-left: .2em }
#language-list li:first-child { margin-left: 0 }
#language-list li:before { content: "" }
#language-list li a {
  background: #eef;
  padding: .1em .3em;
  border-radius: .2em;
}
#language-list li a.active {
  background: #000;
  color: #fff;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}

#breadcrumbs { font-size: 110%; }
#breadcrumbs a {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wrapper > article > footer {
  font-size: 90%;
  font-style: italic;
  color: #555;
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  text-align: right;
}

#wrapper > footer {
  clear: both;
  background-color: #333;
  color: #aaa;
  line-height: 1.3em;
  text-align: center;
  padding: .8em 1em 2em 1em;
}
#wrapper > footer a:link { color: #ddf; }
#wrapper > footer a:visited { color: #fdf; }


/* ----------- breakpoint 0.5 ----------- */
/* header contents float to left and right */

@media all and (min-width: 29.2rem) {
  #logo {
    float: left;
    max-width: 11.5rem;
  }
  #search {
    padding-top: .2rem;
  }
  #search,
  #language-chooser {
    float: right;
    clear: right;
  }
}

/* ----------- breakpoint 1 ------------------- */
/* #wrapper > header moves left */
@media all and (min-width: 43rem) {
  #wrapper {
  }
  #wrapper > article > h1 { font-size: 230% }
  .flex-right {
    clear: right;
    margin-left: 1.4em;
    width: 50%;
    float: right;
  }
  #wrapper > header {
    background-color: transparent;
    padding: 0 1rem;
    width: 14rem;
    position: fixed;
    top: 0;
  }
  #wrapper > article {
    border: none;
    padding-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: 14rem;
    /* border-radius: 0 0 0 2rem; */
    min-height: 44rem; /* always taller (hopefully) than fixed-left header */
  }
  #language-list {
    float: right;
    margin-left: 2em;
  }
  #wrapper > footer {
    /* margin-left: 18rem; /* under article */
  }

  /* override fixed fisheye when window is too short to display all of it */
  @media all and (max-height: 40rem) {
    #wrapper > header {
      position: static;
      float: left;
    }
  }
  #language-chooser,
  #search {
    float: none;
    text-align: left;
    overflow: hidden;
  }
  #search input[type="search"] {
    width: 100%;
  }
  #logo {
    float: none;
    margin: 0;
    width: 100%;
    margin: 1rem auto .5rem auto;
  }
  #hamburger { margin: 0; }
  #hamburger label { display: none; }
  #fisheye {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

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

@media only print {
  h1 { font-size: 200% }
  body { font-family: sans-serif; }
  h1, h2, h3, h4, h5, h6 { font-family: serif }
  /* remove elements that have no use in print */
  nav,
  #search,
  #language-chooser,
  #wrapper > footer,
  .no-print {
    display: none;
  }
  #wrapper {
    margin: 0;
    padding: 0;
  }
  #wrapper > header {
    position: static;
    float: none;
    margin: 0;
    padding: 0;
  }
  #logo { 
    width: 10rem;
    float: none;
    margin: 0;
  }
  #wrapper > article {
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
    border: none;
  }
  #wrapper > article > footer {
    position: static;
  }

  /* 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 */
  #wrapper > article a:visited[href^="http"],
  #wrapper > article a:link[href^="http"] {
    font-weight: bold;
  }

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