/*
 * filename : common.css
 * purpose  : Site-global style definitions.
 * version  : $Rev: 355 $
 *
 * blue   : #0079C2
 * gold   : #FFC82F
 * silver : #8C8C8C
 *
 */

/*
 * HTML element styles
 */
html,
body {
    font-family: Arial, Sans-Serif;
    font-size: 10px;
    color: #333;
    }
html {
    text-align: center;
    }
body {
    margin: 0px auto;
    text-align: left;
    width: 960px;    
    }
sup { 
    font-size: .8em;  
    vertical-align: .35em; 
    line-height: 0em;    
    }    
.border { 
    border-top: 1px solid #e7e7e7;
    padding-top: 15px;
    }        
h1 { 
    color: #0063be; 
    font-size: 18px; 
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.4em;
    }
    h1 span { font-weight: normal;}
h2 { font-size: 16px; margin-bottom: 10px; }
h2.highlight { 
    background: url("/App_Themes/togetherOne/graphics/bg_highlight.gif") top left no-repeat; 
    color: #0063be;
    font-size: 18px;
    padding: 7px 0 7px 10px;    
    margin-bottom: 20px;    
    }
h3 { 
    color: #231f20;
    font-size: 13px;
    margin: 5px 0;
    line-height: 1.3em;
    }
h3 span { font-size: 11px; font-weight: normal;}
h3.title { margin: 0 0 0 0; }
h4 {}
h5 {}
h6 {}

p { 
    line-height: 1.4em;
    margin-bottom: 10px;
}
p.small { font-size: 11px;}				    
p.meta {
    font-size: 11px;
    font-weight: bold;
    font-style: italic;
    margin: 0 0 5px 0;
    }
    p.meta span.name {}                                  
    p.meta span.date {}                       
p.description {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin: 0 0 10px 0;
    line-height: 1.4em;
    clear: left;                    
    }
    p.description span { 
        display: block; 
        clear: left; 
        margin-top: 4px;
        }

p.other { display: none; }
p.breadcrumb { 
    margin: 0;     
    padding: 10px 0 10px 0;             
    display: block; 
    text-align: right;
    }

ul.bulleted {
    list-style-type: disc;    
    margin-bottom: 15px;
    }    
ol.ordered {
    list-style-type: decimal;    
    margin-bottom: 15px;
    }        
ul.bulleted li, ol.ordered li { 
    margin: 0 0 5px 25px;     
    }    
li ul.bulleted, li ol.ordered { margin-top: 5px;}     

a:link,
a:active,
a:visited,
a:hover {       
    color: #0063BE;
    text-decoration: underline;
    cursor: pointer;
    }
