/*==================
Huge thanks to the creator of the msmtp site whose css I
have liberally pillaged and merged with my own! Over the
next year or so I will make it more my own but my debt remains...

Andrew Strong
October 4th 2021 
===================*/


/*===================
General body rules
===================*/

body {
    background: #ffffff;
    margin: 0;
    line-height: 1.5em;
    color: #333333;
    font-family: helvetica, arial, sans-serif;
/*    text-align: justify;*/
}

/*===================
Single column layout with the rules unmodified from the css of
the msmtp site so far. Note that this allows the 'nav' colour
and settings to spill across the entire viewport. Use of segment
is a little dodgy so I will work on that...
header section and footer section not used so far.
===================*/

nav section, header section, main, footer section {
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.5em;
}

/*===================
Navigation panel rules, unmodified: 
===================*/

nav {
    background: #333333;
    border-bottom: thin solid #111111;
    line-height: 3em;
}

nav a {
    margin-right: 1em;
}

nav a:link, nav a:visited {
    color: #cccccc;
}

nav a:hover, nav a:active {
    color: #ffffff;
    text-decoration: none;
}

nav .links {
	float: right;
}

/* @media screen and (min-width: 600px) {
    nav .links {
        float: right;
    }
}
*/

/* General heading and link rules, unmodified at the
moment from the css of the msmtp site. */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
    line-height: 1.2em;
    margin-top: 1em;
}

a:link, a:visited {
    color: #0000e0;
    text-decoration: none
}

a:hover, a:active {
    color: #0000ff;
    text-decoration: underline
}

/*===================
Rules for writing computer code
===================*/

/*Only used for code snippets within text. Larger 'boxes' now
provided for with <pre>. */

code {
	margin:0;
	padding:0;
	font-family:"Courier New", Courier, monospace;
	font-size:100%;
}

/*The following alteration of <pre> generates the 'codebox' look
that I had before and preserves the bottom border with overflow:auto.
Make sure to not use <pre> for any other purpose :-) */

pre {
    padding: 1em;
    border: 1px dashed silver;
    color: black;
    background-color: #f9f9f9;
    overflow: auto;
	font-family:"Courier New", Courier, monospace;
	font-size:90%;
}

/*  Used to show variables to be changed by the user in code blocks
outlined in pre ... */

.variable {
	font-style:italic;
	color: #FF0000;
	background-color: inherit;
	font-weight:bold;
}

/*===================
Blockquote Rules
===================*/

blockquote {
	border-left: 5px solid #ccc;
	padding-left: .5em;
	padding-right: .5em;
	background:none;
	}

/*===================
Indented list that I use for Bibliographies. Aim is to keep the
authors' names highlighted at different screen sizes using negative
text indent.
===================*/

#bibliography {
	margin-left:.75em;
	padding:0em .5em .75em 0em;
	}
#bibliography ul {
	list-style: none;
	margin-left: 0;
	padding-left: .25em;
	text-indent: -1em;
	}
#bibliography ul li {	
	background-image: none;
}

/*===================
Table Rules: Stolen from the Wiki table css and modifed
===================*/

table {
	margin: auto;
	color:#000000;
	background: #f9f9f9;
	border: 1px #aaa solid;
	border-collapse: collapse;
	/*margin-left: auto;
	margin-right: auto;*/
	font-size: 95%;
  }
table a:link {color:#00c; background: #f9f9f9;}
table a:visited {color:#551a8b;background:#f9f9f9;}
table a:active {color:#f00;background:#f9f9f9;}


th, td{
	border: 1px #aaa solid;
	padding: 0.5em;
}

th {
	color:#000000;
	background: #f2f2f2;
	text-align: center;
	/*padding: 0.5em;*/
}

caption {
	padding: 0 0.6em 0.8em;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	color: black; background: transparent;
}
tfoot td {font-style:italic;}

/*===================
Rules for the 404 and Troll page
===================*/ 
img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
/* The following caters for smartphone screens:*/
	max-width: 100%;
    min-width: 100px;
    height: auto;
} 

.centerwarning {
border: 4px solid #FF0000 ;
text-align: center;
/* The following 2 cater for smartphone screens:*/
min-width: 10em;
max-width: 80%;
margin: .5em auto .5em auto;
text-transform: uppercase;
font-size: 150%;
font-weight:bold;
padding: .25em;
} 

/*======================================
List Rules: Unordered / Ordered / Definition
======================================*/
ul {
  padding: .25em;
  margin: 0em 1.5em;
}
ul ul li {list-style-type:circle;}

ul ol li {list-style-type: lower-roman;}
/*This effect is used for the Homer page to differentiate
the nested list style-types. */

ol {list-style-type: decimal; padding-right:1.5em}
ol ol li {list-style-type: lower-roman;}

dl {
	margin: 0;
	padding: 0em 1.25em;
}
dt {
	margin: 0;
	padding: 0;
	font-size: 110%;
	font-weight: bold;
}
dd {
	margin: 0 0 .5em 0;
	padding: 0;
}

/* For the Troll /sock puppet pages */
dl.special {
	margin: 0;
	padding: 1em .5em .5em .5em;
}


/*======================================
Misc Rules
======================================*/

/* 500 is normal text, 700 is bold...*/

strong {
	font-weight:600;
}