/* --------------------------------------------------------------
   home.css
-------------------------------------------------------------- */


/* ADVOCACY AREAS MENU */

#advocacy_areas {
    padding: 20px 20px 0 20px;
    height: 30px;
    }


/* TIER1 */

#tier1 {
    width: 920px;
    min-height: 460px;
    _height: 460px;
    margin: 20px 0 0 20px;
    text-align: left;
    _overflow: hidden;
    background: white url('/design/img/tier1_home_tile.png') repeat-y 310px top;
    }

#tier1 #featured,
#tier1 #highlights,
#tier1 #signup_and_map {
    float: left;
    overflow: hidden;
    }


/* Featured Rotator */

#featured {
    margin: 0 20px 0 0;
    width: 290px;
    }

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

#featured .media {
    width: 290px;
    height: 190px;
    }

#featured .media a {
    width: 290px;
    height: 190px;
    display: block;
    }

#featured .media a:hover {
    width: 280px;
    height: 180px;
    border: 5px solid #cfcfc1;
    }

#featured .text {
    width: 280px;
    min-height: 215px;
    _height: 215px;
    padding: 10px 0;
    }

#featured h1 {
    font-size: 22px;
    line-height: 22px;
    margin: 0;
    }

#featured p {
    font-size: 13px;
    line-height: 17px;
    padding: 6px 0 0 0;
    margin: 0;
    }

#featured p a {
    font-size: 10px;
    text-transform: uppercase;
    }

#featured .rotator_controls { width: 136px; margin-left: 100px; /* margin-left: 86px; */}





/* Highlights */

#home #highlights {
    width: 280px;
    margin: 0 20px;
    }

#home #highlights .title { padding: 0 0 6px 0; }

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

#home #highlights .rotator_controls { width: 79px; }

#home #highlights .list { min-height: 180px; }

#home #highlights .list li { width: 280px; }

#home #highlights #highlights_frame1,
#home #highlights #highlights_frame2,
#home #highlights #highlights_frame3 { min-height: 180px; _height: 200px; }

#home #highlights .more { border-top: none; }

/* Carousel 
-------------------------------------------------------------- */
.banners { 
  background: url('/design/img/banner_rotator_tile.jpg') no-repeat left 13px;
  float: left;
  position: relative;
  padding: 0 6px; 
  display: inline-block; }

  #banner_rotator li {
    width: 140px;
    height: 90px;
    display: block;
    margin-right: 12px;
    float: left;
  }
  
  .caroufredsel_wrapper {
    padding: 5px 0 0 0;
    width: 601px !important;
    float: left;
    overflow: hidden;
  }
  
  #banners-next {
    display: block;
    position: absolute;
    right: 10px;
    top: 40px;    
    width: 9px;
    height: 17px;
    cursor: pointer;
    background: transparent url('/design/img/banner_rotator_next.png') no-repeat 0 1px;
  }

  #banners-prev {
    display: block;
    position: absolute;
    left: 7px;
    top: 40px;
    width: 9px;
    height: 17px;
    cursor: pointer;
    background: transparent url('/design/img/banner_rotator_back.png') no-repeat 0 1px;
  }



/* Rotator & Controls
-------------------------------------------------------------- */

.hidden {display: none;}

.rotator_controls  {
    height: 11px;
    overflow: hidden;
    list-style: none;
    margin: auto;
    padding: 4px 0;
    }

.rotator_controls  li {
    float: left;
    margin: 0;
    min-width: 11px; /* be nice to Opera */
    }

.rotator_controls  .selected a {
    z-index: 2;
    }

.rotator_controls  .frame-prev,
.rotator_controls  .frame-1,
.rotator_controls  .frame-2,
.rotator_controls  .frame-3,
.rotator_controls  .frame-4,
.rotator_controls  .frame-5,
.rotator_controls  .frame-6,
.rotator_controls  .frame-next {
    float: left;
    height: 11px;
    overflow: hidden;
    text-align: center;
    display: block;
    outline: 0;
    }

.rotator_controls  .frame-prev {
    background: url('/design/img/rotator_back.png') no-repeat left top;
    width: 11px;
    }

.rotator_controls  .frame-1,
.rotator_controls  .frame-2,
.rotator_controls  .frame-3,
.rotator_controls  .frame-4,
.rotator_controls  .frame-5,
.rotator_controls  .frame-6 {
    background: url('/design/img/rotator_button.png') no-repeat center top;
    width: 19px;
    }

.rotator_controls  .frame-next {
    background: url('/design/img/rotator_next.png') no-repeat left top;
    width: 11px;
    }

