/* Demonstration of a WYMeditor style
p.pull-quote {
    float: right;
    padding: 20px;
    font-size: 150%;
    font-weight: bold;
    width: 25%;
}
*/

/* Basic page layout */
html, body {
    font-family: "Verdana", "Lucida Grande", "Arial", "Helvetica", sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    text-align: center;
    background: #4f82bb url(/images/theme-qualitylifecenter/bg-pattern.jpg) repeat scroll left top;
    height: 100%;
    color: white;
}

body {
    text-align: left;
    background: transparent url(/images/theme-qualitylifecenter/bg-gradient.jpg) repeat-x scroll left top;
    min-height: 100%;
}

a {
    color: white;
}

a:hover {
    color: #fcd469;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    font-family: "Georgia", "Times New Roman", "Times New", "Times Roman", "Times", serif;
    font-weight: normal;
}

h1 { font-size: 210%; margin: 0.595238095238em 0; }
h2 { font-size: 175%; margin: 0.714285714286em 0; }
h3 { font-size: 150%; margin: 0.833333333333em 0; }
h4 { font-size: 130%; margin: 0.961538461538em 0; }
h5 { font-size: 115%; margin: 1.08695652174em 0; }
h6 { font-size: 100%; margin: 1.25em 0; }

#container {
    width: 928px;
    margin: 0 auto;
}

#header {
    width: 926px;
    padding: 0 10px 0 5px;
    height: 99px;
}

#logo {
}

#main {
    width: 941px;
    background: transparent url(/images/cache/images-util-corners-dd95a7d0b7c953d9f8e8d0fdf65bd36e.png) no-repeat scroll left top;
    color: black;
    float: left;
}

#main a {
    color: #4f82bb;
}

#main a:hover {
    color: #28395d;
}

#middle {
    background: transparent url(/images/cache/images-util-corners-c0a4cbbd1ba9e07ef74c5bdfe7a7e77e.png) repeat scroll left top;
    font-size: 80%;
    width: 941px;
    float: left;
}

#content {
    width: 602px;
    padding: 1px 0 1px 55px;
    margin: 0;
    display: inline;
    float: left;
}

/* Because this #greeting, and the #content and #side_menu are contained in
 * #middle, IE (6 and 7) creates a weird situation where #middle has some
 * apparent extra padding at the bottom.  It turns out that it is caused by
 * a combination of things.  #middle is floating to cause it to clear its bottom
 * past the floating #contact and #side_menu elements.  Also, #greeting is NOT
 * floating, and it has a bottom margin.  The size of the extra padding is the
 * same as that bottom margin (and the bottom margin is also drawn correctly
 * below #greeting).  It can be fixed in one of the following ways:
 * 1. Making #middle and #main not float (won't work in this layout)
 * 2. Making #content or #side_menu not float (won't work in this layout)
 * 3. Making #greeting float (works, but less straightforward than....)
 * 4. Replace the bottom margin on #greeting with padding (what I did). */
#greeting {
    background: transparent url(/images/cache/images-util-corners-d429e11fc39e2abab9ba9ff942baeb32.png) no-repeat scroll left top;
    width: 902px;
    height: 261px;
    padding: 4px 5px 12px 4px;
    margin: 7px 0 0px 13px;
    position: relative;
    font-family: "Georgia", "Times New Roman", "Times New", "Times Roman", "Times", serif;
    font-size: 220%;
    color: white;
    line-height: 1.6;
}

#greeting .highlight {
    position: absolute;
    margin: 18px 0 0 38px;
    width: 440px;
}

#greeting .shadow {
    position: absolute;
    margin: 21px 0 0 41px;
    color: #32533e;
    width: 440px;
}

#overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    height: 270px;
    background: transparent url(/images/cache/images-util-corners-2c7734ccd99a8fef6c67287fd7d5832a.png) no-repeat scroll left top;
    z-index: 3;
}

#slideshow {
    display: inline; /* IE6 fix */
    float: right;
    width: 396px;
    height: 257px;
    margin: 2px;
    overflow: hidden;
}

#greeting p {
    margin: 0;
    padding: 0;
}

/* Menu styles */
.menu {
    margin: 0 10px 0 5px;
    padding: 3px 0 0 10px;
    list-style: none;
    display: inline; /* IE6 fix */
    float: left;
    height: 31px;
    line-height: 29px;
    font-size: 90%;
    background: transparent url(/images/theme-qualitylifecenter/menu-shadow.png) repeat-x scroll left bottom;
    width: 916px;
}

.menu li {
    display: inline; /* IE6 fix */
    float: left;
    background: transparent url(/images/theme-qualitylifecenter/menu-sep.png) no-repeat scroll left bottom;
}

.menu li.first {
    background: none;
}

#main .menu a {
    display: inline; /* IE6 fix */
    float: left;
    color: black;
    font-weight: bold;
    height: 29px;
    padding: 2px 19px 0 20px;
    text-decoration: none;
}

#main .menu a:hover, #main .menu .hover a {
    color: black;
}

.menu li.active {
    margin-left: -3px;
    margin-right: -4px;
    background: transparent url(/images/theme-qualitylifecenter/menu-tab-left.png) no-repeat scroll left top;
    position: relative;
}

#main .menu li.active a {
    padding-left: 23px;
    padding-right: 23px;
    background: transparent url(/images/theme-qualitylifecenter/menu-tab-right.png) no-repeat scroll right top;
}

#side_menu {
    display: inline; /* IE6 fix */
    float: right;
    margin: 1.25em 40px 0 0;
    padding: 0;
    list-style: none;
    font-weight: bold;
    width: 194px;
}

body.home #side_menu {
    margin-top: 0em;
}

#side_menu li {
    display: block;
    float: right;
    font-size: 150%;
    width: 192px;
    border: 1px solid #fcd469;
    background-color: #fcd469;
    margin-bottom: 2px;
}

#main #side_menu a {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 192px;
}

#main #side_menu a.highlight {
    color: white;
    position: relative;
}

#main #side_menu a.shadow {
    position: absolute;
    color: black;
    margin: 2px 0 0 2px;
}

#side_menu a img {
    display: block;
    width: 192px;
    height: 55px;
    background-color: white;
    margin-top: 2px;
}

#side_menu li#side_menu_donate      { border-color: #fcd469;   background-color: #fcd469; }
#side_menu li#side_menu_volunteer   { border-color: #d94000;      background-color: #d94000; }
#side_menu li#side_menu_store       { border-color: #29447d;     background-color: #29447d; }
#main #side_menu li#side_menu_donate    a.shadow { color: #3f351a; }
#main #side_menu li#side_menu_volunteer a.shadow { color: #361000; }
#main #side_menu li#side_menu_store     a.shadow { color: #0a111f; }

/* Footer Styles */
#footer {
    background: transparent url(/images/cache/images-util-corners-4dcf1ea2d0303765c8fba35dad96bbff.png) no-repeat scroll left top;
    font-size: 70%;
    clear: both;
    text-align: center;
    width: 926px;
    padding: 20px 10px 0 5px;
    margin: 0;
}

#footElements {
    padding-top: 1.25em;
    min-height: 1px;
}

#footTextlinks a {
    padding: 0 10px;
    font-weight: bold;
}

#footer a {
    text-decoration: none;
}