/*--------------------------------------------------------------------*/
/* Dayspring.css                                                      */
/*                                                                    */
/*  Cascading style sheet defining properties for the                 */
/*  dayspring-umc.org web site.                                       */
/*                                                                    */
/*  Initial version created on 2010/05/02.                            */
/*  Last update 2012/01/20                                            */
/*                                                                    */
/*--------------------------------------------------------------------*/

/*--------------------------------------------------------------------*/
/*                                                                    */
/* Define the properties of elements, regardless of class or id.      */
/*                                                                    */
/*--------------------------------------------------------------------*/

/*----------------------------------------------------------------------
    There are two different color schemes represented here.
    One (with a green cast) is for normal usage and the second
    (where the dominant color purple, the liturgical color for
    for those seasons) for Lent and Advent.
    
    Rather than maintain two files, we will simply do a global
    search and replace on Dayspring.css (this file) and Dayspring.dwt
    (the template file for Dreamweaver) to switch between the two
    color schemes:
    
    
    Dominant dark:          #447b7b/127,0,127   #800080/127,0,127
    Light background:       #fffeee/255,254,238 #ffffff/255,255,255
    Sidebar headings:       #7a4343/122,67,67   #ad5aad/173,90,173
    Inset:                  #c8dede/200,222,222 #e9d3e9/233,211,233
    Link:                   #ffff00/255,255,0   #ee82ee/238,130,238
    
    Note that, pending release and general use of IE9, we have to
    use Microsoft filters for gradients in IE.  The end color for
    the gradient, which would normally be #447b7b for Lent and
    #447b7b for normal, are replaced by #7a4343 (173,90,173) and
    #85a8a2 (133,168,162), respectively, because use of the 
    #447b7b/#447b7b results in much too strong an effect.
    
----------------------------------------------------------------------*/


/*--------------------------------------------------------------------
  A handy-dandy way to examine and debug structure...
 * { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }
-----------------------------------------------------------------------*/


* { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: small; color: black}

body.normal
{
  margin:               0px;
  background-color:     #fffeee;
  background-repeat:    no-repeat;
}

/*
h1
{
  font-family:  Tahoma;
  font-weight:  normal;
  font-size:    150%;
  text-align:   center;
}
h2
{
  font-family:  Tahoma;
  font-weight:  normal;
  font-size:    12pt;
  text-align:   center;
}
h3
{
  font-family:  Tahoma;
  font-weight:  normal;
  font-size:    12pt;
  text-align:   left;
}

*/

