/* 826CHI VERSION 2.0 Development:Static Interactive bburwell@thisisstatic.com CONTENTS ---------------- 1. RESET 2. BODY 3. TYPE STYLES 4. NAVIGATION 5. HEADER 6. LAYOUT 7. GLOBAL ELEMENTS 8. CONTENT 9. FOOTER 10. GLOBAL STYLES -------------------------- Z-INDEX ------------------ 1. a#main_logo:10 2. div#featured_content_banner:11 3. img.landing_thumb:12 4. body.interior_page div#content_holder:13 5. photo_holder_interior:14 5. ul.subnav:20 -------------------------- */ /* 2. BODY ===================================================================== =====================================================================*/ body { font-size:62.5%; color:#464646; margin:0; } body#home { background:url(../images/back_orange_home.gif) no-repeat top left #edeae3; } body#general { background:url(../images/back_orange_interior.gif) no-repeat top left #edeae3; } body#about.landing_page { background:url(../images/back_orange_landing.gif) no-repeat top left #edeae3; } body#about.interior_page { background:url(../images/back_orange_interior.gif) no-repeat top left #edeae3; } body#programs.landing_page { background:url(../images/back_yellow_landing.gif) no-repeat top left #edeae3; } body#programs.interior_page { background:url(../images/back_yellow_interior.gif) no-repeat top left #edeae3; } body#get_involved.landing_page { background:url(../images/back_green_landing.gif) no-repeat top left #edeae3; } body#get_involved.interior_page { background:url(../images/back_green_interior.gif) no-repeat top left #edeae3; } body#writing_gallery.interior_page { background:url(../images/back_blue_interior.gif) no-repeat top left #edeae3; } body#news.interior_page { background:url(../images/back_purple_interior.gif) no-repeat top left #edeae3; } body#calendar2.interior_page { background:url(../images/back_red_interior.gif) no-repeat top left #edeae3; } body#shop.interior_page { background:url(../images/back_orange_interior.gif) no-repeat top left #edeae3; } body#donate.interior_page { background:url(../images/back_grey_interior.gif) no-repeat top left #edeae3; } #wrapper { width:1010px; text-align:left; overflow:hidden; position:relative; } /* 3. TYPE STYLES ===================================================================== =====================================================================*/ h3, h4, h5, .sans_serif, .subhead, .post_info, div.post_info p, div.post_info2, div.post_info2 p, .learn_more, p.spy_of_month_intro, .fc-event, #footer, ul#programs_nav li, ul#subnav_list, .info, div.intern_list p, p.i_frame_text, #calendar2 li, div.donors_content div#sidebar ul li, div.donors_content div#sidebarB ul li, div#pagination ul li { font-family:helvetica, arial, sans-serif; } body { font-family:Georgia, serif; } p { font-size:13px; line-height:1.5em; padding:0 0 12px 0; } p.small, .small p { font-size:12px; line-height:1.5em; padding:0 0 12px 0; } p.small2, .small2 p { font-size:11px; line-height:1.3em; padding:0 0 12px 0; } p.subhead { font-size:12px; font-style:italic; margin:-2px 0 -5px 0; } p.subhead_sidebar { font-size:11px; font-style:italic; margin:-2px 0 -7px 0; } p.large, div.large p { font-size:16px; line-height:1.5em; padding:0 0 12px 0; } h1 { font-size:8.0em; font-weight:normal; color:#fff; height:115px; letter-spacing:-2px; } h2 { font-size:2.6em; line-height:1.2em; font-weight:normal; margin-bottom:12px; height:45px; letter-spacing:-2px; } h3 { font-size:1.7em; line-height:1.2em; font-weight:700; margin:0 0 7px 0; } h4 { font-size:1.4em; line-height:1.4em; font-weight:700; margin:15px 0 5px 0; } h5 { font-size:1.3em; line-height:1.2em; font-weight:700; padding:10px 0 4px 0; } h6 { } a { text-decoration:none; color:#464646; } a:link { text-decoration:none; } a:visited { text-decoration:none; } a:hover { text-decoration:none; } /* Button Types */ a.learn_more { margin:-3px 0 25px 0; display:block; font-size:1.1em; text-indent:9px; } a.btn_register { width:183px; height:32px; margin-top:10px; display:block; text-indent:-9999px; background:url(../images/btn_register.png) no-repeat left top; } a.btn_register:hover { background-position:right top; } /* Lists */ #news div#contentHolder ul { font-size:13px; list-style:disc; margin-left:20px; line-height:1.5em; padding-bottom:14px; } #news div#contentHolder ul ol { font-size:13px; margin-left:8px; line-height:1.5em; padding:8px 10px; } #content_holder2 ul, ol { margin-left:20px; line-height:1.5em; padding-bottom:14px; } ol { list-style:decimal; font-size:13px; } #content_holder2 ul { list-style:disc; font-size:12px; } /* 4. HEADER + NAVIGATION ===================================================================== =====================================================================*/ div#header { width:994px; } a#main_logo { width:150px; height:190px; display:block; position:absolute; top:20px; left:0px; z-index:10; float:left; text-indent:-9999px; background:url(../images/logo_826CHI.png) no-repeat left top; } /* Top Nav */ ul#top_nav { height:30px; font-style:italic; margin:3px 0px 0 0; } ul#top_nav li { float:right; font-size:11px; padding:9px 12px 0 0; } ul#top_nav li a { display:block; color:#464646; } ul#top_nav li a:hover { color:#000; } /* MainNav */ ul#main_nav { margin:1px 0 5px 0; float:right; } ul#main_nav li { float:right; font-size:12px; margin:15px 0 0 0; z-index:200; position:relative; } ul#main_nav li a { color:#464646; height:30px; display:block; text-indent:-9999px; background:url(../images/nav_main_spritemap.png) no-repeat; } ul#main_nav li.about a { background-position:-3px top; width:69px; } ul#main_nav li.programs a { background-position:-69px top; width:96px; } ul#main_nav li.get_involved a { background-position:-164px top; width:114px; } ul#main_nav li.writing_gallery a { background-position:-277px top; width:144px; } ul#main_nav li.news a { background-position:-418px top; width:130px; } ul#main_nav li.calendar a { background-position:-542px top; width:95px; } ul#main_nav li.shop a { background-position:-633px top; width:58px; } ul#main_nav li.donate a { background-position:-690px top; width:76px; } ul#main_nav li.about a:hover { background-position:-3px -30px; } ul#main_nav li.programs a:hover { background-position:-69px -60px; } ul#main_nav li.get_involved a:hover { background-position:-164px -30px; } ul#main_nav li.writing_gallery a:hover { background-position:-277px -60px; } ul#main_nav li.news a:hover { background-position:-418px -30px; } ul#main_nav li.calendar a:hover { background-position:-542px -60px; } ul#main_nav li.shop a:hover { background-position:-633px -30px; } ul#main_nav li.donate a:hover { background-position:-690px -60px; } .sf-menu li.about.sfHover { margin:15px 0 0 0; height:30px; background:url(../images/nav_main_spritemap.png) no-repeat -2px -90px; } .sf-menu li.programs.sfHover { margin:15px 0 0 0; height:30px; background:url(../images/nav_main_spritemap.png) no-repeat -68px -120px; } .sf-menu li.get_involved.sfHover { margin:15px 0 0 0; height:30px; background:url(../images/nav_main_spritemap.png) no-repeat -163px -90px; } /* Main Nav - Second Level */ ul#main_nav li ul.main_second { list-style:none; padding:0; display:none; width:220px; position:absolute; left:-15px; top:23px; z-index:2000; } ul#main_nav li ul.main_second li { width:185px; height:18px; padding:6px 0 0 23px; margin:0; background:url(../images/back_mainnavdrop_middle2.png) no-repeat left -1px; } ul#main_nav li ul.main_second li.no_border { background:url(../images/back_mainnavdrop_middle3.png) no-repeat left -1px; } ul#main_nav li ul.main_second li.top_spacer { height:20px; padding:0 0 0 23px; display:block; background:url(../images/back_mainnavdrop_top.png) no-repeat 0 top; } ul#main_nav li ul.main_second li.bottom_spacer { height:14px; padding:0 0 0 23px; display:block; background:url(../images/back_mainnavdrop_bottom3.png) no-repeat 0 top; } ul#main_nav li ul.main_second li a { height:17px; width:150px; text-indent:0; font-size:12px; color:#787878; background-image:none; } ul#main_nav li ul.main_second li a:hover { color:#000; cursor:pointer; } /* Sub Nav */ div#subnav_holder { width:212px; height:200px; position:absolute; z-index:11; top:205px; left:10px; } ul#subnav_list { padding:3px 37px 2px 30px; margin-top:-3px; background:url(../images/back_subnav_middle.png) repeat-y left top; } ul#subnav_list li { padding:6px 0 0px 0; border-bottom:solid 1px #c3c3c3; height:17px; margin-bottom:0px; font-size:1.2em; } ul#subnav_list li:last-child { border-bottom:none; } ul#subnav_list li a { color:#717171; } ul#subnav_list li a:hover { color:#353535; } /* 6. LAYOUT ===================================================================== =====================================================================*/ /* Content Holder */ div#contentHolder { margin-bottom:50px; position:relative; } div.content_140 { width:125px; padding-right:30px; } div.content_210 { width:195px; margin-right:15px; } div.content_205 { width:195px; } div.content_220 { width:220px; } div.content_230 { width:210px; margin-right:20px; } div.content_312 { width:312px; } div.content_320 { width:320px; margin-right:20px; } div.content_360 { width:360px; position:relative; } div.content_420 { width:420px; position:relative; } div.content_435 { width:435px; position:relative; } div.content_485 { width:485px; position:relative; } div.content_705 { width:705px; position:relative; } /* Featured Banner */ div#featured_content_banner { position:absolute; z-index:11; } #home div#featured_content_banner { top:70px; left:145px; } body.landing_page div#featured_content_banner { top:70px; left:126px; } #featured_content_text { float:left; width:390px; margin-top:33px; padding-top:20px; } #featured_content_text p { color:#fff; font-size:1.6em; margin:0; padding:0 0 4px 0; font-weight:300; } #featured_content_banner h1 { margin-bottom:-20px; } /* Featured Content - HOME */ div#featured_content_banner2 { position:relative; } div#loopedSlider { margin:0 auto; } div.photo_outline_featured { position:absolute; top:0px; left:0px; z-index:20; pointer-events: none; display:block; height:399px; width:841px; background:url(../images/featured_holder.png) no-repeat left top; } div.photo_outline_featured_top { position:absolute; top:0px; left:0px; z-index:20; pointer-events: none; display:block; height:90px; width:841px; background:url(../images/featured_holder_top.png) no-repeat left top; } div.photo_outline_featured_bottom { position:absolute; top:305px; left:0px; z-index:21; pointer-events: none; display:block; height:94px; width:841px; background:url(../images/featured_holder_bottom.png) no-repeat left top; } div.photo_outline_featured_left { position:absolute; top:90px; left:0px; z-index:22; pointer-events: none; display:block; height:215px; width:602px; background:url(../images/featured_holder_left.png) no-repeat left top; } div.photo_outline_featured_right { position:absolute; top:90px; left:815px; z-index:23; pointer-events: none; display:block; height:215px; width:26px; background:url(../images/featured_holder_right.png) no-repeat left top; } div.photo_outline_featured_text { position:absolute; top:90px; left:602px; z-index:15; pointer-events: none; display:block; width:215px; height:225px; background:url(../images/featured_holder_text.png) no-repeat left top; } #content { width:841px; height:399px; display:block; position:relative; overflow:hidden; background:url(../images/featured_holder_back.jpg) no-repeat left top; } #slider { width:841px; height:399px; display:block; } #slider ul li { width:841px; height:399px; display:block; position:relative; } #slider ul li img { margin:24px 0 0 20px; position:relative; z-index:14; } #slider ul li div.featured_text_holder2 { position:absolute; top:80px; left:602px; z-index:16; width:195px; height:225px; padding:10px 10px 0 18px; } div.featured_content { width:841px; height:399px; overflow:hidden; position:relative; clear:both; cursor:pointer; background-color:#fff; } .slides { position:absolute; top:0; left:0; list-style:none; padding:0; margin:0; } .slides li { position:absolute; top:0; padding:0; width:841px; height:399px; } .slides li:hover { cursor:default; } img.photo_featured { position:absolute; top:24px; left:20px; z-index:14; } div.featured_text_holder { position:absolute; top:80px; left:610px; z-index:21; display:block; width:195px; height:225px; padding:10px 0 0 10px; background:#fff; } div.featured_text_holder h2, div.featured_text_holder2 h2 { height:auto; line-height:1.5em; margin-bottom:3px; } div.featured_text_holder p, div.featured_text_holder2 .featured_text_home p { font-size:14px; line-height:1.4em; width:195px; font-weight:300; } div.featured_nav { } ul.pagination { list-style:none; padding:0; display:block; position:absolute; top:335px; left:35px; z-index:22; } ul.pagination li { float:left; margin:1px 0 0 4px; } ul.pagination li a { float:left; text-indent:-9999px; width:10px; height:10px; margin-left:2px; display:block; background:url(../images/featured_nav.png) no-repeat left top; } ul.pagination li.active a { background-position:right top; } ol#controls { list-style:none; padding:0; display:block; position:absolute; top:335px; left:15px; z-index:22; } ol#controls li { float:left; margin:1px 0 0 4px; } ol#controls li a { float:left; text-indent:-9999px; width:10px; height:10px; margin-left:2px; display:block; background:url(../images/featured_nav.png) no-repeat left top; } ol#controls li.current a { background-position:right top; } /* Landing Page */ body.landing_page { } body.landing_page div#contentHolder { margin-top:415px; } body.landing_page div#contentHolder h2 { margin-bottom:-10px; margin-top:10px; } ul.landing_list { list-style:none; } ul.landing_list li { position:relative; background:url(../images/back_landingcapsule.png) no-repeat 17px -7px; margin-bottom:9px; } ul.landing_list li:first-child { background-image:none; } ul.landing_list li p { padding-top:54px; } ul.landing_list li h2 { float:left; padding-top:4px; height:48px; width:264px; } ul.landing_list li img.landing_thumb { position:absolute; z-index:12; top:-17px; left:-22px; } ul.landing_list li div.thumb_spacer { float:left; width:75px; height:70px; } ul.landing_list li div.photo_holder_landing { width:93px; height:68px; position:relative; float:left; display:block; float:left; } ul.landing_list li div.photo_outline_landing { position:absolute; top:-8px; left:-5px; z-index:15; width:90px; height:80px; display:block; background:url(../images/photo_holder_landing2.png) no-repeat top left; } ul.landing_list li img.photo_landing { position:absolute; top:-4px; left:-3px; z-index:14; } /* Interior Page */ body.interior_page div#contentHolder { margin:85px 0 0 145px; } body.interior_page div#contentHolder h1 { margin:0 0 -35px 75px; } .content_interior_top { margin-bottom:-3px; } .content_interior_bottom { margin:0 0 30px 0; } #content_holder2 { padding:20px 20px 20px 78px; position:relative; background:url(../images/back_content_interior_middle.png) repeat-y left -4px; } #content_holder2 .intro { min-height:0px; } #content_holder2 .intro p { color:#464646; font-size:1.6em; line-height:1.5em; font-weight:300; } img.photo_holder_interior { position:absolute; top:-43px; right:-20px; z-index:15; } div.photo_holder_interior { position:absolute; top:-43px; right:-20px; z-index:15; width:385px; height:314px; background:url(../images/photo_holder_interior.png) no-repeat top left;} img.photo_interior { position:absolute; top:-17px; right:7px; z-index:14; } div#sidebar, div#sidebarB { float:right; margin-right:-26px; } div#sidebar2, div#sidebar2B { width:210px; padding:0 30px 0 35px; background:url(../images/sidebar_middle.png) repeat-y -1px top; } p.intro_sidebar, div.intro_sidebar p { font-size:1.4em; font-weight:300; } .sidebar_top { margin:0 0 -3px -3px; } .sidebar_bottom { margin-top:-1px; } div#quote { float:right; width:260px; position:absolute; top:270px; left:540px; } div#quote { font-style:italic; } /* Photo Holders */ div.photo_holder_sidebarcallout { width:224px; height:204px; position:relative; float:left; display:block; overflow:visible; } img.photo_outline_sidebarcallout { position:absolute; top:0px; left:-9px; z-index:31; width:224px; height:211px; } div.photo_outline_sidebarcallout { position:absolute; top:0px; left:-9px; z-index:31; width:224px; height:200px; } div.photo_holder_sidebarcallout div.writing_gallery { background:url(../images/sidebar_callout_holder.png) no-repeat left top; } div.photo_holder_sidebarcallout div.spy_of_the_month { background:url(../images/sidebar_spy_holder.png) no-repeat left top; } img.photo_sidebarcallout { position:absolute; top:73px; left:5px; z-index:30; } h4.sidebarcallout { margin:0 0 20px 0; } div#photo_holder_landing { width:478px; height:357px; position:relative; float:left; display:block; overflow:visible; } div#photo_holder_landing div.photo_outline_landing { position:absolute; top:2px; left:0px; z-index:19; width:478px; height:357px; display:block; background:url(../images/photo_holder_landing.png) no-repeat left top; } img.photo_landing { position:absolute; top:24px; left:32px; z-index:14; } div.photo_holder_body1 { width:225px; height:190px; position:relative; float:left; display:block; } div.photo_outline_body1 { position:absolute; top:2px; left:-14px; z-index:15; width:233px; height:199px; background:url(../images/photo_holder_body1.png) no-repeat left top; } img.photo_body1 { position:absolute; top:25px; left:7px; z-index:14; } div.photo_holder_body2 { width:154px; height:130px; position:relative; float:left; display:block; } div.photo_outline_body2 { position:absolute; top:-6px; left:-11px; z-index:15; width:160px; height:137px; background:url(../images/photo_holder_body2.png) no-repeat left top; } img.photo_body2 { position:absolute; top:7px; left:1px; z-index:14; } div.photo_holder_newsthumb { width:93px; height:70px; position:relative; float:left; display:block; } img.photo_outline_newsthumb { position:absolute; top:-4px; left:-4px; z-index:15; } div.photo_outline_newsthumb { position:absolute; top:-4px; left:-4px; z-index:15; width:93px; height:80px; background:url(../images/photo_holder_newsthumb.png) no-repeat left top; } img.photo_newsthumb { position:absolute; top:3px; left:1px; z-index:14; } /* 7. CONTENT ===================================================================== =====================================================================*/ /*-- HOME /*----------------------------------------------------*/ #home div#contentHolder { margin-top:450px; background:url(../images/back_home_2col.png) repeat-y 248px top; } #home a { color:#be6a29; } #home a:hover { color:#74421c; } #home a.learn_more { background:url(../images/icon_dash_orange.png) no-repeat left 4px; } img.mission_logo { margin:-3px 7px 0 -4px; float:left; } img.mission_logo2 { margin:-11px 7px 0 -4px; float:left; } img.boring_logo { margin:-10px 7px 5px -4px; float:left; } ul#programs_nav { list-style:none; } ul#programs_nav li { font-size:15px; font-weight:500; padding:0 0 6px 0; } p.location { font-size:1.4em; line-height:1.4em; font-weight:500; } /* Home - News */ img.news_thumb { float:left; } p.post_info { font-size:12px; line-height:1.5em; font-style:italic; padding:0 0 6px 0; margin-top:-3px; } .post_info p { font-size:11px; line-height:1.5em; font-style:italic; padding:0 0 6px 0; margin-top:-3px; } .post_info2 p { font-size:11px; line-height:1.5em; font-style:italic; padding:0 0 6px 0; margin-top:-6px; } #home .news_date { font-style:italic; float:left; margin:0; padding:0; } #home .home_news_spacer { clear:both; height:10px; } /*-- ABOUT /*----------------------------------------------------*/ #about a { color:#be6a29; } #about a:hover { color:#74421c; } /* Mission & Facts */ div.mission_footnotes { position:absolute; right:70px; top:268px; width:260px; } div.mission_facts #content_holder2 .intro { min-height:250px; } /* Staff/Board */ div.staff_board div#sidebar { margin-top:-65px; } div.staff_board h2 { margin-bottom:-10px; } div.staff_photo_holder { float:left; position:relative; width:145px; height:155px; } img.staff_photo { position:absolute; top:-5px; left:-17px; z-index:11; } div.staff_bio { float:left; width:335px; } div.photo_holder_staff { width:150px; height:140px; position:relative; float:left; display:block; float:left; } img.photo_outline_staff { position:absolute; top:4px; left:-11px; z-index:15; } div.photo_outline_staff { position:absolute; top:4px; left:-11px; z-index:15; width:147px; height:136px; background:url(../images/photo_holder_staff.png) no-repeat top left; } img.photo_staff { position:absolute; top:14px; left:-2px; z-index:14; } div.advisory_board p { font-weight:bold; font-size:12px; padding-bottom:2px; } /* Spy of the Month */ div.spy_of_the_month div#sidebar { margin-top:-353px; } div.spy_of_the_month div#sidebar .spy_of_month_intro { margin:10px 0 0 35px; width:180px; } div.spy_of_the_month div#sidebar .spy_of_month_intro p { font-size:12px; } div.spy_of_the_month div#sidebar p.subhead { font-size:12px; } div.spy_of_the_month div#sidebar h4 { margin:0 0 8px 0; padding-top:5px; } div.recent_spies p { font-weight:bold; font-size:12px; padding-bottom:2px; } div.spy_of_the_month div#content_holder2 { min-height:600px; } div#photo_holder_spy { width:470px; height:310px; position:relative; float:left; display:block; margin-bottom:17px; } div.photo_spy_outline { position:absolute; top:-24px; left:-18px; z-index:15; width:483px; height:330px; display:block; background:url(../images/spy_holder.png) no-repeat left 5px; } img.photo_spy { position:absolute; top:5px; left:12px; z-index:14; } div.spy_name { position:absolute; top:250px; left:2px; z-index:16; } div.spy_name p { color:#FFF; font-size:16px; font-weight:normal; } /* 826 National */ div.national h2 { margin-top:20px; } div.national div.intro_national { width:530px; } div.national div#content_holder2 { min-height:300px; } div#logo_holder { clear:both; } div#logo_holder img { margin-bottom:12px; } img.logo_national { float:right; margin:0 75px 0 20px; } /* Our Space + DIrections */ div.ourspace_directions div#sidebar { margin-top:-30px; } img.image_placeholder { float:left; margin:4px 13px 5px 0; } /* Press */ div.press div#sidebar { margin-top:-23px; } div.press a.learn_more { font-size:11px; margin-left:6px; padding-left:10px; display:inline; background:url(../images/icon_dash_orange.png) no-repeat left 5px; } /*-- PROGRAMS /*----------------------------------------------------*/ #programs a { color:#af963e; } #programs a:hover { color:#816f2f; } /* Field Trips */ div.field_trips p.info { margin:-6px 0 20px 0; font-size:12px; } div.field_trips #content_holder2 .intro { min-height:250px; } a.btn_signup { width:171px; height:54px; display:block; text-indent:-9999px; background:url(../images/btn_signupnow.gif) no-repeat left top; } a.btn_signup:hover { background-position:right top; } /* Workshops */ div.workshops_intro { margin:10px 0 0 45px; width:560px; margin:425px 0 -410px 185px; } div.workshops_intro p { font-size:1.5em; } div.workshop_holder { width:850px; display:block; position:relative; } div.workshop_holder2 { width:850px; margin-top:-2px; background:url(../images/back_workshops_middle.png) repeat-y left top; } .workshop_top { width:850px; height:37px; display:block; background:url(../images/back_workshops_top.png) repeat-y left top; } .workshop_bottom { width:850px; height:42px; display:block; background:url(../images/back_workshops_bottom.png) repeat-y left top; } .workshop_tag { position:absolute; left:20px; top:20px; } div.workshop_description { width:520px; padding:0 0 0 45px; float:left; } div.workshop_description h2 { padding:0 0 14px 0; margin-top:-5px; } div.workshop_info { width:190px; padding:16px 0 0 52px; float:left } div.workshop_info p.info { font-size:11px; font-style:italic; padding-bottom:5px; } a.btn_register_short { width:94px; height:40px; display:block; text-indent:-9999px; background:url(../images/btn_register_short.png) no-repeat left top; } a.btn_register_short:hover { background-position:right top; } a.btn_register_waitlist { width:162px; height:53px; display:block; text-indent:-9999px; background:url(../images/btn_waitlist.png) no-repeat -9px -9px; } a.btn_register_waitlist:hover { background-position:-177px -9px; } div#subnav2_holder { width:212px; height:200px; position:absolute; z-index:11; top:43px; left:-100px; } div#subnav2_holder p { padding-bottom:6px; font-size:11px; } .workshop_pulldown { clear:both; width:100px; margin:0 10px 7px 0; font-size:10px; } .btn_workshop_sort { width:74px; height:31px; display:block; clear:both; border:none; margin:0; padding:0; text-indent:-9999px; background-color:#f1efe9; } /* High School Programs */ div.highschool #content_holder2 .intro { min-height:250px; } /* In-School Projects */ div.inschool_projects a.btn_moreinfo { position:absolute; top:257px; right:125px; z-index:15; } /* Publishing */ div.publishing div#sidebar { margin-top:-165px; } div.publishing h2 { padding:10px 0 0px 0; margin-bottom:-10px; clear:both; } div.publishing div#content_holder2 { min-height:600px; } a.btn_viewall { width:97px; height:52px; display:block; text-indent:-9999px; background:url(../images/btn_viewall.png) no-repeat left top; } a.btn_viewall:hover { background-position:right top; } div.photo_holder_body1 { margin-top:-10px; margin-bottom:10px; } ul#library_list { list-style:none; margin:15px 0; } ul#library_list li { float:left; margin:0 20px 20px 0; width:330px; } img.book_photo { float:left; width:115px; margin-right:15px; clear:both; } div.book_description { float:left; width:200px; } div.book_description h4 { margin:0 0 3px 0; } /* In the Community */ div.in_the_community h2 { margin:15px 0 0 0; } div.in_the_community #content_holder2 .intro { min-height:250px; } div.partner_photo_holder { float:left; position:relative; width:100px; height:110px; } div.partner_photo_border { position:absolute; top:-1px; left:-17px; z-index:11; width:110px; height:85px; background:url(../images/photo_holder_partner.png) no-repeat left top; } img.partner_photo { position:absolute; top:6px; left:-5px; z-index:10; } div.partner_bio { float:left; width:212px; } a.btn_moreinfo { width:214px; height:54px; display:block; text-indent:-9999px; background:url(../images/btn_moreinfo.png) no-repeat left top; } a.btn_moreinfo:hover { background-position:right top; } div.in_the_community a.btn_moreinfo { position:absolute; top:260px; right:125px; z-index:15; } /*-- GET INVOLVED /*----------------------------------------------------*/ #get_involved a { color:#7d873c; } #get_involved a:hover { color:#59602e; } /* Volunteer */ a.btn_applynow { width:140px; height:54px; display:block; text-indent:-9999px; background:url(../images/btn_apply.png) no-repeat left top; } a.btn_applynow:hover { background-position:right top; } div.volunteer a.btn_applynow { position:absolute; top:255px; right:195px; z-index:15; } /* Educators */ div.educators h4 { margin:5px 0 5px 0; } /* Donors */ div.donors_content div#sidebar { margin-top:-20px; } div.donors_content div#sidebar ul { list-style:outside; margin:0 10px 0 15px; padding-bottom:10px } div.donors_content div#sidebar ul li { font-size:12px; line-height:1.4em; margin-bottom:6px; } div.donors_content div#sidebarB { float:right; clear:right; margin-top:-20px; } div.donors_content div#sidebarB ul { list-style:outside; margin:0 10px 0 15px; padding-bottom:10px } div.donors_content div#sidebarB ul li { font-size:12px; line-height:1.4em; margin-bottom:6px; } div.donors_content div.donors_list p { padding-bottom:6px; } /* Interns */ div.intern_list h2 { margin:15px 0 0 0; padding-bottom:0; } div.intern_list p { } /* Students */ div.students #content_holder2 .intro { min-height:250px; } /* Community */ body#get_involved div#wrapper { min-height:600px; } div.community div#contentHolder { min-height:600px; } div.community div#content_holder2 { min-height:300px; } /* Book Club */ div.bookclub div.content_140 img { margin-bottom:8px; border:1px solid #d5d5d5; } /* Mailing List */ div.mailing_list div.mailing_list_success #content_holder2, div.mailing_list div.mailing_list_whoops #content_holder2 { min-height:420px; } /*-- WRITING GALLERY /*----------------------------------------------------*/ #writing_gallery a { color:#78a0b7; } #writing_gallery a:hover { color:#5d7e91; } #writing_gallery div#sidebar { margin-top:-25px; } #writing_gallery div#sidebarB { margin-top:-25px; } #writing_gallery h2 { height:auto; } #writing_gallery .content_485 img { padding:5px; margin:0 10px 8px 0px; border:1px solid #e4e4e4; text-align:center; } /*float:right; margin-right:-26px;*/ #writing_gallery p.post_info { font-size:11px; margin:-6px 0 6px 0; } #writing_gallery .gallery_spacer { clear:both; height:15px; border-top:solid 1px #999; margin:25px 0 -5px 0} /*-- NEWS /*----------------------------------------------------*/ #news a { color:#917788; } #news a:hover { color:#6d5364; } #news h4 { margin:0 0 8px 0; } #news .news_spacer { clear:both; height:15px; border-top:solid 1px #d4d4d4; margin:15px 0 10px 0; } #news .news_date { font-style:italic; float:left; margin:0; padding:0; } #news div#sidebar { margin-top:-25px; } #news div#sidebar p.post_info { font-size:12px; margin:2px 0 0px 0; } #news div#sidebar h4 { padding:12px 0 0px 0; margin-bottom:4px; } div#pagination ul { list-style:none; } #news div#pagination ul { list-style:none; margin-left:0; } div#pagination ul li { height:40px; float:left; } div#pagination ul li a { float:left; display:block; width:24px; height:38px; padding:20px 0 0 18px; font-size:12px; background:url(../images/pagination_back_number.png) no-repeat -5px -6px #fff; } div#pagination ul li#first a { display:block; width:45px; height:13px; padding:0; margin:19px 7px 0 0px; text-indent:-9999px; background:url(../images/pagination_btn_first.png) no-repeat left top; } div#pagination ul li#prev a { display:block; width:51px; height:53px; padding:0; text-indent:-9999px; background:url(../images/pagination_back.png) no-repeat left top; } div#pagination ul li#last a { display:block; width:39px; height:13px; padding:0; margin:19px 0 0 7px; text-indent:-9999px; background:url(../images/pagination_btn_last.png) no-repeat left top; } div#pagination ul li#next a { display:block; width:51px ;height:53px; padding:0; text-indent:-9999px; background:url(../images/pagination_forward.png) no-repeat left top; } div#pagination ul li div.active, div#pagination ul li a:hover { float:left; display:block; width:24px; height:38px; padding:20px 0 0 18px; font-size:12px; background:url(../images/pagination_back_number.png) no-repeat -55px -6px #fff; color:#fff; } div#pagination ul li#first a:hover { background-position:right top; } div#pagination ul li#prev a:hover { background-position:right top; } div#pagination ul li#last a:hover { background-position:right top; } div#pagination ul li#next a:hover { background-position:right top; } /*-- CALENDAR /*----------------------------------------------------*/ #calendar2 a { color:#464646; } #calendar2 a:hover { color:#000000; } #calendar2 div#content_holder2 { min-height:390px; } #calendar2 div#sidebar2 { min-height:190px; } div#calendar_holder { width:690px; margin-bottom:20px; } #calendar2 div#subnav2_holder { width:100px; height:195px; position:absolute; z-index:11; top:87px; left:-118px; } #calendar2 div#subnav2_holder ul li { font-size:11px; padding:4px 0; margin-top:6px; border-top:1px solid; display:compact; } /*- Events Page */ #events_calendar { width:700px; position:relative; } #events_calendar .return_to_calendar { font-weight:bold; font-size:11px; position:absolute; top:28px; right:0; } #events_calendar .return_to_calendar a { color:#df7f57; } #events_calendar .return_to_calendar a:hover { color:#854e25; } #events_calendar h2 { border-bottom:1px solid #c1bfb9; padding:0 0 10px 0; margin:0 0 12px 0; } #events_calendar .calendar_details { border-top:1px solid #c1bfb9; padding:13px 0; margin:2px 0 12px 0; } #events_calendar .calendar_details a { color:#df7f57; } #events_calendar .calendar_details a:hover { text-decoration:underline; } #calendar2 #subnav2_holder { width:150px; height:200px; position:absolute; z-index:11; top:85px; left:-100px; } /*-- SHOP /*----------------------------------------------------*/ #shop a { color:#be6a29; } #shop a:hover { color:#74421c; } img.agent { position:absolute; top:-7px; left:515px; } a.btn_store { width:214px; height:54px; display:block; position:absolute; top:257px; right:125px; z-index:15; text-indent:-9999px; background:url(../images/btn_store.png) no-repeat left top; } a.btn_store:hover { background-position:right top; } /*-- DONATE /*----------------------------------------------------*/ #donate a { color:#a59c74; } #donate a:hover { color:#938b65; } #donate div#content_holder2 { min-height:390px; } #donate div#sidebar ul, #donate div#sidebarB ul { list-style:disc; margin:0 10px 0 15px; padding-bottom:10px } #donate div#sidebar ul li, { font-size:12px; line-height:1.3em; margin-bottom:5px; } /*-- GENERAL /*----------------------------------------------------*/ #general a { color:#be6a29; } #general a:hover { color:#74421c; } /* 8. FORMS ===================================================================== =====================================================================*/ form label { font-size:12px; display:block; margin:15px 0 6px 0; } form .submit { border:none; padding:0; margin:-16px 0 0 0; } form input, form textarea, form select { color:#666666; padding:3px; font-size:12px; background-color:#f4f4f4; border:1px solid #ccc; font-family:helvetica, arial, sans-serif; -moz-border-radius:3px; -webkit-border-radius:3px; } form input:focus, form textarea:focus, form select:focus { border:1px solid #999; background-color:#fff; color:#464646; } .submit:focus { border:none; } form .form_label { width:220px; } form .form_label2 { width:475px; line-height:1.3em; } form .form_textfield_single { width:220px; margin-top:-2px; } form .form_textfield_double { width:475px; margin-top:-2px; } form .form_spacer { width:485px; border-bottom:1px solid #CCC; padding-top:28px; margin-bottom:15px; clear:both; } form .form_spacer2 { width:485px; border-bottom:1px solid #CCC; padding-top:10px; margin-bottom:15px; clear:both; } form ul.checkbox_list { width:400px; list-style:none; } form ul.checkbox_list li.list_checkbox { width:18px; margin:0 5px 0 0; float:left; margin-top:-3px; display:block; } form ul.checkbox_list li.list_label { margin-bottom:15px; width:170px; font-size:12px; line-height:1.2em; float:left; display:block; } form ul.checkbox_list li.spacer { height:2px; } /* Mailing List */ .form_mailinglist { border-bottom:1px #ccc solid; margin-bottom:10px; padding-bottom:15px; width:670px; } .form_mailinglist ul#mailing_preference { list-style:none; padding:14px 0 30px 0; } .form_mailinglist ul#mailing_preference label { margin-top:0; } .form_mailinglist ul#mailing_preference li { float:left; margin:0 13px 15px 0; font-size:12px; line-height:1.3em; width:260px; } .form_mailinglist ul#mailing_preference li .mailing_checkbox { margin:0 4px 0 0; } .form_mailinglist ul#mailing_preference li.list_header { margin-bottom:15px; width:200px; } .form_mailinglist ul#mailing_preference li.list_checkbox { width:18px; margin:0 5px 0 0; } .form_mailinglist .btn_submit { width:93px; height:52px; display:block; clear:both; border:none; padding:0; margin:0; text-indent:-9999px; background-color:#fff; } .form_mailinglist button.btn_submit:hover { background-position:right top; cursor:pointer; } /* Donate */ .form_donate { margin:-12px 0 20px 0; } .form_donate label { float:left; font-size:17px; width:10px; } .form_donate .donation_amount { margin:14px 14px 0 7px; float:left; } .form_donate .btn_submit { width:97px; height:52px; display:block; float:left; border:none; margin-top:-5px; text-indent:-9999px; background-color:#fff; } /* Volunteer */ #volunteer_holder { display:block; background-color:#fff; width:720px; } .success_page { min-height:300px; } /* IFrame */ .i_frame { border:1px solid #CCC; } div.i_frame_holder { padding:8px; } div.i_frame_holder p.i_frame_text { font-size:11px; line-height:1.6em; margin:0px; padding-bottom:8px; } /* 9. FOOTER ===================================================================== =====================================================================*/ div#footer { width:100%; background-color:#f5f4f0; padding:20px 0; } div#footer p { font-size:11px; line-height:1.4em; padding:0; } div#footer div#national_logo { width:125px; float:left; margin-left:35px; } div#footer div#address { width:140px; float:left; margin-left:10px; } div#address a { color:#464646; } div#address a:hover { color:#000; } #locations_menu { margin-top:10px; } div#footer div#links1 { width:225px; float:left; margin-left:10px; } div#footer div#links2 { width:210px; float:left; margin-left:212px; } div#footer div#links1 a, div#footer div#links2 a { font-size:11px; line-height:1.4em; } div#footer div#links2 ul#follow_us_list { list-style:none; margin-top:4px; } div#footer div#links2 ul#follow_us_list li { float:left; margin-right:7px; } /* 10. GLOBAL STYLES ===================================================================== =====================================================================*/ /* Layout */ .margin-top-10 { margin-top:-10px; } .margin-top0 { margin-top:0; } .margin-top10 { margin-top:10px; } .margin-top20 { margin-top:20px; } .margin-top35 { margin-top:35px; } .margin-bottom10 { margin-bottom:10px; } .margin-bottom25 { margin-bottom:25px; } .margin-left12 { margin-left:12px; } .margin-left20 { margin-left:20px; } .margin-left40 { margin-left:40px; } .margin-left30 { margin-left:30px; } .margin-left140 { margin-left:140px; } .margin-left150 { margin-left:168px; } .margin-left210 { margin-left:215px; } .margin-right5 { margin-right:5px; } .margin-right12 { margin-right:12px; } .margin-right20 { margin-right:20px; } .margin-right35 { margin-right:35px; } .padding-top20 { padding-top:20px; } .padding-top40 { padding-top:40px; } .width150 { width:150px; } .width175 { width:175px; } .width275 { width:275px; } .width420 { width:420px; } .width470 { width:520px; } .width485 { width:485px; } .width560 { width:560px; } .width690 { width:690px; } .border-right { border-right:2px solid #fff; } .border-top { border-top:2px solid #fff; padding-top:4px; } .border-bottom { border-bottom:2px solid #fff; padding-bottom:4px; } .border-left { border-left:1px solid #c4c4c4; padding:0 0 0 20px; } .background-cfcdc5 { background-color:#cfcdc5; } .min-height_220 { min-height:220px; } .min-height_620 { min-height:620px; } .float_left { float:left; } .float_right { float:right; } .float_image { float:left; padding:4px 10px 0 0; } .display_block { display:block; } .display_none { display:none; } .clear { clear:both; } .clear_none { clear:none; } .red { color:#C00; } /* Micro Clearfix by Nicolas Gallagher ===================================================================== =====================================================================*/ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1; } /* For IE 6/7 (trigger hasLayout) */