/* ==================================================================================
 * WPIRG - CSS Style sheet.
 *
 * NOTE: Changing this CSS is an error prone activity (the various browsers supported
 *       by this web site react slightly differently to the various CSS parameters/tags.
 * NOTE: If you want to change the shape of this web page use the SIZE_??? constants
 *       in config.inc.
 * NOTE: If you wish to change the images incorporated into this CSS you just need
 *       to change the
 * ================================================================================== */



/* ==================================================================================
 * General styles
 * ================================================================================== */
/* Defining the style for the hyper links */
a { 
        color: #545e2d; 
}
a:hover { 
        color: #c06d30; 
}

h1 {
        color: chocolate;
        font-family: Georgia,Verdana,'Trebuchet MS';
        font-weight: normal;
        font-size: 2em;
        background-repeat: no-repeat; 
        background-position: left center; 
        margin-bottom: 1em;
        
}
#homepage h1 {
        background-image: url("http://www.wpirg.org/wpirg/images/grass.gif"); 
        padding-left: 40px; 
}

h1:first-letter { 
        font-size: 2em;
} 

/* Style used for the footer text headings */
b.orange { color: #fd8f40; }

span.bodytext { 
        font-size: 12px; 
} 

#photo {
        text-align:center;
        line-height: 14px;
        font-size: 11px;
        margin: 2px 0px 0px 0px;
        padding: 0px; 
}

.imagefloat {
        float: right;
        margin: 10px;
        border: 1px solid #e2ebc2;
        padding: 5px; 
}

/* MSIE6.0 does not do this very well: wait until MSIE7.0 */
.firstbigletter {
        font-family: Georgia,Verdana,'Trebuchet MS';
        color: chocolate;
        font-size: 2.5em;
        font-weight: normal;
        line-height: 80%;
        letter-spacing: 0px;
}

/* MSIE6.0 does not do this very well: wait until MSIE7.0 */
p.firstbig:first-letter {
        font-family: Georgia,Verdana,'Trebuchet MS';
        color: chocolate;
        font-size: 2.5em;
        float: left top;
        font-weight: normal;
        line-height: 80%;
        letter-spacing: 0px;
}

p.gradient {
        padding-left: 12px;
        font-size: 12px;
        color: #000;
        font-family: 'Trebuchet MS'; 
}

h3 {
        margin-top: 0px;
        margin-bottom: 0px;
        color: #4b4e40;
}

h2.small {
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 15px; 
}

/* Images Within the Content */
img.float {
        float: left;
        margin-top: 7px;
        margin-left: 7px;
        margin-bottom: 7px;
        margin-right: 14px;
}

/* ==================================================================================
 * Table styles.
 * ================================================================================== */
td.Name
{ 
        background-color: #d8e0bf; 
        font-size: 12px;  
        border-left: 1px solid #fff; 
        border-bottom: 1px solid #fff; 
}

td.Job { 
        background-color: #d8e0bf; 
        font-size: 12px;  
        border-left: 1px solid #fff; 
        border-bottom: 1px solid #fff; 
}

td.Time { 
        background-color: #d8e0bf; 
        font-size: 12px;  
        border-left: 1px solid #fff; 
        border-bottom: 1px solid #fff; 
}

td.Number { 
        border-bottom: 1px solid #fff; 
        font-size: 12px; 
}

td.MailList { 
        font-size: 12px;  
        border-left: 1px solid #fff; 
        border-bottom: 1px solid #fff; 
}

/* ==================================================================================
 * Body tag style.
 *
 * ================================================================================== */

/* Body style: General style for entire page */
body {
        margin:0px;
        font-family: 'Trebuchet MS';
        text-align: center; /* for IE */
}

/* ==================================================================================
 * #Wrapper - defines the size of the size of the whole page.
 * #Main - defines the area between the bottom of the orange-bar and the footer on
 *         page.php pages.  This area includes the areas #content and #sidebar.
 * ================================================================================== */

/* Main wrapper for entire page */
#wrapper {
        width: 790px;
        background-color: white;
        padding: 0px;
        margin: 0 auto;   /* align for good browsers */
        text-align: left; /* counter the body center */
        border: 1px solid #cce473;
}