a:hover { color: #1b81de;}

    
/*icon link styles*/    
a.arrowWhite, a.arrowGold, a.arrowSilver {
    float: left;
    padding: 4px 26px 0 0;
    height: 20px;
    display: block;
    font-weight: bold;
    text-decoration: none;
    }        
a.arrowWhite { background: url("/App_Themes/togetherOne/graphics/icon-arrowWhite.gif") top right no-repeat; }
a.arrowGold { background: url("/App_Themes/togetherOne/graphics/icon-arrowGold.gif") top right no-repeat; }
a.arrowSilver { background: url("/App_Themes/togetherOne/graphics/icon-arrowSilver.gif") top right no-repeat; }

a.email {  
    background: url(../graphics/icon_email.gif) top left no-repeat;    
    display: block;
    padding: 17px 0 17px 60px;
    text-decoration: none;
    margin: 10px 0;
    font-weight: bold;
    }   
a.viewAll { 
    background: url("/App_Themes/togetherOne/graphics/icon_view-all.gif") right no-repeat;     
    display: block;    
    padding: 5px 27px 5px 0;
    text-decoration: none;    
    font-weight: bold;
    }
a.back { 
    background: url("/App_Themes/togetherOne/graphics/icon_back.gif") top right no-repeat;
    text-decoration: none; 
    font-weight: bold;
    padding: 2px 27px 5px 0;
    }
a.viewArchive { 
    display: block;
    background: url("/App_Themes/togetherOne/graphics/icon_archive.gif") right no-repeat;
    text-decoration: none;     
    padding: 5px 27px 5px 0;
    font-weight: bold;
    }
a.arrowWhite:hover, a.arrowGold:hover, a.arrowSilver:hover, a.email:hover, a.viewAll:hover, a.back:hover, a.viewArchive:hover 
    { text-decoration: underline; }
a[rel="external"] {    
    background-image: url("/App_Themes/togetherOne/graphics/offsite_link.gif");
    background-repeat: no-repeat;
    background-position: right 3px;
    padding-right: 15px;
    }
a[rel="external"]:hover {
    background-position: right -80px;
    }

/*button styles*/
.joinWhite, .joinGrey, .loginGrey, .submit, .saveProfile, .changePassword, .sendFriend {
    border: none;
    height: 42px;
    display: block;
    clear: left;
    padding: 0;
    }
.submit {
    background: url("/App_Themes/togetherOne/graphics/btn_submit.gif") top left no-repeat;    
    width: 98px;    
    }    
.saveProfile {
    background: url("/App_Themes/togetherOne/graphics/btn_saveProfile.gif") top left no-repeat;    
    width: 135px;    
    }  
.joinWhite {
    background: url("/App_Themes/togetherOne/graphics/btn_join-whiteBg.gif") top left no-repeat;    
    width: 97px;    
    }
.joinGrey {
    background: url("/App_Themes/togetherOne/graphics/btn_join-greyBg.gif") top left no-repeat;    
    width: 97px;    
    }
.loginGrey {
    background: url("/App_Themes/togetherOne/graphics/btn_login-greyBg.gif") top left no-repeat;    
    width: 97px;    
    }
.changePassword {
    background: url("/App_Themes/togetherOne/graphics/btn_changePassword.gif") top left no-repeat;    
    width: 179px;    
    }    
.sendFriend {
    background: url("/App_Themes/togetherOne/graphics/btn_sendToFriend.gif") top left no-repeat;    
    width: 98px;    
    }        
.joinWhite:hover, .joinGrey:hover, .loginGrey:hover, .submit:hover, .saveProfile:hover, .changePassword:hover, .sendFriend:hover { 
    background-position: 0 -43px; 
    cursor: pointer;
    }
.imgReplace {    
    display: block;
    font-size: .1em;
    overflow: hidden;
    text-indent: -9999px;    
    }    
.clear { clear: both;}
/*
 * Header
 */
#header {
    background: url('/App_Themes/togetherOne/graphics/bg_header.gif') bottom left no-repeat;    
    }    
    #header ul.utilityNav {
        color: #666;
        margin: 12px 10px 12px 0;        
        overflow: hidden;
        width: 950px;      
        line-height: 1.3em;
        font-size: 11px;
        }    
        #header ul.utilityNav li {
            float: right;            
            margin-left: 5px;
            }
            #header ul.utilityNav li a:link,
            #header ul.utilityNav li a:visited,
            #header ul.utilityNav li a:active {
                color: #8C8C8C;
                border-left: 1px solid #8C8C8C;
                padding-left: 5px;
                text-decoration: none;
                }
                #header ul.utilityNav li a:hover { text-decoration: underline;}
            #header ul.utilityNav li.first a {
                border-left: 0px;
                }
            #header ul.utilityNav li.last a {}       
    #header div.navigation {        
        overflow: hidden;        
        width: auto;
        height: 85px;        
        }
         #header div.navigation a.logo {
            display: block;
            float: left;
            width: 200px;
            height: 45px;            
            margin: 15px 0 0 20px;
            }    
        #header div.navigation ul {            
            float: right;
            margin: 47px 12px 0 0;
            }
        
            #header div.navigation ul li {
                font-size: 13px;
                font-weight: bold;                                
                float: left;
                padding: 0 8px;
                border-left: 2px solid #FFF;     
                }
                #header div.navigation ul li.first { border: none; }
                #header div.navigation ul li a {    
                    background: url(../graphics/bg_nav.gif) top left no-repeat;
                    height: 13px;                    
                    }
                
                #header div.navigation ul li a.home { width: 34px;}
                #header div.navigation ul li a.home:hover { background-position: -0px -13px;}
                body.home #header div.navigation ul li a.home, body.home-logged-in #header div.navigation ul li a.home { /*width: 37px;*/ background-position: -0px -13px; }                 
                
                #header div.navigation ul li a.localSavings { width: 82px; background-position: -53px 0;}
                #header div.navigation ul li a.localSavings:hover { background-position: -53px -13px;}
                body.local-savings #header div.navigation ul li a.localSavings { /*width: 89px;*/ background-position: -53px -13px;}
                
                #header div.navigation ul li a.saveItForward { width: 94px; background-position: -154px 0;}
                #header div.navigation ul li a.saveItForward:hover { background-position: -154px -13px;}
                body.save-it-forward #header div.navigation ul li a.saveItForward { /*width: 101px;*/ background-position: -154px -13px;} 
                
                #header div.navigation ul li a.simpleSavingsIdeas { width: 127px; background-position: -267px 0;}
                #header div.navigation ul li a.simpleSavingsIdeas:hover { background-position: -267px -13px;}
                body.simple-savings-ideas #header div.navigation ul li a.simpleSavingsIdeas { /*width: 137px;*/ background-position: -267px -13px;}
                
                #header div.navigation ul li a.realStoriesAndTips { width: 114px; background-position: -413px 0;}
                #header div.navigation ul li a.realStoriesAndTips:hover { background-position: -413px -13px;}
                body.real-stories-and-tips #header div.navigation ul li a.realStoriesAndTips { /*width: 123px;*/ background-position: -413px -13px;} 
                
                #header div.navigation ul li a.aboutTheProgram { width: 115px; background-position: -546px 0;}
                #header div.navigation ul li a.aboutTheProgram:hover { width: 115px; background-position: -546px -13px;}
                body.about-the-program #header div.navigation ul li a.aboutTheProgram { /*width: 124px;*/ background-position: -546px -13px;}
                
                 
                
                #header div.navigation ul li a:link,
                #header div.navigation ul li a:active,
                #header div.navigation ul li a:visited,
                #header div.navigation ul li a:hover {                                   
                    color: #FFF;                    
                    }
                #header div.navigation ul li.first a:link,
                #header div.navigation ul li.first a:active,
                #header div.navigation ul li.first a:visited,
                #header div.navigation ul li.first a:hover {
                    border-left: 0px;
                    }
                #header div.navigation ul li.active a:link,
                #header div.navigation ul li.active a:active,
                #header div.navigation ul li.active a:visited,
                #header div.navigation ul li.active a:hover {
                    color: #FFC82F;
                    }   
                    
                    
                    
