html { 
	height: 100%;
    background-color: #272626;
}
			
body {
	/*height: 740px;*/
    top: 0px;
    /*width: 1180px;*/
    left: 0px;
    text-align: center;
	margin: 0;
	padding: 0;
	position: absolute;
    overflow: hidden;               
    bottom: 0px;
    right: 0px;
    /*-webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;*/
}

h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
}

#mapContainer {
	position: absolute;
	top: 35px;
	left: 70px;
	bottom: 31px;
	/*width: 1100px;*/
    right: 0px;
    /*height: 600px;*/
    /*-webkit-border-radius: 0 20px 0 0;
    -moz-border-radius: 0 20px 0 0;
    border-radius: 0 20px 0 0;*/
    /*border-bottom: 1px solid white;
    border-left: 1px solid white;*/
}

#wrapper {
    position: absolute;
    top: 0px;
    left:0px;
    bottom: 0px;
    right: 0px;
    /*border: 2px solid white;*/
    /*-webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    behavior: url(Scripts/PIE-1.0.0/PIE.htc);*/
    overflow: hidden;
}

#strikeLabel {
    background: #0888e7; 
    /*background: #FFD58D;*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0888e7', endColorstr='#7ebef3'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#0888e7), to(#7ebef3)); 
    background: -moz-linear-gradient(top,  #0888e7,  #7ebef3);*/ 
    /*-webkit-border-radius: 20px 20px 0 0; 
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;*/
    /*border-bottom: 1px solid dimgray;*/ 
    left: 0px;
    right: 0px;
    height: 35px;
    text-align: left;
    padding-left: 15px;
    /*vertical-align: bottom;*/
    z-index: 100;
    position: relative;
    /*behavior: url(Scripts/PIE-1.0.0/PIE.htc);*/
}

#currencyPairs {
    position: absolute;
    right: 40px;
    /*bottom: 8px;*/
    line-height: 20px;
    font-size: 16px;
    bottom: 4px;
    /*height: 24px;*/
    vertical-align: central;
    color: white;
}

#strikeLabelSpan {
    float: left;
    line-height: 35px;
    height: 35px;
    /*position: absolute;*/
    /*bottom: 6px;*/
    color: white;
    font-weight: 300;
    font-family: Verdana;
    font-size: 20px;
}

#previousGroup {
    float: left;
    /*position: absolute;
    left: 120px;
    right: 410px;*/
    line-height: 35px;
    height: 35px;
    text-align: left;
    vertical-align: central;
    /*bottom: 6px;*/
    color: white;
    font-weight: 300;
    font-family: Verdana;
    font-size: 10px;
    background-color: transparent;
    overflow: hidden;
}

.prevGroup {
    /*width: 50px;*/
    line-height: 35px;
    display: inline-block;
    margin-left: 15px;
    padding-left: 5px;
    padding-right: 5px;
}

.prevGroup:hover {
    background-color: #49affa;
    cursor: pointer;
}

#previousGroup ul {
    list-style: none;
    padding: 0 5px 0 5px;
    text-align: left;
}

#previousGroup li{
    display: inline;
    padding: 0 10px 0 10px;
}

#userInput {
    /*width: 120px;*/
    position: relative;
    font-family: Verdana;
    /*top: 3px;*/
    /*bottom: 6px;*/
    right: 10px;
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    line-height: 20px;
    height: 20px;
    bottom: 2px;
    font-size: 15px;
    vertical-align: middle;
    /*behavior: url(Scripts/PIE-1.0.0/PIE.htc);*/
    /*display: none;*/
    padding-left: 3px;
    border: none;
}

#selectDataSource {
    position: absolute;
    bottom: 3px;
    line-height: 20px;
    height: 20px;
    right: 180px;
    width: 130px;
    text-align: center;
    color: white;
    font-family: Verdana;
    font-size: 14px;
    background-color: #525252;
    display: none;
}

#selectDSText:hover {
    cursor: pointer;
}

#settingsImg {
    cursor: pointer;
}

