/* --------------------------------------------------------------
   elements.css
-------------------------------------------------------------- */


/* Section image
-------------------------------------------------------------- */

.secondary-image {
    margin-left: 16px;
    width: 148px;
    height: 148px;
    overflow: hidden;
    }

.secondary-image img{
    width: 148px;
    height: 148px;
    }



/* Breadcrumbs
-------------------------------------------------------------- */

.breadcrumbs {
    width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    height: 9px;
    _overflow: hidden;
    border-bottom: 1px dotted #d9d9ca; 
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    }



/* Titles
-------------------------------------------------------------- */

.title, .title a {
    width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    height: 9px;
    _overflow: hidden;
    background-repeat: no-repeat;
    background-position: left top;
    }

.title { padding: 0 0 15px 0; }

.title a { display: block; }

.title a:hover { background-position: left -18px; }

.title a span, .title span {display: none;}

h3.title { padding: 20px 0 5px 0; margin-bottom: 0px}

.wrap {height: 18px; }







/* More bars
-------------------------------------------------------------- */

.more {
    border-top: 1px dotted #d9d9ca;
    padding: 9px 0 12px 0;
    .padding: 9px 0 0 0;
    width: 100%;
    font-size: 10px;
    line-height: 12px;  
    text-transform: uppercase;
    }

    #home .more { padding: 8px 0; line-height: 10px;}

.all, .tabs, .rss {
    float: left;
    overflow: hidden;
    }

.all { width: 50%; }

    #home .all { width: 100px; }

.tabs { width: 80px; }

.rss { width: 50%; }

    #home .rss { width: 100px; }

.rss a {
    background: url('/design/img/icon_rss.png') no-repeat left -1px;
    display: block;
    float: right;
    width: 21px;
    height: 14px;
    padding: 0 0 0 16px;
    }

a.rss_icon {
    background: url('/design/img/icon_rss.png') no-repeat left top;
    padding: 0 0 0 16px;
    }



/* Sharing
-------------------------------------------------------------- */


.post-share  { 
    overflow: hidden;  
    height: 12px;
    padding: 12px 0;
    margin: 12px 0;
    border-top: 1px dotted #edede6;
    border-bottom: 1px dotted #edede6;
    }

.post-share .etaf_email,
.post-share .print,
.post-share .share { 
    display: block; 
    height: 12px; 
    float: left;
    }

.post-share .facebook,
.post-share .twitter { 
    margin-top: -3px;
    display: block; 
    height: 17px; 
    float: left;
    }


.post-share .etaf_email,
.post-share .print,
.post-share .facebook,
.post-share .twitter { 
    cursor: pointer;
    }

.post-share .etaf_email { background: url('/design/img/in-focus-email.png') no-repeat left 0; width: 73px;}
.post-share .print      { background: url('/design/img/in-focus-print.png') no-repeat left 0; width: 69px;}
.post-share .share      { background: url('/design/img/in-focus-share.png') no-repeat left 0; width: 42px;}
.post-share .facebook   { background: url('/design/img/in-focus-facebook.png') no-repeat left 0; width: 23px;}
.post-share .twitter    { background: url('/design/img/in-focus-twitter.png') no-repeat left 0; width: 17px;}

.post-share .etaf_email span,
.post-share .print span,
.post-share .facebook span,
.post-share .twitter span { display:none; }



/* ETAF */

#etaf {
    background: url('/design/img/etaf_tile_alpha.png') no-repeat left top;
    _background: url('/design/img/etaf_tile.png') no-repeat left top;
    width: 449px;
    height: 323px;
    padding: 8px;
    margin: 0 0 0 -225px;
    text-align: left;
    position:absolute;
    top: 320px;
    left: 50%;
    z-index: 1000010;
    }

#etaf .title {
    background: url('/design/img/etaf_title_tile.png') repeat-x left top;
    width: 433px;
    height: 18px;
    padding: 8px;
    margin: 0;
    overflow: hidden;
    }

