/* This is a -*- css -*- file. */
/* Written by Luca Saiu.
   I, Luca Saiu, hereby release this file into the public domain. */

/* This is the right thing, but apparently not widely supported yet. */
/*
 @viewport {
    width: device-width;
    initial-scale: 1;
}
*/

/* A test. */
/*
body:before {
    content: "[This is a temporary test: please bear with me. <i>foo</i>bar]";
    content: url(/static/my-photo.jpg);
}
*/

p, body{
    /* font-size: 20px; */
    background-color:#000011;
    color: #cccccc;
    text-align: justify;
}

#error, #error p, #error div, #error span{
    background-color: #330000;
    color: #eeeeee;
}

#myphoto {
    float: right;
    /* display: inline-block; */
    /* align: right; */
    clear: both;
    /* ??? */
    padding-left: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    /*background-color:yellow;*/
}

#left, #right, #bottom {
    /*  padding: 10px 0 10px 0; */
    text-align: justify;
}

/* Elements of this class are only shown in one-column mode, which
   here is the default to be overridden. */
.one-column-only {
    visibility: visible;
}

/* Narrow screens: do not do anything particular with "left" and
   "right", so that their content is now shown as two columns but
   simply "left" on top of "right"; also make my photo proportionally
   smaller, as the width percentage applies to the whole screen. */
#myphoto {
    /* This is the default setting, overridden below for wide screens. */
    width: 25%;
}

/* Wide screens: show columns side by side and make my photo
   proportionally larger, as the width percentage is referred to just
   one column. */
@media all and (min-width: 891px) {
    #myphoto {
        width: 40%;
    }
    #left {
        width: 49%;
        float: left;
    }
    #right {
        /* width: 49.5%; */
        width: 49%;
        float: right;
        clear: right;
    }
    .one-column-only {
        visibility: hidden;
    }
}
.bottom {
    clear: both
}
.news {
    /*padding: .25em;*/
    /*
    border-style: solid none solid none;
    border-width: 0.1em;
*/
}
.news, .important-news {
    clear: both
}
.news-item {
    /*padding: 0 1em;*/
    /*border-style: solid none solid none;*/
    /*border-width: 0.1em;*/
    /*border-color: #000044;*/
}
.important-news p {
    border-color: red;
    border-style: solid;
    /* margin: 1em;*/
    padding: 1em;
    /* background-color: black; */
}
/* #news p:before, #important-news p:before { */
/*     content: "<hr/>"; */
/* } */

.smallhr{
    width: 50%;/*50%*/
}

a:link {
    color: #7777ff;
}
a:visited {
    color: #6060aa;
}

/* A footer row contains footer items, all vertically alined one beside the
   other. */
.footerrow {
}
/* I use this for both the hacker emblem image and for the text at its right. */
.footeritem {
    display: inline-block;
    vertical-align: middle;
    padding: 0 0.5em 0 0;
}

/* Influence links, but pay attention not to affect named anchors. */
a:visited {
    color: #9999ff;
}
:link:link {
    color: #5555ff;
}
:link:link, :visited:link, :link:active, :visited:active, a:focus {
    /*background-color: #000011;*/ /* <-- bad idea for my error pages, having a red background */
}
:link:hover, :visited:hover {
    color: #000000;
    background-color: #ffff99;
}
:link:active, :visited:active, a:focus {
    color: #ffff99;
}
/*
:link:link, :visited:link  { color: #000000;
                             background-color: #ffff99; }
:link:link, :visited:link  { color: #000000;
                             background-color: #ffff99; }
*/
/*
:link:hover, :visited:hover  { color: #000000;
                               background-color: #ffff99; }
:link:active, :visited:active, a:focus { color: #ffff99;
                                         background-color:#000011; }
*/
/* When using an image as a link, there should be no border: */
a img {
    border: none;
}

img.feedicon { height: 1.0em;
               vertical-align:middle;
               border:0; }
/* img.tagicon { height: ICONHEIGHT; */
/*               vertical-align:middle; */
/*               border:0; } */
/* img.bigtagicon { height: BIGICONHEIGHT; */
/*                  vertical-align:middle; */
/*                  border:0; } */

