/*
----------------------------------------
Kanye West Foundation
     Author:    Thought & Theory
---------------------------------------- */

/* zeros out everything */
@import "/css/whitespace-reset.css";

body {
	background: #fff;
	font: .8em/160% Helvetica, Arial, sans-serif;
	color: #666;
}

p { margin-bottom: .7em; }
small { font-size: 90%; }

/* links
---------------------------------------- */
a:link { 
  color: #26a9e1; 
  outline: none; 
  font-weight: bold;
}
a:visited { 
  color: #26a9e1; 
  outline: none; 
  font-weight: bold;
}
a:hover { 
  color: #ec1c24;
  outline: none; 
  font-weight: bold;
}
a:active { 
  color: #26a9e1; 
  outline: none; 
  font-weight: bold;
}

/* headers
---------------------------------------- */
h1, h2, h3, h4, h5 {
  line-height: normal;
  color: #333;
}
h1 { font-size: 280%; }
h2 { font-size: 220%; }
h3 { font-size: 180%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }

/* universal
---------------------------------------- */
.container {
  margin: 0 auto;
  width: 940px;
}

#header {
  float: left;
  width: 100%;
}
  #global {
    margin: 15px 0;
    float: left;
    width: 940px;
  }
    #logo {
      text-indent: -9999px;
      float: left;
      width: 258px; height: 68px;
      background: url(/images/logo.png) no-repeat;
    }
      #logo:hover { background-position: 0 -68px; }
    #account {    
      margin: 25px 0;
      float: right;
      width: 560px;
      color: #ccc;
      text-align: right;
    }
      #account strong { margin: 0 5px; color: #666; }
      #account span {
        padding: 20px 0 20px 55px;
        background: url(/images/bg_account.png) no-repeat;
      }
      #account a:link, #account a:visited, #account a:hover, #account a:active {
        margin: 0 5px;
        color: #666;
        font-weight: bold;
      }
        #account a:hover { color: #333; }
  #nav {
    float: left;
    width: 940px; height: 95px;
  }
    #nav a {
      text-indent: -9999px;
      float: left;
      height: 95px;
    }
      #nav li { float: left; }
      #nav_about {
        width: 169px;
        background: url(/images/nav_about.png) no-repeat;
      }
        #nav_about:hover { background-position: 0 -95px; }
      #about #nav_about { background-position: 0 -190px; }
      #nav_programs {
        width: 261px;
        background: url(/images/nav_programs.png) no-repeat;
      }
        #nav_programs:hover { background-position: 0 -95px; }
      #programs #nav_programs { background-position: 0 -190px; }
      #nav_blog {
        width: 147px;
        background: url(/images/nav_blog.png) no-repeat;
      }
        #nav_blog:hover { background-position: 0 -95px; }
      #blog #nav_blog { background-position: 0 -190px; }
      #nav_media {
        width: 166px;
        background: url(/images/nav_media.png) no-repeat;
      }
        #nav_media:hover { background-position: 0 -95px; }
      #media #nav_media { background-position: 0 -190px; }
      #nav_contact {
        width: 193px;
        background: url(/images/nav_contact.png) no-repeat;
      }
        #nav_contact:hover { background-position: 0 -95px; }
      #contact #nav_contact { background-position: 0 -190px; }

#feature {
  float: left;
  width: 100%; height: 306px;
  background: url(/images/bg_feature.png) 0 30px repeat-x;
}
  #feature_header {
    float: left;
    position: relative;
    width: 940px; height: 306px;
  }
    #feature_header img {
      padding: 0 20px;
      display: block;
    }
    #feature_overlay {
      float: left;
      position: absolute;
      top: 144px; left: 0;
      width: 940px; height: 169px;
      background: url(/images/overlay_feature.png) center bottom no-repeat;
    }

#application {
  margin: 40px 0;
  float: left;
  width: 100%;
}

/* forms */
fieldset {
  border: none;
  border-top: 1px solid #ddd;
}
  legend {
    margin: 0; padding: 0 20px 0 0;
    font-size: 120%;
    color: #333;
    font-weight: bold;
  }
  fieldset dd { margin: 0; padding: 0; }