#etaf .title a {
    background: transparent;
    display: inline;
    width: 433px;
    height: auto;
    margin: 0;
    }


#etaf .title a img {
    float: right;
    margin: 2px 2px 0 0;
    }





/* New Sharing
-------------------------------------------------------------- */


.share-bar  { 
    height: 20px;
    padding: 8px 0;
    margin: 12px 0;
    border-top: 1px dotted #edede6;
    border-bottom: 1px dotted #edede6;
    }

.share-bar .facebook-like { 
    display: block; 
    width: 85px; 
    height: 20px;
    float: left;
    }

.share-bar .tweet-button { 
    display: block; 
    width: 90px; 
    height: 20px;
    float: left;
    }

.share-bar .sharethis { 
    display: block; 
    width: 46px; 
    _width:30px; 
    float: left;
    padding: 2px 0;
    overflow: hidden;
    }

.share-bar .sharethis .st_email,
.share-bar .sharethis .st_sharethis { 
    display: block;
    float: left;
    height: 16px; 
    width: 16px;
    }

.share-bar .sharethis .st_sharethis { 
    margin-right: 10px;
    }

.share-bar .sharethis .st_email { 
    _display: none;
    }

.share-bar .print { 
    display: block; 
    height: 20px; 
    float: left;
    cursor: pointer;
    background: url('/design/img/share-print.png') no-repeat left 0; 
    width: 20px; 
    margin: 2px 0 0 10px; 
    }

.share-bar .e-updates { 
    display: block; 
    height: 16px; 
    float: right;
    cursor: pointer;
    background: url('/design/img/share-e-updates.png') no-repeat left 0; 
    width: 65px; 
    margin: 2px 0 0 0;
    }

.share-bar .e-updates span,
.share-bar .print span { display:none; }






/* Intro
-------------------------------------------------------------- */


.intro {
    background: url('/design/img/divider780.jpg') no-repeat left bottom;
    width: 740px;
    padding: 20px 20px 58px 20px;
    }

.advocacy_areas .intro {
    padding: 15px 20px 38px 20px;
    }

.issues .intro {
    padding: 10px 20px 38px 20px;
    }

.communities-collaborating-to-reconnect-youth .intro, .campaign-for-youth .intro, .boys-and-young-men-of-color .intro { 
   padding-top: 36px; 
}
.federal_policy .intro {
    padding: 15px 20px 38px 20px;
    }




/* Tabs -------------------------------------------------------------- */

/* Publications Tabs-------------------------------------------------------------- */

.publications_tabs #tabs {
    margin-top: 20px;
    }

.publications_tabs .ui-tabs-nav {
    list-style: none;
    margin: auto;
    padding: 0;
    width: 780px;
    overflow: hidden;
    display: block;
    outline: 0;
    background: url('/design/img/publications_tabs_border.png') repeat-x left bottom;
    }

.publications_tabs .ui-tabs-nav li {
    margin: 0;
    float: left;
    min-width: 20px; /* be nice to Opera */
    overflow: hidden;
    text-align: center;
    display: block;
    outline: 0;
    font-size: 14px;
    line-height: 16px;
    }

.publications_tabs .ui-tabs-nav li a {
    padding: 10px 12px;
    background: #f6f6f1;
    border: 1px solid #e2e2d6;
    border-left: none;
    display: block;
    }

.publications_tabs .ui-tabs-nav a.communities {
    background: #efefe6;
    }

.publications_tabs .ui-tabs-nav li.first {
    border-left: 1px solid #e2e2d6;
    margin-left: 20px;
    }

/* old version */
.publications_tabs .ui-tabs-nav .ui-tabs-selected a,
.publications_tabs .ui-tabs-nav .ui-tabs-selected a.communities {
   font-weight: bold;
   color: #8c8c8b;
   z-index: 2;
   border-bottom: 1px solid white;
   background: white;
   }