.container-of-centered-and-horizontally-aligned-elements {
    text-align: center;
}

.horizontally-aligned-element {
    padding: 0 0.5em;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.container-of-horizontally-aligned-elements {
    /* background-color: #ee0000; */
    /* border-spacing: 0; */
    display: table;
}

.left-alined-contained-element {
    vertical-align: middle;
    display: table-cell;
    padding: 0 0.5em 0 0;
}

.rest-of-the-line-contained-element {
    vertical-align: middle;
    display: table-cell;
}
/* This was a very ugly workaround. */ /*
.rest-of-the-line-contained-element p {
    margin: 0;
}
                                      */

/* Scratch, to delete, modified from http://www.goldenapplewebdesign.com/css-equally-spaced-horizontal-elements/ */
#Qparent {
  text-align: justify;
  font-size: 0.1px; /* IE 9/10 fix */
}
#Qparent li {
  display: inline-block;
}
#Qparent:after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

.studentexample {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
.studenttask, .box {
   /*
    color: yellow;
    border-color: yellow;
   */
    color: #dddd22;
    border-color: #dddd22;
    border-style: solid;
    border-width: 0.1em;
    padding: 0.5em;
}
.studenthint {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    font-style: italic;
}

/*
.box {
    color: #888822;
    border-color: #888822;
    color: yellow;
    border-color: yellow;
    border-style: solid;
    border-width: 0.1em;
    padding: 0.5em;
}
*/

/* Useful for pre. */
.codeblock, .smallcodeblock,
.codeblockblue, .smallcodeblockblue,
.codeblockred, .smallcodeblockred,
.codeblockgreen, .smallcodeblockgreen {
    display: block; /* Version preferred by José: */
    /*resize: horizontal;*/ /* José also hates this. */
    resize: none;
    padding-left: 3em !important;
    padding-right: 3em !important;
    min-width: 0%;
    max-width: 80%;
}

/* Useful for pre and tt. */
.codeblock, .smallcodeblock,
.codeblockblue, .smallcodeblockblue,
.codeblockred, .smallcodeblockred,
.codeblockgreen, .smallcodeblockgreen,
.nicett, .smallnicett {
    color: white;
    margin-left: auto;
    margin-right: auto;
    /* display: table; */ /*José dislikes this.  I disagree, for vertically-developed code like assembly.*/

    flex-wrap: wrap !important;

    overflow-wrap: anywhere  !important;
    overflow: auto !important;
    flex-wrap: wrap !important;
    /*box-shadow: 0.3em 0.5em #222222;*/
}

/* Useful for tt. */
.nicett, .smallnicett {
    -moz-border-radius: 0.3em !important;
    -webkit-border-radius: 0.3em !important;
    border-radius: 0.3em !important;
    padding: 0.1em !important;
}

/* I use this for pre elements which I know are too wide. */
.wideblock {
    /* Override display: table. */
    display: block !important;
}

/* Useful for pre. */
.codeblockblue, .smallcodeblockblue,
.bluebackground, .tableblue, .smalltableblue {
    background-color: #000030;
}
.redbackground, .codeblockred, .smallcodeblockred {
    background-color: #200000;
}
.greenbackground, .codeblockgreen, .smallcodeblockgreen {
    background-color: #003000;
}

/* These are also meant for pre.  I use these as additional classes for code
   blocks, to override the default colors and represent visually that, for
   example, some code is written by a human and some code is generated; or to
   distinguish different high-level languages or assembly for different
   architectures in the same page. */
.blockstyle1 {
    background-color: #d7d349;
    color: #000000;
    /* background-color: #f0f090; */
    /* color: #000000; */
}
.blockstyle2 {
    background-color: #002600;
    color: #e0e0e0;
    /* background-color: #004000; */
    /* color: #ffffff; */
}
.blockstyle3 {
    background-color: #004380;
    color: #d0d0d0;
    /* background-color: #a0a0f0; */
    /* color: #000000; */
}
.blockstyle4 {
    background-color: #000040;
    color: #e0e0e0;
    /* background-color: #000040; */
    /* color: #ffffff; */
}
.blockstyle5 {
    background-color: #1c0019;
    color: #e0e0e0;
    /* background-color: #004040; */
    /* color: #ffffff; */
}

/* Avoid ugly long lines in example.  This is the kind of bullshit that has to
   be done in several different ways to work on all browsers: */
.codeblockblue, .smallcodeblockblue,
.codeblockred, .smallcodeblockred,
.codeblockgreen, .smallcodeblockgreen,
.codeblock, .studentexample, .tableblue, .nicett, .smallnicett {
    white-space: pre-wrap; /* CSS 3 only? */
    /* white-space: -moz-pre-wrap !important; */
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -pre-wrap;
    word-wrap: break-word; /* deprecated, apparently, replaced by the now standard overflow-wrap. */
    overflow-wrap: break-word;
}

.tableblue, .smalltableblue {
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-style: italic;

    min-width: 70%;
    max-width: 90%;

    border-collapse: separate;
    border-spacing: 0.2em;
}
.tableblue th {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
.smalltableblue th {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

/* Experimental: round some corners of table headers. */
.tablebluehorizontalheader {
    -moz-border-radius: 0.5em 0 0 0.5em;
    -webkit-border-radius: 0.5em 0 0 0.5em;
    border-radius: 0.5em 0 0 0.5em;
    padding: 0 0.25em !important;
}
.tableblue th, .smalltableblue th {
    -moz-border-radius: 0.5em 0.5em 0 0;
    -webkit-border-radius: 0.5em 0.5em 0 0;
    border-radius: 0.5em 0.5em 0 0;
    padding: 0 0.25em !important;
}

.tableblue th, .smalltableblue th, .tablebluehorizontalheader {
    /*border: 1px solid #0000ff;*/
    /*
    padding-top: 12px;
    padding-bottom: 12px;
*/
    font-weight: normal;
    background-color: #000090;
    color: white;
/*    font-weight: bolder;*/
    /*color: yellow; */
    text-decoration: underline;
}
.tablebluehorizontalheader {
    text-align: left !important;
}

.tableblue tr:nth-child(even), .smalltableblue tr:nth-child(even) {
    background-color: #000050;
}
.tableblue th, .tableblue td, .smalltableblue th, .smalltableblue td {
    text-align: right;
}
.tableblue td, .smalltableblue td {
    font-weight: lighter;
}
.tablebluehighlight, .tablebluebest, .tableblueworst {
    font-weight: bold !important;
    /*color: yellow;*/
}
.tablebluehighlight {
    /*color: yellow;*/
    background-color: #ffff99;
}
.tablebluebest {
    /*color: yellow;*/
    background-color: #005000;
}
.tableblueworst {
    /*color: yellow;*/
    background-color: #500000;
}
.tableblue caption, .smalltableblue caption {
    caption-side: bottom;
}

.invisible {
    visibility: hidden;
}

.tableblue, .codeblock,
.codeblockblue, .codeblockred, .codeblockgreen
{
    font-size: inherit;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    padding: 0.5em;
}

.smallcodeblock,
.smallcodeblockblue, .smalltableblue,
.smallcodeblockred, .smalltablered,
.smallcodeblockgreen, .smalltablegreen,
.nicett, .smallnicett {
    /*font-size: 75%;*/
    font-size: smaller;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    padding: 0.5em;
}

.tableblue td:hover, .smalltableblue td:hover,
.tableblue th:hover, .smalltableblue th:hover {
    background-color: #ffff99;
    color: #000000;
}

/* This is quite clumsy.  I am currently using it like this:
   <tr class="tablebluerowseparator"><th colspan="3"/></tr> <!-- separator -->
*/
.tablebluerowseparator {
    /* height: 0.67em; */
    height: 0.75em;
}
.tablebluerowseparator th {
    visibility: hidden;
}

.columns, .columns2, .columns3, .columns4 {
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    /*column-width: auto;*/
    column-span: all;
    column-width: 50em;
}

.columns2 {
    column-count: 2;
}
.columns3 {
    column-count: 3;
}
.columns4 {
    column-count: 4;
}

textarea, input[type="text"]{
    /* font-size: 20px; */
    background-color:#000022;
    color: #ffffcc;
    text-align: justify;
    font-family: monospace;
}

.banner {
        text-align: center;

/*    display: inline-block;*/
    border: 1em;
    /*object-fit: contain;*/
    max-width: 90%;
    max-height: 5.5em;
    text-align: center;
/*    float: top;*/
    /*clear: both*/
    vertical-align: middle;
}

.announcement, .announcement p {
    background-color: blue;
    color: white;
    display: block;
    text-align: center;
}
.announcement {
    padding: .1em;
    border-style: solid;
}

.wide-figure {
    display: block;
    width: 70%;
    margin: 0 auto;
}

/* Directory listings used by my directory-index.php
   **************************************************************** */
.directory-listing {
    display: block;
    width: 100%;
    /*border-top: double;*/
    /*border-bottom: double;*/
    /*
    table-layout: fixed;
*/
    /*
    left: auto; right: auto;
*/
}
.directory-listing-heading-row {
    /*
    color: purple;
    border-bottom: 1px solid green;
*/
    /*background-color: yellow;*/
}
.directory-listing-row {
    /*    width: 100%;*/
    /*
    border-top: 1px solid red;
   */
}
.directory-listing-heading {
    text-decoration: underline;
}
.directory-listing-td {
}
.directory-listing-thumbnail {
    padding-right: 2em;
    display: block;
    text-align: center;
}
.directory-listing-thumbnail-link {
    text-align: center;
    display: inline-block;
}
.directory-listing-thumbnail-img { 
    object-fit: contain;
    border: 0px;
    vertical-align: middle;
    width: 4em;  height: 4em;
}
.directory-listing-name {
    padding-right: 2em;
}
.directory-listing-size {
    padding-right: 2em;
}
.directory-listing-date {
    /*padding-left: 2em;*/
}
.directory-listing-p {
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
}
.directory-listing-p-html {
}
.directory-listing-p-non-html {
    font-style: italic;
}


/* Custom CSS for make-gallery galleries
   **************************************************************** */

/* See https://ageinghacker.net/hacks/#make-gallery */

.gallery-body {
    background-color: #000000;
    font-family: sans-serif;
    text-align: center;

    /* This is a nice alternative to a solid colour: */
    /* background: url(https://cdn.pixabay.com/photo/2015/12/08/14/08/seamless-1082988_960_720.jpg);
      background-size: 20em;
   */
    /*background: url(https://cdn.pixabay.com/photo/2015/12/08/14/08/seamless-1082988_960_720.jpg);*/
    /*background: url(/static/hacker-emblem.png);*/
}
.gallery-main-pane, .gallery-p,
.gallery-thumbnail,
.gallery-previous-thumbnail-link, .gallery-next-thumbnail-link {
    background-color: #000011;
    /* background-color: red; */
    text-align: center;
}

.gallery-thumbnail:hover, .gallery-thumbnail-link:hover  {
    background-color: #ffff99;
}


/* Mobile
   **************************************************************** */

/* On mobile make elements a little larger and a little less crowded. */
@media (any-pointer: coarse) {
    p {
	font-size: 120%;
    }
    a:link, a:visited, a:hover, a:active, a:focus {
        display: inline-block; /* this makes vertical padding have effect on "a" elements */
	padding: 8px;
    }
    /* Override some image size and margins, too generous for small screens. */
    .directory-listing-thumbnail-img {
        width: 2em;  height: 2em;
    }
    .directory-listing-thumbnail, .directory-listing-name, .directory-listing-date {
        padding-right: .5em;
    }
}

/* Scratch
   **************************************************************** */

/*
body {
    background-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 10, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
}
*/

/*
  Local Variables:
  eval: (auto-save-mode -1)
  End:
*/