/* Stylesheet for RichardNeill.org */

/* Force it to 100% (or more) always */
html{ height:100%}

/* Body - generic, and for certain pages. Do set font-size: it keeps monospace vs proportional vs browser-defaults sane. */
body {height: 100%;  background:#FFFFE0; margin: 0; padding: 0; font-size: 10pt; font-family:  tahoma, verdana, sans-serif; color: #000;} 

hr{ color: #000; background: #000; height: 1px; border: none; }

/* Tables */

/* Outermost table has No border, and is forced to 100% high. (Note: the center row (tr.main) is also forced to 100% high, and vertical-aligned to top) */
table.outer { border-style: none; border-width: 0px; height:100%; width: 100%; border-collapse: collapse;}

/* Layout (structural) tables have NO border */
table.layout { border-style: none; border-width: 0px;  }

/* Top (Menu) Bar (td.header) has light blue background and black bottom-border. (Originally a tartan background) */
/* Bottom (Footer) Bar has light blue background, black bottom-border, transparent lower-border for spacing */
/* All three have 12px padding */
/* TR.main is 100% high. This forces header,footer to be constant height on all pages */
td.header { padding: 12px; background-color: #C0C0FF; border-bottom: 3px solid #000; /* background-image: url(images/macneil_tartan_weathered.jpg); */ }
td.footer { padding: 12px ; background-color: #C0C0FF; border-top: 2px solid #000; border-bottom: 2px solid transparent}
td.main { padding: 12px; vertical-align: top; }
tr.main { height:100%; }

/* Menu table has no border, and headers are left-aligned */
table.menu { border-style: none; border-width: 0px;}
table.menu th { text-align: left ; padding-left: 0px; padding-right: 20px }
table.menu td {padding-left: 10px; padding-right: 20px; vertical-align:top;}
table.menu ul { padding-left: 5px; margin: 0px;}

/* Technical data: solid blue exterior border, grey internal borders, collapse internal borders, 10px margin around table. */
table.technical { border-style: solid; border-width: 1px; border-color: #0000FF; border-collapse: collapse; margin: 8px}
table.technical th { border-width: 1px; padding: 5px; border-style: inset; border-color: #666688; }
table.technical td { border-width: 1px; padding: 3px; border-style: inset; border-color: #666688; }
table.technical tr.group {background: #FFFFAA }  /* background of row is coloured (pale yellow), to group the table */
table.technical tr.separator {background: #AAFFAA }  /* separator row (pale green) */
table.technical tr.highlightbg {background: #FFAAAA }  /* background  of row is coloured (pale red), to highlight it */


/* Humour: solid blue 2px border, 2px blue internal borders, collapse internal borders, 10 px margin around table. */
table.funny { border-style: solid; border-width: 2px; border-color: #0000FF; border-collapse: collapse; margin: 8px}
table.funny th { border-width: 2px; padding: 5px; border-style: inset; border-color: #0000FF; }
table.funny td { border-width: 2px; padding: 5px; border-style: inset; border-color: #0000FF; }

/* Link colours for ordinary links. Dotted underline becomes solid on hover. (Be careful of the order) */
a:link { color: #000099; text-decoration:none; border-bottom: dotted 1px #5050B4; }  /* Unvisited links - blue, light dotted underline */
a:visited { color: #086D2B; text-decoration:none; border-bottom: dotted 1px #408261; } /* Visited Links - green, light dotted underline */
a:hover { color: #000099; text-decoration:none; border-bottom: solid 1px }  /* Highlight (unvisited links) on hover - blue, blue underline */
a:visited:hover { color: #086D2B; text-decoration:none; border-bottom: solid 1px }  /* Highlight visited links on hover - green, green underline */
a:active, a:visited:active { color: #770000; text-decoration:none; border-bottom: solid 1px } /* Highlight on active - burgundy, solid underline */


/* Link colours for links in the menu and the footer. Hide link-history. Underline on hover only. Border-bottom transparent rather than none to prevent text re-flow */
/* Note: the footer uses td.menu whereas the header is table.menu */
table.menu a:link, table.menu a:visited, td.menu a:link, td.menu a:visited { color: #0000FF; text-decoration: none; border-bottom: solid 1px transparent}  /* Unvisited, visited links: light blue */
table.menu a:hover, td.menu a:hover { color: #0000FF; text-decoration: none; border-bottom: solid 1px }  /* Hover: dark-blue, underline */
table.menu a:active, td.menu a:active { color: #770000; text-decoration: none; border-bottom: solid 1px }  /* Active: burgundy (was dark-blue 084D2B;), underline */

/* CSS 3 cleverness to append the unicode character for right-up-arrow to external links (beginning http://). */
/*   a[href^="http"]:after { content: "\21D7"; color: #AC6667; }   Original version */
a[href^="http"]:not(.imgnolinkstyle):after { content: "\21D7"; color: #AC6667; }  /* Also, mustn't do this when the linked object is an image. */
a[href^="ftp"]:after { content: "\21D7"; color: #AC6667; }  /* Also for ftp */

/* Images don't get denoted as links in this style. Force this with important.  They also don't get right-up-arrow (see below)*/
a.imgnolinkstyle:link, a.imgnolinkstyle:visited, a.imgnolinkstyle:hover, a.imgnolinkstyle:active  {border-bottom: none !important}


/* Colours */
.highlight {font-weight: bold; color: #CC0000 }  /* red */
.error, .warning {font-weight: bold; color: #CC0000 }  /* red */
.explanation { font-size: 80%; color: #888 }/* small, grey */


/* <code>:  highlighting source-code - fixed-width text */
tt, pre, code { font-family: terminus, courier, monospace }
code {color: #221992; background: #FFFFFF; font-weight: normal; border-radius: 5px; padding: 1px 4px;} /* Font is dark blue, on white. Was: #A21922 on #FFFF99 */
/* div class="file" is a section of a file (i.e. special case of code with multiple lines). Encase in black dotted lines, with pale grey-blue background. Indent. Smaller font. */
.file { border: 1px dashed black; border-radius: 5px; background-color: #EEEEFF; margin: 15px 70px 15px 60px; padding: 5px 5px 5px 5px; font-size: 80% ;overflow: auto}  /* If too wide, add scrollbar for overflow */
/* If within <div class="file">, then: */
.file pre { margin: 3px; }         /* 1) reduce the margin around pre (which is usually a whole line) */
.file pre code { padding: 0px}     /* 2) remove the padding around <code> if within <pre>  (since it would otherwise apply line-at-a-time rather than to the block */
/* In fact, always remove the padding from <code> if it is within <pre>, since otherwise it causes only the first line to be indented. */
pre code { padding: 0px}



/* <li> within <ul|ol.spaced> have some separation. Instead of ending each with <br><br> */
/* IMPORTANT: these must be in descending order of spacing, so that we can nest a slightspaced inside a widespaced */
/* We use em rather than px, because these should be a fraction of the font size. 1 em is the m-height. i.e. not an entire line+spacing */
ul.extrawidespaced li, ol.extrawidespaced li {margin-top: 2em; margin-bottom: 2em}  /* approx 1.5 blank line   (originally 25px) */
ul.widespaced li, ol.widespaced li {margin-top: 1em; margin-bottom: 1em}  /* approx 1 blank line (originally 15px) */
ul.slightspaced li, ol.slightspaced li {margin-top: 0.3em; margin-bottom: 0.3em}  /* slightly more than nothing (originally 4px) */
ul.nospaced li, ol.nospaced li {margin-top: 0em; margin-bottom: 0em}  /* No extra spacing */

/* Photo float into top right with caption */
.floatright { float: right; margin: 0 0 15px 15px; border: 1px solid #666; padding: 0 0 2px 0; }  /* float photo in right hand side; make text wrap correctly */
.margintopdebork { margin-top: 0}  /* Remove the margin top border of the wrapped text that seems to appear as a result */

/* Text aligned right within parent element (on the *same* line) */
.rightalign { float:right; }

/* Text Alignments */
.alignright { text-align: right}
.alignleft { text-align: left}
.aligncenter { text-align: center}
.aligntop { vertical-align: top}
.alignmiddle { vertical-align: middle}
.alignbottom { vertical-align: bottom}

/* Quotes and attributions */
div.quote { background-color: #CCFFBB; border: solid 2px black; margin: 25px 10px 3px 10px; padding: 5px}  /* was #FFBAA3 */
div.attrib { text-align: right; margin: 0px 10px 10px 10px; padding: 3px 5px 5px 5px}


/* Page - specific stuff (which will only work in that page because it is a subset of body.class) */

/* Humour page */
.funny { font-family: 'Comic Sans MS', sans-serif; color: black }  /* comic sans font if possible */
.funny h1 { color: #FF0000; text-decoration: blink } /* red, flashing */
.funny h2 { text-decoration: underline; }

/* Macneil page */
body.macneil { background-image: url(images/macneil_tartan_desaturated2.jpg); } /* very pale tartan background */
.macneil .header{ border-bottom: 2px solid #000; background-image: url(images/macneil_tartan_desaturated.jpg); }  /* pale tartan background */
.macneil .footer { border-top: 1px solid #000; background-image: url(images/macneil_tartan_desaturated.jpg); } /* pale tartan background */

/* Stotbig page */
p.stotbig { margin:25px; padding: 10px; border: dotted 1px} /* Each paragraph goes in a box with a dotted border */

/*Thinkpad page.*/
.thinkpad h2 {margin: 45px 10px 30px 3px; padding: 5px 5px 5px 30px; border: solid 1px black; background-color: #C0C0FF; } /*same colour as top,bottom tables. Provides whitespace above.*/
.thinkpad .contentslink {text-align:right; font-size:small; margin: 35px 10px 3px 3px; padding: 5px 10px 3px 10px;}  /* provides link to contents AND vertical space above */
.thinkpad h2.aftercontentslink {margin: 3px 10px 30px 3px; padding: 5px 5px 5px 30px; border: solid 1px black; background-color: #C0C0FF; } /*no vertical space above: it's already done */
.thinkpad h3 {text-decoration: underline; color: #007700; margin: 30px 0px 20px 0px}  /*Dark-green; Also add a bit of extra vertical space above */
.thinkpad h4 {text-decoration: underline}

table.font-example { border-style: solid; border-width: 1px; border-color: #0000FF; border-collapse: collapse; margin: 8px}  /*table for font example*/
table.font-example th { border-width: 1px; padding: 5px; border-style: inset; border-color: #666688; }  /* Based on technical */
table.font-example td { background-color: #CCCCFF; text-align: center; border-width: 1px; padding: 5px; border-style: inset; border-color: #666688; }

/*Voip page */
.voip h2 {margin: 45px 10px 30px 3px; padding: 5px 5px 5px 30px; border: solid 1px black; background-color: #C0C0FF; }
.voip h3 {text-decoration: underline; color: #007700; margin: 30px 0px 20px 0px}  /*Dark-green; Also add a bit of extra vertical space above */
.voip h4 {text-decoration: underline; color: #990044 ; margin: 30px 0px 20px 0px}  /* Dark-green, extra vspace above */

/* Program pages (all created with Makefiles, intended to be portable.) */
body.program { padding: 10px 20px; }
/*End*/