/* new version */
.publications_tabs .ui-tabs-nav .ui-tabs-active a,
.publications_tabs .ui-tabs-nav .ui-tabs-active a.communities {
   font-weight: bold;
   color: #8c8c8b;
   z-index: 2;
   border-bottom: 1px solid white;
   background: white;
   }


/* Panel */

.publications_tabs .ui-tabs-panel {
    clear: both;
    width: 740px;
    background: white;
    padding: 20px;
    }



/* Resources & Publications Search -------------------------------------------------------------- */

.keyword_search, .filters {
    float: left;
    width: 50%;
    }

.keyword_search .input { width: 250px; }

.keyword_search fieldset { 
    margin: 4px 0 4px 0;
    padding: 0;
    }

.keyword_search fieldset input,
.keyword_search label { 
    display: block;
    float: left;
    }

.keyword_search fieldset input { 
    width: 22px;
    }

.keyword_search label { 
    font-weight: normal; 
    font-size: 11px;
    padding: 2px 0 0 0;
    }

.keyword_search .submit { 
    font-weight: normal; 
    font-size: 14px;
    background: #a70000;
    color: white;
    border: 1px solid #660000;
    margin: 15px 0 0 0;
    padding: 6px;
    }


.filters select { margin: 0 0 15px 0; }





/* Big Toggles Version-------------------------------------------------------------- */

.toggle #tabs {
    text-align: center;
    }

.toggle .ui-tabs-nav {
    list-style: none;
    margin: auto;
    padding: 0;
    width: 300px;
    height: 16px;
    overflow: hidden;
    display: block;
    outline: 0;
    }

.toggle .ui-tabs-nav li {
    margin: 0;
    float: left;
    height: 16px;
    min-width: 20px; /* be nice to Opera */
    overflow: hidden;
    text-align: center;
    display: block;
    outline: 0;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    }

.toggle .ui-tabs-nav li a {
    padding: 0 10px;
    }

.toggle .ui-tabs-nav li.rightborder {
    border-right: 1px solid #8c8c8b;
    }

/* old version */
.toggle .ui-tabs-nav .ui-tabs-selected a {
   font-weight: bold;
   color: #8c8c8b;
   z-index: 2;
   }

/* new version */
.toggle .ui-tabs-nav .ui-tabs-active a {
   font-weight: bold;
   color: #8c8c8b;
   z-index: 2;
   }


/* Panel */

.toggle .ui-tabs-panel {
    clear: both;
    width: 740px;
    background: white;
    text-align: left;
    }



/* Issues Overview Module -------------------------------------------------------------- */

#issues_overview  { width: 380px; padding: 0 20px; float:left; margin: -15px 0 0 0; }

#issues_overview .title a { background-image: url('/design/img/a_title_issues.png');  }






/* In Focus Module -------------------------------------------------------------- */

#in_focus  { width: 380px; min-height: 200px; _height: 200px; padding: 0 20px; float:left; margin: -15px 0 0 0; }

#in_focus .title a { background-image: url('/design/img/a_title_in_focus.png');  }

#in_focus h3 { margin-bottom: 5px; }

#in_focus span { font-size: 12px; }



/* In Focus Page -------------------------------------------------------------- */

.in_focus { padding: 5px 0 15px 0; margin-bottom: 20px; border-bottom: 1px dotted #d9d9ca; }

.in_focus .date { margin-bottom: 0px; }

.in_focus h3 { margin: 5px 0; }

.in_focus .permalink { font-size: 10px; text-transform: uppercase; }




/* Announcement Module -------------------------------------------------------------- */

#announcement { 
    width: 320px;
    overflow: hidden;
    border: 1px solid #eeeee5;
    background: #f9f9f5;
    padding: 9px;
    }

#announcement .title { background-image: url('/design/img/title_sign_on_letter.png');  }

#announcement h3 { margin-bottom: 5px; }

