/*This is the version with png and gif pins, with the former favoured by the !important rule*/

html 
{margin: 0; padding: 0;}

body 
{
 font-family: "Trebuchet MS", verdana, arial, sans-serif;
margin: 0; 
padding: 0;
background: #faf7cf url(matmap2.jpg) 0% 0px no-repeat;
color: black;}

div#overall
{margin: 0;
padding: 0;}

			/* LOGO AND LOGOPIN */

/*div#logo 
{position: absolute; 
top: 18px; 
left: 5%; 
width: 125px; 
height: 180px;
}

div#logo .pin {
margin-top: -20px;
background: url(greenpin.png) no-repeat top left !important;
background: url(greenpin.gif) no-repeat top left;
width: 10px;
height: 24px;}
*/

div.shadow1
{
background: #aaa /*#bbb*/;
/*border: 1px solid;
border-color: #ddd #ddd #ddd #ddd; softening effect of shadow, doesn't work too well, and creates fringe border probs*/
}

div.box
{
position: relative;
right: 1px;
bottom: 1px; /*these create the very slight drop shadow*/
border: 1px solid;
border-color: #ccc #555 #555 #ccc/*#bbc #555 #555 #cca*/;
}


div#logoshadow1 {
position: absolute;
margin: 0; 
padding: 0; 
top: 20px;
left: 6%;
/*border: 1px solid #ddd;*/
background: #bbb;
height: 180px; 
width: 125px;}

div#logoshadow2 {
position: absolute;
bottom: 1px;
right: 1px;
border: 1px solid #aaa;
background: #888;
height: 176px; 
width: 121px;}

div#logobox 
{background: #e5e0df url(logo2.gif);
position: absolute;
bottom: 1px;
right: 1px;
width: 125px;
height: 180px;
border: 1px solid;
border-color: #ccc #555 #555 #ccc;}





			/* GENERAL */

.pin
{
position: absolute;
left: 50%;
margin-top: -16px;
margin-left: 0px;}

div#logobox .pin
{background: url(bluesmallpin.png) no-repeat top left !important;
background: url(bluesmallpin.gif) no-repeat top left;
width: 30px;
height: 50px;}

h1 
{font-size: 200%;
text-transform: lowercase;
letter-spacing: 3px;
color: red;
margin: 0; 
padding: 0.5em 0 0.5em 16%;
border: 1px solid green;
}

/*h2
{
font-size: 1.2em;
color:#60f;
font-family: didot, "Apple Chancery", cursive;
letter-spacing: 1px;
margin: 0;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.3em;
text-align: center;
}*/

h2{ 
font-size: 1em;
        line-height: 1em;
        font-weight:900;
        color:#4949b8;
padding-left: 10px;
}


h3 
{font-size: 133%;
margin: 0; 
padding: 0 0 0 0.5em;
}

h4 
{font-size: 150%; 
font-family: verdana, arial, helvetica, sans-serif;
margin: 0; 
padding: 0.2em 0.6em 1.2em;
color: #4949b8;
text-align: center;
/*font-size:16px;*/
font-weight:bold;
       }

h1, h3, h4 
{line-height: 1em;}

p 
{line-height: 1.66; 
margin: 0.5em 2em 1em 2em;
font:11px/20px verdana, arial, helvetica, sans-serif;
padding:0px;
color: #402;
}



#main p
{text-indent: 1.5em;}

#main .lead
{text-indent: 0px;}



img.floatcap
{
float: left;
margin: 3px 3px 0px 1.4em;
}

li {
list-style: disc outside;
list-style-image: url(quill.gif);
color: #402;
font-size: 13px;
padding-bottom: 15px;
}



			/* MAIN CONTENT (CENTRE 'COLUMN')*/

div#main 
{margin: 260px 10% 1em 160px; /*lh side of jpg has now be trimmed by this 160 L margin dimension to make the 'washed' bg image line up*/
padding: 10px 20px 15px 20px;
background: #fefefe url(matmappale2.jpg) 0% 0px no-repeat;
border: 1px solid;
border-color: #ccc #666 #666 #ccc;
}


			/*PAGE SUBHEADING*/

div#pagesubhead 
{position: absolute; 
top: 37px; 
left: 31%; 
width: 35%; 
font-size: 11px; 
}

div#pagesubhead .pin {
margin-top: -30px;
background: url(greenpin.png) no-repeat top left !important;
background: url(greenpin.gif) no-repeat top left;
width: 10px;
height: 24px;}

