/* Moved kicker into SectionHead to improve the vertical alignment.

Set this style sheet to be screen and do a print one, too.
If you set a font size on the body... 
 */

/* "warm brown"  154, 97, 80.
 County Cork 216,201,192
 126,96,63
 At Color Scheme 38 degrees 58% 55%
 Cool brown 33 degrees, 24%, 45% 115, 99, 87
*/

/* styles for date, blog heading would be h3?, subhead

BODY {background-color: rgb(255,255,255);
color:rgb(38,35,32);}

testing Baja orange
H1 {background-color:rgb(195,91,57);
color:rgb(255,255,255);
padding:.5em;} */

body {background-color:#fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:normal;
color:rgb(38,35,32);
}

/* A {text-decoration: none;} */
a:link {color:inherit;
background-color:inherit;}

/* :visited {color: rgb(152,157,172); */
:visited {color: rgb(80,80,102);
background-color:inherit;
text-decoration:none;}
a:hover {color: inherit;
background-color: inherit;
text-decoration: underline;}
:active {color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);}



h1, h2, h3, h4, h5 {margin-bottom:.2em;
}

h1 {font-size:22px;
line-height:24px;}

h2 {font-size:16px;
line-height:18px;}

h3 {font-size:14px;}

h4 {font-size:12px;}

h5 {font-size:11px;}

#Content P {/* font-family:verdana, sanserif; */
font-size:11px;	
line-height:18px;
text-indent:2em;
color:rgb(38,35,32);
margin-top:0em;
margin-bottom:0em;
}

/* P:first-child {text-indent:10em;} this doesn't work unless the P follows a div. We can use h1 + p for this... */



#Content P.fl {text-indent: 0;}

#Header {position:absolute;
font-size:10px;
top:5px; /* top and left are relative to the containing block: the body */
left:6px;
width:74em;
height:10em;
clear:both;
font-size:10px;
/* background-color:rgb(115, 99, 87); */
background-color:rgb(115, 99, 87);
background-image:url(../img/merecat.jpg);
background-repeat:no-repeat;
background-position:top left;
z-index:1;
}

#Menu {position:absolute;
top:9.9em; /* top and left are relative to the containing block: the body */
left:6px;
width:74em;
clear:both;
font-size:10px;
/* font-family:Verdana; */
font-weight:bold;
/* background-color:rgb(38,35,32); */
background-color: rgb(115, 99, 87);
/* padding-top: .5em; */
/* padding-bottom: .5em; */
z-index:7;
}

#Menu ul {display:block;
padding:0;
margin:0 auto;
list-style-type: none;
text-align:center;
padding-top: .5em;
padding-bottom: .5em;
margin-left: auto;
margin-right: auto;
}
/* To get a true 1-pixel border, the list items cannot be separate paragraphs. */
#Menu li {
/* #Menu li * doesn't work in IE causing stairstepping floats */
/* don't think I can display "inline" and "marker" at the same time */
float:left;
/* position:relative; */

color:rgb(220,212,207);
background-color:rgb(38,35,32);
/* padding-top: .5em; */
/* padding-bottom: .5em; */
border-left:1px rgb(115, 99, 87) solid;
/* padding-left:1.2em; */
/* padding-right: 1.2em; */
}

#Menu li:first-child {display:inline;
border-left:0;}

/* HAVE to set the A tag */

#Menu a {
float:left;
color:rgb(220,212,207);
background-color:rgb(38,35,32);
padding-top: .5em;
padding-bottom: .5em;
/* border-left:1px rgb(115, 99, 87) solid; */
padding-left:1.2em;
padding-right: 1.2em;
text-decoration:none;
}

#Menu ul li a:hover { color: rgb(220,212,207);
background-color: rgb(115, 99, 87);
}

#Menu li.Selected {
/* float:left; may not be necessary */
color:rgb(38,35,32);
background-color:rgb(152,157,172);
padding-top: .5em;
padding-bottom: .5em;
padding-left:1.2em;
padding-right: 1.2em;
}

#Menu ul li.SelectedLink a {
/* float:left; may not be necessary */
color:rgb(38,35,32);
background-color:rgb(152,157,172);
padding-top: .5em;
padding-bottom: .5em;
padding-left:1.2em;
padding-right: 1.2em;
}

