html {
 font: 96% sans-serif;
 color: #2e3436;
 line-height: 1.4;
 background: #fff url(back.svg) 90% 50% no-repeat fixed;
 background-size: auto 75%;
 min-height: 100%;
 background-attachment: fixed;
}
* html { height: 100% }

body {
 /* display: none !important; */
 margin: 0;
 padding: 1px 0 0 0;
}

a {
 color: #3465a4;
 text-decoration: nong;
}
a.external {
 text-decoration: underline;
}
a:visited {
 color: #7589d5;
}
a.nonexistent {
 color: #888a85;
}
a:hover {
 color: #000;
 text-decoration: underline;
}

a#hatta-logo {
 visibility: visible;
 vertical-align: middle;
 display: block;
 position: absolute;
 top: 1em;
 left: 0px;
 width: 160px;
 text-align: center;
}
a img { border: none;  }

a.hatta-purple {
    visibility: hidden;
    vertical-align: middle;
    font-size: 75%;
    font-weight: bold;
    color: #888a85;
}
h1:hover a.hatta-purple,
h2:hover a.hatta-purple,
h3:hover a.hatta-purple,
h4:hover a.hatta-purple,
h5:hover a.hatta-purple,
h6:hover a.hatta-purple {
    visibility: visible;
}
div#hatta-header {
 padding: 0;
 margin: 0 auto 0 160px;
 width: 45em;
}
form#hatta-search {
 float: right; 
 margin: 0;
 font-size: 80%;
}
div#hatta-footer {
 text-align: right;
 border-top: 1px solid #eee;
 font-size: 80%;
 padding: 0.25em;
 clear:both;
 width: 56.25em;
 margin: 0 auto 0 160px;
}

input, textarea {
 font-size: 100%;
 border: 1px solid #ccc;
 background: #fff;
 color: #666;
 outline: 0.4em solid #eee;
 padding: 0.2em;
 line-height: 1.2;
 margin: 0.5em;
 vertical-align: middle;
 font-family: Droid Mono, DejaVu Mono, Lucida Console, Lucida Typewriter, monospace;
}
div.buttons input, input.button {
 background: #f7f7f7;
 color: #555;
}
textarea:focus, input:focus {
 border: 1px solid #ccdcbd;
 outline: 0.4em solid #f2fce9;
}
input:active {
 background: #f2fce9;
 color: #000;
 border: 1px solid #ccdcbd;
 outline: 0.75em solid #f2fce9;
}
div.upload div.file {
  padding: 1em 0;
  margin: 0.75em auto;
  width: 97%;
  text-align: center;
  outline: 0.4em solid #eee;
  border: 1px solid #ccdcbd;
  background: #f2fce9;
}
div.upload div.file input {
 outline: none;
 border: none;
}
div.buttons {
 margin: 1em 0;
 text-align: center;
}

textarea {
 display: block;
 margin: 0.5em auto;
 height: 22em;
 width: 97%;
}
#hatta-history input {
 font-size: 75%
}
div#hatta-content {
 padding: 0;
 margin: 0 auto 0 160px;
 width: 45em;
 position: relative;
}
div#hatta-content {
  min-height: 26em;
}
* html div#hatta-content { height: 20em }

div#hatta-menu {
 margin: 0;
 padding: 0;
 text-align: center;
 clear: left;
 width: 160px;
 line-height: 1.2;
 position: absolute;
 left: 0;
 top: 128px;
}
div#hatta-menu a {
 display: block;
 margin: 0 1.5em;
 padding: 0;
 text-shadow: #999 1px 1px 4px;
}
div#hatta-menu a:hover {
 text-decoration: none;
 background: #f2fce9;
 color: #77935b;
 box-shadow: #ddd 1px 1px 4px;
}

h1, h2, h3, h4, h5 {
 color: #abbc9a;
 font-weight: normal;
 letter-spacing: 0.05em;
 line-height: 1;
 margin: 0.75em 0 0.5em 0;
 text-shadow: #ddd 1px 1px 4px;
}

div#hatta-header h1 {
 margin: 0.75em 0 0.25em 0;
 font-size: 200%;
 color: #cbdcba;
 line-height: 1.2;
 font-weight: bold;
}

label.author { display: block; width: 97%; margin: 0 auto; text-align: right }
label.author input { width: 10em; margin: 0.5em 0 0.5em 0.5em; }
label.comment input { 
display: block; margin: 0.5em auto; width: 97%; }

