/*

本樣式表用於設定內容區(maincon中的部分)所有元件的樣式，大多是設定ASP.NET元件樣式

*/

/*

/////////////////////////////////////////

color index:
-----------------------------------------
#023373 deep blue for bar bg
#024873 dark blue for text
#66bbd9 light blue for text on bar
#f2f2f2 vivid blue for bg or text
#000 red for emphasized parts
-----------------------------------------
/////////////////////////////////////////

*/


/*------------------------------------------------------

PageHint
-DIV框架
-內容區上方的文字提示

------------------------------------------------------*/

.PageHint{
font-weight:bold;
color:#023373;
margin-bottom:10px;
line-height:1.6em;
}

.PageHint p{
display:inline;
margin-right:10px;
}


/*------------------------------------------------------

schDIVclass
-DIV框架
-內容區上方的功能欄位

------------------------------------------------------*/

.schDIVclass{
width:99%;
/*padding-bottom:5px;*/
margin-bottom:10px;
border-bottom:0px solid #66bbd9;
text-align:left;
}

.schDIVclass input, .schDIVclass select{
font-size:16px;
line-height:normal;
border: 1px solid #66bbd9;
width:200px;
color: #023373;
/*padding:6px;*/
background:#f2f2f2;
color:#024873;
}

.schDIVclass .ButtonNormal{
width:auto;
padding:2px 6px;
text-align:center;
border: 0;
background: #b4db2b;
font-size: 16px;
line-height:normal;
margin-bottom: 10px;
margin-right:10px;
color:#000;
}


/*------------------------------------------------------

maincon h1
-資料列表或表單上方的標題

------------------------------------------------------*/

.maincon h1{
width:99%;
margin:0 auto 0 0;
text-align:left;
border-top:1px solid #66bbd9;
color:#023373;
font-size:24px;
line-height:normal;
font-weight:normal;
padding-top:10px;
margin-bottom:10px;
}


/*------------------------------------------------------

datatable
-.NET元件
-資料列表
-表格背景色寫在SkinFile的RowStyle
-"帳戶管理 > 刪除管理帳戶"中的td有光棒變化顏色，顏色設定寫在web.xml，非在本樣式表

datatable_album
-.NET元件
-相簿列表

imgItemClass
-相簿列表中的每一個相片單位

GridView表格中最上列標題的樣式：

RowName
-最上列標題的th共用樣式

.list_numberItem
-寬80px
-模組序號、模組編號...

.list_dateItem
-寬150px
-資料建立時間
-標題無連結

.list_longItem
-寬250px
-用於內容較寬的td

.list_PID_Class
-檔案編碼
-標題有連結

list_Pname_Class
-作品名稱

list_MID_Class
-會員帳號

list_GBMessage_Class
-留言內容

list_GBDate_Class
-最後修改時間 ▼
-標題有連結

dlist_page
-相簿中的頁數切換

GridView表格中的頁數切換：

PageSwitch
-asp:GridView skinID="GView2"內的cssclass
-套在tr標籤
-頁數切換


------------------------------------------------------*/

.datatable{
width:99%;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-collapse:collapse;
background:#f2f2f2;
}