#dataSources {
    background-color: #525252;
    display: none;
    font-size: 13px;
}

#closeDSBtn {
    float: right;
    margin: 0 5px 7px 0;
}

#applyDataSources {
    float: left;
    margin: 0 0 7px 5px;
}

#settings {
    right: 2px;
    position: absolute;
    /*bottom: 3px;*/
    z-index: 10000;
    font-family: Verdana;
}

.handle {
    position: relative;
    top: 0px;
    right: 0px;
    line-height: 20px;
}

#configImg {
    /*top: 1px;*/
    height: 35px;
}

#settingsMenu {
    /*width: 140px;*/
    background-color: #525252;
    color: white;
}

#graphAreaConfig {
    position: absolute;
    width: 120px;
    top: 0px;
    right: 215px;
    font-size: 13px;
    font-family: Verdana; 
    background-color: #525252;
}

#refSource {
    position: absolute;
    width: 205px;
    top: 0px;
    right: 215px;
    font-size: 13px;
    font-family: Verdana; 
    background-color: #525252;
}

.drawer {
    color: white;
    font-size: 13px;
    font-family: Verdana; 
}

.drawerItem {
    line-height: 20px;
    /*margin-right: 5px;*/
    padding-left: 5px;
}

ul {
    padding: 0px 2px 0px 2px;
}

li {
    font-size: 12px;
}

.drawerItem:hover {
    background-color: #787878;
    cursor: pointer;
}

#infoBox {
    /*border:1px solid #bab9b9;*/
    margin-bottom: 10px;
    background: #dbd9d9;
    color: white;
    font-family: Verdana;
    font-size: 12px;
    /*padding: 7px 10px;*/
    min-width: 120px;
}

#infoBoxContent {
    /*width: calc(100% - 15px);*/
    padding: 10px 25px 10px 10px;
    color: #525252;
    height: 100%;
    max-height: 300px;
    text-align: left;
}

#infoBoxTriangle {
    position: absolute;
    bottom: 0px;
    left: 52px;
    width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	
	border-top: 10px solid #dbd9d9;
}

.infoWindowLeft {
    float: left;
    width: 250px;
    border-right: 1px solid #8d8b8b;
}

.infoWindowLeftNoRight {
    float: left;
    width: 250px;
    /*border-right: 1px solid #8d8b8b;*/
}

.infoWindowRight {
    float: left;
    width: 270px;
    border-left: 1px solid #8d8b8b;
    padding-left: 5px;
    margin-left: -1px;
}

.infoWindowButtons {
    float: right;
    width: 100%;
}

.iwMainHeader {
    width: 100%; 
    font-weight: bold; 
    float: left;
}

.iwSummaryTable {
    width: 100%; 
    float: left;
}

.iwButton {
    float: right;
    background-color: #787878;
    padding-left: 5px;
    padding-right: 5px;
    height: 20px;
    line-height: 20px;
    font-family: Verdana;
    font-size: 12px;
    color: white;
    font-weight: 300;
    margin-left: 15px;
}

.iwButton:hover {
    cursor: pointer;
}

.iwAlignRight {
    text-align: right;
}

.iwGreen {
    color: #29a53f;
}

.iwRed {
    color: #d42121;
}

.iwBlack {
    color: black;
}

.iwBold {
    font-weight: bold;
}

.cursorLine {
    /*background-color: lightgray;*/
    opacity: 0.5;
    /*position: absolute;*/
    /*pointer-events: none;*/
    /*z-index: 1;*/
    fill: lightgray;
}

/*#hCursor {
    left: 70px;
    right: 0px;
    height: 1px;
    width: 100%;
}

#vCursor {
    top: 35px;
    bottom: 30px;
    width: 1px;
    height: 100%;
}*/

input[type="checkbox"] {
    vertical-align: middle;
}

input[type="radio"] {
    vertical-align: middle;
    margin: 0px 0px 1px 3px;
}

input[type="button"] {
    font-size: 9px;
    background-color: #0888e7; 
    color: white;
    height: 18px; 
    vertical-align: middle;
    font-family: Verdana;
    width: 40px;
    border: none;
}

