/*
    pale yellow for background and
        current page menu highlight:        #f7f0c0
    blue for menu links:   #0a4573
    light blue from header for horz. lines:  #90b0ca
    light blue for footer:  #a6c0d5;
*/
* {
    margin:0;
    padding:0;
    }


/* for all unordered lists */
ul {
    list-style:none;
    }

/* for all links */
a {
    color:#0a4573;                  /* medium blue */
    text-decoration:none;
    }
a:hover {
    text-decoration:underline;
    color:black;
    }

body {
    background-color:#f7f0c0;       /* pale yellow */
    font-family:Verdana;
    }
#wrapper {
    width:760px;
    /** to center page :
        "margin:0 auto 0 auto;" doesn't work because IE has problems
        with auto margins.  The following work-around is from
        Andy Budd's book, p. 136)
    **/
    position:relative;
    left:50%;
    margin-left: -360px;

    /** background is a 1-pixel row that's repeated down the page
        it had drop shadow and vertical cross bar           **/
    background:url('background_strip.jpg') repeat-y;
}

#page {
    /** page is centered within wrapper  **/
    width:720px;
    margin-left:20px;
    position:relative;

    /** 'barely-there' background img of cross and people **/
    background:url('background_wcross.jpg') no-repeat -17px 215px;*/
    }


#header {
    width:100%;
    height:215px;
    background-image:url('header_final.jpg');
    }

/** MAIN MENU **/
#menu {
    width:132px;
    text-align:right;
    float:left;
    }

div#menu a {
    display:block;
    font-size:100%;     /* same as 12pt */
    padding:10px;
    }

/*
div#menu a:visited {
    color:#777369;
    }
*/
/*
div#menu a:hover {
    text-decoration:underline;
    color:black;
    }
*/
/** this is to make current page's link highlighted  with pale yellow**/
#home #menu a#homelink,
#about #menu a#aboutlink,
#services #menu a#serviceslink,
#fellowship #menu a#fellowshiplink,
#missions #menu a#missionslink,
#leadership #menu a#leadershiplink,
#resources #menu a#resourceslink,
#contact #menu a#contactlink
{
    background-color:#f7f0c0;
    }
/** also all of the sub-pages **/
#smallgroups #menu a#fellowshiplink,
#music #menu a#serviceslink,
#teaching #menu a#serviceslink,
#school #menu a#serviceslink,
#children #menu a#serviceslink,
#retreats #menu a#fellowshiplink,
#events #menu a#fellowshiplink, 
#announcements #menu a#resourceslink {
    background-color:#f7f0c0;
    }

#beliefs #menu a#aboutlink,
#history #menu a#aboutlink,
#building #menu a#aboutlink,
#worshipteam #menu a#worshiplink,
#scripture #menu a#missionslink,
#missionteam #menu a#missionslink,
#elders #menu a#leadershiplink,
#council #menu a#leadershiplink {
    background-color:#f7f0c0;
    }

/* MAIN CONTENT AREA */
#main {
    width:540px;
    float:right;
    margin-right:12px;
    /* the following is needed to fix bug in IE6 and below that doubles the
     * margins on floated elements */
    display:inline;

    min-height:600px;
    /*** this a hack I found online--to fix min-height in IE 
        http://www.hackszine.com/blog/archive/2008/03/
            easiest_crossbrowser_css_minhe.html
    ***/
    height:auto !important;
    height:600;

    position:relative;
}

#main h3 {
    text-align:center;
    margin-bottom:20px;;
    }

#main h4 {
    clear:both;         /* for clearing floated pics */
    border-bottom:1px solid #90b0ca;
    margin:15px;
    }

/* IMAGES  */


/** default rule for all pic's  **/
.picbox {
    border:1px solid #b8b3a4;    /* brown of middle of cross  */
    float:left;     /** had to make default be left float (because of home page) */
    margin:0 15px 15px 15px;;
    position:relative;
    /* the following is needed to fix bug in IE6 and below that doubles the
     * margins on floated elements */
    display:inline;
    }
.picbox img {
    border:2px solid white;
    float:left;     /** this has to be floated so extra space will not be 
                        added to bottom of border in IE  **/
    }

/* for images that need to override default and float right */
#special_event .picbox,
#history .picbox,
#library .picbox,
#building .picbox,
#nurture .picbox,
#resources .picbox {
    float:right;
    }

/** images for homepage  ***/

#home .group {
    float:left;
    margin-right:3px;
    margin-top:30px;
    margin-bottom:30px;
    }

#home .group .picbox {
    /*float:none;*/
    margin:0;
    }

#home .group h3 {
    clear:both;
    font-weight:normal;
    font-size:18pt;
    color:#b8b3a4;
    }
    


/*** PARAGRAPHS  ****/
div#main p {
    font-size:10pt;
    line-height:1.5em;   /*** this causes a gap at top of home page in IE  ***/
    margin:15px;
    }
div#main p.testimony {      /* shaded area on retreats page  */
    font-style:italic;
    background-color:#dbdbdb;
    /*width:90%;*/
    padding-left:10px;
    padding-right:10px;
    }
div#main p.attrib {         /* Robin's name at end of testimony */
    text-align:right;
    background-color:#dbdbdb;
    }
div#main p.last {
    border-bottom:2px solid #90b0ca;
    padding-bottom:15px;
    }
/*  to make blue go after pics on homepage  */
#home #main p.last {
    clear:left;
    }

/* LISTS (ul) are on home, events, beliefs, missionteam, and council */
#main ul {
    margin:15px 40px 15px 40px;     /* come in a little from sides */
    }
