/*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: #fffbf4/*#fdfbf2 #fff3ea*/ url(lontavern.gif) 0% 78px no-repeat;
color: black;}

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

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 #777 #777 #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;}

h4 
{font-size: 150%; 
font-family: verdana, arial, helvetica, sans-serif;
margin: 0; 
padding: 0.2em 0.2em 1.2em;
color:  maroon;
text-align: center;
font-weight:900;
}

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

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

.captionl
{background: url(larrow2.jpg) no-repeat 0px 8px;
float: left;
margin-left: 0px;
padding-left: 0px;
line-height: 23px;
font-size: 10px;
font-weight: bold;
color: #a03a5e;
}


.captionr
{/*unfortunately arrow image has to be in markup, inline, to make Safari work without a huge gap between text and arrow*/
float: right;
margin-right: 5px;
padding-right: 0px;
line-height: 23px;
font-size: 10px;
font-weight: bold;
color: #a03a5e;
}

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

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

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

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

div#main 
{margin: 330px 10% 1em 160px;
padding-top: 10px;
padding-bottom: 5px;
background: white;
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;
}

img.nofloat 
{
clear: both;
}

img.nofloatleft 
{
clear: left;
}

img.nofloatright 
{
clear: right;
}

.floatleft
{
float: left;
}

.nowrapleft
{
clear: left;
}

.nowrapright
{
clear: right;
}

.nowrap
{
clear: both;
}

.quote 
{
background-color:#ffffee;
color: #bb0000;
display: block;
width: 48%;
padding: 12px 15px 8px 17px;
margin-top: 0px;
margin-left: 10px;
margin-right: 2%;
border: outset 1px #dbb;
font-family: 'Times New Roman', Georgia, Times, serif;
font-weight: normal;
font-size: smaller;
line-height: 22px;
text-indent: 0px;
}

.centrequote
{margin-left: 23%;
display: block;}

.rightblock
{
float: right;
width: 65%;
padding: 12px 15px 8px 17px;
margin-top: -3px;
margin-left: 10px;
margin-right: 8%;
}

blockquote
{
border: outset 1px #dbb;
background-color:#ffffee;
color: #00b;
font-size: 90%;
font-weight: normal;
font-family: 'Times New Roman', Georgia, Times, serif;
line-height: 24px;
text-indent: 0px;
}



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

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

			/* TOP MENU */

div#topmenu 
{position: absolute; 
margin: 0;
padding: 0;
top: 30px; 
right: 4%;
width: 20%;
font-size: 11px;
z-index: 10;}

div#topmenubox
{background-color: #ffe1e4;
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; 
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*/}


			/* 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: #ffe1e4;
color: maroon;}

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

div#topmenu a:hover 
{
background-color: maroon; 
color:#ffe1e4;
}

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: white;
}

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