/*
	--------------------------
	Main Page Styles
	--------------------------
*/

/*  Structure & Styling
--------------------------  */

/* 
    Main Content 
*/

body > div > main > div > div   { position: relative; margin-top: 3%; margin-bottom: 6em; padding-top: 0px; }
body > div > main div.cntnt { position: relative; clear: both; float: left; width: 100%; }
div#maincontent { font-family: "pragmatica", helvetica, arial, sans-serif; min-height: 45em; margin-right: 23.125em; margin-bottom: 2em; }

div#maincontent img { margin: 1em 0 2em 0; }
div#maincontent img[style*="right"] { margin: 0 0 0 1em; }

/* Banner image */
div.banner          { margin-bottom: 1em; position: relative; }
div.banner>img      { border: solid 1px #00acaf; }
div.cbanner          { margin-bottom: 1em; text-align: center; }

.oil { color: #009fe3; }
.gas { color: var(--gas-light); }

/*  
    Side Bar
*/
aside.spotlight     { width: 20.625em; top: 0px; right: 0px; float: right; position: absolute; }

/* Sub Links */
aside.spotlight nav             { border-bottom: solid 1px #c9cccb; margin-bottom: 1.25em; padding: 0.75em; background-color: #00acaf; }
aside.spotlight nav h1          { font-size: 1em; margin-bottom: 0.5em; color: #fff; text-transform: uppercase; }
aside.spotlight nav ul          { margin: 0px; padding: 0px; list-style-type: none; }
aside.spotlight nav ul li       {font-size: 1em; margin-bottom: 0.5em; }
aside.spotlight nav ul li a     { font-size: 1em; display: block; margin-bottom: 0.25em; padding: 0px; color: #fff; line-height: 1.5em; }
aside.spotlight nav ul li ul    { margin-left: 1em; }
aside.spotlight nav ul li a:hover, aside.spotlight nav ul li.c > a   { background-color: #00434f; color: #fff; }

/* News and Events */
aside.spotlight section h1 { font-weight: 600; margin-bottom: 1em; }
aside.spotlight article { margin-bottom: 1em; border-bottom: solid 1px #00acaf; }
aside.spotlight article:last-child { margin-bottom: 0;  }
    aside.spotlight article a { display: block; color: #a7a9ac; }
    aside.spotlight article h1 { font-size: 1.125em; line-height: 1em; color: #00acaf; margin-bottom: 0; }
        aside.spotlight article h1 a { display: block; padding-bottom: 0.5em; float: left; width: 100%; }
        aside.spotlight article h1 img { max-width: 80%; }
        aside.spotlight article h1 a:hover { background-color: transparent; }
    aside.spotlight article p { font-size: 0.85em; line-height: 1.5em; margin-bottom: 0; clear: both; }
    aside.spotlight section.media article p { max-width: 60%; }
        aside.spotlight article p a { padding-bottom: 0.25em; }
    aside.spotlight article time { font-size: 0.8em; line-height: 1.5em; }
    aside.spotlight article p time  { font-size: 1em; margin-right: 0.5em;}
    aside.spotlight article time a, aside.spotlight section.ltst article p a { padding-bottom: 1em; }
    aside.spotlight article:hover p a, aside.spotlight article:hover time a { background-color: transparent; }

    aside.spotlight article.oil h1 a { color: #009fe3; }
    aside.spotlight article.gas h1 a { color: var(--gas-light); }

/* Resources */
    aside.spotlight section.rsrcs ul { list-style-type: none; margin: 2.25em 0; padding: 0; float: left; width: 100%; }
        aside.spotlight section.rsrcs ul li { display: block; float: left; width: 100%; margin-bottom: 1em; background-color: #00acaf; color: #fff; }
        aside.spotlight section.rsrcs ul li:last-child { margin-bottom: 0; }
            aside.spotlight section.rsrcs ul li.oil { background-color: #009fe3; }
            aside.spotlight section.rsrcs ul li.gas { background-color: var(--gas-light); }
            aside.spotlight section.rsrcs ul li a { color: #fff; display: block; float: left; width: 100%; position: relative; }
                aside.spotlight section.rsrcs ul li a > span { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5em; font-size: 1.75em; font-weight: 400; line-height: 1em; }
                aside.spotlight section.rsrcs ul li img { float: left; }

/* Testimonials */
ol.t { list-style-type: none; margin: 0px; padding: 0px; }
    ol.t li { margin-bottom: 1em; padding-left: 2em; background: transparent url(/_resources/files/template/arrow-right-tg.png) no-repeat top left; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
        ol.t li div { display: none; padding: 1em 0; }
        ol.t li.o { background-image: url(/_resources/files/template/arrow-down-tg.png); }
            ol.t li.o div { display: block; }
        ol.t li a { color: #1d1d1b; }
            ol.t li a:hover { color: #fff; }

/* FAQs */
ul.f { list-style-type: none; margin: 0px; padding: 0px; }
    ul.f > li { margin-bottom: 1em; padding-left: 2em; background: transparent url(/_resources/files/template/arrow-right-tg.png) no-repeat top left; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
    ul.f li div { display: none; padding: 1em 0; }
    ul.f li.o { background-image: url(/_resources/files/template/arrow-down-tg.png); }
        ul.f li.o div { display: block; }
    ul.f li a { color: #1d1d1b; }
        ul.f li a:hover { color: #fff; }

/* Particiapting Economies */
table.economies td      { padding: 0.1em; }
table.economies td b    { color: #fff; background-color: #00acaf; display: block; padding: 0.1em 0.5em; }

/*
	Collapsible Styles
*/
#cpa *.o    { overflow: hidden; }

/* Press and media downloads */
ul.media    { margin: 0px; padding: 0px; list-style-type: none; width: 50%; }
ul.media li {  margin-bottom: 2.5em; }
ul.media li a:hover { background: #fff; }

/* Dialogue message box */
div.dime    { width: 50%; border: solid 2px #00acaf; background-color: #fff; position: absolute; top: 40%; left: 50%; margin-left: -27.5%; padding: 2.5%; z-index: 300; }

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

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

    div#maincontent { margin-right: 35%; }
    aside.spotlight { width: 30%; }

    aside.spotlight section.media article p { max-width: 100%; }
    aside.spotlight section.rsrcs ul li a > span { font-size: 1.25em; }
}

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

    aside.spotlight section h1 { font-size: 1.75em; }

    aside.spotlight article h1  { font-size: 0.95em; }
    aside.spotlight article p   { font-size: 0.9em; }


}

/*  850px  */
@media screen and (max-width: 850px) {
    /* Side Links */
    aside.spotlight { right: 2.5%; }
}

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

    div.smbox   { font-size: 0.85em; }

    div.body    { margin: 0px 5%; width: 90%; }

    div#ocms_cphbody, div.banner    { margin-right: 0px;  }

    aside.spotlight { position: static; width: 100%; float: left; border-top: solid 1px #00acaf; margin-top: 1em; padding-top: 2em; }

    aside.spotlight article        { width: 90%; padding: 5%; float: left; }
    aside.spotlight article img    { max-width: 100%; width: auto; float: left; margin-right: 1em; margin-bottom: 0px; }
   
    aside.spotlight article p a { margin-top: 1em; }

    aside.spotlight section.rsrcs ul li a > span { font-size: 1.75em; }

    div#maincontent { margin-right: 0px; }

    /* Press and media downloads */
    ul.media    { width: 100%; }
}