/*
=============================================================================
This style sheet, together with the others listed in ....
defines colours and fonts in the website.
You should use this rather than using font or style tags in the individual pages.
A is any hyperlink.
A:link is an unvisited link.
.banner is a custom style used for the banner at the top of each page
.nav is a the style used for the navigation page (index.htm)
Helvetica is a font family; it will appear as Arial on a Windows machine,
and (I think) something equally appropriate on a Linux or Mac machine.
Note font size 0.8em comes out as 10pt on the default "medium" setting
in Internet Explorer.
The difference is that font sizes expressed as ...em are relative sizes,
and can be adjusted via the browser.
Note at present I have 0.8em defined against which means e.g.
H3 is 1.4 x 0.8 = 1.1em
(changing it to specify 0.8em against and
elements only would mean
too much reformatting of my existing pages)
=============================================================================
*/
a {
font-weight: bold;
}
a:link {
color: #780032; /* normal link*/
}
a:visited {
color: #484848; /* visited link */
}
a:hover {
color: #ce0000;
}
a:active {
color: #ce0000;
}
a:focus {
color: #ce0000;
}
body {
background: #555555; /* surroundings "behind" the page: dark grey*/
font-family: helvetica;
color: #000000;
margin: 0;
/*font-size: 0.8em; */ /* note it would be better to define font size on P only, but this means too much change*/
font-size: 80%; /* using a percentage here produces a more consistent result between browsers */
}
h1 {
font-size: 1.8em;
color: #780032;
}
h2 {
font-size: 1.6em;
color: #000000;
}
h3 {
font-size: 1.3em;
color: #000000;
}
h5 {
font-size: 1.0em;
color: #000000;
}
th {
/*font-size: 0.8em;*/
color: #000000;
text-align: left;
font-weight: bold;
}
td {
color: #000000;
}
ul li {
padding-top:0.4em; /* ensure all lists are spaced a bit*/
padding-bottom:0.4em; /* ensure all lists are spaced a bit*/
}
img {
border:none;
}
.wholepagewidth {
width: 950px;
background: #ffffff;
margin: auto;
padding-bottom: 5px; /*white space at bottom before grey starts*/
margin-top:0px;
}
#banner {
padding-top:5px; /* without this, you get a grey line at top of page (because img padding is outside banner I think) */
padding-bottom: 0px; /* without this, you get grey line at top of page */
border-style:solid;
border-color:#780032; /* colour of line under banner */
border-bottom-width: 8px;
border-top-width:0;
border-left-width:0;
border-right-width:0;
border-top-width:0;
/*margin-bottom: 0px;*/
}
#banner_right {
padding-left: 186px; /* padding-left stops text wrapping round below picture */
padding-bottom: 0px;
margin-bottom: 0px;
}
#banner_left { /* make left hand side of banner large enough for an image 181px wide plus 5px padding */
float: left;
width: 186px;
padding-bottom: 0px;
margin-bottom: 0px;
}
#banner_left img {
border: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left:5px;
}
#banner_footer {
clear: both; /* without this, the banner affects the layout of subsequent elements on the page */
padding-bottom: 0px;
margin-bottom: 0px;
}
#banner h1 {
/* this defines the size, font and colour of the banner at top of each page */
font-size: 28px; /* make the font an absolute size, not a relative size */
font-weight: bold;
color: #780032;
text-align : right;
margin-top: 5px; /* to position writing near top */
padding-bottom: 0px;
margin-bottom: 0px;
padding-right: 20px;
}
.you_are_here {
font-size: 1em; /* for "you are here" */
display:block; background:#EDEBE9; color:#000; text-decoration:none; padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px;
padding: 5px;
}
#pageWithMargin { /* layout for single-column pages (mostly the old pages) */
margin-left: 20px;
margin-right: 20px;
}
#navpane {
width: 150px; /* width of menu navigation panel */
float: left;
padding-top: 0px;
}
#mainpage { padding-left: 150px; /* the bit of page to right of menu; padding-left makes space for the menu panel at the left side*/
background: #FFFFFF;
}
#columnLeft { /* all the text within mainpage is within columnLeft*/
padding-right: 310px; /* padding-right stops it wrapping round pictures*/
margin-right: 50px; /* margin-right gives a space between text and pictures*/
}
#columnRight { /* defines a right-hand column within mainpage, to contain pictures of up to 300px wide */
float: right;
width: 310px;
}
#columnRight img { margin-bottom: 3px; /* space between picture and caption */
border: 0;
}
#columnRight p { /* defines format of the captions under the images */
margin-top: 0px;
font-size: 0.9em; /* defines font for captions*/
margin-bottom: 30px; /* space before next picture */
padding-right: 10px;
}
#homepage_footer {
clear: both;
}
#mainpage_footer {
clear: both;
}
#footer_left {
padding-right: 170px; /* padding-right stops text wrapping round below picture */
padding-bottom: 0px;
margin-bottom: 0px;
}
#footer_right { /* make right hand side of footer large enough for the "share this" image */
float: right;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: right;
margin-right:3px;
}
.addthis_overridden_style { /* force the "addthis" buttons to be right-justified */
float: right;
}
#footer_end {
clear: both;
padding-bottom: 0px;
margin-bottom: 0px;
}
.light_table table {border-collapse:collapse;} /* collapse means it only puts a 1px border instead of doubling up */
.light_table .odd {background:#edebe9;
}
.light_table td, .light_table th {
border-style:solid;border-width:1px;border-color:#aaaaaa;
padding:7px;
}
.shaded_box {border-style:solid;
border-width: 1px;
border-color: #aaaaaa;
background:#edebe9;
padding: 10px;
margin-top:15px;
margin-bottom:15px;
}
.shaded_box_bold {border-style:solid;
border-width: 1px;
border-color: #aaaaaa;
background:#edebe9;
padding: 10px;
margin-top:15px;
margin-bottom:15px;
font-size:1.2em;
font-weight:bold;
}
.shaded_box_volunteer {border-style:solid;
border-width: 1px;
/*color: #780032;*/
border-color: #aaaaaa;
background:#edebe9;
padding: 0px;
margin-top:15px;
margin-bottom:15px;
font-size:1em;
font-weight:bold;
}
.simple_box {border-style:solid;
border-width: 1px;
border-color: #555555;
padding: 10px;
margin-top:5px;
margin-bottom:5px;
}
/* nav_quote is a fiddle to get round the fact that padding-top on nav_quote didn't give me a space.
I have no idea why it works. */
.nav_space {
padding-right: 20px;
margin-bottom: 0px;
}
.nav_quote {
padding-left: 10px;
padding-right: 20px;
padding-top: 0px;
margin-top: 0px;
font-style:italic;
color: #780032;
}
/* This next bit is for accessibility..
/* This definition for "skipnav" class is lifted directly from the wca page; high-contrast; don't change this to fit into colour scheme */
/* This text only appears if user tabs on to it (focus) - otherwise it is at position minus 1000 */
.skipnav {position: absolute; display: none; text-align: left; margin: 0; padding: 0} /*For all, including Opera. Display:none used to switch off the skip links for Opera users (it's redundant, Opera has excellent keyboard navigation)*/
* html .skipnav {display: block} /*Switch on for IE6 and below*/
*+html .skipnav {display: block} /*Switch on for IE7 and above*/
:root .skipnav {display: block} /*Switch on for Moz, FF and Safari*/
.skipnav {margin: 5px 0 0 0; padding: 0; position: absolute; font-size: 2em}
.skipnav a {width: 15em; display:block; color: #fff; background: #333; text-decoration: none; padding: 5px; position: absolute; left: -1000em; top: 0; font-weight: bold}
.skipnav a:visited {color: #fff}
.skipnav a:focus, .skipnav a:active {z-index: 99; top: 0em; left: 0; border: solid #777 2px; color: #fff; background: #333} /*Note IE bug that requires use of :active to mimic effect of :focus*/
.skipnav a:hover {cursor: default} |