.chl2_horizontalList {
	/*
	Usage:
	<ul class="chl2_horizontalList"><li>...</ul>
	or
	<ol class="chl2_horizontalList"><li>...</ol>
	
	Note: the final <li> should take the form <li class="chl2_last">...</li>
	*/
	margin:0.5em 0;
	padding:0;
}

.chl2_horizontalList li {
	display:inline;
	padding:0 0.5em;
}

.chl2_horizontalList .chl2_last {
	border:none;
}

/*** LINK WIDGETS ***/

.chl2_addLink {
	padding-left:18px;
	background:url('../images/chl/chl_addLink.html') no-repeat center left;
}

.chl2_removeLink {
	padding-left:18px;
	background:url('../images/chl/chl_removeLink.html') no-repeat center left;
}

.chl2_externalLink {
	padding-right:18px;
	background:url('../images/chl/chl_externalLink.html') no-repeat center right;
}

.chl2_fileLink {
	padding-right:18px;
	background:url('../images/chl/chl_fileLink.html') no-repeat center right;
}

.chl2_rss {
	padding-left:18px;
	background:url('../images/chl/chl_RSS.html') no-repeat center left;
}

.chl2_action {
	font-weight:bold;
}

.chl2_next {
	padding-right:14px;
	background:url('../images/chl/chl_next.html') no-repeat center right;
}

.chl2_nextInactive {
	padding-right:14px;
	background:url('../images/chl/chl_nextInactive.html') no-repeat center right;
}

.chl2_previous {
	padding-left:14px;
	background:url('../images/chl/chl_previous.html') no-repeat center left;
}

.chl2_previousInactive {
	padding-left:14px;
	background:url('../images/chl/chl_previousInactive.html') no-repeat center left;
}

.chl2_sortUp {
    padding-left:14px;
    background:url('../images/chl/chl_sortUp.html') no-repeat center left;
}

.chl2_sortDown {
    padding-left:14px;
    background:url('../images/chl/chl_sortDown.html') no-repeat center left;
}

a.chl2_minorLink,
a.chl2_minorLink:visited {
	color:#666;
}

.chl2_expand,
.chl2_contract {
	display:block;
	width:12px;
	height:12px;
	text-indent:-900em;
	cursor:pointer;
}

.chl2_expand {
    background:url('../images/chl/chl_expand.html') no-repeat 0 0;
}

.chl2_expand:hover {
    background-position:0 100%;
}

.chl2_contract {
    background:url('../images/chl/chl_contract.html') no-repeat 0 0;
}

.chl2_contract:hover {
    background-position:0 100%;
}

/*** TEXT WIDGETS ***/

.chl2_inactive {
	color:#ccc;
}

/*** CONTAINER WIDGETS ***/

.chl2_panel {
	/*	
	Usage:
	<div class="chl2_panel">
		<div class="chl2_header">[optional content...]</div>
		<div class="chl2_body">
			[content...]
		</div>
		<div class="chl2_footer">[optional content...]</div>
	</div>
	*/
	background-color:#eee;
	height:1%; /* ie fix */
}

.chl2_body {
	padding:1.5em;
}

/* Used inside chl2_panel and other widgets */
.chl2_header {

}

/* Used inside chl2_panel and other widgets */
.chl2_footer {

}

/* Used inside chl2_panel and other widgets */
.chl2_wrapper {

}

/* Basic row element */
.chl2_row {
	padding:0.25em 0.5em;
	border-bottom:solid 1px #bcbcbc;
}

/* A collection of chl2_row widgets */
.chl2_rowCollection {
	/*
	Usage:
	<div class="chl2_rowCollection">
		<div class="chl2_row chl2_odd">[content...]</div>
		<div class="chl2_row chl2_even">[content...]</div>
	</div>
	*/
	border-top:solid 1px #bcbcbc;
	height:1%; /* ie fix */
}

/* Nested row */
.chl2_row .chl2_row {
	/* 
	Applies to:
	<div class="chl2_row">
		[content...]
		<div class="chl2_row">[content...]</div>
	</div>
	*/
	margin-top:0.25em;
	/* Stop cumulative padding */
	padding-bottom:0;
	/* Switch borders */
	border-top:solid 1px #bcbcbc;
	border-bottom:none;
}

/* 2 column layout */
/* Apply a simple two column layout to chl2_row */
.chl2_2Column {
	/*
	Usage:
	<div class="chl2_rowCollection chl2_2Column">
		<div class="chl2_row">
			<div class="chl2_columnCollection">
				<div class="chl2_left">[content...]</div>
				<div class="chl2_right">[content...]</div>
				<div class="chl2_clear"></div>
			</div>
		</div>
	</div>
	*/
}

.chl2_2Column .chl2_row {
	padding-top:0;
	padding-bottom:0;
}

.chl2_2Column .chl2_columnCollection {
	/* Add a border between columns */
	background:url('../images/chl/chl_2Column.html') repeat-y 30% top;
	height:1%; /* ie fix */
}

