@charset "utf-8";
/*CSS Info ======================================================================
File Name: Grid.css
Create Editor: Sophia,Eliam
Create Date: 2012/06/19
Last Editor: Sophia
Last Date: 2015/6/2
Version： 1.5.3
---------------------------
【 風格 】
	菊暖蘭系
	jq：jquery-ui-1.10.4.custom(LyallCMS)
   font-awesome：font-awesome 4.3.0  http://fortawesome.github.io/Font-Awesome/

【 Table of Contents 】
	MyGridView	自訂寬度
	MyGridView2	100%寬度
		MyHead
		MyRow
		MyAlt
		MyPager
		MyOver
	MyTable
		Alt
		Over
	MyQueryArea	查詢區域(預設寬度100%) 
	CommandArea 按鈕列置中
	btn			三種按鈕樣式含變換       (不使用圖片)
	修正jQuery UI
=================================================================================*/

/*===============================================================================
                           Grid View 或列表表格設定 
=================================================================================*/
.MyGridView, .MyGridView2 { /*MyGridView2寬度自訂*/
    /*border-bottom: 1px solid #cdc3b7;*/
    font-size: 1em;
    color: #297D6B;
    padding: 3px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background: #fff;
}

.MyGridView {
    width: 100%;
}

    .MyGridView caption, .caption {
        color: #5E4C0F;
        font-size: 1.15em;
        letter-spacing: 0.1em;
        padding: 0 10px;
        margin: 0 0 0 0;
        caption-side: top;
        text-align: center;
        font-weight: bold;
        line-height: 2em;
        font-family: "Arial", "\5FAE\8EDF\6B63\9ED1\9AD4";
    }

    .MyHead, .MyGridView tr.MyHead th, .MyGridView th, .MyGridView2 th {
        color: #00573D;
        font-weight: bold;
        font-family: "\5FAE\8EDF\6B63\9ED1\9AD4", Arial;
        font-size: 1.15em;
        padding: .8rem;
        background-color: #B0E1D6;
    }

    .MyGridView th {
        vertical-align: middle;
    }

        .MyHead a, .MyGridView th a {
            color: #e96b00;
        }

            .MyHead a:hover, .MyGridView th a:hover {
                color: #a45919;
            }

    .MyGridView tr.MyHead th, .MyGridView2 tr.MyHead th {
        text-align: center;
    }

    .MyGridView tr.MyHead td {
    }

    .MyRow, .MyGridView td, .MyGridView2 td {
        color: #888;
    }

        .MyGridView td, .MyGridView2 td, .MyRow td, .MyAlt td {
            max-width: 300px;
            min-width: 100px;
            padding: 0.7em;
            vertical-align: middle;
            text-align: center;
        }

            .MyRow a, .MyGridView td a, .MyGridView2 td a {
                color: #F57004;
            }

                .MyRow a:hover, .MyGridView td a:hover, .MyGridView2 td a:hover {
                    color: #ADD60F;
                }

.MyAlt {
    /*padding: 2px;*/
    background:var(--GrayLight1);
}

    .MyAlt a {
        color: #8aae00;
    }

        .MyAlt a:hover {
            color: #769304;
        }

.MyPager {
    font-size: .9em;
    padding: 2px;
    background: #f2ece0;
    text-align: right;
    color: #5E4C0F;
}

div.MyPager {
    margin-top: 2px;
    padding: 5px;
    background: none;
    color: #5E4C0F;
    line-height: 33px;
}

    div.MyPager .Alert {
        color: #d36201;
    }

.MyOver, .MyHighlight {
    background-color: var(--Orange2);
}

