/* ---------------------------------------------------------- Childhelp CSS Managed by: Blue State Digital Last Update: December 2009 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ html { background: #e5efef; } body { background: #e5efef; color: #333; } .base { font-size: 13px; line-height: 18px; } .base h1 { color: #6c95b3; font-size: 24px; line-height: 26px; margin-bottom: 5px; } .base h2 { color: #6c95b3; font-size: 18px; line-height: 24px; } .base h3 { color: #6c95b3; font-size: 16px; line-height: 18px; } .base h4 { color: #6c95b3; font-weight: bold; } .base p, .base table { margin-bottom: 18px; } a img { border: 0; } a { color: #7b6bac; text-decoration: none; } a:hover { color: #fb776d; } blockquote { font-size: 16px; font-style: italic; line-height: 20px; margin: 0 18px 18px; } .base ul, .base ol { margin: 0 0 18px 18px; } .base ul li { list-style: disc; } .base ul li li { list-style: circle; } .base ol li { list-style: decimal; } .base ul li, .base ol li { } .base li ol, .base li ul { margin: 0 0 0 18px; } .base table { font-size: 13px; line-height: 18px; } th { font-weight: bold; padding-right: 10px; } .din-bol { font-weight: bold; } .din-med { } h1, h2, h3, h4, #header, #site-nav, .section-nav, #sitemap, #footer { font-family: Helvetica, Arial, sans-serif; } #content, #sidebar { font-family:Georgia, "Times New Roman", Times, serif; } .center { text-align: center; } .hide { display: none; } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { background: #eff5f5; margin: 0 auto; width: 980px; } #header { background: url(/page/-/wrapper/images/header-bg.gif) right bottom no-repeat; overflow: hidden; padding: 20px 0; width: 980px; } #cse-search-box { background: #fff; border: 1px solid #d4d7da; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; float: right; margin: 0 10px 0 0; padding: 2px 4px; } #search-field { background: none; border: none; color: #555; font-size: 14px; width: 290px; } #google-search-bt { vertical-align: middle; } #masthead, #header p { float: left; } #masthead { margin: 0 0 0 10px; width: 300px; } #masthead a { background: url(/page/-/wrapper/images/masthead.gif) left top no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 238px; height: 123px; } #header p { color: #5e4e7f; font-size: 13px; line-height: 24px; margin: 50px 0 0 0; width: 600px; } .hotline { color: #fb776d; font-size: 16px; text-transform: uppercase; } #site-nav { background: #6e5d97 url(/page/-/wrapper/images/site-nav-bg.gif) left center repeat-x; font-size: 13px; margin: 0 10px; padding: 0 10px; position: relative; text-transform: uppercase; text-shadow: -1px 0 -1px #5e4e7f; width: 940px; z-index: 20; } .sf-menu .home-link { background: none; } .home-link a, .sf-menu .home-link a:hover { background: url(/page/-/wrapper/images/home.gif) center center no-repeat; text-indent: -9999px; width: 24px; } /*** SUPERFISH ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { float: left; line-height: 1.0; margin-bottom: 1em; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { background: url(/page/-/wrapper/images/divider.gif) left center no-repeat; float: left; position: relative; } .sf-menu li li { background: #77679f; text-transform: none; } .sf-menu a { display: block; padding: 1em 16px; position: relative; text-decoration:none; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #fff; } .sf-menu li li a:hover{ background: #5e4d80; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 3em; /* match top ul list item height */ z-index: 999; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { background: #000; top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #77679f; color: #d0c5da; outline: 0; } #main { background: #fff; clear: both; margin: 0 10px; width: 960px; } #content, #sidebar { float: left; /*position: relative; z-index: 1;*/ } #content { width: 640px; padding: 20px 0; } #home #content { padding-top: 0; } #content .column { float: left; width: 320px; } .full-width #content { float: none; overflow: hidden; width: 960px; } /*=SIDEBAR*/ #sidebar { padding: 0 0 20px 0; width: 320px; } #call-to-action { background: #709dba; color: #fff; padding: 0 0 20px 0; height: 360px; } #call-to-action h2 { background: url(/page/-/wrapper/images/four-ways.gif) center top; color: #fff; margin: 0 0 10px 0; overflow: hidden; text-indent: -9999px; width: 320px; height: 103px; } #call-to-action .blurb { text-align: center; margin-bottom: 10px; } #quick-signup { background: #3a5161 url(/page/-/wrapper/images/bt-hover.gif) left center repeat-x; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); margin: 5px 20px; padding: 12px 10px; } #quick-signup legend { color: #fff; font-size: 18px; } #quick-signup #email, #quick-signup #zip-code, #quick-signup #submit-bt { border: 1px solid #2e404d; font-family: Helvetica, Arial, sans-serif; padding: 4px 2px 3px; font-size: 12px; } #quick-signup #email, #quick-signup #zip-code { color: #999; margin: 6px 1px 0 0; } #quick-signup #submit-bt { background: #709dba; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); color: #fff; cursor: pointer; padding: 4px 8px 4px; } #call-to-action .button, #call-to-action .donate { font-size: 18px; margin: 5px 20px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .25); } #call-to-action .button a { background: #2e404d url(/page/-/wrapper/images/bt-bg.gif) left center repeat-x; border: 1px solid #2e404d; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; display: block; font-size: 18px; padding: 12px 10px; } #call-to-action .button a:hover { background: #2e404d url(/page/-/wrapper/images/bt-hover.gif) left center repeat-x; border-color: #3a5161; } #call-to-action .donate a { background: #6d5c96 url(/page/-/wrapper/images/site-nav-bg.gif) left center repeat-x; border: 1px solid #6e5d97; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; display: block; font-size: 18px; padding: 12px 10px; } #call-to-action .donate a:hover { background: #6d5c96 url(/page/-/wrapper/images/donate-bt-hover.gif) left center repeat-x; border-color: #6e5d97; } #sidebar .module { background: #64538a; color: #e0dde8; padding: 20px; margin: 4px 4px 0 0; } #sidebar .module a { color: #c6ecef; } #sidebar .module a:hover { color: #fb776d; } #sidebar .module h2 { color: #ebe9ed; font-size: 18px; } #sidebar .module p { margin-bottom: 0; } #prev-sponsor, #sponsors, #next-sponsor { float: left; margin: 10px 0 0 0; } #prev-sponsor, #next-sponsor { padding: 30px 0 0 0; text-align: center; width: 18px; } #prev-sponsor a { background: url(/page/-/wrapper/images/left-arrow.gif) 0 0 no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 18px; height: 17px; } #prev-sponsor a:hover { background: url(/page/-/wrapper/images/left-arrow.gif) 0 -17px no-repeat; } #next-sponsor a { background: url(/page/-/wrapper/images/right-arrow.gif) 0 0 no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 18px; height: 17px; } #next-sponsor a:hover { background: url(/page/-/wrapper/images/right-arrow.gif) 0 -17px no-repeat; } #sponsors { background: #fff; overflow: hidden; width: 240px; height: 80px; } #sponsors .slide { text-align: center; width: 240px; padding: 5px 0; height: 70px; } #sidebar #gift-catalog { background: #64538a url(/page/-/wrapper/images/gift-catalog-bg.jpg) 180px 10px no-repeat; padding-right: 145px; } #sidebar #smart-giving { background: #64538a url(/page/-/wrapper/images/smart-giving-bg.jpg) 150px 25px no-repeat; padding-right: 175px; } #connect ul { margin: 0; padding: 0; } #connect li { float: left; list-style: none; padding: 0 6px; } #connect li a { display: block; overflow: hidden; text-indent: -9999px; width: 54px; height: 60px; } #facebook a { background: url(/page/-/wrapper/images/facebook-side.gif) 0 0 no-repeat; } #facebook a:hover { background: url(/page/-/wrapper/images/facebook-side.gif) 0 -60px no-repeat; } #twitter a { background: url(/page/-/wrapper/images/twitter-side.gif) 0 0 no-repeat; } #twitter a:hover { background: url(/page/-/wrapper/images/twitter-side.gif) 0 -60px no-repeat; } #youtube a { background: url(/page/-/wrapper/images/youtube-side.gif) 0 0 no-repeat; } #youtube a:hover { background: url(/page/-/wrapper/images/youtube-side.gif) 0 -60px no-repeat; } #rss-feed a { background: url(/page/-/wrapper/images/rss-side.gif) 0 0 no-repeat; } #rss-feed a:hover { background: url(/page/-/wrapper/images/rss-side.gif) 0 -60px no-repeat; } /*=FOOTER*/ #footer, #sitemap { color: #527388; font-size: 10px; line-height: 14px; } #sitemap { background: url(/page/-/wrapper/images/charity-seals.gif) 16px 90px no-repeat; margin: 0 10px; overflow: hidden; padding: 20px 0; width: 960px; } #sitemap .column { float: left; width: 160px; } #sitemap h1 { margin: 0 20px; } #sitemap h1 a { background:url(/page/-/wrapper/images/footer-masthead.gif) left top no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 108px; height: 57px; } #sitemap h2 { font-size: 10px; font-weight: bold; margin: 0 20px; } #sitemap ul { margin: 0 20px 10px; } #sitemap .connect { margin: 5px 20px; } #sitemap .connect a { margin: 0 5px 0 0; } #footer { background: #e5efef; overflow: hidden; padding: 10px 0 20px; width: 100%; } .link { float: left; padding: 0 20px; width: 280px; } .copyright-etc { float: right; padding: 0 20px; text-align: right; width: 600px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #hero-container { position: relative; z-index: 1; } #hero { background: #537388; height: 379px; margin: 0 0 26px 0; padding: 1px 0 0 0; position: relative; z-index: 1; } #hero-nav { font-size: 14px; font-style: italic; font-weight: bold; line-height: 14px; position: absolute; top: 299px; right: 10px; z-index: 500; } #hero-nav a { background: #aabbc8; border-left: 1px solid #537388; display: block; float: left; padding: 28px 12px; } #hero-nav .activeSlide { background: #fff; } #hero .slide { margin: 9px 10px 10px; overflow: hidden; position: relative; width: 620px; height: 360px; } .base .slide h2 { font-size: 16px; line-height: 18px; margin-bottom: 0; } #hero img { position: absolute; z-index: 1; } #hero .blurb { background: #fff; padding: 10px 10px 5px; position: absolute; top: 290px; width: 600px; height: 70px; z-index: 200; } #hero .blurb h2, #hero .blurb p { margin-right: 138px; } #about-childhelp .button { clear: both; } #home .entry .summary { float: right; width: 210px; } #home .entry .thumb { float: left; } #home .base .button { font-size: 16px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .breadcrumb { margin: 0 20px; } .base .section-title { color: #6790ad; margin: 0 20px 20px; text-transform: uppercase; } .sub-title { margin: 0 20px; } .more { margin: 0 20px; } .entries { padding: 10px 0; } #featured-entry { background: #ebe9ee; margin: 0 4px; padding: 10px 0; } #featured-entry { font-size:16px; line-height: 20px; } .entry { clear: both; margin: 0 20px; padding: 10px 0 2px; } #blog .entry, #chapters .entry, #programs .entry, #stories .entry, #press-releases .entry, #sponsors-list .entry { border-top: 1px solid #eee; } .full-width .entry { clear: none; float: left; width: 600px; } .base .date-by-line { color: #777; font-size: 11px; margin: 0; /*text-transform: uppercase;*/ } #content .nav, .pagination { clear: both; border-top: 1px solid #eee; padding: 10px 20px; } .prev-entry { float: left; width: 290px; } .next-entry { float: right; text-align: right; width: 290px; } .section-nav { border-bottom: 1px solid #eee; margin: 0 0 18px 0; padding: 0 0 3px 0; } .base .section-nav ul { margin: 0; } .base .section-nav li { display: inline; list-style: none; margin: 0 5px 0 0; } .video-holder {width:600px;margin:10px 0;text-align:center;} /*=PROGRAMS*/ #programs #type-list { float: left; width: 430px; } #type-list .summary { float: right; width: 280px; margin: 0; } #programs #state-list, #chapters #state-list { float: left; width: 170px; margin: 0 20px; padding: 10px 0; } #programs .base #state-list p, #chapters .base #state-list p { border-top: 1px solid #eee; margin: 0; padding: 5px 0; } #programs .thumb, #program-type .thumb { float: left; margin: 0 10px 0 0; } .prgm-img-right { float: right; margin:8px; border:2px solid #B3A8CF;} .prgm-img-left { float: left; margin:8px; border:2px solid #B3A8CF;} .base #state-list h3 { margin-top: 18px; } #prgm-vol-btn ul { margin:0; padding: 0; } #prgm-vol-btn li { width: 250px;list-style:none;border:solid 4px #7B6BAC;margin:10px 0 10px -15px; } #prgm-vol-btn li a {display:block;padding:10px 6px;text-align:center;background-color:#fff;} #prgm-vol-btn li a:hover {background-color:#B5C5CF;} /*=CHAPTERS*/ #chapters .summary { float: right; width: 480px; margin: 0; } #chapters .thumb { float: left; margin: 0 10px 0 0; } #chapters #chapter-content { float: left; width: 430px; } #chapter-entry #chapter-content { float: left; width: 320px; } #chapter-content .entry { border: none; } .base #chapter-recruit-bt a { background: #6d5c96 url(/page/-/wrapper/images/site-nav-bg.gif) left center repeat-x; border: 1px solid #6e5d97; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; display: block; font-size: 18px; padding: 12px 10px; text-align: center; } .base #chapter-recruit-bt a:hover { background: #6d5c96 url(/page/-/wrapper/images/donate-bt-hover.gif) left center repeat-x; border-color: #6e5d97; color: #fb776d; } #chapter-sidebar { float: left; width: 320px; } #related-events .date { padding-right: 10px; width: 20%; } #related-events table, .base #related-programs ul { border-bottom: 1px solid #eee; } #related-events td, .base #related-programs li { border-top: 1px solid #eee; padding: 3px 0; } #related-events table { width: 100%; } #related-events td { vertical-align: top; } .base #related-programs ul { margin-left: 0; } .base #related-programs li { list-style: none; } /*=STORIES*/ #stories #featured-entry { background: #ebe9ee url(/page/-/wrapper/images/stories-banner-kidsbar.jpg) center 10px no-repeat; overflow: hidden; padding: 245px 0 0 0; width: 632px; } #stories #featured-entry .summary { float: left; margin: 20px 0 0 20px; padding: 10px 0 0 0; width: 480px; } #stories #featured-entry h2 { margin: 0; } #stories #content .first.column { margin: 0 20px 0 0; } #stories #content .last.column { } #stories #content .column { } .share-story-bt { float: right; margin: 20px 16px; } .share-story-bt a { background: url(/page/-/wrapper/images/share-story-bt.gif) 0 0 no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 100px; height: 100px; } .share-story-bt a:hover { background: url(/page/-/wrapper/images/share-story-bt.gif) 0 -100px no-repeat; } /*=GIFT CATALOG*/ #gift-catalog ul {list-style-type:none;margin:0;padding:0;} #gift-catalog ul li {float:left;width:189px;height:260px;margin:0 4px 12px 0;padding:15px 0 0 0 0;list-style-type:none;text-align:center;background-color:#E6E0EF;} #gift-catalog ul li img {width:185px;height:123px;margin:2px;} #gift-catalog h3 {font-size:14px;background-color:#72619B;height:20px;color:#FFF;padding:6px 0 4px 5px;} #gift-catalog ul li a {display:block;cursor:pointer;} #gift-catalog ul li a:hover {display:block;background-color:#D8BFFF;} #gift-catalog li a p {display:block;line-height:125%;height:92px;margin:6px;text-align:left;} /*=TAKE ACTION*/ .ch-entry-row {float:left;width:600px;padding:12px 0 12px;border-top:solid 2px #D1E2EF;} .ch-entry-row-left {float:left;width:80px;margin-top:0;} .ch-entry-row-right {float:right;width:490px;margin-right:5px;font-size:14px;} .ch-entry-row-right a {color:#3A6399;text-decoration:none;} .ch-entry-row-right a:hover {text-decoration:underline;} .ch-entry-row-right h4 {margin:0 0 0 0;} .ch-entry-row-right h4 a {color:#DF4337;font-size:16px;font-weight:bold;text-decoration:none;} .ch-entry-row-right h4 a:hover {text-decoration:underline;} .ch-entry-row-right p {line-height:18px;margin:0;} /*=VIDEO*/ #video object, #video-entry object { margin: 0 0 10px 0; } .video-display { float: left; width: 640px; } #gallery-display { padding: 10px 20px; } .video-list { float: right; width: 320px; } .video-gallery { padding: 10px 10px 10px 0; } .videoThumb { margin: 0 10px 0 0; } .video-list .pagination { padding: 10px 0; } /*=EVENTS*/ .events-links { border-bottom: 1px solid #eee; margin: 0 0 10px; padding: 5px 0; } .events-links a { } .events-links input { margin-bottom: 5px; } #event_search_zip { margin-right: 10px; } #event_search_zip, #event-radius { background: #fff; border: 1px solid #ddd; font-family: Helvetica, Arial, sans-serif; padding: 4px 2px; } .events-links .submit { background: #6d5c96 url(/page/-/wrapper/images/site-nav-bg.gif) left center repeat-x; border: 1px solid #6e5d97; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; cursor: pointer; margin-left: 10px; padding: 4px 10px; } .events-links input:hover.submit { background: #6d5c96 url(/page/-/wrapper/images/donate-bt-hover.gif) left center repeat-x; } .event td { margin: 0; padding: 15px 0; vertical-align: top; } .event .date { background: #ebe9ee; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #658eba; margin: 0 10px 0 0; padding: 5px 0 7px; text-align: center; width: 4em; } .base .event p { margin: 0; } .event .month { font-weight: bold; text-transform: uppercase; } .base .event .day { font-size: 21px; margin: 1px 0 0 0; } #event-search { border-top: 1px solid #eff5f5; border-bottom: 1px solid #eff5f5; margin: 5px 20px; padding: 15px 0; } #event-search form { margin: 10px 0 0; } .event .desc { width: 540px; } /*=SPONSORS*/ .sponsor td { vertical-align: top; } .sponsor-logo { padding: 5px 0; text-align: center; width: 200px; } .sponsor-info { padding: 20px 0; } /*=PHOTOS*/ #photos { height: 360px; margin: 0; overflow: hidden; padding: 0; } #photos img { border: none; } #photo-gallery .nav { overflow: hidden; } #prev-photo, #next-photo { float: left; margin: 10px 0 0 0; text-align: center; width: 18px; } #prev-photo a { background: url(/page/-/wrapper/images/left-arrow.gif) 0 0 no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 18px; height: 17px; } #prev-photo a:hover { background: url(/page/-/wrapper/images/left-arrow.gif) 0 -17px no-repeat; } #next-photo a { background: url(/page/-/wrapper/images/right-arrow.gif) 0 0 no-repeat; display: block; overflow: hidden; text-indent: -9999px; width: 18px; height: 17px; } #next-photo a:hover { background: url(/page/-/wrapper/images/right-arrow.gif) 0 -17px no-repeat; } /*=PRESS*/ #press-info { border-bottom: 1px solid #eee; } /*=VOLUNTEER-OPPORTUNITIES*/ #vol-opp-chapter { width: 240px; float: left; } #vol-opp-program { width: 350px; float: left; } #vol-opp-program ul li { list-style-type: none; font-weight: bold; } #vol-opp-program ul li ul li { list-style-type: disc; font-weight: normal; } /*=DISQUS COMMENTS*/ #disqus_thread { } .base #disqus_thread #dsq-content h3 { } /* 06 =FRAMEWORK ---------------------------------------------------------- */ #framework { margin: 0 20px; padding: 20px 0; } #framework input.text, #framework textarea { background: #fff; border: 1px solid #ddd; font-family: Helvetica, Arial, sans-serif; padding: 4px 2px; } /*=VOLUNTEER FORMS*/ #vol-left-bloc {float:left;width:430px;} /* SKIN OVERRIDES Last Update: JUNE 11, 2010 NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework". For the YUI styles to work the body id should be "bsd" */ /*=TYPOGRAPHY ---------------------------------------------------------- */ #framework #SKIN h1, /*If you change the font-soze for h1 or it's top margin or padding properties be sure to change the top margin property for "#SKIN #account_actions" such that the base line for the elements within line up with h1 in control_set div*/ #framework #SKIN .basic .main #eventdetail .title, /*Event Title*/ #framework #profiledetail #sectionheader, #framework #stdheader #title /*Page title on Outreach pages*/ { font-size: 24px; font-weight: normal; line-height: 30px; margin-bottom: 6px; } /*if using cufon or typekit for headers be sure to target the following header ids/classes #titletext - header for Outeach pages .headertitle — header for Comunity pages */ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #SKIN h2, #framework #sectionheader, #framework #SKIN .widget_header, #framework #SKIN .widget_title, #framework #community .communitypostinlist .title, /*Blog post title on community web page*/ #framework #community .header, /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework a#host-button, #framework #loginform .logintitle, #framework #signupform .signuptitle, #framework #outreach_content #loginform .logintitle, #framework #outreach_content #signupform .signuptitle, #framework #manageform .managetitle, #framework #forgotpw .header { font-size: 18px; font-weight: normal; line-height: 24px; margin-bottom: 6px; } #framework #SKIN h3, #framework #SKIN .basic .main .typedescheader, #framework #community .postlist table.head .text, /*Table heading on Community Dashboard page*/ #framework #community .subheader, /*Subheader on the Community Blog Entry Preview page*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead { font-size: 16px; font-weight: normal; line-height: 20px; margin-bottom: 6px; } #framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; } /*HEADERS WITH BOTTOM BORDERS*/ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #sectionheader, #framework .sectionheader, #framework #SKIN .header, #framework #SKIN .basic .main .typedescheader, #framework #community .header /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework #stdheader, /*Header for Outreach pages*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead, #framework #manageform .managetitle, #framework #forgotpw .header { border-bottom: 1px solid #ddd; padding-bottom: 3px; } /*WIDGET HEADERS*/ #framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; } /*SUB-HEADERS*/ #framework #SKIN .widget_subheader, /*Widget Subheader on the dashboard*/ #framework #community .subheader /*Subheader on the Community Blog Entry Preview page*/ { background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; } /*=BUTTONS ---------------------------------------------------------- */ /*INPUT BUTTONS*/ #framework input[type=button], #framework input[type=submit], #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter, #framework .loginbutton input, #framework .signupbutton input, #framework #community input[type=submit], #framework .utils_search button { background: #6d5c96 url(/page/-/wrapper/images/site-nav-bg.gif) left center repeat-x; border: 1px solid #6e5d97; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #fff; cursor: pointer; margin: 10px 0 0 0; padding: 4px 10px; } /*Targets most Buttons*/ /*INPUT HOVER STATES Note this will only work for modern browsers*/ #framework input[type=button]:hover, #framework input[type=submit]:hover, #framework input:hover.submit, #framework #invitationpage input:hover#submit_button, #framework button:hover#date-filter, #framework .loginbutton input:hover, #framework .signupbutton input:hover, #framework #community input[type=submit]:hover, #framework .utils_search button:hover { } /*RSVP and DETAILS BUTTONS*/ #framework #event_results .event_footer .links { float: left; } #framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; } #framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; } #framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; } #framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; } #framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #33; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/ /*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/ #framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; } /*You can change the background color to match your other input button styles*/ /*SEARCH BUTTON*/ #framework .search_form button { } /*=TEXT INPUT FIELDS AND TEXTAREAS ---------------------------------------------------------- */ #framework input.text, #framework textarea { } /*Use this definition to target most of the text input fields*/ /*=TABS NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e. #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } ---------------------------------------------------------- */ /*FRAMEWORK TABS*/ #framework #SKIN #blue_hat { background: none; border-bottom: 1px solid #ddd; height: 43px; } #framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; } #framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; } #framework #SKIN #blue_hat li a { color: #888; text-decoration: none; } #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #blue_hat .blue_hat_active a { color: #555; } #framework #SKIN #blue_hat li a:hover { background: none; color: #555; } /*EVENT TABS*/ #framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0; width: 100%; } #framework ul#event_order li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; } #framework ul#event_order li a { color: #888; } #framework ul#event_order a:hover { color: #555; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active a { color: #555; } /*WIDGET TABS*/ /*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/ #framework #SKIN .widget_tabs { margin: 0; padding: 0; } #framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; } #framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; } #framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; } /*FRIENDS TABS*/ #framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; } #framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; } #framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left; margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } #framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; } #framework #SKIN #friends_tabs ul li.inactive_tab { background: #eee; border: 1px solid #ddd; } /*YUI POP OVER This controls the style of the pop over opened after clicking the contact importer button As noted above, in order for this to work the body id should be "bsd" ---------------------------------------------------------- */ #bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #bsd .yui-panel-container.shadow .underlay { display: none; } #bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/ #bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; } #bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; } #bsd #contact_importer_wrapper { margin: 0; } #bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; } #bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; } /*Contact Listings*/ #bsd #contact_importer_wrapper #results_table_header { background: #eee; } #bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; } /*=LAYOUT ---------------------------------------------------------- */ /*SOCIAL NET WIDGET COLUMNS*/ #framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/ #framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/ /*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW ---------------------------------------------------------- */ #framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; } /* 07 =UTILITY ---------------------------------------------------------- */ .cufon-loading a { visibility: hidden !important; } /*Prevents flash of unstyled content*/ .cufon { z-index: 2; } .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}