.content, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header8 .ui-state-active { 
	background-color: #DED;
}
#converter, #recite, #glossary, #download {
	color: #555;
	min-height: 450px;
}
.endofpage {
	clear: both;
}

/***************************** Buttons ********************************/
#common_button {
	text-align: center;
}
#common_button div, #common_button a {
	position: relative;
	width: 235px;
	margin: 2px 3px 7px;
	padding: 9px 20px 7px 15px;
	color: #775;
	font-size: 12pt;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px #DEF;
	cursor: pointer;
	display: inline-block;
	background-color: #CDE;
	-webkit-box-shadow: 0 2px 5px rgba(51, 102, 153, 0.1);
	box-shadow: 
	0 20px 0 rgba(255, 255, 255, .4) inset,
	0 -10px 10px rgba(218, 255, 255, .5) inset,
	0 3px 5px rgba(255, 102, 0, .1);
	white-space: nowrap;
	-webkit-border-radius: 5px;
	border: 1px solid #CDC;
	border-radius: 5px;
}
#common_button div:hover, #common_button a:hover {
	background-color: #ACF;
	color: #663;
}
#forward span.icon {
	display: inline-block;
	width: 15px;
	height: 15px;
	padding-right: 5px;
	background: url(/_img/toggle_ui.png) no-repeat -60px top;
	background-size: 120px 20px;
}
#current span.icon {
	display: inline-block;
	width: 15px;
	height: 15px;
	padding-right: 5px;
	background: url(/_img/toggle_ui.png) no-repeat -40px top;
	background-size: 120px 20px;
}
#back span.icon {
	display: inline-block;
	width: 15px;
	height: 15px;
	padding-right: 5px;
	background: url(/_img/toggle_ui.png) no-repeat -20px top;
	background-size: 120px 20px;
}

/**********************************************************************/
.calendar {
	position: relative;
	margin: 0 auto;
	width: 46px;
	height: 50px;
	text-align: center;
	background-color: #FFF;
	border-bottom-left-radius: 6pt;
	border-bottom-right-radius: 6pt;
	border: 1px solid #CDC;
}
.calendar a {
	text-decoration: none;
}
.calendar .month {
	display: block;
	font-size: 12pt;
	font-weight: bold;
	color: white;
	background-color: #390;
}
.calendar .month_sun {
	display: block;
	font-size: 12pt;
	font-weight: bold;
	color: white;
	background-color: #C30;
}
.calendar .day {
	display: block;
	margin-top: 3px;
	font-size: 14pt;
	font-weight: bold;
	color: #390;
}
.calendar .day_sun {
	display: block;
	margin-top: 3px;
	font-size: 14pt;
	font-weight: bold;
	color: #C30;
}
table {
	width: 830px;
	margin: 0 auto;
	border-collapse: collapse;
	text-align: center; 
}
th {
	padding: 10px 0 !important;
	color: #553 !important;
	font-weight: normal;
}
tr:nth-child(even) {
	border-top: 1px solid #CDC;
	border-bottom: 1px solid #CDC;
}
tr.highlight:nth-child(even) {
	background-color: rgba(255, 255, 171, .6);
}
tr.highlight:nth-child(odd) {
	background-color: rgba(255, 255, 121, .5);
}
th, td {
	font-family: Helvetica, Verdana, Geneva, "Microsoft JhengHei", "LiHei Pro";
	font-smooth: never;
	color: #663;
	padding: 5px 10px;
	white-space: nowrap;
}
/*th span, td span {
	vertical-align: bottom;
}*/
td strong {
	color:#FFF;
	margin-right: 2px;
	padding: 1px 2px 0;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	float: left;
}
td strong.orange {
	background: orange;
}
td strong.blue {
	background: DodgerBlue;
}
td.lunar, td.greg {
	width: 20%;
}
td.cal {
	width: 1%;
}
td.title {
	width:40%;
	font-size: 14pt;
}