#closeBtn {
    float: right;
    margin: 0 5px 7px 0;
}

#applyGraphArea {
    float: left;
    margin: 0 0 7px 5px;
}

#closeBtnGraph {
    float: right;
    margin: 0 5px 7px 0;
}

#applyAxis {
    float: left;
    margin: 0 0 7px 5px;
}

/*#closeRSBtn {
    float: right;
    margin: 0 5px 7px 0;
}

#applyRefSource {
    float: left;
    margin: 0 0 7px 5px;
}*/

.closeBtn {
    float: right;
    margin: 0 5px 7px 0;
}

.applyBtn {
    float: left;
    margin: 0 0 7px 5px;
}

input[type="button"]:hover {
    /*background-color: silver;*/
    border: 1px solid black;
    cursor: pointer;
}

li.drawerBtn {
    
}

#axisConfig {
    font-size: 13px;
    font-family: Verdana; 
    background-color: #525252;
}

label.lilabel {
    width: 100%;
    display: inline-block;
    /*margin-left: 10px;*/
    text-align: left;
    padding-right: 5px;
}

label.lilabel:hover {
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0 5px 0 5px;
}

#sourceImages {
    position: absolute;
    background-color: #525252;
    z-index: 10000;
    right: 355px;
    padding: 5px;
    text-align: center;
}

#dataSourceReady {
    font-size: 18px; 
    font-family: Verdana; 
    color: darkblue; 
    background-color: transparent; 
    line-height: 30px;
    display: block;
}

#yAxisContainer {
	position: absolute;
	background-color: #272626;
	/*border-right: 1px solid white;*/
	left: 0px;
    top: 35px;
    bottom: 30px;
	width: 70px;		
    z-index: 1;
	overflow: hidden;
    /*-webkit-border-radius: 20px 0 0 0;
    -moz-border-radius: 20px 0 0 0;
    border-radius: 20px 0 0 0;
    behavior: url(Scripts/PIE-1.0.0/PIE.htc);*/
}

/*#yAxis {
	position: relative;
	background-color: #272626;
	left: 0px; 
    width: 100%;
	z-index: -1;
}*/

#yAxisDrag {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 100;
}
	
#yAxis {
	position: relative;
	background-color: #272626;
	left: 0px; 
    width: 100%;
	z-index: -1;
    height: 100%;
}		

#yAxisInner {
    position: absolute;
	/*top: 35px;
	left: 0px;
	bottom: 61px;
    width: 80px;*/
    width: 100%;
    z-index: 1000;
	border: 0px;
    bottom: 0px;
    /*height: 100%;*/
    pointer-events: none;
    color: white;
}

.yAxisCell {
    line-height: 22px;
    height: 22px;
    width: 100%;
    font-size: 12px;
	font-family: "Verdana";
	color: white;
    text-align: right;
    vertical-align: central;
}

#yAxisTable {
	position:  absolute;
    background-color: #272626;
	width: 100%;
	border: 0px;
    bottom: 0px;
}
			
#yAxisTable tr {
	width: 100%;
    height: 23px;
    box-sizing: border-box;
}
			
#yAxisTable td {
	font-size: 12px;
	font-family: "Verdana";
	color: white;
	width: 50px;
	/*border-bottom: 1px solid white;*/
    text-align: right;
    vertical-align: central;
    box-sizing: border-box;
    line-height: 18px;
    padding-bottom: 3px;
}			

#xAxisContainer {
	position: absolute;
	background-color: #272626;
	left: 70px;
    right: 0px;
	z-index: 1;
	bottom: -30px;
    height: 60px;
	overflow: hidden;
}

#xAxisDrag {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 100;
}

#xAxis {
	position: relative;
	background-color: #272626;
	left: 0px;
	bottom: 0px; 
	height: 100%;
	z-index: -1;
}

#xAxisInner {
    position: absolute;
    height: 100%;
    z-index: 1000;
	border: 0px;
    left: 0px;
    /*pointer-events: none;*/
    color: white;
}
		
