/*
	--------------------------
	Global Styles
	--------------------------
*/

/*  Custom Classes
--------------------------  */

.hidden { display: none; }
.invisible { visibility: hidden; }
.clear { clear: both; }

.centre { text-align: center; }
.left { float: left; }
.right { float: right; }

img.left { margin-right: 1em; }
img[style*="left"] { margin-right: 1em; margin-bottom: 1em; max-width: 50%; }
img[style*="right"] { margin-left: 1em; margin-bottom: 1em; max-width: 50%; }

.black { color: #1d1d1b; }
.datagreen { color: #00acaf; }
.datalightgreen { color: #a3d7d9; }
.datadarkgreen { color: #00434f; }
.oilblue { color: #009fe3; }
.oillightblue { color: #83d0f5; }
.oildarkblue { color: #061d41; }
.gasgreen { color: #b2c400; }
.gaslightgreen { color: #dae096; }
.gasdarkgreen { color: #517516; }
.forumorange { color: #f07e26; }
.forudarkmorange { color: #a8541b; }

div.greyout { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0px; padding: 0px; z-index: 299; background-color: #fff; text-align: center; }

/*  Elements 
--------------------------  */

body { font-family: "pragmatica", helvetica, arial, sans-serif; font-weight: 300; font-size: 1em; width: 100%; color: #1d1d1b; margin: 0px auto; background-color: #fff; text-align: center; }
/* background-image: url(/_resources/files/template/gradient-data-small.png); background-repeat: repeat-x; background-position: top;  */

article, aside, figure, footer, header, main, hgroup, nav, section { display: block; }

h1 { font-family: "pragmatica", helvetica, arial, sans-serif; font-size: 2em; color: #00acaf; font-weight: 600; margin: 0px 0px 0.5em 0px; line-height: 1.35em; letter-spacing: -0.04em; }
h2 { font-family: "pragmatica", helvetica, arial, sans-serif; font-size: 2em; color: #1d1d1b; font-weight: 600; margin: 0px 0px 1em 0px; line-height: 1.35em; letter-spacing: -0.04em; }
h3, h4, h5, h6 { font-family: "pragmatica", helvetica, arial, sans-serif; font-size: 1.35em; color: #1d1d1b; font-weight: 600; margin: 0px; line-height: 1.35em; }

p ~ h2 { margin-top: 1em; }

p, li, td, dd, label, input, textarea { font-size: 1em; }
    li li, li p, li input { font-size: 1em; }

strong, b { font-weight: 600; }

p { margin: 0px 0px 1em 0px; }
a { text-decoration: none; color: #00acaf; }
    a:not(.logo) { transition: all .1s ease-in-out; }
    a:hover { text-decoration: none; background-color: #00acaf; color: #fff; }
img { border: 0px; }
input, select, textarea { font-family: "pragmatica", helvetica, arial, sans-serif; font-weight: 300; }
table { width: 100%; }
input[type=submit], input[type=button] { border-radius: 0.75em; }

main img, main iframe, main object { max-width: 100%; }

svg { overflow: hidden; }

/*  Structure 
--------------------------  */

/* 
    Header
*/
/*body > div > header           { background-image: url(/_resources/files/template/gradient-data-small.png); background-repeat: repeat-x; background-position: top; }*/
body > div > header > nav { width: 75em; margin: 0px auto; text-align: left; }

/* 
    Spotlight Nav 
*/
body > div > header nav.spotlight > div { width: 90%; margin: 0px 5%; padding: 2.5% 0px; float: left; position: relative; }
    body > div > header nav.spotlight > div > div > a, body > div > header nav.spotlight div > div div { margin-left: 0.75em; float: right; position: relative; }
        body > div > header nav.spotlight > div > div > a.grn { background-color: #00acaf; }
        body > div > header nav.spotlight > div a:not(.logo) img, body > div > header nav.spotlight div > div div img { float: left; }
    body > div > header nav.spotlight > div a:hover, body > div > header nav.spotlight > div > div > div a:hover { background-color: transparent; }
body > div > header nav.spotlight div > div div { position: relative; }

body > div > header nav.spotlight a.logo { width: 12.4375em; float: left; padding: 0px; margin-left: 0px; }
    body > div > header nav.spotlight a.logo img { float: left; }
/* Grid Menu */
body > div > header nav.spotlight ul { padding: 1.25em; list-style-type: none; position: absolute; top: 3.575em; right: 0px; width: 18.9em; background: #fff; z-index: 199; border: solid 1px #00acaf; transition: all .2s ease-in-out; filter: alpha(opacity=0); opacity: 0; visibility: hidden; }
    body > div > header nav.spotlight ul:before { content: url(/_resources/files/template/menu-arrow.png); display: block; float: left; position: absolute; top: -1em; right: 1.15em; }
    body > div > header nav.spotlight ul.show { filter: alpha(opacity=100); opacity: 1; visibility: visible; }
    body > div > header nav.spotlight ul li { float: left; text-align: center; margin-left: 5.3%; margin-bottom: 5.3%; }
        body > div > header nav.spotlight ul li:nth-child(3n+1) { margin-left: 0px; }
        body > div > header nav.spotlight ul li a { display: block; float: left; color: #1d1d1b; }
            body > div > header nav.spotlight ul li a:hover { background-color: transparent; }
                body > div > header nav.spotlight ul li a:hover img { background-color: #00acaf; }
            body > div > header nav.spotlight ul li a br { clear: left; }

/* Search Section */
body > div > header nav.spotlight section.s { padding: 1.25em; list-style-type: none; position: absolute; top: 3.575em; right: 0px; width: 67.5em; background: #fff; z-index: 199; border: solid 1px #de2536; transition: all .2s ease-in-out; filter: alpha(opacity=0); opacity: 0; visibility: hidden; }
    body > div > header nav.spotlight section.s:before { content: url(/_resources/files/template/menu-arrow.png); display: block; float: left; position: absolute; top: -1em; right: 1.15em; }
    body > div > header nav.spotlight section.s.show { filter: alpha(opacity=100); opacity: 1; visibility: visible; }
/* Navicon */
body > div > header nav.spotlight > div > div a.n { display: none; }

/* 
    Main Nav
*/
body > div > header nav.mn { margin: 0px; background-color: #00acaf; clear: both; float: left; width: 100%; font-weight: 200; }
    body > div > header nav.mn > div { width: 75em; margin: 0px auto; text-align: left; }
        body > div > header nav.mn > div > ul { list-style-type: none; width: 90%; margin: 0px 5%; padding: 0px; text-align: left; position: relative; }
            body > div > header nav.mn > div > ul > li { float: left; position: relative; }
                body > div > header nav.mn > div > ul > li a { font-size: 1em; color: #fff; }
                body > div > header nav.mn > div > ul > li > a { display: block; float: left; padding: 1em 1.1em 1.25em 1.1em; transition: all .2s ease-in-out; }
                body > div > header nav.mn > div > ul > li.s > a { background: transparent url(/_resources/files/template/v.png) no-repeat center 2.5em; }

                /* Sub menus */
                body > div > header nav.mn > div > ul > li > ul { list-style-type: none; visibility: hidden; display: block; padding: 1.25em; margin-top: 1em; position: absolute; top: 3.5em; left: -1em; width: 14em; z-index: 99; opacity: 0; background-color: #00434f; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
                    body > div > header nav.mn > div > ul > li > ul > li { float: left; width: 100%; }
                        body > div > header nav.mn > div > ul > li > ul > li > a { display: block; padding: 0.25em 0.5em; }
                            body > div > header nav.mn > div > ul > li > ul > li > a[href="javascript:;"] { font-weight: 400; }

                body > div > header nav.mn > div > ul > li > a:hover, body > div > header nav.mn > ul > li.s > a:hover { background-color: #00434f; }
                body > div > header nav.mn > div > ul > li > ul > li a[href="javascript:;"] { cursor: default; background-color: transparent; }
                body > div > header nav.mn > div > ul > li > ul > li a:not([href="javascript:;"]):hover { background-color: #00acaf; }

                body > div > header nav.mn > div > ul > li.o > a { background-color: #00434f; }
                body > div > header nav.mn > div > ul > li.o > ul { visibility: visible; opacity: 1; margin-top: 0px; }

                /* sub multi menus */
                body > div > header nav.mn > div > ul > li.m { position: static; }
                    body > div > header nav.mn > div > ul > li.m > ul { width: 100%; }
                        body > div > header nav.mn > div > ul > li.m > ul > li { width: 20%; }
                body > div > header nav.mn > div > ul > li > ul > li ul { list-style-type: none; margin: 0px; padding: 0px; }
                    body > div > header nav.mn > div > ul > li > ul > li ul li a { display: block; float: left; padding: 0.25em 0.5em; }

    /* Sectional Nav */
    /*body > div > header nav.mn.sn div     { text-align: center; }
body > div > header nav.mn.sn ul      { text-align: center; display: inline-block; }
body > div > header nav.mn.sn ul li   { display: inline-block; float: none; text-align: left; margin-bottom: -0.35em; }*/
    body > div > header nav.mn.sn div > ul { margin-left: 15%; width: 80%; }

/* Oil, Gas, Forum */
/* Oil */
ul#mainnav > li#oil > a { background-color: #009fe3; }
ul#mainnav > li#oil > ul { background-color: #009fe3; }
    ul#mainnav > li#oil > ul > li ul li a:hover { background-color: #061d41; }
    ul#mainnav > li#oil > ul > li a:not([href="javascript:;"]):hover { background-color: #061d41; }
/* Gas */
ul#mainnav > li#gas > a { background-color: #b2c400; }
ul#mainnav > li#gas > ul { background-color: #b2c400; }
    ul#mainnav > li#gas > ul > li ul li a:hover { background-color: #517516; }
    ul#mainnav > li#gas > ul > li a:not([href="javascript:;"]):hover { background-color: #517516; }
/* Forum */
ul#mainnav > li#forum > a { background-color: #f07e26; }
ul#mainnav > li#forum > ul { background-color: #f07e26; }
    ul#mainnav > li#forum > ul > li ul li a:hover { background-color: #a8541b; }
    ul#mainnav > li#forum > ul > li a:not([href="javascript:;"]):hover { background-color: #a8541b; }

nav#mobnav { display: none; }

/* Search */
body > div > header section.s { background: transparent; padding: 0px; float: left; margin-bottom: 0px; overflow: hidden; width: 100%; height: 0px; }
    body > div > header section.s > div { width: 75em; margin: 0px auto; text-align: left; }
    body > div > header section.s form { padding: 5%; position: relative; float: left; width: 90%; z-index: 100; }
        body > div > header section.s form div { border-bottom: solid 1px #d1d3d4; float: left; width: 100%; }
    body > div > header section.s img { float: left; }
    body > div > header section.s input[type=text] { font-family: "acumin-pro-condensed", helvetica, arial, sans-serif; font-weight: 600; color: #00acaf; line-height: 100%; background-color: transparent; border: 0px; border-radius: 0px; width: calc(100% - 1.1875em); padding: 1%; margin: 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
        body > div > header section.s input[type=text][placeholder] { color: #00acaf; }
    body > div > header section.s input[type=image] { background: transparent; border: 0px; border-radius: 0px; width: 1.1875em; padding: 0px; margin: 0px; vertical-align: middle; }
    body > div > header section.s img.l { position: absolute; top: 80%; left: 50%; }

    body > div > header section.s input[type="text"] { font-size: 150%; }

    body > div > header section.s div.results { display: none; position: relative; }
        body > div > header section.s div.results > section, body > div > header section.s div.results > p { padding: 5%; width: 90%; }
        body > div > header section.s div.results h1 { margin-bottom: 0.5em; }
        body > div > header section.s div.results ol { list-style-type: none; padding: 0px; margin: 0px; }
            body > div > header section.s div.results ol li { margin-bottom: 0.5em; float: left; width: 100%; }
                body > div > header section.s div.results ol li a { float: left; }
        body > div > header section.s div.results p.tr { float: left; width: 100%; margin-top: 0.5em; }
            body > div > header section.s div.results p.tr a { padding: 0.15em; }

    body > div > header section.s.o { overflow: auto; }
        body > div > header section.s.o div.b { position: absolute; top: 0px; right: 0px; background: #beac7d url(/_resources/files/template/close.png) no-repeat 0.5em 0.4em; }
            body > div > header section.s.o div.b img { filter: alpha(opacity=0); opacity: 0; }
        body > div > header section.s.o div.results { display: block; }

    body > div > header section.s img.fc { display: none; }

/* 
    Main
*/
body > div > main > div { line-height: 1.5em; clear: both; width: 75em; margin: 0px auto; text-align: left; }
    body > div > main > div > div { width: 90%; margin: 0px 5%; padding: 3em 0px 0px 0px; float: left; position: relative; }
body > div > main header h1 { font-weight: 700; margin-bottom: 0.9em; color: #00acaf; line-height: 1em; }
body > div > main header h2 { margin-bottom: 1.3em; font-size: 1.75em; color: #58595b; }
body > div > main header figure { margin: 0 -5% 1em -5%; margin-bottom: 2.25em; padding: 0; width: 110%; float: left; }
    body > div > main header figure img { width: 100%; float: left; }
body > div > main header > figure figcaption { display: block; float: left; width: 100%; padding: 0.5em 5%; border-bottom: solid 1px #bcbec0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    body > div > main header > figure figcaption p { margin-bottom: 0; }
body > div > main p, body > div > main li, body > div > main time, body > div > main td, body > div > main label, body > div > main input, body > div > main select, body > div > main textarea { font-size: 1.1em; line-height: 1.8em; }
    body > div > main li li, body > div > main li p, body > div > main li input { font-size: 1em; }
body > div > main label { width: 25%; display: inline-block; margin-bottom: 0.5em; }
    body > div > main label.c { width: auto; }
body > div > main input, body > div > main select, body > div > main textarea { margin-bottom: 0.5em; padding: 1% 2%; width: 74%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    body > div > main input[type=checkbox] { width: auto; }
    body > div > main input[type=submit], body > div > main input[type=button] { width: auto; background-color: #00434f; color: #00acaf; border: 0px; }
body > div > main div.buttons { text-align: right; }

/* Footnotes */
body > div > main p.footnote { font-size: 0.9em; }

/* Related Documents */
body > div > main nav.rd { border-top: solid 1px #c9cccb; padding-top: 1em; clear: both; }
body > div > main nav.rd h1 { font-size: 1.75em; }
    body > div > main nav.rd ul { float: left; width: 100%; list-style-type: none; margin: 0px 0px 1em 0px; padding: 0px; }
        body > div > main nav.rd ul li { float: left; width: 45%; margin-right: 5%; }
            body > div > main nav.rd ul li.f { float: none; width: 100%; margin-right: 0px; }
            body > div > main nav.rd ul li a { display: block; padding: 0.5em 0.5em 0.5em 2.375em; transition: all .1s ease-in-out; background: transparent url(/_resources/files/events/documents-60-datagreen.png) no-repeat 0.15em 0.15em; }
                body > div > main nav.rd ul li a:hover { background-image: url(/_resources/files/events/documents-60-white.png); background-color: #00acaf; }

/* 
    Footer
*/
body > div > footer { clear: both; }

    body > div > footer > nav { margin: 0px; padding: 1.5em 0px; background-color: #ededed; clear: both; float: left; width: 100%; font-weight: 300; }
        body > div > footer > nav.prtnrs > div { width: 75em; margin: 0px auto; }
            body > div > footer > nav.prtnrs > div > ul { list-style-type: none; padding: 0px; width: 90%; margin: 0px 5%; white-space: nowrap; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
        body > div > footer > nav.prtnrs ul li { margin: 0px 1.5%; }
        body > div > footer > nav.prtnrs ul li.ia { width: 10%; }
        body > div > footer > nav.prtnrs ul li.ia a { display: block; }
            body > div > footer > nav.prtnrs ul li a:hover { background-color: transparent; }
        body > div > footer > nav.prtnrs ul li img { max-width: 100%; }

    body > div > footer > section { margin: 0px; padding: 1.5em 0px; background-color: #00acaf; clear: both; float: left; width: 100%; font-weight: 300; }
        body > div > footer > section ul { list-style-type: none; width: 90%; margin: 0px 5%; padding: 0px; text-align: left; }
            body > div > footer > section ul li { float: left; margin-right: 1em; }
                body > div > footer > section ul li:first-child { float: right; margin-right: 0px; }
                body > div > footer > section ul li a { color: #fff; }
                    body > div > footer > section ul li a:hover span { background-color: #00434f; color: #fff; }
                    body > div > footer > section ul li a img { vertical-align: middle; }

        body > div > footer > section > div { width: 75em; margin: 0; padding: 0px; margin: 0px auto; }
            body > div > footer > section > div > div { float: left; padding: 0px; width: 90%; margin: 2em 5% 0 5%; text-align: left; }
        body > div > footer > section h1 { font-size: 0.875em; font-weight: 400; color: #fff; text-transform: none; display: inline-block; }
        body > div > footer > section p { font-size: 0.825em; color: #fff; display: inline-block; margin-left: 2em; }
        body > div > footer > section a { color: #fff; }
            body > div > footer > section a:hover { background-color: #00acaf; }

    body > div > footer > nav.smap { background-color: #00acaf; border-top: solid 10px #231f20; }
        body > div > footer > nav.smap > img { margin-top: -6.1875em; margin-bottom: 2em; }
        body > div > footer > nav.smap > a.btop { display: none; }
        body > div > footer > nav.smap > div { width: 75em; margin: 0px auto; }
            body > div > footer > nav.smap > div > div { width: 90%; margin: 0px 5%; column-count: 6; text-align: left; }
                body > div > footer > nav.smap > div > div div { margin-bottom: 1em; page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; }
                body > div > footer > nav.smap > div > div div ul { list-style-type: none; margin: 0; padding: 0; }
                    body > div > footer > nav.smap > div > div div > span { font-weight: 700; font-size: 0.85em; color: #fff; padding: 0.25em 0.5em; }
                body > div > footer > nav.smap > div > div div a { color: #fff; padding: 0.25em 0.5em; }
                    body > div > footer > nav.smap > div > div div a:hover { color: #fff; background-color: #00434f; }
        body > div > footer > nav.smap li { margin: 0.25em 0; font-size: 0.75em;  }
        body > div > footer > nav.smap > div > div div ul li a { color: #fff; white-space: nowrap; }

/*  Content 
--------------------------  */

/* Partners */
ul.partners { margin: 0px; padding: 0px; list-style-type: none; }
    ul.partners li { margin-bottom: 3em; }

/*  Responsive 
--------------------------  */

/*  1220px  */
@media screen and (max-width: 1220px) {
    /* Full widths */
    body > div > header { background-color: #fff; float: left; }
        body > div > header, body > div > header > nav, body > div > header nav.mn > div, body > div > header section.s > div, body > div > main > div, body > div > footer > nav.smap > div, body > div > footer > nav.prtnrs > div, body > div > footer > section > div { width: 100%; min-width: 20em; }
}

/*  1200px  */
@media screen and (max-width: 1215px) {

    /* Main links */
    body > div > header nav.mn > div > ul > li > a { padding: 1em 0.85em 1.25em 0.85em; white-space: nowrap; }
    /* Footer Partners
    body > div > footer > nav.prtnrs ul li { display: block; float: left; }
        body > div > footer > nav.prtnrs ul li.a { width: 10.93%; }
        body > div > footer > nav.prtnrs ul li.e { width: 14.54%; }
        body > div > footer > nav.prtnrs ul li.g { width: 5.37%; }
        body > div > footer > nav.prtnrs ul li.ia { width: 5.83%; }
        body > div > footer > nav.prtnrs ul li.if { width: 13.7%; }
        body > div > footer > nav.prtnrs ul li.ol { width: 10.56%; }
        body > div > footer > nav.prtnrs ul li.op { width: 5.93%; }
        body > div > footer > nav.prtnrs ul li.u { width: 6.48%; }
        body > div > footer > nav.prtnrs ul li img { max-width: 100%; } */
}

/*  1080px  */
@media screen and (max-width: 1080px) {

    /* Main links */
    body > div > header nav.mn ul:first-child li { font-size: 0.9em; }
        body > div > header nav.mn ul:first-child li li { font-size: 1em; }

    body > div > footer > nav.smap > div > div { column-count: 5; }
}

@media screen and (max-width: 1040px) {
    body > div > footer > nav.prtnrs ul li.ia { width: 12%; }
}

/*  980px  */
@media screen and (max-width: 980px) {

    /* Main links */
    body > div > header nav.mn ul:first-child li { font-size: 0.85em; }

    body > div > footer > nav.smap > div > div { column-count: 4; }
}

/*  940px  */
@media screen and (max-width: 940px) {

    /* Main links */
    body > div > header nav.mn > div > ul > li:first-child { display: none; }
    body > div > header nav.mn.sn > div > ul > li:first-child { display: block; }
    body > div > header nav.mn.sn div > ul { margin-left: 10%; width: 85%; }
}

/*  925px  */
@media screen and (max-width: 925px) {

    /* Main links */
    body > div > header nav.mn > div > ul > li > a { padding: 1em 0.75em 1.25em 0.75em; }

    /* Main Content */
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.25em; }
    h3 { font-size: 1.25em; }
    body > div > main p, body > div > main li, body > div > main time, body > div > main td, body > div > main label, body > div > main input, body > div > main select, body > div > main textarea { font-size: 1.15em; }

    body > div > main header h1 { font-size: 2em; }
    body > div > main header h2 { font-size: 1.35em; }
    body > div > main nav.rd h1 { font-size: 1.5em; }
}

@media screen and (max-width: 890px) {
    body > div > footer > nav.prtnrs ul li.ia { width: 15%; }
}

/*  850px  */
@media screen and (max-width: 850px) {

    /* Main links */
    body > div > header nav.mn.sn div > ul { margin-left: 7.5%; width: 87.5%; }
    /* Outer Margins */
    body > div > header nav.spotlight > div, body > div > header nav.mn > div > ul, body > div > header section.s form, body > div > main > div > div, body > div > footer > nav > div > ul, body > div > footer > section ul, body > div > footer > section > div > div { width: 95%; margin: 0; padding: 1.5% 2.5%; }
    body > div > main > div > div { padding-top: 2em; padding-bottom: 2em; }
    body > div > header nav.mn > div > ul { padding: 0; }
    /* Search section */
    body > div > header section.s form { padding: 2% 0px; margin: 0px 2.5%; }
}

/*  825px  */
@media screen and (max-width: 825px) {
    body { background-color: #00434F; }
        body > div { background-color: #fff; min-width: 20em; position: relative; z-index: 1; }

    /* Main Content */
    h1 { font-size: 1.35em; }
    h2 { font-size: 1.15em; }
    h3, h4, h5, h6 { font-size: 1.15em; }
    body > div > main p, body > div > main li, body > div > main time, body > div > main td, body > div > main label, body > div > main input, body > div > main select, body > div > main textarea { font-size: 1em; }

    body > div > main header h1 { font-size: 1.75em; }
    body > div > main header h2 { font-size: 1.25em; }
    body > div > main nav.rd h1 { font-size: 1.35em; }

    /* Footnotes */
    body > div > main p.footnote { font-size: 0.75em }
}

/*  780px  */
@media screen and (max-width: 780px) {
    /* Show Navicon */
    body > div > header nav.spotlight > div > div > a.n { display: block; }
    body > div > header nav.spotlight ul { top: 130%; margin-top: 0px; }
    /* 
        Main Nav Mobile
    */
    body.show   { overflow-x: hidden; }
    body.show nav#mobnav    { display: block; }
    nav#mobnav { position: absolute; top: 5.5em; left: 100%; width: 100%; z-index: 99; background-color: #00434f; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
        nav#mobnav.show { left: 0; display: block; }
    ul#mainnav { list-style-type: none; padding: 1em 0px; margin: 0px; text-align: left; width: 100%; }
        ul#mainnav li { font-size: 1em; }
            ul#mainnav li li { font-size: 1em; }
       ul#mainnav > li a { font-size: 1em; color: #fff; }
        ul#mainnav > li > a { display: block; width: 90%; padding: 2.5% 5%; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
       ul#mainnav > li a[href="javascript:;"]:hover { background-color: transparent; cursor: default; }
       ul#mainnav > li.s > a { background: transparent url(/_resources/files/template/v.png) no-repeat 95% center; }
       ul#mainnav > li a:not([href="javascript:;"]):hover, body > ul#mainnav > li.s a:not([href="javascript:;"]):hover { background-color: #00acaf; }

        ul#mainnav ul { list-style-type: none; width: 100%; margin: 0px; padding: 0px; }
        ul#mainnav li { overflow: hidden; }
            ul#mainnav li > ul { visibility: hidden; max-height: 0px; transition: all .2s ease-in-out; }
            ul#mainnav li.o > ul, body > ul#mainnav li.f > ul { visibility: visible; max-height: 50em; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
        ul#mainnav > li ul > li > a { display: block; padding: 2.5% 5% 2.5% 7.5%; }
        ul#mainnav > li > ul > li > a[href="javascript:;"] { background: transparent url(/_resources/files/template/v.png) no-repeat 95% center; }
        ul#mainnav > li ul > li ul > li > a { padding: 2.5% 5% 2.5% 10%; }
        /* Oil, Gas, Forum */
        ul#mainnav > li#oil > a { background-color: transparent; color: #009fe3; }
            ul#mainnav > li#oil > a:hover { background-color: #009fe3; color: #fff; }
        ul#mainnav > li#gas > a { background-color: transparent; color: #b2c400; }
            ul#mainnav > li#gas > a:hover { background-color: #b2c400; color: #fff; }
        ul#mainnav > li#forum > a { background-color: transparent; color: #f07e26; }
            ul#mainnav > li#forum > a:hover { background-color: #f07e26; color: #fff; }

    nav#mobnav article { text-align: left; margin: 0 5% 2em 5%; background-color: #f1f1f2; float: left; width: 90%; }
        nav#mobnav article h1 { float: left; width: 100%; background-color: #fff; }
        nav#mobnav article a { display: block; float: left; width: 100%; color: #1d1d1b; padding: 0.5em 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
            nav#mobnav article a:hover, nav#mobnav article:hover a { background-color: transparent; color: #00acaf; }
        nav#mobnav article h1 img { float: left; max-width: 100%; }
            nav#mobnav article div p { margin: 0; font-weight: 700; font-size: 1.25em; line-height: 1.2em; min-height: 5em; }

    /* Hide forum button */
    body > div > header nav.spotlight > div > div > a[href="/forum"] { display: none; }


    /* Main Links */
    body > div > header nav.mn > div > ul { display: none; }
    body > div > header nav.mn.sn { display: none; }

    body > div > header nav.mn > div > ul.show { display: block; border: solid 1px #fff; position: absolute; top: 5.3em; margin-top: 0px; right: 0px; background-color: #00acaf; width: 50%; z-index: 99; }
        body > div > header nav.mn > div > ul.show li { width: 100%; border-bottom: solid 1px #fff; }
    body > div > header nav.mn > div > ul > li:first-child { display: block; }
    body > div > header nav.mn > div > ul.show li:last-child { border-bottom: 0px; }
    body > div > header nav.mn > div > ul.show li a { display: block; width: 95%; padding: 2.5%; }
    body > div > header nav.mn > div > ul.show > li.s > a { background-position: 95% center; }

    body > div > header nav.mn > div > ul > li > ul { visibility: visible; display: none; margin: 0px; padding: 0px; width: 100%; float: left; position: static; top: 0px; background: #fff; }
    body > div > header nav.mn > div > ul > li.o > ul { display: block; }
    body > div > header nav.mn > div > ul.show > li > ul li a { float: none; padding-left: 5%; width: 92.5%; }
    body > div > header nav.mn > div > ul.show > li > ul li { border-bottom: 0px; }

    /* Sub links */
    body > div > header nav.mn > div > ul > li.m > ul > li { width: 100%; }
    body > div > header nav.mn > div > ul > li > ul > li a[href="javascript:;"] { padding-bottom: 0px; }
}

/*  750px  */
@media screen and (max-width: 750px) {
                 
    /* Hide Spotlight search button */ body > div > header nav.spotlight > div > div > a:first-child { display: none; }
    /* Search */
    body > div > header > section.s { height: auto; margin-top: 0.5em; margin-bottom: 0.5em; background-color: transparent; }

    body > div > header section.s form { padding: 1.5% 0px; }
    body > div > header section.s img.l { top: 1em; left: 70%; }

    body > div > header section.s div.sb { width: 22.5%; background-color: transparent; right: 0px; text-align: right; }
    body > div > header section.s div.sel img { width: 1.25em; }

    body > div > header section.s div.results { margin-top: 2em; padding: 0px; }
    body > div > header section.s img.fc { display: block; position: absolute; top: 3.5em; right: 2.5%; width: 3.25em; margin: 0.65em 0px; cursor: pointer; background-color: #00acaf; }
        body > div > header section.s img.fc.c { display: none; }
    /* Footer */
    body > div > footer > nav.smap > div > div { column-count: 3; }

    body > div > footer > section ul li a span { display: none; }
}

/*  660px  */
@media screen and (max-width: 660px) {
    main > div > div > section:last-child, main > div.bw > section:last-child { margin-bottom: 6em; }
    body > div > footer > nav.prtnrs, body > div > footer > nav.smap > div { display: none; }
    body > div > footer > nav { padding-bottom: 0; text-align: left; }
    body > div > footer > nav > img { margin-left: 2.5%; }
        body > div > footer > nav.smap > a.btop { display: block; float: right; padding: 1.5em; margin-top: -4em; margin-right: 2.5%; background-color: #00acaf; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}

/*  610px  */
@media screen and (max-width: 610px) {
    nav#mobnav { top: 5em; }
    /* Search */
    body > div > header section.s img.fc { top: 3em; width: 2.8em; z-index: 99; }
    /* Related Dcuments */
    body > div > main nav.rd ul li a { padding: 0.65em 0.5em 0.5em 2.375em; }
    /* Footer social */
    body > div > footer > section ul li { width: 11%; margin-right: 2%; }
        body > div > footer > section ul li a img { width: 100%; }
    /* Footer Partners in 2 rows
    body > div > footer > nav ul li       { margin-bottom: 1.5em; }
    body > div > footer > nav ul li.a     { width: 26.3%; }
    body > div > footer > nav ul li.e     { width: 36.15%; }
    body > div > footer > nav ul li.g     { width: 11.15%; }
    body > div > footer > nav ul li.ia    { width: 12.41%; }
    body > div > footer > nav ul li.if    { width: 33.87%; }
    body > div > footer > nav ul li.ol    { width: 25.29%; }
    body > div > footer > nav ul li.op    { width: 12.66%; }
    body > div > footer > nav ul li.u     { width: 14.18%; } */
}

/*  590px  */
@media screen and (max-width: 590px) {
    body > div > header nav.spotlight a.logo { width: 35.5%; }
        body > div > header nav.spotlight a.logo img { width: 100%; }
    body > div > header nav.spotlight > div > div { width: 62.5%; float: right; }
        body > div > header nav.spotlight > div > div > a, body > div > header nav.spotlight div > div div { margin-left: 3.5%; width: 17.75%; }
            body > div > header nav.spotlight > div > div > a:last-child { margin-left: 0px; }
            body > div > header nav.spotlight > div > div > a img, body > div > header nav.spotlight div > div div a img { width: 100%; }
}

/*  515px  */
@media screen and (max-width: 515px) {
    nav#mobnav { top: 4.5em; }
    /* Logo and Spotlight buttons */
    body > div > header nav.spotlight > div > a.logo { width: 30; }
    body > div > header nav.spotlight ul:before { content: none; }
    body > div > header nav.spotlight div > div > div { position: static; }

    /* Grid Menu */
    body > div > header nav.spotlight ul { border: 0px; border-top: solid 5px #00acaf; border-bottom: solid 1px #00acaf; top: 85%; left: -2.5%; right: auto; padding: 2.5% 13%; width: 76.5%; }
    /* Related Dcuments */
    body > div > main nav.rd ul li { float: none; width: 100%; margin-right: 0px; }
}

/*  480px  */
@media screen and (max-width: 480px) {
    nav#mobnav { top: 4.25em; }
    /* Grid Menu */
    body > div > header nav.spotlight ul { padding: 2.5% 8%; width: 86.5%; }
    /* Search */
    body > div > header section.s img.fc { width: 2.625em; }

    /* Footer text */
    body > div > footer > section > div > div { font-size: 0.75em; }
        body > div > footer > section > div > div a, body > div > footer > section > div > div span { white-space: nowrap; }
}

/*  400px  */
@media screen and (max-width: 400px) {
    nav#mobnav { top: 4em; }
    body { font-weight: 200; }
        /* Grid Menu */
        body > div > header nav.spotlight ul { padding: 2.5% 2.5%; width: 97.5%; }
        /* Search */
        body > div > header section.s img.fc { top: 2.25em; width: 2.125em; }
}