/* -----------------------------------------------------------------------------
 * Default HTML constructs
 * ---------------------------------------------------------------------------*/
body { margin: 0; font-family: Sans, Sans-Serif; font-size: 12pt;}

#postcomment textarea { display: block; width: 100%; height: 25rem; resize: vertical; }
#postcomment input[type='text'], input[type='password'], input[type='email'] { width: 100%; box-sizing: border-box; }
#postcomment form table { width: 100%; }
#postcomment form table td:first-child { width: 12rem;}

h1, h2, h3, h4 
{
    clear: left;
    font-family: Serif;
}

a { color: #DD0000; }
a:visited { color: #880000; }
main img {
    height: auto;
    margin: 0;
    max-width: 100%;
    padding: 0;
    text-align: centre;
}

pre {
    font-size: 80%;
    white-space: pre-wrap;
    margin-left: 2rem;
}

hr { margin: 1.5rem 0; }

blockquote
{
    background-color: #FFFBEC;
    border: solid 0.1rem #706239;
    padding: 0 1rem;
}

/* -----------------------------------------------------------------------------
 * Main page components
 * ---------------------------------------------------------------------------*/ 
main { margin: 1rem; }
#comments { margin: 1rem; }
#postcomment { margin: 1rem; }
#metadata { float: right; font-size: 80%; text-align: right;}
#asciilogo { display: none; }

header
{
    background-color: black;
    color: #AAAAAA;
    padding: 0.3rem 0.5rem;
    margin: 0;
    background: url('/darksleep/shared/banner_2017-06_dark.jpeg');
    background-size: auto 100%;
    overflow: hidden;
}
header a { color: white; }
header a:visited { color: white; }

.comment .siteadmin { color: #AC1A1A; }
.comment .commentquote { font-style: italic; color: #1A4C00; }

#descriptionbox
{
    background: #E4E4E4;
    padding: 1rem;
    margin: 1rem;
    border: solid 0.1rem #B7B7B7;
    max-width: 50rem;
    overflow: hidden;
}
#descriptionbox img
{
    float: left;
    display: block;
    margin-right: 1rem;
    max-width: 8rem;
    height: auto;
}

/* -----------------------------------------------------------------------------
 * Misc
 * ---------------------------------------------------------------------------*/ 
.left { float: left; }
.right { float: right; }

main h1:first-of-type {
	 clear: none;
	 margin-top: 0;
}


table.bordered { border-collapse: collapse; }
table.bordered td, table.bordered th { border: 0.1rem solid black; padding: 0.2rem 0.5rem; }

/* -----------------------------------------------------------------------------
 * Front page
 * ---------------------------------------------------------------------------*/ 
.frontpage_blogposts h2 { margin: 0; }
.index_blogpost
{
    overflow: hidden;
}
.index_blogpost .thumbnail {
    float: left;
    margin: 0.3rem 1em 0.3rem 0;
    padding: 0;
    width: 170px;
    min-width: 10rem;
    height: auto;
}
.index_blogpost .miscdetail {
    font-size: 80%;
    font-style: italic;
    float: right;
}
.index_blogpost p {
    margin: 0.5em;
}

.frontpage_comments h2 { margin: 0; }
.frontpage_comments
{
    width: 22rem;
    float: right;
    margin: 0 0 0 2rem;
    padding: 0.5rem 1rem ;
    background-color: rgba(200,200,200,.2);
    border-top:    solid 0.2rem burlywood;
    border-bottom: solid 0.2rem burlywood;
}
.frontpage_comments .commentline .author
{
    padding-left: 1rem;
    float: left;
}
.frontpage_comments .commentline .date
{
    float: right;
    font-size: 80%;
    font-style: italic;
    float: right;
}
.frontpage_comments .commentline
{
    overflow: hidden;
}
.frontpage_comments .pagetitle
{
    padding-top: 0.5rem;
    font-size: 80%;
}
.smallscreen { display: none; }
@media screen and (max-width: 50rem)
{
    .frontpage_comments { float: none; margin: 1rem auto; height: 10rem; overflow-y: scroll; }
    .metadata { display: none; }
    .smallscreen { display: block; }

}
@media screen and (max-width: 30rem)
{
    .miscdetail { display: none; }
    #headerbar .right { display: none; }
    .index_blogpost .thumbnail { width: 5rem; height: auto; min-width: 5rem;}
}