/*--------------------------------------------------------------------*/
/* Logo                                                               */
/*--------------------------------------------------------------------*/
#Logo
{
  width:                100%;
  height:               100px;
  border-width:         1px;
  border-style:         solid;
  background-color:     #fffeee;
  background:           radial-gradient     (0% 95%, circle farthest-corner, #fffeee 0%, rgba(0,100,0,.25) 50%, #447b7b 90%);
  background:           -moz-linear-gradient(45deg, #fffeee 0%, #447b7b 90%);
  background:           -webkit-gradient(radial, bottom left, #fffeee 0%, color-stop(100%, #447b7bad0e0e));
  background:           -webkit-radial-gradient(bottom left, #fffeee 0%, #447b7b 100%);
  background:           -o-radial-gradient(20% 0%, ellipse farthest-corner,#fffeee 0%, rgba(0,100,0,.25) 40%, #447b7b 90%);
  filter:               progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorStr='#fffeee', EndColorStr='#447b7b');
  -ms-filter:           "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#fffeee',EndColorStr='#447b7b')";
  border-radius:        8px; 
  -moz-border-radius:   8px;
  -webkit-border-radius:8px;
  -o-border-radius:     8px;
}



/*--------------------------------------------------------------------*/
/* CSS definitions for elements of the navigation menu.               */
/*--------------------------------------------------------------------*/
#MainMenu
{
  position:             relative;
  left:                 2%;
}
div.menu
{
  float:                left;
  background-color:     #dddddd;
  background:           linear-gradient(top, #fffeee 0%, #808080 100%);
  background:           -moz-linear-gradient(top, #fffeee 0%, #808080 100%);
  background:           -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fffeee), color-stop(100%, #808080));
  background:           -webkit-linear-gradient(top, #fffeee 0%, #808080 100%);
  background:           -o-linear-gradient(top, #fffeee 0%, #808080 100%);
  filter:               progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorStr='#fffeee', EndColorStr='#808080');
  -ms-filter:           "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#fffeee',EndColorStr='#808080')";
}
div.innermenu
{
  margin:               0px;
  padding:              0px;
  height:               30px;
}
div.leftend
{
  border-radius:        5px 0px 0px 5px;
  -moz-border-radius:   5px 0px 0px 5px;
  -webkit-border-radius:5px 0px 0px 5px;
  -o-border-radius:     5px 0px 0px 5px;
}
div.rightend
{
  border-radius:        0px 5px 5px 0px;
  -moz-border-radius:   0px 5px 5px 0px;
  -webkit-border-radius:0px 5px 5px 0px;
  -o-border-radius:     0px 5px 5px 0px;
}
p.menu
{
  font-weight:          bold;
  text-align:           center;
  text-shadow:          1px 1px 1px white;
  -moz-text-shadow:     1px 1px 1px white;
  -webkit-text-shadow:  1px 1px 1px white;
  -o-text-shadow:       1px 1px 1px white;
  filter:               glow(color='#eeeeee',strength=2);
}
a.menu
{
  text-decoration: none;
}


div.pulldown
{
  position:             relative;
  display:              none;
  top:                  -13px;
  width:                100%;
  padding:              0px 0px 1px 0px;
  text-indent:          -36px;
  background-color:     #cccccc;
  background:           linear-gradient(top, #cccccc 0%, #808080 100%);
  background:           -moz-linear-gradient(top, #cccccc 0%, #808080 100%);
  background:           -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #808080));
  background:           -webkit-linear-gradient(top, #cccccc 0%, #808080 100%);
  background:           -o-linear-gradient(top, #cccccc 0%, #808080 100%);
  filter:               progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorStr='#cccccc', EndColorStr='#808080');
  -ms-filter:           "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#cccccc',EndColorStr='#808080')";
  border-radius:        0px 0px 5px 5px;
  -moz-border-radius:   0px 0px 5px 5px;
  -webkit-border-radius:0px 0px 5px 5px;
  -o-border-radius:     0px 0px 5px 5px;
  z-index:              999;
}
ul.pulldown
{
  list-style-type:      none;
}
li.pulldown
{
  width:                100%;
  text-shadow:          1px 1px 1px white;
  cursor:               pointer;
}
li.pulldown:hover
{
  font-weight:          bold;
}
a.pulldown
{
  text-decoration:      none;
}
/*--------------------------------------------------------------------*/
/* End of CSS definitions for elements of the navigation menu.        */
/*--------------------------------------------------------------------*/

/*--------------------------------------------------------------------*/
/* Page content (below the logo and navigation menu)                  */
/*--------------------------------------------------------------------*/
#content
{
  position: absolute;
  top:                  150px;
  width:                98.5%;
  padding:              5px;
  background-color:     #fffeee;
  background:           linear-gradient(left,#fffeee 0%,#447b7b 150%);
  background:           -moz-linear-gradient(left,#fffeee 0%,#447b7b 150%);
  background:           -webkit-linear-gradient(left,#fffeee 0%,#447b7b 150%);
  background:           -webkit-gradient( linear, left top, right top, color-stop( 0, rgba(255,255,255,1) ), color-stop( 1, rgba(68,123,123,1) ) );
  filter:               progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#fffeee,EndColorStr=#447b7b);
  -ms-filter:           "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#fffeee,EndColorStr=#447b7b)";
  border-radius:        10px;
  -moz-border-radius:   10px;
  -webkit-border-radius:10px;
  border-width:         1px;
  border-style:         solid;
  z-index:              0;
}



/*--------------------------------------------------------------------*/
/* CSS definitions for elements in the main (center) section.         */
/*--------------------------------------------------------------------*/
#Main
{
  width:            55%;
  float:            left;
  padding-left:     10px;
  padding-right:    10px;
  z-index:          0;
}


#Main h1
{
  font-family:          Tahoma;
  font-weight:          normal;
  font-size:            175%;
  text-align:           center;
  padding:              10px;
  background-color:     #447b7b;
  color:                #fffeee;
  border-radius:        8px 8px 8px 8px;
  -moz-border-radius:   8px 8px 8px 8px;
  -webkit-border-radius:8px 8px 8px 8px;
  -o-border-radius:     8px 8px 8px 8px;
}
#Main h1 span { color: #fffeee; }
#Main h1 span em { color: #fffeee; }


#Main h2
{
  font-size:            130%;
  font-weight:          bold;
  text-align:           center;
  padding:              5px;
  margin-top:           0px;
  background-color:     #447b7b;
  color:                #fffeee;
  border-radius:        5px 5px 0px 0px;
  -moz-border-radius:   5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  -o-border-radius:     5px 5px 0px 0px;

}
#Main h2 span { color: #fffeee; }


#Main h3
{
  font-size:            115%;
  font-weight:          bold;
  text-align:           left;
  padding:              5px;
  margin-top:           0px;
  background-color:     #447b7b;
  color:                #fffeee;
  border-radius:        5px 5px 0px 0px;
  -moz-border-radius:   5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  -o-border-radius:     5px 5px 0px 0px;

}
#Main h3 span { color: #fffeee; }

#Main h4
{
  font-size:            110%;
  font-style:           italic;
  text-align:           left;
  padding:              5px;
  margin-top:           0px;
  background-color:     #447b7b;
  color:                #fffeee;
  border-radius:        5px 5px 0px 0px;
  -moz-border-radius:   5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  -o-border-radius:     5px 5px 0px 0px;

}
#Main h4 span { color: #fffeee; }
#Main p { text-align: left; }
#Main li { text-align: left; }
#Main .byline
{
  font-style:       italic;
  text-align:       right;
  margin-right:     .25in;
}

#Main div.article
{
  padding:      10px;
  display:      none;
}
#Main div.border
{
  border-width:         2px;
  border-style:         groove;
  border-color:         #cccccc;
  border-radius:        5px 5px 5px 5px;
  -moz-border-radius:   5px 5px 5px 5px;
  -webkit-border-radius:5px 5px 5px 5px;
  -o-border-radius:     5px 5px 5px 5px;
  margin-bottom:        20px;
}
#Main div.twocolumn
{
  column-count:         2;
  column-gap:           2em;
  -moz-column-count:    2;
  -moz-column-gap:      2em;
  -webkit-column-count: 2;
  -webkit-column-gap:   2em;
  -o-column-count:      2;
  -o-column-gap:        2em;
}
#Main div.inset
{
  margin:           10px .5in 10px .5in;
  background-color: #c8dede;
  padding:          10px;
  border-width:     2px;
  border-style:     groove;
}


#Main span.continue
{
  cursor:           pointer;
  background-color: #7a4343;
  color:            #fffeee;
  padding:          5px;
  border-width:     2px;
  border-style:     outset;
}


/*--------------------------------------------------------------------*/
/* End of CSS definitions for elements in the main (center) section.  */
/*--------------------------------------------------------------------*/



/*--------------------------------------------------------------------*/
/*                                                                    */
/* Define the properties of specific classes, regardless of           */
/* element type.                                                      */
/*                                                                    */
/*--------------------------------------------------------------------*/

.inverse
{
  margin-bottom:    3px;  
  border-width:     2px 0px 2px 0px;
  border-style:     groove;
  padding:          5px;
  background-color: #447b7b;
  color:            #fffeee;
}

.normal
{
   border-width:        0px;
   padding:             5px;
   background-color:    #fffeee;
   color:               #447b7b;
}



/*--------------------------------------------------------------------*/
/* CSS definitions for elements in the Calendar page only             */
/*--------------------------------------------------------------------*/
.calendarMain
{
  width:            800px;
  height:           600px;
  overflow:         auto;
  border-width:     3px;
  border-style:     inset;
  background-color: #fffeee;
  background:       linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -moz-linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -webkit-linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -webkit-gradient( linear, left bottom, right top, color-stop( 0, rgba(255,255,255,1) ), color-stop( 1, rgba(173,90,173,1) ) );
  filter:           progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#fffeee,EndColorStr=#7a4343);
  -ms-filter:       "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#fffeee,EndColorStr=#7a4343)";
}
.calendarPage
{
  width:            800px;
  height:           600px;
  overflow:         auto;
  border-width:     3px;
  border-style:     inset;
  background-color: #fffeee;
  background:       linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -moz-linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -webkit-linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -webkit-gradient( linear, left bottom, right top, color-stop( 0, rgba(255,255,255,1) ), color-stop( 1, rgba(68,123,123,1) ) );
  filter:           progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffeee,EndColorStr=#447b7b);
  -ms-filter:       "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffeee,EndColorStr=#447b7b)";
}

.slide
{
  position:         absolute;
  left:             0;
  top:              0;
  width:            1024px;
  height:           768px;
  padding-left:     100px;
  padding-top:      100px;
  background:       linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -moz-linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -webkit-linear-gradient(45deg,#fffeee 0%, #447b7b 150%);
  background:       -webkit-gradient( linear, left bottom, right top, color-stop( 0, rgba(255,255,255,1) ), color-stop( 1, rgba(173,90,173,1) ) );
  filter:           progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#fffeee,EndColorStr=#7a4343);
  -ms-filter:       "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#fffeee,EndColorStr=#7a4343)";
}

td.calendarDate
{
  cursor:           pointer;
  text-align:       center;
  height:           30px;
  border-width:     1px;
  border-style:     outset;
  padding:          3px;
}
td.sunday
{
  color:            red;
  font-size:        10.5pt;
  font-weight:      bold;
}
td.weekday
{
  color:            black;
  font-size:        10pt;
  font-weight:      normal;
}
td.present
{
  background-color: white;
}
td.past
{
  background-color: silver;
}
div.calendarDate
{
  display:  none;
}


/*--------------------------------------------------------------------*/
/* End of CSS definitions for elements in the Calendar page           */
/*--------------------------------------------------------------------*/


/*--------------------------------------------------------------------*/
/* CSS definitions for elements related to photos:                    */
/*--------------------------------------------------------------------*/
div.center
{
  width:            90%;
  margin-left:      5%;
  margin-right:     5%;
}
div.right
{
  float:            right;
  padding-left:     10px;
  padding-right:    10px;
}
img.photo
{
  border-width: 0px;
  cursor:       pointer;
  margin:       0px;
}
img.magphoto
{
  border-width:     0px;
  margin:           0px;
  width:            100%;
}
img.padded { padding: 10px; }
p.caption
{
  font-size:        90%;
  font-style:       italic;
  text-align:       center;
  margin-top:       0px;
}
p.fullsizeButton
{
  float:            right;
  margin-bottom:    0px
}


/*--------------------------------------------------------------------*/
/*                                                                    */
/* Define the properties of specified classes within a given          */
/* element type.                                                      */
/*                                                                    */
/*--------------------------------------------------------------------*/


div.inset
{
  margin:           10px .5in 10px .5in;
  background-color: #c8dede;
  padding:          10px;
  border-width:     2px;
  border-style:     groove;
}


h2.td
{
  margin:           0px;
  padding:          5px;
  font-family:      Tahoma;
  font-size:        10pt;
  font-weight:      bold;
  background-color: #7a4343;
  color:            #fffeee;
  text-align:       center;
}

p.continue
{
  text-align:       right;
  margin-right:     .1in;
}
p.help
{
  padding-left:     1in;
  padding-right:    1in;
  text-align:       center;
  font-style:       italic;  
}

td.article
{
  border-width:     1px;
  border-style:     solid;
  background-color: white;
}
span.continue
{
  cursor:           pointer;
  background-color: #7a4343;
  color:            #fffeee;
  padding:          5px;
  border-width:     2px;
  border-style:     outset;
}

span.link
{
  cursor:           pointer;
  font-weight:      normal;
  background-color: #7a4343;
  color:            #fffeee;
  padding:          2px;
}

div.staffphoto
{
  float:left;
  width:48%;
}

span.date
{
  font-size:smaller;
  font-style:italic;
}
span.right
{
  float:right;
}
td.stats { background-color: #fffeee; padding: 5px; }

/*--------------------------------------------------------------------*/
/*                                                                    */
/* Define properties of elements with specific id, optionally         */
/* qualified by element type and/or class.                            */
/*                                                                    */
/*--------------------------------------------------------------------*/


#staff p { text-align:center }
#events p { text-align:center }

#minicontent
{
  position: absolute;
  top:      80px;
  padding:  20px;
}


#photos img.photo
{
  float:            right;
  height:           64px;
  border-width:     1px;
  border-style:     solid;
  border-color:     white;
}

#photos h6
{

  font-family:   Tahoma;
  color:         black;
  font-size:     10pt;
}

#footer
{
  width:        100%;
  margin-top:   6px;
  border-width: 2px 0px 0px 0px;
  border-style: groove;
}
#footer div.inset
{
  margin:           10px .5in 10px .5in;
  background-color: #c8dede;
  padding:          10px;
  border-width:     2px;
  border-style:     groove;
}
#footer span.continue
{
  cursor:           pointer;
  background-color: #7a4343;
  color:            #fffeee;
  padding:          5px;
  border-width:     2px;
  border-style:     outset;
}
#footer td
{
  font-size:        smaller;
  font-style:       italic;
}

#left
{
  float:        left;
  width:        20%;
  padding:      0px;
  margin-top:   10px;
}
#Koin h1
{
  margin-left:      15%;
  margin-right:     15%;
  font-family:      Tahoma;
  font-weight:      normal;
  font-size:        10.5pt;
  text-align:       center;
  padding:          10px;
  background-color: #7a4343;
  color:            #fffeee;  
}
#TOC
{
  background-color: white;
  border-width:     1px;
  border-style:     solid;
  padding:          5px;
}
#TOC h1
{
  font-family:      Tahoma;
  font-weight:      normal;
  font-size:        12pt;
  text-align:       center;
  padding:          10px;
  background-color: #7a4343;
  color:            #fffeee;  
}
h5
{
  margin-top:    0px;
  margin-bottom: 0px;
  font-family:   Tahoma;
  color:         #447b7b;
  font-size:     10pt;
  text-align:    center;
  padding:       5px;
  cursor:        pointer;
}
h6
{
  margin-top:    0px;
  margin-bottom: 0px;
  font-family:   Tahoma;
  color:         black;
  font-size:     10pt;
  text-align:    left;
  padding:       5px;
  cursor:        pointer;
}





#sidebar
{
  margin-top:   10px;
  float:        right;
  z-index:      0;
  width:        20%;
}

#sidebar h2
{
  margin:           0px;
  padding:          5px;
  font-family:      Tahoma;
  font-size:        10pt;
  font-weight:      bold;
  background-color: #7a4343;
  color:            #fffeee;
  text-align:       center;
}
.event
{
  margin:           0px;
  background-color: white;
  padding:          5px;
  display:          block;
  border-width:     1px;
  border-style:     solid;
}