#acct_management {
  margin: 40px 0;
  float: left;
  width: 100%;
  background: url(/images/bg_feature.png) 0 50px repeat-x;
}
  #login {
    margin: 0 auto; padding: 20px;
    width: 500px;
    background: #fff;
    border: 10px solid #26a9e1;
  }
  #username, #password, #forgot_email, #email_reg, #confirm_password {
    padding: 5px;
    border: 1px solid #ccc;
    width: 300px;
    font-size: 120%;
  }
  #acct_management p { margin-top: 10px; }
  #confirm_terms { margin-right: 5px; vertical-align: top; }
  #donate_register { margin-top: 20px; }
  #donations { margin-top: 40px; }
  
  .thank_slate, .blank_slate {
    margin: 20px 0; padding: 10px;
    border: 1px solid #ddd;
    background: #ffffcc;
  }
    .thank_slate p, .blank_slate p { margin: 0; }
    .blank_slate ul { margin-top: 20px; }

#pagination {
  padding-top: 20px;
  float: left;
  width: 690px;
  border-top: 1px solid #ddd;
}
  #pagination a:link, #pagination a:visited, #pagination a:hover, #pagination a:active {
    margin-right: 5px; padding: 5px;
    border: 1px solid #ddd;
    float: left;
    color: #999;
    background: #eee;
  }
  #pagination strong {
    margin-right: 5px; padding: 5px;
    float: left;
    border: 1px solid #ddd;
  }

#footer {
  padding: 64px 0 40px 0;
  float: left;
  width: 100%;
  font-size: 90%;
  background: url(/images/bg_footer.png) top left repeat-x;
}
  #mission {
    padding-left: 110px;
    float: left;
    width: 590px;
    color: #999;
    background: url(/images/bg_k_footer.png) no-repeat;;
  }
    .social_links { margin-top: 20px; }
      .btn_myspace {
        margin-right: 20px;
        text-indent: -9999px;
        float: left;
        width: 98px; height: 28px;
        background: url(/images/logo_myspace.png) no-repeat;
        display: inline;
      }
        .btn_myspace:hover { background-position: 0 -28px; }
      .btn_facebook {
        margin-right: 20px;
        text-indent: -9999px;
        float: left;
        width: 70px; height: 26px;
        background: url(/images/logo_facebook.png) no-repeat;
        display: inline;
      }
        .btn_facebook:hover { background-position: 0 -26px; }
  #footer_nav {
    float: right;
    width: 220px;
  }
    #footer_nav ul {
      margin-bottom: 10px;
      float: left;
      width: 220px;
    }
      #footer_nav ul li { float: left; }
      #footer_nav a:link, #footer_nav a:visited, #footer_nav a:hover, #footer_nav a:active  {
        padding: 2px 0;
        float: left;
        width: 80px;
        font-weight: bold;
        color: #666;
      }
        #footer_nav a:hover { color: #333; }
    .copyright { color: #999; }


/* page specific
---------------------------------------- */
/* index */
#blog_entries {
  float: left;
  width: 690px;
}
  #title_ourblog {
    margin-bottom: 40px;
    text-indent: -9999px;
    display: block;
    width: 220px; height: 49px;
    background: url(/images/title_ourblog.png) no-repeat;
  }
  .blog_entry {
    margin-bottom: 20px;
    float: left;
    width: 690px;
  }
    .blog_date {
      float: left;
      width: 50px;
      text-align: center;
      font-weight: bold;
    }
      .blog_date span { display: block; }
      .month { 
        padding: 2px 0; 
        border-bottom: 1px solid #ddd;
      }
      .date {
        padding: 7px 0;
        font-size: 180%;
        line-height: normal;
      }
    .blog_content {
      margin-left: 20px;
      float: left;
      width: 620px;
      display: inline;
    }
      .blog_content h3, .blog_content h4, .blog_content h5 { margin-bottom: 10px; }
      .blog_content blockquote {
        margin: 20px;
        font-size: 140%;
        line-height: 140%;
      }
      .blog_comments {
        padding: 2px 0 2px 22px;
        background: url(/images/icon_comment.png) 0 50% no-repeat;
      }
      
#banners {
  margin-bottom: 20px; padding-bottom: 20px;
  float: left;
  width: 220px;
  border-bottom: 1px solid #ddd;
}
  #banners img { display: block; }
  
#get_involved {
  float: right;
  width: 220px;
}
  #title_getinvolved {
    margin-bottom: 40px; 
    text-indent: -9999px;
    float: left;
    width: 212px; height: 94px;
    background: url(/images/title_getinvolved.png) no-repeat;
  }
  .get_action { 
    margin-bottom: 20px; 
    float: left;
    width: 220px;
  }
    #btn_partner {
      margin-bottom: 20px;
      text-indent: -9999px;
      float: left;
      width: 220px; height: 100px;
      background: url(../images/btn_partner.png) no-repeat;
    }
      #btn_partner:hover { background-position: 0 -100px; }
    #btn_donate {
      margin-bottom: 20px;
      text-indent: -9999px;
      float: left;
      width: 220px; height: 100px;
      background: url(/images/btn_donate.png) no-repeat;
    }
      #btn_donate:hover { background-position: 0 -100px; }
    #btn_word {
      margin-bottom: 20px;
      text-indent: -9999px;
      float: left;
      width: 220px; height: 100px;
      background: url(/images/btn_word.png) no-repeat;
    }
      #btn_word:hover { background-position: 0 -100px; }

/* about */
#about_us {
  float: left;
  width: 690px;
}
  #title_aboutus {
    margin-bottom: 40px; 
    text-indent: -9999px;
    display: block;
    width: 224px; height: 72px;
    background: url(/images/title_about.png) no-repeat;
  }
  #our_founder { margin-top: 40px; }
    #our_founder img {
      margin-right: 20px;
      float: left;
      width: 150px;
      display: inline;
    }
    #title_ourfounder {
      margin-bottom: 20px; 
      text-indent: -9999px;
      display: block;
      width: 419px; height: 99px;
      background: url(../images/title_ourfounder.png) no-repeat;
    }
  #board_of_directors { margin-top: 40px; }
    #title_board {
      margin-bottom: 20px; 
      text-indent: -9999px;
      display: block;
      width: 419px; height: 43px;
      background: url(/images/title_board.png) no-repeat;
    }
    .director_row {
      margin-bottom: 20px;
      float: left;
      width: 690px;
    }
      .director {
        float: left;
        width: 230px;
      }
        .director p { 
          margin: 0; 
          font-size: 90%;
        }
  #our_staff { 
    margin-top: 40px; 
    float: left;
    width: 690px;
  }
    #title_ourstaff {
      margin-bottom: 40px; 
      text-indent: -9999px;
      display: block;
      width: 219px; height: 44px;
      background: url(/images/title_ourstaff.png) no-repeat;
    }
    .staff_member {
      margin-bottom: 20px;
      float: left;
      width: 690px;
    }
      .staff_pic {
        float: left;
        width: 150px;
      }
      .staff_info {
        float: right;
        width: 520px;
      }

/* programs */
#program_list {
  float: left;
  width: 690px;
}
  #title_programs {
    margin-bottom: 40px;
    text-indent: -9999px;
    display: block;
    width: 360px; height: 71px;
    background: url(/images/title_programs.png) no-repeat;
  }
  .program {
    margin-bottom: 40px;
    float: left;
    width: 690px;
  }
    .program_icon {
      float: left;
      width: 200px;
    }
      .program_icon img { width: 180px; }
    .program_desc {
      float: right;
      width: 480px;
    }
      .program h2 { margin-bottom: 20px; }
    #curriculum { margin-top: 20px; }
      #curriculum h4 { margin-bottom: 20px; }
      #curriculum li {
        padding: 2px 0 2px 22px;
        background: url(/images/icon_word.png) 0 3px no-repeat;
      }
    