/*************************** Form Structures **************************/      
#converter, #recite {
	color: #666;
}
#converter.zh-tw {
	text-align: center;
}
#converter .info, #recite .info {
	display: inline-block;
	margin: -100px 0 20px;
	white-space: normal;
}
#converter form {
	float: left;
	padding: 50px 30px 20px;
	width: 400px;
	white-space: nowrap;
	border-right: 1px dotted #AC8;
}
#recite form {
	float: left;
	padding: 50px 30px 20px;
	width: 400px;
	white-space: nowrap;
	border-right: 1px dotted #AC8;
}
#converter input[type="text"], #recite input[type="text"] {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	border: 1px solid #ABC;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
	background: #FFF url(/_img/wrap.png) no-repeat -150px -25px;
	padding: .15em;
}
#recite input[type="text"]:disabled {
	background-color: #CCC;
	color: #DDD;
}
#converter input:focus, #recite input:focus  {
	border: 1px solid #3C0;
	box-shadow: 0 0 5px #3C0;
	outline: none;
}
#converter button {
	font-family: Helvetica, Verdana, Geneva, "Microsoft JhengHei", "LiHei Pro";
	font-size: 1em;
	cursor: pointer;
	margin: 20px 0 0;
}
#recite button {
	font-family: Helvetica, Verdana, Geneva, "Microsoft JhengHei", "LiHei Pro";
	font-size: 1em;
	cursor: pointer;
}
#converter button:focus, #recite button:focus {
	outline: none;
}
#converter label, #recite label {
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 10px;
}
#converter label:hover, #recite label:hover {
	background-color: rgba(152, 118, 118, .2);
}
#converter dl, #recite dl {
	margin: 0;
}
#converter .inputbox dt, #recite .inputbox dt {
	display: inline;
	width: 80px;
	font-size: 12pt;
}
#converter .inputbox dd {
	display: inline-block;
	margin: -5px 0 0;
}
#converter dd span, #recite dd span {
	background-color: rgba(152, 118, 118, 0.1);
	display: inline-block;
	margin: -5px 0 0;
	padding: 4px 5px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
/**********************************************************************/
#recite .inputbox dt {
	float: left;
	width: 100px;
	margin-right: 5px;
	text-align: left;
}
#recite .inputbox dt, #recite .inputbox dd {
	height: 40px;
}
#recite .inputbox dd {
	display: block;
	border-radius: 4px;
}
#recite dd em {
	font-size: 11pt;
	font-style: normal;
	color: #898;
}
/**********************************************************************/
.radiobox dd {
	display: block;
	margin-left: -5px;
	text-align: left;
}
.zh-tw .radiobox dd {
	display: inline-block;
}
.results {
	display: block;
	text-align: center;
	padding: 30px 0 10px;
}
.desc {
	clear: both;
	padding: 30px 30px 0;
	border-top: 1px dotted #AC8;
}
.results .box {
	display: inline-block;
	background-color: rgba(152, 118, 118, 0.1);
	margin: 10px auto;
	padding: 10px 18px;
	border-radius: 10px;
	line-height: 1.5em;
}
blockquote {
	position: relative;
	width: 80%;
	margin: 0 auto;
	font-size: 12pt;
	font-style: italic;
	color: #963;
	text-indent: 30px;
	text-align: left;
	line-height: 1.6em;
}
blockquote:before {
	position: absolute;
	left: -45px;
	top: 20px;
	content: '“';
	font-size: 62pt;
}
blockquote.zh-tw:before {
	left: -35px;
}
blockquote.zh-tw {
	font-style: normal;
}
cite {
	position: relative;
	display: block;
	left: -30px;
	top: 10px;
	font-size: 10pt;
}
/* Ipad general */
@media only screen and (device-width: 768px) { 
	#converter input[type="text"] {
		font-size: 16pt !important;
		vertical-align: middle !important;
	}
	#converter dt {
		font-size: 14pt !important;
	}
}
/****************************** Glossary ******************************/
.flex_container .leftpan {
	width: 80%;
	padding: 0 10px;
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 2 1 auto;
	-ms-flex: 2 1 auto;
	flex: 2 1 auto;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;
}
.flex_container .rightpan {
	min-width: 200px;
	padding: 0 0 0 10px;
	border-left: 1px dotted #AC8;
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;	
}
.index {
	margin-bottom: 10px;
	text-align: center;
}
.pagination {
	position: relative;
	margin-top: 50px;
}
.index a, .pagination a {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin: 0 1px;
	color: #999;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 1px 1px #FFF;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 
	0 13px 0 rgba(255, 255, 255, .4) inset,
	0 -10px 10px rgba(218, 255, 255, .5) inset,
	0 2px 5px rgba(255, 102, 0, .1);
	border: 1px solid #CCC;
	background: #FFF;
}
.index a:hover, .pagination a:hover {
	color: #FFF;
	text-shadow: none;
	background: #666;
	border: 1px solid #89A;
	cursor: pointer;
}
.index .selected, .index .selected:hover, .pagination .selected, .pagination .selected:hover {
	color: #333;
	text-shadow: 0 1px 1px #FFF;
	background: #AAA;
	border: 1px solid #BBB;
	cursor: default;
}
.index span, .pagination span {
	display: inline-block;
	margin-top: 5px;
}
.leftpan dt {
	display: block;
	margin-top: 30px;
	font-weight: bold;
}
.leftpan dl span {
	font-size: 11pt;
	font-weight: normal;
}
.leftpan dd {
	margin: 5px 0 0;
	font-style: italic;
	line-height: 28px;
}
.leftpan dd.fulldesc {
	display: none;
}
.leftpan dd a.showdesc {
	padding: 0 3px 1px;
	font-size: 10pt;
	font-style: normal;
	text-decoration: none;
	color: #999;
	cursor: pointer;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.leftpan a.showdesc:hover, .leftpan dd .extlink a:hover {
	color: #FFF;
	background: #BBB;
}
.leftpan dd .extlink {
	display: block;
	margin-top: 10px;
	color: #999;
	font-size: 10pt;
	font-style: normal;
	line-height: 1.2em;
}
.leftpan dd .extlink a {
	padding: 0 3px 1px;
	text-decoration: none;
	color: #999;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.rightpan .notice {
	width: 200px;
	padding: 5px 0;
	color: #888;
	font-size: 10pt;
	text-align: center;
	line-height: 1.8em;
	border-top: 1px dotted #AC8;
	border-bottom: 1px dotted #AC8;
}
.rightpan dt {
	margin-top: 30px;
}
.rightpan dd {
	margin: 5px 0 0;
	font-size: 12pt;
}
.rightpan dd a {
	display: inline-block;
	padding: 3px 7px;
	color: #999;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px #FFF;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 
	0 13px 0 rgba(255, 255, 255, .4) inset,
	0 -10px 10px rgba(218, 255, 255, .5) inset,
	0 2px 5px rgba(255, 102, 0, .1);
	border: 1px solid #CCC;
	background: #FFF;
}
.rightpan dd a:hover {
	color: #FFF;
	text-shadow: none;
	background: #666;
	border: 1px solid #89A;
	cursor: pointer;
}
.rightpan .selected, .rightpan .selected:hover {
	color: #333;
	text-shadow: 0 1px 1px #FFF;
	background: #AAA;
	border: 1px solid #BBB;
	cursor: default;
}
/************************** Media Download ****************************/
#download div.column {
	margin-top: 10px;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2; 
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
	-webkit-column-rule: 1px dotted #AC8;
	-moz-column-rule: 1px dotted #AC8;
	column-rule: 1px dotted #AC8;   
	-webkit-column-fill: balance;
	-moz-column-fill: balance;
	column-fill: balance;
}
#download .column dl {
	display: none;
}
#download .column dl.item {
	display: inline-block;
	margin-top: 0;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	width: 100%;
}
#download .column dt {
	width: 98%;
	padding: 5px 0;
	color: #666;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
	background: rgba(255, 255, 107, .2);
	border: 1px solid #CDC;
	border-left: 5px double #CDC;
	border-right: 5px double #CDC;
}
#download .column dd {
	margin-left: 0;
	padding: 7px 0;
	border-bottom: 1px solid #CDC;
	text-align: right;
}
#download .column dd .filesize {
	font-size: 9pt;
	font-style: italic;
	color: #9A8;
}
#download .column dd a {
	float: left;
	color: royalblue;
	text-decoration: none;
}
#download .column dd a:hover {
	color: dodgerblue;
}