/* John Field, 11-18-05                              */
/* Community Covenant Church's External Style Sheet */
/* for my Church and God's Glory.                   */


/* This document codes the External Style Sheet for both Community Covenant Church */
/* and SonShine Child Care Center.  They both use the same External Style Sheet.   */
/* The web site for both Community Covenant Church and Sonshine Child Care Center  */
/* is www. trusttogether.com.   The Church portion of the web                      */
/* site has a light blue banner.  But the Sonshine portion of the web site         */ 
/* has a light yellow banner for the SonShine vs. sunshine pun.  The               */
/* home page uses a light blue banner, like the Church.                            */


/* Available colors:                                            */
/* #000000=black, #FFFFFF=white, #FFFF99=light yellow,          */
/* #99FFFF=light blue, #99FF00=light green, #CCCCCC=light gray  */
/* #0099FF=sea blue, #FF0066=red                                */


/* Note on styles in nested tables:                            */
/* The styles of an outer table do NOT necessarily carry over  */ 
/* into an inner table nested inside it.  Therefore I choose   */
/* to declare styles in each table.  The best way to           */
/* declare styles seems to be using a class in                 */
/* the <td> element.  But if that is too much work, then       */
/* use a class in the <table> element.  Do NOT use a class     */
/* in the <tr> element because mom's webtv seems to be         */
/* unable to handle classes in the <tr> element.               */





body                    /* body defined same as .content-area */
  {
    background-color:#FFFFFF;    /* white */
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }


dd
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }


dt
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: bold;
    font-family: "Times New Roman", serif;
  }


hr                    /* horizontal rule */
  {
    color:#0099FF;    /* sea blue */
  }


li
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }


p                       /* paragraph */
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }





