@import url(https://fonts.googleapis.com/css?family=Signika+Negative:300,400,600&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic);

:root {
  --color-logo-red: #ed1b24;
  --color-logo-yellow: #ffd504;
  --color-logo-black: #000;
  --color-version-info-bg: #f4f4f4;
  --topbar-height: 30px;
}

html {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  font-size: 14px;
}

body {
  font-family: Lato, arial, helvetica, sans-serif;
  min-width: 320px;
  font-weight: 400;
  background-color: #eee;
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  color: #444;
  background-image: linear-gradient(to bottom, #ddd, #ddd var(--topbar-height), #eee var(--topbar-height));
  background-repeat: repeat-x;
}

button {
  font-family: Lato, arial, helvetica, sans-serif;
}

body, div, dl, dt, dd, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset,
input, textarea, p, blockquote,
th, td {
  margin: 0;
  padding: 0;
}

*,
*:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  outline-offset: 0;
}

html[data-whatintent=keyboard] :focus {
  outline: 2px solid #222;
}

p {
  font-family: Lato, arial, helvetica, sans-serif;
  font-size: 1em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 2px 0px 4px rgba(0,0,0,0.2);
  border-radius: 1px;
  background-color: rgba(255,255,255,1);
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 2px 0px 4px rgba(0,0,0,0.2);
  border-radius: 1px;
  background-color: rgba(192,192,192,1);
  color: rgba(192,192,192,0.3);
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

cs-bouncing-pane {
  position: fixed;
  top: 0px;
  height: 100%;
  width: 230px;
  min-width: 200px;
  background-color: white;
  box-shadow: 0px 7px 14px rgba(0,0,0,0.3);
  z-index: 30;
  overflow: hidden;
  left: calc(50% - 480px);
  transition: left 0.2s ease-in-out;
}

#main-menu a {
  text-transform: uppercase;
  text-decoration: none;
  color: #075c98;
  font-size: 12px;
  display: inline-block;
}

#mainmenu a:first-child img {
  margin: 30px auto 12px;
}

#main-menu {
  margin: 0px 20px;
  box-shadow: 0px 0px 4px #ddd;
  margin-bottom: 30px;
}

#main-menu > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#main-menu > ul > li {
  display: block;
  text-align: center;
  text-decoration: none;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #ccc;
  padding: 5px 9px;
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%);
}

#main-menu > ul > :last-child {
  border-width: 0px;
  padding: 8px 0px;
}

#main-menu > ul > li > cs-expand-button,
#main-menu > ul > li > a {
  cursor: pointer;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  color: #075c98;
  font-size: 14px;
}

#main-menu > ul > li._active {
  border-style: solid;
  border-width: 0px 0px 1px 4px;
  border-left-color: #ed1b24;
  border-right-color: transparent;
  padding: 5px 13px 5px 9px;
}


main {
  min-height: calc(100% + 1px);
  width: 980px;
  margin: auto;
  background-color: white;
  box-sizing: border-box;
  padding: 30px 30px 30px 280px;
}

main > h1 {
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1em;
  margin: 30px 0 0 0;
}

h1 {
  font-size: 40px;
  font-weight: bold;
  margin: 8px 0px 16px;
}

h2 {
  margin: 0.5em 0;
  padding: 0;
  font-size: 150%;
  line-height: 1.6;
  text-align: left;
  font-weight: 400;
  border-width: 0;
}

h3 {
  margin: 0.5em 0;
  padding: 0;
  font-size: 130%;
  line-height: 1.6;
  text-align: left;
  font-weight: 400;
  border-width: 0;
}



body > header {
  width: 980px;
  box-sizing: border-box;
  background-color: white;
  display: flow-root;
  font-size: 32px;
  line-height: 1.3;
  color: #005699;
  position: relative;
  padding: 24px 30px 26px 120px;
  background-image: url('/_gfx/logo_bip.png');
  background-repeat: no-repeat;
  background-position: 20px calc(50% + 3px);
  margin: var(--topbar-height) auto 0;
  border-color: white;
  border-style: solid;
  border-width: 0 0 0 250px;
}

