/***********************************************************/
/*  Note: DO NOT ADD ANY CUSTOM CLASSES TO THIS FILE.     */
/*        INSTEAD, ADD YOUR CUSTOM CLASSES TO custom.css. */
/**********************************************************/

.jcDefaultDiv {
	position: absolute;}

.jcDefaultBase {
	font-family: Arial,helvetica,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	position: absolute;
	text-align: left;}

/* RoundButton */
/* Do not set backgroundColor for RoundButton to avoid color be displayed in corners*/
.jcRoundButton {
	background-repeat: no-repeat;
	border-style: none;
	cursor: pointer;
	font-size : 20px;
	text-align: center;
	text-decoration: none;}

	.jcRoundButton i,
	.jcRoundButton span {
		background-image: url(../pict/roundRect.png);
		background-repeat: no-repeat;
		display: block;
		font-style: normal;
		position: relative;}

	.jcRoundButton i {
		background-position: top left;
		height: 5px;
		left: 0;
		margin-bottom: -5px;
		position: absolute; 
		top: 0;
		width: 5px;}

	.jcRoundButton span {
		background-position: bottom left;
		left: -5px;
		margin-bottom: -5px;
		padding: 0 0 5px 10px;}

		.jcRoundButton span i {
			background-position: bottom right;
			height: 100%;
			left: 100%;
			margin-bottom: 0;
			position: absolute;
			top: 0;
			width: 10px;}

		.jcRoundButton span span {
			background-position: top right;
			height: 0;
			margin-left: 10px;
			position: absolute;
			right: -10px;
			top: -5px;}