.banner-church            /* Do NOT use line height in banner! */
  {
    background-color:#99FFFF;    /* light blue */
    color: #000000;     /* black typeface */
    font-size: 19pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.banner-SonShine           /* Do NOT use line height in banner! */
  {
    background-color:#FFFF99;    /* light yellow */
    color: #000000;     /* black typeface */
    font-size: 19pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.banner-SonShine-address    /* Do NOT use line height in banner! */
                            /* NOTE: aaa sonshine flyer template */
                            /* uses this class.                  */
  {
    background-color:#FFFF99;    /* light yellow */
    color: #000000;     /* black typeface */
    font-size: 14pt;
    font-weight: normal;
    font-style: italic;
    font-family: "Times New Roman", serif;
  }





.break-below-banner      /* Minimum line size HTML seems to */
                         /* allow is 4pt font size          */
                         /* and 5pt line height.            */
  {
    font-size: 6pt;
    line-height: 7pt;
  }


.break-in-banner
  {
    font-size: 6pt;
    line-height: 7pt;
  }


.break-in-footer
  {
    font-size: 9pt;
    line-height: 10pt;
  }


.break-in-side-links     /* Minimum line size HTML seems to */
                         /* allow is 4pt font size          */
                         /* and 5pt line height.            */
  {
    font-size: 5pt;
    line-height: 6pt;
  }





.content-area
  {
    background-color:#FFFFFF;    /* white */
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }


.content-area-buttons   /* The purpose of this class is to  */
                        /* experiment with buttons.  Delete */
                        /* this class when done Playing!    */
  {
    background-color:#99FFFF;    /* light blue */
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
    border-style: groove;
    border-color: #99FFFF;    /* light blue */
  }


/* This class is used to highlight instructions to people */
/* who might e-mail Pastor Tom.  Pastor Tom deletes all   */
/* unrecognized e-mails unless they say "Pastor Tom" in   */
/* their subject line.  This class highlights those       */
/* instructions.                                          */
.content-area-phones
  {
    background-color:#FFFFFF;    /* white */
    color: #FF0066;     /* red typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }


.footer             /* NO line-height here! */
  {
    background-color: #FFFFFF;    /* white */
    color: #000000;      /* black typeface */
    font-size: 12pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }


/* This class is used to highlight instructions to people */
/* who might e-mail Pastor Tom.  Pastor Tom deletes all   */
/* unrecognized e-mails unless they say "Pastor Tom" in   */
/* their subject line.  This class highlights those       */
/* instructions.                                          */
.footer-highlight   /* NO line-height here! */
  {
    background-color: #FFFFFF;    /* white */
    color: #FF0066;      /* red typeface */
    font-size: 12pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }





.gutter-light-blue               /* NO text in a gutter */
  {
    background-color:#99FFFF;    /* light blue */
  }


.gutter-light-yellow             /* NO text in a gutter */
  {
    background-color:#FFFF99;    /* light yellow */
  }


.gutter-white                    /* NO text in a gutter */
  {
    background-color:#FFFFFF;    /* white */
  }





/* defined my own headings below                                   */
/* BECAUSE different browsers treat the white space under headings */
/* in different ways.  A browser may or may not automatically      */
/* skip a space under headings.  So instead I use my headings      */
/* as a class inside a span container.  Then I can control         */
/* the white space under my headings.  All headings are in         */
/* Arial typeface and normal print unless otherwise noted in the   */
/* name of that heading.                                           */

.h-big
  {
    color: #000000;     /* black typeface */
    font-size: 18pt;
    line-height: 20pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.h-medium
  {
    color: #000000;     /* black typeface */
    font-size: 17pt;
    line-height: 19pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.h-poem-title
  {
    color: #000000;     /* black typeface */
    font-size: 16pt;
    line-height: 18pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.h-small
  {
    color: #000000;     /* black typeface */
    font-size: 14pt;
    line-height: 16pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }





.home-page-poem
  {
    color: #000000;     /* black typeface */
    font-size: 14pt;
    line-height: 15pt;
    font-style: italic;
    font-family: "Times New Roman", serif;
  }









/* Note on links and colors:                                             */
/* Groups of links are handled below.                                    */
/* To change the color, etc., of just one link within a group of links,  */
/* use the style attribute within the <a> container which is in the      */
/* text web page.  For example, to change a link to red typeface and     */
/* bold print, use style="color:#FF0066; font-weight: bold;" within      */
/* the <a> container in the text version of the web page.                */

.links-and-colors-in-left-column
  {                                /* NO line height here! */
    background-color:#99FFFF;      /* light blue */
    font-size: 12pt;
    font-family: "Times New Roman", serif;
  }
.links-and-colors-in-left-column
  a:link {color: #000000;}         /* unvisited links black */
.links-and-colors-in-left-column
  a:visited {color: #000000;}      /* visited links black */
.links-and-colors-in-left-column 
  a:active {color: #000000;}       /* active links black */
.links-and-colors-in-left-column
  a:hover {background-color: #FFFFFF;}     /* cursor hovers         */
                                           /* over white background */


.links-and-colors-in-right-column
  {                                /* NO line height here! */
    background-color:#FFFF99;      /* light yellow */
    font-size: 12pt;
    font-family: "Times New Roman", serif;
  }
.links-and-colors-in-right-column 
  a:link {color: #000000;}         /* unvisited links black */
.links-and-colors-in-right-column
  a:visited {color: #000000;}      /* visited links black */
.links-and-colors-in-right-column
  a:active {color: #000000;}       /* active links black */
.links-and-colors-in-right-column 
  a:hover {background-color: #FFFFFF;}     /* cursor hovers         */
                                           /* over white background */





/* Pastor Tom's Fonts                 */
/* First used for Pastor Tom's        */
/* "Becoming a Child of God" webpage. */

.pastor-content
  {
    background-color:#FFFFFF;    /* white */
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.pastor-invitation
  {
    background-color:#FFFFFF;    /* white */
    color: #000000;     /* black typeface */
    font-size: 15pt;
    line-height: 17pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }


.pastor-scripture
  {
    background-color:#FFFFFF;    /* white */
    color: #000000;     /* black typeface */
    font-size: 14pt;
    line-height: 16pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }





.poem-signature             /* NO line-height here! */
  {
    background-color: #FFFFFF;    /* white */
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-style: italic;
    font-family: "Times New Roman", serif;
  }


.side-column-heading    /* NO line-height here! */
  {
    color: #000000;     /* black typeface */
    font-size: 13pt;
    font-weight: normal;
    font-family: "Arial", sans-serif;
  }






/* I defined my own classes of text below.                         */
/* All my text classes use the "Times New Roman" font with normal  */
/* print unless it says differently in the name of the class used  */
/* for that text.  I made my own classes                           */
/* BECAUSE it was simply easier to do so.                          */

.text-copyright
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-style: italic;
    font-family: "Times New Roman", serif;
  }


.text-italic
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-style: italic;
    font-family: "Times New Roman", serif;
  }


.text-regular
  {
    color: #000000;     /* black typeface */
    font-size: 12pt;
    line-height: 14pt;
    font-weight: normal;
    font-family: "Times New Roman", serif;
  }





.thr                  /* table: horizontal rule across the whole width   */
                      /* of one or more <td> elements.                   */

                      /* Do NOT put a line break in the <td> container   */
                      /* for a horizontal rule BECAUSE then the          */
                      /* horizontal rule must have at least the line     */
                      /* height of a line of text.                       */

                      /* A horizontal rule done this way requires        */
                      /* exactly one <td> container be placed inside     */
                      /* exactly one <tr> container.                     */

                      /* DO put colspan="number" inside the <td> element */
                      /* to indicate how many columns the horizontal     */
                      /* rule will span, otherwise default is exactly    */
                      /* one column will be spanned by the horizontal    */
                      /* rule.                                           */
  {
    background-color:#0099FF;    /* sea blue */
  }


.tvr                  /* table: vertical rule across the whole height  */
                      /* of a <td> element                             */
  {
    background-color:#0099FF;    /* sea blue */
  }