@charset "utf-8";

.jpDatePicker {
	position:absolute;
	background:#fff; color:#555; font-family:Arial; line-height:1;
	border:1px solid #aaa; box-sizing:border-box; overflow:hidden;
}
.jpDatePicker a { text-decoration:none; cursor:pointer; }

.jpDatePicker .prev,
.jpDatePicker .next {
	display:block; position:absolute; top:0;
	width:15%; height:48px;
	color:#ccc; text-align:center; font-weight:bold;
}
.jpDatePicker .prev { left:0; }
.jpDatePicker .next { right:0; }
.jpDatePicker .prev:after,
.jpDatePicker .next:after {
	content:""; position:absolute; width:0; height:0;
	border-style:solid;
	border-color:transparent;
	border-width:12px;
}
.jpDatePicker .prev:after {
	top:11px; right:36%;
	border-right-width:24px;
	border-right-color:#ddd;
}
.jpDatePicker .next:after {
	top:11px; left:36%;
	border-left-width:24px;
	border-left-color:#ddd;
}
.jpDatePicker .prev:hover,
.jpDatePicker .next:hover { background:#37a; color:#fff; }
.jpDatePicker .prev:hover:after { border-right-color:#fff; }
.jpDatePicker .next:hover:after { border-left-color:#fff; }
.jpDatePicker .prev:active,
.jpDatePicker .next:active,
.jpDatePicker .prev.active,
.jpDatePicker .next.active { background:#59c; }

.jpDatePicker .month1 { position:absolute; left:0; top:0; }
.jpDatePicker .month1 .title { text-align:center; padding:3px 0 5px 0; background:#fff; }
.jpDatePicker .month1 .title .year {
	display:inline-block; padding:2px 8px 0 8px; margin:0 2px 0 0;
	cursor:pointer; text-align:center; border:1px solid #eee; border-radius:5px;
}
.jpDatePicker .month1 .title .year .AD { font-size:180%; font-weight:bold; }
.jpDatePicker .month1 .title .year .gengo { font-size:85%; color:#666; }
.jpDatePicker .month1 .title .year .genyear { margin:0 2px; color:#777; font-weight:bold; }
.jpDatePicker .month1 .title .year:hover { background:#37a; color:#fff; }
.jpDatePicker .month1 .title .year:hover .AD,
.jpDatePicker .month1 .title .year:hover .gengo,
.jpDatePicker .month1 .title .year:hover .genyear { color:#fff; }
.jpDatePicker .month1 .title .year:active,
.jpDatePicker .month1 .title .year.active { background:#59c; color:#fff; }
.jpDatePicker .month1 .title .year:active .gengo,
.jpDatePicker .month1 .title .year:active .genyear,
.jpDatePicker .month1 .title .year.active .gengo,
.jpDatePicker .month1 .title .year.active .genyear { color:#fff; }
.jpDatePicker .month1 .title .month {
	font-size:180%; font-weight:bold;
	display:inline-block; padding:5px 10px 0 10px; cursor:pointer;
	border:1px solid #eee; border-radius:5px;
}
.jpDatePicker .month1 .title .month:hover { background:#37a; color:#fff; }
.jpDatePicker .month1 .title .month:active,
.jpDatePicker .month1 .title .month.active { background:#59c; color:#fff; }
.jpDatePicker .month1 .dates { width:100%; border-collapse:collapse; position:relative; left:-1px; }
.jpDatePicker .month1 .dates th { text-align:center; font-weight:normal; font-size:85%; height:20px; background:#fff; }
.jpDatePicker .month1 .dates td { text-align:center; font-weight:normal; font-size:110%; background:#fff; border:1px solid #eee; }
.jpDatePicker .month1 .dates td.sat { color:#35f; font-weight:bold; }
.jpDatePicker .month1 .dates td.sun { color:#f35; font-weight:bold; }
.jpDatePicker .month1 .dates td.holiday { color:#f35; font-weight:bold; }
.jpDatePicker .month1 .dates td.today { background:#ff0; }
.jpDatePicker .month1 .dates td.current { background:#f90; color:#fff; }
.jpDatePicker .month1 .dates td.otherMonth { color:#ccc; font-weight:normal; }
.jpDatePicker .month1 .dates td:hover { background:#f90; color:#fff; cursor:pointer; }
.jpDatePicker .month1 .dates td:active,
.jpDatePicker .month1 .dates td.active { background:#fb2; color:#fff; }

.jpDatePicker .year1 { background:#fff; border-collapse:collapse; position:absolute; left:-1px; top:0; }
.jpDatePicker .year1 th { height:18%; cursor:pointer; font-weight:normal; padding:0; text-align:center; }
.jpDatePicker .year1 th .year { display:inline-block; padding:5px 15px 3px 0; }
.jpDatePicker .year1 th .AD { font-size:180%; font-weight:bold; margin:0 5px 0 20px; }
.jpDatePicker .year1 th .gengo { color:#666; font-size:85%; margin:0 2px; }
.jpDatePicker .year1 th .genyear { color:#777; font-weight:bold; margin:0 2px 0 0; }
.jpDatePicker .year1 th .year:hover { background:#37a; color:#fff; }
.jpDatePicker .year1 th .year:hover .AD,
.jpDatePicker .year1 th .year:hover .gengo,
.jpDatePicker .year1 th .year:hover .genyear { color:#fff; }
.jpDatePicker .year1 th .year:active,
.jpDatePicker .year1 th .year.active { background:#59c; color:#fff; }
.jpDatePicker .year1 th .year:active .gengo,
.jpDatePicker .year1 th .year:active .genyear,
.jpDatePicker .year1 th .year.active .gengo,
.jpDatePicker .year1 th .year.active .genyear { color:#fff; }
.jpDatePicker .year1 td { border:1px solid #ddd; text-align:center; vertical-align:middle; cursor:pointer; }
.jpDatePicker .year1 td.now { background:#ff3; }
.jpDatePicker .year1 td.current { background:#999; color:#fff; }
.jpDatePicker .year1 td big { font-size:170%; font-weight:bold; padding:0 5px; }
.jpDatePicker .year1 td.current big { color:#fff; }
.jpDatePicker .year1 td:hover { background:#37a; color:#fff; }
.jpDatePicker .year1 td:hover big { color:#fff; }
.jpDatePicker .year1 td:active,
.jpDatePicker .year1 td.active { background:#59c; color:#fff; }
.jpDatePicker .year1 td:active big,
.jpDatePicker .year1 td.active big { color:#fff; }

.jpDatePicker.years { overflow-y:scroll; }
.jpDatePicker .years { background:#fff; text-align:center; position:absolute; left:0; top:0; }
.jpDatePicker .years .year {
	float:left; cursor:pointer; border:1px solid #ccc; border-top-width:0; border-left-width:0;
	white-space:nowrap; padding:7px 0; font-size:90%;
}
.jpDatePicker .years .year .AD { font-size:160%; font-weight:bold; margin:4px 0 0 0; font-family:Arial; }
.jpDatePicker .years .year .gengo { font-size:80%; color:#666; }
.jpDatePicker .years .year .genyear { color:#777; font-weight:bold; }
.jpDatePicker .years .year.now { background:#ff3; }
.jpDatePicker .years .year.current { background:#999; color:#fff; }
.jpDatePicker .years .year.current .AD,
.jpDatePicker .years .year.current .gengo,
.jpDatePicker .years .year.current .genyear { color:#fff; }
.jpDatePicker .years .year:hover { background:#37a; color:#fff; }
.jpDatePicker .years .year:hover .AD,
.jpDatePicker .years .year:hover .gengo,
.jpDatePicker .years .year:hover .genyear { color:#fff; }
.jpDatePicker .years .year:active,
.jpDatePicker .years .year.active { background:#59c; color:#fff; }
.jpDatePicker .years .year:active .AD,
.jpDatePicker .years .year:active .gengo,
.jpDatePicker .years .year:active .genyear,
.jpDatePicker .years .year.active .AD,
.jpDatePicker .years .year.active .gengo,
.jpDatePicker .years .year.active .genyear { color:#fff; }