div.shadow1
{
background: #aaa /*#bbb*/;
/*border: 1px solid;
border-color: #ddd #ddd #ddd #ddd; softening effect of shadow, doesn't work too well, and creates fringe border probs*/
}

div.box
{
position: relative;
right: 1px;
bottom: 1px; /*these create the very slight drop shadow*/
border: 1px solid;
border-color: #ccc #555 #555 #ccc/*#bbc #555 #555 #cca*/;
}

div#subheadbox
{
background-color: #b4d2fb;
padding: 15px 10px 0 15px;}


			/* TOP MENU */

div#topmenu 
{position: absolute; 
margin: 0;
padding: 0;
top: 30px; 
right: 4%; /*was 1% on front page*/
width: 20%; /*was 23% on front page*/
font-size: 11px;
z-index: 10;}

div#topmenubox
{background-color: #d7c1aa;
padding: 15px 10px 10px 10px;}

div#topmenu .pin
{margin-top: -31px;
background: url(redsmallpin.png) no-repeat top left !important;
background: url(redsmallpin.gif) no-repeat top left;
width: 12px;
height: 26px;}

			/* BOTTOM MENU */

div#bottmenu 
{position: relative; 
/*margin: 0;
padding-right: 0;*/
bottom: 180px;
left: 20px; 
width: 150px; 
font-size: 12px;
z-index: 10;}

div#bottmenubox
{background-color: #fcd;
padding: 15px 20px 10px 5px;}

div#bottmenu .pin
{
position: relative;
margin-top: -30px;
margin-left: 8px;
/*with this strange relative positioning I've had to use to put the menu in bott L corner for IE Win I can't put the pin in the b/g, it has to be in the html, so here the pin has to be the gif version*/}

/*div#bottmenu p
{margin: 0;
padding: 0;}*/


			/* ALL LINK CONTROLS */

a, a:link {
        color: #c33; /*controls color of links in content, not topmenu*/
        font-size:11px;
        text-decoration:none;
        font-weight:600;
        font-family:verdana, arial, helvetica, sans-serif;
text-indent: -10px;
        }

a:visited 
{
color: maroon;
} /*doesnt seem to do anything on IE, only Safari*/

a:hover 
{
background-color: red;
color: white;
}


div#topmenu a 
{display: block; 
padding: 1px 0px 2px 10px /*0px 0 2px 5px*/; 
margin: 0; 
background-color: #d7c1aa;
color:#800000;}

div#topmenu a:link.current, #topmenu a:visited.current  
{
color:#8389fa;
}

div#topmenu a:hover 
{
background-color:#800000; 
color:#d7c1aa;
}

div#topmenu a:hover.current 
{
background-color:transparent; 
color:#8389fa;
cursor:default;
}

div#topmenu h4 
{background: rgb(70%,70%,55%); 
color: black; 
margin: 0; 
padding: 0.25em 0 0 0.5em;
border-width: 0;}


div#bottmenu a 
{display: block; 
padding: 1px 0px 2px 10px/*seems to need this L padding for hover highlight to work - weird*/; 
margin-left: 0px; 
margin-right: 10px;
color: red;
font-size: smaller;}

div#bottmenu a:link.current, #bottmenu a:visited.current  
{
color:#666;
}

div#bottmenu a:hover 
{
background-color: red; 
color: #fcd;
}

div#bottmenu a:hover.current 
{
background-color:transparent; 
color:#666;
cursor:default;
}