.jcRoundButton_hover {
	background-color: #E3E9F0;
	border-color:#E3E9F0;}

/* Button */
.jcButton {
	background-color: #D3CFC9;
	background-repeat: no-repeat;
	border: 1px solid #808080;
	color: #000;
	cursor: pointer;
	font-size: 20px;
	padding: 5px;
	text-align: center;
	text-decoration: none;}

.jcButton_hover {
	background-color: #E3E9F0;}

/* Popup */
.jcPopup {
	background-color:#fff;
	border:3px solid #939393;
    box-sizing: content-box;
	font-size: 11px;
	height: 500px;
	opacity: 0.1;
	padding: 15px;
	text-align:left;
	width: 600px;}

.jcPopup_triangle {
	background-image: url(../pict/triangle.png);
	background-repeat: no-repeat;
	height: 36px;
	left: 10px;
	top: -36px;
	width: 36px;}

.jcPopup_cover {
	background-color: #e00;
	left: 0;
	opacity: 0.1;
	top: 0;}

/* Cover */
.jcCover {
	background-color: #333;
	left: 0;
	opacity: 0.1;
	top: 0;}

.jcCover_disable {
	background-Color: #fff;
	opacity: 0.85;}

/* Panel */
.jcPanel {
	background-color: #fff;
	border-style:none;
	height: 150px;
	overflow :hidden;
	width: 200px;}

.jcPanel_round {
	border:2px solid #D6D6D6;
	border-radius:5px;}

.jcPanel_shadow {
	box-shadow:2px 2px 2px #DBDBDB;}

.jcPanel_roundShadow {
	border:5px solid #F5F5F5;
	box-shadow:2px 2px 2px #DBDBDB;}

.jcPanel_header {
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F5F5F5), color-stop(1, #D8D8D8)); /* Firefox */
	font-size:18px;
	font-weight:bold;
	height:30px;
	left:0;
	padding-left:5px;
	padding-top:5px;
	top:0;}

/* VerticalCenterPanel */
.jcVerticalCenterPanel_link {
	color:#00f;
	text-decoration: underline;}

/* ItemList */
.jcItemList {
	background-color :#FFF;
	border-style: solid;
	border-width: 1px;
	height: 210px;
	width: 120px;}

.jcItemList_item {
	background-color: #FFF;
	cursor:default;
	height: 18px;
	width: 118px;}

.jcItemList_evenRow {
	background-color: #FFF;}

.jcItemList_item_selected {
	background-color:#dadada;} 

.jcItemList_item_highlighted {
	background-color :#ececec;} 

.jcItemList_item_link {
	background-color: #FFF;
	color: #00f;
	cursor: pointer;
	font-size: 14px;
	height: 18px;
	text-decoration: underline;
	white-space: nowrap;
	width: 120px;}

/* PixtureBox */
.jcPictureBox {
	overflow:hidden;}

.jcPictureBox_image {
	left: 0;
	top: 0;}

/* Picture */
.jcPicture {
	height: 50px; 
	overflow:hidden;
	width: 50px;}

/* Label */
.jcLabel {
	font-size :14px;}

/* LinkLabel */
.jcLinkLabel {
	color:#00f;
	cursor: pointer;
	font-size:14px;
	text-decoration:underline;}

.jcLinkLabel_hover {
	color:#f00;}

/* MainMenu */
.jcMainMenu {
	background-color:#EFEFEF;
	border-style: none;
	cursor: default;}

.jcMainMenu_item {
	background-color: #EFEFEF;
	color: #f00;
	cursor: default;
	font-size: 20px;
	height: 25px;
	line-height:25px;
	text-align: center;
	white-space: nowrap;
	width: 130px;}

.jcMainMenu_item_highlighted {
	background-color:#EFEF00;}

.jcMainMenu_item_selected {
	background-color:#EFEF00;}

.jcMainMenu_arrow_down {
	background-image :url(../pict/expandArrow_down.png);
	height: 4px;
	width: 7px;}

.jcMainMenu_arrow_right {
	background-image :url(../pict/expandArrow_right.png);
	height: 7px;
	width: 4px;}

/* PopupMenu */
.jcPopupMenu {
	background-color:#EFEFEF;
	border-style: none;
	cursor: default;
	text-align: left;}

.jcPopupMenu_item {
	background-color: #EFEFEF;
	color: #f00;
	cursor: default;
	font-size: 16px;
	height: 25px;
	line-height:25px;
	white-space: nowrap;
	width: 100px;}

.jcPopupMenu_item_highlighted {
	text-decoration: underline;}

.jcPopupMenu_arrow_down {
	background-image :url(../pict/expandArrow_down.png);
	height: 7px;
	width: 4px;}

.jcPopupMenu_arrow_right {
	background-image :url(../pict/expandArrow_right.png);
	height: 7px;
	width: 4px;}

/* TextBox */
.jcTextBox {
	border-color: #ececec;
	border-left-style:inset;
	border-top-style: inset;
	border-right-style: solid;
	border-bottom-style: solid;
	border-width: 1px;
	color:#000;
	font-size:14px;
	height: 22px;
	width: 200px;}

.jcTextBox_input {
	border-style: none;
	border-width: 0;
	overflow:auto;}

.jcTextBox_readOnly {
	border-style: none;
	border-width: 0;
	color:#808080;}

/*TitleBar*/
.jcTitleBar {
	background-color: #c6c6c6;
	height: 30px;
	line-height:30px; 
	overflow:hidden;
	width: 200px;}

.jcTitleBar_text {
	background-color: transparent;
	color: #f00;
	font-size :14px;
	font-weight: bold;
	height: 30px;
	overflow:hidden;
	width: 200px;}

/*ExpandablePanel*/
.jcExpandablePanel {
	border:2px solid #c6c6c6;
	cursor:default;
	height: 200px;
	left: 0;
	top: 0;
	width: 300px;}

.jcExpandablePanel_titleBar {
	background-color: #c6c6c6;
	color: #f00;
	font-weight: bold;
	height: 30px;}

.jcExpandablePanel_titleBarText {
	left: 3px;}

.jcExpandablePanel_titleBarIcon_collapse {
	background-image: url(../pict/collapse.png);
	height: 16px;
	width: 15px;}

.jcExpandablePanel_titleBarIcon_expand {
	background-image: url(../pict/expand.png);
	height: 15px;
	width: 15px;}

/*TrackBar*/
.jcTrackBar_bar {
	background-image: url(../pict/Scrollbar.gif);
	background-repeat: no-repeat;
	height: 90px;
	overflow: hidden;
	width: 3px;}

.jcTrackBar_slider {
	background-image: url(../pict/Scroll.gif);
	background-repeat: no-repeat;
	height: 12px;
	left: 0;
	overflow: hidden;
	top: 0;
	width: 12px;}

.jcTrackBar_zoomButton1 {
	background-image: url(../pict/ScrollZoomIn.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	height: 27px;
	width: 27px;}

.jcTrackBar_zoomButton2 {
	background-image: url(../pict/ScrollZoomOut.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	height: 27px;
	width: 27px;}

/*PopupWindow*/ 
.jcPopupWindow {
	border-color: #598BC6;
	border-top: 0;
	font-size: 18px;
	font-weight: bold;
	padding: 0;}

.jcPopupWindow_titleBar {
	background-color: #598BC6;
	color: #fff;}

/*WaitIndicator*/
.jcWaitIndicator {
	color: #f00;
	font-size: 14px;
	height: 16px;
	width: 50px;}

.jcWaitIndicator_icon {
	background-image: url(../pict/loader.gif);
	height: 16px;
	width: 16px;}

/*WaitCover*/
.jcWaitCover_cover {
	background: #333;
	opacity: 0.6;
	z-index: 9999;}

.jcWaitCover_text {
	background-color: #858585;
	color:#000;
	font-size:14px;
	overflow:visible;}

.jcWaitCover_icon_large {
	background-color: transparent;
	height: 115px;
	overflow: hidden;
	width: 115px;}

.jcWaitCover_icon_large_withPie {
	background-color: transparent;
	background-image: url(../pict/loading_graphic_pie_large.png);
	height: 115px;
	overflow: hidden;
	width: 115px;}

.jcWaitCover_icon_small {
	background-color: transparent;
	height: 55px;
	overflow: hidden;
	width: 55px;}

.jcWaitCover_icon_small_withPie {
	background-color: transparent;
	background-image: url(../pict/loading_graphic_pie_small.png);
	height: 55px;
	overflow: hidden;
	width: 55px;}

/*TabPage*/
.jcTabPage {
	height: 400px;
	width: 500px;}

.jcTabPage_title {
	background-color: #FEFBEC;
	border:1px solid #DFDDD0;
	color:#00f;
	font-size: 20px;
	height:25px;
	line-height:25px;
	padding:2px;
	text-align:center;
	top: 0;
	width:80px;}

.jcTabPage_title_selected {
	background-color: #FEFBEC;}

.jcTabPage_titleHover {
	background-color: #E3E9F0;
	border-color: #DFDDD0;}

.jcTabPage_page {
	background-color:#FEFBEC;
	border:1px solid #DFDDD0;
	height: 150px;
	left: 0;
	width: 300px;}

/*Paging*/
.jcPaging {
	height: 15px;}

.jcPaging_number {
	color: #00f;
	cursor: pointer;
	font-size: 14px;
	height: 15px;
	text-align: center;
	text-decoration: underline;}

.jcPaging_prevButton {
	background-repeat: no-repeat;
	color: #00f;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;}

.jcPaging_nextButton {
	background-repeat: no-repeat;
	color: #00f;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;}

.jcPaging_firstButton {
	background-repeat: no-repeat;
	color: #00f;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;}

.jcPaging_lastButton {
	background-repeat: no-repeat;
	color: #00f;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;}

.jcPaging_numberSelected {
	color: #000;
	cursor: default;
	text-decoration: none;}

/*SelectBox*/
.jcSelectBox_cover {
	background-color:#CFCFCF;
	font-size: 0px; /*following three are for make div height =0 when in IE backmode */
	line-height:0px;
	opacity: 0.4;
	overflow: hidden;}

.jcSelectBox_drag {
	background-image: url(../pict/fill.gif);
	cursor: move;}

.jcSelectBox_topLeftGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: nw-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_topCenterGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: n-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_topRightGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: ne-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_middleLeftGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: w-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_middleRightGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: e-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_bottomLeftGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: sw-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_bottomCenterGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: s-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_bottomRightGrip {
	background-color: #FFF;
	border: solid 1px #000;
	cursor: se-resize;
	height: 7px;
	overflow: hidden;
	width: 7px;}

.jcSelectBox_topLine {
	background-image: url(../pict/marqueeLineH.gif);
	height: 1px;
	overflow: hidden; 
	width: 1px;}

.jcSelectBox_bottomLine {
	background-image: url(../pict/marqueeLineH.gif);
	height: 1px;
	overflow: hidden;
	width: 1px;}

.jcSelectBox_leftLine {
	background-image: url(../pict/marqueeLineV.gif);
	height: 1px;
	overflow: hidden;
	width: 1px;}

.jcSelectBox_rightLine {
	background-image: url(../pict/marqueeLineV.gif);
	height: 1px;
	overflow: hidden;
	width: 1px;}

/*TextBoxSlider*/
.jcTextBoxSlider_trackBar {
	top:2px;}

.jcTextBoxSlider_trackBar_bar {
	background-image: url(../pict/red.png);
	height: 10px;
	width: 195px;}

.jcTextBoxSlider_trackBar_slider {
	background-image: url(../pict/scroll.gif);
	height: 12px;
	width: 12px;}

.jcTextBoxSlider_textBox {
	font-size:16px;
	height: 18px;
	left: 220px;
	width: 35px;}

.jcTextBoxSlider_textBoxInput {
	text-align:center;}

/*ColorList*/
.jcColorList {
	background-color: #FFF;}

.jcColorList_preview {
	height: 90px;
	top: 5px;
	width: 80px;}
 
.jcColorList_seperator {
	background-image:url(../pict/seperator.gif);
	background-repeat: repeat-x;
	font-size: 0;
	height: 5px;
	left: 0;
	top: 112px;
	width: 244px;}
 
.jcColorList_moreLink {
	color: #AFC2DA;
	cursor: pointer;
	font-size: 15px;
	font-weight: bold;
	height: 16px;
	left: 0;
	top: 122px;
	width: 105px;}

.jcColorList_moreLink_hover {
	color: #AFC2DA;}

.jcColorList_cancelButton {
	background-image: url(../pict/btn_cancel.png);
	font-size: 20px;
	height: 23px;
	left: 135px;
	top: 122px;
	width: 109px;}

.jcColorList_colorBlock {
	border:2px solid #C0C0C0;
	font-size: 0;
	height: 16px;
	width: 16px;}

.jcColorList_colorBlockInner {
	border-style: none;
	border-width: 2px;
	font-size:0;
	height: 8px;
	overflow: hidden;
	width: 8px;}

.jcColorList_colorBlockSelected {
	border-color: #f00;}

.jcColorList_colorBlockHighlighted {
	border-color: #00f;}

.jcColorList_colorBlockInnerSelected {
	border-color: #fff;
	border-style: solid;}

.jcColorList_colorBlockInnerHighlighted {
	border-color: #fff;
	border-style: solid;}

/*CustomColor*/
.jcCustomColor {
	background-color: #FFF;}

.jcCustomColor_trackBar1 {
	left: 100px;
	top: 8px;}

.jcCustomColor_trackBar2 {
	left: 100px;
	top: 45px;}

.jcCustomColor_trackBar3 {
	left: 100px;
	top: 78px;}

.jcCustomColor_trackBar4 {
	left: 100px;
	top: 111px;}

.jcCustomColor_bar1 {
	background-image: url(../pict/blue.png);
	height: 10px;
	width: 195px;}

.jcCustomColor_bar2 {
	background-image: url(../pict/red.png);
	height: 10px;
	width: 195px;}

.jcCustomColor_bar3 {
	background-image: url(../pict/yellow.png);
	height: 10px;
	width: 195px;}

.jcCustomColor_bar4 {
	background-image: url(../pict/black.png);
	height: 10px;
	width: 195px;}

.jcCustomColor_slider {
	background-image: url(../pict/ColorSlider.png);
	height: 10px;
	top: 12px;
	width: 11px;}

.jcCustomColor_textBox {
	font-size :16px;
	height: 18px;
	left: 210px;
	width: 35px;}

.jcCustomColor_textBoxInput {
	border: none !important;
	padding: 0 !important;
	text-align:center;}

.jcCustomColor_colorDesc {
	font-size: 16px;
	height: 25px;
	left: 78px;
	line-height:25px;
	width: 10px;}

.jcCustomColor_percentChar {
	height: 20px;
	left: 350px;
	line-height:20px;
	width: 5px;}
 
 .jcCustomColor_preview {
	height: 140px;
	left: 0;
	top:0;
	width: 70px;}
 
.jcCustomColor_seperator {
	background-image:url(../pict/seperator.gif);
	background-repeat: repeat-x;
	height: 5px;
	left: 0;
	top: 145px;
	width: 347px;}
 
 .jcCustomColor_backLink {
	color: #AFC2DA;
	cursor: pointer;
	font-size: 15px;
	font-weight: bold;
	height: 16px;
	left: 0;
	top: 160px;
	width: 190px;}

.jcCustomColor_backLink_hover {
	color: #AFC2DA;}

.jcCustomColor_applyButton {
	background-image: url(../pict/btn_apply.png);
	font-size: 20px;
	height: 23px;
	left: 260px;
	top: 157px;
	width: 92px;}

/*PagingList*/
.jcPagingList {
	height: 320px;
	width: 400px;}

.jcPagingList_itemList {
	border-style: none;
	left: 0;
	top: 0;}

.jcPagingList_paging {
	top: -20px;}

.jcPagingList_paging_number {
	text-decoration: underline;}

/*MessageBox*/
.jcMessageBox {
	border-style: none;
	height: 0;
	overflow: hidden;
	width: 0;}

.jcMessageBox_adjust {
	border-style: solid; /*show the border after the messagebox finish population to avoid flickering */
	overflow: hidden;
	padding: 0;}

.jcMessageBox_adjust_fadeout {
	border:1px solid #808080;
	overflow:hidden;
	padding: 0;}

.jcMessageBox_text {
	color: #636363;
	font-family: Trebuchet MS;
	font-size: 16px;}

.jcMessageBox_text_fadeout {
	font-family: Trebuchet MS;
	font-size: 12px;}

.jcMessageBox_icon1 {
	background-image: url(../pict/msg_info.png); /*image-src is for jControl internal use*/
	height: 44px;
	left: 10px;
	top: 10px;
	width: 44px;}

.jcMessageBox_icon2 {
	background-image: url(../pict/msg_warning.png); /*image-src is for jControl internal use*/
	height: 44px;
	left: 10px;
	top: 10px;
	width: 44px;}

.jcMessageBox_icon3 {
	background-image: url(../pict/msg_error.png); /*image-src is for jControl internal use*/
	height: 44px;
	left: 10px;
	top: 10px;
	width: 44px;}

.jcMessageBox_okButton {
	background-image: url(../pict/btn_ok.png);
	height: 23px;
	left: 0;
	top: 0;
	width: 97px;}

.jcMessageBox_cancelButton {
	background-image: url(../pict/btn_cancel.png);
	height: 23px;
	left: 0;
	top: 0;
	width: 109px;}

/* DropDownList */
.jcDropDownList {
	overflow :visible;
	width:0;}

.jcDropDownList_itemList {
	height: 185px;
	position:relative;
	top:-1px;
	width: 122px;}

.jcDropDownList_itemList_item {
	background-color: #FFF;
	cursor: default;
	height: 18px;
	width: 122px;}

.jcDropDownList_header {
	border: 1px solid #000;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
	position:relative;
	width: 120px;}

.jcDropDownList_header_icon {
	background-image: url(../pict/arrow_down.png);
	background-repeat:no-repeat;
	float:right;
	height: 18px;
	position:relative;
	width: 17px;}

/*special for ie7 because IE7 renders pure text as an element */
.jcDropDownList_header_icon_ie7 {
	background-image: url(../pict/arrow_down.png);
	background-repeat:no-repeat;
	float:right;
	height: 18px;
	position:relative;
	top:-20px;
	width: 17px;}

/*ColorPicker*/
/*container style for colorList page*/
.jcColorPicker1 {
	background-color: #fff;
	height: 165px;
	padding: 0;
	width: 270px;}

/*container style for custom color page*/
.jcColorPicker2 {
	background-color: #fff;
	height: 200px;
	padding: 0;
	width: 390px;}

/*container style for hasTab=true*/
.jcColorPicker3 {
	border-color:#fff;
	border-style:none;
	border-width: 0;
	height:0;
	padding: 0;
	width:0;}

.jcColorPicker_tabPage {
	height: 250px;
	width: 390px;}

.jcColorPicker_tabPagePanel {
	background-color:#fff;
	height: 220px;
	width: 380px;}

.jcColorPicker_button {
	background-color:#fff;}

.jcColorPicker_colorList {
	height: 150px;
	left: 8px;
	top: 8px;
	width: 250px;}

.jcColorPicker_customColor {
	height: 180px;
	left: 10px;
	top: 10px;
	width: 370px;}

.jcColorPicker_okButton {
	background-color: transparent;
	background-image: url(../pict/btn_ok.png);
	height: 23px;
	left: 250px;
	top: 215px;
	width: 97px;
	z-index: 1;}

.jcColorPicker_cancelButton {
	background-image: url(../pict/btn_cancel.png);
	height: 23px;
	left: 120px;
	top: 215px;
	width: 109px;
	z-Index: 1;}

/*ImageCrop*/
.jcImageCrop {
	height: 300px;
	width: 300px;}

.jcImageCrop_trackBar_bar {
	background-image: url(../pict/scrollbar.gif);
	height: 90px;
	width: 3px;}

.jcImageCrop_trackBar_slider {
	background-image: url(../pict/scroll.gif);
	height: 12px;
	left: 7px;
	width: 12px;}

/* RadioButton */
.jcRadioButton {
	width:210px;}

.jcRadioButton_item {
	height:30px;
	width:200px;}

.jcRadioButton_label {
	font-size: 20px;
	left:38px;
	top: 3px;}

 .jcRadioButton_icon_unselected {
	background-image: url(../pict/radiobutton_unselected.jpg);
	background-repeat:no-repeat;
	height:17px;
	left:5px;
	top:6px;
	width:17px;}
 
.jcRadioButton_icon_selected {
	background-image: url(../pict/radiobutton_selected.jpg);
	background-repeat:no-repeat;
	height:17px;
	left:5px;
	top:6px;
	width:17px;}

/* TreeList */
.jcTreeList_itemList {
	border-style:none;
	border-width:0;}