#Menu ul li.SelectedLink a:hover { color: rgb(220,212,207);
background-color: rgb(115, 99, 87);
}

#SectionHead {position:absolute;
top:12.5em; /* top and left are relative to the containing block: the body */
left:6px;
width:74em;
/* height:2em; */
clear:both;
/* font-family:Verdana; */
font-size:10px;
font-weight:bold;
/* background-color:rgb(220,212,207); */
background-color:rgb(152,157,172);
color:rgb(38,35,32);
padding-top: .5em;
padding-bottom: .5em;
padding-right:0;
border-bottom:1px white solid;
z-index:8;
}

/* Attributes shared by SubMenu and Links */
#SubMenu, #Links {position:absolute;
top:14.7em;
width:16em;
/* default colors */
color:rgb(220,212,207);
background-color:rgb(115,99,87);
z-index:3;}

/* SubMenu attributes that affect all levels or are universal */
#SubMenu {left:6px;
}

#Links {left:58.6em; /* was 56em; */
}

/* SubMenu list attributes that are universal */
/* This removes the bullet and indenting */
#SubMenu ul, #Links ul {list-style-type:none;
margin:0;
padding:0;
}
/* Try setting width on ul, display inline on ul li and block on ul li a
width and height on ul li a makes the whole block clickable */

/* default list item. Padding shared; color, border should apply only to unlinked Level 2 */
#SubMenu li {display:block;
color:rgb(38,35,32);
background-color:rgb(152,157,172);
text-indent:1em; /* this works if line doesn't wrap */
line-height: 16px; /* this works better than top and bottom padding, */
/* except that lines won't wrap right */
padding:0;
border:0;
width:16em;
font-weight:bold;
/* padding-top:.3em; */
/* padding-bottom:.3em; */
/* padding-left:1em; adds 1 em for each nested level! */
border-top:1px rgb(38,35,32) solid;
}

/* should apply to all SubMenu anchors */
#SubMenu a, #Links a {display:block;
text-decoration:none;
/* padding is not inherited from li */
/* padding-top:.3em; */
/* padding-bottom:.3em; */}



/* Level 2, link */
#SubMenu li a {
color:rgb(220,212,207);
background-color:rgb(78,69,64);
}

/* Level 3, unlinked */
#SubMenu li li {
color:rgb(38,35,32);
background-color:rgb(152,157,172);
/* background-color:rgb(115,99,87); */
border:0;
padding:0;
text-indent:1.5em;
line-height: 15px;
/* padding-left: .5em; */
}

/* Level 3, link */
#SubMenu li li a {
color:rgb(220,212,207);
background-color:rgb(115,99,87);
border:0;
padding:0;
text-indent:1.5em;
line-height: 15px;
/* padding-left: .5em; */
}

/* Level 4, unlinked */
#SubMenu li li li {
text-indent:2em;
line-height: 15px;
color:rgb(38,35,32);
background-color:rgb(152,157,172);
/* padding-left: .5em; */
}

/* Level 4, link */
#SubMenu li li li a {
text-indent:2em;
line-height: 15px;
/* padding-left: .5em; */
}

/* should apply to all SubMenu anchors, but doesn't work
Must come after a:link, otherwise second nested UL doesn't hover */
#SubMenu li a:hover, #SubMenu li li a:hover, #SubMenu li li li a:hover {
background-color:rgb(38,35,32);}

/********** LINKS **********************/

/* text-indent and line-height determine the shape of the block 
affected by hover, but these work against wrapping lines */

/* Level 1 unlinked, as in a heading */
#Links li {
color:rgb(220,212,207);
background-color:rgb(115,99,87);
/* color:rgb(38,35,32); */
/* background-color:rgb(152,157,172); */
line-height: 11px; /* so wrapped lines are tight */
font-weight:bold;
border:0;
padding:0;
padding-top:.3em;
padding-bottom:.3em;
padding-left:.5em;
text-indent:0; /* so wrapped lines are left-aligned */ }

#Links li a {
color:rgb(220,212,207);
background-color:rgb(115,99,87);

