/* ============================================================================

  CKMS PTSA Web CSS Stylesheet

  Hi! If you're groveling through here trying to figure out why the page is
  rendered poorly in your browser, drop me a line at web@ckmsptsa.org and let
  me know what you're seeing.


    Current Color Palette:

      Base      : #880000
      Secondary : #e0dada
      Tertiary  : #554466
      Background: #eeeeee

============================================================================ */

  div.redalert {
    margin: 0 4em;
    background: #f0f0e4;
    border:     solid 4px #dd2200;
    padding:    0 1em;
  }

  div.redalert h1 {
    text-align: center;
    color:      #dd2200;
    font-variant: small-caps;
  }

/* === Main Page Layout Styles === */

    BODY { margin:      0 0 20% 0;
         /*font-family: Georgia, Times New Roman, Times, serif;*/
         /*font-family: Times New Roman,Times,serif;*/
         /*font-family: Palatino Linotype,Book Antiqua,Palatino,Georgia,Times New * Roman,Times,serif;*/
           font-family: Calibri,Tahoma,Arial,Helvetica,sans-serif;
           color:       black;
           background:  #eeeeee;
           font-size:   100%;
         }

    DIV.wholepage { background:     #ece8dd;
                    text-align:     left;
                    padding-bottom: 2em;
                  }

    DIV.limited_width { max-width: 44em; }


/* === Overall Page Structure === */

    /* See prologue.html and epilogue.html for common boilerplate sections. */

    DIV.underbanner   { max-width: 60em; }
    TABLE.underbanner { }

    TD.navpane {   padding: 0 0 0 0ex;
                   width: 22ex;
                   margin: 0;
                   vertical-align: top;
               }

    TD.pagebody {
      padding:        1em 0ex 0 0ex;
      vertical-align: top;
    }


/* === Standard Generic Elements === */

    /* These styles set the default formatting for the following elements. */

    BLOCKQUOTE { font-style: italic; }

    DT { margin-top: 1em; font-size: 100%; font-weight: bold; }
    DD { margin-left: 2em; font-family: Times, Serif; }

    HR { border-bottom: solid;
         color:         #880000;
         height:        0.20em;
         margin-top:    0;
       }

    IMG { border: none; }
    LI  { margin-bottom: 0; }
    P   { margin-top: 0.75em; }
    TD  { vertical-align: top; }
    TH  { vertical-align: bottom; }


/* === Image Styles === */

    IMG.NewsLeft   { float: left;  margin: 0 2ex .5ex 0; }
    IMG.NewsRight  { float: right; margin: 0 0 .5ex 2ex; }
    IMG.floatLeft  { float: left;  margin-right: 2ex; margin-bottom: 0.5em; }
    IMG.floatRight { float: right; margin-left:  2ex; margin-bottom: 0.5em; }

    IMG.vmid       { vertical-align: middle; }
    IMG.vbott      { vertical-align: bottom; }


/* === Masthead Styles === */

    TABLE.masthead { background: #880000;
                     border:     none;
                   }

    TD.masttitle {
      background:    #880000;
      text-align:    left;
      padding-left:  1.5ex;
    }

    TD.photobanner { background-image:  url("../images/banner.jpg");
                     background-repeat: repeat-x;
                     background-color:  #880000;
                     height: 100px;
                   }


/* === Standard Header Styles === */

    /* The H5 and H6 headers are as yet unused. Flag them in odd color for now,
    ** so that they're styled correctly when introduced.  */

    H1, H2, H3, H4, H5, H6
    {   font-family: Candara,Georgia,Palatino Linotype,Palatino,Times New Roman,Times,serif;
        color:       #880000;
    }

    H1, H2, H3, H4
    {   font-weight:   bold;
        margin-bottom: 0.5em;
    }

    H1 { font-size: 170%; }
    H2 { font-size: 140%; }
    H3 { font-size: 110%; }
    H4 { font-size: 100%; margin-bottom: -0.5em; text-decoration: underline;}
    H5 { font-size: 100%; font-style: italic; font-weight: bold; }
    H6 { font-size: 100%; font-style: italic; }

    H2.tight { margin-top: 0; }

    .withbyline { margin-bottom: 0; }



