@charset "utf-8";
/*
Syntax highlighting.
http://alexgorbatchev.com/SyntaxHighlighter/
*/
@import url('../js/sh/styles/shThemeDefault.css');
/*
TO DO - Totally separate the basics, the colours and the layout into three separate concepts.
Then I can more easily mix-and-match colours into different layouts, if I ever do layout changes.
*/
div.logo_dark {
display: none;
}
div.logo_default {
}
div.header {
min-width: 13em;
max-width: 1000px;
margin: 4em auto;
margin-top: -0px;
margin-bottom: -55px;
padding: 1em;
overflow: auto;
}
div.float-left {
float: left;
}
div.top-t0 {
white-space: nowrap;
/*
Since my image is 96px, I create three lines. The top is a
, the second is the name, the third is the tagline.
96/3 = 32
I struggled at length to have the name and tagline next on top of one another and bottom-aligned, but this seems impossible without inelegant solutions.
*/
line-height: 32px;
}
div.top-t0 img {
float: left;
}
div.top-t1 {
display: inline;
font-size: 1.5em;
margin-right: -0.3em;
}
div.top-t2 {
display: inline;
font-size: 1em;
}
div.top-t3 {
display: block;
font-size: 0.5em;
}
div.float-right {
float: right;
text-align: right; /*this will align it right for IE*/
margin: 0 0 auto 0; /* ?? this will align it right for Mozilla*/
}
/*
Search box
*/
div.float-right input {
text-align: right; /*this will align it right for IE*/
margin: 0 0 auto 0; /* ?? this will align it right for Mozilla*/
}
div.toc {
text-align: left !important; /*this will align it right for IE*/
margin: 0 auto 0 0 !important; /* ?? this will align it right for Mozilla*/
}
/*
Used mainly for the table of contents.
*/
p.hidden { display: none; }
p.unhidden { display: block; }
/*
The central text area, not the top and not the footer.
*/
div.main {
max-width: 1000px;
margin: 4em auto;
margin-bottom: -50px;
padding: 1em;
}
div.footer {
/*
The footer text doesn't line up with paragraphs above, because paragraphs are usually in header-sections, which have a small margin/indent.
*/
max-width: 1000px;
margin: 4em auto;
padding-left: 2em;
/*
In-page anchors, like the table of contents, don't properly hop to links at the bottom of the document. The user is expecting the anchor to show the content at the top of the page. So I create padding at the bottom of the page. The downside is that the scroll bar will appear with all documents, even small ones where it normally wouldn't.
This amount is probably good enough except for very strange screen resolutions, text sizes or other madness. Making this number any bigger would make the scroll grab area uncomfortably small for many pages. I don't know who's smart idea it was to make that grab area change size.
*/
margin-bottom: 100em;
}
body table {
border-collapse: collapse;
}
body table caption {
margin-left: inherit;
margin-right: inherit;
}
/* replaced by the syntax highlighter:
body code,
*/
body pre {
padding: 4px;
}
body tt {
padding-left: 4px;
padding-right: 4px;
}
body hr {
width: 100%;
border: 0;
height: 1px;
}
body hr.small {
text-align: left; /*this will align it left for IE*/
margin: 0 auto 0 0; /*this will align it left for Mozilla*/
width: 25%;
}
body h1 {
margin-bottom: -5px;
text-indent: 20px;
}
body h2 {
margin-bottom: 5px;
text-indent: 20px;
}
body h3 {
margin-bottom: 5px;
text-indent: 20px;
}
body h4 {
margin-bottom: 5px;
text-indent: 20px;
}
body h5 {
margin-bottom: 5px;
text-indent: 20px;
}
body h6 {
margin-bottom: 5px;
text-indent: 20px;
}
body a.h-link {
display: none;
}
/*
--
Funky anchor links within headers ( etc)
--
*/
body h1:hover a.h-link,
body h2:hover a.h-link {
/*
This was added to avoid an issue with the bottom border jumping around when this new different-font-item is unveiled.
*/
display: inline;
}
body h3:hover a.h-link,
body h4:hover a.h-link,
body h5:hover a.h-link,
body h6:hover a.h-link {
display: inline;
}
/*
Paragraphs within headers.
*/
body div.p1 {
padding-left: 10px;
}
body div.p2 {
padding-left: 10px;
}
body div.p3 {
padding-left: 10px;
}
body div.p4 {
padding-left: 10px;
}
body div.p5 {
padding-left: 10px;
}
body div.p6 {
padding-left: 10px;
}
/*
TODO: Manual Lists
*/
body div.list-number {
text-indent: -1.4em;
padding-left: 2.4em;
}
/*
@charset "utf-8";
*/
/*
steelblue = #4682b4
lightsteelblue = #b0c4de
*/
/*
Everything
*/
a {
/*
color: #b0c4de;
*/
background-color: inherit;
text-decoration: none;
}
a:visited {
/*
color: #4682b4;
*/
background-color: inherit;
}
a:hover {
/*
color: #b0c4de;
*/
background-color: #D3D3D3;
}
a:hover:visited {
color: inherit;
background-color: #D3D3D3;
}
div.main p a.new, ul a.new, li a.new, td a.new {
color: inherit;
background-color: inherit;
}
div.main p:hover a.new, ul:hover a.new, li:hover a.new, td:hover a.new {
color: red;
background-color: inherit;
}
div.main p:hover a.new:visited, ul:hover a.new:visited, li:hover a.new:visited, td:hover a.new:visited {
color: #8B0000;
background-color: inherit;
}
/*
Borders on image-links has to be the stupidest idea ever.
*/
a img{ border: 0; }
body {
color: black;
background-color: #D3D3D3;
}
div.header {
border: 1px solid #4682b4;
color: inherit;
background-color: white;
/*
Mozilla/Firefox-based browsers only, since there's no proper standard for this.
I'll be damned if I'm going to screw around with the "solutions" for rounded corners. Hackish nested divs, images and javascript? No way.
Besides, everyone else simply ignores these tags and displays a "good enough" normal corner. No harm done.
*/
-moz-border-radius: 10px;
-moz-padding-start: 30px;
}
div.top-t1 {
color: #4682b4;
background-color: inherit;
}
/*
Search box
*/
div.float-right input {
color: black;
background-color: #f7f7f7;
font-size: 10px;
border: 1px #4682b4 dashed;
}
/*
The central text area, not the top and not the footer.
*/
div.main {
border: 1px solid #4682b4;
color: inherit;
background-color: white;
/*
Mozilla/Firefox-based browsers only.
*/
-moz-border-radius: 10px;
-moz-padding-start: 30px;
}
div.footer {
color: black;
background-color: inherit;
}
div.footer a {
color: inherit;
background-color: inherit;
}
body table {
margin: 1em 1em 1em 0;
color: inherit;
background: #f7f7f7;
border: 1px #aaaaaa solid;
}
body table td {
border: 1px #aaaaaa solid;
padding: 0.2em;
}
body table th {
color: inherit;
background: #d0d0d0;
text-align: center;
}
/* replaced by the syntax highlighter:
body code,
*/
body pre,
body tt {
border: 1px #4682b4 dashed;
color: inherit;
background: #f7f7f7;
}
body hr {
height: 1px;
border: 0;
color: inherit;
background-color: #4682b4;
}
body h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
border-top: solid #4682b4 thin;
border-bottom: solid #4682b4 medium;
color: inherit;
background-color: #f2f2f2;
}
body h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
border-top: solid #4682b4 thin;
border-bottom: solid #4682b4 thin;
color: inherit;
background-color: #f8f8f8;
}
body h3 {
border-top: solid #D3D3D3 thin;
border-bottom: solid #D3D3D3 thin;
color: inherit;
background-color: #f8f8f8;
}
body h4 {
border-top: solid #D3D3D3 thin;
border-bottom: solid #D3D3D3 thin;
color: inherit;
background-color: #f8f8f8;
}
body h5 {
border-top: solid #D3D3D3 thin;
border-bottom: solid #D3D3D3 thin;
color: inherit;
background-color: #f8f8f8;
}
body h6 {
border-top: solid #D3D3D3 thin;
border-bottom: solid #D3D3D3 thin;
color: inherit;
background-color: #f8f8f8;
}
/*
--
Funky anchor links within headers ( etc)
--
*/
body a.h-link {
}
body h1 a.h-link,
body h2 a.h-link {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
font-size: 0.5em;
}
body h3 a.h-link,
body h4 a.h-link,
body h5 a.h-link,
body h6 a.h-link {
font-size: 0.5em;
}
/*
Paragraphs within headers.
*/
body div.p1 {
}
body div.p2,
body div.p3,
body div.p4,
body div.p5,
body div.p6 {
border-left: 1px dashed #b0c4de;
}