font-size:11px;
font-weight:normal;
border:0;
padding:0;
/* padding-top:.3em; */
/* padding-bottom:.3em; */
padding-left:.5em;
text-indent:0em;}

#Links li li a  {display:block;
color:rgb(220,212,207);
background-color:rgb(115,99,87);

font-weight:normal;
border:0;
padding:0;
/* padding-top:.3em; */
/* padding-bottom:.3em; */
padding-left:1em;
text-indent:0;
}


#Links li a:hover, #Links li li a:hover {
background-color:rgb(38,35,32);}



/* Links P unlinked headings should be like Level 1 SubMenu, darker brown...
Unlinked Links list items should be blue */
#Links P {font-weight:bold;
color:rgb(220,212,207);
background-color:rgb(78,69,64);
line-height:18px;
text-indent:0;
margin:0;
padding-left: .5em;
padding-bottom:.2em;
border:0;
border-top:1px rgb(38,35,32) solid;}


/* this is the first text on the page, so should be first in the flow. In IE it is way off to the right.
Seems correct in IE if top and left are zero. Maybe the em is not being calculated based on the font size I specified. That seems to be the case. Changing the default size of IE causes the "em" to be recalculated.
top:130px;
left:150px;
em seems to work in IE if position is absolute... need further testing.
 */
#Content {position:absolute;
/* top:16em; */
top:16em;
left:17.7em;
width:40em;
background:transparent;
/* background:#F7F7F2; */
height:auto;
/* font-family:verdana, sanserif; */
font-size:10px;	
line-height:18px;
color:rgb(38,35,32);
voice-family: "\"}\"";
voice-family:inherit;
}

#Content p.date {/* font-family: Arial, Geneva, sans-serif; */
font-size: 10px;
font-weight: bold;
background-color:rgb(152,157,172);
color:rgb(255,255,255);
line-height: 14px;
text-indent: 0;
text-align: left;
margin-top:2em;
padding:.2em;
}

/* case where date becomes an anchor because of "name" */
#Content p.date a {font-size:inherit;
text-decoration:none;}

#Kicker {position:absolute;
top:.4em;
left:15.6em;
width:56em;
font-size:11px;
font-weight:normal;
color:rgb(78,69,64);
/* left:14.1em; */
/* width:40em; */
/* height:2em; */
/* clear:both; */
color:rgb(78,69,64);
/* font-family: Verdana, Arial, Geneva, sans-serif; */
background:transparent;
margin:0;
padding:0;
z-index:9;
}

/* full-width images */
#Content img {float:left;
clear:both;
padding-top:.7em;
padding-bottom:.5em;}

#Content img + p {clear:both;}

#Content P.caption {
clear:both;
color: rgb(102, 51, 0);
background-color: inherit;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-indent: 0px;
text-align: left;
margin-top: .4em;
margin-bottom: .6em;}

#Content img.r {/* display:block; */
float:right;
clear:right;
font-size:10px;
margin:0;
padding:1em;
padding-top:.4em;
padding-right:0;}

#Content P.captionr {float:right;
clear:right;
color: rgb(102,51,0);
background-color:inherit;
font-size:10px;
font-weight:normal;
line-height:13px;
text-indent:0px;
text-align:left;
margin:0;
padding:0;
padding-bottom:.6em;
padding-left:1em;}

#Content img.r + p {clear:none;}

#Content img.r + p.captionr {clear:right;}

/* don't know why I need #Content, I guess because I already have #Content P */
#Content * + p {text-indent:0;}
#Content p.date + p {text-indent:0;}
#Content p + p {text-indent:2em;}

#Content li, #Content a {font-size:11px;}

#Content P.rsidebar {position:absolute;
left:38em;
top:0em;
width:15em;
/* margin:1em; */
line-height:14px;
border:1px black solid;
padding:1em;
color:rgb(220,212,207);
background-color:rgb(69,73,90);}

#Content P.lsidebar {position:absolute;
left:0;
top:0;
width:12em;
text-indent:0;
line-height:14px;
border:1px black solid;
padding:1em;
color:rgb(220,212,207);
background-color:rgb(69,73,90);}