.chl2_2Column .chl2_columnCollection .chl2_left {
	padding:0.25em 0;
	/* Include a margin between columns */
	width:28.75%;
}

.chl2_2Column .chl2_columnCollection .chl2_right {
	padding:0.25em 0;
	/* Include a margin between columns */
	width:68.75%;
}

/* chl2_2ColumnList */
.chl2_2ColumnList {
	/* used for continuous data that flows between columns */
	/*
	Usage:
	<div class="chl2_2ColumnList">
		<div class="chl2_left">[content...]</div>
		<div class="chl2_right">[content...]</div>
		<div class="chl2_clear"></div>
	</div>
	*/
	padding:0.5em;
	background:url('../images/chl/chl_2Column.html') repeat-y 50% top;

}

.chl2_2ColumnList .chl2_left {
	width:48.75%;
}

.chl2_2ColumnList .chl2_right {
	width:48.75%;
}

/* paginated data */
.chl2_paginatedSet {
	/*
	Usage:
	<div class="chl2_paginatedSet">
		<div class="chl2_header">
			<div class="chl2_left">
				Showing results 1 to 10 of 16
			</div>
			<div class="chl2_right">
				<div class="chl2_pagination">
					<span class="chl2_previousInactive">Previous</span>
					<span class="chl2_active">1</span> <a href="#">2</a> <a href="#">3</a>
					<span><a class="chl2_next" href="#">Next</a></span>
				</div>
			</div>
			<div class="chl2_clear"></div>
		</div>
		[content...]
		<div class="chl2_footer">
			<div class="chl2_pagination">
				<span class="chl2_previousInactive">Previous</span>
				<span class="chl2_active">1</span> <a href="#">2</a> <a href="#">3</a>
				<span><a class="chl2_next" href="#">Next</a></span>
			</div>
		</div>
	</div>
	*/
}

.chl2_paginatedSet .chl2_pagination {
	text-align:right;
}

.chl2_paginatedSet .chl2_header {
	padding:0.25em 0.5em;
	border-bottom:solid 1px #bcbcbc;	
}

.chl2_paginatedSet .chl2_footer {
	padding:0.25em 0.5em;
	border-top:solid 1px #bcbcbc;
}

/* chl2_imageTextGroup */
/* group an image with related text */
.chl2_imageTextGroup {
	/*
	Usage:
	<div class="chl2_imageTextGroup">
		<div class="chl2_imageTextGroup">[image...]</div>
		<div class="chl2_imageTextGroup">[text...]</div>
		<div class="chl2_clear"></div>
	</div>
	*/
}

.chl2_image {
	/* the imageTextGroup image */
}

.chl2_text {
	/* the imageTextGroup text */
}

/*** TAB WIDGETS ***/

/* A basic tab layout. Content is placed in chl2_body. */
.chl2_tabSet {
	/*
	Usage:
	<div class="chl2_tabSet">
		<div class="chl2_tabList">
			<ul>
				<li class="chl2_active">[first link]</li>
				[...]
				<li class="chl2_last">[last link]</li>
			</ul>
			<div class="chl2_clear"></div>
		</div>
		<div class="chl2_tabHeader"></div>
		<div class="chl2_tabBody">
			[content...]
		</div>
		<div class="chl2_tabFooter"></div>
	</div>
	*/
	
	height:1%; /* ie fix */
}

.chl2_tabList {
	/* Contains a list of links */
}

.chl2_tabList ul {
	margin:0;
	padding:0;
}

.chl2_tabList li {
	display:block;
	margin:0;
	padding:0;
	background-color:#ccc;
	border-left:solid 1px #666;
	border-top:solid 1px #666;
	float:left;
}

.chl2_tabList li a {
	display:block;
	padding:0.5em;
}

.chl2_tabList li a:hover {
	background-color:#eee;
}

.chl2_tabList li.chl2_active {
	background-color:#fff;
}

.chl2_tabList li.chl2_last {
	/* Add a border to the final list element */
	border-right:solid 1px #666;
}

.chl2_tabSet .chl2_tabHeader {
	clear:both;
}

.chl2_tabBody {
	border:solid 1px #666;
	height:1%; /* for ie */
	clear:both;
}

/*** ALERT WIDGETS ***/

.chl2_systemMessage {
	/*
	Usage:
	<div class="chl2_systemMessage">
		<div class="chl2_warning">
			<h6>[title...]</h6>
			[content...]
		</div>
	</div>	
	*/
	margin-bottom:0.5em;
}

.chl2_systemMessage .chl2_warning, 
.chl2_systemMessage .chl2_error, 
.chl2_systemMessage .chl2_success,
.chl2_systemMessage .chl2_information {
	padding:0.5em;
}

/*** HIGHLIGHTING ***/

.chl2_new {
	padding:0 0.25em;
	background-color:#fff2b2;
	border:solid 1px #ffdd33;
}

.chl2_warning {
	padding:0 0.25em;
	background-color:#f2b230;
	border:solid 1px #d99815;
}

.chl2_error {
	padding:0 0.25em;
	background-color:#e8a7a7;
	border:solid 1px #d96d6d;
}

