/*  HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* Base */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #3465a4; color: #fff; text-shadow: none; }
::selection { background: #3465a4; color: #fff; text-shadow: none; }

/* Links */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

/* Typography */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* Lists */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* Embedded content */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }

/* Figures */
figure { margin: 0; }

/* Forms */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; } 

/* ==== primary styles ==== */
/* Author: Plus500 */
/* colors:
	dark blue:		#204a87
	medium blue:	#3465a4
	light blue:		#729fcf
	dark green:		#4e9a06
	grey:			#666666
*/
body {font:normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif; background-color:#fff;}
header {color:#fff; background-color:#000;}
h1 {margin:0; padding:.5em 1em .5em 0; font-size:1.125em; float:left; background-color:#204a87;}
#headerIcon {display:inline-block; height:32px; width:32px; background:url(../Images/chartImages.png) no-repeat 0 -192px; margin:0 .25em; vertical-align:-50%;}
header ul {margin:0; padding:0 1em 0 0 ; list-style-type:none; display:block; float:right;}
header ul li {margin:1.125em 0 .5em 0; padding:0 .5em  0 .25em;font-size:.875em; display:block; float:left; font-weight:bold; background:url(../Images/chartImages.png) no-repeat right 0.5em;}
header ul li.last {background:none;padding:0 0 0 .25em}

.row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 60em; *zoom: 1; }
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row .columns { position: relative; padding-left: 0.625em; padding-right: 0.625em; width: 100%; float: left; }
.row .small-6 { position: relative; width: 50%; }
[class*="column"] + [class*="column"]:last-child {float: right; }
.row, .row *, .row:before, .row:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


#searchBox {padding:1px; margin-top:1em; margin-bottom:1em; background-color: #3465A4; border-radius: 3px; box-shadow: 0 1px 2px #808080;}
#searchBox div {padding:.5em; border:1px solid #729fcf; border-radius: 3px;}
#searchBox div div {width:96%; padding:0 2%; margin:0 auto; border:none; border-radius: 3px; background:#fff url(../Images/chartImages.png) no-repeat right -28px; }
#searchBox input {width:87%; border:1px solid #fff; color: #999; font-size: 11px; height: 2em; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; }

#risk-warning {padding:.7em 1em; margin-top:1em; margin-bottom:1em; border:1px solid #eaeff6; color:#000000; background-color:#ffffff; border-radius: 3px; text-align:center;}
#risk-warning strong { font-weight:700; }

#searchBox input.active {color:#000; font-size:12px;}
.ui-autocomplete {position: absolute; cursor: default; background-color:#fff; width:43%; color:#204a87; border:1px solid #204a87;}	
* html .ui-autocomplete {width:1px;} /* without this, the menu expands to 100% in IE6 */
.ui-menu {list-style:none; padding: 2px; margin: 0; display:block; float: left;}
.ui-menu .ui-menu {margin-top: -3px;}
.ui-menu .ui-menu-item {margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%;}
.ui-menu .ui-menu-item a {text-decoration:none; display:block; padding:6px; font-size:12px; zoom:1; white-space:nowrap; overflow:hidden; width:100%; text-overflow: ellipsis;}
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {font-weight: normal; cursor:pointer; color:#729fcf;}
.ui-autocomplete {max-height:15em; overflow-y:auto; overflow-x:hidden; padding-right:20px;}/* IE 6 doesn't support max-height * we use height instead, but this forces the menu to always be this tall */
* html .ui-autocomplete {height: 15em;}

#info, #buySell {width:47%; padding:0 1%;}
#info {float:left;}
#buySell {float:right;}
h2 {font-size:1.6em; padding:0 0 .25em 0; margin:0; border-bottom:0.1em solid #ccc;}

#buySell a, #buySell a strong {display:block; cursor:pointer;}
#buySell a {width:47%; margin:0 1% 3% 1%; padding:1px; background-color: #204a87; text-decoration:none; color:#fff; float:left; text-align:center; font-size:1.2em; border-radius:3px; box-shadow: 0 1px 2px #808080;}
#buySell a.buy:hover {background-color:#4e9a06;}
#buySell a.buy:hover strong {border-color:#8ae234;}
#buySell a.sell:hover {background-color:#a40000;}
#buySell a.sell:hover strong {border-color:#ef2929;}
#buySell a strong {padding:.5em .25em; border:1px solid #4c7ab5; border-radius: 3px;}
#buySell a strong span {font-weight:normal;}
h3 {font-size:1em; font-weight:normal; color:#3465a4; text-align:center; padding:.5em; margin:0;}

#rates {direction:ltr; font-weight:bold;}
#price {font-size:2.25em;}
.change {font-size:.75em;}
.arrow {display:inline-block; height:32px; width:32px; background-image:url(../Images/chartImages.png); background-repeat: no-repeat;}

.green .arrow {background-position:0 -60px;}
.red .arrow {background-position:0 -90px;}
.green .change {color:#4e9a06;}
.red .change {color:#a40000;}

#info p {color:#666666; margin:0; padding:.5em .25em; line-height:1.25em;}
.lt-ie8 #info p {clear:both;}

.viewFullDetails, .viewFullDetails strong {display:block;}
.viewFullDetails, .viewFullDetails:visited {margin:0; padding:1px; background-color: #204a87; text-decoration:none; color:#fff; float:left; cursor:pointer; text-align:center; font-size:.875em; border-radius:3px; box-shadow: 0 1px 2px #808080;}
.viewFullDetails:hover, .viewFullDetails:active {background-color:#729fcf; color:#ffffff;}
.viewFullDetails:hover strong, .viewFullDetails:active strong {border-color:#bcd7f4; color:#ffffff;}
.viewFullDetails strong {padding:.25em .5em; border:1px solid #4c7ab5; border-radius: 3px;}

#chartButtonSet {clear:both; float:right; padding:2.25em 3% 0 0; white-space:nowrap;}
.lt-ie8 #chartButtonSet {float:none !important;}
#chartButtonSet input {background-color:#e5f4ff; border:1px solid #9cc0da; color:#3465a4; float:left; margin:0 2px 0 0; padding:4px; text-align:center; font-size:12px; box-shadow: 0 1px 0 #5186ad;}
#chartButtonSet input:hover {background-color:#729fcf; color:#fff; border-color:#204a87; box-shadow:none;}
#ButtonLine {background:url(../Images/chartImages.png) no-repeat center -292px; width:2em; height:1.625em; width:32px; height:25px;}
#ButtonLine.typeCandle {background-position:center -227px;}

#chartContainer {width:96%; margin:1% 2%; text-align:center;}
#container {direction:ltr;}

footer {font-size:1.6em; border-top:.1em solid #ccc; width:96%; margin:0 2%; padding:.25em 0; position:relative;}
footer p {margin:0;}
#notice {font-size:0.5em; color:#666; text-align:right;width:49%; float:right;  padding:0;}
#copyright {font-size:0.5em; float:left; color:#204a87; width:200px; position:absolute; left:0; top:1em;}
#copyright a {display:inline-block; width:76px; height:23px; background:url(../Images/chartImages.png) no-repeat 0 -165px;}
#affiliateLogo {width:160px; height:40px; text-align:center; width:49%; float:right; margin:.25em 0 0 0;}
#affiliateLogo img {margin:0 auto; max-height:40px;}
#footerInner {float:right; width:70%;}

/* RTL styles */
#lang_he, #lang_ar {direction:rtl;}
#lang_he h1, #lang_ar h1 {padding:.5em 0 .5em 1em; float:right;}
#lang_he header ul, #lang_ar header ul {padding:0 0 0 1em ;float:left;}
#lang_he header ul li, #lang_ar header ul li {padding:0 .25em  0 .5em; float:right; font-weight:bold; background-position:-76px 0.5em;}
#lang_he header ul li.last, #lang_ar header ul li.last {padding:0 .25em 0 0;}
#lang_he #searchBox div div, #lang_ar #searchBox div div {background-position:-48px -28px; }
#lang_he .ui-autocomplete, #lang_ar .ui-autocomplete {width:37%;}
#lang_he .ui-menu, #lang_ar .ui-menu {float: right;}
#lang_he .ui-menu .ui-menu-item, #lang_ar .ui-menu .ui-menu-item {float: right; clear: right;}
#lang_he .ui-autocomplete, #lang_ar .ui-autocomplete {padding-right:20px;}/* IE 6 doesn't support max-height * we use height instead, but this forces the menu to always be this tall */
#lang_he #info, #lang_ar #info {float:right;}
#lang_he #buySell, #lang_ar #buySell {float:left;}
#lang_he #buySell a, #lang_ar #buySell a {float:right;}
#lang_he #rates, #lang_ar #rates {direction:ltr; text-align:right;}
#lang_he #rates span, #lang_ar #rates span {display:block; float:right; direction:ltr; padding:0 0 0 .25em;}
#lang_he #rates .change, #lang_ar #rates .change {padding-top:.25em;}
#lang_he #rates .arrow, #lang_ar #rates .arrow {display:inline-block; float:none;}
#lang_he #viewFullDetails, #lang_ar #viewFullDetails {float:right;}
#lang_he #chartButtonSet, #lang_ar #chartButtonSet {float:left; padding:3.25em 0 0 3%;}
#lang_he #chartButtonSet input, #lang_ar #chartButtonSet input {float:left; margin:0 0 0 2px;}
#lang_he #notice, #lang_ar #notice {text-align:center; float:left;}
#lang_he #copyright, #lang_ar #copyright {float:right; right:0; top:1em;}
#lang_he #affiliateLogo, #lang_ar #affiliateLogo {float:left;}
#lang_he #footerInner, #lang_ar #footerInner {float:left;}

#lang_he .row .columns, #lang_ar .row .columns { float: right; }
#lang_he [class*="column"] + [class*="column"]:last-child, #lang_ar [class*="column"] + [class*="column"]:last-child {float: left; }

/* ==== Media Queries ==== */
@media only screen and (max-width: 50em) {
	body {font-size:.875em}
}

@media only screen and (max-width: 45em) {
	body {font-size:.8em}
	header ul li {margin:1.5em 0 .5em 0;}
}

@media only screen and (max-width: 40em) {
	body {font-size:.75em}
	header ul li {margin:2em 0 .5em 0;}
	#chartButtonSet input { margin:0 1px 0 0; padding:2px; text-align:center; font-size:11px;}
	#ButtonLine {height:20px; background-position:center -327px;}
	#ButtonLine.typeCandle {background-position:center -262px;}
}

@media only screen and (max-width: 35em) {
	body {font-size:1em}
	h1, header ul {float:none !important; clear:both; width:100%; text-align:center;}
	h1 {padding:.5em 0;}
	header ul {padding:0;}
	header ul li {float:none !important; display:inline-block; margin:.5em 0;padding:0 .75em  0 .25em;}
	#risk-warning, #searchBox {width:80%;}
	#info, #buySell {width:96%; padding:.5em 2%; float:none;}
	/*#rates {text-align:center;}*/
	#notice, #copyright, #affiliateLogo {float:none; clear:both;  width:80%; margin:.5em 10% 0 10%; text-align:center; padding:0; position:static;}
	#footerInner {width:100%; float:none;}
	#chartContainer {width:100%; margin:1% 0;}
	#chartButtonSet input {margin:0 2px 0 0; padding:4px !important; text-align:center; font-size:12px;}
	#ButtonLine {height:25px; background-position:center -292px;}
	#ButtonLine.typeCandle {background-position:center -227px;}	
	.row .small-6 { position: relative; width: 100%; }
	#searchBox, #risk-warning { margin-bottom: 0; margin-left:auto; margin-right:auto;}
	#risk-warning { font-size: .75em; padding:.25em; }

}

@media only screen and (max-width: 30em) {
	body {font-size:.875em}
	#risk-warning { font-size: .875em;  }
}

@media only screen and (max-width: 25em) {
	body {font-size:.8em}
	
}

@media only screen and (max-width: 22em) { /* chart minimum size */
	/* Updated to a newwer version of highstock - now capble to display a smaller graph ::: remove this code in a month from 25/06/14 */
	/* #chartButtonSet, #chartContainer {visibility: hidden; height:1px; overflow:hidden; padding:0;}*/
}

@media only screen and (max-width: 20em) {
	body {font-size:.75em}
	h1 {padding:.5em 0;}
	header ul li {padding:.25em; margin:0; background:none;}
	#searchBox input {font-size: 11px;}
	h2 {text-align:center;}
	#buySell a {float:none; width:96%; margin:2%;}
	#buySell a strong {padding:.25em; font-size:.875em;}
	#rates {font-size:.875em; text-align:center;}
	.arrow {height:16px; width:16px;}
	.green .arrow {background-position:0 -128px;}
	.red .arrow {background-position:0 -144px;}
	#info p {text-align:center;}
	#viewFullDetails {float:none; width:80%; margin:.5em 10%;}
	#chartButtonSet	{width:80%; margin:0 auto; float:none; padding:0 !important;}
	#chartButtonSet input {margin:0 1px 0 0; padding:2px; text-align:center; font-size:11px;}
	#ButtonLine {height:20px; background-position:center -327px;}
	#ButtonLine.typeCandle {background-position:center -262px;}
	
}

/* ==== non-semantic helper classes ==== */
.hidden { display: none !important; visibility: hidden; }/* Hide from both screenreaders and browsers */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }/* Hide only visually, but have it available for screenreaders */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */

.invisible { visibility: hidden; } /* Hide visually and from screenreaders, but maintain layout */

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


.sentiment {
    padding: 0 1px;
    margin: 0 2%;
}

.sentiment .meter {
    display: block;
    background: #df5054;
    border-radius: 3px;
    height: 8px;
    margin-bottom: .25rem
}

.sentiment .meter span {
    display: block;
    background: #5acb82;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 8px
}

.sentiment .sentiment-labels {
    text-align: left;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    font-size: 0.8em;
    color: #6e6e6e
}

.sentiment .sentiment-labels .buyers {
    text-align: left;
    width: 50%
}

.sentiment .sentiment-labels .sellers {
    text-align: right;
    width: 50%
}

#buySell{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
}
.delayedData {
    font-size: 0.7em;
    color: #666;
    text-align: left;
    width: 49%;
    padding-left: 22px;
}