#Content pre.rpg {width:47em;
/* color: rgb(36, 216, 48); */
/* background-color: rgb(0, 0, 0); */
color:rgb(38,35,32);
background-color:rgb(220,212,207);
font-family: "Courier New",monospace;
font-size: 12px;
line-height:12px;
padding:1px;}

#Content blockquote p {font-size: 11px;
line-height: 15px;
text-indent:2em;
text-align: left;}

#Content blockquote p:first-child {text-indent:0;}

#GalleryWrapper {position:relative; /* must be positioned so "left" will work */
/* width of the photo, so title is right-aligned */
left:.1em;
top:.1em;

/* border-bottom: 1px #BBBBBB solid;  the border won't work unless there is some content other than divs in this div */
/* margin-bottom:.5em; */

font-size:10px;
background-color:#DDDDDD;}

.dummy {clear:both;
font-size:10px;}

#GalleryPhoto {position:relative;
left:.1em;
padding-top:1em;
font-size:10px;}

.NavGallery2 {float:left;
padding-top:.3em; /* to align the baseline with PhotoTitle */
width:11em;

/* text-align:left; */
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
padding-left:.5em;
/* text-indent:0em;

margin-top:.6em;
margin-bottom:.1em; */
color:#999999;
background-color:#DDDDDD;}

.PhotoTitle {float:right;
color:#000000;
background-color:#DDDDDD;
text-align:right;
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 13px;
font-weight: bold;
padding-right:.5em;}

/* photo title; use with an H3, it adds italic */
#Content h3.pTitle {font-size: 13px;
font-weight: bold;
line-height: 14px;
color: rgb(115,99,87);
color:rgb(38,35,32);
background:transparent;
text-align:left;
margin:0;
margin-top: 14px;
padding:0;
padding-bottom:.5em;}

/* photo description; use with P */
#Content TD P.pDesc {font-size: 11px;
line-height: 13px;
text-indent:0;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

#Content P + P.pDesc {
text-indent:12px;}

/* photo technical info; use with P */
#Content P.pTech {font-size: 11px;
background-color: rgb(204, 204, 204);
line-height: 13px;
text-indent: 0px;
text-align: left;
padding-left: 3px;
padding-bottom:3px;}

/* old styles for testing */

/* photo description; use with P */
#Content P.pDesc {font-size: 11px;
line-height: 13px;
text-indent: 12px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

/* photo technical info; use with P */
.pTech {font-size: 11px;
background-color: rgb(204, 204, 204);
line-height: 13px;
text-indent: 0px;
text-align: left;
padding-left: 3px;
padding-bottom:3px;}

div.thumb {position:relative;
font-size:10px;
background:transparent;
font-size:10px;
width:39em;
}

#Content div h3 {font-size: 13px;
font-weight: bold;
line-height: 14px;
color: rgb(115,99,87);
color:rgb(38,35,32);
background:transparent;
text-align:left;
margin:0;
margin-top: 14px;
padding:0;
padding-bottom:.5em;
padding-top:1em;
clear:both;}

#Content div.thumb img {float:left;
font-size:10px;
margin:0;
padding:0;
border:0;
border-right:1.2em white solid;
}

#Content div.thumb ul {float:left;
font-size:10px;
width:18em;
list-style-type:none;
padding:0;
margin:0;
border-left:1px rgb(95,99,109) dotted;
border-top:1px rgb(95,99,109) dotted;}

#Content div.thumb li {font-size: 10px;
color:rgb(95,99,109);
line-height: 12px;
text-indent: 0px;
text-align: left;
padding-left:4px;
padding-top:3px;}

#Content div.thumb p {font-size: 11px;
line-height: 14px;
text-indent:0;
text-align:left;
margin-top:0;
margin-bottom:0;
padding-top:.5em;
clear:both;}

/* Level 1 indent */
#Content P.codeAS {font-family: Geneva, Arial, sans-serif;
color: rgb(0, 0, 0);
background:transparent;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-indent: 36px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}

/* Level 2 indent */
#Content P.codeAS2 {font-family: Geneva, Arial, sans-serif;
color: rgb(0, 0, 0);
background:transparent;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-indent: 56px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;}