/* Main is the section between the bottom of the header and top of the footer */
#main {
        top:0;
        left:  0;
        width: 100%;
        margin: 0px auto;
        padding: 0px;
        background-color: #a8bd5b;
}

/* ==================================================================================
 * #Front - Defines the area (like #main) between the bottom of the orange-bar and
 *          the top of the footer.  This is for the front page *ONLY* because the
 *          body of the page takes the full width.  For pages with sidebars (see
 *          page.php) #main is used instead.
 * ================================================================================== */

/* Defining The Frontpage main area */
#front {
        background-color: #e2ebc2;    /* Green WPIRG background colour */
        border: thin dotted #e2ebc2;  /* This is a kludge because of Firefox v2.0 */
}

ul#front { 
        margin-left: 0px; 
        padding-left: 0px; 
        margin-top: 2px; 
        margin-bottom: 1px; 
        white-space: nowrap; 
}

#front li { 
        display: inline; 
        list-style-type: none; 
        font-weight: normal; 
        margin-right: 5px;
        padding-right:0px; 
        font-family: 'Trebuchet MS'; 
}

#front p { 
        font-size: 13px; 
        line-height: 22px;
}

#front a.announce:link p, #front a.announce:visited p{
        margin: 0px;
        font-size: 18px;
        color: chocolate;
        font-weight: normal;
        text-decoration: none;
        font-family: Georgia,Verdana,'Trebuchet MS';
}

#front a:link, #front a:visited {
        color: #3d4421;
        font-weight: bolder; 
        color: chocolate;
        font-size: 12px;
        text-decoration: none;
}
#front a:hover {
        color: #7c8b43; 
        color: orange;
        text-decoration: none;
}


#front h2 { margin-bottom: 18px; 
        margin-top: 0px;
        color: #343434;
}

#front h3 { 
        border-bottom: 1px solid #000; 
        display: block; 
        color: #333; padding: 3px; 
        padding: 0px 0px 0px 20px;
        margin: 0px 0px 20px 20px; 
        font-size: 14px;
}

/* ==================================================================================
 * Sidebar - Is the CSS style for the sidebar (menu) on the page.php pages (not the
 *           main page (index.php).
 * ================================================================================== */
/* Defining the Sidebar */
#sidebar {
        /* position: relative; */
        float: right;
        top: 0;
        right: 0;
        width: 200px;
        margin: 0;
        padding: 0;
        background-color: #626e35;
}

/* ==================================================================================
 * Button - This is the style for the sidebar menu buttons.
 * ================================================================================== */

/* This is the "See more events on communityevents.ca"
 * link. Oy.
 */
.button a.mainlink { 
        display: block; 
        font-size: 14px; 
        font-weight: bold;  
        color: #ffc27b; 
        margin-bottom: 4px; 
        margin-top: 10px;
        padding: 2px; 
        padding-left: 12px;
        font-variant: small-caps;
        background: #707e3c; 
        text-decoration: none;
}       
.button a.mainlink:hover { 
        color:#ffffff ; 
}

/*
.button {
        width: 100%; 
        padding: 0 0 0 0; 
        margin-bottom: 0em; 
        font-family: 'Trebuchet MS'; 
        color: #333; 
}
*/

/* Top level: no bullet 
 * Other levels: orange boxes indented according to 
 *   associated level. 
 */

/* First level lists and beyond */
div#sidebar li a:hover { 
        color: #cce473; 
}


div#sidebar li {
        /* border-bottom: 1px dotted #707e3c; */
        margin: 0; 
        padding: 0.2em 1em 0.2em 0;
}               

div#sidebar li a { 
        display: block; 
        font-size: 12px; 
        font-weight: normal; 
        color: #fff; 
        text-decoration: none; 
}

/* DIE! We don't know what this is for! DIE! */
/*
.button li.event a {
        padding: 2px 4px 0px 4px;
        font-size: 13px;
} 
*/

div#sidebar ul {
        list-style: none; 
        margin: 0; 
        padding: 0; 
        padding-left: 1.3em;
        border: none; 
        background: #707e3c; 
}

