/* style.css */
.TabsContainer {
	float: left;
	margin: 0px 10px 0px 10px;
	width: 540px;
}

.TabsContainer .wrap {
    width:100%;
	position: relative;
}

.TabsContainer .wrap .pane, .TabsContainer .wrap .pane2 {
    display:none;    
    border-top:0;	
}

.TabsContainer .wrap .DisplayBlock, .TabsContainer .wrap .DisplayBlock {
	display: block;	
}


.TabsContainer .wrap .pane p, .TabsContainer .wrap .pane2 p {
    
}

/* root element for tabs  */
.TabsContainer ul.tabs, ul.tabs2 {     
	min-height: 35px;	
	margin:0 !important;
}

/* single tab */
.TabsContainer ul.tabs li, ul.tabs2 li { 
    float:left;      
    text-indent:0;
    padding:0;
    margin:0 !important;
    list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
.TabsContainer .tabs a, .tabs2 a {     
	background: #e2ffe1;
    font-weight: 700;
	font-size: 15px;
    display:block;
    height: 35px;  
    line-height:35px;    
    text-align:center;
    text-decoration:none;
    color:#45c343;
    padding:0px 15px 0px 25px;
	background: url(../images/RadioBTN.png) no-repeat 0px 9px;
    margin:0px;
    position:relative;
    top:1px;	
}

.TabsContainer .tabs a:active, .tabs2 a:active {
    
}

/* when mouse enters the tab move the background image */
.TabsContainer ul.tabs a:hover, ul.tabs2 a:hover {
    /*background-position: -652px -31px;
	background: #e2ffe1;*/
	background: url(../images/RadioBTN.png) no-repeat 0px 9px;	
    color:#038c00;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
.TabsContainer .tabs a.current, .TabsContainer .tabs a.current:hover, .TabsContainer .tabs .current a, .TabsContainer .tabs2 .current, .TabsContainer .tabs2 .current:hover, .TabsContainer .tabs2 .current a {
    cursor: default !important;
    color: #038c00 !important;
    background: url(../images/RadioBTN_on.png) no-repeat 0px 9px;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
.TabsContainer ul.tabs a.w1,.TabsContainer ul.tabs2 a.w1            { background-position: -519px 0; width:134px; }
.TabsContainer ul.tabs a.w1:hover,.TabsContainer ul.tabs2 a.w1:hover      { background-position: -519px -31px; }
.TabsContainer ul.tabs a.w1.current,.TabsContainer ul.tabs2 a.w1.current { background-position: -519px -62px; }

/* width 2 */
.TabsContainer ul.tabs a.w2,.TabsContainer ul.tabs2 a.w2            { background-position: -366px -0px; width:154px; }
.TabsContainer ul.tabs a.w2:hover,.TabsContainer ul.tabs2 a.w2:hover      { background-position: -366px -31px; }
.TabsContainer ul.tabs a.w2.current,.TabsContainer ul.tabs2 a.w2.current { background-position: -366px -62px; }


/* width 3 */
.TabsContainer ul.tabs a.w3,.TabsContainer ul.tabs2 a.w3            { background-position: -193px -0px; width:174px; }
.TabsContainer ul.tabs a.w3:hover,.TabsContainer ul.tabs2 a.w3:hover      { background-position: -193px -31px; }
.TabsContainer ul.tabs a.w3.current,.TabsContainer ul.tabs2 a.w3.current { background-position: -193px -62px; }

/* width 4 */
.TabsContainer ul.tabs a.w4,.TabsContainer ul.tabs2 a.w4            { background-position: -0px -0px; width:194px; }
.TabsContainer ul.tabs a.w4:hover,.TabsContainer ul.tabs2 a.w4:hover      { background-position: -0px -31px; }
.TabsContainer ul.tabs a.w4.current,.TabsContainer ul.tabs2 a.w4.current { background-position: -0px -62px; }
/************************************本公司各單位職掌?**************************************/
/* style.css */
.TabsStyle5Container {
	margin-bottom: 20px;
}
.TabsStyle5Container .wrap {
    width:680px;
	position: relative;
}

.TabsStyle5Container .wrap .pane {
    display:none;
    /*border:1px solid #d0ccc9;
    border-top:0;*/
	padding: 15px 0;
	/*margin-bottom: 20px;*/
	/*padding: 2px;	*/
}

.TabsStyle5Container .wrap .DisplayBlock {
	display: block;	
}


.TabsStyle5Container .wrap .pane p {
    
}

/* root element for tabs  */
.TabsStyle5Container ul.tabs {	
	border: 1px solid #dddddd;
	padding: 7px;
	border-radius: 5px;
	background: #ffffff url(../images/gradient_grey_02.jpg) repeat-x bottom;
	overflow: hidden;
}

/* single tab */
.TabsStyle5Container ul.tabs li { 
    float:left;
    text-indent:0;
    padding:0;
    margin:0 !important;
    list-style-image:none !important; 	
}

/* link inside the tab. uses a background image */
.TabsStyle5Container ul.tabs a { 
    background: #ffffff url(../images/Gradient_Style04.jpg) repeat-x bottom;
    display:block;
	width: 180px;
    height: 45px;  
    line-height:45px;
    text-decoration:none;
    color: #898989;
    padding:0px 0px 0px 40px;
    margin:-1px 0px 0px -1px;
    position:relative;
    top: 0px;
	border: 1px solid #dddddd;
}

.TabsStyle5Container ul.tabs a p { 
    position: absolute;
	left: 9px;
	top: 13px;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: top;
}

.TabsStyle5Container ul.tabs .Org1 a p { background: url(../images/Branch_Icon_1.png); }
.TabsStyle5Container ul.tabs .Org2 a p { background: url(../images/Branch_Icon_2.png); }
.TabsStyle5Container ul.tabs .Org3 a p { background: url(../images/Branch_Icon_3.png); }
.TabsStyle5Container ul.tabs .Org4 a p { background: url(../images/Branch_Icon_4.png); }
.TabsStyle5Container ul.tabs .Org5 a p { background: url(../images/Branch_Icon_5.png); }
.TabsStyle5Container ul.tabs .Org6 a p { background: url(../images/Branch_Icon_6.png); }
.TabsStyle5Container ul.tabs .Org7 a p { background: url(../images/Branch_Icon_7.png); }
.TabsStyle5Container ul.tabs .Org8 a p { background: url(../images/Branch_Icon_8.png); }
.TabsStyle5Container ul.tabs .Org9 a p { background: url(../images/Branch_Icon_9.png); }
.TabsStyle5Container ul.tabs .Org10 a p { background: url(../images/Branch_Icon_10.png); }
.TabsStyle5Container ul.tabs .Org11 a p { background: url(../images/Branch_Icon_11.png); }
.TabsStyle5Container ul.tabs .Org12 a p { background: url(../images/Branch_Icon_12.png); }
.TabsStyle5Container ul.tabs .Org13 a p { background: url(../images/Branch_Icon_13.png); }
.TabsStyle5Container ul.tabs .Org14 a p { background: url(../images/Branch_Icon_14.png); }
.TabsStyle5Container ul.tabs .Org15 a p { background: url(../images/Branch_Icon_15.png); }

.TabsStyle5Container ul.tabs a:active {
    
}

/* when mouse enters the tab move the background image */
.TabsStyle5Container ul.tabs a:hover {
    color:#038c00;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
.TabsStyle5Container ul.tabs a.current, .TabsStyle5Container ul.tabs a.current:hover, .TabsStyle5Container ul.tabs li.current a {
	background: #65aa00 url(../images/Gradient_Style04_on.jpg) repeat-x top;
    cursor:default !important; 
    color:#ffffff !important;
	/*top: 1px;*/
}
.TabsStyle5Container ul.tabs a.current p, .TabsStyle5Container ul.tabs a.current:hover p, .TabsStyle5Container ul.tabs li.current a p {
	background-position: 0 -22px;
}