#content { 
    font-size: 12px;  
    margin-top: 20px;  
    }             
  


div.wrapper { 
    overflow: hidden;            
    float: left;
    width: 100%;
    }

.one-column {}                                        
.content-main { 
    float: left; 
    width: 700px;  
    padding-left: 20px;
    }



.blueContainer {
    overflow: hidden;
    width: 468px;
    background: url(../graphics/bg_blueContent-contain.gif) top left no-repeat;
    margin-bottom: 20px;
    }
    .blueContainerContent { padding: 30px 30px 0 30px; }    
    .blueContainer .bottom {         
        height: 20px; 
        padding: 0 40px 20px 0;
        background: url(../graphics/bg_blueContent-contain.gif) bottom left no-repeat; 
        }
        .blueContainer .bottom a { float: right; } 
#content .split { overflow: hidden;}
#content .split .left { float: left;}
#content .split .right { float: right; }



.content-sidebar { float: right; width: 238px; }                    
    .content-sidebar .entry {
        color: #444444;        
        float: right;
        font-size: 12px;
        overflow: hidden;
        margin-bottom: 10px;
        width: 200px;
        }
        .content-sidebar .entry .entryContent {
            padding: 15px 15px 0 15px;
            }                 
        .content-sidebar .entry .bottom { clear: left; height: 15px; }
                                
        .content-sidebar .gold { background: url(../graphics/bg_rightCol-gold.gif) top left no-repeat;}                        
            .content-sidebar .gold .bottom { background: url(../graphics/bg_rightCol-gold.gif) bottom left no-repeat;}
                
        .content-sidebar .grey { background: url(../graphics/bg_rightCol-grey.gif) top left no-repeat;}                        
            .content-sidebar .grey .bottom { background: url(../graphics/bg_rightCol-grey.gif) bottom left no-repeat;}
            .content-sidebar .grey  p.description { padding-bottom: 0;}           
        
        .content-sidebar .greyLrg { width: 238px; background: url(../graphics/bg_rightCol-greyLrg.gif) top left no-repeat;}                        
            .content-sidebar .greyLrg .bottom { background: url(../graphics/bg_rightCol-greyLrg.gif) bottom left no-repeat;}
        .content-sidebar .entry h1 { font-size: 17px;} 
        .content-sidebar .entry h2 { 
            color: #0063be;
            font-size: 14px;
            font-weight: bold;
            margin: 0 0 10px 0;
            }
            .content-sidebar .entry h2 a { text-decoration: none;}
        .content-sidebar .entry h3.title { font-size: 12px; margin: 0 0 3px 0; }        
        .content-sidebar .entry p.meta { margin: 0 0 7px 0; font-weight: bold; font-style: italic;}
        
        
        
          
