/* =================================================================== */
/* HEADER
====================================================================== */
#spe-header { border-bottom:4px solid #e0e4eb; }
.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:59px;border-top:1px solid #324f7d;background-color:#26416c;margin:0;}

#global-nav, #primary-nav {padding:0 10px;}

#branding {height:119px;background-color:#fff;}
.img-wrap.logo {margin:29px 0 0 10px;}
#logo {text-indent:-9999px;background:url(../images/MAY14/header-sprite.png) no-repeat 0 0;height:57px;width:396px;}

/* Common Nav */
#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
====================================*/
#global-nav li {display:inline-block;float:left;position:relative;margin:0;white-space: nowrap;}
#global-nav li a { font-size: 12px;font-style: normal;font-weight: bold;line-height: 32px;margin-right: 1.3em;padding:0 8px;cursor:pointer;color: #818492; }
#global-nav li:first-child a {padding-left:0;}
#global-nav a:hover { color:#4ba3fd;-webkit-transition: color 0.3s ease;-moz-transition: color 0.3s ease;-o-transition: color 0.3s ease;transition: color 0.3s ease; }


/* Primary Nav
====================================*/
#primary-nav { width:100%;clear:both;float:left; }
#primary-nav>ul>li { margin:0; position: relative;display:block; }
#primary-nav>ul>li>a { display:block;cursor:pointer;float:left; }
#primary-nav li.parent:first-child {margin-left:-30px;}
#primary-nav li a { color:#fff;font-weight:600;font-size:18px;padding:19px 30px 22px 30px; }

#primary-nav .sub-menu {
	display:none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 2500;
	margin-top: -1000px;
	width:100%;
	box-shadow: 0 6px 6px #bbb;
	background:#fff;
	}
#primary-nav li:hover .sub-menu { display: block;top: 59px;left: 0;right: 0;margin-top: 0}
#primary-nav li.parent:hover>a {background-color:#fff;color:#000;z-index:3000;}
#primary-nav li:hover .sub-menu a, #primary-nav li:hover .sub-menu a:hover {background-color:none!important;}
#primary-nav .sub-menu-inner,#primary-nav .sub-menu .important,#primary-nav .sub-menu .additional-links {}


/* Sub-Menu Content */
#primary-nav .sub-menu .important {width:31%;float:left;}
#primary-nav .sub-menu .additional-links {width:69%;float:left;background: #f7f8fc;background: -moz-linear-gradient(left,  #f7f8fc 0%, #ffffff 50%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f7f8fc), color-stop(50%,#ffffff));background: -webkit-linear-gradient(left,  #f7f8fc 0%,#ffffff 50%);background: -o-linear-gradient(left,  #f7f8fc 0%,#ffffff 50%);background: -ms-linear-gradient(left,  #f7f8fc 0%,#ffffff 50%);background: linear-gradient(to right,  #f7f8fc 0%,#ffffff 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8fc', endColorstr='#ffffff',GradientType=1 );
}

/* Default Padding */
#primary-nav .sub-menu .important .sub-menu-wrap {padding:40px;}
#primary-nav .sub-menu .additional-links .sub-menu-wrap {padding:60px}


/* Individual Tab Overrides */
#primary-nav .sub-menu.membership .important {width:29%;}
#primary-nav .sub-menu.membership .additional-links {width:71%;}
#primary-nav .sub-menu.membership .important .sub-menu-wrap {padding:50px 40px 40px 50px;}
#primary-nav .sub-menu.membership .additional-links .sub-menu-wrap {padding:40px 20px 20px 50px;}
#primary-nav .sub-menu.publications .additional-links .sub-menu-wrap {padding:60px 40px 40px 50px;}
#primary-nav .sub-menu.training .important .sub-menu-wrap {padding:50px;}
#primary-nav .sub-menu.events .important .sub-menu-wrap {padding:50px 35px;}


#primary-nav .sub-menu .nav-col {width:33%;float:left;}
#primary-nav .sub-menu .nav-col.half {width:50%;}


