html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
    vertical-align:center;margin:0;padding:0; }

body {overflow-x:hidden;}
::selection {color:#fff;background:#3a3261; }
a {text-decoration:none;color:#f66;border:none; }
a:hover {text-decoration:underline;border:none; }
strong {font-weight:700;}
ul {margin:1em;list-style-type:circle; }
li {font-size:1em;margin-bottom:.4em;margin-left:.75em;font-weight:300; }
img, img:hover {max-width:100%;border:none;}
.img-devices {max-width:100%;margin-top:12px; }
iframe {overflow:hidden;}
td,th{vertical-align:top;line-height:40px;padding-right:20px;}
textarea {width:100%}

.bgimg{position:fixed;z-index:-1;top:0;left:0;min-width:100%;min-height:100%;}

.container {margin-top:160px;padding:40px 5%;width:90%;min-height:400px;overflow:hidden;
    background:#fffefd;background:rgba(255,250,240,0.5);}
.container.min {margin:200px 0 0 0;min-height:0;}
.containless {height:200px;width:100%;}

.banner_blank {height:160px;width:100%;display:block;}
@media only screen and (max-width:799px){
    .container {margin-top:50px;padding:30px 5%;}
    .container.min {margin-top:80px;}
    .containless {height:80px;}
    .banner_blank {height:50px;width:100%;}
}

.newsfeedtitle {margin:10px 0;font-size:20px;color:#662E1C;font-weight:600;}
.sectionhead {width:90%;padding:8px 5%;
    /* border-top:20px solid #330000; */
    background:#662E1C;color:#EBDCB2;font-size:36px;font-weight:200;opacity:0.9;}
.section {width:100%;background:#fffefd;background:rgba(255,250,240,0.8);margin:0;padding:0;}

article {margin:0;padding:0;}

article.left73 {width:70%;} article.right73 {width:30%;float:right;}
article.left64 {width:60%;} article.right64 {width:40%;float:right;}
article.left55 {width:50%;} article.right55 {width:50%;float:right;}
article.left46 {width:40%;} article.right46 {width:60%;float:right;}
article.left37 {width:30%;} article.right37 {width:70%;float:right;}
.content {padding:25px 20px;}
.slimcontent {padding:25px 5%;}
.content100 {padding:30px 5%;}

.iframemaps {width:100%;height:450px;}

@media all and (max-width: 799px) {
    .sectionhead {font-size:28px;padding:5px 5%;}
    article {width:100% !important;}
    .content {padding:20px 20px;}
    .slimcontent {padding:20px 20px;}
    .content100 {padding:20px 5%;}
    .iframemaps {height:300px;}
}

.clear {clear:both; }

.datatable {border-collapse:collapse;table-layout:fixed;word-wrap:break-word;
    vertical-align:top;width:100%;}
.datatable tr:nth-of-type(odd) {background:#fff;}
.datatable tr:hover {background:#ffd;}
.datatable th {border:1px solid #ccc;padding:8px 10px;font-weight:500;background:#eee;}
.datatable td {border:1px solid #ccc;padding:8px 10px;vertical-align:top;
    -webkit-transition:all 0.4s ease;transition:all 0.4s ease;}
.datatable th.hidden,.datatable td.hidden {display:none;}
.datatable tr.child:hover {background:none;}
.datatable tr.child td {background:none;font-weight:500;}
.datatable tr.empty {visibility:hidden;}

#site-footer {
    margin:0;padding:30px 5%;width:90%;overflow:hidden;clear:both;font-size:90%;font-weight:200;
    background:rgba(180,180,180,0.4);border-top:1px solid rgba(0,0,0,0.1);
    box-shadow:inset 0 3px 3px rgba(0,0,0,0.05);}

.clear {clear:both;}

.inputform {
    display:inline-block;margin:0 0 5px 0;padding:0 20px;height:45px;line-height:45px;
    border:0;border-radius:5px;color:#fff;background:#a64;font-size:100%;
    -webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.inputform.right {float:right;}

.inputform.login {
    padding:0 10px;color:#555;background:none;border-radius:0;border-bottom:1px solid #333;
    text-transform:none;}
.inputform.text{ height:43px;line-height:43px;font-weight:300;
    padding:0 10px;color:#555;background:#fff;border-radius:5px;border:1px solid #6a6291;}
.inputform.text:focus{box-shadow:inset 0 3px 4px rgba(100,100,150,0.2);}
.inputform.text.title {font-size:1.8em;color:#6a6291;}
.inputform.text.readonly {background:#eee;font-style:italic;}
.inputform.text.readonly:focus {box-shadow:none;}
.inputform.text.nocap {text-transform:none;}
.inputform.textarea{ font-weight:300;font-size:12px;line-height:20px;height:80px;width:350px;
    padding:0 10px;color:#555;background:#fff;border-radius:5px;border:1px solid #6a6291;}
.inputform.textarea:focus{box-shadow:inset 0 3px 4px rgba(100,100,150,0.2);}

form.inputlist table tr td input[type="text"]{ height:43px;line-height:43px;font-weight:300;
    padding:0 10px;color:#555;background:#fff;border-radius:5px;border:1px solid #6a6291;}

.inputform.button {margin-right:5px;cursor:pointer;}
.inputform.button.edit {padding:0px 10px;line-height:30px;height:30px;}
.inputform.button:hover {background:#842;text-decoration:none;}
.inputform.button.darkbrown {background:#731;} .inputform.button.darkbrown:hover {background:#620;}
.inputform.button.lightbrown {background:#b75;} .inputform.button.lightbrown:hover {background:#954;}
.inputform.button.dark {background:#257;} .inputform.button.dark:hover {background:#146;}
.inputform.button.grey {background:#aaa;} .inputform.button.grey:hover {background:#888;}
.inputform.button.green {background:#393;} .inputform.button.green:hover {background:#161;}
.inputform.button.blue {background:#58a;} .inputform.button.blue:hover {background:#478;}
.inputform.button.yellow {background:#cc2;} .inputform.button.yellow:hover {background:#aa0;}
.inputform.button.red {background:#e00;} .inputform.button.red:hover {background:#c00;}
.inputform.button.readonly {background:#aaa;pointer-events:none;}
.inputform.button.readonly:hover {background:#aaa;}

.inputform.button.light {color:#aaa;background:#fff;border:1px solid #aaa;}
.inputform.button.light:hover {color:#d33;border:1px solid #f00;}
.inputform.button.light.red {color:#d88;background:#fff;border:1px solid #aaa;}
.inputform.button.light.red:hover {color:#d33;border:1px solid #c00;}

.inputform.select {color:#888;background:#fff;border-radius:5px;border:1px solid #6a6291;}

.textbox {width:100%;height:500px;}
.textbox.half {width:70%;height:500px;}

.inputfile::-webkit-file-upload-button {visibility:hidden;}
.inputfile::before {content:'Select file to upload';margin-top:20px;
    display:inline-block;background:#fafafa;border-radius:5px;border:1px solid #6a6291;padding:0 15px;
    outline:none;white-space:nowrap;-webkit-user-select:none;cursor:pointer;
    font-weight:300;font-size:14px;height:45px;line-height:45px;}
.inputfile:hover::before {background:#eee;border-color:1px solid #999;cursor:pointer;}
.inputfile:active::before {background:#ddd;}

.formpartleft {float:left;width:49%;}
.formpartright {float:right;width:49%;}
/* .formpartleft .formpart a.btn, .formpartleft .formpart div, .formpartright .formpart a.btn, .formpartright .formpart div {padding:15px 10px;} */

.formpart {float:left;display:inline-block;width:100%;color:#58a;
    border:1px solid #bbb;border-top:none;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.formpart a{color:#58a;}
.formpart div { 
    float:left;margin:0;padding:15px 2%;height:15px;line-height:15px;
    font-size:100%;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.formpart a.btn { 
    float:left;margin:0;padding:15px 13px;height:15px;line-height:15px;
    font-size:100%;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}

.formpart.top {margin-top:20px;border-top:1px solid #bbb;border-radius:5px 5px 0 0;background:#777;color:#fff;}
.formpart.top:hover {background:#777;}
.formpart:hover {background:#ffd;}
.formpart.empty {background:#777;} .formpart.empty:hover {background:#777;}
.formpart.bottom {border-radius:0 0 5px 5px;}

.formpart .left {text-align:center;width:20px;border-right:1px solid #bbb;font-weight:500;}
.formpart .part {border-right:1px solid #bbb;overflow:hidden;}
.formpart .part.part100 {width:100px}
.formpart .part.part200 {width:200px}
@media all and (max-width: 799px) {
    .formpart {margin-bottom:15px;border-top:1px solid #bbb;}
    .formpart.top {margin-bottom:15px;border-top:0;}
    .formpart .title {width:96% !important;}
    .formpart .part.part100 {width:36%;}
    .formpart .part.part200 {width:calc(56% - 2px);border:0;}
    .phonehide {display:none;width:0;height:0;}
}

.formpart a.btn {float:right;background:#999;border-left:1px solid #bbb;cursor:pointer;}
.formpart a.btn:hover {background:#777;}
.formpart a.btn.green {background:#3d3;} .formpart a.btn.green:hover {background:#3b3;}
.formpart a.btn.blue {background:#5af;} .formpart a.btn.blue:hover {background:#39e;}
.formpart a.btn.disabled {background:#ddd !important;pointer-events:none;cursor:default;}
.formpart a.btn.right {background:#e00;} .formpart a.btn.right:hover {background:#c00;}
.formpart .title {font-weight:500;}
.formpart a.white {background:none;} .formpart a.white:hover {background:#ada;}
.formpart a.empty:hover {background:none;} .formpart a.empty img {opacity:.1;}

.formpart.child {background:#efefef;} .formpart.child:hover {background:#ddd;}
.formpart.child a, .formpart.child div {font-weight:300;font-size:90%;color:#777;}
.formpart.child .left {border-left:4px solid #bbb;width:16px;}
.formpart.childchild {background:#ddd;} .formpart.childchild:hover {background:#aaa;}
.formpart.childchild a, .formpart.childchild div {font-weight:300;font-size:80%;color:#777;}
.formpart.childchild .left {border-left:8px solid #bbb;width:12px;}
.formpart img {vertical-align:middle;margin:0;}

a.editbtn {float:right;background:#fff;padding:10px 10px 5px 10px;margin-top:20px;
    border-radius:8px;border:1px solid #aaa;}
a.editbtn:hover {background:#eee;border:1px solid #777;}
a.editbtn img {opacity:.7;}
a.editbtn:hover img {opacity:1;}

@media all and (max-width: 799px) {
    .formpartleft, .formpartright {width:100%;}
    .formpart .title {display:block;
        border-bottom:1px solid #bbb;border-top:1px solid #bbb;}
}

td.control {margin:0;padding:0;}
td.control .inputform {margin:0 !important;border:0 !important;}

.backbutton {
    display:inline-block;margin:0 5px 5px 0;padding:0;height:40px;width:40px;
    border:1px solid #ccc;border-radius:20px;
    vertical-align:middle;cursor:pointer;background:url('../img/arrow1.jpg');
    -webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.backbutton:hover {border:1px solid #d33;border-radius:20px;background:url('../img/arrow2.jpg');}
.backbutton.none {cursor:default;}
.backbutton.none:hover {border:1px solid #ccc;border-radius:20px;background:url('../img/arrow1.jpg');}

.searching {display:none;}

.status {display:block;padding:10px;margin-bottom:20px;
    border:3px solid #000;background:#ddd;color:#000;}
.status.red {border:3px solid #f00;background:#fcc;color:#f00;}
.status.green {border:3px solid #0a0;background:#dfd;color:#0a0;}
.status.blue {border:3px solid #38f;background:#def;color:#38f;}

.modalDialog {position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.8);
    z-index:99999;pointer-events:none;opacity:0;-webkit-transition:opacity 400ms ease-in;
    -moz-transition:opacity 400ms ease-in;transition:opacity 400ms ease-in;}
.modalDialog:target {opacity:1;pointer-events:auto;}
.modalDialog img {height:450px;max-width:100%;}
.modalDialog .close {
	background:#0ac;color:#FFF;line-height:40px;position:absolute;top:-10px;right:-12px;z-index:99999;
	text-align:center;width:40px;text-decoration:none;font-weight:bold;border-radius:20px;
	-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;}
.modalDialog .close:hover { background:#0df; }
.modalBox {width:70%;position:relative;margin:10% auto;border-radius:10px;padding:20px;
    background:#fff;text-align:center;}
.modalBottom {border-top:1px solid #ccc;margin-top:20px;}
    
@media all and (max-width: 799px) {
    .modalDialog img {height:auto;width:100%;}
    .modalBox {width:calc(100% - 40px);margin:0;border-radius:0;overflow:scroll;}
    .modalDialog .close {top:15px;right:15px;}
    .modalBottom {margin-top:10px;font-size:10px !important;}
}

.viewbtn {float:right;margin:0;padding:0;overflow:none;}
.viewbtn a{
    float:left;margin:0;padding:15px 13px;height:15px;line-height:15px;cursor:pointer;
    background:#ddd;right:0;
    font-size:100%;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.viewbtn a:hover {background:#bbb;}
.viewbtn a.left {border-radius:5px 0 0 5px;}
.viewbtn a.middle {border-left:1px solid #999;}
.viewbtn a.right {border-left:1px solid #999;border-radius:0 5px 5px 0;}

.viewbtn a.clicked {background:#bbb;}
.viewbtn a.clicked:hover {background:#999;}

.gallery-container { width:100%;margin:0;padding:0; }
.gallery-container a {
    margin:1.25vw;width:15vw;height:15vw;display:inline-block;padding:1vw;
    border:1px solid #ccc;border-radius:5px;
    line-height:15vw;text-align:center;vertical-align:middle;overflow:hidden;}
.gallery-container img {max-height:100%;max-width:100%;}

@media all and (max-width: 799px) {
    .gallery-container a {
        margin:1vw;width:40vw;height:40vw;line-height:40vw;}
    .gallery-container img {max-height:80%;max-width:80%;}
}


@media all and (max-width: 799px) {
    iframe {width:100%;}

    .textbox.half {width:100%;}
        
    #site-footer {margin:0;padding:15px 5%;font-size:80%;}

	.datatable.responsive table,.datatable.responsive tbody,
        .datatable.responsive td,.datatable.responsive tr{display:block;}
	.datatable.responsive thead {display:none;}
	.datatable.responsive tr {border:1px solid #ccc;margin-bottom:20px;}
    .datatable.responsive tr:hover {background:none;}
    .datatable.responsive tr.childhead:hover {background:none;}
    .datatable.responsive tr:hover:nth-of-type(odd) {background:#eee;}
    .datatable.responsive th {border:0;padding:8px 10px;font-weight:500;background:none;}
	.datatable.responsive td {
		position:relative;border:0;min-height:1em;padding-left:100px;
        text-align:left;vertical-align:top;}
	.datatable.responsive td:before {
		position:absolute;top:8px;left:10px;text-align:left;white-space:nowrap;}
    
    .datatable.responsive.news td:nth-of-type(1):before { content: "ID"; }
	.datatable.responsive.news td:nth-of-type(2):before { content: "標題"; }
	.datatable.responsive.news td:nth-of-type(3):before { content: "內容"; }
	.datatable.responsive.news td:nth-of-type(4):before { content: "操控"; }
    
    .datatable.responsive.users td:nth-of-type(1):before { content: "ID"; }
	.datatable.responsive.users td:nth-of-type(2):before { content: "用戶名"; }
	.datatable.responsive.users td:nth-of-type(3):before { content: "姓"; }
	.datatable.responsive.users td:nth-of-type(4):before { content: "名"; }
    .datatable.responsive.users td:nth-of-type(5):before { content: "用戶類型"; }
	.datatable.responsive.users td:nth-of-type(6):before { content: "電話"; }
	.datatable.responsive.users td:nth-of-type(7):before { content: "電郵"; }
	.datatable.responsive.users td:nth-of-type(8):before { content: "操作"; }
}

@media all and (min-width: 800px) and (max-width: 1049px) {
    .datatable th.optional,.datatable td.optional {display:none;}
}
@media all and (min-width: 800px) and (max-width: 1249px) {
    .datatable th.optional2,.datatable td.optional2 {display:none;}
}


/* progress bar style */
#progressbox {
    margin:10px auto;padding:1px; position:relative;display:none;width:350px;
	border:1px solid #d00;border-radius:3px;}
#progressbar {height:22px;border-radius:3px;background-color:#f00;width:1%;}
#statustxt {top:0;left:47%;position:absolute;display:inline-block;color:#000;}


.ui-datepicker th {line-height:20px;}
.ui-datepicker td {line-height:0;}