div#sidebar ul ul { 
        list-style-type: inherit;
        list-style-image: url('http://www.wpirg.org/wpirg/images/button.gif');
        
} 

div#sidebar li li { 
        padding: 0.1em 0;
} 


/* Second level links have orange boxes */
div#sidebar li li a { 
        display: block; 
        font-size: 11px; 
        font-weight: normal; 
        color: #fff; 
        text-decoration: none; 
        background: #707e3c; 
}


.button li p.news { 
        display: block; 
        font-size: 13px; 
        font-weight: normal; 
        font-variant: normal; 
        padding: 8px;
        text-decoration: none; 
        color: #fff; 
        background: #707e3c; 
        padding-left: 22px;
}


.button p.eventtext {
        font-size: 12px;
        font-variant: normal; 
        color: #ffc27b;
        margin-bottom: 4px; 
        margin-top: 0; 
        font-variant: normal;
        padding: 4px 4px 4px 4px; 
        background: #707e3c; 
}               


.button p { 
        font-size: 14px; 
        font-weight: bold;  
        color: #ffc27b;
        margin-bottom: 4px; 
        margin-top: 10px;  
        padding: 2px; 
        padding-left: 12px; 
        font-variant: small-caps;
}       
/* ==================================================================================
 * The #events style defines how the events are displayed on the WPIRG.org index.php page.
 * ================================================================================== */
#events p {
        /* line-height: 20px; */
        font-size: 15px;
        /* margin: 1px; */
}


#events a.one:link, #events a.one:visited {
        display: block;
        margin: 0px;
        padding: 5px;
        padding-left: 20px;
        background: #e7eecc;
        font-size: 12px;
        text-decoration: none;
}

#events a.community:link, #events a.community:visited {
        margin: 0px;
        padding: 5px;
        padding-left: 20px;
        font-size: 14px;
        text-decoration: none;
}

#events a.two:link, #events a.two:visited {
        display: block;
        margin: 0px;
        padding: 5px;
        padding-left: 20px;
        background: #eaf1d4;
        font-size: 12px;
        text-decoration: none;
}

#events ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
}

/* ==================================================================================
 * Gradient[2] - The gradient styles for the sidebar menu (bottom [and top]).
 * ================================================================================== */
#gradient {
        background: url('http://www.wpirg.org/wpirg/images/fade-grade.gif');
        background-repeat: repeat-x;
        height: 31px;
}

#gradient2 {
        background: url('http://www.wpirg.org/wpirg/images/fade-grade2.gif');
        background-repeat: repeat-x;
        height: 31px;
}

/* ==================================================================================
 * Contentlist - Orange square bulleted lists in body of page.
 * ================================================================================== */
#contentlist {
        margin: 10px;
        padding: 0px 0px 20px 30px;
}

#contentlist ul li p {
        margin: 0px;
        padding: 0px;
        line-height: 17px;
}

#contentlist ul {
        margin: 10px;
        padding: 0px;
        list-style-type: square;
        list-style-image: url('http://www.wpirg.org/wpirg/images/button.gif');
}

#contentlist ul li  {
        padding:0px;
        color:black;
}

/* ==================================================================================
 * Contentlistlink - Orange square bulleted lists that react to mouse-hover (the text 
 *                   and the bullet will dim when the mouse hovers.
 * ================================================================================== */
#contentlistlinks {
        margin: 9px 30px 10px 10px;
        padding: 0px 0px 0px 30px;
}

#contentlistlinks li {
        list-style-type: none;
}

#contentlistlinks ul li a {
        margin: 0px;
        padding: 8px 0px 0px 18px;
        background-image: url('http://www.wpirg.org/wpirg/images/button.gif');
        background-repeat: no-repeat;
        background-position: 0 1em; 
}

#contentlistlinks ul li a:hover {
        margin: 0px;
        padding: 8px 0px 0px 18px;
        background-image: url('http://www.wpirg.org/wpirg/images/button2.gif');
        background-repeat: no-repeat;
        background-position: 0 1em; 
}

/* ==================================================================================
 * Content - Section of page that sits to the LHS of the Sidebar division.  This occurs
 *           on the page.php type pages (not the index.php page).
 * ================================================================================== */

