@import url("/stylesheets/forms.css"); 
/*============================================================================
[Screen Stylesheet]
==============================================================================
Project: Give of Life of Michigan
Version: 1.0
Last Modified: 11/20/2009 
Assigned to:   Meili Chen - 11/20/2009
Primary use:   Page Layouts - one, two & three colum layouts 
==============================================================================*/

/*=============================================================================
[Table of Contents]
===============================================================================

A. Global Reset

B. Global Formatting

C. Layout
    1. Body 
       1.1. Skip to content / a#skip
    2. Layout wrapper / div#wrapper
       2.1. Header / div#header
            2.1.1 Logo / h1
            2.1.2 Utility /#utility
            2.1.3 Global navigation / div#globalNav
                   2.1.3.1 Global nav dropdown menu / ul.dropdown
       2.2. Banner section / div#bannerWrapper  (home page only)
       2.3. Middle section / div#middle        
            2.3.1 Primary column / div#primeCol 
                  2.3.1.1 Main content
                          2.3.1.1.1 page title / div#pageTitle
                          2.3.1.1.2 breadcrumbs / div#breadcrumbs
                          2.3.1.1.3 inner content /div.innerContent
                                    2.3.1.1.3.1 home page callouts
                                    2.3.1.1.3.2 home page callouts grey boxes
                                    2.3.1.1.3.3 calendar grid
                                    2.3.1.1.3.4 faq
                                    2.3.1.1.3.5 news list
                                    2.3.1.1.3.6 news details
                                    2.3.1.1.3.7 quilt
                                    2.3.1.1.3.8 search results/#searchResults
                                    2.3.1.1.3.9 Stories of Hope /#storyList         
                                    2.3.1.1.3.10 Event/calendar Details /.eventDetails
                                    
            2.3.2 Second column / div#secondCol
                  2.3.2.1 default sidebar item  /div.sidebar
                  2.3.2.2 subnav /div#subNav
                          2.3.2.2.1 subnav thir level 
                  2.3.2.3 contact Gift of Life /div.contactGoL
                  2.3.2.4 tell us story div.tellStory
            2.3.3 Third column / div#thirdCol 
                  2.3.3.1 donor drive /div.dornorDrive
                  2.3.3.2 followUs /followUs
                  2.3.3.3 featured stories /div.featuredStory
       
    2.4 Footer / div#footer 
           2.4.1 Footer navigation / ul#footNav 
           2.4.2 Footer copyright / div.copyright     
            2.4.3 Footer donate logo/div.donate
                     
===============================================================================*/

/*==============================================================================
[Color codes]
================================================================================
#fff white (body background, utility nav links, global nav links )
#000 black (body text, subnav title)

#336699 blue {default link, breadcrumbs}
#7b9bba light blue {breadcrumbs hover }
#6699cc blue  {footer nav link}
#003366 blue {footer nav hover }

#aca89d gray {search text}
#666666 gray {sub nav third color, featured story title, footer, copyright}
#333333 gray {subnav third level hover color}

#cce797 green (utility text)
#007550 dark green (page title, callout boxes title)

#990000 dark red {subnav link}
#ff0000 red {global nav dropdown hover, subnav hover }
==================================================================================*/

/*=================================================================================
A. GLOBAL RESET
===================================================================================*/

