HTML {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}
BODY {
	width: 100%; height: 100%; margin: 0; padding: 0;
	font-family: Verdana, Arial, Helvetica;
	font-size: 12px;
}

/* ***************************************************************************************************
PAGE AND CHART CONTAINERS
*/

#PageContainer {
	width: calc(100% - 2px); 
	max-width: 500px;
	height: calc(100% - 2px); 
	margin: 0 auto; 
	padding: 0; 
	border: solid 1px #808080;
}

#PriceContainer {
	width: calc(100% - 10px); height: calc(100% - 40px); border: 0; padding: 0;
}

BODY.NoToolbar #PriceContainer {
	height: 100%;
}




/* ***************************************************************************************************
GENERAL TOOLBAR DEFINITIONS
*/

#Toolbar {
	background: #3AA5C9;
	padding: 5px 0 0 5px;
	height: 30px;
	overflow: hidden;
}

#Toolbar DIV {
	display: inline-block;
}

#Toolbar #Logo {float: right; padding: 3px 10px 0 0;}
#Logo IMG {width: 75px; height: 18px;}

BODY.NoToolbar #Toolbar {
	display: none;
}

#cmbBroker {
	border-radius: 3px;
	border: solid 1px #808080;
	padding: 2px;
	font-size: 12px;
	max-width: calc(100% - 150px);
}

/* ***************************************************************************************************
 PRICES
*/

.SymbolRow {width: 100%; margin: 2px 0 2px 0;}

.Caption {width: 40%; display: inline-block; }
.Price {text-align: right; width: 30%; display: inline-block;}

.PriceRise {background: #69B30E; color: white;}
.PriceFall {background: #B42822; color: white;}

.CaptionInner {
	padding: 3px 0px 3px 10px;
}	

.PriceInner {
	display: inline-block;
	border-radius: 3px;
	padding: 3px;
}

.Price1 {font-size: 90%;}
.Price2 {font-size: 120%; padding-left: 1px; padding-right: 1px;}
.Price3 {font-size: 80%; position: relative; top: -2px;}


/* ***************************************************************************************************
 LOADING ANIMATION
*/

#loader {
  color: #3AA5C9;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
  position: fixed;
  z-index: 100;
  left: calc(50% - 36px);
  top: calc(50% - 86px);
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

/* ***************************************************************************************************
THEMES
*/
BODY.ThemeBlack #PageContainer {
	background: black;
	color: white;
}