pre {
 font-size: 90%;
    white-space: pre-wrap;
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
 line-height: 1.2;
 color: #666;
 font-family: Droid Mono, DejaVu Mono, Lucida Console, Lucida Typewriter, monospace;
}
pre.code {
 padding: 0.5em;
 margin: 0.5em;
 border: 1px solid #ccdcbd;
 background: #f2fce9;
 color: #77935b;
 box-shadow: #ddd 1px 1px 4px;
}
img.smiley {
 vertical-align: baseline;
}

i img {
 border: 1px solid #ccc;
 outline: 0.25em solid #eee;
 padding: 0.25em;
 float: right;
 margin: 0.25em 0 0.25em 0.5em;
 background: #fff;
}
b.highlight {
 color: #644e22;
 background: #fef4a4;
}
div.preview {
 background: url(preview.png);
}
ul li {
 list-style: url(bullet.png) outside;
}
ol li {
 list-style: decimal;
}
ul, ol {
 margin: 0.25em 0;
 padding: 0 0 0 1.5em;
}

hr {
 height: 1px;
 border: none;
 color: #fff;
 background: transparent;
 border-bottom: 1px solid #ccc;
 margin: 0.5em 0;
 box-shadow: #ddd 1px 1px 4px;
}

.diff ins {
    color: #650;
    background: #ffb;
    text-decoration: none;
    font-weight: bold;
}
.diff del {
    color: #666;
    background: #eee;
    text-decoration: line-through;
}
.diff div.orig {
    color: #666;
    font-size: 90%;
}
pre.diff {
    background: #fff;
    line-height: 1.25;
    padding-left: 0.25em;
    white-space: pre-wrap;
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
}

pre.syntax {
 padding: 0.5em;
 margin: 0.5em;


 border: 1px solid #e0d78a;
 background: #fff6b6;
 color: #000;
}
pre.syntax .Keyword {
 font-weight: bold;
}
pre.syntax .Comment, pre.syntax .Output {
 color: #999;
}
pre.syntax .Literal {
 color: #946e22;
}
pre.syntax .Builtin {
 font-style: italic;
 font-weight: bold;
}
pre.syntax .Operator.Word {
 font-weight: bold;
}
pre.syntax .Attribute {
 font-style: italic;
}
pre.syntax .Tag {
 font-weight: bold;
 color: #946e22;
}
pre.syntax .Traceback, pre.syntax .Error {
 color: #c00;
}
pre.syntax .Preproc {
 color: #946e22;
 font-style: italic;
}
div.snippet {
 font-size: 80%;
 color: #666;
}
.history input.button { font-size: 60% }

table {
 border-collapse: collapse;
 outline: 0.4em solid #eee;
}
td, th {
 border: 1px solid #ccc;
 padding: 0.25em;
}
th {
 background: #eee;
}

.highlight  { background: #f8f8f8; }
.highlight .c { color: #8f5902; font-style: italic } /* Comment */
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.highlight .g { color: #000000 } /* Generic */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #000000 } /* Name */
.highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
.highlight .x { color: #000000 } /* Other */
.highlight .p { color: #000000; font-weight: bold } /* Punctuation */
.highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
.highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
.highlight .gd { color: #a40000 } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ef2929 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #000000; font-style: italic } /* Generic.Output */
.highlight .gp { color: #8f5902 } /* Generic.Prompt */
.highlight .gs { color: #000000; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
.highlight .s { color: #4e9a06 } /* Literal.String */
.highlight .na { color: #c4a000 } /* Name.Attribute */
.highlight .nb { color: #204a87 } /* Name.Builtin */
.highlight .nc { color: #000000 } /* Name.Class */
.highlight .no { color: #000000 } /* Name.Constant */
.highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #ce5c00 } /* Name.Entity */
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #000000 } /* Name.Function */
.highlight .nl { color: #f57900 } /* Name.Label */
.highlight .nn { color: #000000 } /* Name.Namespace */
.highlight .nx { color: #000000 } /* Name.Other */
.highlight .py { color: #000000 } /* Name.Property */
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #000000 } /* Name.Variable */
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
.highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
.highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #4e9a06 } /* Literal.String.Backtick */
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */
.highlight .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4e9a06 } /* Literal.String.Double */
.highlight .se { color: #4e9a06 } /* Literal.String.Escape */
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */
.highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
.highlight .s1 { color: #4e9a06 } /* Literal.String.Single */
.highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
.highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #000000 } /* Name.Variable.Class */
.highlight .vg { color: #000000 } /* Name.Variable.Global */
.highlight .vi { color: #000000 } /* Name.Variable.Instance */
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */