@font-face { font-family: "Trade Gothic LT Std Condensed"; src: url("tradegothicltstdcn.otf") format("opentype"); }
@font-face { font-family: "Trade Gothic LT Std Bold Condensed"; src: url("tradegothicltstdbdcn.otf") format("opentype"); }

/* defaults */
* { margin: 0; padding: 0; }
.left { float: left; }
.right { float: right; }
.text-right { text-align: right; }
br, .clear { clear: both; }
body { font-family: Helvetica, Arial, sans-serif; background: black url("images/bg_chalkboard.jpg") fixed; }
a { color: black; text-decoration: none; }

/* layout */
div.container { width: 960px; margin: auto; }
div#top { background: #ddd; padding: 10px; box-shadow: 1px 1px 5px black; position: relative; z-index: 10; }

/* header */
h1 { display: inline-block; width: 251px; height: 40px; background: url("images/header_logo.png"); text-indent: -9999px; margin-left: 10px; }

/* connect with us */
div#connect { width: 320px; }
div#connect span { font-family: "Trade Gothic LT Std Condensed"; text-transform: uppercase; font-size: 18px; line-height: 35px; margin-right: 15px; }
div#connect ul li { float: left; margin-right: 10px; list-style: none; display: inline-block; width: 35px; height: 35px; background: url("images/connect_buttons.png") no-repeat 0 0; }
div#connect ul li a { display: inline-block; width: 35px; height: 35px; }
div#connect ul li#connect-twitter:hover { background-position: 0 -35px; }
div#connect ul li#connect-youtube { background-position: -35px 0; }
div#connect ul li#connect-youtube:hover { background-position: -35px -35px; }
div#connect ul li#connect-facebook { background-position: -70px 0; }
div#connect ul li#connect-facebook:hover { background-position: -70px -35px; }
div#connect ul li#connect-tumblr { background-position: -105px 0; }
div#connect ul li#connect-tumblr:hover { background-position: -105px -35px; }

/* mega-nav */
div#mega-nav { font-family: "Trade Gothic LT Std Condensed"; text-transform: uppercase; color: white; font-size: 18px; background: black; width: 100%; height: 40px; line-height: 40px; position: relative; z-index: 5; }
div#mega-nav a { color: white; padding: 10px; }
div#mega-nav a:hover, div#mega-nav a.selected { color: black; background: #1dacf3; }
div#mega-nav ul { width: 960px; margin: auto; }
div#mega-nav ul li { float: left; list-style: none; }
div#mega-nav ul li ul { display: none; position: absolute; background: black; width: 190px; box-shadow: 1px 1px 5px black; }
div#mega-nav ul li ul li { width: 190px; }
div#mega-nav ul li ul li a { display: inline-block; width: 180px; padding: 0 0 0 10px; }
div#mega-nav ul li ul li a:hover { color: white; }

/* content */
div#content { margin-top: 20px; }
div#content h2 { font-family: "Trade Gothic LT Std Bold Condensed"; text-transform: uppercase; font-size: 40px; color: #1dacf3; letter-spacing: -1px; margin-bottom: 20px; }

/* boxes */
div.box-cutter { height: 30px; background: url("images/line_horizontal.png") repeat-x; background-position: 0 13px; clear: both; }
div.column, div.column-divider { float: left; }
div.column-divider { width: 30px; height: 660px; background: url("images/line_vertical.png") repeat-y; background-position: 13px 0; }
div.box { width: 300px; height: 200px; position: relative; border-radius: 5px; box-shadow: 1px 1px 5px black; }
div.box span { font-family: "Trade Gothic LT Std Bold Condensed"; text-transform: uppercase; font-size: 26px; width: 100%; padding: 10px 0; text-indent: 10px; background: url("images/white-50.png"); position: absolute; bottom: 0; border-radius: 0 0 5px 5px; }
div.box a { display: inline-block; width: 100%; height: 100%; }

div#box-who { background: url("images/box_who.jpg"); }
div#box-store { background: url("images/box_store.jpg"); }
div#box-involve { background: url("images/box_involve.jpg"); }

div#box-donate { background: url("images/box_donate.jpg"); }
div#box-work { background: url("images/box_work.jpg"); }
div#box-slum { background: url("images/box_slum.jpg"); }

div#box-share { background: url("images/box_share.jpg"); }
div#box-media { background: url("images/box_media.jpg"); }
div#box-contact { background: url("images/box_contact.jpg"); }