.chl2_success {
	padding:0 0.25em;
	background-color:#a9d4bf;
	border:solid 1px #008040;
}

.chl2_information {
	padding:0 0.25em;
	background-color:#ccc;
	border:solid 1px #999;
}

/*** TABLE WIDGETS ***/

.chl2_table {
	width:100%;
	border-collapse:collapse;
}

.chl2_table td, .chl2_table th {
	border:solid 1px #bcbcbc;
}

.chl2_table th {
	text-align:left;
}

.chl2_table td , .chl2_table th {
	padding:0.25em 0.5em;
}

.chl2_table .chl2_active {
	background:#eee;
}

/*** APPEARANCE MODIFIERS ***/

/* These classes are visual rather than semantic. A possible usage is alernating the background colour of a row, e.g. <div class="chl2_row chl2_odd"></div> */

.chl2_odd {
	background-color:#fff;
}

.chl2_even {
	background-color:#eee;
}

.chl2_active {
	/* A placeholder class. Refer to .chl2_tabList li.chl2_active for example usage. */
}

.chl2_important {
	/* A placeholder class. Refer to .chl2_w_blog1 for example usage. */
}

.chl2_sticky {
	background-color:#fff2b2;
}

/* Modify the last element in a list, row collection, etc. */
.chl2_last {
	/* A placeholder class. Refer to .chl2_horizontalList .chl2_last for example usage. */
}

.chl2_label {
	font-weight:bold;
}

.chl2_value {
	/* A placeholder class. Used with chl2_label */
}

table.chl2_labelValueGroup,
.chl2_labelValueGroup td,
.chl2_labelValueGroup th {
	border:none;
	width:auto;
}

.chl2_title {
	/* A placeholder class. Refer to .chl2_title h6 for example usage. */
}

/* Display headings as block level elements that span the full width of their container. */
.chl2_title h6 {
	/*
	Usage:
	<div class="chl2_rowCollection chl2_2Column chl2_title">
		<div class="chl2_row">
			<h6>[title...]</h6>
			[content...]
		</div>
	</div>
	*/
	display:block;
	padding:0.5em;
	background-color:#ccc;
}

/*** LAYOUT AND POSITION MODIFIERS ***/

/* These classes are functional rather than semantic, e.g. chl2_clear is used to reset the document flow (especially useful after floated elements). */

.chl2_left {
	float:left;
}

.chl2_right {
	float:right;
}

.chl2_clear {
	clear:both;
}

/*** FORM WIDGETS ***/

.chl2_form {
	margin:0;
	padding:0.5em;
	position:relative; /* ie fix */	
	background-color:#eee;
	overflow:hidden; /* ie fix */
}

.chl2_form fieldset {
	margin:0;
	margin-bottom:1em;
	padding:0.5em;
}

.chl2_form legend {
	font-weight:bold;
}

.chl2_form .chl2_formItem {
	margin:0.25em 0;
	padding:0.5em;
}

.chl2_form label {
	display:block;
	float:left;
	padding:0.25em 0.5em;
	text-align:right;
	width:25%;
}

.chl2_form .chl2_required label span {
	color:#ff0000;
}

.chl2_field {
	float:left;
}

/* used with radio buttons and checkboxes */
.chl2_labelledField {
	padding:0.25em 0;
	display:block;
}

.chl2_labelledField label {
	display:inline;
	padding:0;
	width:auto;
	text-align:left;
	float:none;
}

.chl2_labelledField .chl2_radio {
	vertical-align:top;
}

.chl2_labelledField .chl2_checkbox {
	vertical-align:bottom;
}

.chl2_textbox {

}

.chl2_password {

}

.chl2_textarea {

}

.chl2_checkbox {

}

.chl2_radio {

}

.chl2_select {

}

.chl2_multipleSelect {

}

.chl2_fileUpload {

}

.chl2_button {
	/* The standard button style */
	font-size:1em;
}

.chl2_minorButton {
	/* Represents a minor action */
	font-size:0.825em;
}

.chl2_majorButton {
	/* Represents a key action */
	font-weight:bold;
	font-size:1em;
}

/* form validation and help */
.chl2_formItem.chl2_error {
	font-weight:bold;
}

.chl2_validationMessage {
	display:block;
	margin-top:0.25em;
	padding:0.25em 0.5em;
	background-color:#d96d6d;
	color:#fff;
}

.chl2_formHelp {
	display:block;
	margin-left:0.5em;
	width:20px;
	height:20px;
	float:left;
	background:url('../images/chl/chl_formHelp.html') no-repeat 50% 50%;
}

.chl2_formHelp span {
	position:absolute;
	visibility:hidden;
	text-indent:-900em;
}

.chl2_formDatePicker {
	display:block;
	margin-left:0.5em;
	width:20px;
	height:14px;
	float:left;
	background:url('../images/chl/chl_formDatePicker.html') no-repeat 50% 50%;
}

.chl2_formDatePicker span {
	position:absolute;
	visibility:hidden;
	text-indent:-900em;
}