/* === News Item Styles === */

    H2.NewsItem { margin-top: 0.25em; margin-bottom: 0; }
    H3.NewsItem { margin-top: 1em; margin-bottom: -0.5em; font-size: 100%; }

    P.NewsSub {
        margin-top:  0;
        color:       #880000;
        font-family: Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-size:   90%;
        font-weight: bold;
    }

    P.timestamp {
        margin-top:       2em;
        margin-bottom:    0;
        background-color: #880000;
        color:            #eeeeee;
        padding:          1px 1em 1px 0;
        font-size:        70%;
        font-family:      Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-weight:      bold;
        text-align:       right;
        clear:            both;
    }


/* === Hyperlink Styles === */

    A { font-weight: bold; text-decoration: none; }

    A:link    { color: #111199; }
    A:visited { color: #660066; }
    A:active  { color: #11aa11; }
    A:hover   { color: #11aa11; }

    A:link    SPAN.button, A.navbar:link,
    A:visited SPAN.button, A.navbar:visited { color: #eeeeee; }
    A:active  SPAN.button, A.navbar:active,
    A:hover   SPAN.button, A.navbar:hover   { color: yellow;  }



/* === Events Box Styles  === */

    TABLE.upcoming_events {
        background:    #e0dada;
        border-bottom: solid 0.4ex #880000;
        border-left:   solid 0.4ex #880000;
        border-right:  solid 0.4ex #880000;
        margin-top:    0.5em;
        margin-bottom: 0;
        width:         100%;
    }

    TABLE.upcoming_events TH {
        text-align:     center;
        color:          #eeeeee;
        background:     #880000;
        padding:        0.4ex 0;
        font-family:    Myriad Web, Verdana, Arial, Helvetica, sans-serif;
    }

    TABLE.upcoming_events TD {
        border-bottom: .4ex solid #a59f72;
        padding:    1ex;
        font-size:  75%;
    }

    TABLE.upcoming_events DL { margin: 0; }

    TABLE.upcoming_events DT {
        margin-top:  0em;
        font-family: Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-size:   100%;
        font-weight: bold;
    }

    TABLE.upcoming_events DD {
        margin-left: 1em;
        font-family: Times New Roman, Times, serif;
        font-size:   100%;
    }

    TABLE.upcoming_events DD.noschool {
        color:        #cc1100;
        font-weight:  bold;
        font-variant: small-caps;
    }

    DIV.ptsalogo {
      text-align: center;
      border:     0.4ex solid #880000;
      margin:     0.5em 0;
      width:      100%;
    }



/* === Navigation Left Box === */

    TABLE.navbox {
        background: #e0dada;
        margin-top: 0.5em;
        border:     solid 0.4ex #880000;
        width:      100%;
    }

    P.navlpar {
        margin-left:   1em;
        margin-right:  1em;
        margin-top:    0.25em;
        margin-bottom: 0.25em;
        text-align:    right;
        font-size:     80%;
        font-weight:   bold;
        font-family:   Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        white-space:   nowrap;
    }



/* === Navigation Bar Styles === */

    TABLE.navbar {
        color:        white;
        background:   #880000;
        font-family:  Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-size:    80%;
    }

    TD.navbar {
        font-size:      95%;
        font-family:    Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        background:     #880000;
        color:          white;
        padding-left:   3ex;
        padding-right:  0.5ex;
        vertical-align: middle;
    }


/* === Miscellaneous Paragraph Styles === */

    P.backtotop { text-align: right; font: 80% Arial; }
    P.byline    { font-style: italic; font-size: 90%; margin-top: 0; }
    P.nolead    { margin-top: 0;      }

    P.leftboxtitle {
        text-align:  center;
        font-family: Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size:   90%;
        color:       #e0dada;
        margin:      0;
    }

    P.moreline {
        text-align: right;
        font-style: italic;
        font-size:  100%;
    }

    .embox {
        background: #e0dada;
        padding:    .25em .5em;
        border:     solid 4px #880000;
    }

    P.quote-attrib {
        margin-top:   -1em;
        margin-right: 8ex;
        text-align:   right;
    }



/* === Standard Generic Styles === */

    .altbackg      { background: #e8d888; }
    .HeaderColor   { color: #880000; }
    .HeaderInvert  { color: #eeeeee; background: #880000; }
    .inverseColors { color: #eeeeee; background: #880000; }
    .stdbackg      { background: #eeeeee; }

    .allclear    { clear: both; }
    .asblock     { display: inline-block; }
    .centered    { text-align: center; }
    .em          { font-weight: bold; }
    .greyed      { color: #888888; }
    .deleted     { color: #888888; text-decoration: line-through; }
    .indented    { margin-left: 4ex; }
    .no-margin P { margin: 0; }
    .nowrap      { white-space: nowrap; }
    .smallcaps   { font-variant: small-caps; }
    .strike      { text-decoration: line-through; }



/* === Miscellaneous Styles === */

    DIV.advert   { text-align: center; clear: all; margin-top: 3em; }

    DIV.embox {
        background: #e0dada;
        margin:     0 2em;
        padding:    0 .5em;
        border:     solid 4px #880000;
    }

    DT.sponsor  { border-top: solid #880000; padding-top: 0.5em;}

    H1.bar {
        margin-top:   2em;
        color:        white;
        background:   #880000;
        padding-left: 1ex;
    }

    LI.spaced { margin-bottom: 0.5em; }

    /* This is how to properly center a table with CSS, while retaining the left-alignment
    ** of contained text. */

    TABLE.centered { margin: 0 auto; text-align: left; }

    TD.button {
        background: #d3d3d0;
        padding: 0.25ex 1ex;
        margin: 0;
        border:  outset 4px;
    }

    TD.centered {
        text-align:     center;
        vertical-align: middle;
        padding:        0;
        margin:         0;
    }

    TD.embox {
        border:     solid 4px #880000;
        background: #e0dada;
        color:      #880000;
        padding:    1ex 2ex;
        text-align: center;
    }

    TABLE.staffleft TD {
        font-family:      Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-size:        80%;
        text-align:       left;
        background-color: #e0dada;
        border:           thick White;
        padding:          2px 5px 2px 5px;
    }

    TD.staffcenter {
        font-family:      Myriad Web, Verdana, Arial, Helvetica, sans-serif;
        font-size:        80%; 
        text-align:       center;
        background-color: #e0dada;
        border:           thick White;
        padding:          2px 5px 2px 5px;
    }

    TH.padded,
    TD.padded,
    TABLE.padded TD { padding: 0 1ex; }

    TABLE.borderCollapse { border-collapse: collapse; }

    TH.padRight,
    TD.padRight { padding-right: 2ex; }

    TH.shaded {
        padding:    0 1ex 0 1ex;
        color  :    #e0dada;
        background: #880000;
    }

    TD.outlined,
    TH.outlined { border : solid 1px #880000; }

    TD.border   { border : solid 2px #880000; }

    OL.spaced  LI,
    UL.spaced  LI { margin-bottom: 0.5em; }

    OL.compact LI,
    UL.compact LI { margin-bottom:   0em; }

    UL.noindent { margin-left: 0; }
    UL.news     { margin-top: 0; list-style-type: square; }

    UL.check {
      list-style-image: url("http://ckmsptsa.org/images/check.gif");
      margin-left: 1em;
    }

    UL.check LI {
      margin-bottom: .5ex;
    }

    UL.nobullet { list-style-type: none; }

    SPAN.button { 
      padding:     .25ex 1ex;
      border:      ridge #52886c;
      background:  #880000;
      white-space: nowrap;
    }

    SPAN.greyed    { color: #888888; }

    SPAN.supsmall  { vertical-align: super; font-size: 60%; }