/* blog */
#title_ourblog_lg {
  margin-bottom: 40px;
  text-indent: -9999px;
  display: block;
  width: 314px; height: 70px;
  background: url(/images/title_ourblog_lg.png) no-repeat;
}
#blog_categories {
  float: right;
  width: 220px;
}
  #title_blogcategories {
    margin-bottom: 40px;
    text-indent: -9999px;
    display: block;
    width: 221px; height: 83px;
    background: url(/images/title_blogcategories.png) no-repeat;
  }
  #blog_categories li a {
    padding: 5px 10px 5px 42px;
    float: left;
    width: 168px;
    background: url(/images/icon_category.png) 10px 5px no-repeat;
    border-bottom: 1px solid #ddd;
  }
    #blog_categories li a.selected { color: #ec1c24; }
  #blog_subscribe {
    margin-top: 40px; 
    float: left;
    width: 220px;
  }
    #btn_subscribe {
      margin-bottom: 20px;
      text-indent: -9999px;
      display: block;
      width: 220px; height: 100px;
      background: url(/images/btn_subscribe.png) no-repeat;
    }
      #btn_subscribe:hover { background-position: 0 -100px; }
  #blog_links {
    margin-top: 40px;
    float: left;
    width: 220px;
  }
    #title_links {
      margin-bottom: 20px;
      text-indent: -9999px;
      display: block;
      width: 118px; height: 45px;
      background: url(../images/title_links.png) no-repeat;
    }
  #comments {
    margin-top: 20px;
    float: right;
    width: 620px;
  }
    #comments h3 { margin-bottom: 20px; }
    .comment {
      margin-bottom: 20px;
      float: left;
      width: 620px;
    }
      .comment_avatar {
        float: left;
        width: 60px;
      }
        .comment_avatar img {
          padding: 5px;
          border: 1px solid #ddd;
          background: #fff;
        }
      .comment_content {
        float: right;
        width: 510px;
      }
      .comment h5 small { 
        font-size: 80%; 
        color: #999;
      }
    #add_comment { 
      float: left;
      width: 620px;
    }
    #comment_body {
      padding: 5px;
      border: 1px solid #ccc;
      width: 608px;
      font-size: 120%;
    }
#title_category { margin-bottom: 20px; }

/* media */
#media_list {
  float: left;
  width: 690px;
}
  #title_media {
    margin-bottom: 40px; 
    text-indent: -9999px;
    display: block;
    width: 302px; height: 71px;
    background: url(/images/title_media.png) no-repeat;
  }
  #press_kits {
    margin-bottom: 20px;
    float: left;
    width: 690px;
  }
    .press_kit {
      padding: 0 0 0 34px;
      float: left;
      width: 656px;
      background: url(/images/icon_press.png) no-repeat;
    }
  #listing_categories {
    margin-bottom: 20px;
    float: left;
    width: 690px;
    background: url(/images/bdr_media.png) bottom center no-repeat;
  }
    #listing_categories li { float: left; }
    #listing_categories a:link, #listing_categories a:visited, #listing_categories a:hover, #listing_categories a:active {
      margin: 0 5px 0 0; padding: 15px 10px;
      float: left;
      width: 318px;
      font-size: 180%;
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      display: inline;
      background: #eee url(/images/bdr_media.png) bottom center no-repeat;
    }
      #listing_categories a.selected { background: #fff; }
  #galleries {
    margin-top: 20px;
    float: left;
    width: 690px;
  }
  .gallery {
    margin-bottom: 20px;
    float: left;
    width: 690px;
  }
    .gallery_thumb {
      float: left;
      width: 60px;
    }
      .gallery_thumb img {
        padding: 5px;
        border: 1px solid #ddd;
        background: #fff;
      }
    .gallery_desc {
      float: right;
      width: 580px;
    }
      .icon_flickr {
        padding: 2px 0 2px 22px;
        background: url(/images/icon_flickr.png) 0 50% no-repeat;
      }

/* contact us */
#contact_us {
  float: left;
  width: 690px;
}  
  #title_contact {
    margin-bottom: 40px; 
    text-indent: -9999px;
    display: block;
    width: 302px; height: 71px;
    background: url(/images/title_contact.png) no-repeat;
  }
  #spread_the_word {
    margin-bottom: 20px;
    float: left;
    width: 690px;
  }
    #spread_the_word ul { margin-top: 20px; }
    #spread_the_word li {
      padding: 2px 0;
      float: left;
      width: 172px;
    }
  #contact_info h5 { margin-bottom: 20px; }
  form#send_message { margin: 20px 0; }
    #i_name, #i_email, #i_phone, #i_message, #i_subject {
      padding: 5px;
      border: 1px solid #ccc;
      width: 400px;
      font-size: 120%;
    }
    #i_message { height: 150px; }