/*
  At the top level I have defined a site-wide style sheet, and there is a
  sub-stylesheet for each section that overrides the color-specific styling.
  Each page references both stylesheets, the top-level one first.
*/

span {
}

div {
}

a:link img,
a:visited img,
a:hover img,
a:active img {
  padding: 2px;
  border: none;
  border-width: 1px;
}

body {
  margin: 0;
  font: 0.8em verdana, arial, sans-serif;
  text-align: center;
  color: #DDC;
  background: #333 url(../images/bg_body.jpg) repeat-y top center;
}

input {
  padding: 0;
  font-size: 0.9em;
}
select {
  margin-top: 4px;
  font-size: 1em;
}

h1 {
  font-family: verdana, sans-serif;
  font-variant: small-caps;
  color: #F08080;          /* light coral */
/*  color: #FA8072;          /* salmon */
/*  color: #FF82AB;          /* palevioletred1 */
/*  color: #FFA07A;          /* lightsalmon */
/*  color: #FF6A6A;          /* indianred1 */
/*  color: #E9967A;          /* darksalmon */
/*  color: #FF7F50;          /* coral */
/*  color: #FF7256;          /* coral1 */
}

a {
  color: #F08080;
}

ul, ol {
  margin: 0 0 0.5em;
}

/*****************************************************************************
  Outer wrapper div: centering, positioning, background, and basic formatting
 *****************************************************************************/

#wrapper {
  width: 90%;
  min-width: 800px;
  max-width: 1000px;
  margin: 0 auto 0;
  overflow: hidden;
  background: #444 url("../images/fampic_crop_1000.jpg") 50% -150px no-repeat;
}

/* This div is really inside the wrapper, but acts like it's part of wrapper */
/*  Wrapper div for individually positioned clickable divs - CSS image map   */
.clickmap {
  position: absolute;
  width: 90%;
  min-width: 800px;
  max-width: 1000px;
  margin: 0 auto;
  cursor: default;
}

/* divs nested inside the 'clickmap' div, and inside link tags */
.clickmap div {
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}

/* These are styled individually for each sheet */
#AmyLink {
  left: 215px;
  top: 165px;
  width: 80px;
  height: 100px;
}
#AmyLink:hover {
/*  border: purple 1px solid; */
  background: #444 url("../images/faces_lite_50.jpg") -146px -28px;
}
#JimLink {
  left: 95px;
  top: 160px;
  width: 80px;
  height: 100px;
}
#JimLink:hover {
/*  border: green 1px solid; */
  background: #444 url("../images/faces_lite_50.jpg") -26px -23px;
}
#AdrianLink {
  left: 150px;
  top: 260px;
  width: 80px;
  height: 100px;
}
#AdrianLink:hover {
/*  border: blue 1px solid; */
  background: #444 url("../images/faces_lite_50.jpg") -81px -123px;
}
#NattieLink {
  left: 163px;
  top: 420px;
  width: 80px;
  height: 100px;
}
#NattieLink:hover {
/*  border: orangered 1px solid; */
  background: #444 url("../images/faces_lite_50.jpg") -94px -283px;
}

/*****************************************************************************
  Header - top area: title etc.
 *****************************************************************************/

  #header {
    height: 36px;
    padding: 4px;
    text-align: left;
    background-color: transparent;
  }

/*****************************************************************************
  Title: page logo div
 *****************************************************************************/

    #title {
      clear: right;
      width: 300px;
      filter: alpha(opacity=80); -moz-opacity: .80; opacity: .80;
    }

      #title h1 {
        margin: 2px;
        padding: 0 8px;
        clear: both;
        text-align: center;
        font-size: 20px;
        font-variant: small-caps;
        font-weight: bold;
        font-family: cursive;
        background: #686868;
      }

/*****************************************************************************
  Main column: contains menu, corner, and text divs
 *****************************************************************************/

  #maincolumn {
    float: left;
    width: 465px !important; width: 500px;
    text-align: left;
  }

/*****************************************************************************
  Header Menu: at top of main column, above text div
 *****************************************************************************/

    #menu {
      float: left;
      width: 414px !important; width: 449px;
      padding: 0px 15px 0px 20px;
      height: 16px;
      text-align: center;
      background: #444;
    }

      #menu ul {
        padding: 0; margin: 0;
      }

        #menu ul li {
          display: inline;
          float: left;
          width: 80px;
          list-style: none;
          font-weight: bold;
          font-variant: small-caps;
          text-align: center;
        }

          #menu ul li a {
            width: 100%;
            display: block;
            margin: 0;
            text-decoration: none;
          }

          #menu ul li a:hover {
            font-weight: bold;
            color: #FFA07A;
            background-color: #686868;
          }

          #menu ul li a.active {
            font-weight: bold;
            background-color: #686868;
          }

    #maincorner {
      height: 16px; width: 16px;
      float: left;
      background: url("../images/topright.png") no-repeat right top;
    }
    
    #breadcrumb {
      float: left;
      width: 430px !important; width: 465px;
      padding: 10px 15px 0px 20px;
      font-size: 10px;
//      font-weight: bold;
      font-variant: small-caps;
      text-align: center;
      background: #444;
    }

      #breadcrumb a {
        text-decoration: none;
      }

        #breadcrumb a:hover {
          text-decoration: none;
          background-color: #686868;
        }

