/*
Style sheet by Iain Murray 2002-20
http://www.iainmurray.net

Intended for screen media only with some tweaks for display on small screens
(phones). Mess with printing and you're asking for trouble.
Include in HTML 4.0 like this:
<LINK rel="stylesheet" type="text/css" media="screen" href="new.css">

I used to include hacks to support Netscape 4.
I think that Netscape 4 has now totally disappeared.

When I was originally looking at style sheets I read:
http://diveintoaccessibility.org/
http://www.w3.org/TR/WCAG10-CSS-TECHS/
http://www.realworldstyle.com

I used #4686c2 in links and rules for a long time, but accessibility checkers said contrast too low.
#4686c2 -> #3975ac
*/

body {
/*color : #000000;
background-color : #ffffff; */
color : #242424;
background-color : #FDFDFD;
}

a:link { color: #3975ac; }
a:visited { color: #505050; }
a:hover { color: #0000ff; background-color: #eeeeee;}

.content {
/* background-color: White; */
font-family: 'Myriad Pro', 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
/* font-family: Georgia, serif; */
text-align: left;
padding-left: 2ex;
max-width: 41em;
/* I used to think full justification on webpages was cool, but without decent
 * hyphenation and better layout it can be really bad.*/
text-align: left;
}
.content h1:first-of-type { margin-top: 2ex; }

.keeptogether { white-space:nowrap; }
@media only screen and (max-width:480px) {
.content { padding-left: 0; }
.content h1:first-of-type { margin-top: 0 !important; }
.keeptogether { white-space:normal; }
}

/*
.content p {line-height: 1.4;}
.content li {line-height: 1.4;}
*/
.content p {line-height: 1.5;}
.content li {line-height: 1.5;}

.content h1 {
/* font-family: Verdana, sans-serif; */
font-family: 'Myriad Pro', 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
border-bottom : 2px solid #3975ac;
font-size : 150%;
background : #eeeeee;
margin-top: 3ex;
}

.content h2 {
font-family: Verdana, sans-serif;
font-size : 110%;
border-bottom : 2px solid #3975ac;
margin-top: 3ex;
}

.content h3 {
font-family: Verdana, sans-serif;
font-size : 100%;
border-bottom : 1px solid #3975ac;
margin-top: 3ex;
}

.content h1:target { background-color : #ccccff; }
.content h2:target { background-color : #ccccff; }
.content h3:target { background-color : #ccccff; }

.content .footer {
text-align: right;
font-size: 80%;
color: #575757;
margin: 0;
padding-bottom: 0;
}

.content .footnote {
font-size: 80%;
color: #575757;
padding : 4ex;
}

.content hr{
/* Yes, this is (or was) all needed to get a coloured rule to work
simultaneously in IE, Netscape and Opera. */
color : #3975ac;
background-color : #3975ac;
height : 2px;
border: 0 solid #3975ac;
}

.content .caption {
font-style : italic;
background-color : #d4d4f9;
border : 1px solid #ffffff;
font-style : normal;
margin : 2ex;
padding : 2ex;
}
/* Keep contrast up */
.caption a:link {
color: #204560;
}

abbr {
border-bottom: 1px dotted black;
text-decoration: none;
}

p.nav {
text-align: right;
font-size : 80%;
}

span.red {
color: #ff0000;
}

li {
text-align: left;
margin-top: 0.2em;
}

.spaced li {
margin: 0.9em 3em 0em 1em;
}

form.printHide {
margin-bottom: 2ex;
}