/* Core */ body{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding-top: 55px; } h1, h2, h3, h4 { font-family: "Exo 2", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { color: #669966; } h1{ font-size: 20px; margin-bottom: 20px; } h2{ font-size: 18px; margin-bottom: 15px; } h3{ font-size: 16px; padding: 4px 0 2px; border-bottom: 1px dotted #bbb; margin-bottom: 10px; } h3.no-underline { border: none; } h4, h5, h6 { font-size: 14px; margin-bottom: 5px; } h5, h6 { font-weight: normal; } a{ color: #084888; font-weight: 600; } a:hover{ color: #369; text-decoration: none; } .ScreenLimit{ max-width: 1400px; margin-left: auto; margin-right: auto; } .ScreenLimitFooter{ max-width: 1200px; margin-left: auto; margin-right: auto; } .ScreenLimit-FloatingNav{ width: 258px; /*max-width: 258px;*/ margin-left: auto; margin-right: auto; } .masthead{ position:relative; padding:0; color:#fff; background-color:#003366; } /* wwPDB Logo */ .wwPDBlogo{ max-width: 170px; height: 45px; } /*----------------------------------------------------------------------------*/ /* side navigation menu */ .wwpdb-sidenav { -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); box-shadow: 0 1px 4px rgba(0,0,0,.065); } .wwpdb-sidenav > li.menu-title { background-color: #669966; color: #fff; font-weight: bold; padding: 8px; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .wwpdb-sidenav > li > a { border-color: #e5e5e5; border-style: solid; border-width: 0px 1px 1px 1px; } .wwpdb-sidenav > li:last-child > a { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } .wwpdb-sidenav > .active > a { background-color: rgba(102, 153, 102, 0.1); } /* chevrons */ .wwpdb-sidenav .glyphicon-chevron-right { float: right; margin-top: 2px; opacity: .25; } .wwpdb-sidenav > li > a:hover { background-color: #f5f5f5; } .wwpdb-sidenav a:hover .glyphicon-chevron-right { opacity: .5; } .wwpdb-sidenav .active .glyphicon-chevron-right, .wwpdb-sidenav .active a:hover .glyphicon-chevron-right { opacity: 1; } /*----------------------------------------------------------------------------*/ /* HREF's and Anchors */ .boldAnchors a{ font-weight: 400; } .greenAnchors a{ font-weight: 400; color: #669966; } /* .blueAnchors a{ color: #003366; font-weight: 600; } */ /* Anchor offset to account for fixed top bar nav */ .anchor{ display: block; position: relative; visibility: hidden; top: -85px; } /*----------------------------------------------------------------------------------*/ /* Background colors*/ .bg-darkblue{ background-color: #003366; } .bg-green{ background-color: #669966; } .bg-greenalpha{ background-color: rgba(102,153,102, 0.5); } .bg-grey{ background-color: rgb(204, 204, 204); } .bg-lightgrey{ background-color: #F2F2F2; } /*----------------------------------------------------------------------------------*/ /* Fonts */ .f-white{ color: #FFF; } .f-blue{ color: #133373; } .branding{ font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: 400; } .branding2{ font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 400; } .branding3{ font-size: 15px; font-family: 'Roboto', sans-serif; font-weight: 400; } .branding2 >a, .branding3 >a{ font-weight: 400; } .branding a { color: #ffffff; font-weight: bold; } .branding a:active, .branding a:hover { color: #ffffff; font-weight: bold; text-decoration: underline; } .title{ padding: 7px 0; color: #FFF; font-size: 18px; font-weight: 500; text-align: center; } .cursive { font-family: 'Petit Formal Script', cursive; } /*----------------------------------------------------------------------------------*/ /* List styling */ .noStyle{ list-style-type: none; padding-left: 15px; } .non-indented { padding-left: 10px; padding-top: 0px; list-style-position: outside; list-style-type: none; list-style-image: url(../img/homepage/bullet.png); } .members { padding-left: 20px; padding-top: 0px; margin-top: 0px; } /*----------------------------------------------------------------------------------*/ /* Navbar */ /* Backgrond color */ .navbar{ background-color: #DDEEE2; } /* Nav top left image */ .nav{ margin-right: 15px; margin-top: 11px; } /* Shrink nav whitespace */ .nav>li>a{ padding: 8px; font-weight: normal; } /* Focused nav's turn orange, no background change */ .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ color: #FC9571; text-decoration: none; background-color: transparent; } /* Standerize Collapsed Nav to that of "Normal" Nav */ /* Adjust max nav height */ .navbar-collapse{ max-height: 700px; } /* This is the top section you click/tap on */ li.dropdown.open{ color: #FC9571; text-decoration: none; background-color: transparent; } /* This is the submenu under it */ li.dropdown.open>ul.dropdown-menu{ -webkit-box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px; box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px; background-color: #FFF; border-color: rgba(0, 0, 0, 0.14902); border-style: solid; border-width: 1px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-sizing: border-box; color: #000; display: block; font-size: 14px; font-weight: normal; height: auto; line-height: 20px; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; text-align: left; text-decoration: none; white-space: nowrap; width: auto; } /* Fix padding to be uniform between click opened and hover opened menu's */ .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header{ padding: 3px 20px 3px 20px; } /* Make the navbar have black text by default */ .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu>li>a{ color: #000; } /* Have the nav bar sections align right when collapsed */ @media (max-width: 1100px){ .navbar-nav{ text-align: right; } } /* Top bar coloring */ .dropdown:hover .dropdown-toggle{ color: #FC9571; } .navbar-default .navbar-nav>li>a{ color: #333333; font-size: 13px; text-transform: uppercase; } /* Set the dropdown menu to a fixed width */ .dropdown-menu{ width: 300px; } /* When the collapse nav button is hit - color it green */ .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ background-color: rgba(102,153,102, 0.5); } /* Color text orange on hover */ .navbar-default .navbar-nav>li:hover>a{ color: #FC9571; } /* Sub menu coloring */ .dropdown-menu>li:hover a{ background-color: #669966; color: #FFFFFF; } /* Adjsut Color of Nav Pills */ .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{ background-color: #669966; } .nav-pills>li>a:hover{ background-color: rgba(102,153,102, 0.5); color: #000; } /*----------------------------------------------------------------------------------*/ /* Branding Bar */ /* Horizontally center images slight off to the right */ #wwPDBcarousel img { display:block; margin:auto; height: 260px; padding: 15px 0 0 0; } /* Helps create the 3 stacked layers */ .brandingBar{ position: absolute; top: 0; left: 0; z-index: 1; width:100%; height: 335px; } .brandingBarBacker{ position: relative; top: 0; left: 0; z-index: 1; width:100%; height: 335px; } .greenBox{ height: 100%; z-index: 3; color: #fff; display:block; } .greenBox img{ max-width: 35px; } .greenBox a{ color: #fff; } @media (max-width: 1199px) and (min-width: 992px) { #branding-bar-bottom-green { line-height: 83px; margin-bottom: -30px; } } @media (max-width: 991px) and (min-width: 768px) { #branding-bar-bottom-green { line-height: 148px; margin-bottom: -30px; } } /*----------------------------------------------------------------------------------*/ /* Carousel */ /* Fade transition for carousel items */ .carousel-fade .carousel-inner .item{ opacity: 0; -webkit-transition: opacity 3s ease; -webkit-backface-visibility: hidden; -moz-transition: opacity 3s ease; -ms-transition: opacity 3s ease; -o-transition: opacity 3s ease; transition: opacity 3s ease; } .carousel-fade .carousel-inner .item.active{ opacity: 1; -webkit-transition: opacity 0.6s ease; -webkit-backface-visibility: hidden; -moz-transition: opacity 0.6s ease; -ms-transition: opacity 0.6s ease; -o-transition: opacity 0.6s ease; transition: opacity 0.6s ease; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right{ left: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); } /*----------------------------------------------------------------------------------*/ /* Homepage */ .HPfocus{ background-color: #FAEDD9; border: 1px solid #EF8F6C; } /*----------------------------------------------------------------------------------*/ /* Page content */ div.wwpdb-content ol > li, div.wwpdb-content ul > li { margin: 5px 0; } div.wwpdb-content blockquote { margin: 10px 10px 20px; border: 1px solid #ccc; border-radius: 4px; padding: 20px; font-size: 16px; } .clear { clear: both; } .cite { padding: 9px; font-size: 13px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .answer { padding: 9px; border: 1px solid #ccc; background-color: #f5f5f5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 10px; } dl.wwpdb-page { width:100%; } dl.wwpdb-page > dt, dl.wwpdb-page > dd { float:left; margin-bottom: 10px; } p.wwpdb-page-news-date { font-weight: bold; border-top: 1px dotted #bbb; margin-top:40px; padding-top:5px; } img.wwpdb-page{ margin: 10px 20px 20px 0; } img.wwpdb-page-border { border: 1px solid #aaa; } div.wwpdb-reference > div { margin: 5px 0; } .wwpdb-table-toggle { height:0px; overflow:hidden; } div.wwpdb-table-link { color:#036; font-weight: 600; cursor: pointer; margin: 5px 0; width: 100%; background-color: #eee; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; } div.wwpdb-table-link:hover { color: #369; } /* document link used for links to pdf and other document and media files */ .wwpdb-document-links { margin: 5px 0 20px; } .wwpdb-document-links > a { padding: 4px 12px; margin-right: 10px; background-color: #aca; color: #000; border-radius: 4px; font-weight: normal; } .wwpdb-document-links > a:hover { background-color: #cdc; color: #000; } .wwpdb-document-links > a:focus { outline: none; text-decoration: none; } .wwpdb-page-submenu { margin: 30px 0 20px; } .wwpdb-page-submenu > a { padding: 4px 12px; margin-right: 10px; background-color: #f0f8f0; color: #000; border-radius: 4px; font-weight: normal; } .wwpdb-page-submenu > a:hover { background-color: #cdc; color: #000; } .wwpdb-page-submenu > a:focus { outline: none; text-decoration: none; } .wwpdb-page-submenu > a.active { background-color: #aca; } img.wwpdb-logo { max-height: 25px; width: auto; margin-right: 10px; } img.border { border: 1px solid #ccc; } /*----------------------------------------------------------------------------------*/ /* News */ /* Create news blocks */ .newsItem{ background-color: rgb(245, 245, 245); padding: 5px 10px 7px 10px; margin-bottom: 10px; } .newsItem p{ margin-top: 5px; } .newsDate{ font-size: 12px; color: #666; font-weight: 400; text-transform: uppercase; padding: 5px 10px 5px 10px; border-bottom: 1px dotted #666; font-family: 'Exo 2', sans-serif; margin: 0; } /* Float "read more" links to the right */ .moreNews{ float: right; } /* Constrain the news image */ .newsImage{ max-width: 170px; max-height: 170px; float: left; margin: 7px 7px 7px 3px; } /*----------------------------------------------------------------------------------*/ /* Footer */ .topFooter{ background-color: rgb(221, 238, 226); } .bottomFooter{ background-color: rgb(102, 153, 102); text-align: center; color: #FFF; } /*----------------------------------------------------------------------------------*/ /* Images */ .logoLimit{ max-height: 35px; margin-left: auto; margin-right: auto; padding-right: 5px; } /*----------------------------------------------------------------------------------*/ /* Spacing and lines*/ .tinyMarginTop{ margin-top: 7px; } .smallMarginTop{ margin-top: 15px; } .tinyMarginBottom{ margin-bottom: 7px; } .smallMarginBottom{ margin-bottom: 15px; } .tinyPad{ padding: 5px; } .smallPad{ padding: 10px; } .padLR{ padding: 10px 25px 10px 25px; } .noPad{ padding: 0; } .padTop { padding-top: 10px; } .topFade{ border-top: 10px solid #DDEEE2; } .line-downdot{ width: 100%; border-bottom: 1px dotted #333; } .line-downdotfff{ border-bottom: 1px dotted #fff; } .line-topdotfff{ border-top: 1px dotted #fff; } .wwpdb-table th { background-color: #DFF0D8; }