@font-face { font-family: Josefin; src: url(JosefinSans-Regular.ttf); }
@font-face { font-family: OpenSans; src: url(OpenSans-Regular.ttf); }
@font-face { font-family: LibMono; src: url(Liberation-Mono.ttf); }
@font-face { font-family: Raleway; src: url(Raleway-Regular.ttf); }

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  font-family: Raleway, Sans; font-weight: 450;
  background-color: white;
}

header {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0px auto;
  padding: 0px;
  background-color: #e8f4f1;
  border-bottom: 1px solid #a1d4c6;
}

article {
  display: block;
  min-height: 200px;
  margin: 0px auto;
  padding: 50px 15px 15px 15px;
  background-color: white;
}

footer {
  display: inline-block;
  width: 100%;
  margin: 0px auto -5px auto;
  padding: 0px;
  background-color: #1e1e1e;
  border-top: 5px solid #7d0f74;
}

aside {
  display: flexbox;
  float: left;
  width: 290px;
  margin: auto; padding: 20px;
  text-align: left;
}

h1 {
  margin: 15px 0px 10px 0px;
  padding-bottom: 2px;
  border-bottom: 1px dotted #7d0f74;
  color: #7d0f74;
  font-family: Josefin, Sans; font-size: 2.0em;
  text-align: left;
}
h2 {
  margin: 40px auto 0px auto; 
  color: #008c64;
  font-family: Josefin, Sans; font-size: 1.85em;
  text-align: left;
}
h3 {
  margin: 25px 0px 0px 0px;
  padding: 0px;
  color: #2da080;
  font-family: Josefin, Sans; font-size: 1.65em;
  text-align: left;
}
h4 {
  margin: 20px 0px 0px 0px;
  padding: 0px;
  color: #2da080;
  font-family: Josefin, Sans; font-size: 1.45em;
  text-align: left;
}
h5 {
  margin: 15px 0px 0px 0px;
  padding: 0px;
  color: #2da080;
  font-family: Josefin, Sans; font-size: 1.35em;
  text-align: left;
}
h6,h7 {
  margin: 0px;
  padding: 0px;
  color: #777777;
  font-family: OpenSans, Sans; font-size: 0.7em; font-weight: normal;
  text-align: right;
}

p { 
  margin: 10px auto 5px auto;
  color: #2f474b;
  line-height: 1.5em;
  font-size: 1.0em;
  text-align: justify; }

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  display: inline-block;
  content: "▪";
  color: #008c64;
  font-weight: bold;
  width: 0.9em;
}

li {
  margin-bottom: 8px;
  color: #2b3c37;
  line-height: 1.35em;
  font-size: 1em;
  text-align: left;
}
li li {
  margin-top: 5px;
  font-size: 100%;
}

blockquote {
  margin: 0px;
  padding: 10px 10px 10px 55px;
  background: url('img/symbols/quote.svg') no-repeat; background-size: 36px 32px; background-position: 10px center;
  background-color: #fff3fe;
  border-radius: 10px;
}
blockquote p {
  color: #7d0f74;
  line-height: 1.2em;
  font-family: Josefin; font-size: 1.15em;
  text-align: left;
}

pre {
  overflow-x: auto;
  margin-top: 5px; padding: 10px 5px 10px 8px;
  line-height: 1.25em;
  text-align: left;
  font-size: 0.8em; font-family: LibMono, Courier, monospace;
}

pre.src {
  color: #3f3f3f;
  background-color: #f7f7f7;
  border: 1px solid #d3d3d3;
  border-left: 5px solid #d3d3d3;
}

pre.cli {
  color:#e7ffe3;
  background-color: #008c64;
  border: 1px solid #1abe90;
  border-left: 5px solid #1abe90;
}