.rotator_controls  .frame-prev:hover,
.rotator_controls  .frame-1:hover,
.rotator_controls  .frame-2:hover,
.rotator_controls  .frame-3:hover,
.rotator_controls  .frame-4:hover,
.rotator_controls  .frame-5:hover,
.rotator_controls  .frame-6:hover,
.rotator_controls  .frame-next:hover  {
    background-position: left -23px;
    }

.rotator_controls  .ui-state-active .frame-prev,
.rotator_controls  .ui-state-active .frame-1,
.rotator_controls  .ui-state-active .frame-2,
.rotator_controls  .ui-state-active .frame-3,
.rotator_controls  .ui-state-active .frame-4,
.rotator_controls  .ui-state-active .frame-5,
.rotator_controls  .ui-state-active .frame-6,
.rotator_controls  .ui-state-active .frame-next {
   background-position: left -45px;
   }

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

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

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

.rotator_controls a span,
.rotator_controls .ui-tabs-selected a span {
    display: none;
    }



/* Twitter Feed */


#twitter-feed {
    margin: 12px 0 0 0;
    width: 270px;
    }

#twitter-feed  { border-top: 1px dotted #d9d9ca; padding: 20px 0 0 0; }

#home #highlights #twitter-feed .title  { background-image: url('/design/img/a_title_clasp_dc_on_twitter.png'); display: block; width: 270px; height: 14px; padding-bottom: 0;  }

#home #highlights #twitter-feed .title:hover  { background-position: left -18px; }

#home #highlights .list { min-height: 125px; }

#twitter-feed .list .tweet{ 
    display: block; 
    font-size: .9em; 
    line-height: 1.25em; 
    text-decoration: none;
    }

#twitter-feed .list .tweet a { 
    display:inline-block; 
    font-size: 1em; 
    }

#twitter-feed .list span.date { 
    font-size: 10px; 
    line-height: 1.1em; 
    color: #818181; 
    text-transform: uppercase; 
    display: block; 
    margin-top: 3px;
    }


#twitter-feed .list span.date a { display: inline-block; color: #818181; }
#twitter-feed .list span.date a:hover { color: #525252; }




/* Sign Up, Connect and In The States */


#signup_and_map {
    margin: 0 0 0 20px;
    width: 270px;
    }

#signup  { border-bottom: 1px dotted #d9d9ca; padding: 0 0 20px 0; }

#signup .title  { background-image: url('/design/img/title_stay_informed.png'); height: 39px; padding-bottom: 0;  }




#connect  { border-bottom: 1px dotted #d9d9ca; padding: 14px 0; }

#connect .title  { background-image: url('/design/img/title-connect.png'); width: 76px; height: 9px; margin-top: 7px; padding-bottom: 0; float: left;}

#connect .facebook-like { width: 270px; height: 32px; float: left; overflow: hidden; }

#connect .twitter-follow { width: 70px; height: 23px; float: left; overflow: hidden; }

#connect a { display: block; width: 34px; height: 23px; float: left; }

#connect a.rss-feed,
#connect a.linked-in,
#connect a.you-tube { display: block; width: 31px; height: 20px; float: left; }

#connect a.rss-feed span,
#connect a.linked-in span,
#connect a.you-tube span { display: none;}

#connect a.rss-feed { background: url('/design/img/icon-rss.png') no-repeat left top;  }

#connect a.linked-in { background: url('/design/img/icon-linkedin.png') no-repeat left top;  }

#connect a.you-tube { background: url('/design/img/icon-youtube.png') no-repeat left top;  }




#in_the_states { margin: 20px 0 0 0; }

#in_the_states .title { padding-bottom: 6px;  }

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


#in_the_states .state_pulldown,
#in_the_states .state_enlarge {
    float: left;
    margin-top: 15px;
    }

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

#in_the_states .state_pulldown select {
    border: 1px solid #d9d9c5;
    font-size: 10px;
    text-transform: uppercase;
    color: #898989;
    padding: 2px;
    width: 162px;
    }

#in_the_states .state_enlarge { width: 100px;  }

#in_the_states .state_enlarge a {
    border: 1px solid #d9d9c5;
    padding: 3px 3px 4px 18px;
    .padding: 3px 3px 2px 18px;
    background: url('/design/img/bullet_enlarge.png') no-repeat 3px 3px;
    display: block;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    }

#in_the_states .state_enlarge a:hover {
    border: 1px solid #999977;
    }



/* TIER2 */

#tier2 {
    width: 960px;
    margin: 20px 0 0 0;
    padding: 14px 0 0 0;
    text-align: left;
    _overflow: hidden;
    background: url('/design/img/divider940.png') no-repeat center top;
    }


#anniversary {
    float: left;
    overflow: hidden;
    }

#anniversary {
    width: 306px;
    height: 107px;
    }