/* styles.common.css this file sets up all of the IDs and CLASSes that are used by the main pages across the entire site (not popups) SOME NOTES ON THE CONVENTIONS USED: - IDs that are used for template-level objects are InitalCaps - CLASSes that are used for site-wide objects are also InitialCaps - IDs that are used for an element on a specific page are all lowercase, using dashes to separate words, and (if approprate) prefixed by another word to 'group' the IDs, and then an underscore. (ex: nav_contact-us, nav_home) 7/6/06: modified by Justin to fix up content styling 7/7/06: modified to accomodate the new multimedia section 7/11/06: further dp additions for content restyling 7/19/06: incorporations of DP punchlist 4 8/10/06: .FeaturedJobs info moved from styles.basic.css 12/27/07: Changes to SiteNavBar widths in light of name change for Science Signaling */ /* add the good stuff for the good browsers */ BODY { margin: 0; padding: 0; font-family: 'Lucida Grande', arial, helvetica, sans-serif; color: #333; } A { text-decoration: none; } A:hover { text-decoration: underline; } HR { display: none; } #MainColumn HR { display: block; visibility: hidden; } .SectionMarker, #BrowserWarning, #AccessibilityLinks { display: none; } .SectionMarker, #AccessibilityLinks { display: block; position: absolute; left: -1000px; width: 400px; } /* ---------------------------------------------- BEGIN: template elements -- */ #Ad728x90 { margin: 7px 0 0 16px; } #Ad728x90 IMG { border: none; } #PageWrapper { margin:0 auto; width:1014px; } #LayoutWrapper { width: 1014px; padding: 0; background: #FFF; padding-top: 7px; margin-top: 7px; } BODY.Popup #PageWrapper > #LayoutWrapper { max-width: 100%; min-width: 0; } /* -- this wraps the entire header -- */ #HeaderWrapper { position: relative; margin: 0 7px 0 7px; min-height: 86px; } /* WORKAROUND: for IE/win; hidden from IE5/mac */ /* \*/ * HTML #HeaderWrapper { height: 86px; } /* */ /* -- the aaas/science logo -- */ #SiteLogo { position: absolute; width: 113px; height: 60px; top: 0; left: 0; } /* -- the little links to the right of the logo -- */ #SiteToolsNav { height: 19px; margin-left: 113px; } #SiteToolsNav LI { height: 12px; padding-left: 15px; padding-top: 7px; } /* NOTE: IE5/mac needs widths on LIs */ #SiteToolsNav #site-tools_aaas { width: 23px; } #SiteToolsNav #site-tools_feedback { width: 46px; } #SiteToolsNav #site-tools_subscribe { width: 48px; } /* -- search area -- */ #GlobalSearch { position: absolute; top: 0; right: 0; width: 400px; line-height: 0; } #GlobalSearch { width: auto; } #GlobalSearch IMG { /* display: inline; */ float: left; width: 42px; margin-top: 6px; margin-right: 4px; } #GlobalSearch FORM { text-align: right; } #GlobalSearch SELECT { font-size: 9px; line-height: 11px; width: 120px; } #GlobalSearch #search_terms { font-size: 9px; border: 1px solid #666; margin: 0; padding: 0; } /* TODO: make the text bigger on IE5/mac */ #GlobalSearch A { font-size: 65%; text-decoration: underline; } /* WORKAROUNDS: for IE/win */ /* \*/ * HTML #GlobalSearch { right: 0; } * HTML #GlobalSearch IMG { font-size: 0; } * HTML #GlobalSearch SELECT { margin-top: 0; } * HTML #GlobalSearch A { vertical-align: middle; } /* */ /* WORKAROUND: IE5/mac needs widths set for floats */ #GlobalSearch #search_terms { width: 90px; } /* \*/ #GlobalSearch #search_terms { width: 100px; } /* */ /* -- account utilties and status area -- */ #HeaderWrapper #StatusBar { background: url(bg.status-bar.19.gif) top left repeat-x; height: 18px; margin-left: 113px; } #HeaderWrapper #StatusBar P { color: #DDE7EC; font-size: 70%; padding-top: 2px; text-align: right; padding-right: 1em; margin-bottom: 0; } #HeaderWrapper #StatusBar A { color: #DDE7EC; } #HeaderWrapper #StatusBar A.Active { font-weight: bold; } /* -- main nav bar -- */ #SiteNavBar { background: url(bg.nav.gif) top left repeat-x; height: 23px; margin-left: 113px; } #SiteNavBar UL { height: 23px; width: 458px; float: left; } #SiteNavBar UL LI { height: 23px; display: block; /* border-right: 1px solid #D21E21; border-left: 1px solid #E76F71; */ } #SiteNavBar UL LI.Active { background: url(bg.nav.1.gif) top left no-repeat; } #SiteNavBar UL LI A { /* height: 13px; */ display: block; /* padding: 6px 0 4px 8px; */ } #SiteNavBar #nav_magazine { width: 82px; } #SiteNavBar #nav_news { width: 57px; } #SiteNavBar #nav_stke { width: 77px; } #SiteNavBar #nav_sage { width: 80px; } /* this is gone now */ #SiteNavBar #nav_careers { width: 72px; } #SiteNavBar #nav_multimedia { width: 85px; } #SiteNavBar #nav_collections { width: 85px; } #SiteNavBar #site_help_form { float: left; height: 23px; } #SiteNavBar #site_help_form LABEL IMG { vertical-align: top; } #SiteNavBar #site_help_form SELECT { font-size: 10px; width: 79px; } /* -- sub nav bar -- */ /* NOTE: moved to section-specific CSS files */ /* -- breadcrumb area -- */ #Breadcrumb { color: #52819B; font-size: 70%; padding: .65em 0 1.5em 0; clear:both; } #Breadcrumb A { color: #52819B; text-decoration: underline; } /* -- body setup -- */ #BodyWrapper { margin: 0 7px 0 7px; /* color: #666; */ } #BodyWrapper #NavColumn { width: 147px; margin-right: 10px; margin-bottom: 20px; } #BodyWrapper #MainColumn { padding-bottom: 20px; } #BodyWrapper #SideColumn { width: 162px; margin-left: 5px; margin-bottom: 10px; } #MainColumnCell { width: 100%; } /* WORKAROUND: for IE/win; hidden from IE5/mac */ /* \*/ * HTML #BodyWrapper .LayoutTable { width: auto; } * HTML #BodyWrapper #MainColumn .LayoutTable { width: 100%; } /* */ /* * HTML #BodyWrapper { margin: 0; } * HTML #BodyWrapper .LayoutTable { margin: 0 7px; width: auto; } * HTML #BodyWrapper .LayoutTable .LayoutTable { width: 100%; } */ /* -- advertisements & promos -- */ #SideColumn #Promo160x120 { margin-bottom: 5px; } #SideColumn #Ad160x600 { margin-bottom: 10px; } #SideColumn #Ad160x600 IMG { border: none; display: block; } #SideColumn #Ad160x600 IMG.TowerAd { border: 1px solid #666; } #SideColumn P.AdInfo { font-size: 65%; text-align: center; margin-bottom: 20px; } #SideColumn P.AdInfo A { color: #666; text-decoration: underline; } #SideColumn .SponsoredLinks { border: 1px solid #CCC; padding: 8px; } #SideColumn .SponsoredLinks H6 { font-size: 70%; text-transform: uppercase; font-weight: normal; color: #999; margin-bottom: 1em; } #SideColumn .SponsoredLinks DL.LinkList { color: #999; } #SideColumn .SponsoredLinks DL.LinkList DT { font-size: 75%; font-weight: bold; } #SideColumn .SponsoredLinks DL.LinkList DD { font-size: 70%; margin: 0 0 1em 0; } #SideColumn .SponsoredLinks DL.LinkList DD A { color: #53829C; text-decoration: underline; } #SideColumn .SponsoredLinks UL.LinkList LI { font-size: 65%; text-align: center; padding-left: 0; margin-bottom: 10px; } #SideColumn .SponsoredLinks UL.LinkList LI A { color: #999; text-decoration: underline; } #SideColumn .SponsoredLinks UL.LinkList LI A IMG { display: block; margin: 2px auto; } #SideColumn .FeaturedJobs { background: #EEE; margin: -.5em 0; border: 1px solid #CCC; } #SideColumn .FeaturedJobs H6 { color: #999; text-transform: uppercase; margin: 5px 8px; } #SideColumn .FeaturedJobs DL { margin: 5px 8px; } #SideColumn .FeaturedJobs DT { font-weight: bold; font-size: 70%; } #SideColumn .FeaturedJobs DD { margin: 0; margin-bottom: 1em; font-size: 70%; } /* NEW (prob for google ads) */ #SideColumn .FeaturedJobs TD { margin: .5em; font-size: 70%; margin-bottom: 1em; } #SideColumn .FeaturedJobs .ContentArea A { color: #53859F;} /* -- footer stuff -- */ #FooterWrapper { background: #AD0016 url(bg.footer.gif) bottom left repeat-x; color:#FFFFFF; margin:0 0 0 0; padding:10px 0; position:relative; } #FooterWrapper P { margin:0 10px 10px; font-size: 70%; } #FooterWrapper A { color: #FFF; text-decoration: none; } #FooterWrapper A:hover { text-decoration: underline; } #FooterWrapper #copyright { margin-bottom: 0; } #FooterWrapper #copyright, #FooterWrapper #copyright A { color: white; } #FooterWrapper #copyright A { text-decoration:underline } #FooterWrapper #logo_aaas { position: absolute; left: 127px; top: 12px; } #FooterWrapper #logo_hwp { position: absolute; left: 65px; top: 34px; } /* ------------------------------------------------ END: template elements -- */ /* ------------------------------------------- BEGIN: legacy content rules -- */ /* NOTE: #BodyWrapper #MainColumn precedes selectors to give more weight */ #LegacyContent, .LegacyContent { margin-top: 12px; } /* fix for gecko */ #LegacyContent NOBR { white-space: normal; } #LegacyContent NOBR STRONG, #LegacyContent STRONG NOBR { white-space: nowrap; } #PageWrapper #BodyWrapper #LegacyContent, #PageWrapper #BodyWrapper .LegacyContent, #PageWrapper #BodyWrapper #LegacyContent P, #PageWrapper #BodyWrapper .LegacyContent P, #PageWrapper #BodyWrapper #LegacyContent UL, #PageWrapper #BodyWrapper .LegacyContent UL, #PageWrapper #BodyWrapper #LegacyContent OL, #PageWrapper #BodyWrapper .LegacyContent OL, #PageWrapper #BodyWrapper #LegacyContent LI, #PageWrapper #BodyWrapper .LegacyContent LI, #PageWrapper #BodyWrapper #LegacyContent DL, #PageWrapper #BodyWrapper .LegacyContent DL, #PageWrapper #BodyWrapper #LegacyContent DD, #PageWrapper #BodyWrapper .LegacyContent DD, #PageWrapper #BodyWrapper #LegacyContent DT, #PageWrapper #BodyWrapper .LegacyContent DT, #PageWrapper #BodyWrapper #LegacyContent FONT, #PageWrapper #BodyWrapper .LegacyContent FONT, #PageWrapper #BodyWrapper #LegacyContent TD, #PageWrapper #BodyWrapper .LegacyContent TD { font-size: small; } #PageWrapper #BodyWrapper #LegacyContent H2, #PageWrapper #BodyWrapper .LegacyContent H2 { font-size: medium; color: #333; text-transform: none; margin-top: 2px; } #PageWrapper #BodyWrapper #LegacyContent H3, #PageWrapper #BodyWrapper .LegacyContent H3 { font-size: small; color: #666; text-transform: uppercase; } #PageWrapper #BodyWrapper #LegacyContent H4, #PageWrapper #BodyWrapper .LegacyContent H4 { font-size: small; text-align: left; } #PageWrapper #BodyWrapper #LegacyContent H5, #PageWrapper #BodyWrapper .LegacyContent H5 { font-size: small; text-align: left; color: #333; } /* WORKAROUND: for IE/win; hidden from IE5/mac */ /* NOTE: arrrrrrgh... of course IE/win has to be 1 size off! */ /* \*/ * HTML #PageWrapper #BodyWrapper #LegacyContent, * HTML #PageWrapper #BodyWrapper .LegacyContent, * HTML #PageWrapper #BodyWrapper #LegacyContent P, * HTML #PageWrapper #BodyWrapper .LegacyContent P, * HTML #PageWrapper #BodyWrapper #LegacyContent UL, * HTML #PageWrapper #BodyWrapper .LegacyContent UL, * HTML #PageWrapper #BodyWrapper #LegacyContent OL, * HTML #PageWrapper #BodyWrapper .LegacyContent OL, * HTML #PageWrapper #BodyWrapper #LegacyContent LI, * HTML #PageWrapper #BodyWrapper .LegacyContent LI, * HTML #PageWrapper #BodyWrapper #LegacyContent DL, * HTML #PageWrapper #BodyWrapper .LegacyContent DL, * HTML #PageWrapper #BodyWrapper #LegacyContent DD, * HTML #PageWrapper #BodyWrapper .LegacyContent DD, * HTML #PageWrapper #BodyWrapper #LegacyContent DT, * HTML #PageWrapper #BodyWrapper .LegacyContent DT, * HTML #PageWrapper #BodyWrapper #LegacyContent FONT, * HTML #PageWrapper #BodyWrapper .LegacyContent FONT, * HTML #PageWrapper #BodyWrapper #LegacyContent TD, * HTML #PageWrapper #BodyWrapper .LegacyContent TD { font-size: x-small; } /* */ #PageWrapper #BodyWrapper #LegacyContent H4, #PageWrapper #BodyWrapper .LegacyContent H4 { font-size: x-small; } #PageWrapper #BodyWrapper #LegacyContent CENTER H4, #PageWrapper #BodyWrapper #LegacyContent CENTER H4 B FONT[size="-1"] { font-size: small; } #PageWrapper #BodyWrapper #LegacyContent P, #PageWrapper #BodyWrapper .LegacyContent P { margin: 1em 0; } #PageWrapper #BodyWrapper #LegacyContent HR, #PageWrapper #BodyWrapper .LegacyContent HR { display: block; visibility: visible; width: 100%; height: 1px; border: none; border-top: 1px solid #CCC; margin-bottom: 16px; } #PageWrapper #BodyWrapper #LegacyContent CENTER TABLE, #PageWrapper #BodyWrapper .LegacyContent CENTER TABLE { margin-bottom: 12px; } /* --------------------------------------------- END: legacy content rules -- */ /* ---------------------------------------------------- BEGIN: print rules -- */ @media print { BODY { background: #FFF; } #Ad728x90 { margin-left:0; } #Ad728x90 IMG { width: 600px; height: 74px; } #HeaderWrapper { margin: 0; margin-top: 10px; } #SiteToolsNav { visibility: hidden; height: 37px; } #site_help_form, #StatusBar, #page-nav, #GlobalSearch { display: none; } #SiteNavBar UL { width: 462px; } #PageWrapper #LayoutWrapper { margin: 0; padding: 0; width: auto; min-width: 600px; } * HTML #PageWrapper #LayoutWrapper { width: 100% !important; } /* fix for IE/win */ #BodyWrapper { color: #000; margin: 0; } #BodyWrapper #MainColumn { margin: 0; padding: 0; } #BodyWrapper #NavColumnCell { display: none; } #FooterWrapper { clear: both; position: static; } #FooterWrapper P { margin-left: 10px; } #FooterWrapper #logo_hwp, #FooterWrapper #logo_aaas { display: none; } } /* ------------------------------------------------------ END: print rules -- */ #ISSNLine {margin-right:7px;} #ISSNLine P {padding:3px 0 3px 210px;margin:0;font-size:70%}