/*  注意以下所有的 css 名稱不要覆蓋基本元素 , 基本元素讓網頁主要的 css 來做處理!  */

/*
    *: IE 7 以前的版本認得(7以後的不知道, 還沒出..) 
    _: IE 7 不認得, IE 6 以前的版本認得_
    Firefox 不認得 _, *
*/

/*  --------------------------------------------------------------------------------------  */
/*  ---------- 以下為功能格式 ------------------------------------------------------------  */
/*  --------------------------------------------------------------------------------------  */

.zero { /* 盡量把格式扁平化 */ 
    margin:0;
}

.words{ /* 過長斷行使用 */
    word-break:break-all;      /* IE 過長的英文不換行, 直接接在字後面 */
    word-wrap:break-word;
    table-layout:fixed;        /* IE 截斷不顯示 , FF 跨過table直接顯示 */
}

.papers { /* 設定對齊的文章格式 */
    text-align:justify;      /* 針對英文設定 */
    text-justify:distribute; /* 針對中文設定 */
}

.pre{ /* 帶卷動框的pre格式 */
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    /* overflow:scroll; */
    width:750px;
    border:1px solid #999;
    padding:5px;
    font-size:16px;
    /* line-height: 22px;   */   /* 文字上下間格 */
    /* letter-spacing: 1px; */   /* 文字左右間格 */
}

.fonts-c { /* 以微軟正黑體為主軸的一個字體集 */
    font-family:"微軟正黑體","sans-serif","arial","helvetica","clean";
    font-size:15px;
    /* font-weight: bold; */
}
.fonts-c-pre { /* 以微軟正黑體為主軸 */
    font-family:"微軟正黑體","sans-serif","arial","helvetica","clean";
}




/*  --------------------------------------------------------------------------------------  */
/*  ---------- 以下為畫面格式 ------------------------------------------------------------  */
/*  --------------------------------------------------------------------------------------  */

.table01 { /* 簡潔式線條風格 */
    padding: 1px 1px 1px 1px;
    border-width: 1px;
    border-spacing: ;
    border-style: outset; /* outset none hidden dotted dashed solid double ridge groove inset */
    border-color: #000000;
    border-collapse: collapse; /* separate collapse  */
    background-color: #000000;
}
.table01 th {
    border-width: 1px;
    padding: 1px 1px 1px 1px;
    border-style: outset;
    border-color: black;
    background-color: #d0d7bb;
    -moz-border-radius: ;
}
.table01 td {
    border-width: 1px;
    padding: 1px 1px 1px 1px;
    border-style: outset;
    border-color: black;
    background-color: white;
    -moz-border-radius: ;
}

.table02 { /* 綠彩風 無線條格式 */
    /* background-color: #99cc00; */
}
.table02 th {
    background-color: #99cc00;
    text-align: left;
    padding: 5px 5px 5px 5px;
    height:40px;
}
.table02 td {
    /* background-color: #ffffff; */
    text-align: left;
    padding: 5px 5px 5px 5px;
    vertical-align: top;
    height:30px;
}

