/* =================================================================== */ /* SPE HEADER -- MAY14 -- v1.2 DEC14 KH ====================================================================== */ .nav-container { position:relative; width:1200px; margin:0 auto; padding:0; } .row.global-nav { height:31px;border-bottom:1px solid #000;background-color:#1c1d22;margin:0; } .row.primary-nav { height:54px;border-top:1px solid #324f7d;background-color:#26416c;margin:0; } #spe-header { border-bottom:4px solid #e0e4eb; } /* NAV COMMON ====================================*/ #logo, #global-nav li a.loginLink span, #search .GoogleSiteSearch #gssSubmitButton, #primary-nav .sub-menu .link-icon, #social-media-links li a, #mobile-nav .clickToggle span { background:url(/img/MAY14/header-sprite1.2.png) no-repeat; } #global-nav, #primary-nav { padding:0 10px; } #global-nav ul, #primary-nav ul { margin:0;padding:0;list-style:none; } #global-nav li a, #primary-nav li a { display:block;text-decoration:none; } /* GLOBAL NAV (Black Bar) ====================================*/ #global-nav li { float:left;white-space: nowrap;margin:0; } #global-nav li a { font-size: 12px;font-weight: 700;line-height: 32px;color: #9c9fac;padding:0 14px;margin:0 8px 0 0; } #global-nav li a.loginLink span { width:15px;height:15px;display:block;float:left;background-position:0 -829px;margin:8px 8px 0 0; } #global-nav li a.loginLink:hover span { background-position:-15px -829px; } #global-nav li:first-child a { margin-left:-14px; } #global-nav a:hover { color:#fff;background-color:#000; } /* Google Translate */ #translate-widget { float:right; } #translate-widget a:hover { text-decoration:none; } .goog-te-gadget, .goog-te-gadget-simple .goog-te-menu-value { color:#bbb!important;font-size:11px!important;font-weight:400!important; } .goog-te-gadget-simple { background-color:transparent!important;border:none!important;padding:4px 12px!important; } .goog-te-gadget-simple .goog-te-menu-value span { font-size: 12px;font-style: normal;font-weight: 700;color: #9c9fac;border:none!important; } #translate-widget a:hover .goog-te-gadget-simple .goog-te-menu-value span { color:#fff!important; } /* PRIMARY NAV (Blue Bar) ====================================*/ #primary-nav li.parent { margin:0;position: static;display:block;height:100%;float:left;line-height:18px; } #primary-nav li.parent:first-child { margin-left:-30px; } #primary-nav li.parent>a { display:block;float:left;color:#fff;font-weight:600;font-size:18px;padding:17px 30px 19px 30px; } #primary-nav li.parent:hover>a { background-color:#fff;color:#26416c; } #primary-nav .sub-menu { display:none;position: absolute;left:0;right:0;width:100%;top:54px;box-shadow: 0 2px 2px #999;background:#fff;} #primary-nav li:hover .sub-menu { display:block;z-index: 9999; } #primary-nav li.parent:first-child .sub-menu { margin-left:-20px; } /* Dropdown Global */ #primary-nav .sub-menu li { line-height:17px;margin:0 0 6px 0; } #primary-nav .sub-menu li a { font-weight:400;font-size:14px;color:#37373a; } #primary-nav .sub-menu li a.more { font-weight:600; } #primary-nav .sub-menu li.heading { text-transform:uppercase;font-weight:600;color:#1c1d22;margin-bottom:12px;font-size:16px; } #primary-nav .sub-menu .important a { margin-bottom:1.5em; } #primary-nav .sub-menu .important a.last { margin-bottom:0; } #primary-nav .sub-menu .important a:hover .link-title, #primary-nav .sub-menu .important a:hover .link-summary, #primary-nav .sub-menu li a:hover {color:#105cd0;} #primary-nav .sub-menu .important a span { display:block; } #primary-nav .sub-menu .important .link-title { font-size:17px;line-height:1;font-weight:700;color:#1c1d22;letter-spacing:-0.02em; } #primary-nav .sub-menu .important .link-summary { font-size:13px;color:#868686; } #primary-nav .sub-menu .see-all { clear:both;float:left;margin-top:25px;text-align:center;width:100%; } #primary-nav .sub-menu .see-all a { line-height:34px;color:#646e93;font-weight:700;font-size:16px;letter-spacing:-0.02em;width:100%;background-color:#ebeef3;border-radius:3px;} #primary-nav .sub-menu .see-all a:hover { background-color:#365d98;color:#fff; } #primary-nav .sub-menu .nav-col ul { margin-bottom:25px; } #primary-nav .sub-menu .nav-col ul:last-child { margin-bottom:0; } #primary-nav .sub-menu .sub-menu-wrap { padding:40px 30px 30px 30px; } #primary-nav .sub-menu .nav-col { border-right:1px solid #dbdbdb;float:left;min-height:220px; } /* 4-col widths - Dear future CSS developer, I realize this is not ideal! */ #primary-nav .sub-menu.membership .nav-col {width:23%;margin-right:2%;} #primary-nav .sub-menu.events .nav-col {width:22%;margin-right:2%;} #primary-nav .sub-menu.events .nav-col.important {width:26%;margin-right:2%;} #primary-nav .sub-menu.publications .nav-col {width:21%;margin-right:2%;} #primary-nav .sub-menu.publications .nav-col.important {width:32%;margin-right:2%;} #primary-nav .sub-menu.publications .nav-col.last {width:19%;} /* 3-col widths */ #primary-nav .sub-menu.training .nav-col, #primary-nav .sub-menu.resources .nav-col {width:31%;margin-right:2%;} #primary-nav .sub-menu .nav-col.last {border-right:none;margin-right:0;} /* Link Icon Images */ #primary-nav .sub-menu .link-icon, #primary-nav .sub-menu .link-text {float:left;} #primary-nav .sub-menu .link-icon.events-calendar {background-position:0 -57px;height:30px;} #primary-nav .sub-menu .link-icon.training-courses {background-position:0 -87px;height:30px;} #primary-nav .sub-menu .link-icon.web-events {background-position:0 -117px;height:15px;} #primary-nav .sub-menu .link-icon.distinguished-lect {background-position:0 -132px;height:35px;} #primary-nav .sub-menu .link-icon.jpt {background-position:0 -167px;height:18px;} #primary-nav .sub-menu .link-icon.ogf {background-position:0 -185px;height:26px;} #primary-nav .sub-menu .link-icon.peer {background-position:0 -211px;height:33px;} #primary-nav .sub-menu .link-icon.hse {background-position:0 -244px;height:35px;} #primary-nav .sub-menu .link-icon.calendar {background-position:0 -279px;height:33px;} #primary-nav .sub-menu .link-icon.onepetro {background-position:0 -312px;height:24px;} #primary-nav .sub-menu .link-icon.petrowiki {background-position:0 -336px;height:35px;} #primary-nav .sub-menu .link-icon.energy4me {background-position:0 -371px;height:47px;} #primary-nav .sub-menu .link-icon.connect {background-position:0 -418px;height:30px;} /* Individual tab icon widths - Dear future CSS developer, I realize this is not ideal! */ #primary-nav .sub-menu.events .link-icon {width:17%;} #primary-nav .sub-menu.events .link-text {width:83%;} #primary-nav .sub-menu .padding {padding-top:6px;} #primary-nav .sub-menu.publications .link-icon {width:14%;margin-right:3%;} #primary-nav .sub-menu.publications .link-text {width:83%;} #primary-nav .sub-menu.training .link-icon {width:14%;} #primary-nav .sub-menu.training .link-text {width:86%;} #primary-nav .sub-menu.resources .link-icon {width:19%;margin-right:3%;} #primary-nav .sub-menu.resources .link-text {width:78%;} /* LOGO + SEARCH (White Bar) ====================================*/ #branding { height:100px;background-color:#fff; } .spe-logo { display:block;margin:21px 0 0 10px; } #logo { text-indent:-9999px;background-position: 0 0;height:57px;width:413px; } /* Search */ #search { float:right;margin:33px 0 0 0; } #search select { display:none; } /* Not displaying select box in header search. Is displayed on SRP. */ #search .searchForm { width:235px;height:32px;margin:0;border-radius:5px;height:32px;background-color:#e0e4eb; } #search .GoogleSiteSearch #gssTextInput { float:left;font-size:14px;border:none;-webkit-appearance:none;background:none;width:197px;margin:7px 0 0 0;height:20px;outline:none; } #search .GoogleSiteSearch #gssSubmitButton { float:left;width:19px;height:17px;background-position:0 -812px;border:none;padding:0;margin:7px 0 0 10px; } #search ::-webkit-input-placeholder { color: #e0e4eb; } #search :-moz-placeholder { color: #e0e4eb; } #search ::-moz-placeholder { color: #e0e4eb; } #search :-ms-input-placeholder { color: #e0e4eb; } /* Welcome Msg */ #spe-header .welcomeMessage.invisible {opacity:0;} #spe-header .welcomeMessage {font-size:.8em;margin:35px 15px 0 0;float:right;text-align:right;line-height:1;font-weight:600;opacity: 1;-webkit-transition: opacity 1s ease-in;-moz-transition: opacity 1s ease-in;-o-transition: opacity 1s ease-in;-ms-transition: opacity 1s ease-in;transition: opacity 1s ease-in;} #spe-header .welcomeMessage .update_profile {display:block;text-decoration:none;color:#326ec8;margin:5px 0 0 0;} #spe-header .welcomeMessage .update_profile:hover {text-decoration:underline;} /* =================================================================== */ /* OBSOLETE BROWSER NOTICE ====================================================================== */ #obsolete-browser {color:#000;background-color:yellow;height:16px;width:100%;text-align:center;padding:6px 0 12px;font-size:13px;} #obsolete-browser a {font-weight:bold;color:#4ba3fd;} /* =================================================================== */ /* FOOTER ====================================================================== */ #spe-footer { background-color:#25282d;padding:25px 0;width:100%; } #text-links, #legal-links { float:left;width:60%; } #social-media-links { float:right;width:40%; } .copyright {float:left;width:100%;} #spe-footer ul, #spe-footer li { margin:0;padding:0; } #spe-footer li { white-space:nowrap;display:inline-block; } #spe-footer li a { text-decoration:none;display:block;font-weight:600;color:#7f8695;-webkit-transition: color 0.3s ease-in-out;-moz-transition: color 0.3s ease-in-out;-o-transition: color 0.3s ease-in-out;transition: color 0.3s ease-in-out; } #spe-footer li a:hover { color:#fff;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out; } #text-links li, #legal-links li { margin:0 2em 0 0; } #text-links li { text-transform:uppercase;font-size:17px;line-height:1.5em; } #legal-links { margin:.5em 0 0 0; } .copyright, #legal-links li { font-size:14px; } .copyright { margin:28px 0 0 0;clear:both;border-top:1px solid #3d4044;padding-top:4px;color:#555b64; } #social-media-links ul {float:right;} #social-media-links li a {margin:0 1em 0 0;width:50px;height:50px;float:left;} #social-media-links li a.last {margin-right:0;} #social-media-links #facebook {background-position:0 -448px;} #social-media-links #twitter {background-position:0 -498px;} #social-media-links #linkedin {background-position:0 -548px;} #social-media-links #youtube {background-position:0 -598px;} #social-media-links #instagram {background-position:0 -648px;} #social-media-links #connect {background-position:0 -698px;} #social-media-links #facebook:hover {background-position:-50px -448px;} #social-media-links #twitter:hover {background-position:-50px -498px;} #social-media-links #linkedin:hover {background-position:-50px -548px;} #social-media-links #youtube:hover {background-position:-50px -598px;} #social-media-links #instagram:hover {background-position:-50px -648px;} #social-media-links #connect:hover {background-position:-50px -698px;} @media only screen and (min-width: 960px) and (max-width: 1199px) { #text-links, #legal-links { width:55%; } #social-media-links { width:45%; } } @media only screen and (min-width: 768px) and (max-width: 959px) { #social-media-links, #text-links, #legal-links { width:100%;clear:both;float:none;text-align:center;margin:0 0 15px 0; } .copyright {text-align:center;border-top:none;padding:0;margin-top:10px;} #social-media-links ul, #text-links ul, #legal-links ul {float:none;} #social-media-links li a {margin:0 .5em;} #text-links li, #legal-links li { margin:0 1em; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #social-media-links, #text-links, #legal-links { width:100%;clear:both;float:none;text-align:center;margin:0 0 15px 0; } .copyright {text-align:center;border-top:none;padding:0;margin-top:10px;} #social-media-links ul, #text-links ul, #legal-links ul {float:none;} #social-media-links li a {margin:0 .5em;} #text-links li, #legal-links li { margin:0 1em; } #text-links li {line-height:2em;} } @media only screen and (max-width: 479px) { #spe-footer {position:relative;} #social-media-links, #text-links, #legal-links { width:100%;clear:both;float:none;text-align:center;margin:0 0 15px 0; } .copyright {text-align:center;border-top:none;padding:0;margin-top:10px;} #social-media-links ul, #text-links ul, #legal-links ul {float:none;list-style:none;} #social-media-links li a {margin:0 .5em .5em 0;} #social-media-links #youtube { clear:both; } #text-links li, #legal-links li { line-height:2em;margin:0 1em;display:list-item; } } /* =================================================================== */ /* MOBILE HEADER ====================================================================== */ #primary-nav #mobile-menu-trigger {display:none;width:45px;padding:16px 0 0 15px;height:44px;float:right;background-color:#192943;} #primary-nav #mobile-menu-trigger span {display:block;background-color:#a0bcea;width:34px;height:5px;margin:0 0 5px 0;} #outer-page-wrapper.active #mobile-menu-trigger span {background-color:#e1eaf8;} #outer-page-wrapper.active #primary-nav #mobile-menu-trigger {height:30px;width:60px;padding:30px 0 0 0;} #outer-page-wrapper.active #mobile-menu-trigger .rotate {-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);} #mobile-nav {background-color: #1c1d22;position: fixed;width: 300px;top: 0;right: 0px;color:#fff;overflow:scroll;} #mobile-nav a {text-decoration:none;color:#fff;} #mobile-nav ul {margin:0;padding:0;} #mobile-nav li {width:100%;} /* PHONE Menu /* ======================================= */ #mobile-nav ul {margin:0;padding:0} #mobile-nav li {list-style: none;margin:0;} #mobile-nav .primary-nav-mobi li.parent>a {color:#c5c9d7;} #mobile-nav li a {display:block;height:38px;padding:12px 0 0 20px;color:#888a8f;font-size:16px;font-weight:600;} #mobile-nav li a:focus {background-color:#000;} #mobile-nav li.heading {background-color:#000;color:#525252;padding:7px 0 7px 20px;font-weight:bold;font-size:14px;text-transform:uppercase;} #mobile-nav .sub-menu-mobi li a {padding-left:40px;} #mobile-nav .clickToggle span {display:inline-block;background-position:0 -748px;width:15px;height:7px;margin:0 0 0 10px;} #mobile-nav .clickToggle.active span {background-position:0 -755px;} #mobile-nav #member-mobi .welcomeMessage {color:#fff;font-weight:600;padding:12px 0 0 20px;} #mobile-nav #member-mobi .update_profile {display:none;} /* =================================================================== */ /* MEDIA QUERIES ====================================================================== */ @media only screen and (min-width: 960px) and (max-width: 1199px) { /* PRIMARY NAV */ .nav-container { width: 960px; } #primary-nav .sub-menu .sub-menu-wrap { padding:30px 20px 20px 20px; } #primary-nav .sub-menu li { line-height:16px; } #primary-nav .sub-menu li.heading { letter-spacing:-0.02em; } #primary-nav .sub-menu .important .link-title { font-size:16px;line-height:1.2; } #primary-nav .sub-menu .important .link-summary { font-size:12px; } #primary-nav .sub-menu.publications .important .link-icon { width:18%;margin-right:5%; } #primary-nav .sub-menu.publications .important .link-text { width:77%; } #primary-nav .sub-menu.resources .important .link-icon { width:21%;margin-right:5%; } #primary-nav .sub-menu.resources .important .link-text { width:74%; } #primary-nav .sub-menu.publications .additional-links { min-height:340px; } #primary-nav .sub-menu.resources .additional-links { min-height:315px; } #primary-nav .sub-menu.publications .nav-col { width:22%;margin-right:2%; } #primary-nav .sub-menu.publications .nav-col.important { width:29%;margin-right:2%; } #primary-nav .sub-menu.publications .nav-col.last { width:18%; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { #spe-header #search {margin:20px 0 0 0;} #spe-header .welcomeMessage {margin-top:10px;margin-right:0;clear:both;} /* PRIMARY NAV */ .nav-container { width:95%;max-width: 768px; } #primary-nav .sub-menu li { line-height:19px; } #primary-nav .sub-menu li.heading { margin:0 0 8px 0; } #primary-nav .sub-menu .important a { margin-bottom:2em; } #primary-nav .sub-menu .nav-col { border:none;min-height:0; } #primary-nav .sub-menu .nav-col.important { border-right:1px solid #e0e4eb;min-height:250px; } #primary-nav .sub-menu .nav-col.important, #primary-nav .sub-menu.membership .nav-col.important, #primary-nav .sub-menu.events .nav-col.important, #primary-nav .sub-menu.publications .nav-col.important, #primary-nav .sub-menu.training .nav-col.important, #primary-nav .sub-menu.resources .nav-col.important { width:50%!important;margin:0!important;float:left; } #primary-nav .sub-menu .nav-col.additional, #primary-nav .sub-menu .nav-col.additional.last { width:46%!important;margin:0 0 2em 0!important;padding-left:2%;clear:right;float:right; } #primary-nav .sub-menu .nav-col.additional.last { margin-bottom:0!important; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* HEADER */ .row.primary-nav { height:60px;border-top:none; } .global-nav, #primary-nav ul { display:none; } .half.search { display:none; } .nav-container { width:100%; } #primary-nav { padding:0; } #primary-nav #mobile-menu-trigger, #mobile-nav {display:block;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { /* HEADER */ .row.primary-nav {height:50px;border-top:none;} .global-nav {display:none;} .nav-container { width:100%; } #branding {height:80px;} .half.logo {width:100%;} .img-wrap.logo {width:90%;margin:18px auto 0;} #logo {height:41px;width:280px;background-size:cover;} .half.search {display:none;} #primary-nav {padding:0;} #primary-nav #mobile-menu-trigger {display:block;width:40px;height:36px;padding:12px 0 0 11px;} #primary-nav #mobile-menu-trigger span {width:31px;height:5px;margin:0 0 5px 0;} #outer-page-wrapper.active #primary-nav #mobile-menu-trigger {height:29px;width:50px;padding:21px 0 0 0;} #primary-nav ul {display:none;} } /* GLOBAL PAGE ================================================== */ #content-wrap {background-color:#fff;position:relative;} .container.page-content {padding:25px 0;} /* MISC ================================================== */ .half {width:50%;float:left;} .hidden {display: none;} .invisible {visibility: hidden;} .clear { clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }