/* core.css */

/* This file contains the basic components required for Datalink websites. 

/* The chl2_ prefix is reserved for core buildig blocks. No custom CSS or HTML should use this prefix. */

/* All widgets use classes and not IDs — a widget is a repeatable element. */

/* IMPORTANT - All sites, including those by third party developers should contain a div with the CLASS of "content". This allows basic elements, such as h1s to be targeted by the following CSS without breaking the supplied layout. */

/* This file shows the correct formatting of CSS. */

.content {

}

/*** BASIC TEXT WIDGETS ***/

.content h1 {

}

.content h2 {

}

.content h3 {

}

.content h4 {

}

/* The default heading level for widgets. */
h5 {
	margin:0.25em 0;
	padding:0;
	font-size:1em;
}

/* The second heading level for widgets. */
h6 {
	margin:0.25em 0;
	padding:0;
	font-size:1em;
}

.content p {

}

a img, a:visited img {
	border:none;
}

/*** PAGE LAYOUT WIDGETS ***/
/* page level layouts; separate to widget level layouts */
.chl2_page_wrapper {

}

.chl2_page_2Column {
	background:url('../images/chl/chl_page_2Column.gif') repeat-y center top;
	height:1%; /* for ie */
}

.chl2_page_2Column .chl2_page_column {
	width:47.5%;
}


/*** LIST WIDGETS ***/

.content ul {

}

.content ol {

}

.content li {

}

.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;
	border-right:solid 1px #000;
}

.chl2_horizontalList .chl2_last {
	border:none;
}

/*** LINK WIDGETS ***/

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

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

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

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

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

.chl2_action {
	font-weight:bold;
}

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

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

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

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

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

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

/*** 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:0.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_columnCollection .chl2_row {
	padding-top:0;
	padding-bottom:0;
}

.chl2_2Column .chl2_columnCollection {
	/* Add a border between columns */
	background:url('../images/chl/chl_2Column.gif') 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.gif') 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_left {
	width:58.75%;
}

.chl2_paginatedSet .chl2_right {
	width:38.75%;
}

.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;
	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;
}

.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 #333;
}

/*** 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. */
}

/* 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;
	background-color:#eee;
}

.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.gif') 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.gif') no-repeat 50% 50%;
}

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

.venueSearch {

	float: right;
    line-height: 15px;
}

.venueSearch .text {
	border: 1px solid #999999;
	color: #999999;
	margin: 5px 5px 0 0;
	padding: 2px 4px;
	font-size: 0.8em;
}

.ui-menu-item {
	font-size: 0.8em;
}

.ui-menu-item hover {
	font-size: 0.8em;
}

.ui-autocomplete, .ui-autocomplete .ui-menu-item, .ui-autocomplete .ui-menu-item a {
	background: none;
	border: none;
}

.ui-autocomplete .ui-menu-item a:hover {
	background: #FE7614;
}
.ui-autocomplete {
	max-height: 250px;
	overflow-y: scroll;
	overflow-x: hidden;
}