.xAxisCell {
    line-height: 55px;
    height: 55px;
    /*width: 80px;*/
    /*font-size: 12px;*/
	font-family: "Verdana";
	color: white;
    text-align: center;
    vertical-align: top;
    /*background-color: rgba(250,250,250,0.2);*/
}

.xAxisCellHover {
    background-color: rgba(250,250,250,0.15);
}

.xAxisCellUpper {
    height: 9px;
    line-height: 9px;
    box-sizing: border-box;
    vertical-align: top;
    font-size: 8px;
    font-weight: 300;
    color: white;
    text-align: center;
    /*margin-top: -2px;*/
}

.xAxisCellMiddle {
    height: 16px;
    line-height: 16px;
    box-sizing: border-box;
    vertical-align: top;
    font-size: 13px;
    font-weight: 300;
    color: white;
    text-align: center;
    position: absolute;
    top: 9px;
    left: 0px;
    right: 0px;
}

.xAxisCellBottom {
    height: 20px;
    line-height: 16px;
    /*box-sizing: border-box;*/
    vertical-align: top;
    /*font-size: 13px;*/
    font-weight: 300;
    color: white;
    text-align: center;
    position: absolute;
    top: 25px;
    left: 0px;
    right: 0px;
    /*bottom: 0px;*/
}

.bottomCellContent {
    line-height: 20px;
}

#vols {
    /*height: 50px;*/
    /*line-height: 60px;*/
    /*box-sizing: border-box;*/
    vertical-align: central;
    font-size: 11px;
    font-family: "Verdana";
    font-weight: 300;
    color: white;
    text-align: left;
    position: absolute;
    /*bottom: 65px;*/
    /*width: 130px;*/
    z-index: 10;
    background-color: #525252;
    padding: 5px;
    /*padding-bottom: 5px;*/
}
	
#xAxisTable {
	background-color: #272626;
    position: relative;
	border: 0px;
	height: 100%;
    left: 0px;
    width: auto;
    table-layout: fixed;
}			

#xAxisMiddleRow {
    height: 16px;
    box-sizing: border-box;
    font-size: 14px;
    color: white;
    text-align: center;
}

#xAxisUpperRow {
    height: 6px;
    line-height: 6px;
    box-sizing: border-box;
    vertical-align: top;
    font-size: 8px;
    font-weight: 300;
    color: white;
    text-align: center;
    margin-top: -2px;
}

#xAxisLowerRowBid {
    height: 14px;
    font-size: 12px;
}

#xAxisLowerRowOffer {
    height: 14px;
    font-size: 12px;
}

.bidValue {
    text-align: center;
    color: lightblue;
    /*padding-right: 2px;*/
}

.offerValue {
    text-align: center;
    color: white;
    /*padding-left: 2px;*/
}

#cut {
    position: absolute;
    background-color: #525252;
    left: 50px;
    width: 20px;
    padding-left: 5px;
    padding-right: 5px;
	z-index: 10;
	bottom: 5px;
    height: 20px;
    line-height: 20px;
    font-family: Verdana;
    font-size: 12px;
    color: white;
    font-weight: 600;
    display: none;
}

#cut:hover {
    cursor: pointer;
}

#cutList {
    position: absolute;
    background-color: #525252;
    font-family: Verdana;
    font-size: 12px;
    color: white;
    left: 50px;
    /*width: 100px;*/
	z-index: 10;
	bottom: 45px;
    /*height: 100px;*/
}

#bidOfferText {
	position: absolute;
	background-color: #272626;
    left: 20px;
    width: 60px;
	z-index: 10;
	bottom: 2px;
    height: 29px;
    /*-webkit-border-radius: 0 0 0 20px;
    -moz-border-radius: 0 0 0 20px;
    border-radius: 0 0 0 20px;
    behavior: url(Scripts/PIE-1.0.0/PIE.htc);*/
}

#bidText {
    text-align: left;
    color: lightblue;
    line-height: 15px;
    font-size: 12px;
	font-family: "Verdana";
    padding-left: 10px;
}