.table-goo-b { /* google簡約式 blus   */ background:#e5ecf9; border-top:1px solid #3366cc; /* border-bottom:1px solid #3366cc; */ color:#000;}
.table-goo-o { /* google簡約式 orange */ background:#fff4c2; border-top:1px solid #ffcc33; /* border-bottom:1px solid #ffcc33; */ color:#000;}
.table-goo-y { /* google簡約式 yellow */ background:#F4F3D5; border-top:1px solid #FFC68F; /* border-bottom:1px solid #FFC68F; */ color:#000;}
.table-goo-g { /* google簡約式 green  */ background:#dcf6db; border-top:1px solid green;   /* border-bottom:1px solid green;   */ color:#000;}
.table-goo-w { /* google簡約式 while  */ background:#f7f7f7; border-top:1px solid while;   /* border-bottom:1px solid while;   */ color:#000;}




/*  --------------------------------------------------------------------------------------  */
/*  ---------- 以下為條列的畫面格式 ------------------------------------------------------  */
/*  --------------------------------------------------------------------------------------  */

.ul01 { /* 簡約風，圖形符號的 li 開頭標示 */
    width: 300px; /* A fixed width to display the images correctly below eachother. */
    float: left; /* Always stay on the left side of the #core_container. */
    height: auto; /* Height is automaticlly calculated. No need to set it. */
    /* background-color: #FFFFFF; */
}
.ul01 a,
.ul01 a:link,
.ul01 a:visited {
    color: #aa0000; /* All links, visited or not are black. */
}
.ul01 a:hover {
    color: #00ACF4; /* Oceanblue linktext on hover. */
}
.ul01 img { 
    border: 0; /* The images on the left may not have a border. */
}
.ul01 ul { /* this is the ul styles for core_left. */
    list-style: none; /* No dot in the list please. */
    list-style-type: none;
    padding-left: 0px; /* Get yourself to the left of the page. */
    margin-left: 0; /* IE needs this to do the same as stated above... */
}
.ul01 li { /* The contents of core_left is presented in an unordered list. Here it is. */
    font-size: 15px; /* Fontsize and styling. */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.ul01 p { /* 用 p 標籤來做縮小字與非粗體的標示 */
    font-weight: normal;
    margin-top:    5px; /* 文字與上方的距離 */
    margin-bottom: 5px; /* 文字與下方的距離 */
}




.img_list01 { /* 可以適時的取代 table 做為排列圖片的功能, 加上 width 值之後, 大致上就可以確保排列的數量 */
    list-style-type: none;
    margin:0;
    padding:0;
    float:left;
}
.img_list01 li {
    margin:0;
    padding:0;
    float:left;
}




/*  --------------------------------------------------------------------------------------  */
/*  ---------- 以下為 form 的畫面格式 ----------------------------------------------------  */
/*  --------------------------------------------------------------------------------------  */

/*  ----------------------------------------------------------------------------
    form type css class , 做為 css form 的統一標準
    h1,h2,h3 表 大標(靠中)
    h4,h5,h6 表 元件說明文(靠右)
    label    表 元件說明文(靠右) , 基本上請用這個為準
----------------------------------------------------------------------------- */
.form_type form {
    display: block;
    /* background-color:#ddeeff; */
    margin: 0;
    padding: 0;
    font-size:16px;
    text-align: left; /* form 裡面沒有設定的 "文字" 都請靠左 */

    padding: 10px 10px 10px 10px;
    border-width: 1px;
    border-style: outset; /* outset none hidden dotted dashed solid double ridge groove inset */
    border-color: #000000;

    word-break:break-all; /* 這三個是處理文字過行要斷行的問題 */
    word-wrap:break-word;
    table-layout:fixed;  

    /*
    min-width: 780px;
    max-width: 780px;
    width: 780px;
    */
}

.form_type h1,
.form_type h2,
.form_type h3 {
    margin-top:    10px; /* 文字與上方的距離 */
    margin-bottom: 10px; /* 文字與下方的距離 */
    padding-right: 10px; /* 文字與右邊的距離 */
    text-align: center;
}

.form_type label,
.form_type h4,
.form_type h5,
.form_type h6 {
    font-weight: bold;
    display: block; 
    float: left; 
    text-align: right; 
    width: 200px;         /* 設定顯示小標的地方，要多長 */
    margin-bottom:  1px;  /* 文字與下方的距離 */
    padding-right: 10px; 

}

.form_type input,
.form_type textarea {
    margin-bottom: 1px;  /* 文字與下方的距離 */
    border-left:  1px solid #aaaacc; /* 細線框 */
    border-right: 1px solid #aaaacc;
    border-top:   1px solid #aaaacc;
    border-bottom:1px solid #aaaacc;

    /*
    float: left;
    display: block;
    margin-bottom: 10px;  文字與下方的距離
    */

}

.form_type br {
    clear: left;
}

/*  ----------------------------------------------------------------------------
    form basic css class , 做為 css form 的統一標準
    label    表 元件說明文(靠右) , 很一般的表
----------------------------------------------------------------------------- */
.form_basic form {
    display: block;
    margin: 0;
    padding: 0;
    text-align: left; /* form 裡面沒有設定的 "文字" 都請靠左 */

    padding: 10px 10px 10px 10px;
    border-width: 1px;
    border-color: #000000;

    word-break:break-all; /* 這三個是處理文字過行要斷行的問題 */
    word-wrap:break-word;
    table-layout:fixed;  
}
.form_basic label {
    font-weight: normal;
    display: block; 
    float: left; 
    text-align: right; 
    width: 200px;         /* 設定顯示小標的地方，要多長 */
    height:26px;
    margin-bottom:  1px;  /* 文字與下方的距離 */
    padding-right: 10px; 

}
.form_basic input,
.form_basic textarea {
    margin-bottom: 1px;  /* 文字與下方的距離 */
}
.form_basic br {
    clear: left;
}