/* Generic Styling, for Desktops/Laptops */
/* google Chinese_traditional */
@import url('bootstrap-responsive.css');

table { 
table-layout: fixed;
word-wrap: break-word;
  border-collapse: collapse; 
  text-align:center;
}
#search { 
	padding: 20px 20px 20px 20px ;
  text-align:center;
}
#footer td{
	padding-top: 20px;
	padding-bottom:: 20px;
}
th  { 
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	font-size: 1.5rem
}
th.c1 { 
width: 15%;
background: #e74d2e;
font-family: 'Noto Sans TC', sans-serif !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c2 { 
width: 30%;
background-color: #118cd2;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c3 { 
width: 8%;
background-color: #0cadaf;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c4 { 
width: 15%;
background-color: #f4902f;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c5 { 
width: 8%;
background-color: #0c6e0c;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c6 { 
width: 6%;
background-color: #6666d1;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c7 { 
width: 6%;
background-color: #820682;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c8 { 
width: 5%;
background-color: #94940b;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
}
th.c9 { 
width: 8%;
background-color: #7c2336;
font-family: Noto Sans TC !important;
font-weight: 500 !important;
text-align: center;
color:#FFF;
word-wrap: nowrap;
}

#enroll tr { 
  border-bottom: 1px dotted #CCCCCC; 
}
#enroll th, tr td { 
overflow: hidden !important;
  text-align: center; 
  vertical-align: middle;
}

#enroll tr td { 
font-family: Noto Sans TC !important;
font-weight: 400 !important;
	font-size: 1.5rem;
	padding-top: 8px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 8px;	
}

#footer tr td { 
font-family: Noto Sans TC !important;
font-weight: 400 !important;
	font-size: 1.5rem;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;	
}

.showdata tr:nth-child(odd) {
    background: #fbf3f6 !important;
}

.cata {
	color: #03F;
}

.coursetitle a{ 
color: #CC0033;
}
.coursetitle a:hover { 
color: #333333;
}
.statusblue {
	color: #000099;
}

.statusgreen {
	color: #009933;
}

	/*search .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}*/

	#search input[type=text], #search input[type=submit], #search select {
    width: 80%;
    padding: 5px 20px;
    margin: 8px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-size: 11pt;
}

	#search input[type=submit] {
    width: 30%;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

	#search input[type=submit]:hover {
    background-color: #45a049;
}

	/*#footer td:nth-of-type(1) { text-align: right; }*/
	/*#footer td:nth-of-type(2) { text-align: left; }*/

/*@media (min-height: 1024px) and (min-height: 768px) {*/
/*@media (min-height: 1440px) and (min-height: 900px) {*/
/*@media (min-height: 1920px) and (min-height: 1080px) {*/
@media screen and (max-width: 768px) {
/*@media only screen and (max-width: 800px),
(min-device-width: 768px) and (max-device-width: 1024px)  {*/

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	/*#footer tr td {
	text-align:center;
}*/
	
	#search td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;


	}	
	
#enroll tr td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 40%;
        text-align: left; 		
	}
	
	
	.showdata td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 50px; 
		white-space: nowrap;
        text-align: right; 		
	}
	

	input[type=submit]#search {
    width: 80%;
    background-color: #4CAF50;
    color: white;
    padding: 5px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size: 12pt;	
}	

	#search input[type=text], #search select {
    width: 80%;
    padding: 5px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-size: 11pt;	
}
	
	/*
	Label the data
	*/

	/*.nodata td:nth-of-type(1):before { content: "【查 詢 結 果】："; }*/
	.showdata td:nth-of-type(1):before { content: "【分 類】："; }
	.showdata td:nth-of-type(2):before { content: "【課 程 名 稱】："; }
	.showdata td:nth-of-type(3):before { content: "【課 程 日 期】："; }
	.showdata td:nth-of-type(4):before { content: "【課 程 時 間】："; }
	.showdata td:nth-of-type(5):before { content: "【講 師 名 稱】："; }
	.showdata td:nth-of-type(6):before { content: "【地 點】："; }
	.showdata td:nth-of-type(7):before { content: "【費 用】："; }
	.showdata td:nth-of-type(8):before { content: "【VIP點數】："; }
	.showdata td:nth-of-type(9):before { content: "【狀 態】："; }	
	.showdata td:nth-of-type(8):empty::after { content: "\00a0"; }	

#enroll tr:hover td{
	background-color: #f6e6e8;

}