/*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: #faf5ea url(police.gif) 0% 75px no-repeat;
color: #333;}

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

			/* LOGO AND LOGOPIN */

div.shadow1
{
background: #aaa;
/*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%;
height: 180px; 
width: 125px;}

div#logoshadow2 {
position: absolute;
bottom: 1px;
right: 1px;
border: 1px solid #bbb;
background: #888;
height: 178px; 
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: white;
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 0.5em/*20px*/;
font:11px/20px verdana, arial, helvetica, sans-serif;
padding:0px;
color: #b40202;
font-weight: 600;
}



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

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



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

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



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

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

img.lfloat
{
float: left;
margin: 5px 15px 15px 23px;
}

img.rfloat 
{
float: right;
margin: 12px 20px 15px 10px;
}



			/*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;
/*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;
}

div#subheadbox
{
background-color: blue;
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: #fdcdd9;
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;}


			/*CSS VALID LOGO*/

div#cssvalid 
{position: absolute;
top: 300px; 
right: 10%; 
width: 85px; 
height: 30px;
font-size: 11px; 
}


div#cssvalid .pin
{position: absolute;
left: 38px;
top: 0px;
background: url(bluesmallpin.png) no-repeat top left !important;
background: url(bluesmallpin.gif) no-repeat top left;
width: 18px;
height: 21px;
line-height: 1em;}


			
			/*PINBOARD - DESIGNER NOTICE*/

div#pinboard 
{position: absolute; 
top: 310px; 
left: 12px; 
width: 185px; 
height: 280px;
background: url(pinboard.png) no-repeat !important;
background: url(pinboard2.gif) no-repeat;
font-size: 11px; 
z-index: 10;}

div#pinboardbox
{
position: relative;
width: 130px;
margin: 22px 0 0px 17px;
border: 1px solid;
border-color: #aaa #555 #555 #aaa;
padding: 10px 8px 18px 8px;
background: #fcf4d8;
z-index: 10;
}

div#pinboardbox p
{line-height: 1.5em;
margin: 0px 0px 0px 3px;
padding-top: 1.2em;
padding-bottom: 0em;
color: purple;
text-align: center;
font-size: smaller;
z-index: 10;
}

div#pinboardbox .pin
{margin-left: -7px;
margin-top: -8px;
padding: 0px;
background: url(drawpin.png) no-repeat top left !important;
background: url(drawpin.gif) no-repeat top left;
width: 48px;
height: 86px;
}

div#csslogo
{
position: absolute;
padding-bottom: 0px;
top: 175px;
left: 19px;
z-index: 20;
}

div#csslogopin
{
position: absolute;
top: -18px;
left: 44px;
background: url(redsmallpin.png) no-repeat top left !important;
background: url(redsmallpin.gif) no-repeat top left;
width: 12px;
height: 26px;
z-index: 40;}

div#note
{
position: absolute;
top: 35px;
left: 25px;
width: 120px;
border: 1px solid;
border-color: #aaa #555 #555 #aaa;
padding: 5px 0px 0px 0px;
background: #d2eaf8;
z-index: 20;
}

div#note p
{line-height: 1.5em; 
margin: 0px 0px 0px 0px;
padding: 0px 5px 5px;
color: blue;
font-size: smaller;
font-weight: 300;
text-align: center;
}

div#notepin
{
position: absolute;
top: -17px;
left: 58px;
background: url(bluesmallpin.png) no-repeat top left !important;
background: url(bluesmallpin.gif) no-repeat top left;
width: 12px;
height: 26px;
z-index: 30;
}

			/* 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: #fdf5c8;
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: blue; /*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: #fefbf2;
color: red;
}


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

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

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

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: #830606/*#56e*/;
font-size: smaller;}

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

div#bottmenu a:hover 
{
background-color: #830606; 
color: #fdf5c8;
}

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

div#pinboard a
{
display: block; /*seems to need this to make both link items work on Safari, but not on IE*/
color: #c00388;
font-size: 1em;
padding-left: 5px;
margin: 0;
text-align: center;
}

div#pinboard a:hover
{
background-color: transparent; 
color: red;
cursor: default;
}