/*This stylesheet sets the style for the menu of parishes on the parish links page.*/

div.paroeciae ul{
margin:0;
padding:0;
width:90%;
}
/*This list-style-type declaration takes away the underline from the links*/
div.paroeciae li{
margin: 0;
padding: 0;
border: none;
list-style-type: none;
}
/*Displaying the a elements as a block is important so that the whole block is 
coloured, not just the text itself. Here we also set the grey square at the left
- it is simply a coloured border 20 pixels wide.*/
div.paroeciae a{
display: block;
text-decoration: none;
width: 100%;
margin:0;
padding: 2px 0 2px 5px;
border-style: solid;
border-width: 1px 5px 0 20px;
border-color: #000 #CCC #000 #CCC;
}
/*The hover pseudo-class is the crucial one here. The colours of the link text, 
background and border are all declared - but they are different from the normal
<a> element above - so hovering the mouse makes the whole thing change colour*/
div.paroeciae a:active {color: #F03;}
div.paroeciae a:hover {color: #309;}
div.paroeciae a:hover {
background-color: #CCC;
color: #b22222;
border-style: solid;
border-width: 1px 5px 0 20px;
border-color: #000 #b22222 #000 #b22222;
}

/* These two items make sure that there is a thin line underneath the last item*/
li.last a{
border-style: solid;
border-width: 1px 5px 1px 20px;
border-color: #000 #CCC #000 #CCC;
}

li.last a:hover {
border-width: 1px 5px 1px 20px;
border-color: #000 #b22222 #000 #b22222;
}
/*This sets the formatting for the "New!" text - it can look like a button but
without the need to use an image.*/
span.new{
float:right;
background-color:#b22222;
color:#fff;
font-weight:bold;
padding:0 10px 0 10px;
margin:0 5px 0 0;
border-style:solid;
border-width:2px;
border-color:#222 #222 #555 #555;
}