body, html {
background: #ffffde;
color: #003300;
font-family: sans-serif;
font-size: 100%;
font-weight: normal;
margin-left: auto;
margin-right: auto;
/* max-width: 40em; Using column-width instead */
width: 95%;
}
h1,h2,h3,h4,h5,h6 {
color: #0099ff;
background: #ffffaa;
border: solid thin #ffee00;
font-style: italic;
margin-top: 2em;
margin-bottom: 0.1em;
margin-left: -2%;
padding-left: 1%;
letter-spacing: 0.05em ;
text-shadow: #88eeff 0.2em 0.2em 0.2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-o-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-box-shadow: 0.3em 0.3em 0.3em #88eeff;
-moz-box-shadow: 0.3em 0.3em 0.3em #88eeff;
-o-box-shadow: 0.3em 0.3em 0.3em #88eeff;
box-shadow: 0.3em 0.3em 0.3em #88eeff;
/* shiny button effect for webkit only */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fffff0), to(#ffffcc),color-stop(0.3, #feff44));
}
/* Reduce the top margin from the regular heading settings closer to the top of the page. Remove the padding. Align the text to the centre of the block. Georgia is the only common web font I know that includes text figures for numerals. Their numerals are lower case. */
h1 {
font-family: georgia, serif;
font-style: normal;
font-weight: normal;
margin-top: 0.5em;
padding-left: 0;
text-align: center;
}
/* h2 is a different colour, as is its shadow. */
h2 { color: #ff4444;
font-family: georgia, serif;
text-shadow: #ffaaaa 0.2em 0.2em 0.2em;
-webkit-box-shadow: 0.3em 0.3em 0.3em #ffaaaa;
-moz-box-shadow: 0.3em 0.3em 0.3em #ffaaaa;
-o-box-shadow: 0.3em 0.3em 0.3em #ffaaaa;
box-shadow: 0.3em 0.3em 0.3em #ffaaaa;
}
/* If a h2 is followed immediately by an h3, make the top margin smaller by using an adjacent sibling selector. Same for h1 followed by h2. */
h2 + h3 {margin-top: 1.5em; }
h1 + h2 {margin-top: 1.25em; }
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.25em;
margin-bottom: -0.75em;
margin-left: auto;
margin-right: auto;
word-spacing: normal;
letter-spacing: normal;
}
/* We indent the second and subsequent paragraphs in each article */
p + p { margin-top: 0.75; text-indent:1em }
blockquote { margin: 1em; }
dt { font-weight: bold;}
/* Make Superscripts line spacing smaller? */
sup { line-height: 0.7em;}
/* Select the first letter in the first child of a div. Drop cap first letter in a serif font for extra character. Plus small-caps for the first line. Enough typography experiments. */
h3 + div > p:first-child:first-letter { float: left; font-size: 200%; font-family: georgia, serif; line-height: 1em; margin-bottom: 0.2em; margin-right: 0.1em; }
h3 + div > p:first-child:first-line { font-variant: small-caps; font-weight: bold; text-transform: uppercase;}
/* Style our links with special colour for internal, external, ftp or mailto. Repeat to allow for specificity. The more specific a selector, the more important. */
a:link {color: #00ff00;}
a[href^="http://"], a[href^="https://"] {color: #8888ff; }
a[href^="ftp://"] {color: #880000; }
a:visited {color: #88ff88; }
a[href^="http://"]:visited, a[href^="https://"]:visited {color: #4488ff; }
a[href^="ftp://"]:visited {color: #882222; }
a:hover, a[href^="http://"]:hover, a[href^="https://"]:hover, a[href^="ftp://"]:hover
{color: #0000ff; }
a[href^="mailto"]:hover:after { content: " > " attr(title); }
a:active, a[href^="http://"]:active, a[href^="https://"]:active, a[href^="ftp://"]:active
{color: #ff0000; }
/* Style our links specially in heading 1 */
h1 a:link {color: #0066ff; text-decoration: none; }
h1 a:visited {color: #0066ff; text-decoration: none;}
h1 a:hover {color: #0000ff; }
h1 a:active {color: #ff0000; }
/* We need our heading one spans to display as blocks on separate lines. However I do not wish to use a self closing tag like a break */
h1 span { display: block; }
/* Provide bold san-serif arrows for previous and next links via generated content in heading one */
h1 span a { font-family: sans-serif; }
h1 span a:hover {font-weight: bold; }
h1 a[rel="prev"]:before { content: attr(title) ; }
h1 a[rel="next"]:after { content: attr(title) ; }
/* Pad our arrows away from the year and month in heading one. */
h1 span a { padding-right: 5%; }
h1 span a+a { padding-left: 5%;
padding-right: 0;
}
/* Put the word Date: before each date in each h2 using generated content */
h2:before { content: "Date: "; display: inline; }
/* Multiple columns by default (not available in Opera) , but see media query below */
div.article {
-o-column-width: 20em;
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-width: 20em;
-o-column-gap: 2em;
-moz-column-gap: 2em;
-moz-column-fill: balance;
-webkit-column-gap: 2em;
column-width: 2em;
text-align: justify;
}
/* Style nav div */
div.nav {
color: #0099ff;
background: #ffffaa;
margin-top: 2em;
margin-bottom: 2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-o-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-box-shadow: 0.3em 0.3em 0.3em #88eeff;
-moz-box-shadow: 0.3em 0.3em 0.3em #88eeff;
-o-box-shadow: 0.3em 0.3em 0.3em #88eeff;
box-shadow: 0.3em 0.3em 0.3em #88eeff;
}
/* A div is a more semantic element for navigation than is a paragraph - a list may be more so */
div.nav div { text-align: center; }
div.nav div:before { content: "Month: " }
div.nav div+div:before { content: "Date: "; }
div.nav div+div+div:before { content: " "; }
/* Style each page navigation for I am here. Make it look unlike a link also. */
body.january a.jan, body.february a.feb, body.march a.mar, body.april a.apr, body.may a.may, body.june a.jun, body.july a.jul, body.august a.aug, body.september a.sep, body.october a.oct, body.november a.nov, body.december a.dec
{ color: #ff0000; text-decoration: none; cursor: default; }
/* Use media query to set narrow displays like iPhone to one column. Set images as blocks outside paragraphs rather than floating inline within a paragraph */
@media only screen and (max-width: 480px) { /*
div.article {
-moz-column-count: 1;
-o-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
*/
body, html { width: 100%; }
div.article { padding: 5px; }
img,object {
margin: 10px;
float: none;
display: block;
max-width: 100%;
}
}
/* Use media query to set extra wide displays to three or four columns (not available in Firefox until 3.1. Increase the width of text to suit. This was dumb! I should have used column-width
@media only screen and (min-width: 1200px) {
div.article {
-moz-column-count: 3;
-o-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
body, html {
max-width: 70em;
}
p {
max-width: 70em;
}
}
@media only screen and (min-width: 1500px) {
div.article {
-moz-column-count: 4;
-o-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
body, html {
max-width: 100em;
}
p {
max-width: 100em;
}
}
*/
/* Use attribute selectors to target the extension of a file name. Pad the link right. Then put an appropriate icon in the background of the link */
a[href*=".au"] {background: url(images/australia_flag_icon.png) right center no-repeat;
padding-right: 20px; }
a[href$=".doc"] {
background: url(images/doc_icon.png) right center no-repeat;
padding-right: 20px;
}
a[href$=".mov"] {
background: url(images/qt_icon.png) right center no-repeat;
padding-right: 20px;
}
a[href$=".mp4"] {
background: url(images/qt_icon.png) right center no-repeat;
padding-right: 20px;
}
a[href$=".odt"] {
background: url(images/odf_icon.png) right center no-repeat;
padding-right: 20px;
}
a[href$=".pdf"] {
background: url(images/pdf_icon.png) right center no-repeat;
padding-right: 20px;
}
/* We do not want this No IE icon in headings, so only work within article class */
.article a[href$=".xhtml"] {
background: url(images/noie_icon.png) right center no-repeat;
padding-right: 20px;
}
/* Find any h2 followed by a div - for fault finding only */
h2+div { color: red; }