/*
	Chan.Controls
*/


/*
	Four standard widths corresponding to each Control's Size
	setting of Thin,Norm and Wide, respectively, override these if you wish
*/
.C__Thin
{
	width: 75px;
}

.C__Norm
{
	width: 150px;
}

.C__Wide
{
	width: 300px;  /* GARY EDIT */
}

.C__Mega
{
	width: 700px;	
}

/*
	invalid image placed next to each control during validation phase
	it is contained within a span for extra niggley spaceyness
*/
span.CC_Invalid
{
	padding-left: 3px;
}

span.CC_Invalid img
{
	vertical-align: top;	/* for textareas */
	margin-top: 1px;
}

/*
	Chan.Controls.CheckBox
*/
input.CC_CheckBox
{
	border: none;
}


/*
	Chan.Controls.Upload
*/
input.CC_Upload
{
	border: none;
}

/*
	Chan.Controls.DropDown

*/
select.CC_DropDown
{
	border:				1px solid #666;
	background-color:	#FFFFFF;	/* white */
	font-size:11px;
}

select.CC_DropDown option
{
	margin-right:		1em;
}

/*
	Chan.Controls.Button
*/
input.CC_Button
{
	padding-bottom:			2px;
	margin-top: 4px;
	border:				1px solid #333;
	background-color:	#CCC;
	/*height:				1.75em;*/
	font-size:			1em;
}

/*
	Chan.Controls.TextBox
*/

input.CC_TextBox,
input.CC_Numeric,
input.CC_Password,
textarea.CC_TextBox
{
	padding:			3px;
	margin-top:			1px;
	margin-bottom:		4px;
	border:				1px solid #666;
	background-color:	#FFFFFF;	/* white */
	/*height:				1.75em;*/
	text-align:			left;
	font-size:			12px;
}

input.CC_Numeric
{
	text-align:			right;
}

/*
  Fix for opera html 5, 
*/
input.CC_Numeric[type=number]
{
	border: none;
}

textarea.CC_TextBox
{
	font:	 inherit;
	
	width:				500px;
	height:				50px;
}

/* rich text box is a div with a textarea inside*/
div.C__Rich
{
	/*width:		600px;*/
	height: 	400px;
}

textarea.C__Rich
{
	width:		90%;
	height:		90%;
}

/*
	Chan.Controls.Date
*/

/* the date picker sits in this span */
span.CC_Date
{
	position:     relative;
	text-align:   left;
	/*border:				1px solid #666;
	display: inline-block;*/
}

input.CC_Date_DD
{
	padding:			1px;
	text-align:		center;
	border:				1px solid #666;
  margin-right: 2px;
	width:        3em;
}

select.CC_Date_MM
{
	width:            4em;	
	border:				1px solid #666;
  margin-right: 2px;
	background-color:	#FFFFFF;	/* white */
	text-align:		center;
}
input.CC_Date_YYYY
{
	padding:			1px;
	text-align:		center;
	border:				1px solid #666;
  margin-right: 1px;
	width: 3em;	
}


select.CC_Date_MM option
{
	/*padding:			3px;*/
}

img.CC_Date_Pick
{
	cursor: pointer;	
	vertical-align: middle;
  margin-top: -1px; /* correct */
  /*position: relative;
	top: 0.33em;*/
}

span.CC_Date span.CC_Invalid
{
	padding-left: 1px;
}

span.CC_Date span.CC_Invalid img
{
	vertical-align: middle;
  margin-top: -1px; /* correct */
}

/*
	Date Picker Popup
*/
div.CC_Date_Div
{
	position: absolute;
	top: 1.5em;
	left: 0;
	border: 1px solid black;
	font: normal 100% courier new, lucida console, monospace, fixed-width;
	z-index: 100;
	background-color: #E0E0E0;
	width: 14em;
		
	margin: 0;	
	padding: 0;
}

/*
	Dagte Picker Popup : Toolbar showing ok/cancel and tabs for each date part
*/

div.CC_Date_Div div.CC_Date_Tabs
{
	background-color: #E0E0E0;
  text-align: center;
}

div.CC_Date_Div div.CC_Date_Tabs
{
	margin: 0;
}

#___CC_Date_Tab_O,
#___CC_Date_Tab_C
{
	float: right;
	margin-left: 2px;
	margin-top: -1px;
	cursor: pointer;
}

#___CC_Date_Tab_N,
#___CC_Date_Tab_T
{
	float: left;
	margin-right: 2px;
	margin-top: -1px;
	cursor: pointer;
}

div.CC_Date_Tabs a
{
	padding: 0 4px;	
	
	margin-left: 2px;
	text-decoration: none;
	color: #06C;
}

div.CC_Date_Tabs a.Selected	
{
	background-color: #FFFFFF;
}

/*
	The tab-panels for each of the date parts
*/
div.CC_Date_Div div
{
	clear: both;
	background-color: #FFFFFF;
	padding: 2px;
	margin: 0;
	margin-top: -2px;
	text-align: center;
}

div.CC_Date_Div a
{
	cursor: pointer;
	text-decoration: none;
	color: #06C;
}

/*
  Today
*/

div.CC_Date_Div a.t
{
	color: #c63;
}

/*
	when the date is greater than the days-in-month we still allow selection but grey out the links a little
*/
div.CC_Date_Div a.x
{
	color: #9CF;
}






/*
	Chan.Controls.Button with Image property set
	Chan.Controls.Image with Link property set
*/


img.CC_ImageButton,
input.CC_ImageButton,
img.CC_Image,
img.CC_ImageButton_Disabled,
input.CC_ImageButton_Disabled,
img.CC_Image_Disabled
{
	display: inline-block !important;
	vertical-align: text-bottom !important; 
	border: none !important; 
}

