/* ==== CSS Master Document ==== Client: Lieber Research Group Author: Jackrabbit Design Date Created: Jan 18, 2011 Updated November 16, 2016 by Cabell DeLong */ @import "fonts.css"; @import "colorbox.css"; /* ====================================== 1. html/body styler ====================================== */ html { overflow-y: scroll; } html, body { background: #fff; font: 12px/18px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; color: #f4f4f4; } /* ====================================== 2. Reset Styler ====================================== */ * { margin: 0; padding: 0; } ul, li { list-style: none; } img { border: none; display: block; } a { text-decoration: none; } a, input { outline: none; } .clear { clear: both; } a:active, a:focus { border: 0; outline: 0; } table { border: 0; border-collapse: collapse; } /** HTML 5 Elements **/ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{ display: block; } /* ====================================== 3. Heading Typo Styler ====================================== */ h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: normal; font-family: BebasRegular, Arial, Helvetica, "Helvetica Neue", sans-serif; } h2 { font: 26px/28px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; } h3 { font: 22px/24px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; } h4 { font: 18px/20px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; } h5 { font: 14px/16px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; } h6 { font: 14px/16px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff;} h2.page-title { margin-bottom: 20px; } /* ====================================== 4. Anchor States Styler ====================================== */ a { text-decoration: none; } a:link { color: #fff; } a:visited { color: #fff; } a:hover { color: #fff; } a:active { color: #fff; } .button { background: url(../images/bg_linkbutton.png) repeat-x left bottom; display: inline-block; padding: 5px 10px 8px; color: #2c2c32; font-size: 11px; font-weight: bold; text-shadow: 0 1px 0 #c9dd1c; margin: 10px 0 0; } button.button { border: none; cursor: pointer; } .button:hover { background: #B3C139; } a.more { font-size: 10px; text-transform: uppercase; background: url(../images/arrow_readmore.gif) no-repeat right center; padding-right: 10px; } a.more:hover { background: none; } /* ====================================== 5. Layout Styler ====================================== */ .content-centered { width: 960px; margin: 0 auto; } /** == Header Styler == **/ #header { background: url(../images/bgr_header.jpg) repeat-x left top; min-width: 960px; } #header .content-full { background: url(../images/bg_header.jpg) no-repeat center top; } #header .content-centered { height: 100px; } #brand { float: left; margin-top: 35px; } #brand a { width: 338px; height: 23px; display: block; text-indent: -9999px; background: url(../images/logo.png) no-repeat left top; } #global-nav { float: right; margin-top: 40px; } #global-nav ul li { display: inline; float: left; margin-left: 20px; } #global-nav ul li a { cursor: pointer; font: 16px/18px "TitilliumText22LRegular", Arial, Helvetica, "Helvetica Neue", sans-serif; text-shadow: 0 1px 0 #444; color: #fff; } /** Dropdown Styler **/ #global-nav ul { position: relative; z-index: 597; } #global-nav ul li { line-height: 1.3em; vertical-align: middle; zoom: 1; padding-bottom: 5px; } #global-nav ul li.hover, #global-nav ul li:hover { position: relative; z-index: 599; cursor: default; } #global-nav ul ul { display: none; position: absolute; top: 100%; left: 50%; z-index: 598; width: 200px; background: url(../images/bg_dd.png) repeat left top; margin: 0 0 0 -100px; } #global-nav ul ul li {float: none; display: block; margin-left: 0; padding: 0; } #global-nav ul ul li.top { height: 7px; background: url(../images/arrow_dd.gif) no-repeat center top; } #global-nav ul ul ul li.top { position: absolute; left: 0; width: 6px; height: 100%; background: url(../images/arrow_3level.png) no-repeat right 5px; border-left: 1px solid #707093; z-index: 999; } #global-nav ul ul ul li {background: url(../images/bg_dd.png) repeat left top;} #global-nav ul ul li a { color: #AFB0CC; text-transform: none; font-size: 12px; display: block; padding: 5px; text-align: center; border-bottom: 1px solid #1b192f; } #global-nav ul ul li a:hover { background: #1b192f; color: #fff; } #global-nav ul ul ul {top: 0;left: 150%;} #global-nav ul li.second-last ul ul { left: auto; right: 100%; } #global-nav ul li.second-last ul ul li.top { left: auto; right: 0; background: url(../images/arrow_3level.png) no-repeat left 5px; border-right: 1px solid #707093; border-left: none; } #global-nav ul li:hover > ul {display: block;} /** == Banner Styler == **/ #banner { background: url(../images/bgr_banner.jpg) repeat-x left top; height: 369px; } #banner .banner-pane { height: 308px; padding: 1px 0 0 0; } #banner .banner-pane .bp-left { width: 430px; float: left; } #banner .banner-pane .bp-left .copy-slider { width: 470px; clear: both; height: 100px; overflow: hidden; } #banner .banner-pane .img-slider { width: 550px; float: right; margin: 10px -35px 0 0; height: 297px; overflow: hidden; z-index: 100; } #banner .banner-pane .banner-img { background-repeat: no-repeat; background-position: center center; padding: 19px 25px 34px 10px; } #banner .banner-head { width: 400px; padding: 30px 0; font: 17px/21px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; float: left; } /*#banner .banner-content { position: relative; margin-top: 165px; *margin-top: 0; clear: both; height: auto !important; }*/ /*#banner .banner-content .bc-slide { width: 960px; position: relative;}*/ #banner .banner-copy { width: 430px; height: 75px; overflow: hidden; background: #5c5b73; color: #C4C3C5; line-height: 20px; padding: 10px 30px 15px 10px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; -moz-box-shadow: 1px 3px 4px #313042; -webkit-box-shadow: 1px 3px 4px #313042; } #banner .banner-copy p { line-height: 19px; } /*#banner .banner-img { position: absolute; right: -25px;top: -152px !important; right: 0; left: auto !important; background: url(../images/shadow_bannerImg.png) no-repeat center center; padding: 19px 25px 34px 10px; }*/ #banner .banner-img img { border: 1px solid #7B7A94;background:none !important;filter:none !important; } #banner .content-centered { background: url(../images/bg_banner1.jpg) no-repeat left top; } #banner .banner-tabs { height: 61px; background: none; } #banner .banner-tabs {} #banner .banner-tabs ul { overflow: hidden; background: url(../images/borders_bannerTabs.gif) no-repeat left bottom; padding-left: 2px; } /*#banner .banner-tabs li { width: 237px; height: 61px; float: left; background: url(../images/borders_bannerTabs.gif) no-repeat right bottom; padding-right: 2px } #banner .banner-tabs li a { display: block; height: 31px; padding: 15px 40px; background: url(../images/bgr_bannerTabs1.jpg) repeat-x left top; font: 16px/18px "TitilliumText22LXBold", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 0 -1px 0 #000; }*/ #banner .banner-tabs li { float: left; background: url(../images/borders_bannerTabs.gif) no-repeat right bottom; padding-right: 2px } #banner .banner-tabs li a { display: table-cell; *display: block; *padding-top: 11px; width: 316px; height: 61px; *height: 50px; text-align: center; vertical-align: middle; background: url(../images/bgr_bannerTabs1.jpg) repeat-x left top; font: 16px/18px "TitilliumText22LXBold", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 0 -1px 0 #000; } #banner .banner-tabs li.last { background-position: right top; } #banner .banner-tabs li.last a { width: 318px; } #banner .banner-tabs li a:hover { color: #AFB0CC; } #banner .banner-tabs li.activeSlide a { background: none; } #banner .banner-tabs li.hover, #banner .banner-tabs li:hover { } /** == Container Styler == **/ #container { background: url(../images/bgr_container.jpg) repeat left top; min-width: 960px; } #container .content-full { background: url(../images/bg_container.jpg) repeat-x left top; padding: 30px 0; } .content-main { width: 610px; float: left; padding: 15px 40px 15px 0; } .content-sub { width: 300px; float: right; padding: 15px 0 0 0; } .home-content { overflow: hidden; background: url(../images/vr.gif) repeat-y 561px top; } .home-content .content-main { width: 520px; } .home-content .content-sub { width: 320px; padding: 15px 20px 15px 45px; } /** Highlights **/ #highlights, .home-content ul { padding: 20px 0 0; } #highlights li, .home-content li { overflow: hidden; margin-bottom: 30px; } #highlights li .highlight-copy { margin-left: 175px; } .highlight-copy h5, .home-content h5 { font: 12px/18px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;} .highlight-copy h5 a:hover, .home-content h5 a:hover { text-decoration: underline; } .highlight-copy h5 span, .home-content h5 span { font-size: 11px; display: block; color: #e2bd92; text-transform: uppercase; } .highlight-copy p, .home-content p { font-size: 11px; line-height: 14px; color: #c5c6d6; margin: 3px 0 0; padding: 3px 0 0; } .highlight-copy p .more, .home-content p .more { font-size: 10px; text-transform: uppercase; background: url(../images/arrow_readmore.gif) no-repeat right center; padding-right: 10px; margin-right: 15px; } .highlight-copy p .more:hover, .home-content p .more:hover { background: none; } #highlights li img { float: left; border: 1px solid #0D2643; } /** == Sponsor Pane Styler == **/ #sponsor-pane { min-width: 960px; height: 97px; padding: 15px 0 25px; background: #fff url(../images/bgr_sponsor.jpg) repeat-x left bottom; } #sponsor-pane h5 { color: #b1b1b1; text-transform: uppercase; } #sponsor-pane .scroller { overflow: hidden; padding: 15px 0 0; } #sponsor-pane .scroller .bttn { width: 9px; height: 17px; margin: 22px 0 0; display: block; text-indent: -9999px; float: left; background: url(../images/bttn_prevnext.gif) no-repeat left top; } #sponsor-pane .scroller .next { background-position: left bottom; float: right; } #sponsor-pane .scroller .scroll-items { width: 915px; float: left; margin: 0 13px; } .scroll-items ul { width: 915px; height: 79px; overflow: hidden; } .scroll-items ul li { width: 265px; display: inline; float: left; margin: 0 20px; } .scroll-items ul li .sponsor-logo {} .scroll-items ul li img { float: left; margin: 0 15px 15px 0; } .scroll-items ul li .sponsor-info { font: 12px/16px Tahoma, Verdana, Geneva, sans-serif; } .scroll-items ul li .sponsor-info strong { font-weight: bold; color: #8e90b1; } .scroll-items ul li .sponsor-info a { font-size: 10px; color: #aaa; display: block; } .scroll-items ul li .sponsor-info a:hover { color: #8e90b1; } /** == Footer Styler == **/ #footer { font-size: 10px; line-height: 15px; color: #afafaf; } #footer a { color: #afafaf; } #footer a:hover { text-decoration: underline; } #footer .content-centered { overflow: hidden; padding: 20px 0 40px; } #footer aside { float: left; } #footer aside .logo-harvard { width: 58px; height: 55px; display: block; float: left; text-indent: -9999px; background: url(../images/logo_harvardUniversity.png) no-repeat left top; } #footer aside .footer-copy { margin-left: 70px; } #footer .footer-nav { float: right; } #footer .footer-nav ul { overflow: hidden; } #footer .footer-nav ul li { display: inline; float: left; margin-left: 15px; } #footer .footer-nav ul li a {} /* ====================================== 6. Page Content Styler ====================================== */ .page-content { overflow: hidden; padding: 15px 0; } .page-content p { padding: 3px 0 10px; margin: 3px 0 10px; color: #f4f4f4; } .page-content .info { font-size: 18px; line-height: 24px; color: #c0c0de; } .page-content ul, .page-content ol { margin: 10px 10px 20px; } .page-content ul li { background: url(../images/bulletlist_pagecontent.gif) no-repeat left 6px; padding-left: 15px; margin: 10px 0; } .page-content ol li { list-style: decimal outside; margin: 10px 0 10px 20px; } .page-content p a, .page-content li a { color: #b0b1cd; } .page-content p a:hover, .page-content li a:hover { color: #fff; } .page-content img { border: 1px solid #0E2743; } .page-content img.alignleft { float: left; margin: 0 20px 10px 0; } .page-content img.alignright { float: right; margin: 0 0 10px 20px; } /** == Sidebar nav == **/ #sidebar-nav, #archive-links { background: url(../images/trans.png) repeat left top; padding: 15px 15px 15px 0; margin-bottom: 25px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #sidebar-nav ul, #archive-links ul { margin: 0; } #sidebar-nav ul li { padding: 0; background: none; margin: 5px 0; } #sidebar-nav ul li a { font: 14px/18px "TitilliumText22LMedium", Arial, Helvetica, "Helvetica Neue", sans-serif; color: #c0c0de; padding-left: 25px; } #sidebar-nav ul li a:hover, #sidebar-nav ul li.selected a, #sidebar-nav ul li.current_page_item a { color: #fff; background: url(../images/arrow_sidebarNav.gif) no-repeat left top; } #sidebar-nav ul li.current_page_item li a { color: #c0c0de; } #sidebar-nav ul li.current_page_item li a:hover { color: #fff; } #sidebar-nav ul ul { margin: 2px 10px 10px 38px; } #sidebar-nav ul ul li { margin: 2px 0; list-style: disc; } #sidebar-nav ul ul li a { font-size: 12px; padding-left: 0; } #sidebar-nav ul ul li a:hover, #sidebar-nav ul ul li.selected a, #sidebar-nav ul ul li.current_page_item a { background: none; } /** == Archive Links == **/ #archive-links ul { overflow: hidden; } #archive-links ul li { width: 58px; float: left; display: inline; margin-left: 20px; } /** == Sidebar Content == **/ #sidebar-content { padding: 0 0 0 20px; background: url(../images/vr.gif) repeat-y left top; } #sidebar-content figure { margin-bottom: 20px; } #sidebar-content figure img, figure img { border: 1px solid #0E2743; } #sidebar-content figure img { background: #fff; } #sidebar-content figure a.example6 { position: relative; display: block; } #sidebar-content figure a.example6 img.playflash { position: absolute; top: 29px; left: 90px; background: transparent; border: none; } #sidebar-content figure figcaption { padding: 10px 0; font-size: 10px; color: #fff; } #sidebar-content figure figcaption a { display: block; text-transform: uppercase; color: #b0b1cd; } #sidebar-content figure figcaption a:hover { text-decoration: underline; } /** == Selected Publications == **/ #content-selected { background: url(../images/trans.png) repeat left top; padding: 20px; margin: 0 0 30px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #content-selected ul { overflow:hidden; margin: 10px 0 0; } #content-selected ul li { width: 250px; display: inline; float: left; background: none; padding: 0; margin: 10px 0; } #content-selected ul li.middle { margin: 10px 75px; } #content-selected ul li a { color: #fff; } #content-selected ul li header { font-size: 11px; line-height: 14px; } #content-selected ul li header a:hover { text-decoration: underline; } #content-selected ul li header span { display: block; color: #E2BD92; } /** == People Info Styler == **/ #people-info { } #people-info figure { overflow: hidden; margin-bottom: 25px; } #people-info figure img { float: left; } #people-info figure figcaption { margin-left: 135px; color: #c0c0de; font: 14px/20px "TitilliumText22LRegular", Arial, Helvetica, "Helvetica Neue", sans-serif; } table th, #people-info table th { text-align: left; font-size: 13px; } #people-info table td hr, table td hr { border:none; border-bottom: 1px solid #2B293B; border-top: 1px solid #4B4863; } table td, #people-info table td, #people-info table td p { padding: 10px 20px 10px 0; vertical-align: top; color: #c0c0de; font: 14px/20px "TitilliumText22LRegular", Arial, Helvetica, "Helvetica Neue", sans-serif; } #people-info table td p { padding: 4px 0; margin: 4px 0; } #people-info figure figcaption h2, #people-info table td h2 { margin-bottom: 3px; } #people-info figure figcaption strong, #people-info table td strong { font-size: 18px; } #people-info figure figcaption a, #people-info table td a { color: #c0c0de; } #people-info figure figcaption a:hover, #people-info table td a:hover { color: #fff; } #people-info figure figcaption a.download, #people-info table td a.download { display: inline-block; margin-top: 8px; background: url(../images/trans.png) repeat left top; padding: 3px 12px 3px 10px; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #people-info figure figcaption a.download span, #people-info table td a.download span { cursor: pointer; display: inline-block; background: url(../images/ico_pdf.png) no-repeat left 1px; padding-left: 22px; } #people-info figure figcaption a.download:hover, #people-info table td a.download:hover { background: none; } table th { text-align: left; } /** == Gallery Styler == **/ .gallery-list { overflow: hidden; padding: 25px 0; border-bottom: 1px solid #2B293B; border-top: 1px solid #4B4863; } .gallery-list-first { border-top: none; } .gallery-list-last { border-bottom: none; } .gallery-list:last-child { border-bottom: none; } .gallery-list aside { width: 460px; float: left; padding: 10px; margin: 0; background: #fff; border: 1px solid #0E2743; text-align: center; border-bottom: none; } .gallery-list aside img { border: none; display: inline; } .gallery-list aside a.example6 { position: relative; display: block; } .gallery-list aside a.example6 img { position: relative; display: block; } .gallery-list aside a.example6 img.playflash { position: absolute; top: 50%; left: 50%; margin: -49px 0 0 -49px; } .gallery-list article { margin-left: 520px; font-size: 11px; line-height: 16px; } .page-content .gallery-list article p { padding: 4px 0; margin: 4px 0; } .gallery-list article cite { display: block; margin-top: 5px; text-align: right; font-size: 10px; color: #b0b1cd; } /** == Contact Pane Styler == **/ .contact-pane { overflow: hidden; } .contact-pane aside { float: right; } .contact-pane article { margin-right: 500px; } .contact-pane article table { width: 100%; margin: 5px 0 30px; } .contact-pane article table td { width: 50%; vertical-align: top; padding-bottom: 20px; } .contact-pane article table td a { color: #e2bd92; } .contact-pane article table td a:hover { color: #fff; } .contact-pane .directions { width: 452px; margin: 25px 0; } /** Sponsor Page Styler **/ #sponsors-list { margin: 0; overflow: hidden; } #sponsors-list li { margin: 15px 0; padding: 0 0 15px; background: none; } #sponsors-list li.last { margin-right: 0; } #sponsors-list li .logo-holder { width: 100px; background: #fff; padding: 5px; margin: 0 15px 0 0; text-align: center; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } #sponsors-list li .logo-holder img { border: none; margin: 0; padding: 0; display: inline; } #sponsors-list li .sp-data { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } #sponsors-list li .sp-data h4 { font-size: 16px; } #sponsors-list li .sp-data p { padding-bottom: 0; margin-bottom: 0; } /** Wordpress Reset **/ .alignleft { float: left; clear: left; } .alignright { float: right; clear: right; }