#offerText {
    text-align: left;
    color: white;
    line-height: 15px;
    font-size: 12px;
	font-family: "Verdana";
    padding-left: 10px;
}

#xAxisTable td {
	/*font-size: 12px;*/
	font-family: "Verdana";
	/*color: white;*/
	/*height: 100%;*/
    /*width: 6.6666667%;*/
    box-sizing: border-box;
    /*border-left: 1px solid white;*/
    /*text-align: center;*/
    padding: 0px;
}

table {
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
}

 #login {
    margin-top: 20px;
    margin-left: 20px;
    z-index: 100000;
    color: white;
    font-family: Verdana;
    font-size: 14px;
    text-align: right;
}

#logout {
    position: absolute;
    top: 10px;
    right: 10px;
}

#register {
    margin-top: 20px;
    margin-left: 20px;
    z-index: 100000;
    color: white;
    font-family: Verdana;
    font-size: 14px;
    text-align: right;
}

/*.resetTable table {
    width: 100%;
}*/

.resetTable {
    margin-top: 20px;
    margin-left: 20px;
    z-index: 100000;
    color: white;
    font-family: Verdana;
    font-size: 14px !important;
    text-align: right;
}

a.link {
    color: #0888e7;
}

.txtBox {
    width: 95%;
    height: 20px;
    padding-left: 5px;
    font-size: 14px;
    vertical-align: middle;
}

#register tr {
    line-height: 30px;
}

#login tr {
    line-height: 30px;
}

.resetTable tr {
    line-height: 30px;
}

.tableHeader {
    font-size: 30px;
    font-weight: 600;
    text-align: left;
    padding-left: 10px;
    font-family: 'Segoe UI';
}

.tableMessage {
    line-height: 20px;
    font-size: 14px;
    word-wrap: break-word;
    color: red;
}

.tableMessage li {
    font-size: 14px;
}

.validationMessage {
    text-align: left;
    padding-left: 10px;
    float: left;
}

.tableText {
    line-height: 20px;
    text-align: left;
    padding-left: 10px;
    max-width: 500px;
    word-wrap: break-word;
}

#recaptcha_image {
    display: block;
    padding-top: 4px;
    padding-bottom: 2px;
    width: 200px;
}

/*#captchaInputDiv {
    display: inline;
    right: 0px;
    text-align: left;
}*/

/*input#recaptcha_response_field.txtBox  {
    width: 200px;
}*/

#recaptcha_widget {
    line-height: 20px;
    float: right;
}

#captchaRefs {
    line-height: 20px;
}


/*#txtUsername {
    width: 95%;
}

#txtPassword {
    width: 95%;
}*/
   
  /*the desired background for the map*/
#mapContainer{background-color: black !important;}

  /*hides the tiles (and maybe more^^)*/
/*#mapContainer div  {visibility:visible;}*/

#stateMessage {
    position: absolute;
    margin: 0 auto;
    left: 45%;
    top: 40%;
    /*right: 50%;*/
    /*right: 20px;
    bottom: 100px;*/
    width: 200px;
    background-color: #525252;
    color: white;
    font-family: Verdana;
    font-size: 15px;
    padding: 5px;
}

#infoMessage {
    position: absolute;
    margin: 0 auto;
    right: 20px;
    bottom: 130px;
    /*right: 50%;*/
    /*right: 20px;
    bottom: 100px;*/
    width: 200px;
    background-color: #525252;
    color: white;
    font-family: Verdana;
    font-size: 15px;
    padding: 5px;
    text-align: left;
}

.sliders {
    position: absolute; 
    right: 20px; 
    width: 200px; 
    height: 40px; 
    z-index: 10000; 
    display: none;
}

#notionalSlider {
    bottom: 40px; 
}

#ageSlider {
    bottom: 80px; 
}

.sliderLabel {
    float:left; 
    margin-top: 5px; 
    color: white; 
    font-size: 12px; 
    font-family: Verdana;
}