body > header:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: '';
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0) calc(100% - 6px), rgba(0,0,0,0.15) calc(100% - 5px),  rgba(255,255,255,0) 100%);
}

article {
  text-align: justify;
}

article * a {
  color: #00f;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
}

article * a:hover {
  text-decoration-color: #c44;
}

#skip-links {
  width: 230px;
}

#skip-links > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#skip-links > ul > li {
  text-align: center;
}

#skip-links > ul > li:nth-last-child(n+2) > a {
  z-index: 1000;
  position: absolute;
  width: 0px;
  height: 0px;
  top: 10px;
  left: -10000px;
  display: block;
}

html[data-whatintent=keyboard] #skip-links > ul > li:nth-last-child(n+2) > a:hover,
html[data-whatintent=keyboard] #skip-links > ul > li:nth-last-child(n+2) > a:focus,
html[data-whatintent=keyboard] #skip-links > ul > li:nth-last-child(n+2) > a:active {
  left: 10px;
  background-color: #ffd500;
  height: auto;
  width: auto;
  padding: 5px 10px;
  color: black;
}

.menu-toggle {
  cursor: pointer;
  border: 0;
  background-color: transparent;
  user-select: none;
}

.menu-toggle+ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 0px;
  overflow: hidden;
  transition: all 0.3s ease-in-out, visibility 0s 0.3s;
  visibility: hidden;
}

.menu-toggle[aria-expanded=true]+ul,
._active > .menu-toggle+ul {
  max-height: 600px;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}

.menu-toggle+ul > li {
  padding: 6px 0 0px;
}

#menu-toggle {
  display: none;
  background-color: var(--color-logo-red);
  position: fixed;
  text-align: center;
  top: 0px;
  left: 0px;
  width: 48px;
  height: 30px;
  color: white;
  font-size: 22px;
  line-height: 1.4em;
  z-index: 25;
  user-select: none;
  cursor: pointer;
  border-width: 0 calc(100vw - 34px) 0 0;
  border-style: solid;
  border-color: #ddd;
}

table.styled {
  width: 100%;
}

table.styled td {
  background-color: #eee;
  padding: 4px 6px;
}

table.styled th  {
  padding: 4px 6px;
  background-color: #e8e8e8;
}

table.styled tr:first-child th {
  background-color: #ddd;
}

article img {
  max-width: 100%;
  height: auto;
}

clacks-version-info {
  display: block;
  margin-top: 40px;
  margin-bottom: 20px;
}

clacks-version-info > dl {
  display: grid;
  margin: 2.8em -1px 1.4em;
  grid-template-areas:
    "author-dt author-dd version-dt version-dd views-dt views-dd"
    "publisher-dt publisher-dd date-dt date-dd date-dd date-dd";
}
clacks-version-info > dl > dt,
clacks-version-info > dl > dd {
  background-color: var(--color-version-info-bg);
  margin: 1px;
  padding: 4px 0.6em;
  flex: 1 0 auto;
}

clacks-version-info > dl > :first-child {
  grid-area: author-dt;
}

clacks-version-info > dl > :nth-child(2) {
  grid-area: author-dd;
}

clacks-version-info > dl > :nth-child(3) {
  grid-area: version-dt;
}

clacks-version-info > dl > :nth-child(4) {
  grid-area: version-dd;
  text-align: center;
}

clacks-version-info > dl > :nth-child(5) {
  grid-area: views-dt;
}

clacks-version-info > dl > :nth-child(6) {
  grid-area: views-dd;
  text-align: center;
}

clacks-version-info > dl > :nth-child(7) {
  grid-area: publisher-dt;
}

clacks-version-info > dl > :nth-child(8) {
  grid-area: publisher-dd;
}

clacks-version-info > dl > :nth-child(9) {
  grid-area: date-dt;
}

