* {
	-webkit-box-sizing:	border-box;
	-moz-box-sizing:	border-box;
	-ms-box-sizing:		border-box;
	-o-box-sizing:		border-box;
	box-sizing: 		border-box;
}

a, a:hover, a:active {
	text-decoration: none;
}

a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid #FF9933;
    outline-offset: -2px;
}

.display_none {
	position: absolute;
	border: 0;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
}

.clearfix:before, .clearfix:after {
	display: table;
	content: " ";
}

.clearfix:after {
	clear: both;
}

body {
	font-size: 1rem;
	margin: 0;
	padding: 0;
	font-family: 'PT Sans Caption', 'Noto Sans TC', 'Microsoft JhengHei';
	font-family: "Roboto", "微軟正黑體", arial, sans-serif;
}

div.contents, div.trailer {
  float: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2em;
}


/************************
 Mini Calendar
************************/
/*** 上個月、這個月、下個月 的 box ***/
#cal_last, #cal_this, #cal_next {
	border: 1px solid rgba(127,127,127,.3);
	border-radius: 4px;
	margin-bottom: .5em;
}

/*** thead 星期名稱 ***/
.calendar thead tr:last-of-type th {
	font-size: 80%;
	padding-left: .3em;
	padding-right: .3em;
}

.calendar a {
	display: block;
}

/*** 目前選項 ***/
.calendar td#sticky_day {
    border: none;
    outline: 2px solid #FF9933;
    outline-offset: -2px;
}

.calendar td a:hover {
    outline: 2px solid #FF9933;
    outline-offset: -2px;
}

/****************************
 主月曆
****************************/
table.dwm_main {
	border: 0px solid red;
}

.dwm_main th {
	font-size: 100%; 
	font-weight: normal; 
	vertical-align: top; 
	padding: 0;
}

/*** thead 標題 (上方橫列) ***/
.dwm_main thead th {
	padding-top: .2em;
	padding-bottom: .2em;
	vertical-align: middle;
}

/*** tbody 標題 (左直欄) ***/
.dwm_main tbody td.row_labels {
	padding: .5em .2em;
	vertical-align: middle;
	text-align: center;
}

.booking_list a {
	font-size: 1em;
	display: block;
	vertical-align: middle;
	color: #333;
}

/*** 內部使用 ( month only ) ***/
.booking_list .I {
	background: none;
}

/************
 月顯示
************/

/*** 日期數字 ***/
#month_main div.cell_header a.monthday {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	color: #222;
}  

/*** 預約內容 box ***/
div.booking_list {
	font-size: 80%;                                
	padding: 0 .3em;
}

/*** 每則預約 ***/
.booking_list div {
	padding: 0;
	margin-top: .2em;
	height: auto;
	max-height: inherit;
	border-style: solid;
	border-width: 1px ;
	border-color: rgba(127,127,127,.5);
	border-radius: 3px;
}

.booking_list div:hover a {
    outline: 2px solid #FF9933;
    outline-offset: -2px;
}

/*** 時段 ***/
.booking_list span.month_period {
	margin-right: 1em;
	color: #F60;
}

/*** 姓名 ***/
.booking_list span.month_desc {
	color: #175B96;
}

/************
 日、週顯示
************/
/*** 每則預約 ***/
.celldiv a {
	font-size: 80%;
}


/**************************
 Trailer
***************************/
.nav_box {
	width: 100%;
	margin: 1em 0 .5em;
	padding: 0;
}

/*** 下方的 trailer ***/
.nav_box.bottom {
	margin: .5em 0 2em;
}

.nav_box a.active {
	background: #AC1616;
	color: #FFF;
	border-color: #AC1616;
}

/**************************
 上一週、本週、下一週
***************************/
.date_nav,
.custom_trailer {
	float: none;
	display: inline-block;
	width: auto;
	margin: 0;
	font-weight: normal;
	white-space: nowrap;
}

.custom_trailer {
	float: right;
}


.date_nav a,
.custom_trailer a {
	display: inline-block;
	float: none;
	padding: .3em .5em;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.8);
	width: auto;
	border-radius: 4px;
	font-weight: 600;
}

.date_nav a:hover,
.custom_trailer a:hover {
	background: #175B96;
	color: #FFF;
	border-color: #175B96;
}

.date_before,
.date_now,
.date_after {
  float: none;
  text-align: center;
}

.date_before::before {
  content: '';
}

.date_after::after {
  content: '';
}

/************************
 填寫預約項目
************************/
#div_name:after {
	content: '(請填寫借用的教師姓名，及使用班級)';
	display: inline-block;
	margin-left : .5em;
	font-weight: 500;
	color: #ac1616;
}