#primary-nav .sub-menu a {margin:0;padding:0;display:block;}
#primary-nav .sub-menu .additional-links .nav-col ul {margin-bottom:25px;}
#primary-nav .sub-menu .additional-links .nav-col ul:last-child {margin-bottom:0;}
#primary-nav .sub-menu li, #primary-nav .sub-menu li.heading, #primary-nav .sub-menu li a {margin:0;padding:0;font-size:15px;line-height:21px;}
#primary-nav .sub-menu li {margin:0 0 3px 0;}
#primary-nav .sub-menu li.heading {text-transform:uppercase;font-weight:600;color:#333;margin-bottom:7px;}
#primary-nav .sub-menu li a {color:#326ec8;font-weight:400;}
#primary-nav .sub-menu li a.more {font-weight:600;}
#primary-nav .sub-menu .see-all {clear:both;width:100%;border-top:1px solid #ebecf0;float:left;padding:10px 0 0 0;margin:25px 0 0 0;}
#primary-nav .sub-menu .see-all a {color: #326ec8;font-weight:700;font-size:16px;}
#primary-nav .sub-menu li a:hover,#primary-nav .sub-menu .see-all a:hover {text-decoration:underline;}



#primary-nav .sub-menu .important a {display:block;float:left;padding:0;margin:0 0 30px 0;width:100%;}
#primary-nav .sub-menu .important .sub-menu-wrap a.last {margin-bottom:0;}
#primary-nav .sub-menu .important a span {display:block;}
#primary-nav .sub-menu .important .link-icon {width:20%;float:left;margin:0 5% 0 0;background:url(/img/MAY14/header-sprite.png) no-repeat;}
#primary-nav .sub-menu .important .link-text {width:75%;float:left;}
#primary-nav .sub-menu .important .link-text.padding {padding-top:6px;}
#primary-nav .sub-menu .important .link-title {font-weight:700;color:#333;font-size:18px;line-height:1.2em;margin:0 0 2px 0;}
#primary-nav .sub-menu .important .link-summary {font-weight:400;color:#868686;font-size:13px;line-height:1em;}

#primary-nav .sub-menu.resources .important .link-icon, #primary-nav .sub-menu.publications .important .link-icon {width:27%;margin-right:5%;}
#primary-nav .sub-menu.resources .important .link-icon {margin-top:3px;}
#primary-nav .sub-menu.publications .important .link-icon {margin-top:4px;}
#primary-nav .sub-menu.resources .important .link-text, #primary-nav .sub-menu.publications .important .link-text {width:68%;}

#primary-nav .sub-menu .important .link-icon.onepetro {background-position:0 -57px;height:29px;}
#primary-nav .sub-menu .important .link-icon.petrowiki {background-position:0 -860px;height:36px;}
#primary-nav .sub-menu .important .link-icon.energy4me {background-position:0 -110px;height:50px;}
#primary-nav .sub-menu .important .link-icon.connect {background-position:0 -160px;height:36px;}
#primary-nav .sub-menu .important .link-icon.events-calendar {background-position:-31px -468px;height:35px;}
#primary-nav .sub-menu .important .link-icon.calendar {background-position:-31px -196px;height:36px;}
#primary-nav .sub-menu .important .link-icon.training-courses {background-position:-31px -232px;height:35px;}
#primary-nav .sub-menu .important .link-icon.web-events {background-position:-31px -267px;height:22px;}
#primary-nav .sub-menu .important .link-icon.distinguished-lect {background-position:-31px -289px;height:49px;}
#primary-nav .sub-menu .important .link-icon.jpt {background-position:0 -338px;height:29px;}
#primary-nav .sub-menu .important .link-icon.ogf {background-position:0 -367px;height:33px;}
#primary-nav .sub-menu .important .link-icon.twa {background-position:0 -400px;height:23px;}
#primary-nav .sub-menu .important .link-icon.hse {background-position:0 -423px;height:45px;margin-top:0;}
#primary-nav .sub-menu .important a:hover .link-title,#primary-nav .sub-menu .important a:hover .link-summary {color:#326ec8;}
/* Min heights on some tabs */
#primary-nav .sub-menu.events .additional-links {min-height:335px;}
#primary-nav .sub-menu.publications .additional-links {min-height:360px;}
#primary-nav .sub-menu.resources .additional-links {min-height:345px;}

/* Welcome
====================================*/
#spe-header .welcomeMessage.invisible {opacity:0;}
#spe-header .welcomeMessage {font-size:.8em;margin:40px 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;}

/* Search
====================================*/
#spe-header #search {float:right;margin:40px 0 0 0;}
#spe-header #search select {display:none;}
#spe-header #search .searchForm {width:235px;height:32px;margin:0;border-radius:5px;height:32px;background-color:#e0e4eb;}
#spe-header #search .GoogleSiteSearch #gssTextInput {float:left;font-size:14px;border:none;-webkit-appearance:none;background:none;width:197px;margin:5px 0 0 0;height:20px;}
#spe-header #search .GoogleSiteSearch #gssSubmitButton {float:left;width:19px;height:18px;background:url(/img/MAY14/header-sprite.png) no-repeat 0 -817px;border:none;margin:7px 8px 0 8px;}

/* 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:#000!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: bold;color: #818492;border:none!important;}
#translate-widget a:hover .goog-te-gadget-simple .goog-te-menu-value span {color:#fff!important;}

/* SRP
====================================*/
.GoogleSiteSearch {font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;}
.main_content_wrap .GoogleSiteSearch .form-wrapper {background: none repeat scroll 0 0 #F1F1F1;border: 1px solid #E5E5E5;padding:20px;width: 100%;}
.main_content_wrap .GoogleSiteSearch #gssTextInput {border: 1px solid #d9d9d9;width:400px;height:27px;padding:0;background-color:#fff;padding:0 0 0 8px;-webkit-appearance:none;}
.main_content_wrap .GoogleSiteSearch #gssSubmitButton {border-radius:2px 2px 2px 2px;border: 1px solid #3079ED;color: #FFFFFF;height:29px;background:#4D90FE url(/img/site/header/searchSprite.png) no-repeat 0 -29px;min-width:60px;}
.main_content_wrap .GoogleSiteSearch #gssSubmitButton:hover {background-color:#126db3;}
.main_content_wrap #gssScopeSelect, .main_content_wrap .GoogleSiteSearch #gssTextInput, .main_content_wrap .GoogleSiteSearch #gssSubmitButton {float:left;margin:0 10px 0 0;}
.GoogleSiteSearch .result {margin:0 0 0 20px;}
.GoogleSiteSearch .results {color: #999999;font-size: 13px;line-height: 35px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin:0 0 5px 0;}
.GoogleSiteSearch .results .numResults {margin:0 0 0 20px;}
.GoogleSiteSearch .result {margin-bottom:20px;}
.GoogleSiteSearch span.resultTitle, .GoogleSiteSearch span.resultTitle a {display:block;width:75%;}
.GoogleSiteSearch span.resultTitle a {font-weight:600;text-decoration:underline;}
.GoogleSiteSearch span.url {color:#00802A;font-size:14px;}
.GoogleSiteSearch span.description {color:#444;font-size:14px;}
.GoogleSiteSearch span.resultTitle, .GoogleSiteSearch span.url, .GoogleSiteSearch span.description, .GoogleSiteSearch span.mimeType {line-height:1.2em;display:block;}
span.mimeType {float:left;margin:0 6px 0 0;font-size:11px;}

/* =================================================================== */
/* OBSOLETE BROWSER NOTICE
====================================================================== */
#obsolete-browser {color:#000;background-color:yellow;height:20px;width:100%;text-align:center;padding:2px 0 4px;font-size:13px;}
#obsolete-browser a {font-weight:bold;color:#4ba3fd;}


/* =================================================================== */
/* FOOTER
====================================================================== */
#spe-footer {background-color:#333;padding:30px 0;}
#spe-footer #footer-links {float:left;width:75%;}
#spe-footer #social-media-links {float:right;width:25%;}
#spe-footer li, #spe-footer ul, #spe-footer ol {margin:0;padding:0;}
#spe-footer li a {text-decoration:none;display:block;}
#spe-footer p, #spe-footer li, #spe-footer li a {color:#6f7582;}
#spe-footer #footer-links li a {text-transform:uppercase;font-weight:600;display:inline;float:left;margin:0 2em 0 0;font-size:17px;}
#spe-footer p.copyright {font-size:12px;clear:both;float:left;margin:10px 0 0 0;}
#spe-footer #footer-links a:hover {color:#adb3c1;}
#spe-footer #social-media-links li a {margin:0 1em 0 0;display:block;width:50px;height:50px;float:left;background:url(/img/MAY14/social-media-50x.png) no-repeat;}
#spe-footer #social-media-links li a.last {margin-right:0;}
#spe-footer #social-media-links #facebook {background-position:0 0;}
#spe-footer #social-media-links #twitter {background-position:0 -50px;}
#spe-footer #social-media-links #linkedin {background-position:0 -100px;}
#spe-footer #social-media-links #youtube {background-position:0 -150px;}
#spe-footer #social-media-links #facebook:hover {background-position:-50px 0;}
#spe-footer #social-media-links #twitter:hover {background-position:-50px -50px;}
#spe-footer #social-media-links #linkedin:hover {background-position:-50px -100px;}
#spe-footer #social-media-links #youtube:hover {background-position:-50px -150px;}


/* =================================================================== */
/* 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:url(../images/MAY14/header-sprite.png) no-repeat 0 -503px;width:15px;height:7px;margin:0 0 0 10px;}
#mobile-nav .clickToggle.active span {background-position:0 -510px;}
#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 .important {width:35%;}
	#primary-nav .sub-menu .additional-links {width:65%;}
	#primary-nav .sub-menu .important .sub-menu-wrap {padding:30px;}
	#primary-nav .sub-menu .additional-links .sub-menu-wrap, #primary-nav .sub-menu.publications .additional-links .sub-menu-wrap {padding:40px 30px;}
	#primary-nav .sub-menu .nav-col {width:29%;margin:0 4% 0 0;}
	#primary-nav .sub-menu .nav-col.half {width:47%;margin:0 0 0 3%;}
	#primary-nav .sub-menu .important .link-icon {width:18%;margin-right:8%;}
	#primary-nav .sub-menu .important .link-text {width:74%;}
	#primary-nav .sub-menu .important .link-title {font-size:17px;}
	#primary-nav .sub-menu .important .link-summary {font-size:12px;}
	#primary-nav .sub-menu.resources .important .sub-menu-wrap, #primary-nav .sub-menu.publications .important .sub-menu-wrap {padding:30px 25px;}
	#primary-nav .sub-menu.membership .important .sub-menu-wrap {padding:40px 30px 30px 30px;}
	#primary-nav .sub-menu.membership .additional-links .sub-menu-wrap {padding:40px 40px 20px 40px;}
	#primary-nav .sub-menu.resources .important .link-icon, #primary-nav .sub-menu.publications .important .link-icon {width:30%;margin-right:5%;}
	#primary-nav .sub-menu.resources .important .link-text, #primary-nav .sub-menu.publications .important .link-text {width:65%;}
	#spe-homepage #primary-nav .sub-menu.publications .additional-links {min-height:340px;}
	#spe-homepage #primary-nav .sub-menu.resources .additional-links {min-height:315px;}
	
	/* FOOTER */
	#spe-footer #footer-links {width:70%;}
	#spe-footer #social-media-links {width:30%;}
}
/* 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 .important, #primary-nav .sub-menu.membership .important {width:45%;}
	#primary-nav .sub-menu .additional-links, #primary-nav .sub-menu.membership .additional-links {width:55%;}
	#primary-nav .sub-menu .important .sub-menu-wrap {padding:60px 20px 0 20px;}
	#primary-nav .sub-menu .additional-links .sub-menu-wrap {padding:60px 50px;}
	#primary-nav .sub-menu .nav-col {width:100%;}
	#primary-nav .sub-menu .nav-col.half {width:100%;}
	#primary-nav .sub-menu .additional-links .nav-col ul:last-child {margin-bottom:25px;}

	/* FOOTER */
	#spe-footer #footer-links {width:64%;}
	#spe-footer #social-media-links {width:36%;}	
	#spe-footer #footer-links li a {font-size:15px;margin:0 1.5em 0 0;}
}


.half {width:50%;float:left;}
.hidden {display: none;}
.invisible {visibility: hidden;}