/*
	--------------------------
	Oil Colours
	--------------------------
*/

/*  Elements */
/*body, body > div > header	{ background-image: url(/_resources/files/template/gradient-oil-small.png); }*/
h1, body > div > main header h1 { color: var(--oil-light); }

/* Sectional Nav */
body > div > header nav.mn.sn { background-color: var(--oil-light); }

body > div > header nav.mn.sn > div > ul > li > a:hover, body > div > header nav.mn > ul > li.s > a:hover { background-color: #061d41; }
body > div > header nav.mn.sn > div > ul > li > ul > li a:not([href="javascript:;"]):hover  { background-color: var(--oil-light); }
body > div > header nav.mn.sn > div > ul > li.o > a   { background-color: #061d41; }
body > div > header nav.mn.sn > div > ul > li.o > ul  { background-color: #061d41; }

/* Main Banner */

div.banner > img { border: 1px solid var(--oil-light); }

/* Sub Nav */

aside.spotlight nav { background-color: var(--oil-light); }
aside.spotlight nav ul li a:hover, aside.spotlight nav ul li.c > a { background-color: #061d41; }

/* Boxes */
aside.spotlight a.sbox          { border-color: var(--oil-light); }
aside.spotlight a.sbox:hover    { background-color: var(--oil-light); }

/* Related Documents */
body > div > main nav.rd ul li a        { background: transparent url(/_resources/files/events/documents-60-oilblue.png) no-repeat 0.15em 0.15em; }
body > div > main nav.rd ul li a:hover  { background-color: var(--oil-light); }

/* FAQs */
ul.f > li         { background-image: url(/_resources/files/template/arrow-right-tg-oilblue.png); }
ul.f > li.o       { background-image: url(/_resources/files/template/arrow-down-tg-oilblue.png); }

/* Particiapting Economies */
table.economies td b   { background-color: var(--oil-light); }

/* Dialogue message box */
div.dime    { border-color: var(--oil-light); }

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

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

}

/*  590px  */
@media screen and (max-width: 590px) {
    body > div > header nav.spotlight a.logo        { width: 56.5%; }
    body > div > header nav.spotlight > div > div   { width: 43.5%; }
    body > div > header nav.spotlight > div > div > a, body > div > header nav.spotlight div > div div   { width: 25.5%; }
}