pre span { font-weight: 900; }
pre span.psu { color: #ff8fed; }
pre span.psr { color: #ff8f8f; }
pre span.cmd { color: white; }
pre span.cmt { color: #83bbab; font-weight: 300; }

/* For backwards compatibility, when only "```" is used for code blocks. */
pre code {
  margin: 0px; padding: 10px;
  color: blue;
  background-color: lightgray;
  font-size: 0.8em; font-family: LibMono, Courier, monospace;
}

pre.cli a {
  color: #e7ffe3;
}

h2 code, h3 code, h4 code {
  font-size: 0.9em; font-family: LibMono, Courier, monospace;
}

p code, li code {
  margin: 0px; padding: 1px 5px 1px 5px;
  color: #cc1a1a; font-size: 0.8em; font-family: LibMono, Courier, monospace;
  background-color: #fff0f0; 
  border: 1px solid #fdd0d0; border-radius: 5px;
}

.k {
  margin-right: 5px;
  padding: 2px 5px;
  color: #e2ffe1; font-size: 1em; text-align: left; font-weight: bold;
  background-color: #008c64;
  border-radius: 5px;
}

r { color: red; }

.s { display: inline; padding: 3px; margin: 0px; cursor: help; }

/* Queez-specific formatting */
.q-exp {
  display: none;
  margin-top: 5px;
  padding: 10px 10px 10px 55px;
  background: url('img/symbols/info.svg') no-repeat; background-size: 36px 32px; background-position: 10px center;
  background-color: #e2ffe1;
  font-size: 1em; text-align: left;
  border-radius: 10px;
}
.q-good { background-color: white; }
.q-good-on { background-color: #e2ffe1; }

.ok { padding: 2px; background-color: lightgreen; border-radius: 5px; }

.warn {
  padding: 10px 10px 10px 55px;
  background: url('img/symbols/warn.svg') no-repeat; background-size: 36px 32px; background-position: 10px center;
  background-color: #fff7d7;
  font-size: 1em; text-align: left;
  border-radius: 10px;
}
.info {
  padding: 10px 10px 10px 55px;
  background: url('img/symbols/info.svg') no-repeat; background-size: 36px 32px; background-position: 10px center;
  background-color: #dafeff;
  font-size: 1em; text-align: left;
  border-radius: 10px;
}
.preview {
  padding: 10px 10px 10px 55px;
  background: url('img/symbols/preview.svg') no-repeat; background-size: 36px 32px; background-position: 10px center;
  background-color: #fafafa;
  font-size: 1em; text-align: left;
  border-radius: 10px;
}

#topnav {
  display: block;
  position: absolute;
  margin: 5px 0px 0px 223px; padding: 10px;
}
#topnav a {
  margin: 0px; padding: 5px 10px 5px 10px;
  font-weight: bold;
  border-left: 1px solid #a1d4c6;
}

#disqus_thread {
  display: block;
  margin: 0px auto 10px auto;
  padding: 15px;
  border-top: 2px solid #7d0f74;
}

#tagPara { margin-top: 30px; text-align: right; }
#tagPara p {
  display: inline-block;
  border-top: 1px dotted #7d0f74;
  padding-top: 5px;
  margin: 0px;
  font-size: 0.9em;
}

#sbutt {
  display: block; float: left;
  width: 215px; height: 40px;
  margin: 5px; padding: 0px;
  background: url('img/maas_banner.svg') no-repeat left center; background-size: 215px 40px;
  outline: none; cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-tap-highlight-color: transparent;
}
#sbutt:hover {
  opacity: 75%;
}

#mbutt {
  display: block; float: right;
  width: 50px; height: 50px;
  margin: 0px; padding: 0px;
  background: url('img/mbutt.svg') no-repeat; background-size: 50px 100px; background-position: center top;
  outline: none; cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-tap-highlight-color: transparent;
}

#fmenu {
  display: block;
  visibility: hidden;
  position: absolute;
  right: 0px;
  z-index: 10;
  width: 270px;
  margin: 50px 0px 0px 0px;
  border: 1px solid #a1d4c6;
  transition: 200ms;
  transform: scale(0,0);
  transform-origin: 100% 0%;
}

#tag-search {
  width: 100%;
  background-color: #c6e5dc;
}

#tag-input {
  width: 230px;
  margin-top: 20px;
  padding: 7px;
  font-size: 0.8em;
  box-sizing: border-box;
  border: 1px #a1d4c6 solid;
  border-radius: 4px;
}

#tag-results {
  min-height: 1px;
  padding: 10px 5px;
  font-size: 15px;
  line-height: 1.5;
  font-size: 0.8em;
  border-bottom: 1px #a1d4c6 solid;
}

.mlink a {
  display: block;
  padding: 10px;
  background-color: #c6e5dc;
  font-size: 1.1em;
  text-align: left; text-decoration: none;
  outline: none;
}
.mlink a:hover {
  color: white; text-decoration: none; background-color: #008c64; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0px auto 0px auto;
}
img.right {
  padding: 5px 0px 5px 10px;
  float: right;
}
li img, h1 img {
  display: inline;
  margin: 0px;
}

.dtable {
  display: table;
  padding: 10px 0px 10px 0px;
  text-align: left;
}
.dsub { display: inline-block; }
.dsub + .dsub { padding-top: 50px; }

table {
  margin: 10px 0px 10px 0px;
  padding: 0px;
}
th {
  color: white;
  font-size: 0.85em;
  font-weight: bolder;
}
td {
  color: #2b3c37;
  font-size: 0.85em;
  text-align: left;
}