clacks-version-info > dl > :last-child {
  grid-area: date-dd;
}


clacks-version-info > dl > dd {
  font-weight: bold;
}

clacks-version-info > details > table {
  width: 100%;
}

clacks-version-info table th {
  text-align: left;
  font-weight: normal;
  padding: 4px 8px;
  background-color: var(--color-version-info-bg);
}

clacks-version-info table td {
  text-align: left;
  padding: 4px 8px;
  background-color: var(--color-version-info-bg);
  font-weight: bold;
}

clacks-version-info details {
  padding-top: 12px;
}

blockquote {
  display: block;
  margin: 0.5em;
  padding: 1em;
  font-size: 150%;
  line-height: 1.6;
  color: #444;
  text-align: left;
  font-family: Lato, arial, helvetica, sans-serif;
  font-weight: 400;
  font-style: italic;
  background-color: #f8f8f8;
  border-width: 0px;
}

.middlemenu li,
.middlemenu a {
  color: #075c98;
}

@media (max-width: 990px) {
  main {
    padding-left: calc(100% - 700px);
    width: 100%;
  }

  body > header {
    font-size: 3vw;
    width: 100vw;
  }
}

@media (max-width: 976px) {
  #mainmenu {
    left: 0px;
  }

  main {
    padding-left: 260px;
  }
}

@media (max-width: 900px) {
  clacks-version-info > dl {
    grid-template-areas:
      "author-dt author-dd author-dd author-dd"
      "publisher-dt publisher-dd publisher-dd publisher-dd"
      "date-dt date-dd date-dd date-dd"
      "version-dt version-dd views-dt views-dd"
  }
  clacks-version-info > table tr {
    display: flex;
    flex-wrap: wrap;
  }

  clacks-version-info > table th {
    flex: 1 0 30%;
    margin-bottom: 2px;
  }

  clacks-version-info > table td {
    flex: 1 0 50%;
    margin-bottom: 2px;
  }

  clacks-version-info > details tr {
    display: flex;
    flex-wrap: wrap;
  }

  clacks-version-info > details th {
    display: none;
  }

  clacks-version-info > details td {
    flex: 1 0 60%;
    padding: 1px 8px;
  }

  clacks-version-info > details td:nth-child(2),
  clacks-version-info > details td:nth-child(3),
  clacks-version-info > details td:nth-child(4) {
    padding-left: 2em;
  }

  clacks-version-info > details td:nth-child(5) {
    text-align: right;
    margin-bottom: 2px;
  }

  clacks-version-info > details td:first-child:before {
    content: 'Wersja ';
  }

  clacks-version-info > details td:nth-child(2):before {
    content: 'Data publikacji: ';
    font-weight: normal;
  }

  clacks-version-info > details td:nth-child(3):before {
    content: 'Autor: ';
    font-weight: normal;
  }

  clacks-version-info > details td:nth-child(4):before {
    content: 'Wyświetleń: ';
    font-weight: normal;
  }
}

@media screen and (max-width: 730px) {
  main {
    min-width: 340px;
    padding: 30px calc(5.5vw - 10px);
  }

  body > header {
    width: 100%;
    margin: var(--topbar-height) 0 0;
    border-left: 0px;
  }

  #menu-toggle {
    display: block;
  }

  #mainmenu {
    left: -240px;
  }

  #menu-toggle[aria-expanded=true] {
    background-color: rgba(0,0,0,0);
    width: calc(100% - 230px);
    height: 100%;
    left: 230px;
    color: rgba(0,0,0,0);
    cursor: auto;
  }

  #menu-toggle[aria-expanded=true]+#mainmenu {
    left: 0px;
  }

  body > header {
    font-size: calc(6px + 3vw);
    background-size: calc(40px + 3vw);
  }
}

@media (max-width: 360px) {
  main {
    padding: 30px 10px;
    width: 340px;
  }

  body > header {
    background-size: 40px 50px;
    padding-left: 80px;
    font-size: 18px;
  }
}