/**************************************************************
    FILE:    style.css
    AUTHOR:  William T Krieger (www.stethelreda.org)
    DATE:    Aug 2007
    PURPOSE: This is the main CSS file for the
    www.stethelreda.org web site.

    This CSS file is based on Pat Heard's work that I found
    on www.oswd.org. It's the template called "LazyDays".
    I hacked it to work with the St. Ethelreda web site.

    My color palette:
      #003080 - St. Ethelreda blue
      #ffd030 - St. Ethelreda yellow
      #e0e0e0 - light blue/purple background
      #303030 - gray (headers, links, etc)
      #606060 - light gray (side menu stuff)
      #909090 - lightest gray (current menu, etc)
      #000000 - black (text)

    Please note that I finally punted on doing the 
    column width stuff in CSS. It wasn't working with all
    the old browsers at the school and that our users have.
    The two-column format of the site uses good, old HTML
    tables. I know this is "bad", but so be it!
    thanks... yow, bill

    ORIGINAL AUTHOR:  Pat Heard (fullahead.org)
    DATE:    2006.03.19
    PURPOSE: Styles the html elements
**************************************************************/

html {
  height: 100%;
}

body {
  height: 100%;

  margin: 0;
  padding: 0;
  text-align: center;

  font: 400 0.8em verdana, arial, sans-serif;
  line-height: 170%;

  background: #e0e0e0;
}

h1 {   
  clear: both;
  font-size: 3em;
  letter-spacing: -3px;
  text-align: center;
/*  font: 700 2.5em arial "trebuchet ms", serif; */
  color: #003080;
}

h2 {
  font: 700 2em arial "trebuchet ms", serif;
  text-align: center;
  color: #909090;
}

h2 a {
  color: #303030;
}

h2 a:hover {
  color: #303030;
}

h3 {
  clear: both;
  font: bold 1.4em arial "trebuchet ms", serif;
  color: #003080;
}

h4 {
  font: 700 1.2em arial "trebuchet ms", serif;
  color: #303030;
}

h5 {
  font: 700 1.1em arial "trebuchet ms", serif;
  color: #303030;
}

h6 {
  font: 700 1em arial "trebuchet ms", serif;
  color: #303030;
}


h1, h2, h3, h4, h5, h6, p, dl {
  margin: 0;
  padding: 10px 15px;
}

/* Done so the leftmost column aligns properly with the header.
   If the leftmost column has class gradient applied to it, 
   this class isn't required. */
.leftColumn h1,
.leftColumn h2, 
.leftColumn h3,
.leftColumn h4,
.leftColumn h5,
.leftColumn h6,
.leftColumn p,
.leftColumn dl {
  padding-left: 0;
}

a {
  color: #303030;
  font-weight: bold;
  text-decoration: none;
}

/* Uncomment this if you would like a visited link style 
a:visited {
  text-decoration: line-through;
} */

a:hover {
  color: #ffd030;
  text-decoration: underline;
}

ol, ul {
  margin: 10px 30px;
  padding: 0 30px;
}

ul {
  list-style-image: url(../images/bg/bullet.gif);
}


/**************************************************************
   #content, #page, .section:
   These are the BIGGIES:
     1) #content holds everything like #page, .sideMenu
     2) #page holds the sections with the text
     3) .section holds text/images for a part of a page
 **************************************************************/

#content {  
  height: 100%;
  min-height: 100%;

  text-align: left;
}

/* max-width hack for IE since it doesn't understand the valid css property */
/** This section of code is messing up my table widths...
#content,
#width {
  
  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");
  max-width: 1000px;
  margin: 0 auto;
}

#content[id],
#width[id] {
  width: 94%;
  height: auto;
}
*/

#page {
  float: left;
  width: 100%;
  clear: both;
  
  padding-bottom: 4em;
}

.section {
  margin-bottom: 1em;
  background: #ffffff;
/*  background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; */
}

.footerSection {
  clear: both;

  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 0.75em;
  padding-top: 27px;
}

.stethelredablue {
  color: #003080;
  font-size: 1.2em;
  font-weight: bold;
}

.stethelredayellow {
  color: #ffd030;
  font-size: 1.2em;
  font-weight: bold;
}

p.post-footer {
  background:url("../favicon.ico") no-repeat 10px .5em;
  display:block;
  margin:4px 16px 32px 16px;
  padding:4px 4px 4px 32px;
  border:1px dotted #909090;
  font-size:100%;
  line-height:1.5em;
  color:#606060;
  text-align:left;
}

/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 10px;
}

.sideMenu li {
  display: inline;

  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 400 1.1em "trebuchet ms", serif;
  color: #606060;
/*  font-size: 1.2em; */
}

.sideMenu li a {
  display: block;
  margin: 0.2em 10px;
  padding: 3px 20px;

  text-decoration: none;
/*  color: #606060; */
}

.sideMenu li a:hover {
  color: #ffd030;
  background: #606060;
}