/*
 * Footer
 */
#footer {
    clear: both;
    color: #8C8C8C;    
    padding-top: 30px;
    text-align: center;        
    overflow: hidden;
    width: 100%;
    }
    #footer .main {
        float: left;            
        width: 822px;
        padding-bottom: 50px;
        overflow: hidden;
        }
    #footer ul {
        margin: 25px 0 8px 240px;        
        font-size: 12px;                 
        overflow: hidden;   
        }
        #footer ul li {
            float: left;
            border-left: 1px solid #8C8C8C;                        
            margin: 0;            
            padding: 0 10px;            
            text-transform: uppercase;
            line-height: 1.1em;
            }
        #footer ul li.first { border: none;}        
            #footer ul li a:link,
            #footer ul li a:active,            
            #footer ul li a:visited {
                color: #8C8C8C;
                text-decoration: none;
                }
                #footer .main ul li a:hover { text-decoration: underline; }
    #footer p { 
        clear: left; 
        font-size: 9px; 
        color: #8d8c8c; 
        line-height: 1.3em;
        margin: 0;
        }    
    #footer a.footer-link {        
        float: right;
        background: url(../graphics/bg_footer-link.gif) top left no-repeat;        
        width: 138px;
        height: 77px;
        margin: -20px 0px 0px 0px;
        padding: 0px;
        }
        
        
        
/*common form styles*/
fieldset {
    clear: left;
    margin-bottom: 8px;
    }        
fieldset span {color: Red;}
fieldset label { 
    float: left;    
    text-align: right;     
    margin-right: 10px;    
    padding: 5px 0;
    }
fieldset input, fieldset textarea, fieldset select { 
    border: 1px solid #cecece;         
    color: #777;
    padding: 2px;
    width: 200px;
    }
fieldset select { width: 206px; }
fieldset.check label { 
    float: none; 
    text-align: left;
    margin: 0;    
    padding: 0;        
    }    
    *:first-child+html fieldset.check label { line-height: 1.6em; } * html fieldset.check label { line-height: 1.6em; }
fieldset.check input {
    border: none;    
    float: left;
    padding: 0;
    margin: 0 5px 0 0;
    width: auto;    
    }     
fieldset .hint { display: none;}     


.error { padding-bottom: 10px; display: block;}    
.error-list, .error {
    line-height: 1.2em;
    font-size: 11px;
    color: Red;
    }
    .error-list ul { 
        list-style-type: disc;
        margin: 5px 0 5px 15px;
        font-size: 10px;
        font-weight: bold;
        }