@font-face {
  font-family: 'Special';
  font-style: normal;
  font-weight: 800;
  src: local('Titan One'), local('Titan-One'), url(/font/TitanOne-Regular.ttf);
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), local('Ubuntu-Regular'), url(/font/Ubuntu-Regular.ttf);
}

@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: local('Ubuntu-Italic'), url(/font/Ubuntu-Italic.ttf);
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu-Bold'), url(/font/Ubuntu-Bold.ttf);
}

@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  src: local('Ubuntu-BoldItalic'), url(/font/Ubuntu-BoldItalic.ttf);
}

/* reset */
html, body {
margin: 0;
border: 0;
padding: 0;
}

body {
background: #202020;
font-family: "Ubuntu";
font-size: 16px;
}

/* Layout */
#width {
min-width: 40em;
max-width: 75em;
margin: 0 auto 0 auto;
padding: 0;
}

#head {
height: 7em;
font-family: "Special";
}
#head p {
position: absolute;
font-size: 250%;
font-weight: bold;
padding: 0;
margin: 0.5em 0 0 1em;
text-shadow: 0.1em 0.1em 0.2em rgba(50,20,0,0.5);
}
#head img.stretch {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
#hd2 {
position: relative;
width: 100%;
height: 7em;
}
#topimg {
position: absolute;
top: 0;
right: 0;
background: none !important;
width: 15em;
}

#menu ul {
list-style: none;
padding: 0.5em 0 0.5em 0;
background-repeat: repeat-x;
background-position: bottom;
margin: 0;
}
#menu li {
display: inline;
margin: 0;
}
#menu li a {
text-decoration: none;
padding: 0.5em 1em 0.5em 1em;
margin: 0;
}
#menu li a:hover {
background-repeat: repeat-x;
background-position: top;
}

#trail {
padding: 0.2em 0 0.2em 0;
}
#trail ul {
list-style: none;
display: inline;
margin: 0;
padding: 0 0 0 0.5em;
}
#trail li {
display: inline;
font-size: 80%;
padding-left: 0.5em;
margin: 0;
}
#trail li:before {
content: "\0020 \0020 \0020 \00BB \0020";
}

#content {
background: #F3F3F3;
padding: 0 2em 2em 2em;
margin-top: 0;
border-top: solid #FFDD00 0.1em;
}

#foot {
border-top: solid 1px;
padding: 1em 3em 3em 3em;
background: #efefef;
font-size: 80%;
text-align: center;
}
#foot * {
margin: 0.2em 0 0 0;
}

/* General formatting */

#content table {
margin: 1em 0 1em 0;
border-width: 3px;
border-style: solid;
border-left: none;
border-right: none;
}

#content table td {
padding: 0.2em;
}

#content table td p {
margin: 0;
}

tr, td {
vertical-align: top;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: "Special";
text-align: left;
text-shadow: 0.05em 0.05em 0.2em #555;
}
h2 a, h3 a {
text-decoration: none;
}
/* Lists */
dt {
font-weight: bold;
}
dd {
margin: 0 0 1em 5em;
}
ol, ul
{
margin-bottom: 1em;
}
li {
//margin-left: 2.5em;
}
ul {
list-style: circle;
//margin: 0 0 1em 1em;
}
ul ul {
list-style: disc;
margin: 0 0 0 0em;
}
ol {
margin: 0 0 1em 1em;
}
/* Other */
code {
background: #E7FFC7;
border-radius: 0.2em;
padding: 0.1em;
font-size: 80% !important;
}
pre {
background: #E7FFC7;
margin: 1em 0 1em 0;
padding: 0.5em;
border: solid #C3EB8D;
border-width: 0 0 0 0.2em;
white-space: pre-wrap;
}
pre code {
padding: 0;
}
p + p {
margin-top: 1em;
}
blockquote {
margin: 1em 3em 1em 3em;
padding: 0 0 0 1em;
border-left: solid 3px;
}
.centre {
text-align: center !important;
}
.right {
text-align: right !important;
}

p.blogdate{
font-size: 90%;
text-align: right;
}
p.blogdate:before{
content: "";
display: block;
position: relative;
right: -90%;
width: 10%;
top: 0;
border-top: solid 0.1em black;
padding-top: 0.5em;
}

/* Button List */
.buttons ul {
list-style: none;
}
.buttons li a {
display: inline-block;
padding: 0.3em 0.5em;
margin: 0.1em;
background: #4479BA;
color: #FFFFFF;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Images */
img.photo {
background: white;
border: solid black 10px;
padding: 1px;
margin: 0.5em;
box-shadow: 0.4em 0.4em 0.5em rgba(0, 0, 0, 0.4);
}
img.icon {
margin: 0.4em 0.4em 0.6em 0;
vertical-align: middle;
height: 4.5em;
}

/* Div layouts */
div.table {
position: relative;
display: inline-block;
margin: 2em;
}
div.distinct {
border-radius: 0.5em;
border-shadow: 0 0 0.2em;
border-color: black;
padding: 1em;
margin: 1em;
}
div.centre {
display: table;
margin-left: auto;
margin-right: auto;
}

/* divs in text */
.sidebar, .footnote {
float: right;
clear: right;
width: 12em;
right: -45em;
padding: 1em;
border: solid 1px;
border-radius: 0.5em;
}
.sidebarblock li {
margin-left: 0;
}
.pad {
padding: 0.5em 1em 0.5em 1em;
}

/* AsciiDoc Stuff */
.exampleblock {
padding: 0.5em;
margin: 1em 0 1em 0;
}
.admonitionblock img.caption {
float: left;
margin-left: -70px;
}
.admonitionblock {
clear: both;
border-left: solid 3px;
min-height: 60px;
margin: 0.5em 0 0.5em 70px;
}

/* Google etc. */
iframe {
margin: 1em auto 1em auto;
}

.float_left {
float: left;
}
.float_right {
float: right;
}
.clear {
clear: both;
}

/* For viewports narrower than the min-width */
@media (max-width: 750px) {
body {
font-size: 11px;
}
#topimg {
width: 30%;
}
#width {
min-width: 100%;
max-width: 100%;
width: 100%;
}

@media (max-width: 500px) {
body {
font-size: 10px;
}
}

/* Don't let stuff expand outside the width of the window - particularly relevant for narrow mobile devices */
img, iframe {
max-width: 100% !important;
}