@import “fonts”; @import “rouge-github”;

body {

background-color: #fff;
font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#727272;
font-weight:400;
padding: 10px;
text-align: justify;

}

h1, h2, h3, h4, h5, h6 {

color:#222;
margin:0 0 0px;

}

p, ul, ol, table, pre, dl {

margin:0 0 10px;

}

h1, h2, h3 {

line-height:1.1;
text-align: center;

}

h1 {

font-size:28px;

}

h2 {

color:#393939;

}

h3, h4, h5, h6 {

color:#494949;

}

a {

color:#267CB9;
text-decoration:none;

}

a:hover, a:focus {

color:#069;
font-weight: bold;

}

a small {

font-size:11px;
color:#777;
// margin-top:-0.3em;
display:block;

}

a:hover small {

color:#777;

}

.wrapper {

width:860px;
margin:0 auto;
display: grid;
grid-template-columns: 280px auto;
grid-template-rows: auto auto;
grid-template-areas: 
  '. section'
  '. footer';
  justify-content: space-around;
  align-content: space-around;
  // background-color: #777;

}

blockquote {

border-left:1px solid #e5e5e5;
margin:0;
padding:0 0 0 10px;
font-style:italic;

}

code, pre {

font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
color:#333;

}

pre {

padding:5px 5px;
background: #f8f8f8;
border-radius:5px;
border:1px solid #e5e5e5;
overflow-x: auto;

}

table {

width:100%;
border-collapse:collapse;

}

th, td {

text-align:left;
padding:5px 10px;
border-bottom:1px solid #e5e5e5;

}

dt {

color:#444;
font-weight:700;

}

th {

color:#444;

}

header img {

width: 100%;
max-width:270px;

max-height: 270px;
display: block;
margin: auto;

}

img {

max-width: 100%;
max-height: 40vh;
display: block;
margin: auto;

} header {

width:270px;
float:left;
position:fixed;
// left: 10px;
-webkit-font-smoothing:subpixel-antialiased;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
justify-items: center;
// background-color: gray;

} header div {

margin-top: 10px;

} header h1 {

text-align: center;
padding-bottom: 10px;

} // header img-div { // // border-radius: 50%; // // border: 10px solid #267CB9; // background-color: #069; // max-height: 270px; // overflow: hidden; // width: 100%;

// } ul.downloads {

list-style:none;
height:40px;
padding:0;
background: #f4f4f4;
border-radius:5px;
border:1px solid #e0e0e0;
width:270px;

}

.downloads li {

width:89px;
float:left;
border-right:1px solid #e0e0e0;
height:40px;

}

.downloads li:first-child a {

border-radius:5px 0 0 5px;

}

.downloads li:last-child a {

border-radius:0 5px 5px 0;

}

.downloads a {

line-height:1;
font-size:11px;
color:#676767;
display:block;
text-align:center;
padding-top:6px;
height:34px;

}

.downloads a:hover, .downloads a:focus {

color:#675C5C;
font-weight:bold;

}

.downloads ul a:active {

background-color:#f0f0f0;

}

strong {

color:#222;
font-weight:700;

}

.downloads li + li + li {

border-right:none;
width:89px;

}

.downloads a strong {

font-size:14px;
display:block;
color:#222;

}

section {

width:500px;
// float:right;
padding-bottom:20px;
grid-area: section;
min-height: 80vh;
// background-color: green;

} // header { // background-color: #069; // } small {

font-size:11px;

}

hr {

border:0;
background:#e5e5e5;
height:1px;
margin:0 0 20px;

}

// footer { // width:270px; // float:left; // position:fixed; // bottom:50px; // -webkit-font-smoothing:subpixel-antialiased; // } footer {

width:500px;
// float:right;
padding-bottom:20px;
grid-area:footer;
// float: right;
// position: fixed;
// bottom: 0px;
// width:270px;
// -webkit-font-smoothing:subpixel-antialiased;

} @media print, screen and (max-width: 900px) {

footer,section {
  width: 410px;
}
.wrapper {
  width: 710px;
  grid-template-columns: 290px;
  justify-content: space-around;
  align-content: space-around;
}

} @media print, screen and (max-width: 745px) {

.wrapper {
  width:auto;
  margin:0;
  // display: grid;
  justify-content: space-around;
  align-content: space-around;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    'header'
    'section'
    'footer';
    padding:10px;
}
header {
  grid-area: header;
  float: none;
  position: static;;
  width: auto;
  max-width: 90vw;
}
section {
  grid-area: section;
  width: auto;
  max-width: 90vw;
  min-height: auto;
}
footer {
  grid-area: footer;
  width: auto;
  max-width: 90vw;
}
// header, section, footer {
//   float:none;
//   position:static;
//   width:auto;

// }

// header {
//   // padding-right:320px;
//   display: grid;
//   grid-template-columns: 1fr;
//   grid-template-rows: auto minmax(auto, 25vh) minmax(auto, 65vh);
// }

section {
  border:1px solid #e5e5e5;
  border-width:1px 0;
  padding:20px 0;
  margin:0 0 20px;
}

header a small {
  display:inline;
}

pre, code {
  word-wrap:normal;
}
header {
  padding: 0;
}
body {
  word-wrap:break-word;
  padding: 10px;
}

header ul, header p.view {
  position:static;
}
// header ul {
//   position:absolute;
//   right:50px;
//   top:52px;
// }

}

@media print, screen and (max-width: 480px) {

// body {
//   padding:10px;
// }

.downloads {
  width:99%;
}

.downloads li, .downloads li + li + li {
  width:33%;
}

}

@media print {

body {
  padding:0.4in;
  font-size:12pt;
  color:#444;
}

}