body {font: 62.5%/1.4 Arial,verdana,Helvetica,sans-serif;  background: #fff; color: #000; margin: 0; padding: 0;}
p, h1, h2, h3, h4, h5, h6, fieldset, form, label, input, textarea, legend, dl, dt, dd, table, caption, th, td, blockquote, cite {
 margin: 0; padding: 0; font-size: 1em;}
 
ul, ol, li, ul *, ol *  {font-size: 1em;}

input, textarea {font-family: Arial,Verdana,Helvetica,sans-serif;}
textarea {overflow: auto;}

table {border-collapse: collapse;   margin-bottom: 2em;}
td, th {padding: 0.1em 1em; }

img {}
acronym, abbr {border-bottom: 1px dotted; cursor: help;}
cite {font-style: normal;}
:focus {outline: 0;}

/*====================================================================================
B. GLOBAL FORMATTING  
=====================================================================================*/
.clear {clear: both; height: .001em; font-size: .001em;}
.left {float: left; display: inline;}
.right {float: right; display: inline;}
.center {text-align: center;}
.block {display: block;}
.bld {font-weight: bold;}

.dottedLine {border-bottom: 1px dotted #efefef;} /* dotted horizental line */
.imgRight {float: right; margin: 5px 0 8px 8px;}
.imgLeft {float: left; margin: 5px 8px 8px 0;}

a {color: #336699; text-decoration: none; font-weight: bold;}
a:hover {text-decoration: underline;}

h1 {font-size: 1.46em;line-height: 120%;}
h2 {font-size: 1.38em;line-height: 120%;}
h3 {font-size: 1.3em; }
h4 {font-size: 1.23em;}
h5 {font-size: 1.15em;}
h6 {font-size: 1.07em;}
h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;}

hr {border: none; margin: 15px 0; background: #cdcdcc; padding: 0; height: 1px;}

form fieldset {border: 3px double #abc2bb; padding: 10px; margin-bottom: 10px;}
form legend {color: #000; text-transform: uppercase; background: #e4efeb; padding: 4px 10px;  font-weight: bold; letter-spacing: 1px; border: 1px solid #abc2bb;}     
.submitBtn {color:#000; font-size: 1.1em; font-weight: bold;  padding: 2px 5px;}

.nav, .nav ul {margin: 0; padding: 0; list-style: none;}

/*======================================================================================
C. LAYOUT                                                                   *
=======================================================================================*/

/*--------------------------------------------------------------------------------------------
 1. Body / body                                                                                                                                                             
----------------------------------------------------------------------------------------------*/
body {background: #fff url(/images/background/body_bg.jpg) repeat-x 50% 0; }

   /* 1.1. Skip to content / a#skip */
   #skip {position: absolute; top: -1000px;} 
    
/*------------------------------------------------------------------------------------------
2. Layout Wrapper                                                                                                                                                     
---------------------------------------------------------------------------------------------*/
#wrapper {color: #000; font-family: arial,verdana,sans-serif; font-size: 1.3em; margin: 0 auto; width: 962px; background: transparent; overflow: hidden;}
#wrapper p {margin-bottom: 1em!important;}
   /*.........................................................................
    2.1. Header / div#header 
   ...........................................................................*/
   #header {width: 100%; background: transparent; }
      
      /* 2.1.1 logo / #logo */
      #logo {float: left; width: 210px; padding: 10px 13px 2px 10px; overflow: hidden; }
      #logo h1 {height: 108px; width: 210px; margin: 0; padding: 0; background: url(/images/background/client_logo.gif) no-repeat;  text-indent: -9000px; float: left; }
      #logo h1 a {display: block; height: 108px; width: 210px; background: url(/images/background/client_logo.gif) no-repeat;}
      html>body #logo h1, html>body #logo h1 a {background: url(/images/background/client_logo.png) no-repeat 0 0;}
      #logo h1 a:hover {border-bottom: none;}

      /*2.1.2 utility / #utility */
      #utility {background: url(/images/background/utility_left.gif) no-repeat 0 100%;  margin: 0px 10px 0px 10px; float: right; width: 640px; padding: 0;font-family:'Arial Narrow', Arial,Helvetica,sans-serif; text-transform: uppercase; }
      #utility .br {background: url(/images/background/utility_right.gif) no-repeat 100% 100%; }
      #utility ul {margin: 0; text-align: right; padding: 9px 20px 7px 10px; width: 620px; }
      #utility ul li { display: inline;  color: #fff; }
      #utility ul li a {text-decoration: none; padding: 2px 18px 8px 18px; background: url(/images/navs/utility_divider.jpg) no-repeat 100% 100%; font-weight: bold; color: #fff;}
      #utility ul li a:hover,  #utility ul li.current a  {color: #cce797; text-decoration: none; }
      #utility ul li.last a { background: none; }
      
      #utility input { vertical-align: middle; }
      #utility form {display: inline; margin: 0; padding-left: 25px;}
      #utility #query {background: #fff; border: 1px solid #aca89d; font-size: .9em; font-weight: bold; color: #aca89d; width: 210px; margin: 0 5px 0 0; padding: 1px; }
      #utility .searchBtn {padding: 0px 0 0px 5px;  vertical-align: middle; }
    
      /* 2.1.3. Global navigation / div#globalNav */
      #globalNav {font-family:'Arial Narrow', Arial,Helvetica,sans-serif; width: 720px; margin: 32px 0 0 0px; display: block;  text-align: right; float: right; background: transparent; }
      #globalNav ul {float: right; text-align: right;  padding: 0 9px 0 0; margin: 0px; }
      #globalNav  ul a {display: block; }
      #globalNav  ul li {float: left;  display: inline; background: url(/images/navs/global_nav_divider.jpg) no-repeat 100% 50%;padding: 0 1px 0 0px; margin: 0;}
      #globalNav ul li.last {background: none;}
      #globalNav  ul li a{background: url(/images/navs/global_nav_off.jpg) repeat-x 0 0;display: block;  vertical-align: middle; padding: 12px 11px;font-weight: bold; color: #fff; text-align: center; text-transform: uppercase;}
      #globalNav ul li a:hover, #globalNav ul li .current a {text-decoration: none; background: url(/images/navs/global_nav_on.jpg) repeat-x 0 0; }
      #globalNav a:hover, #globalNav .current a, #globalNav li:hover a {text-decoration: none; background: url(/images/navs/global_nav_on.jpg) repeat-x 0 0;}
      #globalNav ul li.first a{background: url(/images/navs/tab_off_left_ie6.gif) no-repeat 0 0;}
      /* html>body #globalNav ul li.first a{background: url(/images/navs/tab_off_left.png) no-repeat 0 0;}*/
      #globalNav ul li.last a {background: url(/images/navs/tab_off_right_ie6.gif) no-repeat 100% 0;}
      /* html>body #globalNav ul li.last a {background: url(/images/navs/tab_off_right.png) no-repeat 100% 0;}*/
      #globalNav ul li.first a:hover, #globalNav ul li.first .current a, #globalNav ul li.first:hover a{background: url(/images/navs/tab_on_left_ie6.gif) no-repeat 0 0;}
      /* html>body #globalNav ul li.first a:hover, #globalNav ul li.first .current a, #globalNav ul li.first:hover a{background: url(/images/navs/tab_on_left.png) no-repeat 0 0;}*/
      #globalNav ul li.last a:hover, #globalNav ul li.last .current a, #globalNav ul li.last:hover a {background: url(/images/navs/tab_on_right_ie6.gif) no-repeat 100% 0;}
      /* html>body #globalNav ul li.last a:hover, #globalNav ul li.last .current a, #globalNav ul li.last:hover a {background: url(/images/navs/tab_on_right.png) no-repeat 100% 0;}*/
      #globalNav ul li.sfhover a{background: url(/images/navs/global_nav_on.jpg) repeat-x 0 0;}
      
          /* 2.1.3.1 Global nav dropdown menu / ul.dropdown */
         .dropdown{position: absolute; left: -999em; width: 200px; margin: 0px !important; border-top: none; z-index: 1000; overflow: hidden;  float: none; filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; }
         #globalNav ul li ul {margin: 0; padding: 0;}
         #globalNav ul li ul.dropdown li {float: none; margin: 0!important; display: inline; padding: 0; margin: 0;}
         #globalNav ul li:hover ul, #globalNav li.sfhover ul { left: auto; }
         #globalNav ul li ul.dropdown li a, #globalNav ul li.first ul.dropdown li a, #globalNav ul li.last ul.dropdown li a {font: normal .9em arial,verdana,sans-serif; color: #fdfefe; text-align: left; background: #7a271f!important; padding: 6px 10px 6px 15px; border-top: 1px solid #ac827e; text-transform: none; line-height: 120%; }
         #globalNav ul li ul.dropdown a:hover, #globalNav ul li.first ul.dropdown a:hover, #globalNav ul li.last ul.dropdown a:hover { color: #ff0000;}
       
       
   /*..........................................................................................
     2.2. Banner section / div#bannerWrapper
    ............................................................................................. */  
    #bannerWrapper {width: 920px; height: 314px; background: url(/images/background/banner_bg.png) no-repeat 0 0;  float: left;  padding: 28px 22px; overflow: hidden;}
    #banners {} /* do not remove this; otherwise there will be a gap on the bottom of the photo on the firefox */
    #banners img {border: none; display: block;} /* do not remove this; otherwise there will be a gap on the bottom of the photo on the firefox */
    #banners #tagline {float: left; position: absolute;}
    #banners #photos {float: left; margin: 0; padding: 0; width: 920px; height: 314px; background: #fff;}
    #banners .view {position: absolute; margin-bottom: 10px; bottom: 15px; right: 10px; z-index: 100;}
    #banners li {list-style: none;}
      
   /*................................................................................................
    2.3. Middle section / div#middleOuter, #middleInner
    ..................................................................................................*/
    #middle {width: 962px; float: left; margin: 10px 10px 35px 5px; overflow: hidden; width: 100%; background: transparent; }
    html>body #middle {margin-left: 10px;}
    #home #middle {margin-top: 0;}
       
      /* 2.3.1 Primary column / div#primeCol */
      #primeCol {background: #fff; display: inline; float: left; width: 460px; margin-bottom: 15px; overflow: hidden; }
      .oneCol #primeCol {width: 940px;}
      .twoCol #primeCol {float: left; width: 700px; margin: 0;}
      .threeCol #primeCol {}   
      #home  #primeCol {background: transparent; width: 625px; }  
         
      #primeCol  .topLeftCorner {background: url(/images/background/grey_gredient_top_left.gif) no-repeat top left; height: 5px; font-size: .9em;}
      #primeCol  .topRightCorner {background: url(/images/background/grey_gredient_top_right.gif) no-repeat top right; height: 5px; font-size: .9em;}
      html>body #primeCol  .topLeftCorner, html>body #primeCol  .topRightCorner {font-size: 1em;}
         /* 2.3.1.1 Main content */
         #primeCol #mainContent {background: #fff url(/images/background/grey_gredient_bg.gif) repeat-x 0 0; margin: 0; padding: 5px 15px 10px 15px; display: block; overflow: hidden; }
         #home #primeCol #mainContent {margin: 7px 0 0 0; padding: 0px; background: transparent; }
         #home  #primeCol .topLeftCorner, #home #primeCol .topRightCorner {display: none;}
         
            /* 2.3.1.1.1 Page Title / h1#pageTitle */
            h1#pageTitle {color: #007550; font-size: 19px; margin: 0 0px .2em 0px; padding: 4px 10px 5px 10px; border-bottom: 1px solid #aca89d;}    
         
            /* 2.3.1.1.2 Breadcrumbs / h1#breadcrumbs*/
            #breadcrumbs {color: #336699; font-size: .95em;font-weight: bold; margin: 0 0px 15px 0px; padding: 3px 10px 3px 10px;}
            #breadcrumbs a {color: #336699;}
            #breadcrumbs a:hover {border-bottom: none; color: #7b9bba;}
    
            /*2.3.1.1.3 inner content inside main content  div.innerContent */
            #mainContent .innerContent { margin: 15px 10px 10px 10px;}
           
               /*2.3.1.1.3.1  Home content Callouts */
               .homeCallouts {overflow: hidden;}
               .homeCallouts .greyBox {float: left; width: 293px; margin: 0 19px 19px 0;}
            
               .homeCallouts .greyBox .content {min-height: 235px;}
               .homeCallouts .inner {padding: 0px 5px; }
               .homeCallouts .greyBox h2 {height: 30px; line-height: 1em; text-align: middle;}
               .homeCallouts .registerOnline img {float: left; margin-right: 5px;}
               .homeCallouts .inTheNews .title {font-weight: bold; margin-bottom: 10px;}
               .homeCallouts .inTheNews .link {margin: 10px 0;}
               .homeCallouts .inTheNews .desc {}
               
                /*2.3.1.1.3.2 grey box */
               .greyBox {background: #efefef; overflow: hidden;}
               .greyBox .content{background: #efefef; padding: 10px 12px; overflow: hidden; }
               .greyBox .topLeft {background: url(/images/background/grey_top_left.gif) no-repeat top left; height: 5px;}
               .greyBox .topRight {background: url(/images/background/grey_top_right.gif) no-repeat top right; height: 5px;}
               .greyBox .bottomLeft {background: url(/images/background/grey_bottom_left.gif) no-repeat bottom left; height: 5px;}
               .greyBox .bottomRight {background: url(/images/background/grey_bottom_right.gif) no-repeat bottom right; height: 5px;}
               .greyBox h2 {color: #007550; padding: 0 5px 7px 5px; border-bottom: 1px solid #b9b9b9;}

               /*2.3.1.1.3.3 calendar grid*/
               .calendar { width: 100%; border-collapse: collapse;}
               .calendar .monthName  th{font-size: 1.15em; padding: 5px; text-align: center; border: 1px solid #fff; background: #8f9c98; color: #fff;}
               .calendar .monthName a {padding: 0 15px; font-size: 1.1em; font-weight: bold; color: #cce797;}
               .calendar .monthName a:hover {border-bottom: none;color: #990000;text-decoration:none;}
               .calendar .dayName th{background: #c1c6c4; color: #333; border: 1px solid #fff; padding: 3px 5px; text-align: center;}
               .calendar td {vertical-align: top; font-size: .95em; width: 14%;text-align: center; padding: 3px; border: 1px solid #fff;}
               .calendar td.day {background: #e4e8e7; height: 60px;}
               .calendar .specialDay {background: #b8dcd0;}
               .calendar td.otherMonth {text-align: right; background: #f5f6f6; color: #b0b3b6;}
               .calendar .cal_day {text-align: right; }
               .calendar td a:hover {border-bottom: none;}
               .calendar .specialDay .cal_day { color: #990000; font-weight: bold;  padding-bottom: 5px;}
               td.specialDay a {color: #336699; padding-bottom: 10px; font-weight: bold; text-align: left; line-height: 110%;}
               td.specialDay a:hover {color: #990000; text-decoration: none;}         
               .hover_detail .eventTitle {padding-left: 5px; font-weight: bold;}
               .hover_detail p.cal_cat-1 {background: #962626; color: #fff;}
               .hover_detail p.cal_cat-2 {background: #72270a;}
               .hover_detail p.cal_cat-3 {background: #6b702a;}
               .hover_detail p.cal_cat-4 {background: #3d5b3d;}
               .hover_detail p.cal_cat-5 {background: #336666;}
               .hover_detail p.cal_cat-6 {background: #39396a;}
               .hover_detail p.cal_cat-7 {background: #3b2e3c;}
            
                table.calendar td a {display: block;}
                table.calendar td:hover, table.calendar td.iehover {z-index: 999;}
           
                td.specialDay .hover_detail {position: absolute; display: none; width: 13em; z-index: 999; text-align: left; background: #fff; border: 1px solid #999; filter: alpha(opacity=90); opacity: 0.9; -moz-opacity: 0.9; word-wrap: break-word; overflow: hidden;}
                td.specialDay:hover .hover_detail, td.iehover .hover_detail {display: block; }
                td.specialDay .hover_detail p {margin: 0.4em !important;}
                td .hover_detail .eventTitle {color: #fff; font-weight: bold; font-size: 1.05em; line-height: 110%; padding: 5px;}
       
                /*2.3.1.1.3.4 FAQ faqCat*/
                .faq-cat h5 {font-size: 1.1em; cursor: help;}
                ul.faq-cat {list-style: none; margin: 0; padding: 0;}
                ul.faq-cat .answer {margin-left: 20px;}

                ul.faq-cat li {padding-bottom: 8px;}
                ul.faq-cat h5 {margin-bottom: 0px;}
                ul.faq-cat li h5:first-letter {font-size: 1.2em; color: #92b946;}
                ul.faq-cat ul {margin-left: 15px; padding-left: 0;}
                ul.faq-cat ul li {margin: 0; padding-left: 0px;}
                
                /* 2.3.1.1.3.5 News list / .newsList*/
               .newsList {margin-bottom: 15px; border: 1px solid #eee;}
               .newsList .newsTitle {background: #eee; margin-bottom: 5px; padding: 4px 5px; font-size: 1.1em; font-weight: bold;}
               .newsList .newsDate {font-style: oblique; color: #666; margin-bottom: 5px; padding: 5px;}
               .newsList .newsAbst {padding: 5px; }
            
               /* 2.3.1.1.3.6 News Details .newsDetails */
               .newsDetails {}
               .newsDetails .newsTitle {font-size: 1.1em; font-weight: bold;}
               .newsDetails .newsDate {font-style: oblique; color: #666; margin-bottom: 10px;}
               .newsDetails .newsDesc {}
               
               /* 2.3.1.1.3.7 Quilt */
#quilt {position: relative;}
#quilt ul {margin: 0; padding: 0; list-style: none;}
#quilt a {position: absolute; color: #000; text-decoration: none; border: 2px solid transparent; background: #transparent; display: block; filter:alpha(opacity=60); opacity: .6; -moz-opacity:.6;}
#quilt:hover a {background: #fff;} 
#quilt a span.outer {}
#quilt a span.inner {}
#quilt a:hover {border-color: #d4d82d; cursor: hand;}
#quilt a span.note {position: absolute; width: 88%; padding: 2px 5px; background-color: #ffc; text-align: center; left: -40000em;}
#quilt a:hover .note {left: 0;}


               /*
               #quilt {}
               #quilt ul {margin: 0; padding: 0; list-style: none;}
               #quilt li {}
               #quilt a {color: #000; text-decoration: none; border: 1px solid transparent; background:transparent;}
               #quilt a span.outer {display: block; width: 98%; height: 98%; border: 2px solid: #000;}
               #quilt a span.inner {display: block; width: 98%; height: 98%; border: 2px solid: #fff;}
               #quilt a:hover {border-color: lime;}
               #quilt a span.note {position: absolute; bottom: -3em; width: 90px; padding: 2px 5px; background-color: #ffc; text-align: center; left: -45000px; margin-left: -50px;}
               #quilt a:hover span.note {left: 45px; z-index: 99;} 
               #quilt:hover a span.outer {border: 1px solid #000;}
               #quilt:hover a span.inner {border: 1px solid #fff;}
               
               
               #quilt {position: relative; width: 606px; background: #0e1a12; display: block; padding: 3px;}
               #quilt ul {margin: 0; padding: 0; list-style: none; width: 100%; background:transparent; position: absolute; top: 40px; left: 45px;}
               #quilt li {float: left; padding: 0px 15px 15px 0; width: 92px; height: 92px;}
               #quilt li a {color: #000; text-decoration: none; vertical-align: middle; width: 92px; height: 92px;  background: url(/images/misc/spacer.gif) repeat 0 0; display: block;}
               #quilt li:hover a, #quilt li a:hover {display: block!important; width: 92px; height: 92px; background: #000!important; border: 1px solid #edf8c3; color: #edf8c3; font-weight: bold; filter:alpha(opacity=90); opacity: .9; -moz-opacity:.9;}
               #quilt  a span.name{display: none}
               #quilt  a:hover span.name{ cursor: hand; width: 82px; height: 32px; z-index: 200!important; display:block!important; line-height: 110%; padding: 30px 5px 0 5px;}
               .quiltNumber {width: 602px; background: #0e1a12; color: #edf8c3; margin: 0; padding: 3px 5px; font-weight: bold;}
               */
               
               /*2.3.1.1.3.8 Search results #searchResults */
               #searchResults ul.disc li {padding-bottom: 10px;} 
               #searchResults .pading{}
               #searchResults .query {font-style: oblique; color: #990000; font-weight: bold;}
               
               /*2.3.1.1.3.9 Stories of Hope */
               .storiesList {margin-top: 25px; overflow: hidden; width: 100%;}
               .storiesList .story {height: 220px; float: left; margin: 0px 0px 30px 0; width:325px; overflow: hidden; }
               .storiesList .story .photo {float: left; width: 110px;margin-bottom: 10px;}
               .storiesList .story .photo img {width: 110px; max-width: 110px;}
               .storiesList .story .text {float: left;  width: 180px; margin: 0 10px; overflow: hidden;}
               .storiesList .story .fullName {color: #336699; border-bottom: 1px solid #aca89d; padding: 0 0 3px 5px; font-weight: bold; font-size: 1.2em;}
               .storiesList .story .abst {padding:5px 3px 10px 5px; line-height: 1.25em;}
               .storiesList .story .link{padding-left: 5px; font-weight: bold; }
               
               .moreStoriesTitle {color: #990000; font-size: 1.1em; font-weight: bold; margin: 0 0 .5em 0; padding: 0 0 0 5px; line-height: 110%;}
               .moreStoriesList {padding: 20px 5px; border-top: 1px solid #aca89d; border-bottom: 1px solid #aca89d; overflow: hidden; width: 100%;}
               .moreStoriesList .story {float: left; height: 100px;width: 190px; margin-left: 15px; overflow: hidden;}
               .moreStoriesList .story .photo {float: left; width: 60px; }
               .moreStoriesList .story .photo img {text-align: left; width: 55px; margin-right: 5px; max-width: 55px;}
               .moreStoriesList .story .text {vertical-align: middle; height: 100px;float: left; padding-left: 5px; width: 125px;}
               .moreStoriesList .story .text .fullName{margin: 15px 0 5px 0; line-height: 100%;}
               .moreStoriesList .story .text .link a{font-weight:normal;}
               
               .storyPaging {margin: 15px 0; width: 250px;  padding-left: 200px; text-align: center; overflow:hidden; }
               .storyPaging .text {padding: 3px 0; vertical-align: middle; float: left; width: 150px;}
               .storyPaging .page {padding: 2px 7px; border: 1px solid #999;}
               .storyPaging .previous {vertical-align: middle; float: left; width: 35px; height: 26px; background: url(/images/misc/previous.gif) no-repeat 0 50%;}
               .storyPaging .next {vertical-align: middle; float: left; width: 35px; height: 26px; background: url(/images/misc/next.gif) no-repeat 0 50%;}
               
               .readStory {}
               .readStory .photo {float: left; margin: 0 12px 10px 0;}
               
               /* 2.3.1.1.3.10 Event Details .eventDetails */
               .eventDetails {}
               .eventDetails .eventTitle {font-size: 1.1em; font-weight: bold;}
               .eventDetails .eventDate {font-style: oblique; color: #666; margin-bottom: 10px;}
               .eventDetails .newsDesc {}
               
               /* 2.3.1.1.3.11 Quilt Search form*/
               .quiltSearch {overflow:hidden; margin: 15px 0;}
               .quiltSearch form fieldset {border: 1px solid #abc2bb;}
               .quiltSearch form legend {color: #000; text-transform: uppercase; background: #e4efeb; padding: 4px 10px;  font-weight: bold; letter-spacing: 1px; border: 1px solid #abc2bb;}     
               .quiltSearch .field {margin-bottom: 7px;}
               .quiltSearch .field label {width: 200px; padding-right: 10px; text-align: right; float: left; font-weight: bold;}
               .quiltSearch input[type="submit"] {font-weight: bold; padding: 2px 5px;}
               .quiltSearch .submitBtn {font-weight: bold; margin-left: 210px;}
     
               /* 2.3.1.1.3.12 */
               .quiltMain {overflow: hidden;  padding: 14px 0 0 0; background: #f4fafa; border: 1px solid #abc2bb;text-align: center; margin: 0 auto;}
               .quiltMain ul {margin: 10px 0 10px 28px; padding: 0;}
               .quiltMain ul li {float: left; text-align: center; background: #293a35;padding: 3px; margin: 0 15px 15px 0; list-style: none; width: 130px; height: 130px;}
               .quiltMain ul li:hover {background: #7a271f;}
               .quiltMain a {border: none;} 
               .quiltMain img {border:none; margin: 0 auto; display: block; vertical-align: middle;}
    
               .viewQuilt {color: #edf8c3; background: #16251b; padding: 10px 10px 15px 10px;}
               .viewQuilt a {color: #edf8c3;}
               .viewQuilt .squareNumber {font-style: oblique; font-size: .9em; padding-left: 25px;}
               .viewQuilt .squareName {color: #d4f28b;padding-bottom: 3px; margin-bottom: 10px; font-weight: bold;}
               .viewQuilt img {display: block; margin: 0 auto; border: 1px solid #687d6d;}
            
               /* 2.3.1.1.3.13 div.quiltSearchResults */
               .quiltSearchResults {}
               .quiltSearchResults ul {margin: 0; padding: 0;}
               .quiltSearchResults ul li {width: 140px; padding: 5px; margin-bottom: 10px; background: #f6f6f6; height: 175px; list-style: none; float: left; margin-right: 10px;}
               .quiltSearchResults .img {vertical-align: bottom;}
               .quiltSearchResults img {border: 1px solid #999; background: #dee0e1; display: block; margin: 5px auto; width: 105px; height: 105px; vertical-align: bottom;}
               .quiltSearchResults img:hover {border: 1px solid #992c2c;}
               .quiltSearchResults .resultName {height: 30px; font-size: .90em; line-height: 100%; margin: 5px 0;}
               .quiltSearchResults .number {font-size: .85em; color: #999;font-weight: bold; font-style: oblique;}
           
               .quiltComment {margin: 15px 0;}
               .quiltComment fieldset {border: 1px solid #7a968e; padding: 15px;}
               .quiltComment legend {background: #7a968e; color: #fff; border: 1px solid #7a968e; padding: 3px 8px; font-weight: bold;}
               .quiltComment textarea {background: #fefefd; padding: 2px; border: 1px solid #eee;}
               .quiltComment .author {margin: 15px 0 0 0;}
               .quiltComment label {font-weight: bold;}
               .quiltComment input[type="text"]{background: #fefefd; border: 1px solid #eee; padding: 2px;}
               .quiltComment .submitBtn {margin-left: 20px; font-weight: bold; padding: 2px 5px;}   
     
               /* 2.3.1.1.3.14 div.becomeDonor */
               .becomeDonor {}
               .becomeDonor p {margin: 10px 0;}
               .becomeDonor input[type="submit"] {font-weight: bold; padding: 2px 5px;}
               .becomeDonor input[type="text"] {border: 1px solid #999; padding: 2px; margin-bottom: 5px;}
               .becomeDonor table {margin: 15px 0;}
               .becomeDonor .block {background: #fafafa; padding: 2px 5px; border: 1px solid #e6edeb; font-weight: bold; color: #445650;}
               .becomeDonor table td {font-weight: bold; padding-bottom: 3px;}
               .required {background: #e0e0e0; margin: 10px 0; padding: 2px 3px; border: 1px solid #999;}
               #field_error,  #yesno_error {margin: 15px 0; display: block; color: #9f2d21; font-weight: bold;}
   
      /* 2.3.2 Second column / div#secondCol */
      #secondCol {float: left; display: inline; width: 220px; margin-right: 20px;padding: 0px ;overflow: hidden; background: transparent;}
      .oneCol #secondCol {display: none;}
      .twoCol #secondCol {margin-left: 0;}
      .threeCol #secondCol {}
      #home #secondCol {display: none;}
      
         /* 2.3.2.1   default sidebar item  /div.sidebar   */
         .sidebar {margin: 0 0 15px 0px; padding:10px; width: auto; background: #fff;}
         .sidebar h2{font-size: 1.38em; font-weight: bold; margin: 0 0 .5em 0; padding: 0px 5px 5px 0;}
         .sidebar .content {width: 100%;}
         .sidebar .inner {}
                 
         /*2.3.2.2 sub/local nav div#subNav */
         #subNav {background: url(/images/navs/subnav_top_ie6.gif) no-repeat 0 0; margin: 0px 0 25px 0; line-height: 115%; width: 100%; overflow: hidden;}
         html>body #subNav {background: url(/images/navs/subnav_top.png) no-repeat 0 0; margin: 0px 0 25px 0; line-height: 115%; width: 100%; overflow: hidden;}
         #subNav .inner {background: url(/images/navs/subnav_bg_ie6.gif) repeat-x 0 0; margin-top: 7px; padding: 5px 10px; width: 200px; overflow: hidden;}
         html>body #subNav .inner {background: none; margin-top: 7px; padding:0px; overflow: hidden; width: 100%;}
      
         #subNav h2 {font-size: 1.15em; padding: 5px 5px 12px 10px; margin: 0; color: #000; text-transform: uppercase;}
         html>body #subNav h2 {background: url(/images/navs/sub_bg.png) repeat-x 0 0!important;font-size: 1.1em; padding: 5px 5px 12px 10px; margin: 0; color: #000; text-transform: uppercase;}
         #subNav ul {border-top: 1px solid #f5f4f4; padding: 0px 0 5px 0; margin: 0; }
         html>body #subNav ul {width: 220px; background: url(/images/navs/subnav_bg.png); border-top: 1px solid #f5f4f4; padding: 0px 0 5px 0; margin: 0; }
         #subNav ul a {border-bottom: 1px solid #f5f4f4;}
         #subNav li a {font-size: 1em; color: #990000; display: block; margin: 0; padding: 6px 5px 6px 15px;background: url(/images/navs/arrow_white.gif) no-repeat 5px 50%;}
         #subNav li a:hover, #subNav .current a {text-decoration: none;color: #ff0000; background: transparent url(/images/navs/arrow_red.gif) no-repeat 5px 50%; }
         #subNav ul li {display: inline; line-height: 120%;}
         #subNav .bottom {background: url(/images/navs/subnav_bottom_ie6.gif) no-repeat 0 100%; height: 15px;}
         html>body #subNav .bottom {background: url(/images/navs/subnav_bottom.png) no-repeat 0 100%; height: 15px;}
             
            /* 2.3.2.2.1     sub/local navigation the third level    */ 
            #subNav ul ul {padding: 0; border: none;}
            html>body #subNav ul ul {padding: 0; background: none!important; background-image:none; border: none;}
            #subNav li li a{padding-left: 30px;}
            #subNav .current li a, #subNav li li a {background: none; color: #666;}
            html>body #subNav .current li a, #subNav li li a {background: none!important; color: #666;}
            #subNav .current .current a, #subNav li li a:hover, #subNav .current li a:hover{ color: #333; background: url(/images/navs/arrow_red.gif) no-repeat 15px 50%!important; }  
               
           /*2.3.2.3 contact GoF box - */
           .contactGoL {background: url(/images/background/sidebar_shadow_top.png) no-repeat 0 0; width: 100%; padding: 0px; margin-bottom: 20px; overflow: hidden;}
           .contactGoL .content {background: url(/images/background/sidebar_shadow_bg.png) repeat-y 0 0; padding: 5px; margin-top: 15px; width: 210px; display: block; overflow: hidden;}
           .contactGoL .content p{}
           .contactGoL h2 {margin: 0; padding: 0;}
           .contactGoL img {display: block; margin: 0 auto;}
           .contactGoL .inner {margin: 0 15px; padding: 110px 0 5px 0;background: #efefef url(/images/misc/contactGoL.jpg) no-repeat 100% 0;}
           .contactGoL .link {padding: 0px 0 0px 25px; background: url(/images/misc/arrow_red.gif) no-repeat 17px 5px;}
           #thirdCol .contactGoL .link {padding: 0px 0 0px 20px; background: url(/images/misc/arrow_red.gif) no-repeat 12px 5px;}
           .contactGoL .bottom {background: url(/images/background/sidebar_shadow_bottom.png) no-repeat 0 100%;  height: 15px;}
         
           #thirdCol .contactGoL {background: url(/images/background/right_sidebar_shadow_top.png) no-repeat 0 0; }
           #thirdCol .contactGoL .content {background: #e4e3e3 url(/images/background/right_sidebar_shadow_bg.png) repeat-y 0 0; width: 190px; margin-top: 15px;}
           #thirdCol .contactGoL .bottom {background: url(/images/background/right_sidebar_shadow_bottom.png) no-repeat 0 100%;}
           #thirdCol .contactGoL  .content img {max-width: 160px;}
   
          /*2.3.2.4 tell us story */
           .tellStory {padding: 15px 25px 10px 25px; line-height: 120%;height: 260px; margin-bottom: 15px; color: #8c3a32; font-size: 1.2em; font-weight: bold; background: url(/images/misc/tell_story_bg.gif) no-repeat 0 0;}
           .tellStory h2 {font-size: 1.1em;}
           .tellStory .inner {margin-top: 150px;}
           .tellStory  a{padding: 2px 0;color: #000; background: url(/images/misc/tell_story_btn_off.gif) no-repeat 100% 50%; padding-right: 30px; }
           .tellStory a:hover {text-decoration: none!important;background: url(/images/misc/tell_story_btn_over.gif) no-repeat 100% 50%;padding-right: 30px; }
 
         /*2.3.2.4 share */
         
         .share {backgrund: transparent;}
         .share h2 {margin: 0; padding: 0;}
      
      /* 2.3.3 Third column / div#thirdCol */
       #thirdCol {background: #e4e3e3 url(/images/background/third_col_bottom.gif) no-repeat 0 100%; float: left; margin-left: 20px; margin-bottom: 15px; width: 220px; overflow: hidden; }
       #thirdCol .contentTop {background: url(/images/background/third_col_top.gif) no-repeat 0 0; float: left; width: 220px; margin: 0;} 
       #thirdCol #content {background: url(/images/background/third_col_bg.gif) repeat-x 0 0; margin-top: 2px; min-height: 150px; padding: 10px; }
      
       .oneCol #thirdCol {display: none;}
       .twoCol #thirdCol {display: none;}
       #home  #thirdCol {background: transparent; width: 320px; margin-left: 5px;}

           /* 2.3.3.1   donor drive /div.donorDrive  */ 
           .donorDrive {background: url(/images/background/donor_drive_top.png) no-repeat 0 0; width: 100%; overflow: hidden; margin-bottom: 15px; }
           .donorDrive .content {background: url(/images/background/donor_drive_bg.png) repeat-y 0 0; margin-top: 15px; padding: 10px 10px 0 10px; display: block; width: 300px; overflow: hidden;}
           .donorDrive h2 {margin: 0; padding: 0; display: inline;}
           .donorDrive img, .donorDrive p img {display: block; margin: 0 auto;}
           .donorDrive .content .inner p {text-align: center; vertical-align: middle;margin-bottom: 0!important; padding-bottom: 0px!important;}
           .donorDrive .inner {}
           .donorDrive .bottom {background: url(/images/background/donor_drive_bottom.png) no-repeat 0 100%; height: 15px; }
      
           /* 2.3.3.2   follow Us On/div.followUs  */      
           .followUs {background: #fff; border-top: 1px solid #aca89d; padding: 15px 5px 20px 5px;  margin: 0 0 20px 0; border-bottom: 1px solid #aca89d; overflow: hidden;}
           .followUs .content {width: 100%; float: left; overflow: hidden;}
           .followUs .inner {float: right; width: 100%; overflow: hidden; }
      
           .followUs img { text-align: right; }
           html>body .followUs img {float: right;}
           .followUs h2 {float: left; margin: 10px 0 10px 0; font-family: Georgia, Times, serif; font-weight: normal; font-size: 15px; color: #fff; padding: 8px 5px; width: 143px; background: url(/images/misc/follow_us_bg.jpg) no-repeat 0 0;}
           #home .followUs {width: 310px;margin: 0 5px 15px 5px; padding: 15px 0px; }
           #home .followUs h2 {margin-bottom: 0px}
           #home .followUs .inner {float:left; width: 155px;}  
              
           /*2.3.3.3 Featured Story ( dark grey gradient  sidebar item) */
           .featuredStory {width: 100%; padding: 0; margin-bottom: 20px; background: transparent;overflow: hidden;}/* 100% for IE 6 */
           .featuredStory .content{display: block; overflow: hidden; }
           .featuredStory h2 {color: #666; font-size: 1.153em; padding: 0 5px;}
           .featuredStory .inner {padding: 0px 5px;}
           .featuredStory img {display: block; background: #fff; padding: 10px; margin: 5px auto 10px auto;}
           
     /*..................................................................................
     2.4 Footer / div#footer  
     .................................................................................*/
    #footer {color: #666; overflow: hidden; margin: 0 0 10px 0; padding: 20px 15px; border-top: 5px solid #78927c;  width: 100%;}
   
      /* 2.4.1 Footer navigation / ul#footNav */
      #footNav {overflow: hidden; width: 500px; float: left; }
      #footNav ul {float: left; margin: 0; padding:0; background: url(/images/navs/foot_nav_divider.gif) no-repeat 0% 50%;}
      #footNav ul li {display: inline; padding: 0px 15px; background: url(/images/navs/foot_nav_divider.gif) no-repeat 100% 50%;}
      #footNav ul li a {font-size: 12px; color: #6699cc; margin: 0;}
      #footNav ul li a:hover, #footNav ul li.current a {text-decoration: none; font-weight: bold; color: #003366;}
 
      /* 2.4.2 Footer copyright / div.copyright */
      #footer .copyright {color: #666; float: left; width: 300px; overflow: hidden;}      
      
      /* 2.4.3 Footer donate logo/ div.donate */
      #footer .donate {float: right; width: 100px; overflow: hidden;}
      
      
      #submit_story label, #submit_story input {display: block; float: left; width: 140px; margin-right: 15px;}
      #submit_story input, #submit_story textarea {width: 300px;}
      #submit_story p {clear: both; margin: 1em 0; overflow: hidden; margin-left: 20px;}
   
      #schoolstats h3 {background:#e6e6e6; padding: 4px;}
      .stats {margin-bottom: 35px; border-bottom: 1px dotted gray;}
      .stats strong {font-weight: 0;}
      .stats .stats_bars {height:20px; float: left;}
      .stats .stats_numbers {float: right;}