/* sub-cats */
div.page div.column { width: 465px; }
div.page div.column-divider { height: 540px; }
div#page-work div.column-divider, div#page-involve div.column-divider { height: 350px; }
div.page div.sub-box { height: 160px; border-radius: 5px; background: white url("images/who-box.jpg") no-repeat 20px 20px; box-shadow: 1px 1px 5px black; }
div#campaigns { background-image: url("images/box-campaigns.jpg"); }
div#research { background-image: url("images/box-research.jpg"); }
div#chapters { background-image: url("images/box-chapters.jpg"); }
div#screenings { background-image: url("images/box-screenings.jpg"); }
div#slums { background-image: url("images/box-slums.jpg"); }
div#schools { background-image: url("images/box-schools.jpg"); }
div#mission { background-image: url("images/box-mission.jpg"); }
div#founder { background-image: url("images/box-founder.jpg"); }
div#financials { background-image: url("images/box-financials.jpg"); }
div#staff { background-image: url("images/box-staff.jpg"); }
div#projects { background-image: url("images/box-projects.jpg"); }
div#process { background-image: url("images/box-process.jpg"); }
div#faq { background-image: url("images/box-faq.jpg"); }
div.page div.sub-box div.copy { margin-left: 140px; padding: 20px; }
div.page div.sub-box div.copy h3 { font-family: "Trade Gothic LT Std Condensed"; text-transform: uppercase; font-size: 24px; margin-bottom: 5px; }
div.page div.sub-box div.copy p { font-size: 14px; line-height: 1.5; text-overflow: hidden; }

/* pages */
div#page-wrapper { background: white; border-radius: 5px; padding: 20px; box-shadow: 1px 1px 5px black; }
div#page-wrapper h3 { font-family: "Trade Gothic LT Std Condensed"; text-transform: uppercase; font-size: 32px; margin: 30px 0; }
div#page-wrapper p { margin: 10px 0; line-height: 1.5; font-size: 12px; }
div#page-wrapper ul, div#page-wrapper ol { margin-left: 40px; }

/* our mission */
div#mission-statement { font-family: "Trade Gothic LT Std Condensed"; text-transform: uppercase; font-size: 24px; float: left; margin: 150px 40px 20px 20px; width: 260px; }
div#page-mission div.copy { float: left; width: 600px; }

/* founder */
div#founder-photo { float: left; width: 400px; margin-top: 120px; }
div#page-founder div.copy { float: left; width: 480px; padding: 20px; }
div#founder-photo p { font-family: Script, serif; font-size: 24px; font-style: italic; }

/* staff */
div#page-staff a { color: #1dacf3; font-size: 14px; }
div#page-staff a:hover { text-decoration: underline; }
div#page-staff div.staff { display: inline-block; width: 100%; border-top: 1px solid #777; padding-top: 20px; margin-top: 20px; }
div#page-staff div.first { border: 0; padding: 0; margin: 0; }
div#page-staff ul li { list-style: none; font-size: 14px; margin: 5px 0; font-family: Georgia, serif; }
div#page-staff ul li ul { margin-left: 20px; }
div#page-staff ul li ul li { list-style: square; }
div#page-staff img { float: left; }
div#page-staff div.copy { float: left; margin-left: 20px; width: 450px; }
div#page-staff span.title { color: #1dacf3; font-family: "Trade Gothic LT Std Condensed"; font-size: 20px; text-transform: uppercase; }

/* careers */
div#page-careers { font-size: 12px; }
div#page-careers a { color: #1dacf3; font-weight: bold; }
div#page-careers a:hover { text-decoration: underline; }
div#page-careers h4 { font-size: 16px; margin: 5px 0; font-family: Georgia, script; color: #777; font-weight: normal; }
div#page-careers div.job { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #777; }
div#page-careers div.last { border: 0; padding-bottom: 0; }
div#page-careers ul { margin-left: 20px; }
div#page-careers ul li { list-style: square; margin: 2px 0; }
div#jobs { float: left; width: 600px; margin-top: 20px; }
div#job-menu { float: left; margin-top: 20px; background: #f8f8f8; border-radius: 5px; margin-left: 40px; padding: 20px; width: 238px; border: 1px solid #eee; }
div#job-menu ul { margin: 0 0 0 10px; padding: 0; }
div#job-menu ul li { font-size: 16px; padding: 5px 0; border-bottom: 1px solid #eee; }