#main li {
    font-size:10pt;
    margin-bottom:10px;
    }
#home #main li {
    font-style:italic;
    }

/* put bullets on lists for announcement pages and missionteam page */
#missionteam #main ul { 
    list-style-type:disc;
    list-style-position:inside;
}
#announcements #main ul {
    list-style-type:disc;
    }
    
/* TABLES (on council, events, smallgroups + bottom of page links */
table  { 
    width:100%;
}

table#links {
    clear:both;
    margin-bottom:50px; /*  for extra space at bottom of page*/
    }
/* smaller margin for announcement pages--links are at top & bottom of page*/
#announcements table#links {
    margin-bottom:10px;
    }
table#links td {
    height:30px;
    width:50%;   /* default for 2 columns  */
    font-size:90%;      /*  a little smaller than main menu links  */
    text-align:center;
    }
/* override table td spacing for 3 columns of links */
#home table#links td,
#fellowship table#links td,
#smallgroups table#links td,
#school table#links td,
#children table#links td,
#retreats table#links td,
#events table#links td,
#library table#links td {
    width:33%; 
    }

/* for table of fellowship events (lists need to start at top of table) */
#events table td {
    vertical-align:top;
    }
/* for table of fellowship groups */
#smallgroups table#groups td {
    padding:5px;
    font-size:10pt;
    }
#smallgroups table#groups td#title {
    width:27%;
    vertical-align:top;
    }

/* table for football schedule (in football.php) */
#football table {
    /*width:300px;*/
    border:1px solid black;
    /*margin-left:100px;*/
    font-size:10pt;
    empty-cells:show;   /* doesn't work in IE7--have to put placeholders
                                in empty cells */
    }
#football table th {
    height:3em;
    }
#football table td {
    /*vertical-align:top;*/
    width:15%;
    height:1.5em;
    padding-left:5px;
    border-top:1px solid black;
    }
#football table td.colhead {
    border:none;
    font-weight:bold;
    }
#football table td.names {
    width:30%;
    }
#football table tr.away {
    background-color:#dbdbdb;
    }

#football ul {
    margin:0;
    list-style-type:disc;
    list-style-position:inside;
    }
    
/*  table for service topics (on teaching.php page)    */

#teaching table#topics {
    border:1px solid black;
    font-size:10pt;
    /*margin:15px;*/
    }
#teaching table#topics th {
    text-align:left;
    line-height:1.5em;
    padding-left:5px;
    width:33%;
    }
#teaching table#topics td {
    line-height:1.5em;
    border-top:1px solid #90b0ca;
    padding-left:5px;
    }
/*special links */
#resources a {
    display:block;
    }

/* the following are for pop-up scripture boxes */
div#main a.scripture {
    position:relative;
    text-decoration:none;
    }
div#main a.scripture span {
    display:none;
    }
div#main a.scripture:hover span {
    display:block;
    position:absolute;
    bottom:1.5em;
    left:2em;
    width:150px;
    /*height:150px;*/
    background-color:#f7f0c0;   /*pale yellow*/
    border:1px solid #90b0ca;
    padding:5px;
    /*color:#fffbeb;*/
    }

/* for contact page */

#contact #contact_info {
    float:left;
    /*text-align:center;*/
    }
#contact #address,
#contact #phone,
#contact #email {
    margin:20px;
    }
#contact #main p {
    clear:left;
    }
    
#news a {
    display:block;
    text-align:center;
    }

#footer {
    clear:both;
    width:100%;
    height:30px;;
    border-top:3px solid #63666a;
    position:relative;
    background:url('bottom_cross.gif') repeat-y 132px;
    background-color:#a6c0d5;           /* light blue */
    }
#footertext {
    position:relative;
    font-size:10pt;
    top:5px;
    left:230px;
    }

/*** calendar styles  ***/
/*  for calendar, we need a white background to cover up the cross  */
#calendar #page {
    /*background-color:white;*/
    background:white;
    }
div#header_cal {
    width:100%;
    height:215px;
    background-image:url('header_calendar.jpg');
    }
#calendar table {
    width:100%;
    }

#calendar table td {
    width:14%;
    border-top:1px solid black;
    border-left:1px solid black;
    height:120px;
    vertical-align:top;
    }

#calendar #moheader th {
    height:70px;
    }
#calendar #motitle {
    /*font-size:200%;*/
    /*color:#134777;
    color:#777369;*/
    color:black;
    font-weight:normal;
    }
#calendar .molink a {
    /*text-decoration:none;*/
    color:#e7e4d5;
    color:#dddacc;
    /*font-size:150%;*/
    }
#calendar .molink a:hover {
    color:#777369;
    }
#calendar #daysofweek th{
    /*color:#0a4573;*/
    /*line-height:20px;*/
    }
#calendar table td.sun {
    background-color:#dae6ec;
    }
#calendar table td.sat {
    border-right:1px solid black;
}
#calendar table tr#lastweek td{
    border-bottom:1px solid black;;
    }
#calendar table td.not {
    background-color:#e7e4d5;
    background-color:#dddacc;
    }
#calendar .date {
    color:#134777;
    color:#0a4573;
    margin:3px;
    }

#calendar td.not .date {
    color:white;
    }
#calendar .event {
    margin:3px;
    font-size:70%;
    }
/*
#calendar .line {
    border-bottom:1px dotted #0a4573;
    }
*/
#calendar .special {
    background-color:#fedf87;
    }
#calendar .notime {
    background-color:#0a4573;
    color:white;
    }
#calendar .event .time {
    font-weight:bold;
    }