#announcement span { font-size: 11px; line-height: 15px; }
#announcement span a { font-size: 10px; }

#announcement .imgright {
  width: 120px;
  }




/* Interior Highlights Tabs -------------------------------------------------------------- */


#index #highlights #tabs {
    overflow: hidden;
    border: 1px solid #eeeee5;
    background: #f9f9f5;
    padding-top: 9px;
    }

    #index .narrow #tabs { width: 338px; }
    #index .wide #tabs { width: 740px; }

#index #highlights #tabs .title, #index #highlights #tabs .title a {
    background-image: url('/design/img/a_title_highlights.png'); 
    float: left; 
    width: 110px; 
    font-size: 10px;
    text-transform: uppercase;
    height: 9px;
    _overflow: hidden;
    background-repeat: no-repeat;
    background-position: 9px 0;
    background-color: #f9f9f5;
    border: none;
    }

#index #highlights #tabs .title { padding: 0; }

#index #highlights #tabs .title a { display: block; }

#index #highlights #tabs .title a:hover { background-position: 9px -18px; }

#index #highlights #tabs {
    margin-top: 20px;
    }

#index #highlights .ui-tabs-nav {
    list-style: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    display: block;
    outline: 0;
    background: url('/design/img/highlights_tabs_border.png') repeat-x left bottom;
    }

    #index .narrow .ui-tabs-nav { width: 338px; }
    #index .wide .ui-tabs-nav { width: 740px; }

#index #highlights .ui-tabs-nav li {
    margin: 0;
    float: left;
    min-width: 20px; /* be nice to Opera */
    overflow: hidden;
    text-align: center;
    display: block;
    outline: 0;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    }

#index #highlights .ui-tabs-nav li a {
    padding: 3px 7px;
    background: #eeeee5;
    border: 1px solid #eeeee5;
    border-left: none;
    display: block;
    }

#index #highlights .ui-tabs-nav li.first {
    border-left: 1px solid #eeeee5;
    margin-left: 20px;
    }

/* old version */
#index #highlights .ui-tabs-nav .ui-tabs-selected a {
   font-weight: bold;
   color: #8c8c8b;
   z-index: 2;
   border-bottom: 1px solid white;
   background: white;
   }

/* new version */
#index #highlights .ui-tabs-nav .ui-tabs-active a {
   font-weight: bold;
   color: #8c8c8b;
   z-index: 2;
   border-bottom: 1px solid white;
   background: white;
   }

/* Panel */

#index #highlights .ui-tabs-panel {
    clear: both;
    background: white;
    padding: 9px;
    }


    #index .narrow .ui-tabs-panel { width: 320px; }
    #index .wide .ui-tabs-panel { width: 722px; }



/* General Tab Properties-------------------------------------------------------------- */

/* old version */
.ui-tabs-nav .ui-tabs-selected a:link,
.ui-tabs-nav .ui-tabs-selected a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: default;
    }

/* new version */
.ui-tabs-nav .ui-tabs-active a:link,
.ui-tabs-nav .ui-tabs-active a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: default;
    }

.ui-tabs-nav a:hover,
.ui-tabs-nav a:focus,
.ui-tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
    }

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { .ui-tabs-hide {  display: none; } }

.ui-tabs-hide { display: none; }







/* Related
-------------------------------------------------------------- */


.related {
    background: url('/design/img/divider780.jpg') no-repeat left top;
    width: 740px;
    padding: 20px;
    margin-top: 20px;
    }


/* Related Items
-------------------------------------------------------------- */

.related #meet_our_experts,
.related #in_the_states {
    float: left;
    overflow: hidden;
    width: 220px;
    margin: 0 0 20px 0; 
    min-height: 220px;
    }

.related .borderleft {
    margin: 0 0 20px 19px; 
    padding: 0 0 0 20px; 
    border-left: 1px dotted #d9d9ca; 
    }




/* DID YOU KNOW
-------------------------------------------------------------- */

