* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

::selection {
  background: rgba(100, 100, 120, 0.3);
}

::-moz-selection {
  background: rgba(100, 100, 120, 0.3);
}

body {
  /*font-family: Georgia, 'Times New Roman', Times, serif;*/

  font: 18px/25px 'Palatino', 'Palatino Linotype', 'Georgia', serif;
  line-height: 150%;
}


h1, h2, h3, h4, h5, h6      { font-family: 'Vollkorn', 'Georgia', serif;
                              font-weight: normal; color: #222; }
h1, h2                      { margin: 25px 0 10px 0; }
h1                          { font-size: 48px; line-height: 52px; }
h2                          { font-size: 36px; line-height: 40px; }

#content {
  hyphenate: auto;
  hyphenate-lines: 3;
  orphans: 3;
  widows: 3;

  hyphens:auto;
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  -o-hyphens:auto;
  -ms-hyphens:auto;
}

[lang] p, [lang] li {
   text-align: justify;
}

h1, h2 {
  page-break-after: avoid;
  column-break-after: avoid;
  -webkit-column-break-after: avoid;
  -moz-column-break-after: avoid;
}

#content p {
  margin-bottom: 0.3em;
}

#content ul, #content ol {
  margin-top: 0;
}

#content ol ol {
  list-style-type: lower-alpha;
}

ul.children {
  border-top: 1px solid #eee;
  padding-top: 10px;
  padding-bottom: 10px;
  list-style-image: url(images/page_white_text.png);
}

@media screen {
  html, body, #container { height: 100%; }

  #container {
    max-width: 750px;
    margin: 0 auto;
  }

  body {
    padding: 24px;
    margin: 0;
  }

  pre { background-color: #fafafa; }
  code { background-color: #f2f2f2; }

  pre {
    border-left: 5px solid #ddd;
    padding: 5px 10px;
    white-space: pre-wrap;
  }

  a { color: navy; padding: 2px; }
  a:hover {
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
    background-size: 5px 5px;
    background-color: #eee;
  }

  pre b, pre strong { color: navy; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 960px) {

  #content {
    width: auto;
    margin: 0;
    padding: px 10px;
  }

  body {
    padding: 10px 10px;
  }

  #content div, #content p {
    margin: 0;
  }
}

@media print {
  #content {
    margin: 0;
    border: 0;
    min-height: auto;
  }

  nav.breadcrumbs { display: none; }

  body {
    margin: 0;
  }

  a {
    color: black;
  }

  a:not([href^='http'])::after {
    font-size: small;
    content: " [" attr(href) "]";
  }
}


#content code { border-radius: 4px; padding: 2px; }

code, pre { font-family: Consolas, 'Droid Sans Mono', 'Courier New', Courier, monospace; font-size: 15px; line-height: 140%; }

label { display: block; margin-bottom: 10px; }
input[type="text"], input[type="file"], input:not([type]){ display: block; width: 400px; font: inherit; }
textarea { display: block; width: 600px; font: inherit; min-height: 200px;}

@media only screen and (min-width: 1278px) {

  body.long #container {
    float: left; /* fix for IE 10 layout not being aligned to left */
    max-width: none;
    -webkit-column-width: 450px;
    -moz-column-width: 450px;
    column-width: 450px;
  }

  #content {
    margin-right: 50px;
  }

  body.long textarea { width: 550px; }
}