// Commercial Home Page 

.web-height{
	height: 10px;
	background-color: #525659;
}
.page-one{
	.white-space{
		height: 26px;
		background-color: $white;
	}
	&.web{
		box-shadow: 0px -3px 10px -1px $black;
	}
	.dark-blue-area{
		padding: 20px 0 5px;
	}
	.footer-outer{
		padding-bottom: 1px;
	}
}

.white-area{
	background-color: $white;
		&.side-bg{
			background-image: url("img/data-page-bg.jpg");
			background-repeat: repeat-y;
		}
		&.h100{
			height: 100px;
		}
		&.p20{
			padding: 30px 0 25px;
		}
}
.green-area{
	background-color: $green;
		&.p20{
			padding: 10px 0 0;
		}
}
.data-area{
	padding: 5px 0 10px;
		.data-heading{
			@include text-style($blue, 11pt, 400, $oswald);
			width: 145px;
			text-align: right;
			padding-top: 13px;
		}
		.graph-area{
			margin: 22px 0 1px;
				.data-left-outer{
					width: 160px;
					float: left;
					margin-top: -15px;
				}
				.data-left{
					width: 160px;
					float: left;
					border-right: 1px solid $blue;
					text-align: right;
					padding: 0 15px 10px 0;
						&.mt30{
							margin-top: 20px;
							padding: 10px 15px 20px 0;
						}
						&.mt-15{
							margin-top: -15px;
						}
						h1{
							@include text-style($blue, 30pt, 600, $oswald);
							line-height: 50px;
						}
						h3{
							@include text-style($green, 14pt, 600, $oswald);
							line-height: 22px;
						}
						h5{
							@include text-style($green, 8pt, 400, $oswald);
							line-height: 14px;
							margin-top: 5px;
						}
				}
				.spacer{
					height: 60px;
					float: left
				}
				.data-right{
					width: 525px;
					float: right;
						.graph-info{
							width: 145px;
							float: left;
								&.full-view{
									width: 100%;
										h1{
											margin: 0 0 0 0;
										}
										.legend-list{
											margin: 6px 0 10px 10px;
												ul{
													li{
														float: left;
														margin-right: 10px;
													}
												}
										}
										svg{
											tspan{
												@include text-style($black, 9pt, 400, $roboto);
											}
										}
								}
								h1{
									@include text-style($green, 15pt, 400, $oswald);
									line-height: 22px;
									margin: 0 0 5px 0;
										&.mb15{
											margin-bottom: 15px;
										}
								}
								h4{
									@include text-style($green, 10pt, 400, $oswald);
									margin: 0 0 10px 0;
								}
								.legend-list{
									margin: 0 0 10px 0;
										ul{
											li{
												list-style: none;
												@include text-style($black, 10pt, 400, $roboto);
												line-height: 13px;
												margin: 4px 0;
													&:nth-of-type(1){
														span{
															background-color: $blue;
														}
													}
													&:nth-of-type(2){
														span{
															background-color: $red;
														}
													}
													&:nth-of-type(3){
														span{
															background-color: $gray;
														}
													}
													&:nth-of-type(4){
														span{
															background-color: $green;
														}
													}
													span{
														width: 10px;
														height: 10px;
														display: inline-block;
														position: relative;
														top: 1px;
														margin: 0 0 0 0;
													}
											}
										}
								}
								.note{
									@include text-style($black, 8pt, 400, $roboto);
									font-style: italic;
									padding-top: 5px;
								}
						}
						.graph{
							float: right;
								&.full-view{
									width: 100%;
										table{
											tbody{
												tr{
													&:nth-of-type(1){
														td{
															&:nth-of-type(1){
																text-align: left;
																padding-left: 5px;
															}
														}
													}
													td{
														&:nth-of-type(1){
															text-align: left;
															padding-left: 15px;
														}
														span{
															display: inline;
															margin-left: 3px;
														}
													}
												}
											}
										}										
								}
								svg{
									tspan{
										@include text-style($black, 9pt, 400, $roboto);
									}
								}
						}
						.graph-left{
							width: 195px;
							float: left;
								svg{
									tspan{
										@include text-style($black, 10pt, 400, $oswald);
									}
									text{
										@include text-style($black, 10pt, 400, $oswald);
									}
								}
								.amChartsLegend{
									left: 20px;
										svg{
											text{
												@include text-style($black, 10pt, 400, $roboto);
											}
											tspan{
												@include text-style($black, 10pt, 400, $roboto);
											}
										}
								}
						}
						.graph-right{
							float: right;
							width: 320px;
						}
				}
		}		
}