#did_you_know {
    overflow: hidden;
    width: 580px;
    margin: 20px 0; 
    min-height: 220px;
    }

    .related #did_you_know { width: 470px; margin: 0 0 20px 0; padding-right: 20px; float: left; }

    .related #did_you_know .title { padding-bottom: 6px;  }
    .related #did_you_know .title a { background-image: url('/design/img/a_title_did_you_know.png');  }


.dyk_item {
    margin: 0 0 20px 0; 
    padding: 0 0 20px 0; 
    border-bottom: 1px dotted #d9d9ca; 
    }

.fact_image {
     float: right;
     width: 290px;
     overflow: hidden;
     margin-left: 15px;
     text-align: center;
     }

.fact_big {
     font-size: 20px;
     line-height: 22px;
     }

.fact_small {
     font-size: 14px;
     }

.fact_source { 
     color: #a7a7a7; 
     font-size: 10px;
     line-height: 11px;
     display: block;
     margin-top: 6px;
     text-align: left;
     }

.fact_link {
     font-size: 10px;
     text-transform: uppercase;
     display: block;
     margin-top: 6px;
     }



/* MEET OUR EXPERTS
-------------------------------------------------------------- */


.related #meet_our_experts {
    }

    .related #meet_our_experts .title { padding-bottom: 6px;  }
    .related #meet_our_experts .title a { background-image: url('/design/img/a_title_meet_our_experts.png');  }

.related #in_the_states {
    }



/* IN THE STATES
-------------------------------------------------------------- */

#in_the_states #communities .title a { background-image: url('/design/img/a_title_communities.png');  }


.related #in_the_states .state_pulldown {
    width: 139px;
    margin-right: 6px;
    }

.related #in_the_states .state_pulldown select {
    width: 137px; margin: 0;
    }

.related #in_the_states .state_enlarge { width: 75px;  }

.related #in_the_states .state_enlarge #enlarge_map_button { cursor: pointer;  }

#secondary #enlarge_map_button { cursor: pointer; display: block; height: 22px; padding: 15px 0 15px 15px; }





/* enlarged map
-------------------------------------------------------------- */

.ui-widget-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important; 
    background: url('/design/img/modal_overlay.png') center top;
    }


#enlarged_map {
    background: white;
    width: 740px;
    height: 550px;
    }




/* left column banners
-------------------------------------------------------------- */

.banner {
  margin: 20px 0 0 20px;
  width: 140px;
  }





/* floating images
-------------------------------------------------------------- */

.imgright {
  float: right;
  margin: 0 0 10px 10px;
  }

.imgleft {
  float: left;
  margin: 0 10px 10px 0;
  }

.thumbright {
  border: 1px solid white;
  float: right;
  margin: 0 0 8px 8px;
  }

.thumbleft {
  border: 1px solid white;
  float: left;
  margin: 0 8px 8px 0;
  }




/* dividers
-------------------------------------------------------------- */


.divider {
    border-bottom: 1px dotted #bbcee2;
    width: 740px;
    height: 1px;
    font-size: 1px;
    line-spacing: 1px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    }


.divider180 {
    background: url('/design/img/divider180.png') no-repeat left top;
    width: 180px;
    height: 2px;
    }


/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: .1em;
  margin: 0 0 1.45em;
  border: none;
}

hr.space {
  background: #fff;
  color: #fff;
}


/* Content Columns */
.leftcolumn {float: left; width: 48%; padding: 20px 0 0 0; }
.rightcolumn {float: right; width: 48%; padding: 20px 0 0 0; }
.threecolumns {background: url('/design/img/intro_3col.png') no-repeat top center; width: 740px; }