.datatable a:link{color:#023373;}
.datatable a:visited{color:#023373;}
.datatable a:hover{color:#000;}
.datatable a:active{color:#023373;}

.datatable td{
padding:8px 0;
/*color:#023373;*/
text-align: center;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
vertical-align:middle;
}

.datatable .RowName th{
background:#023373;
color:#f2f2f2;
padding:16px 0;
text-align: center;
font-weight:normal;
border-right:1px solid #66bbd9;
border-left:1px solid #66bbd9;
border-top:1px solid #66bbd9;
vertical-align:middle;
}

.datatable .list_numberItem{
width: 80px;

}

.datatable .list_dateItem{
width: 150px;
}

.datatable .list_longItem{
width: 250px;
padding-left:10px;
/*padding-right:10px;*/
text-align:left;
white-space:normal;
word-break:break-all;
font-size:13px;
}

.datatable .list_PID_Class, .datatable .list_Pname_Class, .datatable .list_MID_Class{
width:100px;
}

.datatable th a:link{color: #f2f2f2;}
.datatable th a:visited{color: #f2f2f2;}
.datatable th a:hover{color: #90d8f1;}
.datatable th a:active{color: #90d8f1;}

.datatable .list_GBMessage_Class{
width:auto;
text-align:left;
}

.datatable .list_GBDate_Class{
width:150px;
}

.datatable_album{
background: #f2f2f2;
border-top:1px solid #ccc;
border-left:1px solid #ccc;

}

.datatable_album td{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
vertical-align:top;
text-align:center;
}

.datatable_dlclassroom{
background: #f2f2f2;
/*border-top:1px solid #ccc;
border-left:1px solid #ccc;*/

}

.datatable_dlclassroom td{
/*border-right:1px solid #ccc;
border-bottom:1px solid #ccc;*/
vertical-align:top;
text-align:center;
}

datatable_classroom{
background: #f2f2f2;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
width:13%;
}

.datatable_classroom td{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
vertical-align:middle;
text-align:center;
height:110px;
width:125px;
}

.imgItemClass{
width:auto;
margin: 20px auto;
vertical-align:top;
}

.imgItemClass_img{
height:150px;
width:90%;
background: #fff;
overflow:hidden;
margin:20px auto;
text-align:center;
vertical-align:middle;
border:1px solid #66bbd9;

}

.imgItemClass_img_Banner{
height:150px;
width:200px;
background: #fff;
overflow:hidden;
margin:20px auto;
text-align:center;
vertical-align:middle;
border:1px solid #66bbd9;

}

.footrow
{
text-align:center;
width:190px;
}

/*設定相簿圖片尺寸---------------------------*/
.imgItemClass_img img{
width:150px;
/*height:100%;*/
/*display:block;*/
margin:0 auto;
}

.imgItemClass .imgItemClass_note{
margin:10px auto;
vertical-align:top;
line-height:1.6;
width:90%;
}

.imgItemClass .imgItemClass_builddate{
margin:0px auto;
font-size:12px;
width:90%;
/*color:#66bbd9;*/
}

.imgItemClass_note_modify{
text-align:left;
margin:20px auto 4px auto;
width: 90%;
}

.imgItemClass_note_modify p{
width: 90%px;
text-align:left;
margin-bottom:6px;
}

.imgItemClass_modifyrow{
width: 90%px;
text-align:center;
margin:30px auto;
}

.dlist_page{
text-align:center;
margin:30px auto 0 auto;
font-size:18px;
font-weight:bold;
}

.dlist_page span{
border-right:1px solid #024873;
padding:0 2px;
}

.dlist_page a{
border-right:1px solid #024873;
padding:0 2px;
}



.PageSwitch td{
background:#f2f2f2;
}


.PageSwitch table{
border: 0;
margin:10px auto;
text-align: center;

}

.PageSwitch table td{
padding:0 20px;
border: 0;
border-right:1px solid #66bbd9;
font-size:16px;
font-weight:bold;
}





/*------------------------------------------------------

分類維護管理中的顏色設定

------------------------------------------------------*/


.color_one {color:#023373; font-style:italic;   }
.color_one a:link{color:#023373;  font-style:italic;  }
.color_one a:visited{color:#023373;  font-style:italic;  }
.color_one a:hover{color:#000;   font-style:italic; }
.color_one a:active{color:#000;  font-style:italic;  }

.color_two {color:#023373; font-weight:bold;   }
.color_two a:link{color:#023373; font-weight:bold;   }
.color_two a:visited{color:#023373; font-weight:bold;    }
.color_two a:hover{color:#000; font-weight:bold;    }
.color_two a:active{color:#000; font-weight:bold;    }

.color_three{color:#024873;    }
.color_three a:link{color:#024873;    }
.color_three a:visited{color:#024873;    }
.color_three a:hover{color:#000;    }
.color_three a:active{color:#000;    }




/*------------------------------------------------------

formtableclass
-表格(沒套.NET元件)
-是輸入表單

------------------------------------------------------*/

.formtableclass{
width:99%;
min-width:680px;
border-collapse:collapse;
color:#023373;
}

.formtableclass td{ 
border:1px solid #ccc;
padding:8px;
vertical-align:middle;
background:#f2f2f2;
}

.formtableclass .formtableTitle{
width:120px;

/*border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:8px;*/
}

.formtableContent table{
width:75%;
}

.formtableContent1{
width:150px;
}

.formtableContent-3col-L, .formtableContent-3col-R{
width:45%;
text-align:center;
}
.formtableContent-3col-M{
width:50px;
text-align:center;

}


.Buttontable td{
padding:0;
border:0px solid #024873;
}

.tdButtonspace{
width:0;
}



/*------------------------------------------------------

ButtonNormal
-表格上方的功能按鈕

ButtonRClass、ButtonLClass
-選擇模組的按鈕 區分左右

uploadskin_Class
-上傳檔案的按鈕

uploadimg_album
-相簿中上傳圖片的按鈕

iconfalse
icontrue
-計畫簡介內的按鈕

------------------------------------------------------*/

.ButtonNormal, .ButtonRClass, .ButtonLClass, #uploadimg_album{
padding:2px 6px;
text-align:center;
border: 0;

background: #b4db2b;

font-size: 16px;
line-height:normal;
margin-bottom: 10px;
margin-right:10px;
color:#000;
}

.ButtonRClass, .ButtonLClass{
width:30px;
padding:2px 6px;
margin: 6px 10px;
background: #b4db2b;
color:#023373;
}

.uploadskin_class{
margin:10px 0;
color:#024873;
font-size: 16px;
line-height:normal;
text-align:left;
border-bottom: 0px solid #66bbd9;
padding:2px 6px;
}

#uploadimg_album{
display:block;
width:151px;
height:40px;
margin:20px auto 10px 0;
padding:0;
}

#uploadimg_album:link{background:url(../images/uploadimg.gif) no-repeat left top;}
#uploadimg_album:visited{background:url(../images/uploadimg.gif) no-repeat left top;}
#uploadimg_album:hover{background:url(../images/uploadimg.gif) no-repeat left -40px;}
#uploadimg_album:active{background:url(../images/uploadimg.gif) no-repeat left -40px;}


#uploadimg_album span{
visibility: hidden;
}


.iconfalse, .icontrue{
/*padding:6px;*/
text-align:center;
border: 0;
background: #b4db2b;
font-size: 16px;
line-height:normal;
margin-bottom: 2px;
margin-right:10px;
color:#555;
}


.iconfalse{
background:#d2eb7a;
color:#000;
}

/*------------------------------------------------------

inputBoxClass
inputBoxClass_l
inputBoxClass_s
-輸入文字框input

multiInputBoxClass
-多行文字框textarea

multiInputBoxClass_short
-上傳相片彈出視窗內的多行文字框textarea

ddlistSelect
-下拉選單select

ddlist_schSkin2_class
-相簿修改的下拉選單

multiInputBoxClass_album
-相簿修改的多行文字輸入框

inputBoxClass_album
-相簿修改的單行文字輸入框

Img_ShowskinClass
-上傳圖片預覽

Video_ShowskinClass
-上傳影片預覽

-----------------------------------------------------*/
.ddlist_schSkin1_class{
color: #023373;
}

.inputBoxClass, .multiInputBoxClass, .ddlistSelect, .inputBoxClass_l, .inputBoxClass_s, .multiInputBoxClass_short, .multiInputBoxClass_s, .multiInputBoxClass_album, .inputBoxClass_album, .ddlist_schSkin2_class, .ddlist_schSkinSex_class, .ddlist_schSkinshort_class{
font-size:16px;
line-height:normal;
border: 1px solid #66bbd9;
color: #023373;
/*padding:2px;*/
}

.ddlistSelect{
margin-bottom:6px;
}

.inputBoxClass{
/*width:200px;*/
    width:75%;
}

.formtableContent table .inputBoxClass{
width:100%;
}

.multiInputBoxClass{
/*width:200px;*/
    width:75%;
    height: 200px;
}
.multiInputBoxClass_short{
    width:75%;
    height: 50px;
}

.ddlistSelect{
/*width:200px;*/
    width:75%;
}

.inputBoxClass_l{
/*width:200px;*/
    width:75%;
}

.inputBoxClass_s{
    width:100px;
}
.multiInputBoxClass_s{
    width:100px;
    height:80px;
}

.ddlist_schSkinSex_class{
width:75%;
/*display:block;*/
color:#024873;
/*margin:20px auto 0 auto;*/
}

.ddlist_schSkinshort_class{
width:150px;
/*display:block;*/
color:#024873;
/*margin:20px auto 0 auto;*/
}

.ddlist_schSkin2_class{
width:90%;
/*display:block;*/
color:#024873;
margin:20px auto 0 auto;
}

.multiInputBoxClass_album{
width:100%;
height:150px;
/*font-size:12px;*/
line-height:1.6;
color:#024873;
}

.inputBoxClass_album{
width:100%;
color:#024873;
}

/*
.Img_ShowskinClass{
width:480px;
height:320px;

}

.Video_ShowskinClass{
width:480px;
height:320px;
}
*/

/*------------------------------------------------------

Validator
-.NET的驗證元件
-告知使用者錯誤訊息

Validator_album
-.NET的驗證元件
-告知使用者錯誤訊息
-相簿區專用

------------------------------------------------------*/

.Validator{
display:block;
padding:2px 0;
vertical-align:middle;
color:#000;
}

.Validator_album{
display:block;
width:100%;
text-align:left;
color:#000;
margin:10px auto 0 0;
}


/*------------------------------------------------------

cboxskin_singleClass
-單一checkbox

cboxskinClass
-多個並排checkbox

------------------------------------------------------*/

.cboxskin_singleClass, .cboxskinClass{

}


/*------------------------------------------------------

planContent
-計畫簡介中的文字框架

------------------------------------------------------*/

.planContent{
margin:30px auto;
text-align:left;
width:90%;
min-height:500px;
line-height:1.6;
font-size:16px;
overflow:hidden;
}