datetimeranger/src/datetimeranger.css

DateTimeRanger is a jQuery plugin for fast visual and interactive date + time (range) entry.

.dt-ranger
{
	font-size: 12px;
	font-family: Arial, sans-serif;
	display: inline-block;
	border: 1px solid #bfbfbf;
	background-color: #f7f7f7;
	padding: 6px;
	line-height: 14pt;
	color: #aaa;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	margin: 2px 8px 8px 2px;
}
.dt-ranger b
{
	color: #666;
	font-weight: 700;
}
.dt-ranger .default-bar,
.dt-ranger .summary-bar
{
	cursor: pointer;
	font-size: 12pt;
	margin: 0 0.5em;
}
.dt-ranger .default-bar,
.dt-ranger .default-bar *,
.dt-ranger .summary-bar,
.dt-ranger .summary-bar *
{
	-webkit-transition: color 0.25s linear 0s;
	-moz-transition: color 0.25s linear 0s;
	-ms-transition: color 0.25s linear 0s;
	transition: color 0.25s linear 0s;
}
.dt-ranger .default-bar:hover,
.dt-ranger .summary-bar:hover
{
	color: #579;
}
.dt-ranger .default-bar:hover b,
.dt-ranger .summary-bar:hover b
{
	color: #248;
}
.dt-ranger .default-bar>i
{
	margin-right: 0.5em;
}
.dt-ranger .summary-bar,
.dt-ranger .oper-zone
{
	display: none;
}
.dt-ranger>div
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dt-ranger .oper-zone>div
{
	display: inline-block;
	text-align: center;
	vertical-align: top;
	padding: 0 0.5em 0.5em;
	border-radius: 7px;
	
	-webkit-transition: all 0.25s linear 0s;
	-moz-transition: all 0.25s linear 0s;
	-ms-transition: all 0.25s linear 0s;
	transition: all 0.25s linear 0s;
}
.dt-ranger .oper-zone>div:hover
{
	background-color: #eee;
}
.dt-ranger .oper-zone>div.end-zone
{
	margin-left: 0.5em;
}
.dt-ranger .oper-zone .input-wrapper
{
	display: inline-block;
	white-space: nowrap;
	margin: 0.25em 0.25em 0.5em 0.5em;
	vertical-align: middle;
	border: 1px solid silver;
	border-radius: 5px;
}
.dt-ranger .oper-zone label
{
	font-size: 12pt;
}
.dt-ranger .oper-zone input
{
	font-family: monospace, courier new, courier;
	font-size: 12pt;
	font-weight: 500;
	padding: 0.2em 0;
	cursor: text;
	border: none;
	outline: none;
	position: relative;
}
.dt-ranger .oper-zone input:first-child{
	border-radius: 5px 0 0 5px;
}
.dt-ranger .oper-zone input:last-child{
	border-radius: 0 5px 5px 0;
}
.dt-ranger .oper-zone input.floating:before {
	content: "*";
	color: green;
	position: absolute;
	top: 0;
	right: 2pt;
	overflow: hidden;
	cursor: help;
}
.dt-ranger .oper-zone input.invalid {
	color: darkred;
}
.dt-ranger .oper-zone input.invalid:after {
	content: "~~~~~~~~~~~~~~~ ?";
	font-family: Times New Roman, Serif;
	font-size: 9pt;
	color: red;
	position: absolute;
	top: 12pt;
	right: 0.5em;
	overflow: hidden;
	cursor: help;
}
.dt-ranger .oper-zone input.date
{
	width: 7em;
	text-align: center;
}
.dt-ranger .oper-zone input.time
{
	width: 5.5em;
	text-align: left;
}
.dt-ranger .oper-zone input::-ms-clear
{
	display: none;
}
.dt-ranger .oper-zone input::-webkit-calendar-picker-indicator,
.dt-ranger .oper-zone input::-webkit-inner-spin-button,
.dt-ranger .oper-zone input::-webkit-clear-button
{
	-webkit-appearance: none;
	display: none;
}

.dt-ranger .oper-zone .dr-picker
{
	border: none;
	padding: 0;
}
.dt-ranger .oper-zone .dr-picker .month-wrapper table
{
	width: 180px;
}
.dt-ranger .oper-zone .dr-picker .footer
{
	display: none;
}
.dt-ranger .oper-zone .dr-picker,
.dt-ranger .oper-zone .td-clock
{
	vertical-align: top;
}
.dt-ranger .oper-zone .td-clock
{
	margin-left: 12px;
}