.rightcolborder {float: right; width: 40%; padding: 0 0 0 20px; margin: 0 0 0 20px; border-left: 1px dotted #d9d9ca; font-size: 12px; line-height: 17px;}



/* Site Map */

.sitemap {
    border-bottom: 1px dotted #d9d9ca; 
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    }

.sitemap ul     { 
    list-style-type: none; 
    margin: 0; 
    font-weight: bold;
    float: left;
    width: 185px;
    }

.sitemap ul.states { 
    float: none;
    width: 780px;
    }

.sitemap ul ul  { 
    float: none;
    list-style-type: disc;  
    margin: 0 0 0 1.5em; 
    .margin: 0 0 0 .5em; 
    font-weight: normal;
    font-size: 12px;
    width: 165px;
    border: none;
    }

.sitemap ul.states ul { 
    margin: 0; 
    width: 780px;
    }

.sitemap ul.states ul ul { 
    margin: 0 0 1.5em 1.5em;
    float: left;
    width: 160px; 
    }


/* Babies in Child Care
-------------------------------------------------------------- */

#babies .dividers {
    width:756px;
    height:auto;
    }

#babies .dividers h1 {
    width:450px;
    height:69px;
    background:url(/design/img/title-key-principles.gif) no-repeat top left;
    margin:0 auto;
    }

#babies .dividers h1 span {
    display:none;
    }

#babies .column {
    width:21%;
    float:left;
    padding: 0 15px;
    background: url(/design/img/column-dividers.gif) no-repeat top right;
    }

#babies .first { padding: 0 15px 0 0; }

#babies .column ul {
    list-style: outside square;
    padding:0;
    margin:0 0 0 14px;
    }

#babies .column li {
    font-size:12px;
    line-height: 15px;
    color:#818181;
    padding: 0 0 8px 0;
    margin:0;
    }

#babies .column a {
    color:#920000;
    text-decoration:none;
    }

#babies h2.blue {
    font-size:14px;
    line-height:17px;
    font-weight:bold;
    color:#496aa4;
    padding:0;
    margin:0;
    height:100px;
    }

#babies h3 {
    font-size: 14px;
    font-weight: bold;
    color: #616161;
    text-transform: uppercase;
    padding: 0 0 10px 0;
    margin: 0;
    }

.babiesinchildcare #project-bar a {
    width: 780px;
    height: 33px;
    background: url('/design/img/projectbar-babies-in-childcare.png') no-repeat left top;
    display: block;
    }

.babiesinchildcare #project-bar span {
    display: none;
    }





/* Work Support Strategies
-------------------------------------------------------------- */

.issues.work-support-strategies .intro h3 { margin-bottom: 3px }

.issues.work-support-strategies .intro p.date { margin:  0 0 3px 0;  }


.issues.work-support-strategies .pad p.date { margin:  10px 0 3px 0;  }

.issues.work-support-strategies .pad h3 { margin-bottom: 3px }

.issues.work-support-strategies .pad p.author { font-size: 10px; text-transform: uppercase; margin:  0 0 3px 0;  }

.issues.work-support-strategies .pad p.description,
.issues.work-support-strategies .pad p.description { font-size: .95em; line-height: 1.25;  }

.issues.work-support-strategies .more { border: none;  }


#grantee-main {
    float: left;
    width: 65%;
    margin-top: 20px;
    }
    
#grantee-sidebar {
    float: right;
    width: 32%;
    margin-top: 20px;
    }
    
#grantee-main h2,
#grantee-sidebar h2 {   
    margin-bottom: 10px;
    font-size: 11px; 
    text-transform: uppercase;
    font-weight: bold;
    }     
    
#grantee-snapshot,
#grantee-data-tools {   
    border: 1px solid #eeeee5;
    padding: 10px;
    margin-bottom: 20px;
    font-size: .95em;
    line-height: 1.2;
    }
    
#grantee-snapshot {
    background: #f9f9f5;
    }
    
#grantee-snapshot p {   
    margin-bottom: 10px;
    }   
    
#grantee-snapshot p:last-child,
#grantee-data-tools p:last-child {   
    margin-bottom: 0;
    }