/*
span.CC_ImageButton_Disabled,
a.CC_ImageButton_Disabled
{
	background-color: #CCC;
}
*/

input.CC_ImageButton_Disabled,
img.CC_ImageButton_Disabled,
img.CC_Image_Disabled
{
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";*/
	filter: alpha(opacity=33);
	opacity: 0.33;
}


/*
	Chan.Controls.Grid
*/


table.CC_Grid
{
	border-collapse: collapse;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}

table.CC_Grid th,
table.CC_Grid td
{
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;			
}

/*
	default column widths only need applying to the header row
*/
table.CC_Grid th
{
	width: 10em;
}



/*
	first Child is left-hand column of row numbers
*/
table.CC_Grid tr:first-child
{		
	width: 2em;
}

/*

*/
td.CC_Grid_TD_Edit
{
	background-color: green;
}

td.CC_Grid_TD_Edit input
{
	background-color: yellow;
}



/*
	TabPanel
*/
div.CC_TabPanel
{

}

div.CC_TabBody
{
	border: 1px solid #999;
	padding: 5px;
}

div.CC_TabHeader
{
	padding: 0 10px;
	position: relative;
}

div.CC_TabHeader input
{
	background-color: #ccc;
	border: 1px solid #999;
	outline: none;
	position: relative;
	top: 1px;
	cursor: pointer;
}

div.CC_TabHeader input.CC_Tab_Selected
{
	border-bottom: 1px solid #fff;
	background-color: #fff;
}

div.CC_TabHeader input.CC_Tab_Disabled
{
	cursor: default;
}




/*
	Panel or ImagePanel with Scroll ability
*/


table.C__Scroll
{
	margin: 	0;
	padding: 	0;
	width: 		100%;
	height: 	100%;
	/*border-collapse: collapse;*/
}

table.C__Scroll td
{
	margin: 	0;
	padding: 	0;	
	width: 		100%;
	height: 	100%;
	/*border-collapse: collapse;*/
}

/*table.C__Scroll tr
{
	height: 0;
}*/

table.C__Scroll th
{
	margin: 	0;
	padding: 	0;
	width: 		0;
	height: 	0;
	/*border-collapse: collapse;
	background-color:red;*/
}

div.C__Scroll_Outer
{
	position: 	relative;
	width: 		100%;
	height: 	100%;
}

div.C__Scroll_Inner
{
	position:	absolute;
}




table.C__Scroll th
{
	background-position: center;
	background-repeat: no-repeat;
	cursor: 	pointer;
	_cursor: 	hand;
	width: 		0;
	height: 	0;
}

	div.CC_ImagePanel .CC_Image
	{
		display: 	block;
		margin: 	5px;
	}

	/*
		the outer div
	*/
	div.CC_ImagePanel
	{
		/*display: inline-block;*/
		position: relative;
		
		/*background-color: #FF9;*/
	}

	
	input.CC_Image
	{
		cursor: pointer;
		border: none;
	}


	div.CC_ImagePanel input,
	div.CC_ImagePanel img
	{
		border: 2px solid white;
		padding: 2px;
	}


	div.CC_ImagePanel .Selected
	{
		border-color: #009;
	}



	/*
		a table represents the dropdown
	*/
	table.CC_DropDownPanel
	{
		background-color: #F99;
		
		width: 100%;
		border: 1px solid #666;
		border-collapse: collapse;
	}

	table.CC_DropDownPanel td,
	table.CC_DropDownPanel th
	{
		text-align: center;
		vertical-align: middle;
		border: 1px solid #666;
		padding: 0;
	}

	table.CC_DropDownPanel th
	{
		cursor:	pointer;
		background-position: center;
		background-repeat: no-repeat;	
		background-color: #E0E0E0;
	}

	/*table.CC_DropDownPanel th:hover
	{
		background-image: url(ss1.gif);
	}*/



	/*
		The dropdown list itself
	*/
	div.CC_DropDownPanel
	{
		width: 100%;
		text-align: center;
		overflow: auto;
		/*height: 96px;*/
	}

	div.CC_DropDownPanel input:hover
	{
		border-color: #999;
	}

	
	
/*

	Chan.Controls.CheckList

*/
table.CC_CheckList,
table.CC_CheckList th,
table.CC_CheckList td
{
	border-collapse: collapse;
	border: 1px solid #999;
	padding: 0;
	background-color: #FFF;
}

table.CC_CheckList
{
}
	
table.CC_CheckList th,
table.CC_CheckList td
{
	padding: 3px;
	text-align: left;
	vertical-align: middle;
}	

/*
	header row and button column
*/
table.CC_CheckList th
{
	background-color: #E0E0E0;
}

/*
	column / cell containing buttons and checkboxes
*/

/*
	data row having a checked checkbox
*/
table.CC_CheckList tr.Selected td
{
	background-color: #FFC;
}	


table.CC_CheckList th input.CC_ImageButton,
table.CC_CheckList th img.CC_Image
{
	padding: 1px;		/* Create just a little space around the buttons */
}

/* checkbox + surround */
table.CC_CheckList th input.CC_CheckBox,
table.CC_CheckList th input.CC_Radio
{
	padding: 0;
	/*background-color: green;*/
}
table.CC_CheckList th span
{
	display: inline-block;
	width: 18px;
	/*height: 18px;
	text-align: center;
	background-color: red;*/
}


/*

	Controls.List
	
*/
ul.CC_List
{
	list-style-type: disc;
}

ol.CC_List
{
	list-style-type: decimal;
}