/*****************************************************************************
Text div: most of main column - text content area
*****************************************************************************/

    #text {
      clear: left;
      width: 465px;
      min-height: 400px;
      padding-bottom: 16000px;
      margin-bottom: -16000px;
      overflow: auto;
      line-height: 1.5em;
      background: #444;
    }

      #text p {
        margin: 10px 15px 10px 20px !important; margin: 10px 15px 0px 20px;
      }

      #text h1 {
        clear: both;
        margin: 25px 15px 10px 20px !important; margin: 25px 15px 0px 20px;
        font-size: 12px;
        line-height: 1.2em;
        background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
      }

        #text h1 span {       /* all necessary to get second rounded corner */
          display: block;
          padding: 2px;
          background: url(../images/rounded_br.gif) no-repeat bottom right;
        }

      #text a:visited {
        text-decoration: none;
        color: #F08080;
      }

      #text a:hover,
      #text a:active {
        text-decoration: none;
        color: #FFA07A;          /* lightsalmon (#FFA07A) looks appropriate here, with lightcoral (#F08080), if not exciting */
        background-color: #686868;
      }

#leftCurtain {
  float: left;
  width: 16px; height: 1006px;
  margin: 0 auto;
  background: url("../images/bottomleft.png") no-repeat right bottom;
}

#rightCurtain {
  float: right;
  width: 16px; height: 1006px;
  margin: 0 auto;
  background: url("../images/bottomright.png") no-repeat right bottom;
}


/*****************************************************************************
  Sidebar div: contains sideSpacer, sideCorner, and sideText divs
 *****************************************************************************/

  #sidebar {
    float: right;
    width: 160px !important; width: 195px;
 }

    #sideCorner {
      height: 16px; width: 16px;
      float: right;
      background: url("../images/topleft.png") no-repeat left top;
    }

    #sideSpacer {
      float: right;
      width: 109px !important; width: 144px;
      padding: 0px 20px 0px 15px;
      height: 16px;
      background: #444;
    }

    #sideText {
      clear: right;
      float: right;
      width: 160px;
      padding-bottom: 16000px;
      margin-bottom: -16000px;
      line-height: 1.5em;
      background: #444;
    }

      #sideText h1 {
        clear: both;
        margin: 15px 15px 10px 20px !important; margin: 15px 15px 0px 20px;
        font-size: 12px;
        text-align: right;
        line-height: 1.2em;
        background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
      }

        #sideText h1 span {       /* all necessary to get second rounded corner */
          display: block;
          padding: 2px;
          background: url(../images/rounded_bl.gif) no-repeat bottom left;
        }

      #sideText p {
        font-size: 10px;
        margin: 0 15px -10px 15px;
        text-align: right;
        line-height: 1.1em;
      }

/*****************************************************************************
Sidemenu: class for menu (link) items in sidebar
*****************************************************************************/

    .sideMenu {
      margin: 15px 15px 10px 20px !important; margin: 15px 15px 0px 20px;
      padding: 10px 0;
    }

      .sideMenu a {
        display: block;
        text-align: right;
        text-decoration: none;
        margin-bottom: 1px;
      }

      .sideMenu a span {
        display: block;
        padding: 1px;
      }

      .sideMenu a:hover {
        color: #FFA07A;
        background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
      }

      .sideMenu a:hover span {
        background: url(../images/rounded_bl.gif) no-repeat bottom left;
      }
      
      .sideMenu img {
        border: none;
      }

/*****************************************************************************
  wideContent div: div below text and sideText for wide page content
 *****************************************************************************/

  #wideContent {
    clear: both;
    width: 90%;
    min-width: 800px;
    max-width: 1000px;
    margin: 0 auto 0;
    padding-top: 0.1em;
    text-align: left;
    background: #444;
  }
  
    #wideContent p {
      margin: 10px 15px 10px 20px !important; margin: 10px 15px 0px 20px;
      padding: 10px;
    }

      #wideContent h1 {
        clear: both;
        margin: 25px 15px 10px 20px !important; margin: 25px 15px 0px 20px;
        font-size: 12px;
        line-height: 1.2em;
        background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
      }

        #wideContent h1 span {       /* all necessary to get second rounded corner */
          display: block;
          padding: 2px;
          background: url(../images/rounded_br.gif) no-repeat bottom right;
        }

/*****************************************************************************
  Footer div: bottom div on page
 *****************************************************************************/

  #footer {
    clear: both;
    width: 90%;
    min-width: 800px;
    max-width: 1000px;
    margin: -13px auto -10px !important;  margin: -13px auto 0;
    text-align: left;
    font: 0.8em Georgia, serif;
    background: #444;
  }
  
    #footer p {
      padding: 3px;
    }

/*****************************************************************************
  Table formatting
 *****************************************************************************/

table {
  text-align: center;
  margin: 10px auto 15px auto;
  padding: 0;
  border: #686868 1px solid;
  line-height: 1.2em;
}
th {
  background: #686868;
  color: #F08080;          /* light coral */
}
td {
  margin: 0;
  padding: 0;
  border: #686868 1px solid;
}


/*****************************************************************************
  Miscellaneous classes
 *****************************************************************************/

.date {
  display: block;
  font-weight: 700;
}

p span.author {
  display: block;
  margin-top: 5px;
  text-align: right;
  font-style: italic;
  font-size: 80%;
}