/* faqs */
div#page-faq a { color: #1dacf3; }
div#page-faq a:hover { text-decoration: underline; }
div#page-faq dl { float: left; width: 480px; padding: 0 10px; }
div#page-faq dl dt, div#page-faq dl dd { margin: 10px 0; padding-left: 50px; min-height: 40px; }
div#page-faq dl dt { font-family: Georgia, script; color: #777; background: url("images/faq-q.jpg") no-repeat; }
div#page-faq dl dd { margin-bottom: 30px; background: url("images/faq-a.jpg") no-repeat; }
div#page-faq dl strong { font-size: 16px; color: #1dacf3; font-family: Georgia, script; }
div#page-faq div#page-wrapper { padding-top: 40px; }
div#submit-q { float: left; margin-left: 40px; width: 380px; height: 100px; }
div#submit-q img { border-radius: 5px; }
form#submit-questions ol li { list-style: none; }
form#submit-questions input.text, form#submit-questions textarea { font-family: Helvetica, Arial, san-serif; font-size: 16px; color: #777; border: 1px solid #eee; margin: 5px 0; padding: 10px; width: 360px; box-shadow: 1px 1px 5px #eee inset; }
form#submit-questions textarea { height: 120px; }
form#submit-questions input#submit { border: 1px solid #eee; border-radius: 5px; padding: 10px; background: #f8f8f8; font-family: "Trade Gothic LT Std Condensed"; font-size: 16px; text-transform: uppercase; }

/* our process */
div#page-process a { color: #1dacf3; }
div#page-process a:hover { text-decoration: underline; }
div#page-process p { font-size: 14px; color: #333; }
div#page-process div.copy { float: left; width: 500px; margin-right: 20px; }
div#page-process div.copy p.initial { font-family: Georgia, script; font-size: 20px; color: black; }
div#page-process div.copy p span.abbr { font-size: 12px; }
div#page-process div.step  { padding: 20px 0; border-top: 1px solid #ddd; }
div#page-process div.first { border: 0; }
div#page-process div.step img { border-radius: 5px; }

/* chapters */
#map_canvas { width: 100%; height: 450px; }

/* donate */
div#page-donate h3 { margin-bottom: 20px; }
div.donate { width: 450px; float: left; text-align: center; }
div#page-donate p.copy { text-align: left; font-size: 14px; margin-top: 20px; }
div#monthly { margin-right: 20px; }
div#button-monthly, div#button-donate { display: inline-block; text-transform: uppercase; padding:  10px 15px; font-family: "Trade Gothic LT Std Bold Condensed"; color: white; font-size: 24px; border-radius: 5px; text-shadow: 1px 1px 2px black; margin: 20px 0; }
div#button-monthly {
background: #1dacf3;
background: -moz-linear-gradient(top,  #1dacf3 0%, #006cd8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1dacf3), color-stop(100%,#006cd8));
background: -webkit-linear-gradient(top,  #1dacf3 0%,#006cd8 100%);
background: -o-linear-gradient(top,  #1dacf3 0%,#006cd8 100%);
background: -ms-linear-gradient(top,  #1dacf3 0%,#006cd8 100%);
background: linear-gradient(top,  #1dacf3 0%,#006cd8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dacf3', endColorstr='#006cd8',GradientType=0 );
}
div#button-donate {
background: #3ecb41;
background: -moz-linear-gradient(top,  #3ecb41 0%, #2f9031 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3ecb41), color-stop(100%,#2f9031));
background: -webkit-linear-gradient(top,  #3ecb41 0%,#2f9031 100%);
background: -o-linear-gradient(top,  #3ecb41 0%,#2f9031 100%);
background: -ms-linear-gradient(top,  #3ecb41 0%,#2f9031 100%);
background: linear-gradient(top,  #3ecb41 0%,#2f9031 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ecb41', endColorstr='#2f9031',GradientType=0 );
}

div#page-slums p, div#page-schools p { font-size: 14px; }
div#page-slums ol, div#page-slums ul, div#page-schools ul, div#page-projects ul, div#page-campaigns ol { margin: 5px 0 5px 40px; }
div#page-projects img { margin-bottom: 20px; }

div#page-chapters a { color: #1dacf3; }
div#page-chapters a:hover { text-decoration: underline; }
div#page-chapters p { font-size: 16px; }

div#page-screenings a { color: #1dacf3; }
div#page-screenings a:hover { text-decoration: underline; }
div#page-screenings img { margin-bottom: 20px; }
div#page-screenings p { font-size: 16px; }
div#page-screenings div.copy { float: left; width: 260px; margin-right: 20px; }

/* the slum problem */
div#page-slum-problem a { color: #1dacf3; }
div#page-slum-problem a:hover { text-decoration: underline; }
div#page-slum-problem p { font-size: 14px; }
div#page-slum-problem ul { margin: 5px 0 5px 40px; }

/* coming soon */
div#spacer { width: 400px; height: 250px; }

/* footer */
footer { display: inline-block; width: 100%; height: 100px; background: url("images/line_horizontal.png") repeat-x; margin-top: 50px; padding-top: 5px; }
footer p { line-height: 50px; font-size: 12px; color: white; }