.sideMenu li.current a {
  color: #ffd030;
  background: #909090;
}

.sideMenu li hr {
  text-align: left;
  margin-left: 0;
  width: 60%;
}

/* Active menu item */
.sideMenu li.sectionSubmenu {
  display: block;  
/*  padding: 5px;*/
/*  font: 400 1.1em "trebuchet ms", serif;*/
  color: #303030;
  font-weight: bold;
  font-size: 1.2em;
}

/* Submenu of active menu item */
.sideMenu li.sectionSubmenu ul {
  margin: 0;
  padding: 15px;
}

.sideMenu li.sectionSubmenu ul li a {
  padding-left: 35px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #606060;  
  background: url(../images/bg/bullet.gif) no-repeat 10px 0px;
}

.sideMenu li.sectionSubmenu ul li a:hover {
  color: #ffd030;
  background: #606060 url(../images/bg/bullet.gif) no-repeat 10px 0px;
}


/**************************************************************
   Images
 **************************************************************/

img.floatRight {
  margin: 5px 10px 10px 15px;  
}

img.floatLeft {
  margin: 5px 15px 10px 0px;
}

.eagleimg a img {
  border: 2px solid #ffd030;
}

.eagleimg a:hover img {
  border: 2px solid #303030;
}

a img {
  border: 2px solid #303030;
}

a:hover img {  
  /* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
/*  border: 2px solid #FFF !important; */
  border: 2px solid #ffd030;
}


/**************************************************************
   Alignment and generic display classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}

.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.green {
  color: #A1FF45;
}

.red {
  color: #EA1B00;
}

.grey {
  color: #666;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}


/**************************************************************
   Bill's formatting of Blogger posts
 **************************************************************/
/* Posts 
----------------------------------------------- */
.date-header { /* unused */
  margin:0 28px 0 43px;
  font-size:85%;
  line-height:2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#586;
  }
.post {
  margin:8px 8px 48px 8px;
/*  margin:.3em 0 48px; */
/*  padding:0 8px; */
  }
.post-title {
  margin:0;
/*  background:url("../favicon.ico") no-repeat 10px .5em; */
  display:block;
  border-width:0 1px 1px;
  padding:8px 8px 0px 8px;

  font: bold 1.5em arial "trebuchet ms", serif;
  color:#003080;
  }
#main a.title-link, .post-title strong {
  text-decoration:none;
  display:block;
  }
#main a.title-link:hover {
  background-color:#fff;
  color:#000;
  }
.post-body {
  padding:0px 8px 8px 8px;
  }
/*
.post p {
  margin:0 0 .75em;
  }
*/
p.post-footer {
  background:url("../favicon.ico") no-repeat 10px .5em;
  margin:0;
  padding:4px 4px 4px 32px;
  border:1px dotted #909090;
  font-size:100%;
  line-height:1.5em;
  color:#909090;
  text-align:right;
  }
p.post-footer em {
  display:block;
  float:left;
  text-align:left;
  font-style:normal;
  }
a.comment-link {
  /* IE5.0/Win doesn't apply padding to inline elements,
     so we hide these two declarations from it */
  background/* */:/**/url("http://www.blogblog.com/rounders3/icon_comment.gif") no-repeat 0 45%;
  padding-left:14px;
  }
html>body a.comment-link {
  /* Respecified, for IE5/Mac's benefit */
  background:url("http://www.blogblog.com/rounders3/icon_comment.gif") no-repeat 0 45%;
  padding-left:14px;
  }
/*
.post img {
  margin:0 0 5px 0;
  padding:4px;
  border:1px solid #586;
  }
*/
blockquote {
  margin:.75em 0;
  border:1px dotted #909090;
  border-width:1px 0;
  padding:5px 15px;
  }
/*
.post blockquote p {
  margin:.5em 0;
  }
*/

/* Comments
----------------------------------------------- */
#comments {
  margin:-25px 13px 0;
  border-width:0 1px 1px;
  padding:20px 0 15px 0;
  }
#comments h4 {
  margin:0 0 10px;
  padding:0 14px 2px 29px;
/*  border-bottom:1px dotted #909090; */
  font-size:120%;
  line-height:1.4em;
  color:#333;
  }
#comments-block {
  margin:0 15px 0 9px;
/*  border:1px dotted #909090; */
  }
.comment-data {
  background:url("http://www.blogblog.com/rounders3/icon_comment.gif") no-repeat 2px .3em;
  margin:.5em 0;
  padding:0 0 0 20px;
  color:#666;
  }
.comment-poster {
  font-weight:bold;
  }
.comment-body {
  margin:0 0 1.25em;
  padding:0 0 0 20px;
  }
.comment-body p {
  margin:0 0 .5em;
  }
.comment-timestamp {
  margin:0 0 .5em;
  padding:0 0 .75em 20px;
  color:#fff;
  }
.comment-timestamp a:link {
  color:#fff;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }