﻿
.fieldset2 {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #f9fdff);
    background: -o-linear-gradient(#fff, #f9fdff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff));
    background: -webkit-linear-gradient(#fff, #f9fdff);
    padding: 20px;
    border: 2px solid rgba(4, 129, 177, 0.4);
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.legend2 {
    background-color: #fff !important;
    color: #0481b1 !important;
    padding: 0 10px !important;
    background: #fff !important;
    -moz-border-radius: 4px !important;
    box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5) !important;
    padding: 5px 10px !important;
    text-transform: uppercase !important;
    font-family: Helvetica, sans-serif !important;
    font-weight: bold !important;
    font-size: 1.25em !important;
    border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    position: absolute !important;
    left: 20px !important;
    top: -11px !important;
}
@media only screen and (max-width: 9999px) {
    #mainFrameContent .fieldset2 {
        max-width: 1400px;
        width: 100%;
    }
        #mainFrameContent .fieldset2 .fieldset2Table {
            max-width: 1400px !important;
            width: 90% !important;
        }
}

@media only screen and (max-width: 1600px) {
    #mainFrameContent .fieldset2 {
        max-width: 1400px ;
        width: 100% ;
    }
        #mainFrameContent .fieldset2 .fieldset2Table {
            max-width: 1400px !important;
            width: 90% !important;
        }
}

@media only screen and (max-width: 1400px) {
    #mainFrameContent .fieldset2 {
        max-width: 100% ;
        width: 100% ;
    }
        #mainFrameContent .fieldset2 .fieldset2Table {
            max-width: 100% !important;
            width: 100% !important;
        }
}

.fieldset2Table {
    padding: 1px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

    .fieldset2Table tr {
        padding: 1px !important;
        margin: 1px !important;
        border-bottom: solid 1px rgba(220, 220, 220, 0.4) !important;
    }

    .fieldset2Table th {
        color: #4c4c4c !important;
        vertical-align: central !important;
        font-family: Arial, sans-serif !important;
        font-size: 1.1em !important;
        font-weight: normal;
        /*padding: 10px 5px !important;*/
        border-style: none !important;
        /*border-width: 1px !important;*/
        overflow: hidden !important;
        word-break: normal !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        /*background-color: #efefef !important;*/
        /*text-align: center !important;*/
        /*margin: 10px !important;*/
    }

    .fieldset2Table td {
        /*padding: 1px !important;*/
        vertical-align: central !important;
        background-color: #ffffff !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        /*margin: 10px !important;*/
    }



/*Media Query ，也就是當寬度 < 768 px 時將載入下面這段 CSS :*/
@media only screen and (max-width: 768px) {
     #mainFrameContent .fieldset2 {
            width: 90% !important;
        } 
    .fieldset2Table {
         width: 99% !important;
     }
     .fieldset2Table tr { 
		display: block; 
	}
    .fieldset2Table th:before, .fieldset2Table td:before {
        content: attr(data-th) ":　";
        width: auto;
        display: inline-block;
    }

    .fieldset2Table th {
        display: none;
    }
    .fieldset2Table td {
        display: block;
    }
}


/* Media Query ，也就是當寬度 < 480 px 時將載入下面這段 CSS :*/
@media only screen and (max-width: 480px) {
    #mainFrameContent .fieldset2 {
    width: 90% !important;
}
    .fieldset2Table{width: 99%; }
     .fieldset2Table tr { 
		display: block; 
	}
    .fieldset2Table th:before, .fieldset2Table td:before {
        content: attr(data-th) ":　";
        width: auto;
        display: inline-block;
    }

    .fieldset2Table th {
        display: none;
    }
     .fieldset2Table td {
        display: block;
    }
}
/*Media Query ，也就是當寬度 < 320 px 時將載入下面這段 CSS :*/
@media only screen and (max-width: 320px) {
        #mainFrameContent .fieldset2 {
            width: 90% !important;
        }
    .fieldset2Table{width: 99%; }
    .fieldset2Table td:before, .fieldset2Table td:before {
        content: attr(data-th) ":　";
        width: auto;
        white-space: nowrap;
        position: absolute;
        display: inline-block;
    }
     .fieldset2Table tr { 
		display: block; 
	}
    .fieldset2Table th {
        display: none;
    }
     .fieldset2Table td {
        display: block;
    }
}
