﻿/* cuscosky table view style*/
@charset "utf-8";

div.cuscosky {
    max-width: 100%;
    padding: 10px 20px 50px 20px;
}

    div.cuscosky fieldset {
        border: 1px solid #ddd;
        padding: 0 1.4em 1.4em 1.4em;
        margin: 0 0 1.5em 0;
    }

        div.cuscosky fieldset > legend {
            font-size: 1.2em;
            color: #3F4444;
        }

        div.cuscosky fieldset table th {
            text-align: right;
            width: 120px;
            line-height: 25px;
        }

        div.cuscosky fieldset table td {
            width: auto;
            line-height: 25px;
            margin: 0 0 10px 0;
            padding-left: 10px;
        }

        div.cuscosky fieldset input[type="text"],
        div.cuscosky fieldset input[type="password"],
        div.cuscosky fieldset input[type="number"] {
            border: 1px solid #ccc;
            padding: 2px;
            font-size: 1.2em;
            color: #444;
            width: 200px;
        }

        div.cuscosky fieldset button {
            padding: 2px 4px;
            font-size: 1.2em;
            color: #444;
        }


        div.cuscosky fieldset textarea {
            min-height: 75px;
        }

        div.cuscosky fieldset select {
            border: 1px solid #ccc;
            padding: 2px;
            font-size: 1em;
            color: #444;
        }

        div.cuscosky fieldset input[type="submit"],
        div.cuscosky fieldset input[type="button"] {
            font-size: 1.1em;
            padding: 5px;
            font-family: 'Microsoft JhengHei','微軟正黑體';
        }




    div.cuscosky > table {
        border-collapse: collapse;
        border: 3px solid #F5F5F5;
        border-top: 5px double #3F4444;
        border-bottom: 5px double #3F4444;
        width: 100%;
    }

        div.cuscosky > table > thead > tr > th {
            padding: 5px 10px;
            font-variant: small-caps;
            color: #3F4444;
            font-weight: bold;
            text-align: center;
            letter-spacing: -1px;
            border: 1px solid #3F4444;
            background: #DDDDDD;
            white-space: nowrap;
        }

        div.cuscosky > table > tbody > tr > th,
        div.cuscosky > table > tbody > tr > td {
            padding: 4px;
            text-align: center;
        }

        div.cuscosky > table > tbody > tr > th {
            font-weight: bold;
        }

        div.cuscosky > table > tbody > tr {
            background: #FCFDFE;
        }

            div.cuscosky > table > tbody > tr:nth-of-type(even) {
                background: #DDDDDD;
                border: 1px solid #3F4444;
            }

                div.cuscosky > table > tbody > tr:nth-of-type(even) > td,
                div.cuscosky > table > tbody > tr:nth-of-type(even) > th {
                    background: #DDDDDD;
                }

        div.cuscosky > table > tfoot > tr > td,
        div.cuscosky > table > tfoot > tr > th {
            border: none;
            padding-top: 10px;
            text-align: center;
        }

        div.cuscosky > table a:link {
            padding: 4px;
            color: #3F4444;
            text-decoration: none;
        }

        div.cuscosky > table a:visited {
            padding: 4px;
            color: #036;
            text-decoration: line-through;
        }

        div.cuscosky > table a:hover {
            padding: 4px;
            color: #000;
            text-decoration: none;
        }

        div.cuscosky > table a:active {
            padding: 4px;
            color: #000;
        }

    /*分頁用的*/
    div.cuscosky > div#pager {
        margin: 2em 0px 2em 12px;
        height: 2em;
        color: #3666d4;
        clear: both;
        font-size: 13px;
    }

        div.cuscosky > div#pager a {
            text-align: center;
            border: #ccdbe4 1px solid;
            padding: 2px 8px;
            margin: 0px 5px 0px 0px;
            display: block;
            float: left;
            color: #3666d4;
            text-decoration: none;
        }

            div.cuscosky > div#pager a:hover {
                border-bottom-color: #2b55af;
                border-top-color: #2b55af;
                background: #3666d4;
                color: #fff;
                border-right-color: #2b55af;
                border-left-color: #2b55af
            }

            div.cuscosky > div#pager a.pgEmpty {
                visibility: hidden; /*Pager才不會左移右移*/
            }

            div.cuscosky > div#pager a.pgCurrent {
                border: 0px;
                font-weight: bold;
                color: #000000;
                cursor: text;
            }

                /*追加此樣式*/
                div.cuscosky > div#pager a.pgCurrent:hover {
                    background: #ffffff;
                    color: #000000;
                }

    div.cuscosky > ul.dynatable-pagination-links {
        margin: 0;
        padding: 0;
    }

        div.cuscosky > ul.dynatable-pagination-links > li {
            list-style: none;
            margin: 2em 0px 2em 12px;
            display: inline-block;
        }

            div.cuscosky > ul.dynatable-pagination-links > li:nth-of-type(1) {
                display: none;
            }

            div.cuscosky > ul.dynatable-pagination-links > li a,
            div.cuscosky > ul.dynatable-pagination-links > li span {
                text-align: center;
                font-size: 13px;
                margin: 0px 5px 0px 0px;
                display: inline-block;
                color: #3F4444;
                border: #3F4444 1px solid;
                text-decoration: none;
                padding: 8px 10px;
                cursor: pointer;
            }

            div.cuscosky > ul.dynatable-pagination-links > li span {
                cursor: none;
            }

            div.cuscosky > ul.dynatable-pagination-links > li a:hover {
                border-color: #3F4444;
                background: #3F4444;
                color: #fff;
            }

            div.cuscosky > ul.dynatable-pagination-links > li a.dynatable-active-page {
                border-color: #3F4444;
                background: #3F4444;
                color: #fff;
            }