/* Defining the Content Area */
#content {
        background-color: #e2ebc2;
        margin: 0 200px 0 0; /* The RHS margin is to make room for the sidebar */
        padding: 10px;
        min-height: 720px;   /* For everybody but MS IE6.0 */
        font-size: 13px; 
}
/* for Internet Explorer (because it doesn't understand min-height yet!)*/
/*\*/
* html #content {
        height: 720px;
}
/**/

ul#content { 
        margin-left: 0; 
        padding-left: 0; 
        margin-top: 2px; 
        margin-bottom: 1px; 
        white-space: nowrap; 
}
#content  ul li { 
        font-weight: normal; 
        padding-right: 0; 
        font-family: 'Trebuchet MS'; 
}

#content ul li p { 
        font-size: 13px; 
        line-height: 22px;
}

/* Force MSIE6.0 to keep the ourfans.inc table within the boarder of #contents
 * instead of breaking the page on the RHS */
#content table.ourfans{
        /* width: 560px; */
        width: 100%;
}

#content li { 
        margin-right: 5px;
}

#content p { 
        margin-left: 23px; 
        color: #000; 
}

#content h2 { margin-bottom: 18px; 
        margin-top: 0px;
        color: #343434;
}

#content h3 { 
        border-bottom: 1px solid #000; 
        display: block; 
        color: #333; padding: 3px; 
        padding: 0px 0px 0px 20px;
        margin: 0px 0px 20px 20px; 
        font-size: 14px;
}

#content a:link, #content a:visited {
        color: #3d4421;
        text-decoration: underline; 
        font-weight: bolder; 
        font-size: 12px;
}

#content a:hover {
        text-decoration: none;
        color: #7c8b43; 
}

#content a.announce:link p, #content a.announce:visited p{
        margin: 0px;
        font-size: 18px;
        color: chocolate;
        font-weight: normal;
        text-decoration: none;
        font-family: Georgia,Verdana,'Trebuchet MS';
}


/* ==================================================================================
 * Header - The style for the WPRIG logo on grass header (main header).
 * ================================================================================== */
#header {
        margin: 0px auto;
        padding: 0px;
        height: 142px;
        width: 790px;
        background-image: url('http://www.wpirg.org/wpirg/images/educatingheader.jpg');
        background-repeat: repeat-x;
}

/* ==================================================================================
 * Header-Bottom - Style for the horizontal menu bar below the main header.
 * ================================================================================== */
#header-bottom {
        border-top: 1px solid #fff;
        color: #ffffff;
        margin: 1px;
        padding: 0px;
}


#header-bottom a:link, #header-bottom a:visited {
        color: #fff; 
        font-size: 15px; 
        font-family: 'Trebuchet MS'; 
        text-decoration: none; 
        font-weight: normal;
        padding: 10px 5px; 
}

#header-bottom a.active:link, #header-bottom a.active:visited {
        color: #fdbb75; 
}

#header-bottom a:hover {
        color: #cce473;
}

#header-bottom ul { 
        margin: 0px;
        padding: 0px;
        white-space: nowrap;
        text-align: center;
}
 
#header-bottom li { 
        display: inline; 
        list-style-type: none; 
        font-weight: normal; 
        padding-right:0px; 
}

#header-bottom table { 
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 30px;
}

/* ==================================================================================
 * Orange-Bar - The style for the orange bar crossing at the bottom of the header.
 * ================================================================================== */
/* Header Orange Gradient */
#orange-bar {
        width: 790px;
        height: 8px;
        padding: 0px;
        margin: 1px;
        background-image: url('http://www.wpirg.org/wpirg/images/orange-header.gif');
        background-repeat: repeat-x;
}

/* ==================================================================================
 * Footer style is for the WPIRG footer (including the Contact Information:, Office 
 * Hours: and Mailing Address: boxes.
 * ================================================================================== */
#footer { 
        background-color: #505a2b; 
        border: 1px solid #e2ebc2; 
}

#footer p { 
        color: #fff; 
        margin: 0px; 
        padding: 4px; 
        font-size: 13px;
}

/* ==================================================================================
 * End of WPIRG CSS style sheet.
 * ================================================================================== */