@charset "UTF-8";

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	
	/* for test */
	/* height:277px; */ 
	/* width: 500px; *//* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 */
.TabbedPanelsTab {
	display:block;
	height:23px;
	float: left;
	position: relative;
	top: 1px;
	
	/* syu modify 20091016 */
	padding: 0px 0px 0px 3px;
	/* padding: 0px 0px 0px 15px; */
	
	margin: 0px 0px 0px 0px;
	
	/*background:url('tab-back.gif') no-repeat;*/
	background:url('tab-back.png') repeat-x;
	
	list-style: none;
	cursor: pointer;
	
	/*color:#fff;*/
	color:#4d4d80;
	
	font: bold 14px  Arial;
	-moz-user-select: none;
	-khtml-user-select: none;
	
	/* add */
	border-left: solid 1px #7a7acc;
	border-bottom: solid 0px #ffffff;
	border-top: solid 1px #7a7acc;
	border-right: solid 1px #7a7acc;

}

.TabbedPanelsTab span {
	display:block;
	
	/*background:url('tab-back.gif') right top no-repeat;*/
	background:url('tab-back.png') right top repeat-x;
	
	/* syu modify 20091016 */
	padding:7px 3px 7px 0;
	/* padding:7px 25px 7px 0; */
	margin:0px 0 0 0;
}

.TabbedPanelsTabHover {
  /* syu add 20091111 */  
	text-decoration : underline;
	color:#dc143c;
	
  /*  del modify by syu 20091111
	background:url('tab-hover.gif') no-repeat;
	color:#900;
	*/
}

.TabbedPanelsTabHover span {
  display:block;
  
  /* syu add 20091111 */
  padding:5px 3px 9px 0
  
  /*  del modify by syu 20091111
	background:url('tab-hover.gif') right top no-repeat;
	padding:7px 25px 7px 0;
	*/
}

/* This selector is an example of how to change the appearance of a tab button
 */
.TabbedPanelsTabSelected {

	/*background:url('tab-current.gif') no-repeat;*/
	background:url('tab-current.png') repeat-x;
	
	color:#7a7acc;
	/*color:#900;*/
	
	/* syu add 2009/11/11 delete the tab frame , but keyboard can not operate tab */
	outline:none; /* for firefox */
	blr:expression(this.onFocus=this.blur()); /* for IE */
	text-decoration: none;
	
}

.TabbedPanelsTabSelected span {
display:block;

	/*background:url('tab-current.gif') no-repeat right top;*/
	background:url('tab-current.png') no-repeat repeat-x;
	
	/* syu modify 20091016 */
	padding:7px 3px 7px 0;
	/* padding:7px 25px 7px 0; */
	
	margin:0px 0 0 0;
}


/* This selector is an example of how to make a link inside of a tab button
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 */
.TabbedPanelsContentGroup {
	clear: both;
	
	border: solid 1px #7a7acc;
	/*
	border-left: solid 2px #900;
	border-bottom: solid 2px #900;
	border-top: solid 2px #900;
	border-right: solid 2px #900;
	*/
	background-color: #fff;
	
	/* for test */
	/* height:250px; */ 
}

/* This is the selector for the Content panel. The Content panel holds the
 */
.TabbedPanelsContent {
	font:12px/18px Arial;
	padding: 4px;
}

.TabbedPanelsContent img{
float:right;
	padding: 4px;
	}

/* This selector is an example of how to change the appearnce of the currently
 */
.TabbedPanelsContentVisible {
}

/* syu Image To Left and Right from WIKI in Tab add start 20091029 */
DIV.tabThumb {
	BORDER-LEFT-COLOR: white; MARGIN-BOTTOM: 0.5em; BORDER-BOTTOM-COLOR: white; WIDTH: auto; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: white; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-RIGHT-COLOR: white; BORDER-BOTTOM-STYLE: solid
}
DIV.tabThumbinner {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0px! important; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 0px! important; FONT-SIZE: 94%; PADDING-BOTTOM: 0px! important; OVERFLOW: hidden; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0px! important; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #f9f9f9; TEXT-ALIGN: center
}
IMG.tabThumbimage {
	BORDER-RIGHT: #ccc 0px solid; BORDER-TOP: #ccc 0px solid; BORDER-LEFT: #ccc 0px solid; BORDER-BOTTOM: #ccc 0px solid
}
DIV.tabThumbcaption {
	PADDING-RIGHT: 1px! important; PADDING-LEFT: 1px! important; FONT-SIZE: 94%; PADDING-BOTTOM: 1px! important; BORDER-TOP-STYLE: none; LINE-HEIGHT: 1.4em; PADDING-TOP: 1px! important; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; TEXT-ALIGN: middle; BORDER-BOTTOM-STYLE: none
}
DIV.tabTright {
	BORDER-TOP-WIDTH: 0.5em; CLEAR: right; BORDER-LEFT-WIDTH: 1.4em; FLOAT: right; BORDER-BOTTOM-WIDTH: 0.8em; BORDER-RIGHT-WIDTH: 0px
}
DIV.tabTleft {
	BORDER-TOP-WIDTH: 0.5em; CLEAR: left; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0.8em; MARGIN-RIGHT: 0.5em; BORDER-RIGHT-WIDTH: 1.4em
}
IMG.tabThumbborder { /* not use now */
	BORDER-RIGHT: #dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-LEFT: #dddddd 1px solid; BORDER-BOTTOM: #dddddd 1px solid
}
/* syu Image To Left and Right from WIKI add end 20091029 */