@charset "utf-8"; /* CSS Document screen.css for BJIL site * orange bkgd: #FFC500 * secNav bkgd: #E3 * blue tabs: #0470AA * red text: #CC0000 * tabs bkgd: #102230 with #808080 border * a:link blue: #0470AA * a:visited gray: #6 */ /* css layout diagram +- pagebox ------------------------------------------------------ | == bannerbox =============================================== | == sitenavbox ============================================== | +- pagecontentbox clear:both -------------------------------- | | == secnavbox float:left == +-- mainbox float:right --+ | | | == nonpubsbox ========= | | | +-- pubsbox ---------------------------------------------- | | | | == bjilbox float:left == == publicistbox float:right == | | | + | | + | | == newspanelbox float:left == | | == noticesbox clear:both ================================= | + + */ /* LAYOUT - BODY AND PAGE BOX -------------------------------- */ * {margin:0; padding:0;} body {font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: #0D2F52 url(../images/bkgd_body10x600_0470AA.jpg) repeat-x left top; margin-bottom:200px; } /* #PAGEBOX: position:relative fixes IE7 zoom margin prob */ #pageBox { width:950px; margin:1.5em auto 200px auto; position:relative; border:1px solid #142B40; background: #FFFFFF url(../images/bkgd_bodyLeftCol233x10.jpg) repeat-y left top; } /* ---- SKIPNAV ---- */ #skipnav {position: absolute; top:-1.6em; left:0;} #skipnav a:link, #skipnav a:visited {padding:0px 5px 1px 5px; font-size:1.1em; line-height:1em; margin-right:2px; color:#11283A;} #skipnav a:hover, #skipnav a:focus {background:white; color:#005892;} /* LAYOUT - BANNER BOX - #bannerBox ==================================== */ #bannerBox {margin:0; padding:0;} #bannerBox img {display:block; border:none;} /* LAYOUT - SITE NAV BOX - #siteNavBox ======================================= */ #siteNavBox {float:left; position:relative; width:950px; background: #262729 url(../images/bkgd_siteNav10x45.jpg) repeat-x left top; border-top: 1px solid #101112; border-bottom:6px #e3e3e3 solid;} /*
  • 's as floated horiz row of tabs */ #siteNavBox ul {float:left; position:relative; list-style:none; margin-left:6px;} #siteNavBox li {display:block; float:left; width:11em; margin-top:5px; margin-bottom:0; margin-right:0px; } #siteNavBox a:link, #siteNavBox a:visited, #siteNavBox a:hover {display:block; } #siteNavBox a:link span, #siteNavBox a:visited span, #siteNavBox a:hover span {display:block; font-size:1.2em; padding-left:1em; padding-right:0; margin:0; line-height:2em; } /* TABS - LINK */ #siteNavBox a:link, #siteNavBox a:visited {font-weight:normal; color:#FFF; text-decoration:none; background: url(../images/tab_right400x60_link.gif) no-repeat right top; } #siteNavBox a:link span, #siteNavBox a:visited span { background: url(../images/tab_left20x60_link.gif) no-repeat left top; } /* TABS - HOVER */ /* left tab */ #siteNavBox a:hover {background: url(../images/tab_right400x60_hover.gif) no-repeat right top; } /* right tab */ #siteNavBox a:hover span { background: url(../images/tab_left20x60_hover.gif) no-repeat left top; } /* -- CURRENT PAGE TAB STYLING OVERRIDES -- */ /* left tab */ #siteNavBox a:link.currentTab, #siteNavBox a:visited.currentTab, #siteNavBox a:hover.currentTab {color:#222; font-weight:bold; text-decoration:none; background: url(../images/tab_right400x60_current.gif) no-repeat right top; } /* right tab */ #siteNavBox a:link.currentTab span, #siteNavBox a:visited.currentTab span, #siteNavBox a:hover.currentTab span {background: url(../images/tab_left20x60_current.gif) no-repeat left top; } /* MID SECTION CONTENT WRAPPER =============================== */ /* a handle for main content title bar bkgd; must include the cleared notices box at bottom so it's bkgd shows fully; background is used to set page title background bar */ #wrapper-mid {clear:both; width:950px; padding:0; margin:0; background:url(../images/bkgd_pgTitle750x31_FFC500.gif) no-repeat 231px 0px; } /* SECONDARY NAV (#secNavBox) ---------------------------------------- */ #secNavBox { float:left; width:231px; padding:8px 0px 15px 0px; margin-bottom:0; background: #E3E3E3 url(../images/bkgd_secNavCorner250x10_E3E3E3.gif) no-repeat right bottom; } #secNavBox p.fauxheading {padding-top:4px; font-size:1.1em; padding-left:12px; font-weight:bold; letter-spacing:.1em; color:#222;} #secNavBox ul {margin-top:6px; list-style:none;} #secNavBox li { font-size:1.2em; line-height:1.5em; width:230px; margin:0 0 1px 0; padding:0; } #secNavBox a:link, #secNavBox a:visited, #secNavBox a:hover {display:block; width:218px; /* XX width:228px; */ padding:0 0 0 12px; text-decoration:none;} #secNavBox a:link {color:#0470AA;} #secNavBox a:visited {color:#0470AA;} #secNavBox a:hover {color:#0470AA; background:#FFF;} /* current secNav link list */ #index #secNavBox li a.index:link, #index #secNavBox li a.index:visited, #index #secNavBox li a.index:hover, #pub-upcoming #secNavBox a.pub-upcoming:link, #pub-upcoming #secNavBox a.pub-upcoming:visited, #pub-upcoming #secNavBox a.pub-upcoming:hover #pub-archive #secNavBox a.pub-archive:link, #pub-archive #secNavBox a.pub-archive:visited, #pub-archive #secNavBox a.pub-archive:hover, #pub-submissions #secNavBox a.pub-submissions:link, #pub-submissions #secNavBox a.pub-submissions:visited, #pub-submissions #secNavBox a.pub-submissions:hover, #pub-subscriptions #secNavBox a.pub-subscriptions:link, #pub-subscriptions #secNavBox a.pub-subscriptions:visited, #pub-subscriptions #secNavBox a.pub-subscriptions:hover, #about-what #secNavBox a.about-what:link, #about-what #secNavBox a.about-what:visited, #about-what #secNavBox a.about-what:hover, #about-bjilorg #secNavBox a.about-bjilorg:link, #about-bjilorg #secNavBox a.about-bjilorg:visited, #about-bjilorg #secNavBox a.about-bjilorg:hover, #about-news #secNavBox a.about-news:link, #about-news #secNavBox a.about-news:visited, #about-news #secNavBox a.about-news:hover, #about-sisterorgs #secNavBox a.about-sisterorgs:link, #about-sisterorgs #secNavBox a.about-sisterorgs:visited, #about-sisterorgs #secNavBox a.about-sisterorgs:hover, #symp-upcoming #secNavBox a.symp-upcoming:link, #symp-upcoming #secNavBox a.symp-upcoming:visited, #symp-upcoming #secNavBox a.symp-upcoming:hover, #symp-about #secNavBox a.symp-about:link, #symp-about #secNavBox a.symp-about:visited, #symp-about #secNavBox a.symp-about:hover, #symp-archive #secNavBox a.symp-archive:link, #symp-archive #secNavBox a.symp-archive:visited, #symp-archive #secNavBox a.symp-archive:hover, #resources-tools #secNavBox a.resources-tools:link, #resources-tools #secNavBox a.resources-tools:visited, #resources-tools #secNavBox a.resources-tools:hover, #resources-courses #secNavBox a.resources-courses:link, #resources-courses #secNavBox a.resources-courses:visited, #resources-courses #secNavBox a.resources-courses:hover, #resources-alumni #secNavBox a.resources-alumni:link, #resources-alumni #secNavBox a.resources-alumni:visited, #resources-alumni #secNavBox a.resources-alumni:hover, #resources-careers #secNavBox a.resources-careers:link, #resources-careers #secNavBox a.resources-careers:visited, #resources-careers #secNavBox a.resources-careers:hover, #memb-join #secNavBox a.memb-join:link, #memb-join #secNavBox a.memb-join:visited, #memb-join #secNavBox a.memb-join:hover, #memb-formemb #secNavBox a.memb-formemb:link, #memb-formemb #secNavBox a.memb-formemb:visited, #memb-formemb #secNavBox a.memb-formemb:hover, #memb-elections #secNavBox a.memb-elections:link, #memb-elections #secNavBox a.memb-elections:visited, #memb-elections #secNavBox a.memb-elections:hover, #contact #secNavBox a.contact,:link #contact #secNavBox a.contact:visited, #contact #secNavBox a.contact:hover, #donate #secNavBox a.donate:link, #donate #secNavBox a.donate:visited, #donate #secNavBox a.donate:hover, #sitemap #secNavBox a.sitemap:link, #sitemap #secNavBox a.sitemap:visited, #sitemap #secNavBox a.sitemap:hover {display:block; width:218px; padding:0 0 0 12px; color:#000; text-decoration:none; background:#FFF;} /* MAIN BOX (#mainBox) ======================================== */ /* has 709px of available horiz space */ #mainBox {float:right; width:665px; padding:0; margin:2px 26px 0 0; } h1.pageTitle { float:left; width:410px; margin:5px 0 15px 0; padding:0; font-size: 1.5em; font-weight:bold; color:#222; text-transform:uppercase; } #mainBox p, #mainBox li {font-size:1.2em;} img {display:block;} /* title bar section -------------------------------------------- */ #titlePic { float:right; margin:8px 0 0 0; padding:0; width:226px; } #titlePic img {margin:0; padding:0; width:226px; height:127px; border:none;} /* introBox --------------------------------------------- */ #introBox {width:410px; } #introBox h1 {margin-top:1em; font-size:1.4em; letter-spacing:.1em; color:#CC0000; } /* main content */ #mainBox h2 {margin:.75em 0 .1em 0; padding:0; font-size: 1.6em; color:#000; } #mainBox h3 {margin:.75em 0 .25em 0; padding:0; font-size: 1.4em; color:#000; } #mainBox h4 {margin:.75em 0 .25em 0; padding:1px 0 0 0; font-size: 1.2em; color:#000; } #mainBox h5 {margin:.75em 0 .25em 0; padding:0; font-size: 1.2em; color:#404850; } #mainBox p {line-height:1.35em; margin-bottom:.5em; } #mainBox ul li {line-height:1.35em; list-style:none; } #mainBox ol li {line-height:1.5em; list-style:decimal inside; } #mainBox a:link {color:#005892; } #mainBox a:visited {color:#456; } #mainBox a:hover {text-decoration:underline; } #mainBox .gototop {font-size:1.1em; line-height:1.1em; margin:.75em 0 .75em -1px; padding:1px 1px 2px 1px; width:3em; clear:both; background:#E2E3E4; text-align:center; } #mainBox .gototop a:link, #mainBox .gototop a:visited {color:#005892; font-weight:normal; background:#E0E8FF; text-decoration:none;} #mainBox .gototop a:hover {text-decoration:underline; } /* NONPUBS LAYOUT ######################### */ /* note: clear is necessary to contain the padding-top of the first element in this box, clear and width keep anything from moving up and wrapping to the right of the page title. */ #nonPubsBox {float:left; width:410px; /* XX width:400px; */ padding-bottom:25px; } #sidebar {float:right; clear:right; width:226px; padding:0; margin:0px 0 25px 0;} /* Archive LAYOUT ######################### */ /* note: clear is necessary to contain the padding-top of the first element in this box, clear and width keep anything from moving up and wrapping to the right of the page title. */ #archiveBox {float:left; width:410px; /* XX width:400px; */ padding-bottom:25px; } #archiveMenu {float:right; clear:right; width:226px; padding:0; margin:75px 0 25px 0;} /* PUBS LAYOUT ############################ */ #pubsBox {clear:both; } #pubsBox h4 {color:#0470AA;} /* basic column layout */ #bjilBox {width:318px; float:left; padding-bottom:25px; } #publicistBox {width:318px; float:right; padding-bottom:25px; } /* section titles */ #bjilBox h2, #publicistBox h2 {font-size: 2.2em; font-weight:normal; line-height:1em; margin:0 0 0.5em 0; border-bottom:1px #CCC solid; } /* needed to adjust the subheading 'underline' individually */ #bjilBox h2 {padding:0 0 2px 0;} #publicistBox h2 {padding:1.05em 0 0 0;} /* for "of" in BJIL title */ .ofstyle {font-size:.8em; font-style:italic; font-weight:normal;} /* for "online" in Publicist title */ .media {font-size:60%; color:#CC0000; padding-left:.5em; letter-spacing:.07em;} #bjilBox h3, #publicistBox h3 { margin:0.75em 0 .25em 0; xpadding:.5em 0; font-size: 1.4em; } /* ARTICLE LISTS ONLY - more specific, but uses pageIDs #index #bjilBox li, #pub-upcoming #bjilBox li, #pub-archive #bjilBox li, #index #publicistBox li, #pub-upcoming #publicistBox li, #pub-archive #publicistBox li { margin:0 0 0 0; padding:0 0 .75em 0; list-style:none; }*/ #bjilBox li, #publicistBox li { margin:0 0 0 0; padding:0 0 .75em 0; list-style:none; } /* NEWS PAGE -------------------------------------- */ #about-news #mainBox h3 a:link, #about-news #mainBox h3 a:visited, #about-news #mainBox h3 a:hover {color:black; text-decoration:none;} /* UPCOMING SYMPOSIUM symp-upcoming.php -------------------------------------- */ #symp-upcoming table {width:396px; border: 1px #586068 solid;} #symp-upcoming td, #symp-upcoming th { padding:5px; vertical-align: top; } #symp-upcoming td h3, #symp-upcoming td h4 {margin-top:0;} #symp-upcoming td h4 {xcolor:#0470AA;} /* MEMBERSHIP-ELECTIONS memb-elections.php --------------------------------------- */ #memb-elections #mainBox li {line-height:1.35em; margin-bottom:.5em; } /* NEWS PANEL (#newsPanelBox) ===================================== */ /* clear:left keeps newsPanelBox under secNav in unlikely case where #mainBox is shorter than secNavBox */ #newsPanelBox {clear:left; float:left; width:216px; padding:0 0 25px 15px; background: #707478 url(../images/bkgd_bodyLeftCol233x10.jpg) repeat-y left top; } #newsPanelBox h2 {font-size:1.2em; margin:1.5em 0 .5em 0; font-weight:bold; letter-spacing:.1em; color:#080808;} #newsPanelBox p {font-size:1.2em;} #newsPanelBox ul {margin:0; padding-right:10px; list-style:none;} #newsPanelBox li {font-size:1.2em; line-height:1.25em; margin:0 0 0.75em 0; padding:0; color:#FFF; } #newsPanelBox li h3 {font-size:1em; font-weight:normal; line-height:1.25em; margin:0 0 0.75em 0; padding:0; color:#FFF; } #newsPanelBox li a:link {color:#FFFFFF; font-weight:normal; text-decoration:none;} #newsPanelBox li a:visited {color:#FFFFFF; font-weight:normal; text-decoration:none;} #newsPanelBox li a:hover {text-decoration:underline;} /* NOTICES (#noticesBox) ========================================== */ #noticesBox {display:block; clear:both; } #noticesBox p {margin-left:260px; font-size:1em; line-height:1.25em; padding:.5em 0; color:#939393;} #noticesBox a { margin-left:1em; color:#005892; }