Light12306/Web12306/css/ui/date-selector.css

.date-bar-wrap {
	height: 60px;
	margin-top: 18px;
	border-bottom: 3px solid #f88c21;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
}

	.date-bar-wrap .date-bar-prev,
	.date-bar-wrap .date-bar-next {
		width: 28px;
		height: 58px;
		background: linear-gradient(to bottom, #fcfcfb, #e5e4e4);
		border-top: 1px solid #dfdfdf;
		border-bottom: 1px solid #d67e29;
		cursor: pointer;
	}

		.date-bar-wrap .date-bar-prev .arrow-left,
		.date-bar-wrap .date-bar-next .arrow-right {
			display: block;
			margin: 20px auto;
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			position: relative;
		}

		.date-bar-wrap .date-bar-prev .arrow-left {
			border-right: 10px solid #a8a7a8;
		}

		.date-bar-wrap .date-bar-next .arrow-right {
			border-left: 10px solid #a8a7a8;
		}

			.date-bar-wrap .date-bar-prev .arrow-left:after,
			.date-bar-wrap .date-bar-next .arrow-right:after {
				content: '';
				position: absolute;
				display: block;
				margin: 10px auto;
				width: 0;
				height: 0;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				top: -20px;
			}

		.date-bar-wrap .date-bar-prev .arrow-left:after {
			border-right: 10px solid #efeeee;
			left: 3px;
		}

		.date-bar-wrap .date-bar-next .arrow-right:after {
			border-left: 10px solid #efeeee;
			left: -13px;
		}

		.date-bar-wrap .date-bar-prev:hover .arrow-left {
			border-right: 10px solid #f88c21;
		}

		.date-bar-wrap .date-bar-next:hover .arrow-right {
			border-left: 10px solid #f88c21;
		}

	.date-bar-wrap .date-bar-prev {
		border-right: 1px solid #cccbc8;
	}

	.date-bar-wrap .date-bar-next {
		border-left: 1px solid #cccbc8;
	}

	.date-bar-wrap .date-bar {
		width: 922px;
		height: 60px;
		background: linear-gradient(to bottom, #f1f0f0, #dbdbdb);
		color: #777;
	}

		.date-bar-wrap .date-bar .date-bar-list {
			width: 100%;
			height: 60px;
		}

			.date-bar-wrap .date-bar .date-bar-list li {
				width: 12.5%;
				height: 100%;
				float: left;
				border-top: 1px solid #dfdfdf;
				border-left: 1px solid #b8b7b7;
				border-bottom: 1px solid #d67e29;
				position: relative;
				cursor: pointer;
				box-sizing: border-box;
			}

				.date-bar-wrap .date-bar .date-bar-list li h5 {
					font-weight: bold;
					font-size: 16px;
					text-align: center;
					margin: 8px auto 5px auto;
				}

				.date-bar-wrap .date-bar .date-bar-list li span {
					display: block;
					text-align: center;
				}

				.date-bar-wrap .date-bar .date-bar-list li.selected,
				.date-bar-wrap .date-bar .date-bar-list li:hover {
					background: linear-gradient(to bottom, #fc9e40, #f78b20);
					color: #ffffff;
					border-left: 1px solid #d67e29;
					border-top: 1px solid #d67e29;
					border-bottom: 1px solid #f78b20;
				}

					.date-bar-wrap .date-bar .date-bar-list li.selected:after,
					.date-bar-wrap .date-bar .date-bar-list li.selected:before {
						content: '';
						position: absolute;
						width: 0;
						height: 0;
						border-bottom: 5px solid #c6701a;
						border-left: 5px solid transparent;
						border-right: 5px solid transparent;
						top: 100%;
						left: 50%;
						margin-left: -5px;
						margin-top: -1px;
					}

					.date-bar-wrap .date-bar .date-bar-list li.selected:after {
						border-bottom: 5px solid #f5f5f5;
						margin-top: 0;
					}

					.date-bar-wrap .date-bar .date-bar-list li.selected + li {
						border-left: 1px solid #d67e29;
					}

				.date-bar-wrap .date-bar .date-bar-list li:last-child {
				}

				.date-bar-wrap .date-bar .date-bar-list li:first-child {
					border-left: none;
				}

/*日期选择器*/
.date-selector {
	background-color: #ffffff;
}

	.date-selector nav {
	}

		.date-selector nav header {
			font-size: 18px;
			line-height: 61px;
			color: #7d848d;
			text-align: center;
			font-weight: bold;
		}

	.date-selector table {
		border-collapse: separate;
	}

		.date-selector table th {
			line-height: 31px;
			border-top: 1px solid #bb6c29;
			border-bottom: 1px solid #bb6c29;
			background: linear-gradient(to top, #f87c06, #fa9104);
			color: #ffffff;
			width: 45px;
			text-align: center;
		}

		.date-selector table td {
			line-height: 31px;
			border-bottom: 1px solid #e1e1e1;
			background: #f2f2f2;
			color: #7d848d;
			width: 45px;
			text-align: center;
		}

			.date-selector table td + td {
				border-left: 1px solid #e1e1e1;
			}

			.date-selector table td:hover {
				background-color: #ff9b00;
				color: #ffffff;
				cursor: pointer;
			}

			.date-selector table td:active {
				background-color: #f78800;
				color: #ffffff;
				cursor: pointer;
			}