/*
	--------------------------
	Data Chart Styles
	--------------------------
*/

/* Chart Form */

div.datacharts  { position: relative; }
div.datacharts > div.options     { float: left; width: 96%; margin: 1em 0px; border: solid 1px #000; padding: 2%; position: relative; }
div.options div { width: 50%; float: left; }
div.options div span    { padding: 2%; font-size: 1em; display: block; float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.options div#archive { width: 28em; }

div.datacharts h2 { clear: both; }

div.options ul  { padding: 0px; margin: 0px 2% 1em 0px; float: left; position: relative; width: 33%; }
div.options ul li  { list-style-type: none; float: left; margin: 0px; font-size: 1em; width: 100%; }
div.options ul li a { color: #fff; text-decoration: none; display: block; padding: 5% 3%; width: 94%; float: left; background: #231f20 url(/_resources/files/template/arrow-white-dropdown.png) no-repeat 90% center; }

div.options ul li ul    { display: none; width: 21em; position: absolute; left: 8.5em; top: 0px; }
div.options div.on ul li ul  { display: block; z-index: 99; }
div.options ul li ul li span { font-family: "pragmatica", helvetica, arial, sans-serif; font-size: 1em; display: block; color: #fff; width: 3em; background: none; float: left; padding: 0.5em; margin: 0px; }
div.options ul li ul li a { width: 94%; padding: 2% 3%; display: block; background: #231f20; }
div.options ul li ul li { background: #231f20; width: 21em; }
div.options ul li ul li a.s, div.options ul li ul li a:hover { background: var(--aqua); }
    div.options ul li ul li.d a { color: #555; }
        div.options ul li ul li.d a:hover { background: transparent; cursor: default; }

div.options div#countries ul li ul { width: 300%; top: 100%; left: 0; z-index: 99; background-color: #231f20; -moz-columns: 3 auto; -webkit-columns: 3 auto; columns: 3 auto; }
div.options div#countries ul li ul li { width: auto; float: none; }
div.options div#countries ul li ul li a { float: none; }

div.options div#daterange ul li ul li { width: 29.75em; color: #fff; }
div.options div#daterange ul li ul li a { width: auto; padding: 0.5em 0.75em; background: none; margin: 0px; }
div.options div#daterange ul li ul li:hover span { color: var(--aqua); }
div.options div#daterange ul li ul li a:hover, div.options div#daterange ul li ul li a.s { background: var(--aqua); }
div.options div#daterange ul li ul li a.disabled  { visibility: hidden; }

div.options div#yearrange ul li ul { background-color: #231f20; -moz-columns: 3 auto; -webkit-columns: 3 auto; columns: 3 auto; }
    div.options div#yearrange ul li ul li { width: auto; float: none; }
        div.options div#yearrange ul li ul li a { padding: 2% 10%; width: 80%; }

div.options a.button    { font-family: georgia, Times New Roman, serif; font-size: 1em; width: 15%; padding: 0.5em; margin-bottom: 1em; display: block; background: #e20031; float: left; color: #fff; text-decoration: none; text-align: center; position: relative; }
div.options a.button.d  { background: #ccc; color: #919191; cursor: default; }

div.options h2  { clear: left; }
div.options div.full   { width: 100%; clear: left; }
div.options div.full label  { float: left; width: 25%; margin-bottom: 0.5em; }
div.options div.full input, div.options div.full textarea  { float: left; width: 40%; margin-bottom: 0.5em; }

div.options div.go      { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #fff; opacity: 0.9; }
div.options div.go img  { left: 50%; position: absolute; top: 50%; margin-top: -0.78125em; margin-left: -0.78125em; }

ul.tabs { float: left; width: 100%; padding: 0px; margin: 0px 0px 0.5em 0px; border-bottom: solid 2px var(--aqua); position: relative; }
ul.tabs li  { float: left; list-style-type: none; margin: 0px 0.25em 0px 0px; position: relative; font-size: 1em; background-color: #dedede; }
ul.tabs li a   { text-transform: capitalize; text-decoration: none; color: #231f20; display: block; padding: 0.75em; }
ul.tabs li a.hidden     { display: none; }
ul.tabs li.current      { background-color: var(--aqua); }
ul.tabs li.current a    { color: #fff; }
ul.tabs li a:hover      { background-color: var(--aqua); color: #fff; }
ul.tabs li input      { background-color: transparent; padding: 0.75em; border: 0px; margin: 0px; }
ul.tabs li.add      { float: right; background-color: #fff; width: 1.75em }
ul.tabs li.add:before   { content: none; }
ul.tabs li.add img  { cursor: pointer; }
ul.tabs li.m a      { padding-right: 1.1em; }
ul.tabs li a.rmv, ul.tabs li.m a.tmv    { position: absolute; top: 2px; right: 2px; padding: 0; font-size: 0.85em; line-height: 1em; text-transform: none; cursor: pointer; }
ul.tabs li a.rmv:hover      { background-color: transparent; color: var(--aqua); }
ul.tabs li.current a.rmv:hover      { color: #83d0f5; }

/* Chart */
div.datacharts > div  { float: left; width: 100%; }

div.datacharts div.wrn  { background-color: #ea0017; padding: 1em; box-sizing: border-box; color: #fff; font-size: 0.85em; text-align: center; }
div.datacharts div.wrn p    { margin-bottom: 0;}
div.datacharts div.wrn a    { color: #fff; text-decoration: underline; }
div.datacharts div.wrn a:hover  { text-decoration: none; background-color: transparent; cursor: pointer; }

div.chart           { margin: 0px 0px 1em 0px; float: left; width: 100%; position: relative; }
div.chart > div     { padding: 4%; border: solid 1px #fff; transition: border .2s linear; }
div.chart h2, div.chart p   { text-align: left; }
div.chart h3        { margin-bottom: 1em; font-size: 1.25em; }
div.chart img.close { position: absolute; top: 0.5em; right: 0.5em; cursor: pointer; }
div.chart a         { position: absolute; bottom: 0.5em; right: 0.5em; cursor: pointer; font-size: 0.8em; padding: 0.25em 0.5em; color: #fff; background-color: var(--aqua); display: block; }
div.chart:hover > div     { border-color: var(--aqua); }
div.chart svg   { width: 100%; height: 450px; }

svg text { fill: #000; font-family: "pragmatica",helvetica,arial,sans-serif; font-size: 0.95em; text-anchor: middle; }
svg .legend text    { text-anchor: start; }
svg .legend rect.range  { fill: var(--aqua); stroke: var(--aqua); }
svg .legend circle.range { fill: var(--aqua); stroke: var(--aqua); }

svg .bar        { fill: #bf8f2f; transition: fill linear .2s; }
svg .bar:hover  { fill: #7d5836; }

svg .circle         { fill: #bf8f2f; transition: all linear .2s; }
svg .circle:hover   { fill: #7d5836; stroke: #7d5836; stroke-width: 2; }
svg path.line       { stroke: #bf8f2f; stroke-width: 2; fill: none; }
svg g.year:hover path { stroke-width: 5; }
svg g.year:hover text { font-size: 1.25em; font-weight: 400; }
svg path.area, svg g.range text       { fill: var(--aqua); }

.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
.x.axis.s2 g:nth-child(2n)    { display: none; }
.x.axis.s3 g    { display: none; }
.x.axis.s3 g:nth-child(3n+1)    { display: block; }
/*.x.axis path    { display: none; }*/

.red            { fill: #ff0000; }
.brightyellow   { fill: #ffc000; }
.grey           { fill: #d9d9d9; }
.oildarkblue    { fill: #061d41; }
.oilblue        { fill: var(--aqua); }
.oillightblue   { fill: #83d0f5; }
.datadarkgreen  { fill: #00434f; }
.datagreen      { fill: #00acaf; }
.datalightgreen { fill: #a3d7d9; }
.gasdarkgreen   { fill: #517516; }
.gasgreen       { fill: var(--gas-light); }
.gaslightgreen  { fill: #dae096; }
.green          { fill: #71bf2f; }
.black          { fill: #1d1d1b; }
.darkred        { fill: #7c2626; }
.mediumred      { fill: #bf332f; }
.darkorange     { fill: #963b20; }
.orange         { fill: #a8541b; }
.forumorange    { fill: #f07e26; }
.darkyellow     { fill: #c5a32f; }
.yellow         { fill: #ddcb53; }
.brown          { fill: #7d5836; }
.lightbrown     { fill: #bf8f2f; }

div#dataHighlights > p:first-child  { margin-top: 0.5em; }
div#dataHighlights > h2   { float: left; padding-left: 2.1%; padding-top: 1em; width: 97.9%; border-top: solid 2px var(--aqua); }

div.samples { position: relative; float: left; width: 100%; }
div.samples div.temp    { width: 42%; float: left; padding: 4%; text-align: center; }
div.datacharts div.chart    { width: 50%; float: left; cursor: pointer; }
div.datacharts svg  { width: 100%; height: 50%; margin: 2em 0px; }

div.datacharts div.chart p  { margin-bottom: 0px; }
div.datacharts div.chart.open p  { margin-bottom: 1em; }
div.datacharts div.chart a { display: none; }
div.datacharts div.chart.open   { cursor: default; }
div.datacharts div.chart.open a { display: block; float: right; background-color: #1d1d1b; color: #fff; font-size: 0.8em; text-decoration: none; padding: 0.5em; position: static; }
div.datacharts div.chart.open a:hover   { background-color: var(--aqua); }
div.datacharts div.chart.open a.export  { float: left; margin-right: 1em; }
div.datacharts div.chart.open a img { float: left; }
div.datacharts div.chart img.close { display: none; position: absolute; top: 2%; right: 2%; cursor: pointer; }
div.datacharts div.chart.open img.close { display: block; width: 1.75em; }
div.datacharts div.chart.open a.del  { margin-right: 1em; }

div.datacharts div.chart.open > div { display: block; width: 200%; height: auto; box-sizing: border-box; background: #fff; z-index: 10; position: absolute; left: 0; top: 0; border-color: var(--aqua); }
div.datacharts div.chart.open h2 span   { display: none; }
div.datacharts div.chart:nth-child(2n+1)  { clear: left; }
div.datacharts div.chart:nth-child(2n) > div    { left: auto; right: 0px; }
div.datacharts div.chart.open svg   { width: 100%; height: 450px; }

/* Help */
span.hb { font-family: "pragmatica", helvetica, arial, sans-serif; font-weight: 300; position: absolute; background: #fed537; color: #000; padding: 1em; text-align: center; filter: alpha(opacity=0); opacity: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; }
span.hb:after       { content: url(/_resources/files/template/arrow-down-yellow.png); position: absolute; left: 50%; margin-left: -1.5625em; bottom: -1.9em; }
span.hb.on          { filter: alpha(opacity=100); opacity: 1; }

span.hb a   { color: #fff; text-decoration: underline; display: inline-block; margin-top: 1em; }
span.hb a:hover   { text-decoration: none; background-color: transparent; }

span.hb.ab:after { bottom: auto; top: -2em; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

span.hb.abc:after { bottom: 40%; top: auto; left: 100%; margin-left: -0.75em; -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }

span.hb.abcd  { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none;  }
span.hb.abcd:after { display: none; }

/*ul.tabs li.add span.hb  { filter: alpha(opacity=0); opacity: 0; }
ul.tabs:hover li.add span.hb { filter: alpha(opacity=100); opacity: 1; }*/

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

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

    /* options */
    div.options div span    { padding: 2%; width: 96%; }
    div.options ul  { width: 98%; margin-bottom: 0; }
    div.options div#countries ul li ul  { width: auto; left: -100%; }
    div.options ul li ul, div#dataexport.options ul li ul    { left: 0; top: 100%; width: 100%; margin-right: 0px; }
    div.options ul li ul li  { width: 100%; }
    div.options div span    { margin-bottom: 1em; }
    div.options a.button    { width: 30%; padding: 2.5%; }

}

/*  550px  */
@media screen and (max-width: 550px) {
    div#dataHighlights > h2   { padding-left: 4%; width: 96%; }
    div.datacharts div.chart  { width: 100%; }
    div.datacharts div.chart:nth-child(2n) > div    { left: 0; right: auto; }
}

/*  500px  */
@media screen and (max-width: 500px) {
    ul.tabs li  { font-size: 0.85em; }
    div.options div.full label  { width: 35%; }
    div.options div.full input, div.options div.full textarea   { width: 60%; }
    div.options div#countries ul li ul  { -moz-columns: 2 auto; -webkit-columns: 2 auto; columns: 2 auto;  }
}