/*===============================================================================
                           FontView、DetailVeiw套用 
=================================================================================*/
.Mytable {
    width: 100%;
/*    border-top: 2px solid #cdc3b7;
    border-bottom: 1px solid #cdc3b7;*/
    padding: 3px;
    border-collapse:collapse;
    /*margin-bottom: 5px;*/
    font-size: 1em;
    line-height: 1.5em;
    background:#fff;
}

    /*.Mytable caption, .MyCaption {*/ /*表格標題*/
        /*color: #5E4C0F;
        font-size: 1.15em;
        letter-spacing: 0.1em;
        padding: 0 10px;
        margin: 0 0 0 0;
        caption-side: top;
        text-align: center;
        font-weight: bold;
        line-height: 2em;
        font-family: "Arial", "\5FAE\8EDF\6B63\9ED1\9AD4";
    }*/
    .Mytable th {
        font-weight: normal;
        color: #00573D;
        text-align: right;
        padding: 5px;
        width: 15%;
        border-bottom: 1px dotted #cdc3b7;
        background-color: #DCEAE7;
        vertical-align: middle;
    }
        .Mytable th:last-child {
            border-bottom: none;
        }

    .Mytable .odd { /*奇數行*/
        /*background-color: #fbf9f8;*/
        background-color: #ffffff;
    }

    .Mytable .even { /*偶數行*/
        background-color: #ffffff;
    }

    .Mytable td {
        color: #141A26;
        padding: 5px;
        text-align: left;
        border-top: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
        vertical-align: middle;
    }

/*        .Mytable th:first-child {
            border-top: 1px dotted #cdc3b7;
        }*/

    .Mytable thead th {
        background-color: #DCEAE7;
        font-family: "Arial", "\5FAE\8EDF\6B63\9ED1\9AD4";
        font-size: 1.1em;
        color: #00573D;
        text-align: center;
        font-weight: bold;
        padding: 5px;
        vertical-align: middle;
    }

    .Mytable td table {
        padding: 0;
        margin: 0 1px 0 0;
        /*border: 1px solid #ccc;23797b*/
        /*border-top: 2px solid #cdc3b7;*/
        /*border-bottom:1px solid #44c5f3;*/
    }

        .Mytable td table td {
        }
.MyDataShow {
    /*border-top: 1px solid #236C5C;*/
    border-bottom: 2px solid #236C5C;
}

.MyDataShow .Mytable {
    font-size:1.1rem;
}
    .MyDataShow .Mytable th, .MyDataShow .Mytable td{
        padding:8px; 
    }
.MyDataShow .Mytable th{
    font-weight:bold;
}
    .MyDataShow input[type="text"] {
        width: 40%;
    }
    .MyDataShow input.textarea, .MyDataShow textarea {
        width: 100%;
        height: 100px;
        box-sizing:border-box;
    }
    /*===============================================================================
                           查詢區域 套用 
=================================================================================*/
    .MyQueryArea {
        border: 1px dashed #B0E1D6;
        border: 0px\9;
        background-color: #fff\9;
        padding: 5px;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        /*behavior: url(JS/ie-css3.htc);*/ /*--ie用圓角套件--*/
        margin-bottom: 30px;
    }

.preMyQueryArea { /*--for ie 圓角 JS 產生父層物件 (搭配jq-Corner)--*/
    background-color: #e0cfc2;
    margin-bottom: 10px;
}

.MyQueryArea table {
    width: 100%;
    padding: 5px;
    font-size: 1em;
}

    .MyQueryArea table caption {
        text-align: left;
        font-size: 1.15em;
        line-height: 1.7em;
        color: #A05311;
        font-weight: bold;
        font-family: Arial, "\5FAE\8EDF\6B63\9ED1\9AD4", Helvetica, sans-serif;
    }

    .MyQueryArea table th {
        font-size: 1em;
        text-align: right;
        width: 8em;
        padding: 1.2em;
        padding-right: 0.75em;
        color: #297D6B;
        vertical-align: middle;
    }

    .MyQueryArea table td {
        font-size: 0.8em;
        text-align: left;
        padding: 2px;
        vertical-align: middle;
    }
    .MyQueryArea table.view td {
        font-size: 1em;
    }

        .MyQueryArea table th img, .MyQueryArea table td img {
            vertical-align: middle;
        }

    .MyQueryArea table select, .MyQueryArea table label, .MyQueryArea table input {
        color: #555;
    }

.MyQueryArea select {
    font-size: 1.1rem;
    line-height:2rem;
    /*border: 1px solid #CCC;*/
}

.MyQueryArea table label {
   /* font-size: 1.25em;*/
    vertical-align: middle;
    font-size: 1.1rem;
    line-height: 2.2rem;
}

.MyQueryArea input[type="text"], .MyQueryArea textarea {
    /* border: 1px solid #CCC; */
    font-size: 1.1rem;
    padding: 0 5px;
    line-height: 2rem;
}


.CommandArea { /*-------------------------- 按鈕列 --------------------------*/
    text-align: center;
    margin: 10px 5px 10px 5px;
}

.MyQueryArea .CommandArea {
    margin: 20px 0 15px 0;
}

    .MyQueryArea .CommandArea .btn {
        color: #CCC;
    }

/*===============================================================================
                           按鈕 套用 
=================================================================================*/
.btn {
    color: #fff;
    border: 1px solid #0d8db1;
    background-color: #12A1CA;
    font-size: 1.15em;
    line-height: 1.2em;
    margin: 0px;
    padding: 0px;
    /*font-weight: bold;*/
    padding: .25em .75em;
    display: inline-block;
    /*position: relative;*/
    *text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible; /* the overflow property removes extra width in IE */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
    .btn:hover {
        background-color: #0C86A8;
    }

    .btnMap, .MyQueryArea .CommandArea .btn.btnMap, .MyQueryArea .btn.btnMap {
        background-color: #de3395;
        color: #fff;
        border: 1px solid #de6cad;
    }

.btnFile, .MyQueryArea .CommandArea .btn.btnFile, .MyQueryArea .btn.btnFile {
    background-color: #add60f;
    color: #586d05;
    border: 1px solid #add60f;
}


.btn.Over {
    background-color: #DCEAE7;
    color: #2FA189;
    border: 1px solid #2FA189;
}
    .btn.Over:hover {
        background-color: #0d8db1;
        color: #fff;
    }

.btnMap.btn.Over, .MyQueryArea .CommandArea .btn.btnMap.Over, .MyQueryArea .btn.btnMap.Over {
    background-color: #C8E5F8;
    color: #12A1CA;
    border: 1px solid #12A1CA;
}
    .btnMap.btn.Over:hover, .MyQueryArea .CommandArea .btn.btnMap.Over:hover, .MyQueryArea .btn.btnMap.Over:hover {
        background-color: #12A1CA;
        color: #fff;
    }

.btnFile.btn.Over, .MyQueryArea .CommandArea .btn.btnFile.Over, .MyQueryArea .btn.btnFile.Over {
    background-color: #cdf145;
    color: #617903;
    border: 1px solid #cdf145;
}

.btnDelete.btn.Over, .MyQueryArea .CommandArea .btn.btnDelete.Over, .MyQueryArea .btn.btnDelete.Over {
    background-color: #FFCFCF;
    color: #FF3B3B;
    border: 1px solid #FF3B3B;
}
    .btnDelete.btn.Over:hover, .MyQueryArea .CommandArea .btn.btnDelete.Over:hover, .MyQueryArea .btn.btnDelete.Over:hover {
        background-color: #FF3B3B;
        color: #fff;
    }

.MyQueryArea .CommandArea .btn, .MyQueryArea .btn, .MyQueryArea2 .btn, .addConternt .CommandArea .btn, .MyDataShow .CommandArea .btn {
    border: 1px solid #EB7600;
    background: #FFA64D;
    color: #FFF;
}
    .MyQueryArea .CommandArea .btn:hover, .MyQueryArea .btn:hover, .MyQueryArea2 .btn:hover, .addConternt .CommandArea .btn:hover, .MyDataShow .CommandArea .btn:hover {
        background: #EC8620;
    }

    .MyQueryArea .CommandArea .btn.Over, .MyQueryArea .btn.Over {
        background-color: #EB7600;
    }

.btn.funcBtn {
    background: var(--GreenLight1);
    color: #fff;
    width: 150px;
}

    .btn.funcBtn:hover {
        background: #35AA91;
    }

    /*-----------------修正jQuery UI-----------------*/
    .ui-datepicker select.ui-datepicker-month {
        width: 30%;
    }

.ui-datepicker select.ui-datepicker-year {
    width: 40%;
}

.ui-datepicker-trigger {
    margin-left: 5px;
}
/*-----------------修正Font Awesome-----------------*/
.fa-input {
    font-family: FontAwesome, "\5FAE\8EDF\6B63\9ED1\9AD4", Arial;
}