/*
* every page has the same color background
*/
body {
    background: rgb( 76,76,76);
    padding: 0;
    margin: 0;
}
H2 {
    width: 50%;/**/
    font-size: 14pt;
    font-weight: bold; 
    border-width: 0px;
    background: rgb( 30,70,120 );
    color: white;
    padding: 2px 0 2px 8px;
    border-radius: 4px;
}
P, H2, H3, H4 { 
    font-family: arial,helvetica,sans-serif;
    color: white;
    margin-left: 0.25in;
}
P.Content {
    font-size: 12pt;
    font-weight: normal;
    margin-right: 0.25in;
    text-indent: 0.25in;
}
span.date {
    font-size: smaller;
}
a:hover {
    color: red;
}
a {
    color: rgb(80,180,250);
}
/*  The drop shadow technique used here for the img, including the
actual .png shadow images, are from the www.positioniseverything.net site.
The dropshadow article is under articles/sidepages/dropshadow.
I've made a slight change in floating the outerpair1 in order to get the
divs to wrap tightly to the images when in an enclosing div.
*/
.bbimage {
    float: left; /**/
    /* width: 200px; /**/
    /* height: auto; /**/
    margin-left: 0.25in; /**/
    margin-right: 0.25in; /**/
}
.outerpair1 {
    float: left;/**/
    position: relative;/**/
    background: url(../images/upperrightfade.png) right top no-repeat;
}
.outerpair2 {
    background: url(../images/lowerleftfade.png) left bottom no-repeat;
    padding-top: 8px;
    padding-left: 8px;
}
.shadowbox {
    background: url(../images/shadow.png) bottom right;
}
.innerbox {
    background: #F0F0F0;
    position: relative;
    padding: 0;
    margin: 0;
    left: -8px;
    top: -8px;
}
img {
    vertical-align: bottom;
}