table.tan {
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: OpenSans, Sans;
  margin-bottom: 1em;
}
table.tan th,
table.tan td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  word-wrap: break-word;
}
table.tan th { background-color: #7a3d75; }
table.tan tr:nth-child(even) { background-color: #f9f9f9; }
table.tan img {
  max-width: none;
  height: auto;
  display: inline-block;
}

table.cat {
  max-width: 100%;
  overflow-x: auto;
  display: block;
  border-collapse: collapse;
}
table.cat td img {
  padding: 14px;
  max-width: none;
  height: auto;
  display: inline-block;
}
table.cat p { padding-left: 14px; font-size: 1.3em; font-weight: 800; }

a {
  color: #008c64;
  text-decoration: none;
}
a:hover {
  color: #7d0f74;
  text-decoration: underline;
}
a.doc {
  display: block;
  padding: 0px 0px 0px 25px;
  background: url('img/icons/dl_doc.gif') no-repeat;
}
a.pdf {
  display: block;
  padding: 0px 0px 0px 25px;
  background: url('img/icons/dl_pdf.gif') no-repeat;
}
a.zip {
  display: block;
  padding: 0px 0px 0px 25px;
  background: url('img/icons/dl_zip.gif') no-repeat;
}
a.sh {
  display: block;
  padding: 0px 0px 0px 25px;
  background: url('img/icons/dl_sh.gif') no-repeat;
}

hr {
  height:2px;
  color: #7d0f74;
  background-color: #7d0f74;
  border-width: 0;
}

aside h2 { display: inline-block; position: absolute; margin-top: -20px; padding: 5px; background-color: white; font-size: 0.8em; text-align: left; }
aside h3 { margin: 0px; padding: 5px 5px 0px 5px; color: #7d0f74; text-align: left; }
aside h6 { margin: 0px; padding: 5px; text-align: left; }
aside p { margin: 0px; padding: 0px 5px 5px 5px; text-align: left; }
aside img { max-width: 290px; }
aside a:hover { text-decoration: none; }
aside a:hover h3 { text-decoration: underline; }
aside a:hover p { text-decoration: underline; }
aside.big { width: 500px; }
aside.big img { max-width: 500px; }

footer h2 { margin: 0px; padding: 10px 0px 5px 10px; }
footer p { margin: 0px; padding: 0px 0px 10px 10px; color: gray; font-size: 0.85em; }
footer #div_mi { float: left; margin: 0px; padding: 0px; }
footer #div_mi a { color: #0aa579; }
footer #div_mi a:hover { color: #7a3d75; text-decoration: none; }
footer #div_pb { float: right; margin: 0px; padding: 0px; }
footer #div_pb div { margin-right: 20px; }
footer #gimp { margin: 10px 0px 20px 10px; float: left; }
footer #gimp a { width: 113px; height: 100px; display: block; background: url('img/pb_gimp.gif') no-repeat center top; }
footer #gimp a:hover { background: url('img/pb_gimp.gif') no-repeat center bottom; }
footer #html5 { margin: 10px 0px 20px 20px; float: left; }
footer #html5 a { width: 71px; height: 100px; display: block; background: url('img/pb_html5.gif') no-repeat center top; }
footer #html5 a:hover { background: url('img/pb_html5.gif') no-repeat center bottom; }
footer #inkscape { margin: 10px 0px 20px 10px; float: left; }
footer #inkscape a { width: 101px; height: 100px; display: block; background: url('img/pb_inkscape.gif') no-repeat center top; }
footer #inkscape a:hover { background: url('img/pb_inkscape.gif') no-repeat center bottom; }
footer #js { margin: 10px 0px 20px 20px; float: left; }
footer #js a { width: 88px; height: 100px; display: block; background: url('img/pb_js.gif') no-repeat center top; }
footer #js a:hover { background: url('img/pb_js.gif') no-repeat center bottom; }
footer #linux { margin: 10px 0px 20px 0px; float: left; }
footer #linux a { width: 103px; height: 100px; display: block; background: url('img/pb_linux.gif') no-repeat center top; }
footer #linux a:hover { background: url('img/pb_linux.gif') no-repeat center bottom; }

@media screen and (max-width: 1081px) {
  header #topnav { visibility: hidden; margin: 0px; font-size: 0em; }
  article p { text-align: left; }
  article img.right { margin: 2px 0px 2px 5px; max-width: 140px; max-height: 200px; }
  article table.tan { display: block; white-space: nowrap; }
  aside { width: 250px; }
  aside img { max-width: 250px; }
  aside.big { width: 270px; }
  aside.big img { max-width: 270px; }
  footer #div_mi { width: 100%; float: top; }
  footer #div_pb { width: 100%; float: bottom; }
  footer #div_pb div { margin: 0px 0px 20px 20px; }
  footer #gimp a { width: 57px; height: 50px; display: block; background: url('img/pb_gimp_s.gif') no-repeat center top; }
  footer #gimp a:hover { background: url('img/pb_gimp_s.gif') no-repeat center bottom; }
  footer #html5 a { width: 36px; height: 50px; display: block; background: url('img/pb_html5_s.gif') no-repeat center top; }
  footer #html5 a:hover { background: url('img/pb_html5_s.gif') no-repeat center bottom; }
  footer #inkscape a { width: 51px; height: 50px; display: block; background: url('img/pb_inkscape_s.gif') no-repeat center top; }
  footer #inkscape a:hover { background: url('img/pb_inkscape_s.gif') no-repeat center bottom; }
  footer #js a { width: 44px; height: 50px; display: block; background: url('img/pb_js_s.gif') no-repeat center top; }
  footer #js a:hover { background: url('img/pb_js_s.gif') no-repeat center bottom; }
  footer #linux a { width: 52px; height: 50px; display: block; background: url('img/pb_linux_s.gif') no-repeat center top; }
  footer #linux a:hover { background: url('img/pb_linux_s.gif') no-repeat center bottom; }
}

@media screen and (min-width: 1080px) {
  article, #disqus_thread { width: 1000px; }
}