/* $This file is distributed under the terms of the license in /doc/license.txt$ */ @charset "UTF-8"; /* CSS Document */ /* Tell the browser to render HTML 5 elements as block */ header, hgroup, section, nav, article, aside, footer{ display: block; } time{ font-weight: normal; } html, body{ padding: 0; height: 100%; /* needed for container min-height */ font-family: 'Arimo', "Lucida Sans Unicode","Lucida Grande", Geneva, helvetica, sans-serif; /*font-size: 62.5%;*/ height: auto !important; /* real browsers */ height: 100%; /* IE6: treaded as min-height*/; min-height: 100%; /* real browsers */ margin: 0 auto; } body{ background: #f3f3f0 url(../images/header-background.png) center 0 no-repeat; } /* h1,h2,h3,h4,h5,h6 ------> */ h2{ padding: 10px 0 12px 0; margin: 0; font-size: 22px; color: #2485ae; } h2 a{ color: #2485ae; } h2 a:link, h2 a:visited{ text-decoration: underline; } h2 a:hover, h2 a:active{ text-decoration: none; } h3{ padding: 10px 0 12px 0; margin: 0; font-size: 18px; color: #2485ae; } h4{ padding: 10px 0 12px 0; margin: 0; font-size: 16px; color: #2485ae; } h5{ padding: 10px 0 12px 0; margin: 0; font-size: 14px; color: #2485ae; } /* HEADER ------> */ #branding { position: relative; width: 970px; height: 114px; margin: 0 auto; } /* BRANDING ------> */ h1.vivo-logo { position: absolute; width: 386px; height: 59px; top: 28px; left: 0; background: url(../images/VIVO-logo.png) 0 0 no-repeat; } h1.vivo-logo a { display: block; width: 386px; height: 59px; } /* HEADER NAV------> */ ul#header-nav { float: right; list-style: none; height: 30px; padding-top: 10px; margin-right: 13px; } ul#header-nav li { float: left; display: block; padding-left: 10px; padding-right: 10px; border-right: 1px solid #7c7d7f; font-size: 0.7em; color: #fff; } ul#header-nav li.last { border-right: none; } ul#header-nav li:last-child { padding-right: 0; border-right: none; } ul#header-nav a { color: #fff; } ul#header-nav a:link, ul#header-nav a:visited { text-decoration: none } ul#header-nav a:hover, ul#header-nav a:active { text-decoration: none; color: #999; } .loginIcon { font-family: 'Pictos'; font-size: 1.8em; line-height: .2em; color: #fff; } /* SEARCH ------> */ #search { position: absolute; width: 396px; height: 38px; top: 40px; right: 10px; padding-top: 5px; } #search-field { width: 396px; height: 38px; background: url(../images/search-interior-pages.png) 0 0 no-repeat; } #search-field .submit { text-decoration: none; background-color: transparent; color: #fff; font-size: 14px; border: none; padding-left: 25px; padding-top: 8px; cursor: pointer; } input.search-vivo { float: left; width: 290px; height: 25px; border: 0; font-size: 16px; color: #5e6363; margin-left: 10px; margin-top: 5px; padding:0; } #search-form-modifier{ display: none; } /* MAIN NAVIGATION------> */ ul#main-nav { display: block; width: 968px; height: 46px; border: 1px solid #dce4e3; background-color: #f7f9f9; margin: 0 auto; list-style: none; font-weight: 1em; color: #706a66; } #main-nav li { float: left; line-height: 46px; background: url(../images/separator-main-nav.jpg) right -2px no-repeat; } #main-nav li a { padding-left: 16px; padding-right: 16px; display: block; color: #706a66; text-decoration: none; } #main-nav li a:hover { color: #002b44; /*background: url(../images/selected-main-nav.jpg) left -3px no-repeat; margin-left: 21px;*/ } #main-nav li a.selected { color: #002b44; background: url(../images/selected-main-nav.jpg) left -1px no-repeat; margin-left: 18px; } /* WRAPPER CONTENT------> */ #wrapper-content { clear: both; width: 930px; margin: 0 auto; background: #fff; min-height: 550px; padding: 20px; } /* INTRO-BLURB ------> */ #intro { float: left; width: 570px; padding-bottom: 40px; } #intro h2 { padding: 35px 0 12px 24px; border-bottom: none; } #intro p{ font-size: 16px; color: #5f6464; line-height: 1.3em; padding: 0 24px 30px 24px; } #intro a { color: #2485ae } .pictos-arrow-14 { font-family: 'Pictos'; font-size: 14px; color: #b2d15a; } /* LOG IN------> */ #login { float: right; width: 314px; border: 1px solid #e8ece9; margin-right: 25px; padding-bottom: 30px; margin-bottom: 30px; overflow: hidden; margin-top: 20px; } #login h2 { font-size: 22px; color: #2485ae; padding-left: 15px; padding-top: 18px; border-bottom: none; } #error-alert { margin: 0 12px; margin-bottom: 12px; padding: 12px; padding-bottom: 12px; border: 1px dotted #a12424; } #error-alert img { float: left; margin: 0; padding: 0; vertical-align: middle; } #error-alert p { padding-left: 40px; font-size: 0.8em; line-height: 1.3em; color: #a12424; padding-top: 5px; } #login-form label { display: block; color: #5e6363; padding-top: 0; padding-left: 38px; font-size: 14px; } #login-form input.text-field { border: 0; font-size: 14px; padding: 5px; width: 219px; height: 24px; margin-left: 38px; background: #fff; border: 1px solid #e0dfdf; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #login-form input.text-field:focus { border: 1px solid rgba(57, 138, 172, 0.5); background-color: rgba(57, 138, 172, 0.1); } #login-form p.submit { width: 100px; height: 40px; margin-top: 20px; margin-left: 38px; } #login-form p.submit-password{ height: 40px; margin-top: 20px; margin-left: 38px; } #login-form input.checkbox-remember-me { float: left; height: 14px; width: 14px; color: #5e6363; padding: 0; margin-top: 33px; margin-left: 20px; } #login-form label.label-remember-me { display: block; float: right; color: #5e6363; font-size: 12px; width: 100px; margin: 0; padding: 0; margin-top: 29px; margin-right: 32px; } p.forgot-password { clear: both; margin-left: 38px; font-size: 12px; padding-top: 1.2em; padding-bottom: 1.2em; } p.forgot-password a { color: #2485ae; } p.request-account { width: 219px; clear: both; float: left; margin-left: 38px; margin-top: 10px; padding-top: 20px; border-top: 1px solid #e8ece9; } p.request-account a{ color: #fff; } p.password-note{ font-size: 12px; color: #949696; padding-left: 38px; } #flash-message{ border: 1px dotted #E2C822; background-color: #FFF9D7; padding: 0.5em; margin-bottom: 10px; } /* HOME SEARCH ------> */ #search-home { float: left; width: 533px; margin-left: 24px; } #search-home h3 { padding: 0; font-size: 22px; margin-bottom: 15px; } #search-home-field { width: 483px; height: 44px; background: url(../images/search-field-and-button.png) 0 0 no-repeat; } #search-home-field input.submit { text-decoration: none; background-color: transparent; color: #fff; font-size: 18px; border: none; padding-left: 23px; padding-top: 8px; cursor: pointer; } input.search-home-vivo { float: left; margin: 10px 0 0 8px; width: 350px; height: 20px; border: 0; font-size: 18px; color: #5e6363; margin-left: 4px; margin-top: 2px; } /* BROWSE ------> */ #browse { clear: both; width: 920px; margin: 0 auto; border: 1px solid #dfe6e6; background: #f7f9f9; overflow: hidden; padding-bottom: 30px; } #browse h4 { width: 10%; height: 30px; margin-bottom: 27px; padding-left: 15px; font-weight: normal; line-height: 38px; color: #fff; background: #5e6363; font-size: 20px; } /* BROWSE CLASS GROUPS ------> */ ul#browse-classgroups { float: left; width: 200px; border: 1px solid #dde4e3; border-right: none; background: #f1f2ee; margin-left: 34px; padding: 0 20px 23px 20px; margin-top: 10px; padding-top: 10px; } ul#browse-classgroups li { display: block; border-bottom: 1px solid #dde4e3; font-size: 18px; width: 200px; height: 35px; line-height: 35px; } ul#browse-classgroups li:last-child { border-bottom: none } ul#browse-classgroups a { display: block; padding-left: 15px; width: 200px; height: 35px; color: #5e6363; text-decoration: none; } ul#browse-classgroups a:hover { background: url(../images/arrow.gif) 0 12px no-repeat; color: #2ea0cf; } ul#browse-classgroups a.selected { color: #2ea0cf; background: url(../images/arrow.gif) 0 12px no-repeat; } ul#browse-classgroups .count-classes { font-size: 14px } /* BROWSE CLASSES IN CLASS GROUP ------> */ #browse-classes { float: left; width: 610px; border: 1px solid #dde6e5; background: #fff; margin-top: -20px; } ul#classgroup-list { float: left; width: 268px; padding: 0 10px 15px 22px; margin-top: 20px; margin-bottom: 10px; border-right: 1px solid #dde5e4; } ul#classgroup-list li { display: block; float: left; width: 268px; border-bottom: 1px solid #dde4e3; font-size: 14px; height: 35px; line-height: 35px; } ul#classgroup-list li:last-child { border-bottom: none } ul#classgroup-list a { display: block; padding-left: 15px; height: 35px; color: #5e6363; text-decoration: none; } ul#classgroup-list a:hover { background: url(../images/arrow.gif) 0 12px no-repeat; color: #2ea0cf; } ul#classgroup-list a.selected { color: #2ea0cf; background: url(../images/arrow.gif) 0 12px no-repeat; } ul#classgroup-list .count-individuals { font-size: 12px; } /* VISUALIZATION ------> */ #visual-graph { float: right; width: 270px; height: 270px; position: relative; } #visual-graph h4 { padding: 20px 0 12px 12px; width: auto; font-size: 18px; color: #2485ae; font-weight: normal; background: url(../images/bullet-visual-graph.png) 120px 25px no-repeat; } #pieViz { position: absolute; top: 0; left: -85px; width: 400px; height: 400px; } /* HIGHLIGHTS ------> */ #highlights { clear: both; width: 920px; margin: 0 auto; margin-top: 40px; height: 400px; border: 1px solid #dfe6e6; background: #f7f9f9; padding-bottom: 50px; } #highlights h4 { width: 13%; height: 30px; margin-bottom: 27px; padding-left: 15px; font-weight: normal; line-height: 38px; color: #fff; background: #5e6363; font-size: 20px; } #highlights h5 { color: #91b039; font-size: 14px; padding-bottom: 20px; } .global-highlights { border: 1px solid #e8e8e8; background: #fff; float: left; width: 235px; padding: 24px; } /* FEATURED PEOPLE ------> */ #featured-people { margin-left: 20px; margin-right: 15px; } article.featured-people { width: 245px; height: 100px; } img.individual-photo { width: 80px; border: 1px solid #999; float: left; } article.vcard p.fn { float: left; width: 130px; font-size: 12px; line-height: 1.3em; margin-left: 20px; color: #303e4e; font-weight: bold; } article.vcard span.title { display: block; font-weight: normal; font-style: italic; } article.vcard span.org { display: block; font-weight: normal; } p.view-all { clear: both; width: 200px; font-size: 14px; text-align: right; color: #303e4e; } a.view-all-style { color: #303e4e } .pictos-arrow-10 { font-family: 'Pictos'; } /* UPCOMING EVENTS------> */ #upcoming-events { margin-right: 15px } article.vevent { width: 233px; height: 59px; clear: both; } time.dtstart { width: 40px; height: 59px; float: left; background: url(../images/date-display.jpg) 0 0 no-repeat; color: #fff; text-align: center; padding-top: 10px; font-size: 20px; } time.dtstart span { display: block; font-size: 11px; color: #fff; margin-top: -10px; } p.summary { padding-left: 50px; padding-top: 12px; color: #303e4e; font-size: 12px; font-weight: bold; } p.summary time { display: block; padding-top: 0; font-weight: normal; } /* LATEST PUBLICATIONS ------> */ #latest-publications article { width: 232px; height: 35px; background: url(../images/icon-pub.png) 0 0 no-repeat; padding-bottom: 10px; float: left; } p.publication-content { padding-left: 40px; color: #303e4e; font-size: 12px; font-weight: bold; line-height: 1.3em; } p.publication-content span { display: block; font-weight: normal; } /* FOOTER------> */ footer { clear: both; width: 970px; height: 88px; margin: 0 auto; font-size: 0.7em; color: #4e5051; background-color: #fff; } footer p.copyright { float: left; padding-top: 55px; padding-left: 30px; width: 500px; } ul#footer-nav { float: right; list-style: none; width: 200px; height: 20px; margin: 0; padding: 0; padding-top: 50px; padding-right: 20px; } ul#footer-nav li { float: left; display: block; padding-left: 10px; padding-right: 10px; border-right: 1px solid #c9c8c8; } ul#footer-nav li:last-child { border-right: none } #footer-nav a { color: #4e5051 } #footer-nav a:hover { color: #09C; text-decoration: none; } a.terms { color: #09C; text-decoration: none; } a.terms:hover { color: #4e5051; text-decoration: none; } a.powered-by-vivo { color: #09C; text-decoration: none; } a.powered-by-vivo:hover { color: #4e5051; text-decoration: none; } /* GENERAL STYLE ------> */ p{ margin-bottom: 1.3em; } /* STYLED BUTTONS ------> */ .button, .button:visited { background: #222 url(../images/alert-overlay.png) repeat-x; display: inline-block; padding: 7px 22px 8px; color: #fff; text-decoration: none; border-radius: 4px; /*This box should have a rounded corners in browsers supporting CSS3*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; /* : ; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25);*/ position: relative; cursor: pointer; border: 0; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px } .button, .button:visited { font-size: 16px; font-weight: normal; line-height: 1; /*text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);*/ } .green.button, .green.button:visited { background-color: #749a02; color: #fff; } .green.button:hover { background-color: #b2d15a; } .blue.button, .blue.button:visited { background-color: #398aac; color: #fff; } .blue.button:hover { background-color: #58a2c1; } /* MISCELLANEOUS ------> */ .displace { position: absolute; left: -9999px; } a { text-decoration: underline } /* -------------------------------------------------> */ /* INDIVIDUAL DISPLAY ------------------------------> */ /* -------------------------------------------------> */ .individualList ul.individualData li { padding-bottom: 0; } /* ADMIN PANEL ------> */ .admin h3{ color: #fff; background: #2485AE; } /* INDIVIDUAL INTRO FOR ANY CLASS ------> */ #individual-intro h1{ font-size: 1.375em; color: #2485ae; } #individual-intro span.preferred-title{ font-size: 1.125em; color: #5e6363; border-left: 1px solid #5e6363; } /* INDIVIDUAL INTRO FOR PERSON ------> */ #individual-intro-person{ width: 700px; border-right: 1px solid #edf0ed; } /* INDIVIDUAL INTRO LEFT CONTENT ------> */ #left-side img.individual-photo2{ border: 7px solid #ebebeb; } ul#individual-tools-people{ border-bottom: 1px solid #e8ece9; color: #b2d15a; } ul#individual-tools-people li a{ color: #b2d15a; } ul#individual-tools{ color: #8AA149 } ul#individual-tools li a{ color: #b2d15a; } .picto-email{ color: #aeb1b1; } #left-side a.email{ color: #5f6464; } #left-side a.tel{ color: #5f6464; } ul#individual-urls{ list-style: url(../../../images/individual/arrow-grey.gif); } ul#individual-urls li{ font-size: .875em; line-height: 1.2em; } ul#individual-urls li a{ color: #2485ae; } ul#individual-urls-people{ list-style: url(../../../images/individual/arrow-grey.gif); } ul#individual-urls-people li a{ color: #2485ae; } /* INDIVIDUAL RIGHT CONTENT ------> */ #individual-info{ width: 425px; color: #5e6363; } #individual-info h1.fn{ font-size: 1.375em; color: #2485ae; } h1.fn .preferred-title { font-size: 0.825em; color: #5e6363; border-left: 1px solid #a6b1b0; } #individual-info h2{ font-size: 1.125em; font-weight: normal; } ul#individual-positions{ font-size: 1em; list-style: url(../../../images/individual/arrow-green.gif); } ul#individual-positions li{ line-height: 1.2em; } ul#individual-positions li a{ color: #2485ae; } .individual-overview{ font-size: 1em; } ul#individual-areas{ padding-bottom: 24px; } ul#individual-areas li{ border-right: 1px solid #A6B1B0; } ul#individual-areas li:first-child{ padding-left: 0; } ul#individual-areas li:last-child{ border-right: none; } ul#individual-areas li{ border-right: 1px solid #5e6363; } ul#individual-areas li a{ color: #2485ae; } /* INDIVIDUAL VISUALIZATION ------> */ #publications-visualization{ margin-top: 35px; float: right; width: 226px; } /* SPARKLINES ------> */ #sparklines-publications{ width: 184px; padding: 0 20px 45px 20px; } #sparklines-publications h3{ font-size: 1.25em; color: #2485ae; } .publication-year-range{ font-size: .875em; } a.all-vivo-publications{ font-size: .875em; color: #5e6363; } /* COAUTHORS ------> */ img.co-author{ border: 2px solid #ebebeb; } #co-authors h3{ font-size: 1.25em; color: #2485ae; } p.view-all-coauthors{ font-size: .875em; } /* PROPERTY GROUP MENU ------> */ #property-group-menus{ width: 920px; background: #f1f2ee; } #property-group-menus ul{ color: #5e6363; font-size: 1em; } #property-group-menus li{ background: url(../../../images/individual/separator-property-group-nav.jpg) right 10px no-repeat; } #property-group-menus a{ color: #5e6363; } #property-group-menus a:hover{ color: #002b44; } #property-group-menus li:last-child{ background: none; } /* PROPERTY GROUP ------> */ .property-group{ width: 920px; background: #fff; } section.property-group h2{ font-size: 1.25em; color: #2485ae; font-weight: normal; /*background:url(../../../images/individual/arrow-down.gif) 120px 24px no-repeat;*/ } article.property{ width: 852px; } article.property h3{ background: #fafaf9; font-size: 1.063em; color: #8aa149; } article.property ul.property-list li.subclass h3 { font-size: 1.063em; color: #5E6363; background: none; } article.property .data-property-statement{ background: #fff; font-size: 1em; color: #5e6363; } article.property ul.property-list{ font-size: 1em; color: #5e6363; } article.property ul.property-list li a{ color: #2485ae; } /* MISCELLANEOUS ------> */ .blue{ color: #2485ae; } .grey{ color: #5e6363; } .green{ color: #b2d15a; }